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

Making the game interactive, getting results from backend

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-04 22:06:09 +01:00
parent 0e965b8e3b
commit 2a7300f126
2 changed files with 94 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,18 +8,38 @@ async function getGameID() {
} }
} }
async function doGuess(guessWord, guessError) { async function doGuess(guessWord) {
if (guessWord === '') {
console.log('Nothing filled in');
Alpine.store('alfagok').guessError = 'Vul een woord in';
return;
}
if (Alpine.store('alfagok').startTime === '') {
console.log('Setting startTime to now');
}
let response = await fetch('/api/guess/' + guessWord); let response = await fetch('/api/guess/' + guessWord);
let result = await response.json(); let result = await response.json();
console.log(result); console.log(result);
if (result.error) { if (result.error) {
console.log('Error occurred during guess'); console.log('Error occurred during guess');
if (result.error === 'Word not in dictionary') { if (result.error === 'Word not in dictionary') {
guessError = 'Woord komt niet in de woordenlijst voor'; Alpine.store('alfagok').guessError = 'Woord komt niet in de woordenlijst voor';
} }
console.log(guessError);
} }
return result; if (result.hint && result.hint === 'after') {
console.log('na');
Alpine.store('alfagok').guessesBefore.push(guessWord);
}
if (result.hint && result.hint === 'before') {
console.log('voor');
Alpine.store('alfagok').guessesAfter.push(guessWord);
}
if (result.hint && result.hint === 'it') {
console.log('gevonden');
}
} }
/* Time formatting **/ /* Time formatting **/

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

@@ -9,36 +9,53 @@
</head> </head>
<body> <body>
<script>
document.addEventListener('alpine:init', () => {
/*
const gameIDResult = await fetch('/api/game')
if (!gameIDResult.ok) {
throw new Error(`${gameIDResult.status}: ${await gameIDResult.text()}`);
}
Alpine.store('alfagok', {
gameID: await gameIDResult.json().game,
})
*/
Alpine.store('alfagok', {
gameID: 0,
winTime: null,
startTime: null,
nrGuesses: 0,
guessesBefore: ['blah'],
guessesAfter: [],
guessValue: '',
guessError: '',
})
Alpine.store('darkMode', {
init() {
this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
},
on: false,
toggle() {
this.on = ! this.on
}
})
})
</script>
<div <div
id="container" id="container"
x-data="{
search: '',
items: ['foo', 'bar', 'baz'],
winTime: null,
startTime: null,
nrGuesses: 0,
guessesBefore: ['blah'],
guessesAfter: [],
guessValue: '',
gameID: 0,
guessError: '',
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
)
}
}"
> >
<a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #<span x-text="gameID"></span> • <span id="nextgame"></span></span> <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span></span>
<div x-cloak x-show="guessesBefore.length || guessesAfter.length"><br></div>
<div x-cloak x-show="$store.alfagok.guessesBefore.length || $store.alfagok.guessesAfter.length"><br></div>
<div x-cloak class="instructions" x-else> <div x-cloak class="instructions" x-else>
<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>
@@ -47,57 +64,59 @@
<center> <center>
<ul> <ul>
<template x-for="item in guessesBefore" :key="item"> <template x-for="item in $store.alfagok.guessesBefore" :key="item">
<li x-text="item"></li> <li x-text="item"></li>
</template> </template>
</ul> </ul>
<input type="text" x-model="guessValue" @keyup.enter="doGuess(guessValue, guessError)"> <input type="text" x-model="$store.alfagok.guessValue" @keyup.enter="doGuess($store.alfagok.guessValue)">
<p x-cloak>Je huidige gok is: <span x-text="guessValue"></span></p> <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>
<button @click="doGuess(guessValue, guessError)">Doe een gok</button> <button @click="doGuess($store.alfagok.guessValue)">Doe een gok</button>
<p x-show="guessError" x-text="guessError"></p> <p x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
<ul> <ul>
<template x-for="item in guessesAfter" :key="item"> <template x-for="item in $store.alfagok.guessesAfter" :key="item">
<li x-text="item"></li> <li x-text="item"></li>
</template> </template>
</ul> </ul>
<div> <div>
<div x-show="winTime" class="win"> <div x-show="$store.alfagok.winTime" class="win">
<h3><b>Je hebt hem! 🎉</b></h3> <h3><b>Je hebt hem! 🎉</b></h3>
<p>Het woord van vandaag was <b x-text="guessValue"></b>.</p> <p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
<div id="stats"> <div id="stats">
<div id="results"> <div id="results">
<p><b x-data="{ message: '🧩 Puzzle #' + gameID }" x-text="message"></b></p> <p><b x-data="{ message: '🧩 Puzzle #' + $store.alfagok.gameID }" x-text="message"></b></p>
<p x-data="{ message: '🤔 '+ nrGuesses + ' gokken' }" x-text="message"></p> <p x-data="{ message: '🤔 '+ $store.alfagok.nrGuesses + ' gokken' }" x-text="message"></p>
<p x-data="{ message: '⏱️ ' + getFormattedTime(winTime - startTime) }" x-text="message"></p> <p x-data="{ message: '⏱️ ' + getFormattedTime($store.alfagok.winTime - $store.alfagok.startTime) }" x-text="message"></p>
<p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p> <p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>
</div> </div>
</div> </div>
<div id="copyresults"></div> <div id="copyresults"></div>
<button class="copy" data-clipboard-target="#results"> <button class="copy" data-clipboard-target="#results">
Tik om te kopi&euml;ren en te delen ❤️ Tik om te kopi&euml;ren en te delen ❤️
</button> </button>
</div>
</div> </div>
</center> </center>
<input x-model="search" placeholder="Search...">
<ul>
<template x-for="item in filteredItems" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div> </div>
<button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
<div x-data :class="$store.darkMode.on && 'bg-black'">...</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script>
<script src="/static/game.js"></script> <script src="/static/game.js"></script>
<script>
document.addEventListener('alpine:initialized', () => {
Alpine.store('alfagok').gameID = getGameID();
})
</script>
</body> </body>
</html> </html>