Generate results when word is found

This commit is contained in:
2024-11-05 15:10:20 +01:00
parent 43dbf54e53
commit a7499d4e74
2 changed files with 15 additions and 8 deletions

View File

@@ -16,6 +16,10 @@ document.addEventListener('alpine:init', () => {
guessError: '',
resultGameID: '',
resultGuesses: '',
resultTimeTaken: '',
async getGameID() {
/* Get the game number from the backend */
this.loading = true;
@@ -30,7 +34,6 @@ document.addEventListener('alpine:init', () => {
},
async doGuess() {
/* Check guess against server */
this.guessError = null;
this.guessValue = this.guessValue.toLowerCase();
@@ -46,11 +49,12 @@ document.addEventListener('alpine:init', () => {
}
this.nrGuesses++;
if (this.startTime === '') {
if (this.startTime === null) {
console.log('Setting startTime to now');
this.startTime = now();
this.startTime = new Date();
}
/* Check guess against server */
this.loading = true;
let response = await fetch('/api/guess/' + this.guessValue);
@@ -76,7 +80,10 @@ document.addEventListener('alpine:init', () => {
}
if (result.hint && result.hint === 'it') {
console.log('gevonden!');
this.winTime = now();
this.winTime = new Date();
this.resultGameID = '🧩 Puzzel #' + this.gameID;
this.resultGuesses = '🤔 '+ this.nrGuesses + ' gokken';
this.resultTimeTaken = '⏱️ ' + getFormattedTime(this.winTime - this.startTime);
}
}
}),
@@ -111,7 +118,7 @@ function getFormattedTime(milliseconds) {
const formattedTime = [];
if (hours) {
formattedTime.push(`${hours}h`);
formattedTime.push(`${hours}u`);
}
if (minutes) {
formattedTime.push(`${minutes}m`);

View File

@@ -44,9 +44,9 @@
<p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
<div id="stats">
<div id="results">
<p><b x-data="{ message: '🧩 Puzzel #' + $store.alfagok.gameID }" x-text="message"></b></p>
<p x-data="{ message: '🤔 '+ $store.alfagok.nrGuesses + ' gokken' }" x-text="message"></p>
<p x-data="{ message: '⏱️ ' + getFormattedTime($store.alfagok.winTime - $store.alfagok.startTime) }" x-text="message"></p>
<p><b x-text="$store.alfagok.resultGameID"></b></p>
<p x-text="$store.alfagok.resultGuesses"></p>
<p x-text="$store.alfagok.resultTimeTaken"></p>
<p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>
</div>
</div>