diginaut/alfagok
1
0
Fork 0
mirror of https://github.com/aquatix/alfagok.git synced 2025-12-06 19:55:12 +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', {
// isLocalStorageAvailable: this.testLocalStorage(),
isLocalStorageAvailable: false,
savedGameKey: 'saveGame',
/* Main alfagok application, state etc */
gameID: 0,
@@ -114,15 +115,21 @@ document.addEventListener('alpine:init', () => {
},
// # Local Storage Persistence
storeGameState() {
localStorage.setItem(this.savedGameKey, JSON.stringify({
startTime,
winTime,
gaveUpTime,
guessesBefore,
}));
},
getStoredGameState() {
if (!this.isLocalStorageAvailable) return undefined;
const savedGameJson = localStorage.getItem('saveGame');
const savedGameJson = localStorage.getItem(this.savedGameKey);
try {
return savedGameJson && JSON.parse(savedGameJson);
} catch (e) {
localStorage.removeItem('saveGame');
localStorage.removeItem(this.savedGameKey);
}
return undefined;
},
@@ -164,7 +171,7 @@ document.addEventListener('alpine:init', () => {
}
},
resetSavedGames() {
localStorage.removeItem('saveGame');
localStorage.removeItem(this.savedGameKey);
},
testLocalStorage() {
// 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);
},
// # Countdown timer
getFormattedTime(milliseconds) {
if (!Number.isInteger(milliseconds)) {
return '';
@@ -215,7 +223,7 @@ document.addEventListener('alpine:init', () => {
let secondsRemain = Math.floor(diff%60);
nextgame.innerHTML = '<span class="nextgame">'+addZero(hoursRemain)+':'+addZero(minutesRemain)+':'+addZero(secondsRemain)+' over</span>';
}
}),
})
Alpine.store('darkMode', {
/* 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="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 defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
<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">
<p>Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt.</p>