Add Settings panel with a button to change themes

Only 2 themes besides the default are implemented for now.
More to come!

sources/index.html

@@ -18,6 +18,7 @@
     <script type="text/javascript" src="scripts/board.js"></script>
     <script type="text/javascript" src="scripts/donsol.js"></script>
     <script type="text/javascript" src="scripts/player.js"></script>
+    <script type="text/javascript" src="scripts/settings.js"></script>
     <script type="text/javascript" src="scripts/timeline.js"></script>
     <script type="text/javascript" src="scripts/speaker.js"></script>
 

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; }
 

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) }

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()

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'

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 = '<option value=\"theme\">Theme (default)</option>'
+    this.theme_button.innerHTML += '<option value=\"gameboy\">Game Boy</option>'
+    this.theme_button.innerHTML += '<option value=\"nightowl\">Night Owl</option>'
+    this.theme_button.addEventListener('mousedown', () => { donsol.player.change_theme(this.theme_button.value) })
+
+    this.element.appendChild(this.theme_button)
+
+    return this.element
+  }
+}