Add stats and options menus.

Stats can track a variety of things about the game, and are stored in the save.
The options menu lets you reconfigure things like your name and species.

constants.js

@@ -1442,9 +1442,29 @@ const freeBuildingPowerupText = {
 const statTypes = {
   powerups: {
     name: "Powerups Clicked"
+  },
+  seconds: {
+    name: "Seconds Played"
+  },
+  clicks: {
+    name: "Clicks"
   }
 }
 
+const options = {
+  name: {
+    name: "Your name",
+    type: "text",
+    set: value => macroDesc.name = value,
+    get: () => macroDesc.name
+  },
+  species: {
+    name: "Your species",
+    type: "text",
+    set: value => macroDesc.species = value,
+    get: () => macroDesc.species
+  }
+}
 deepFreeze(prodUpgradeText);
 deepFreeze(prodAllUpgradeText);
 deepFreeze(clickUpgradeText);

gorge.css

@@ -666,3 +666,66 @@ div::-webkit-scrollbar-corner {
     z-index: 2;
   }
 }
+
+.modal {
+  position: absolute;
+  z-index: 3;
+  background: rgba(0, 0, 0, 0.7);
+  top: 0%;
+  left: 0%;
+  height: 100%;
+  width: 100%;
+  display: none;
+}
+
+.modal .modal-contents {
+  position: absolute;
+  width: 60%;
+  height: 60%;
+  text-align: center;
+  vertical-align: middle;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.modal.modal-active {
+  display: block;
+}
+
+.modal-exit {
+  width: 15vw;
+  height: 7.5vh;
+  font-size: 3vh;
+}
+
+.stat-line,
+.option-line {
+  font-size: 18px;
+  width: 100%;
+  height: 24px;
+}
+
+.stat-line:nth-child(even),
+.option-line:nth-child(even) {
+  background: #333;
+}
+
+.stat-line:nth-child(odd),
+.option-line:nth-child(odd) {
+  background: #222;
+}
+
+.stat-name,
+.option-name {
+  width: 50%;
+  float: left;
+}
+
+.stat-value,
+.option-value {
+  width: 50%;
+  max-width: 50%;
+  box-sizing: border-box;
+  float: right;
+}

gorge.html

@@ -33,6 +33,8 @@
     <button id="save">Save</button>
     <button id="reset">Reset saved data</button>
     <button id="numbers">Number mode???</button>
+    <button id="stats">Stats</button>
+    <button id="options">Options</button>
   </div>
   <div id="resources-area">
     <div id="resources" class="title">Resources</div>
@@ -68,5 +70,16 @@
     </div>
     <div id="buildings-list"></div>
   </div>
-
+  <div class="modal" id="stats-modal">
+    <div class="modal-contents">
+      <div id="stats-holder"></div>
+      <button class="modal-exit" id="stats-exit">Close</button>
+    </div>
+  </div>
+  <div class="modal" id="options-modal">
+    <div class="modal-contents">
+        <div id="options-holder"></div>
+      <button class="modal-exit" id="options-exit">Close</button>
+    </div>
+  </div>
 </body>

gorge.js

@@ -254,6 +254,14 @@ function updateDisplay() {
   displayUpgrades(showOwnedUpgrades);
   tickPowerups(delta);
 
+  Object.keys(statTypes).forEach(key => {
+    const value = document.querySelector("#stat-value-" + key);
+
+    value.innerText = render(stats[key]);
+  })
+
+  stats.seconds += delta / 1000;
+
   setTimeout(updateDisplay, 1000 / updateRate);
 }
 
@@ -498,9 +506,9 @@ function setup() {
   initializeCaches();
   initializeStates();
   updateAll();
-
 }
 
+
 const cache = {};
 
 function initializeCaches() {
@@ -664,14 +672,20 @@ function registerListeners() {
     const gulp = "*glp*";
     clickPopup(text, "food", [e.clientX, e.clientY]);
     clickPopup(gulp, "gulp", [e.clientX, e.clientY]);
+    stats.clicks += 1;
   });
 
   document.querySelector("#save").addEventListener("click", save);
-
   document.querySelector("#reset").addEventListener("click", reset);
-
   document.querySelector("#numbers").addEventListener("click", cycleNumbers);
 
+  document.querySelector("#stats").addEventListener("click", () => document.querySelector("#stats-modal").classList.add("modal-active"));
+  document.querySelector("#options").addEventListener("click", openOptions);
+
+  document.querySelector("#stats-exit").addEventListener("click", () => document.querySelector("#stats-modal").classList.remove("modal-active"));
+  document.querySelector("#options-exit").addEventListener("click", closeOptions);
+
+  
   document.querySelector("#upgrades").addEventListener("click", switchShowOwnedUpgrades);
 
   document.addEventListener("keydown", e => {
@@ -691,6 +705,25 @@ function registerListeners() {
   });
 }
 
+function openOptions() {
+  document.querySelector("#options-modal").classList.add("modal-active");
+
+  Object.keys(options).forEach(key => {
+    const input = document.querySelector("#option-value-" + key);
+    input.value = options[key].get();
+  });
+
+}
+
+function closeOptions() {
+  document.querySelector("#options-modal").classList.remove("modal-active");
+
+  Object.keys(options).forEach(key => {
+    const input = document.querySelector("#option-value-" + key);
+    options[key].set(input.value);
+  });
+}
+
 function createButtons() {
   createBuildings();
   createUpgrades();
@@ -848,6 +881,52 @@ function createDisplays() {
     }
     
   })
+
+  const statHolder = document.querySelector("#stats-holder");
+
+  Object.keys(statTypes).forEach(key => {
+    const div = document.createElement("div");
+    div.classList.add("stat-line");
+
+    const name = document.createElement("div");
+    name.classList.add("stat-name");
+
+    const value = document.createElement("div");
+    value.classList.add("stat-value");
+    value.id = "stat-value-" + key;
+
+    name.innerText = statTypes[key].name;
+
+    value.innerText = stats[key];
+
+    div.appendChild(name);
+    div.appendChild(value);
+
+    statHolder.append(div);
+  });
+
+  const optionHolder = document.querySelector("#options-holder");
+
+  Object.keys(options).forEach(key => {
+    const div = document.createElement("div");
+    div.classList.add("option-line");
+
+    const name = document.createElement("div");
+    name.classList.add("option-name");
+
+    const value = document.createElement("input");
+    value.classList.add("option-value");
+    value.id = "option-value-" + key;
+
+    name.innerText = options[key].name;
+
+    value.innerText = options[key].get();
+
+    div.appendChild(name);
+    div.appendChild(value);
+
+    optionHolder.append(div);
+  });
 }
 
 function renderLine(line) {
@@ -1247,6 +1326,7 @@ function saveGame() {
     save.resources = resources;
     save.belongings = belongings;
     save.stats = stats;
+    save.macroDesc = macroDesc;
 
     storage.setItem("save", JSON.stringify(save));
   } catch (e) {
@@ -1264,6 +1344,11 @@ const migrations = [
   // introduce stats
   save => {
     save.stats = {}
+  },
+
+  // introduce macroDesc
+  save => {
+    save.macroDesc = {}
   }
 ]
 
@@ -1317,6 +1402,10 @@ function load() {
     for (const [key, value] of Object.entries(save.stats)) {
       stats[key] = value;
     }
+
+    for (const [key, value] of Object.entries(save.macroDesc)) {
+      macroDesc[key] = value;
+    }
   } catch (e) {
     console.error(e);
     clickPopup("Can't load - no access to local storage.", "info", [window.innerWidth / 2, window.innerHeight / 5]);