diginaut/alfagok
1
0
Fork 0
mirror of https://github.com/aquatix/alfagok.git synced 2025-12-06 22:15:11 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Started work on saving game state

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-23 22:16:47 +01:00
parent 48ccb99492
commit 795ee7aa16
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/alfagok/static/game.js
View File

@@ -2,6 +2,7 @@ document.addEventListener('alpine:init', () => {
Alpine.store('alfagok', { Alpine.store('alfagok', {
// isLocalStorageAvailable: this.testLocalStorage(), // isLocalStorageAvailable: this.testLocalStorage(),
isLocalStorageAvailable: false, isLocalStorageAvailable: false,
savedGameKey: 'saveGame',
/* Main alfagok application, state etc */ /* Main alfagok application, state etc */
gameID: 0, gameID: 0,
@@ -114,15 +115,21 @@ document.addEventListener('alpine:init', () => {
}, },
// # Local Storage Persistence // # Local Storage Persistence
storeGameState() { storeGameState() {
localStorage.setItem(this.savedGameKey, JSON.stringify({
startTime,
winTime,
gaveUpTime,
guessesBefore,
}));
}, },
getStoredGameState() { getStoredGameState() {
if (!this.isLocalStorageAvailable) return undefined; if (!this.isLocalStorageAvailable) return undefined;
const savedGameJson = localStorage.getItem('saveGame'); const savedGameJson = localStorage.getItem(this.savedGameKey);
try { try {
return savedGameJson && JSON.parse(savedGameJson); return savedGameJson && JSON.parse(savedGameJson);
} catch (e) { } catch (e) {
localStorage.removeItem('saveGame'); localStorage.removeItem(this.savedGameKey);
} }
return undefined; return undefined;
}, },
@@ -164,7 +171,7 @@ document.addEventListener('alpine:init', () => {
} }
}, },
resetSavedGames() { resetSavedGames() {
localStorage.removeItem('saveGame'); localStorage.removeItem(this.savedGameKey);
}, },
testLocalStorage() { testLocalStorage() {
// stolen from https://stackoverflow.com/questions/16427636/check-if-localstorage-is-available // stolen from https://stackoverflow.com/questions/16427636/check-if-localstorage-is-available
@@ -178,6 +185,7 @@ document.addEventListener('alpine:init', () => {
} }
console.log('Local storage is available? ' + this.isLocalStorageAvailable); console.log('Local storage is available? ' + this.isLocalStorageAvailable);
}, },
// # Countdown timer
getFormattedTime(milliseconds) { getFormattedTime(milliseconds) {
if (!Number.isInteger(milliseconds)) { if (!Number.isInteger(milliseconds)) {
return ''; return '';
@@ -215,7 +223,7 @@ document.addEventListener('alpine:init', () => {
let secondsRemain = Math.floor(diff%60); let secondsRemain = Math.floor(diff%60);
nextgame.innerHTML = '<span class="nextgame">'+addZero(hoursRemain)+':'+addZero(minutesRemain)+':'+addZero(secondsRemain)+' over</span>'; nextgame.innerHTML = '<span class="nextgame">'+addZero(hoursRemain)+':'+addZero(minutesRemain)+':'+addZero(secondsRemain)+' over</span>';
} }
}), })
Alpine.store('darkMode', { Alpine.store('darkMode', {
/* Different Alpine app, dark mode settings for the game */ /* Different Alpine app, dark mode settings for the game */

3
src/alfagok/templates/index.html
View File

@@ -11,13 +11,14 @@
<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 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>
<div id="container" x-data=""> <div id="container" x-data="">
<a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzel #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span> | <span x-text="$store.alfagok.countingDown" • <span x-text="$store.alfagok.nrGuesses"></span> gokken</span> <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzel #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span> | <span x-text="$store.alfagok.countingDown"></span> • <span x-text="$store.alfagok.nrGuesses"></span> gokken</span>
<div x-cloak class="instructions" x-show="$store.alfagok.guessesBefore.length === 0 && $store.alfagok.guessesAfter.length === 0"> <div x-cloak class="instructions" x-show="$store.alfagok.guessesBefore.length === 0 && $store.alfagok.guessesAfter.length === 0">
<p>Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt.</p> <p>Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt.</p>