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) {