From: Stephen Jianu Date: Sun, 31 Dec 2023 22:29:17 +0000 (-0600) Subject: Add Settings panel with a button to change themes X-Git-Url: https://stephenjianu.com/gitweb/?a=commitdiff_plain;h=729c71fac011c7cb2cea3dead1656f77381332e7;p=donsol-js.git Add Settings panel with a button to change themes Only 2 themes besides the default are implemented for now. More to come! --- diff --git a/sources/index.html b/sources/index.html index 93bb5b4..e8ba85a 100644 --- a/sources/index.html +++ b/sources/index.html @@ -18,6 +18,7 @@ + diff --git a/sources/links/main.css b/sources/links/main.css index b127901..e7d4cc6 100644 --- a/sources/links/main.css +++ b/sources/links/main.css @@ -2,15 +2,17 @@ body { background:black; font-family: 'input_mono_regular',monospace; min-width: #wrapper { display: block;max-width: 900px; height: calc(25vw * 1.25 + 90px);max-height:400px;margin:0px auto;position: relative;width:100%; -webkit-app-region: drag;} -#player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:30px; width:calc(100% - 60px);} +#player { display: block; font-size:12px; height:30px; line-height:20px; max-width:890px; -webkit-user-select: none;-webkit-app-region: drag; position: fixed; bottom:60px; width:calc(100% - 60px);} #player > * { vertical-align: top } #player .gage { width: 120px;display: block;height:30px;position: relative; float:right; margin-left:2px;width:70px; padding-right: 50px; text-align: right} #player .gage .value { display: inline-block;line-height: 20px;font-family: 'input_mono_medium';padding-left: 5px;} #player .gage .event { display: inline-block;position: absolute;top: -20px;left: 0px; transition: all 250ms; opacity: 0; margin-left:5px; display: none} #player .gage .progress { display: block;width: 40px;position: absolute; top:7px;overflow: hidden;height: 4px;border-radius: 20px;right:0px;} #player .gage .progress .bar{ height:5px; display:block !important; transition: width 300ms} -#player a.escape { -webkit-app-region: no-drag;padding: 0px 8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid white; margin-top:0px; color:white;} -#player a.escape:hover { cursor: pointer; } +#player .button { -webkit-app-region: no-drag;padding: 0px 8px;border-radius: 20px;display: inline-block;margin-right: 10px;line-height: 20px; border:2px solid white; margin-top:0px; color:white;} +#player .button:hover { cursor: pointer; } +#player select.button { appearance: none;-webkit-appearance: none;background-color: transparent; } +#player .settings { text-align: right; } #player div#timeline { display: inline-block;color:white; transition: opacity 250ms; opacity: 0 } #player div#timeline b { font-family: 'input_mono_medium',monospace; } diff --git a/sources/links/theme.css b/sources/links/theme.css index 9430a8b..92ad78c 100644 --- a/sources/links/theme.css +++ b/sources/links/theme.css @@ -29,8 +29,8 @@ svg .fill_grey { opacity:0.25; fill:var(--f_low) !important } /* White */ svg .fill_white { fill:var(--b_high) !important } -#player a.escape { border:2px solid var(--b_high) !important; color: var(--b_high); } -#player a.escape:hover { background-color:var(--b_high) !important; color:var(--background); } +#player .button { border:2px solid var(--b_high) !important; color: var(--b_high); } +#player .button:hover { background-color:var(--b_high) !important; color:var(--background); } #board card .face { background-color:var(--b_high)} .card_11 .face .name,.card_13 .face .name,.card_15 .face .name,.card_17 .face .name { color:var(--b_high);} #player .gage { color:var(--b_high) } diff --git a/sources/scripts/donsol.js b/sources/scripts/donsol.js index 2553a1a..e0e2656 100644 --- a/sources/scripts/donsol.js +++ b/sources/scripts/donsol.js @@ -7,7 +7,7 @@ const SPADE = 'spade' const JOKER = 'joker' function Donsol () { - const defaultTheme = { + this.defaultTheme = { background: '#000000', f_high: '#000000', f_med: '#a93232', @@ -18,8 +18,30 @@ function Donsol () { b_low: '#333333', b_inv: '#a93232' } + this.gameboyTheme = { + background: '#9BBC0F', + f_high: '#0F380F', + f_med: '#0F380F', + f_low: '#306230', + f_inv: '#9BBC0F', + b_high: '#8BAC0F', + b_med: '#8BAC0F', + b_low: '#9BBC0F', + b_inv: '#0F380F' + } + this.nightowlTheme = { + background: '#011627', + f_high: '#7fdbca', + f_med: '#82aaff', + f_low: '#c792ea', + f_inv: '#637777', + b_high: '#5f7e97', + b_med: '#456075', + b_low: '#2f4759', + b_inv: '#7fdbca' + } - this.theme = new Theme(defaultTheme) + this.theme = new Theme(this.defaultTheme) this.deck = new Deck() this.board = new Board() diff --git a/sources/scripts/player.js b/sources/scripts/player.js index bf7ef5e..d787b91 100644 --- a/sources/scripts/player.js +++ b/sources/scripts/player.js @@ -5,6 +5,7 @@ function Player () { this.health = new Gage_Health('Health', 21, '#ff0000') this.shield = new Gage_Shield('Shield', 0, '#72dec2') this.experience = new Gage('Experience', 0, '#ffffff') + this.settings = new Settings() this.can_drink = true this.has_escaped = false @@ -33,11 +34,12 @@ function Player () { } this.install = function () { + this.element.appendChild(this.settings.install()) this.element.appendChild(this.experience.install()) this.element.appendChild(this.shield.install()) this.element.appendChild(this.health.install()) - this.escape_button.setAttribute('class', 'escape') + this.escape_button.setAttribute('class', 'escape button') this.escape_button.innerHTML = 'Escape' this.element.appendChild(this.escape_button) this.timeline_element.setAttribute('class', 'timeline') @@ -145,6 +147,23 @@ function Player () { donsol.timeline.add_event('Escaped the room!') } + this.change_theme = function (theme_value) { + let new_theme = '' + if (theme_value.localeCompare('theme') === 0) { + new_theme = donsol.defaultTheme + } + if (theme_value.localeCompare('gameboy') === 0) { + new_theme = donsol.gameboyTheme + } + if (theme_value.localeCompare('nightowl') === 0) { + new_theme = donsol.nightowlTheme + } + donsol.theme = new Theme(new_theme) + donsol.theme.load(new_theme) + donsol.theme.install(document.body) + donsol.theme.start() + } + this.update = function () { if (this.health.value < 1) { this.escape_button.innerHTML = 'Restart' diff --git a/sources/scripts/settings.js b/sources/scripts/settings.js new file mode 100644 index 0000000..773d6dc --- /dev/null +++ b/sources/scripts/settings.js @@ -0,0 +1,22 @@ +'use strict' + +function Settings () { + this.element = null + this.theme_button = null + + this.install = function () { + this.element = document.createElement('div') + this.element.setAttribute('class', 'settings') + + this.theme_button = document.createElement('select') + this.theme_button.setAttribute('class', 'theme button') + this.theme_button.innerHTML = '' + this.theme_button.innerHTML += '' + this.theme_button.innerHTML += '' + this.theme_button.addEventListener('mousedown', () => { donsol.player.change_theme(this.theme_button.value) }) + + this.element.appendChild(this.theme_button) + + return this.element + } +}