Persist the important game data in localStorage

This commit is contained in:
2024-11-24 16:32:13 +01:00
parent 795ee7aa16
commit bbfa172e7a
2 changed files with 18 additions and 18 deletions

View File

@@ -5,26 +5,26 @@ document.addEventListener('alpine:init', () => {
savedGameKey: 'saveGame', savedGameKey: 'saveGame',
/* Main alfagok application, state etc */ /* Main alfagok application, state etc */
gameID: 0, gameID: Alpine.$persist(0).as('gameID'),
countingDown: '', countingDown: '',
loading: false, loading: false,
winTime: null, winTime: Alpine.$persist(null).as('winTime'),
startTime: null, startTime: Alpine.$persist(null).as('startTime'),
gaveUpTime: null, // not implemented yet gaveUpTime: Alpine.$persist(null).as('gaveUpTime'), // not implemented yet
nrGuesses: 0, nrGuesses: Alpine.$persist(0).as('nrGuesses'),
guessesBefore: [], guessesBefore: Alpine.$persist([]).as('guessesBefore'),
guessesAfter: [], guessesAfter: Alpine.$persist([]).as('guessesAfter'),
guessValue: '', guessValue: Alpine.$persist('').as('guessValue'),
guessError: '', guessError: '',
resultGameID: '', resultGameID: Alpine.$persist('').as('resultGameID'),
resultGuesses: '', resultGuesses: Alpine.$persist('').as('resultGuesses'),
resultTimeTaken: '', resultTimeTaken: Alpine.$persist('').as('resultTimeTaken'),
async getGameID() { async getGameID() {
/* Get the game number from the backend */ /* Get the game number from the backend */
@@ -115,12 +115,12 @@ document.addEventListener('alpine:init', () => {
}, },
// # Local Storage Persistence // # Local Storage Persistence
storeGameState() { storeGameState() {
localStorage.setItem(this.savedGameKey, JSON.stringify({ // localStorage.setItem(this.savedGameKey, JSON.stringify({
startTime, // startTime,
winTime, // winTime,
gaveUpTime, // gaveUpTime,
guessesBefore, // guessesBefore,
})); // }));
}, },
getStoredGameState() { getStoredGameState() {
if (!this.isLocalStorageAvailable) return undefined; if (!this.isLocalStorageAvailable) return undefined;

View File

@@ -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="32x32" href="static/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png">
<link rel="manifest" href="static/images/site.webmanifest"> <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> <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head> </head>
<body> <body>