Reset game state when new/different game has started

src/alfagok/static/game.js

@@ -5,26 +5,26 @@ document.addEventListener('alpine:init', () => {
         savedGameKey: 'saveGame',
 
         /* Main alfagok application, state etc */
-        gameID: 0,
+        gameID: Alpine.$persist(0).as('gameID'),
         countingDown: '',
 
         loading: false,
 
-        winTime: null,
-        startTime: null,
-        gaveUpTime: null, // not implemented yet
+        winTime: Alpine.$persist(null).as('winTime'),
+        startTime: Alpine.$persist(null).as('startTime'),
+        gaveUpTime: Alpine.$persist(null).as('gaveUpTime'), // not implemented yet
 
-        nrGuesses: 0,
-        guessesBefore: [],
-        guessesAfter: [],
+        nrGuesses: Alpine.$persist(0).as('nrGuesses'),
+        guessesBefore: Alpine.$persist([]).as('guessesBefore'),
+        guessesAfter: Alpine.$persist([]).as('guessesAfter'),
 
-        guessValue: '',
+        guessValue: Alpine.$persist('').as('guessValue'),
 
         guessError: '',
 
-        resultGameID: '',
-        resultGuesses: '',
-        resultTimeTaken: '',
+        resultGameID: Alpine.$persist('').as('resultGameID'),
+        resultGuesses: Alpine.$persist('').as('resultGuesses'),
+        resultTimeTaken: Alpine.$persist('').as('resultTimeTaken'),
 
         async getGameID() {
             /* Get the game number from the backend */
@@ -35,6 +35,9 @@ document.addEventListener('alpine:init', () => {
             console.log(result);
             this.loading = false;
             if (result.game) {
+                if (this.gameID !== result.game) {
+                    this.setEmptyGameState();
+                }
                 return this.gameID = result.game;
             }
         },
@@ -92,7 +95,10 @@ document.addEventListener('alpine:init', () => {
                 this.winTime = new Date();
                 this.resultGameID = '🧩 Puzzel #' + this.gameID;
                 this.resultGuesses = '🤔 '+ this.nrGuesses + ' gokken';
-                this.resultTimeTaken = '⏱️ ' + getFormattedTime(this.winTime - this.startTime);
+                let winTimeDate = new Date(this.winTime);
+                let startTimeDate = new Date(this.startTime);
+                // this.resultTimeTaken = '⏱️ ' + getFormattedTime(this.winTime - this.startTime);
+                this.resultTimeTaken = '⏱️ ' + getFormattedTime(winTimeDate - startTimeDate);
             }
         },
         setEmptyGameState() {
@@ -113,78 +119,6 @@ document.addEventListener('alpine:init', () => {
 
             this.getGameID();
         },
-        // # Local Storage Persistence
-        storeGameState() {
-            localStorage.setItem(this.savedGameKey, JSON.stringify({
-                startTime,
-                winTime,
-                gaveUpTime,
-                guessesBefore,
-            }));
-        },
-        getStoredGameState() {
-            if (!this.isLocalStorageAvailable) return undefined;
-
-            const savedGameJson = localStorage.getItem(this.savedGameKey);
-            try {
-                return savedGameJson && JSON.parse(savedGameJson);
-            } catch (e) {
-                localStorage.removeItem(this.savedGameKey);
-            }
-            return undefined;
-        },
-        loadGameState() {
-            const savedGame = this.getStoredGameState();
-
-            if (!savedGame || !savedGame.gameID || (savedGame.gameID !== this.gameID)) {
-                this.setEmptyGameState();
-                return;
-            }
-            if (!savedGame || !savedGame.startTime) {
-                this.setEmptyGameState();
-                return;
-            }
-            const startTime = new Date(savedGame.startTime);
-            if (!isPlayDateToday(app.playDate)) {
-                this.setEmptyGameState();
-                return;
-            }
-            const savedGameForToday = getDOY(startTime) === getDOY(now());
-            if (!savedGameForToday) {
-                this.resetSavedGames();
-                this.setEmptyGameState();
-                return;
-            }
-            const {
-                winTime,
-                guessesBefore,
-                guessesAfter,
-                guessValue,
-            } = savedGame;
-            const gaveUpTime = null; // to be implemented
-            this.startTime = startTime;
-            this.winTime = (winTime && new Date(winTime)) || null;
-            this.guessesBefore = guessesBefore || [];
-            this.guessesAfter = guessesAfter || [];
-            if (gaveUpTime || this.winTime) {
-                this.guessValue = guessValue;
-            }
-        },
-            resetSavedGames() {
-            localStorage.removeItem(this.savedGameKey);
-        },
-        testLocalStorage() {
-            // stolen from https://stackoverflow.com/questions/16427636/check-if-localstorage-is-available
-            const test = 'test';
-            try {
-                localStorage.setItem(test, test);
-                localStorage.removeItem(test);
-                this.isLocalStorageAvailable = true;
-            } catch (e) {
-                this.isLocalStorageAvailable = false;
-            }
-            console.log('Local storage is available? ' + this.isLocalStorageAvailable);
-        },
         // # Countdown timer
         getFormattedTime(milliseconds) {
             if (!Number.isInteger(milliseconds)) {
@@ -311,5 +245,4 @@ go();
 document.addEventListener('alpine:initialized', () => {
     /* On AlpineJS completely loaded, do all this */
     Alpine.store('alfagok').getGameID();
-    Alpine.store('alfagok').testLocalStorage();
 })

src/alfagok/templates/index.html

@@ -11,7 +11,7 @@
         <link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png">
         <link rel="manifest" href="static/images/site.webmanifest">
-        <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     </head>
     <body>
@@ -47,7 +47,7 @@
                         <p><b x-text="$store.alfagok.resultGameID"></b></p>
                         <p x-text="$store.alfagok.resultGuesses"></p>
                         <p x-text="$store.alfagok.resultTimeTaken"></p>
-                        <p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>
+                        <p>🔗 <span class="link">alfagok.diginaut.net</span></p>
                     </div>
                 </div>
                 <div id="copyresults"></div>