diff --git a/gorge.css b/gorge.css index 2cb549c..6890496 100644 --- a/gorge.css +++ b/gorge.css @@ -23,10 +23,8 @@ button { background-color: #211; width: 300px; height: 200px; - position: fixed; - left: 15%; - top: 50%; - bottom: 50%; + position: relative; + top: 30px; margin: auto; font-size: 60px; } @@ -45,11 +43,12 @@ button { #resources-area { position: absolute; text-align: center; - width: 20%; + width: 35%; left: 0%; top: 10%; height: 90%; margin: auto; + font-size: 36px; } #buildings-area { diff --git a/gorge.html b/gorge.html index f6c2bb3..f2bd07a 100644 --- a/gorge.html +++ b/gorge.html @@ -28,8 +28,8 @@
Resources
+ -
Upgrades
diff --git a/gorge.js b/gorge.js index 1a8553f..04a0a79 100644 --- a/gorge.js +++ b/gorge.js @@ -99,9 +99,24 @@ function addResources(delta) { function displayResources() { document.title = "Gorge - " + round(resources.food) + " food"; - document.getElementById("resource-food").innerText = "Food: " + render(resources.food); - document.getElementById("productivity").innerText = round(calculateProductivity(), 1) + " food/sec"; + replaceChildren(document.querySelector("#resource-list"), renderResources()); +} + +function renderResources() { + let list = []; + + + for (const [key, value] of Object.entries(resources)) { + + let line1 = round(value) + " " + resourceTypes[key].name; + let line2 = round(currentProductivity[key],1) + " " + resourceTypes[key].name + "/sec"; + + list.push({"text": line1}); + list.push({"text": line2}); + } + + return renderLines(list); } function displayBuildings() { @@ -225,6 +240,7 @@ function initializeData() { } for (const [key, value] of Object.entries(resourceTypes)) { + resources[key] = 0; currentProductivity[key] = 0; } @@ -376,17 +392,7 @@ function createUpgrades() { } function createDisplays() { - let resourceList = document.querySelector("#resource-list"); - - for (const [key, value] of Object.entries(resourceTypes)) { - resources[key] = 0; - - let line = document.createElement("div"); - - line.id = "resource-" + key; - - resourceList.appendChild(line); - } + // nop } function renderLine(line) {