diff --git a/game.js b/game.js index 1041ee5..605eed8 100644 --- a/game.js +++ b/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; } diff --git a/satiate.html b/satiate.html index a571d43..25c94b3 100644 --- a/satiate.html +++ b/satiate.html @@ -46,7 +46,6 @@