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',
/* 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 */
@@ -115,12 +115,12 @@ document.addEventListener('alpine:init', () => {
},
// # Local Storage Persistence
storeGameState() {
localStorage.setItem(this.savedGameKey, JSON.stringify({
startTime,
winTime,
gaveUpTime,
guessesBefore,
}));
// localStorage.setItem(this.savedGameKey, JSON.stringify({
// startTime,
// winTime,
// gaveUpTime,
// guessesBefore,
// }));
},
getStoredGameState() {
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="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>