Allow viewing of owned upgrades

gorge.css

@@ -429,3 +429,29 @@ div::-webkit-scrollbar-track:active {
 div::-webkit-scrollbar-corner {
   background: transparent;
 }
+
+.switcher-button {
+  position: relative;
+  display: block;
+  background-color: #222;
+  color: #eee;
+  border: 5px;
+  border-color: #666;
+  border-style: solid;
+  user-select: none;
+}
+
+.switcher-button-disabled {
+  background-color: #111;
+  color: #999;
+}
+
+.switcher-button:hover {
+  border-color: #777;
+  background-color: #222;
+}
+
+.switcher-button:active {
+  border-color: #333;
+  background-color: #111;
+}

gorge.html

@@ -33,7 +33,7 @@
   </div>
 
   <div id="upgrades-area">
-    <div id="upgrades" class="title">Upgrades</div>
+    <div id="upgrades" class="title switcher-button">Upgrades</div>
     <div id="upgrade-tooltip">
       <div id="upgrade-tooltip-name"></div>
       <div id="upgrade-tooltip-effect"></div>

gorge.js

@@ -4,6 +4,7 @@ let belongings = {};
 
 let ownedUpgrades = {};
 let remainingUpgrades = [];
+let showOwnedUpgrades = false;
 
 let effects = {};
 
@@ -100,7 +101,7 @@ function updateDisplay() {
   addResources(delta);
   displayResources();
   displayBuildings();
-  displayUpgrades();
+  displayUpgrades(showOwnedUpgrades);
 
   setTimeout(updateDisplay, 1000/updateRate);
 }
@@ -183,32 +184,56 @@ function spend(cost) {
   }
 }
 
-function displayUpgrades() {
-  for (let id of remainingUpgrades) {
-    let button = document.querySelector("#upgrade-" + id);
-
-    if (ownedUpgrades[id]) {
-      button.style.display = "none";
-      continue;
-    }
-    if (upgradeReachable(id)) {
-      button.classList.remove("hidden");
-    } else {
-      button.classList.add("hidden");
-    }
-    if (upgradeAvailable(id)) {
-      button.classList.remove("upgrade-button-inactive");
-    } else {
-      button.classList.add("upgrade-button-inactive");
-    }
+function switchShowOwnedUpgrades() {
+  if (showOwnedUpgrades) {
+    document.querySelector("#upgrades").innerText = "Upgrades";
+  } else {
+    document.querySelector("#upgrades").innerText = "Owned Upgrades";
   }
 
-  // now we throw out stuff
+  showOwnedUpgrades = !showOwnedUpgrades;
+}
 
-  for (let i = remainingUpgrades.length-1; i >= 0; i--) {
-    if (ownedUpgrades[remainingUpgrades[i]]) {
-      remainingUpgrades.splice(i, 1);
+function displayUpgrades(owned) {
+  if (owned) {
+    Object.entries(ownedUpgrades).forEach(([key, val]) => {
+      let button = document.querySelector("#upgrade-" + key);
+      if (val) {
+        button.classList.remove("hidden");
+      } else {
+        button.classList.add("hidden");
+      }
+    });
+  }
+  else {
+    for (let id of remainingUpgrades) {
+      let button = document.querySelector("#upgrade-" + id);
+  
+      if (ownedUpgrades[id]) {
+        button.classList.add("hidden");
+        continue;
+      }
+      if (upgradeReachable(id)) {
+        button.classList.remove("hidden");
+      } else {
+        button.classList.add("hidden");
+      }
+      if (upgradeAvailable(id)) {
+        button.classList.remove("upgrade-button-inactive");
+      } else {
+        button.classList.add("upgrade-button-inactive");
+      }
     }
+  
+    // we aren't trimming the list of upgrades now
+    // because we need to switch between owned and unowned upgrades
+    // - thus we need to be able to show or hide anything
+    /*
+    for (let i = remainingUpgrades.length-1; i >= 0; i--) {
+      if (ownedUpgrades[remainingUpgrades[i]]) {
+        remainingUpgrades.splice(i, 1);
+      }
+    }*/
   }
 }
 
@@ -344,6 +369,8 @@ function registerListeners() {
   document.querySelector("#save").addEventListener("click", save);
 
   document.querySelector("#reset").addEventListener("click", reset);
+
+  document.querySelector("#upgrades").addEventListener("click", switchShowOwnedUpgrades);
 }
 
 function createButtons() {