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

Use the guess string from the store

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-05 13:54:35 +01:00
parent cabd695e49
commit 066a99657e
2 changed files with 29 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,6 @@
document.addEventListener('alpine:init', () => { document.addEventListener('alpine:init', () => {
Alpine.store('alfagok', { Alpine.store('alfagok', {
/* Main alfagok application, state etc */
gameID: 0, gameID: 0,
loading: false, loading: false,
@@ -16,6 +17,7 @@ document.addEventListener('alpine:init', () => {
guessError: '', guessError: '',
async getGameID() { async getGameID() {
/* Get the game number from the backend */
this.loading = true; this.loading = true;
console.log('Loading gameID...'); console.log('Loading gameID...');
let response = await fetch('/api/game'); let response = await fetch('/api/game');
@@ -27,25 +29,36 @@ document.addEventListener('alpine:init', () => {
} }
}, },
async doGuess(guessWord) { async doGuess() {
this.loading = true; /* Check guess against server */
this.guessError = null; this.guessError = null;
if (guessWord === '') {
this.guessValue = this.guessValue.toLowerCase();
if (this.guessValue === '') {
console.log('Nothing filled in'); console.log('Nothing filled in');
this.guessError = 'Vul een woord in'; this.guessError = 'Vul een woord in';
return; return;
} }
if (this.guessesBefore.includes(this.guessValue) || this.guessesAfter.includes(this.guessValue)) {
this.guessError = 'Woord is al gebruikt';
return;
}
this.nrGuesses++; this.nrGuesses++;
if (this.startTime === '') { if (this.startTime === '') {
console.log('Setting startTime to now'); console.log('Setting startTime to now');
this.startTime = now();
} }
let response = await fetch('/api/guess/' + guessWord); this.loading = true;
let response = await fetch('/api/guess/' + this.guessValue);
let result = await response.json(); let result = await response.json();
console.log(result); console.log(result);
this.loading = false; this.loading = false;
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') {
@@ -54,25 +67,23 @@ document.addEventListener('alpine:init', () => {
return; return;
} }
if (result.hint && result.hint === 'after') { if (result.hint && result.hint === 'after') {
console.log('na'); this.guessesBefore.push(this.guessValue);
this.guessesBefore.push(guessWord); this.guessesBefore.sort();
} }
if (result.hint && result.hint === 'before') { if (result.hint && result.hint === 'before') {
console.log('voor'); this.guessesAfter.push(this.guessValue);
this.guessesAfter.push(guessWord); this.guessesAfter.sort();
} }
if (result.hint && result.hint === 'it') { if (result.hint && result.hint === 'it') {
console.log('gevonden'); console.log('gevonden!');
this.winTime = 'yay'; this.winTime = now();
} }
} }
}), }),
Alpine.store('darkMode', { Alpine.store('darkMode', {
/* Different Alpine app, dark mode settings for the game */
init() { init() {
this.on = window.matchMedia('(prefers-color-scheme: dark)').matches this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
}, },
@@ -152,8 +163,9 @@ function addZero(num){
go(); go();
/* Get current gameID **/ /* Get current gameID etc **/
document.addEventListener('alpine:initialized', () => { document.addEventListener('alpine:initialized', () => {
/* On AlpineJS completely loaded, do all this */
Alpine.store('alfagok').getGameID(); Alpine.store('alfagok').getGameID();
}) })

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

@@ -31,9 +31,9 @@
</template> </template>
</ul> </ul>
<input type="text" autocomplete="new-password" autocorrect="off" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess($store.alfagok.guessValue)"> <input type="text" autocomplete="new-password" autocorrect="off" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess()">
{# <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>#} {# <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>#}
<button @click="$store.alfagok.doGuess($store.alfagok.guessValue)">Doe een gok</button> <button @click="$store.alfagok.doGuess()">Doe een gok</button>
<p x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p> <p x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
<ul> <ul>