Remove redundant info rendering code

game.js

@@ -17,53 +17,13 @@ function initGame(story, state) {
   state.timers = [];
 }
 
-function initGamePostSetup(state) {
-  const world_holder = document.querySelector("#world-info");
-
-  world_holder.innerHTML = "";
-
-  Object.entries(state.info).forEach(([key, val]) => {
+function createStatDisplays(stats, statType) {
+  const holder = document.querySelector("#" + statType + "-info")
+  Object.entries(stats).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") {
-      const field = document.createElement("div");
-      field.id = "player-info-" + key;
+      field.id = statType + "-info-" + key;
       field.setAttribute("max", val.max);
       field.setAttribute("value", val.value);
       field.classList.add("stat-bar-holder");
@@ -82,15 +42,16 @@ function initGamePostSetup(state) {
       holder.appendChild(field);
     } else if (val.type == "counter") {
       const field = document.createElement("div");
-      field.id = "player-info-" + key;
-      field.setAttribute("max", val.max);
-      field.setAttribute("value", val.value);
+      field.id = statType + "-info-" + key;
 
       holder.appendChild(field);
     }
-
   });
 }
+function initGamePostSetup(state) {
+  createStatDisplays(state.info, "world");
+  createStatDisplays(state.player.stats, "player");
+}
 
 function changeStat(stat, amount, state) {
   let value = state.player.stats[stat].value;

satiate.html

@@ -56,6 +56,9 @@
         <div class="sidebar" id="area-info">
           <div id="area-name"></div>
           <div id="area-desc"></div>
+          <div id="area-info">
+            <div class="info-header" id="area-info-header">Area</div>
+          </div>
         </div>
       </div>
       <div id="control-area">