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

Hooking up the API

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-04 21:02:12 +01:00
parent 528c7f87ea
commit 8fd16a6e42
5 changed files with 115 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/alfagok/main.py
View File

@@ -75,7 +75,7 @@ def what_game():
return {'game': get_game_id()}
@app.get('/api/guess')
@app.get('/api/guess/{word}')
def handle_guess(word: Union[str, None] = None):
"""Handle incoming guess."""
current_game_id = get_game_id()
@@ -97,8 +97,8 @@ def handle_guess(word: Union[str, None] = None):
return {'game': current_game_id, 'hint': hint}
@app.get("/api/answer/{item_id}")
@app.get('/api/answer/{item_id}')
def read_item(item_id: int, guess: Union[str, None] = None):
"""Get the word item."""
"""Get the word for the current game."""
word = words[item_id].strip()
return {"item_id": item_id, "guess": guess, 'word': word}
return {'item_id': item_id, 'guess': guess, 'word': word}

6
src/alfagok/static/copy.js
View File

@@ -1,10 +1,10 @@
var clip = new Clipboard('.copy');
clip.on("success", function(e) {
document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Copied! Share your results with friends.</p>';
document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Gekopieerd! Deel je resultaat.</p>';
e.clearSelection();
});
clip.on("error", function() {
document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Error. Please copy manually...</p>';
});
document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Fout. Graag handmatig kopi&euml;ren...</p>';
});

8
src/alfagok/static/game.css
View File

@@ -2,3 +2,11 @@ body {
background-color: #333;
color: #FFF;
}
button {
background-color: #FF9800;
color: #333;
border: 0;
padding: .2rem;
}

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

@@ -0,0 +1,87 @@
/* API calls **/
async function getGameID() {
let response = await fetch('/api/game');
let result = await response.json();
console.log(result);
if (result.game) {
return result.game;
}
}
async function doGuess(guessWord, guessError) {
let response = await fetch('/api/guess/' + guessWord);
let result = await response.json();
console.log(result);
if (result.error) {
console.log('Error occurred during guess');
if (result.error === 'Word not in dictionary') {
guessError = 'Woord komt niet in de woordenlijst voor';
}
console.log(guessError);
}
return result;
}
/* Time formatting **/
function getFormattedTime(milliseconds) {
if (!Number.isInteger(milliseconds)) {
return '';
}
let seconds = Math.round((milliseconds) / 1000);
const hours = Math.floor(seconds / 3600);
seconds %= 3600;
const minutes = Math.floor(seconds / 60);
seconds %= 60;
const formattedTime = [];
if (hours) {
formattedTime.push(`${hours}h`);
}
if (minutes) {
formattedTime.push(`${minutes}m`);
}
if (seconds) {
formattedTime.push(`${seconds}s`);
}
return formattedTime.join(' ') || '0s';
}
/* Clipboard stuff **/
var clip = new Clipboard('.copy');
clip.on("success", function(e) {
document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Gekopieerd! Deel je resultaat.</p>';
e.clearSelection();
});
clip.on("error", function() {
document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Fout. Graag handmatig kopi&euml;ren...</p>';
});
/* Game timer, original from alphaguess.com **/
function go() {
window.timerID = window.setInterval(timer, 0);
}
function timer(){
var nextgame = document.getElementById('nextgame');
var now = new Date();
var midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 0, 0, 0);
var diff = Math.floor((midnight - now)/1000);
var hoursRemain = Math.floor(diff/(60*60));
var minutesRemain = Math.floor((diff-hoursRemain*60*60)/60);
var secondsRemain = Math.floor(diff%60);
nextgame.innerHTML = '<span class="nextgame">'+addZero(hoursRemain)+':'+addZero(minutesRemain)+':'+addZero(secondsRemain)+' over</span>';
}
function addZero(num){
if(num <=9) return '0'+num;
else return num;
}
go();

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

@@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/game.css">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
@@ -26,6 +27,8 @@
guessValue: '',
gameID: 0,
guessError: '',
get filteredItems() {
return this.items.filter(
i => i.startsWith(this.search)
@@ -34,8 +37,8 @@
}"
>
<a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #[[ gameID ]] • <span id="nextgame"></span></span>
<div x-cloak x-if="guessesBefore.length || guessesAfter.length"><br></div>
<a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #<span x-text="gameID"></span> • <span id="nextgame"></span></span>
<div x-cloak x-show="guessesBefore.length || guessesAfter.length"><br></div>
<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>
@@ -51,9 +54,10 @@
</template>
</ul>
<input type="text" x-model="guessValue">
<input type="text" x-model="guessValue" @keyup.enter="doGuess(guessValue, guessError)">
<p x-cloak>Je huidige gok is: <span x-text="guessValue"></span></p>
<input type="button" value="Doe een gok">
<button @click="doGuess(guessValue, guessError)">Doe een gok</button>
<p x-show="guessError" x-text="guessError"></p>
<ul>
<template x-for="item in guessesAfter" :key="item">
@@ -63,20 +67,20 @@
<div>
<div v-if="winTime" class="win">
<div x-show="winTime" class="win">
<h3><b>Je hebt hem! 🎉</b></h3>
<p>Het woord van vandaag was <b x-text="guessValue"></b>.</p>
<div id="stats">
<div id="results">
<p><b x-data="{ message: '🧩 Puzzle #' + gameID }" x-text="message"></b></p>
<p x-data="{ message: '🤔 '+ nrGuesses + ' gokken' }" x-text="message"></p>
<p x-data="{ message: '⏱️ ' + getFormattedTime(winTime - startTime) '" x-text="message"></p>
<p x-data="{ message: '⏱️ ' + getFormattedTime(winTime - startTime) }" x-text="message"></p>
<p>🔗 <span style="color:var(--blue)">alfagok.diginaut.net</span></p>
</div>
</div>
<div id="copyresults"></div>
<button class="copy" data-clipboard-target="#results">
Tik om te kopi&euml;ren te delen ❤️
Tik om te kopi&euml;ren en te delen ❤️
</button>
</div>
</center>
@@ -92,10 +96,9 @@
</div>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script>
<script src="/static/copy.js"></script>
<script src="/static/countdown.js"></script>
{# <script src="/static/copy.js"></script>
<script src="/static/countdown.js"></script>#}
<script src="/static/game.js"></script>
</body>