Add all upgrades to DOM upon creation, not unlock

Author: FifthTundraG

src/ts/handlers.ts

@@ -140,13 +140,19 @@ export class UpgradeHandler extends Handler<Upgrade> {
         return bought;
     }
 
-    /**
-     * TODO: NEEDS STATISTIC SUPPORT
-     * @param statistic Are we destroying all the upgrades in the Statistics page?
-     */
-    destroyAllUpgrades(statistic: boolean=false) {
+    updateStatisticUpgrades() {
+        for (const upgrade of this) {
+            upgrade.setStatisticVisibility(false);
+    
+            if (upgrade.bought === false) continue;
+    
+            upgrade.setStatisticVisibility(true);
+        }
+    }
+
+    destroyAllUpgrades() {
         for (const value of this) {
-            value.destroy();
+            value.setVisibility(false);
         }
     }
 
@@ -155,11 +161,10 @@ export class UpgradeHandler extends Handler<Upgrade> {
      * 
      * This is really only used in the context of loading, wherein unlocked and unbought upgrades will not yet exist.
      * */
-    showUnlockedUpgrades() { //? is this still used? isn't this just checkUpgradeAvaliability?
+    showUnlockedUpgrades() { //? can we just combine this with checkUpgradeAvailability?
         for (const value of this) {
             if (value.unlocked === true && value.bought !== true)
-                // new Upgrade(game, game.UPGRADES_DATA[i]);
-                value.create();
+                value.setVisibility(true);
         }
     }
 
@@ -171,7 +176,7 @@ export class UpgradeHandler extends Handler<Upgrade> {
     checkUpgradeAvailability() {
         for (const value of this) {
             if (value.building.bought >= value.buildingsRequired && value.unlocked === false) {
-                value.create();
+                value.setVisibility(true);
                 value.unlocked = true;
             }
         }
@@ -194,11 +199,11 @@ export class UpgradeHandler extends Handler<Upgrade> {
     }
 
     /**
-     * Load save data for all registered upgrades
+     * Apply save data state to all registered upgrades
      * @param saveObj The save object to load the data of
      * @param namespace Optional: if present will only load data for upgrades of a given namespace.
      */
-    loadUpgradesSave(saveObj: Record<string, UpgradeSave>, namespace: string=undefined) { // todo: test if works
+    loadSave(saveObj: Record<string, UpgradeSave>, namespace: string=undefined) {
         for (const stringifiedIdentifier in saveObj) {
             const id = Identifier.fromString(stringifiedIdentifier);
 

src/ts/helper.ts

@@ -152,4 +152,20 @@ export function branchQuickSwitch(main: any, beta: any, develop: any) {
     case VersionBranch.DEVELOP:
         return develop;
     }
-}
+}
+
+/**
+ * Counts the number of visible children (`display` CSS property is not equal to `none`) in a given element
+ * @param element The element to count the visible children of
+ * @returns The number of visible children
+ */
+export function countVisibleChildren(element: HTMLElement): number {
+    let count = 0;
+    for (const child of element.children) {
+      const style = window.getComputedStyle(child);
+      if (style.display !== "none") {
+        count++;
+      }
+    }
+    return count;
+  }

src/ts/main.ts

@@ -8,7 +8,7 @@ If you're not a modder, still read the docs here: https://github.com/clickercook
 
 import { createChangelogEntry, versionChangelogs } from "./changelogs.js";
 import { branchQuickSwitch, Interval, object2HTML, url } from "./helper.js";
-import { updateStatisticUpgrades, expandUpgradesHolder, UpgradeSave } from "./upgrades.js";
+import { expandUpgradesHolder, UpgradeSave } from "./upgrades.js";
 import { SaveProvider, Savinator } from "./saving.js";
 import { Mod } from "./mods.js"
 import ClickerCookie from "./clickercookie.js"
@@ -205,7 +205,7 @@ export class Game extends SaveProvider {
 
         // todo asap: 0.6 save transfer
 
-        updateStatisticUpgrades();
+        Handlers.UPGRADE.updateStatisticUpgrades();
 
         /* change version branch specific stuff */
         // change title
@@ -338,13 +338,13 @@ export class Game extends SaveProvider {
         Handlers.BACKGROUND.setBackground(saveData.currentBackgroundKey);
 
         // the following doesn't have anything to do with GameSaveData but will be done here because this spot makes the most sense
-        Handlers.UPGRADE.loadUpgradesSave(saveData.upgradesSave);
+        Handlers.UPGRADE.loadSave(saveData.upgradesSave);
 
         Handlers.UPGRADE.destroyAllUpgrades();
         Handlers.UPGRADE.showUnlockedUpgrades();
 
         document.getElementById("upgradesBoughtCounter").innerText = Handlers.UPGRADE.upgradesBought.toString();
-        updateStatisticUpgrades();
+        Handlers.UPGRADE.updateStatisticUpgrades();
     }
 }
 

src/ts/upgrades.ts

@@ -1,5 +1,5 @@
 import { Building } from "./buildings.js";
-import { clamp, commaify, url } from "./helper.js";
+import { clamp, commaify, countVisibleChildren, url } from "./helper.js";
 import { hideTooltip } from "./tooltip.js";
 import { Game } from "./main.js";
 import ClickerCookie from "./clickercookie.js";
@@ -26,7 +26,7 @@ export interface UpgradeData {
 }
 
 export function expandUpgradesHolder(retract: boolean=false) {
-    const upgradesShown = document.getElementById("upgradesHolder").children.length;
+    const upgradesShown = countVisibleChildren(document.getElementById("upgradesHolder"));
 
     const rowsOfUpgrades = Math.ceil(upgradesShown / 5);
 
@@ -40,16 +40,6 @@ export function expandUpgradesHolder(retract: boolean=false) {
     holder.style.height = `${size}px`;
 }
 
-export function updateStatisticUpgrades() {
-    for (const upgrade of Handlers.UPGRADE) {
-        upgrade.destroyStatistic();
-
-        if (upgrade.bought === false) continue;
-
-        upgrade.createStatistic();
-    }
-}
-
 export class Upgrade {
     private clickercookie: ClickerCookie;
 
@@ -125,17 +115,9 @@ export class Upgrade {
             console.warn(`Unable to get the image file "${UPGRADE_ICON}" for the "${this.name}" upgrade (probably 404), falling back to "unknown" image.`);
         };
         img.src = UPGRADE_ICON; //* so the onload/onerror events are actually fired
-    }
-
-    /**
-     * Appends `this.html` (the upgrade) to `element`.
-     * @param element The element to append to. Should pretty much always be the upgrades holder.
-     */
-    create(element: HTMLElement=document.getElementById("upgradesHolder")) {
-        element!.appendChild(this.html);
-    }
 
-    createStatistic() {
+        // create it
+        document.getElementById("upgradesHolder").appendChild(this.html);
         document.getElementById("upgradesBoughtStatsHolder").appendChild(this.statisticHTML);
     }
 
@@ -145,7 +127,7 @@ export class Upgrade {
         this.clickercookie.cookies -= this.price;
         this.bought = true;
         this.hovered(); //? i don't remember why this is here but i know it's important just trust me
-        this.destroy();
+        this.setVisibility(false);
 
         this.building.CPSGiven *= 2;
         this.building.CPSGain *= 2;
@@ -155,7 +137,7 @@ export class Upgrade {
 
         document.getElementById("upgradesBoughtCounter")!.innerText = Handlers.UPGRADE.upgradesBought.toString();
 
-        updateStatisticUpgrades(); // we don't run createStatistic() here and instead run this so that the order shown in the upgrades menu is correct
+        Handlers.UPGRADE.updateStatisticUpgrades(); // we don't run createStatistic() here and instead run this so that the order shown in the upgrades menu is correct
     }
 
     hovered(statistic: boolean=false) { // todo: this is very similar to Building.hovered
@@ -185,13 +167,10 @@ export class Upgrade {
         }
     }
 
-    destroy() {
-        this.html.remove();
-        hideTooltip(); // hide the tooltip so it doesn't stick around after you buy the upgrade
+    setVisibility(bool: boolean) {
+        this.html.style.display = bool ? "inline-block" : "none";
     }
-
-    destroyStatistic() {
-        this.statisticHTML.remove();
-        hideTooltip(); // if you're somehow hovering it lol
+    setStatisticVisibility(bool: boolean) {
+        this.statisticHTML.style.display = bool ? "block" : "none";
     }
 }