use separate storage api

src/scripts/gameState.ts

@@ -2,6 +2,7 @@ import { playAudio } from "./audio";
 import { getStateId } from "./stateIdGenerator";
 import Alpine from "alpinejs";
 import type { DynamicAnswerState, DynamicFailState, DynamicGameState, DynamicQuestionState, DynamicTeamState, StorableAnswerState, StorableFailState, StorableGameState, StorableQuestionState, StorableTeamState } from "./types";
+import { storage } from "./storage";
 
 function buildAnswer(answer: StorableAnswerState): DynamicAnswerState {
     const placeholder = "_________________________________________";
@@ -91,7 +92,7 @@ function buildTeam(team: StorableTeamState): DynamicTeamState {
 }
 
 function loadGameStateFromStorage(id: string): StorableGameState | null {
-    const savedValue = localStorage.getItem(id);
+    const savedValue = storage.getItem(id);
 
     try {
         return JSON.parse(savedValue as string);
@@ -103,7 +104,7 @@ function loadGameStateFromStorage(id: string): StorableGameState | null {
 }
 
 function saveGameStateToStorage(id: string, state: DynamicGameState) {
-    localStorage.setItem(id, JSON.stringify(state));
+    storage.setItem(id, JSON.stringify(state));
 }
 
 function buildGameStateFromJSON(inputState: StorableGameState): DynamicGameState {
@@ -260,7 +261,7 @@ export function initGameState(id: string = "game") {
         const storedState = Alpine.store(id) as DynamicGameState;
         saveGameStateToStorage(id, storedState);
     });
-    window.addEventListener("storage", ({ key, oldValue, newValue }) => {
+    storage.listen(id, ({ key, oldValue, newValue }) => {
         if (key !== id) {
             return;
         }

src/scripts/storage.ts

@@ -0,0 +1,54 @@
+type Change = {
+    key: string;
+    oldValue: string | null;
+    newValue: string | null;
+}
+
+type OnChangeFunction = (this: unknown, change: Change) => any;
+
+class StorageAPI {
+    static #instance?: StorageAPI = undefined;
+
+    #listeners = new Map<string, Set<OnChangeFunction>>();
+
+    constructor() {
+        if (StorageAPI.#instance) {
+            return StorageAPI.#instance;
+        }
+
+        window.addEventListener("storage", this.#onChange.bind(this));
+
+        StorageAPI.#instance = this;
+        return this;
+    }
+
+    setItem(key: string, value: string) {
+        localStorage.setItem(key, value);
+    }
+
+    getItem(key: string) {
+        return localStorage.getItem(key);
+    }
+
+    listen(key: string, callback: OnChangeFunction) {
+        if (this.#listeners.has(key)) {
+            this.#listeners.get(key)?.add(callback);
+        } else {
+            this.#listeners.set(key, new Set([callback]));
+        }
+    }
+
+    #onChange({ key, oldValue, newValue }: StorageEvent) {
+        if (key === null) {
+            return;
+        }
+
+        const listeners = this.#listeners.get(key);
+
+        listeners?.forEach((callback) => {
+            callback({ key, oldValue, newValue });
+        });
+    }
+}
+
+export const storage = new StorageAPI();