Make SaveHandler a UniqueKeyHandler and cleanup

Author: FifthTundraG

src/ts/handler.ts

@@ -1,6 +1,6 @@
 export class Handler<T> implements Iterable<T> {
     /** This stores the stringified Identifier as the key and then the values is obviously T. We store the identifier stringified because objects are never equal so we can't `get()` from the Map without using the same obj reference. */
-    private registered: Map<string, T>;
+    protected registered: Map<string, T>;
     /** the number of registered items in the handler */
     public get length(): number {
         return this.registered.size;
@@ -68,7 +68,7 @@ export class Handler<T> implements Iterable<T> {
  * This handler does not use {@link Identifier}s and instead uses unique strings.
  */
 export class UniqueKeyHandler<T> implements Iterable<T> {
-    private registered: Map<string, T>;
+    protected registered: Map<string, T>;
     /** the number of registered items in the handler */
     public get length(): number {
         return this.registered.size;

src/ts/handlers.ts

@@ -347,27 +347,17 @@ export class ModHandler extends UniqueKeyHandler<Mod> {
     }
 }
 
-//* for technical reasons i don't think this can actually be a UniqueKeyHandler :(
-export class SaveHandler {
-    private providers: Record<string, SaveProvider>;
-    constructor() {
-        this.providers = {};
-    }
-
+export class SaveHandler extends UniqueKeyHandler<SaveProvider> {
     dumpSaveData(): Record<string, unknown> {
         const saveData: Record<string, unknown> = {};
-        for (const namespace in this.providers) {
-            saveData[namespace] = this.providers[namespace].getSaveData();
+        for (const namespace in this.registered) {
+            saveData[namespace] = this.registered.get(namespace).getSaveData();
         }
         return saveData;
     }
 
-    register(namespace: string, provider: SaveProvider) {
-        this.providers[namespace] = provider;
-    }
-
     getProviders() { //! can we avoid this?
-        return this.providers;
+        return this.registered;
     }
 }
 

src/ts/helper.ts

@@ -11,17 +11,6 @@ export function parseGithubIssue(input: string): string {
     });
 }
 
-/**
- * @deprecated use {@link Array.from}
- */
-export function convertCollectionToArray(HTMLCollection: HTMLCollection): Element[] {
-    const array: Element[] = [];
-    for (const item of HTMLCollection) {
-        array.push(item);
-    }
-    return array;
-}
-
 /**
  * Clamps a number to a specified minimum/maximum
  * @param value The number you're clamping
@@ -168,4 +157,4 @@ export function countVisibleChildren(element: HTMLElement): number {
       }
     }
     return count;
-  }
+}

src/ts/main.ts

@@ -22,30 +22,14 @@ import { NewMod } from "./exmod.js"; //* note: this import is intentionally left
 // ------------------------------------
 const version: string = "0.7";
 
-// ------------------------------------
-// Variable & Object Definitions
-// ------------------------------------
-// dev variables
+// temp dev variables
 const dev = {} as {
     devMode: boolean,
-    CPSGiven: number,
 
-    setDevMode(value: boolean | "on" | "off"): void,
-    setCookies(number: number): void,
-    setCPS(number: number): void,
-    toggleSaving(): void
+    setDevMode(value: boolean | "on" | "off"): void
 };
 
 dev.devMode = false;
-dev.CPSGiven = 0;
-
-// middle other occupiers
-let statsUp = false;
-let infoUp = false;
-let optionsUp = false;
-
-// misc
-let mobile: boolean; // defined in initialization
 
 // Global Events
 interface MousePosition {
@@ -57,7 +41,7 @@ window.addEventListener("mousemove", (event) => {
     mousePos.x = event.clientX;
     mousePos.y = event.clientY;
 
-    if (Game.IN_DEVELOPMENT && !mobile)
+    if (Game.IN_DEVELOPMENT)
         document.getElementById("mousePosDevText").innerText = `Mouse Pos: (${mousePos.x}, ${mousePos.y})`;
 });
 
@@ -118,6 +102,24 @@ export class Game extends SaveProvider {
         return this._INSTANCE;
     }
 
+    /**
+     * Switches the current {@link window.location.href} to a given {@link VersionBranch}
+     * @param branch The branch to switch to
+     */
+    public static switchToBranch(branch: VersionBranch) {
+        switch (branch) {
+        case VersionBranch.MAIN:
+            window.location.href = "/";
+            break;
+        case VersionBranch.BETA:
+            window.location.href = "/beta";
+            break;
+        case VersionBranch.DEVELOP:
+            window.location.href = "/develop";
+            break;
+        }
+    }
+
     /** Said to be the physical manifestation of the cookie gods themselves... */
     public clickercookie: ClickerCookie;
 
@@ -260,7 +262,7 @@ export class Game extends SaveProvider {
         document.getElementById("infoButton").addEventListener("click", () => {this.toggleMiddle("info")});
         // middle content
         for (const element of Array.from(document.getElementsByClassName("middle-x"))) { //? i don't like how we have to do this, can we find another way? maybe somehow only one X button? actually we should probably refactor how the entire middle section works... todo: make an issue for that
-            element.addEventListener("click", () => {closeMiddle()});
+            element.addEventListener("click", () => {this.toggleMiddle("none")});
         }
         document.getElementById("creditsButton").addEventListener("click", () => {new SimplePopup({x: 320, y: 175, text: object2HTML(Game.CREDITS), title: "Credits"})});
         document.getElementById("backgroundSelect").addEventListener("change", () => {Handlers.BACKGROUND.setBackground((document.getElementById("backgroundSelect") as HTMLFormElement).value)});
@@ -280,7 +282,12 @@ export class Game extends SaveProvider {
         document.getElementById("upgradesHolder").addEventListener("mouseout", () => {expandUpgradesHolder(true)});
         // misc
         document.getElementById("cookie").addEventListener("click", () => {this.cookieClicked()});
-        document.getElementById("versionNumber").addEventListener("click", () => {versionSwitch()});
+        if (Game.VERSION_BRANCH === VersionBranch.MAIN) {
+            document.getElementById("versionNumber").addEventListener("click", () => { Game.switchToBranch(VersionBranch.BETA) });
+        } else { // develop or beta
+            document.getElementById("versionNumber").addEventListener("click", () => { Game.switchToBranch(VersionBranch.MAIN) });
+        }
+        
         document.getElementById("versionNumber").addEventListener("mouseover", () => {versionNumberMousedOver()});
         document.getElementById("versionNumber").addEventListener("mouseout", () => {versionNumberMousedOver(true)});
 
@@ -329,7 +336,7 @@ export class Game extends SaveProvider {
             text.style.display = "none";
         }
 
-        if (this.currentMiddleState === middleButton) {
+        if (this.currentMiddleState === middleButton || middleButton === "none") {
             this.currentMiddleState = "none";
             // we already set display to none on all our things
         } else { // middle state is something else
@@ -393,25 +400,12 @@ dev.setDevMode = function(value: boolean | "on" | "off") {
 // ------------------------------------
 // Random Functions
 // ------------------------------------
-function closeMiddle() {
-    optionsUp = false;
-    infoUp = false;
-    statsUp = false;
-
-    document.getElementById("optionsMiddleText").style.display = "none";
-    document.getElementById("statsMiddleText").style.display = "none";
-    document.getElementById("infoMiddleText").style.display = "none";
-    document.getElementById("middle").style.background = url(Handlers.BACKGROUND.getCurrentBackground().src);
-}
 function versionNumberMousedOver(undo=false) {
     if (!undo)
         document.getElementById("versionSwitchInfo").style.display = "block";
     else
         document.getElementById("versionSwitchInfo").style.display = "none";
 }
-function versionSwitch() {
-    window.location.href = (Game.VERSION_BRANCH === VersionBranch.MAIN) ? "/beta" : "/";
-}
 
 console.log(`you seem smart, how 'bout you contribute to the project? ${Game.GITHUB_REPO}`);
 

src/ts/saving.ts

@@ -88,12 +88,12 @@ export class Savinator {
         const providers = this.saveHandler.getProviders();
         for (const namespace in providers) { //? should this go over providers or the localStorageSave.getNamespaces()? is there any benefit to one or the other?
             if (localStorageSave.getNamespaces().includes(namespace) && namespace !== "game") { // if the provider namespace is present in the local storage save
-                providers[namespace].loadSaveData(localStorageSave.getData(namespace));
+                providers.get(namespace).loadSaveData(localStorageSave.getData(namespace));
                 console.log(`Loaded save data for ${namespace} namespace.`);
             }
         }
-        if (providers["game"] !== undefined) { // game should always be there, but just in case it isn't we check
-            providers["game"].loadSaveData(localStorageSave.getData("game"));
+        if (providers.get("game") !== undefined) { // game should always be there, but just in case it isn't we check
+            providers.get("game").loadSaveData(localStorageSave.getData("game"));
             console.log(`Loaded save data for game namespace.`);
         }