Allow for stat bar colors to change

game.js

@@ -36,7 +36,7 @@ function createStatDisplays(stats, statType) {
 
       const bar = document.createElement("div");
       bar.classList.add("stat-bar");
-      bar.style["background-color"] = val.color;
+      bar.style["background-color"] = val.color(val);
 
       field.appendChild(label);
       field.appendChild(bar);
@@ -90,9 +90,14 @@ function updateStatDisplay(stats, statType) {
     if (val.hidden === true) {
       const field = document.querySelector("#" + statType + "-info-" + key);
       field.style.display = "none";
-    } else if (val.hidden === false) {
+    } else {
       const field = document.querySelector("#" + statType + "-info-" + key);
       field.style.display = "block";
+
+      if (val.type == "meter") {
+        const bar = document.querySelector("#" + statType + "-info-" + key + " > .stat-bar");
+        bar.style["background-color"] = val.color(val);
+      }
     }
 
     if (val.type == "meter") {

stories/demo.js

@@ -9,8 +9,8 @@ stories.push({
     "start": "Home",
     "setup": () => {
       state.info.time.value = 3600;
-      state.player.stats.oofs = {name: "Oofs", type: "meter", value: 0, max: 10, color: "rgb(255,0,0)"};
-      state.player.stats.number = {name: "Number", type: "counter", value: 0, max: 10, color: "rgb(255,255,255)"};
+      state.player.stats.oofs = {name: "Oofs", type: "meter", value: 0, max: 10, color: (self) => { console.log('hi'); return "rgb(" + (155 + self.value*10) + ",0,0)"}};
+      state.player.stats.number = {name: "Number", type: "counter", value: 0, max: 10, color: () => "rgb(255,255,255)"};
     },
     "intro": () => {
       print(["don't fall down the stairs ok"]);

stories/fen-snack.js

@@ -33,8 +33,8 @@ stories.push({
     start: "stomach",
     setup: () => {
       state.info.time.value = 86400 - 60 * 25 - 25;
-      state.player.stats.health = {name: "Health", type: "meter", value: 100, min: 0, max: 100, color: "rgb(255,0,0)"};
-      state.player.stats.stamina = {name: "Stamina", type: "meter", value: 100, min: 0, max: 100, color: "rgb(100,255,0)"};
+      state.player.stats.health = {name: "Health", type: "meter", value: 100, min: 0, max: 100, color: (self) => "rgb(" + (155+self.value) + ",0,0)"};
+      state.player.stats.stamina = {name: "Stamina", type: "meter", value: 100, min: 0, max: 100, color: (self) => "rgb(100," + (155+self.value) + ",0)"};
 
       startTimer({
         id: "taunting",