Make world info work like player stats

game.js

@@ -2,7 +2,15 @@ stories = [];
 
 function initGame(story, state) {
   state.info = {};
-  state.info.time = 60 * 60 * 9;
+  state.info.time = {
+    id: "time",
+    name: "Time",
+    type: "counter",
+    value: 60*60*9,
+    get render() {
+      return renderTime(this.value);
+    }
+  }
 
   state.player.stats = {};
 
@@ -10,10 +18,47 @@ function initGame(story, state) {
 }
 
 function initGamePostSetup(state) {
+  const world_holder = document.querySelector("#world-info");
+
+  world_holder.innerHTML = "";
+
+  Object.entries(state.info).forEach(([key, val]) => {
+
+    if (val.type == "meter") {
+      const field = document.createElement("div");
+      field.id = "world-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);
+
+      world_holder.appendChild(field);
+    } else if (val.type == "counter") {
+      const field = document.createElement("div");
+      field.id = "world-info-" + key;
+      field.setAttribute("max", val.max);
+      field.setAttribute("value", val.value);
+
+      world_holder.appendChild(field);
+    }
+
+  });
+
   const holder = document.querySelector("#player-info");
 
   holder.innerHTML = "";
 
+  
   Object.entries(state.player.stats).forEach(([key, val]) => {
 
     if (val.type == "meter") {
@@ -40,11 +85,6 @@ function initGamePostSetup(state) {
       field.id = "player-info-" + key;
       field.setAttribute("max", val.max);
       field.setAttribute("value", val.value);
-      field.classList.add("counter-holder");
-
-      const counter = document.createElement("div");
-      counter.classList.add("stat-counter");
-      field.appendChild(counter);
 
       holder.appendChild(field);
     }
@@ -77,9 +117,17 @@ function renderTime(time) {
 }
 
 function updateWorldInfo(state) {
-  const timeInfo = document.querySelector("#world-info-time");
+  Object.entries(state.info).forEach(([key, val]) => {
 
-  timeInfo.textContent = "Time: " + renderTime(state.info.time);
+    if (val.type == "meter") {
+      const field = document.querySelector("#world-info-" + key + " > .stat-bar");
+      field.style.width = (val.value / val.max * 100) + "%";
+    } else if (val.type == "counter") {
+      const field = document.querySelector("#world-info-" + key);
+      field.innerText = val.name + ": " + val.render;
+    }
+
+  });
 }
 
 function updatePlayerInfo(state) {
@@ -89,7 +137,7 @@ function updatePlayerInfo(state) {
       const field = document.querySelector("#player-info-" + key + " > .stat-bar");
       field.style.width = (val.value / val.max * 100) + "%";
     } else if (val.type == "counter") {
-      const field = document.querySelector("#player-info-" + key + " > .stat-counter");
+      const field = document.querySelector("#player-info-" + key);
       field.innerText = val.name + ": " + val.value;
     }
 

satiate.html

@@ -46,7 +46,6 @@
           </div>
           <div id="world-info">
             <div class="info-header" id="world-info-header">World</div>
-            <div id="world-info-time">Time to get a watch!</div>
           </div>
           <div id="player-info">
             <div class="info-header" id="player-info-header">Player</div>

stories/demo.js

@@ -7,7 +7,7 @@ stories.push({
   "intro": {
     "start": "Home",
     "setup": state => {
-      state.info.time = 0;
+      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)"};
     },

stories/fen-snack.js

@@ -28,7 +28,7 @@ stories.push({
   intro: {
     start: "stomach",
     setup: state => {
-      state.info.time = 86400 - 60 * 25 - 25;
+      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)"};
 
@@ -131,8 +131,8 @@ stories.push({
       startTimer({
         id: "clock",
         func: state => {
-          state.info.time += 1;
-          state.info.time %= 86400;
+          state.info.time.value += 1;
+          state.info.time.value %= 86400;
 
           return true;
         },