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

Moved alfagok AlpineJS store to JS file

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-05 13:31:21 +01:00
parent 7ebd52e825
commit ed813f6828
2 changed files with 97 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,43 @@
/* API calls **/ document.addEventListener('alpine:init', () => {
async function doGuess(guessWord) { Alpine.store('alfagok', {
Alpine.store('alfagok').loading = true; gameID: 0,
Alpine.store('alfagok').guessError = null;
loading: false,
winTime: null,
startTime: null,
nrGuesses: 0,
guessesBefore: [],
guessesAfter: [],
guessValue: '',
guessError: '',
async getGameID() {
this.loading = true;
console.log('Loading gameID...');
let response = await fetch('/api/game');
let result = await response.json();
console.log(result);
this.loading = false;
if (result.game) {
return this.gameID = result.game;
}
},
async doGuess(guessWord) {
this.loading = true;
this.guessError = null;
if (guessWord === '') { if (guessWord === '') {
console.log('Nothing filled in'); console.log('Nothing filled in');
Alpine.store('alfagok').guessError = 'Vul een woord in'; this.guessError = 'Vul een woord in';
return; return;
} }
Alpine.store('alfagok').nrGuesses++; this.nrGuesses++;
if (Alpine.store('alfagok').startTime === '') { if (this.startTime === '') {
console.log('Setting startTime to now'); console.log('Setting startTime to now');
} }
@@ -17,28 +45,48 @@ async function doGuess(guessWord) {
let result = await response.json(); let result = await response.json();
console.log(result); console.log(result);
Alpine.store('alfagok').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') {
Alpine.store('alfagok').guessError = 'Woord komt niet in de woordenlijst voor'; this.guessError = 'Woord komt niet in de woordenlijst voor';
} }
return; return;
} }
if (result.hint && result.hint === 'after') { if (result.hint && result.hint === 'after') {
console.log('na'); console.log('na');
Alpine.store('alfagok').guessesBefore.push(guessWord); this.guessesBefore.push(guessWord);
} }
if (result.hint && result.hint === 'before') { if (result.hint && result.hint === 'before') {
console.log('voor'); console.log('voor');
Alpine.store('alfagok').guessesAfter.push(guessWord); this.guessesAfter.push(guessWord);
} }
if (result.hint && result.hint === 'it') { if (result.hint && result.hint === 'it') {
console.log('gevonden'); console.log('gevonden');
Alpine.store('alfagok').winTime = 'yay'; this.winTime = 'yay';
} }
} }
}),
Alpine.store('darkMode', {
init() {
this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
},
on: false,
toggle() {
this.on = ! this.on
}
})
});
/* Time formatting **/ /* Time formatting **/
function getFormattedTime(milliseconds) { function getFormattedTime(milliseconds) {
@@ -102,3 +150,10 @@ function addZero(num){
} }
go(); go();
/* Get current gameID **/
document.addEventListener('alpine:initialized', () => {
Alpine.store('alfagok').getGameID();
})

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

@@ -9,53 +9,6 @@
</head> </head>
<body> <body>
<script>
document.addEventListener('alpine:init', () => {
Alpine.store('alfagok', {
gameID: 0,
loading: false,
winTime: null,
startTime: null,
nrGuesses: 0,
guessesBefore: [],
guessesAfter: [],
guessValue: '',
guessError: '',
async getGameID() {
this.loading = true;
console.log('Loading gameID...');
let response = await fetch('/api/game');
let result = await response.json();
console.log(result);
this.loading = false;
if (result.game) {
return this.gameID = result.game;
}
}
}),
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="" x-data=""
@@ -78,9 +31,9 @@
</template> </template>
</ul> </ul>
<input type="text" x-model="$store.alfagok.guessValue" @keyup.enter="doGuess($store.alfagok.guessValue)"> <input type="text" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess($store.alfagok.guessValue)">
{# <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="doGuess($store.alfagok.guessValue)">Doe een gok</button> <button @click="$store.alfagok.doGuess($store.alfagok.guessValue)">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>
@@ -112,20 +65,12 @@
</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> <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
document.addEventListener('alpine:initialized', () => { <div x-data :class="$store.darkMode.on && 'bg-black'">...</div>
//Alpine.store('alfagok').gameID = getGameID(); #}
Alpine.store('alfagok').getGameID();
})
</script>
</body> </body>
</html> </html>