From 0167d406081495451c4dd4e3aeea39666b7c81a5 Mon Sep 17 00:00:00 2001
From: Fen Dweller <chemicalcrux@gmail.com>
Date: Sun, 13 Jan 2019 10:11:19 -0500
Subject: [PATCH] Made stats into nice looking meters

---
 game.js              | 33 ++++++++++++++++++++++++++++-----
 satiate.css          | 22 ++++++++++++++++++++++
 stories/fen-snack.js |  4 ++--
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/game.js b/game.js
index b700f81..1f12b96 100644
--- a/game.js
+++ b/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) + "%";
+    }
+
   });
 }
 
diff --git a/satiate.css b/satiate.css
index 2c8b225..11aebce 100644
--- a/satiate.css
+++ b/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;
diff --git a/stories/fen-snack.js b/stories/fen-snack.js
index a094b97..74f8be9 100644
--- a/stories/fen-snack.js
+++ b/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",