Made stats into nice looking meters

game.js

@@ -13,9 +13,28 @@ function initGamePostSetup(state) {
   const holder = document.querySelector("#player-info");
 
   Object.entries(state.player.stats).forEach(([key, val]) => {
-    const field = document.createElement("div");
-    field.id = "player-info-" + key;
-    holder.appendChild(field);
+
+    if (val.type == "meter") {
+      const field = document.createElement("div");
+      field.id = "player-info-" + key;
+      field.setAttribute("max", val.max);
+      field.setAttribute("value", val.value);
+      field.classList.add("stat-bar-holder");
+
+      const label = document.createElement("div");
+      label.classList.add("stat-bar-label");
+      label.textContent = val.name;
+
+      const bar = document.createElement("div");
+      bar.classList.add("stat-bar");
+      bar.style["background-color"] = val.color;
+
+      field.appendChild(label);
+      field.appendChild(bar);
+
+      holder.appendChild(field);
+    }
+
   });
 }
 
@@ -43,8 +62,12 @@ function updateWorldInfo(state) {
 
 function updatePlayerInfo(state) {
   Object.entries(state.player.stats).forEach(([key, val]) => {
-    const field = document.querySelector("#player-info-" + key);
-    field.textContent = val.name + ": " + val.value;
+
+    if (val.type == "meter") {
+      const field = document.querySelector("#player-info-" + key + " > .stat-bar");
+      field.style.width = (val.value / val.max * 100) + "%";
+    }
+
   });
 }
 

satiate.css

@@ -219,6 +219,28 @@ a:hover {
   flex: 5;
 }
 
+.stat-bar-holder {
+  user-select: none;
+  position: relative;
+  width: 100%;
+  height: 30px;
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.stat-bar-label {
+  width: 100%;
+  position: absolute;
+  text-align: center;
+  z-index: 1;
+  mix-blend-mode: difference;
+}
+
+.stat-bar {
+  position: absolute;
+  width: 50%;
+  height: 30px;
+}
+
 .info-header {
   font-size: 36px;
   text-align: center;

stories/fen-snack.js

@@ -10,8 +10,8 @@ stories.push({
   intro: {
     start: "stomach",
     setup: state => {
-      state.player.stats.health = {name: "Health", value: 100};
-      state.player.stats.stamina = {name: "Stamina", value: 100};
+      state.player.stats.health = {name: "Health", type: "meter", value: 100, max: 100, color: "rgb(255,0,0)"};
+      state.player.stats.stamina = {name: "Stamina", type: "meter", value: 100, max: 100, color: "rgb(100,255,0)"};
 
       startTimer({
         id: "digestion",