Merge branch 'main' into savegames

requirements-server.txt

@@ -50,11 +50,11 @@ mdurl==0.1.2
     # via markdown-it-py
 packaging==24.2
     # via gunicorn
-pydantic==2.9.2
+pydantic==2.10.1
     # via
     #   fastapi
     #   pydantic-settings
-pydantic-core==2.23.4
+pydantic-core==2.27.1
     # via pydantic
 pydantic-settings==2.6.1
     # via -r requirements.in
@@ -86,7 +86,7 @@ typing-extensions==4.12.2
     #   pydantic
     #   pydantic-core
     #   typer
-uvicorn==0.32.0
+uvicorn==0.32.1
     # via
     #   fastapi
     #   fastapi-cli

requirements.txt

@@ -46,11 +46,11 @@ markupsafe==3.0.2
     # via jinja2
 mdurl==0.1.2
     # via markdown-it-py
-pydantic==2.9.2
+pydantic==2.10.1
     # via
     #   fastapi
     #   pydantic-settings
-pydantic-core==2.23.4
+pydantic-core==2.27.1
     # via pydantic
 pydantic-settings==2.6.1
     # via -r requirements.in
@@ -82,7 +82,7 @@ typing-extensions==4.12.2
     #   pydantic
     #   pydantic-core
     #   typer
-uvicorn==0.32.0
+uvicorn==0.32.1
     # via
     #   fastapi
     #   fastapi-cli

src/alfagok/main.py

@@ -1,6 +1,6 @@
 """Main alfagok API application."""
 import logging
-from datetime import date
+from datetime import date, datetime, timezone
 from typing import Union
 
 from fastapi import FastAPI, Request
@@ -51,11 +51,19 @@ if settings.debug:
 
 def get_game_id():
     """Calculate the index for the game/word we are handling today."""
-    today = date.today()
+    today = datetime.now(timezone.utc).date()
     # Calculate the amount of days since the start of the games so we know which word is used today
     return (today - settings.start_date).days
 
 
+def get_game_deadline():
+    """Calculate the amount of time left for the current game."""
+    this_moment = datetime.now(timezone.utc)
+    midnight = datetime.now(timezone.utc).replace(hour=23, minute=59, second=59, microsecond=0)
+    # Calculate the amount of time left till midnight (and the start of the next game)
+    return midnight - this_moment
+
+
 def is_valid_dictionary_word(word: str) -> bool:
     """Verify if `word` is in the dictionary provided."""
     # Either we: [ ] strip all the endlines during file load, or [x] use the endline to search here
@@ -71,8 +79,8 @@ async def index(request: Request):
 
 @app.get('/api/game')
 def what_game():
-    """Handle incoming guess."""
-    return {'game': get_game_id()}
+    """Which game is currently on?"""
+    return {'game': get_game_id(), 'deadline': get_game_deadline()}
 
 
 @app.get('/api/guess/{word}')

src/alfagok/static/game.css

@@ -37,6 +37,10 @@ a.title {
     color: #CCC;;
 }
 
+.guessesheading, .guessesbefore, .guessesafter {
+    text-align: center;
+}
+
 input[type="text"] {
     box-sizing: border-box;
     width: 100%;

src/alfagok/static/game.js

@@ -5,6 +5,7 @@ document.addEventListener('alpine:init', () => {
 
         /* Main alfagok application, state etc */
         gameID: 0,
+        countingDown: '',
 
         loading: false,
 
@@ -162,20 +163,42 @@ document.addEventListener('alpine:init', () => {
                 this.guessValue = guessValue;
             }
         },
-        resetSavedGames() {
-            localStorage.removeItem('saveGame');
-        },
-        testLocalStorage() {
-            // stolen from https://stackoverflow.com/questions/16427636/check-if-localstorage-is-available
-            const test = 'test';
-            try {
-                localStorage.setItem(test, test);
-                localStorage.removeItem(test);
-                this.isLocalStorageAvailable = true;
-            } catch (e) {
-                this.isLocalStorageAvailable = false;
+        getFormattedTime(milliseconds) {
+            if (!Number.isInteger(milliseconds)) {
+                return '';
             }
-            console.log('Local storage is available? ' + this.isLocalStorageAvailable);
+            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}u`);
+            }
+            if (minutes) {
+                formattedTime.push(`${minutes}m`);
+            }
+            if (seconds) {
+                formattedTime.push(`${seconds}s`);
+            }
+
+            return formattedTime.join(' ') || '0s';
+        },
+        addZero(num){
+            if(num <=9) return '0'+num;
+            else return num;
+        },
+        countDownTimer(){
+            let nextgame = document.getElementById('nextgame');
+            let now = new Date();
+            let midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 0, 0, 0);
+            let diff =  Math.floor((midnight - now)/1000);
+            let hoursRemain   = Math.floor(diff/(60*60));
+            let minutesRemain = Math.floor((diff-hoursRemain*60*60)/60);
+            let secondsRemain = Math.floor(diff%60);
+            nextgame.innerHTML   = '<span class="nextgame">'+addZero(hoursRemain)+':'+addZero(minutesRemain)+':'+addZero(secondsRemain)+' over</span>';
         }
     }),
 
@@ -223,7 +246,7 @@ function getFormattedTime(milliseconds) {
 
 /* Clipboard stuff **/
 
-var clip = new Clipboard('.copy');
+let clip = new ClipboardJS('.copy');
 
 clip.on("success", function(e) {
   document.getElementById('copyresults').innerHTML = '<p style="font-size:var(--small);opacity:50%">Gekopieerd! Deel je resultaat.</p>';
@@ -242,13 +265,13 @@ function go() {
 }
 
 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);
+    let nextgame = document.getElementById('nextgame');
+    let now = new Date();
+    let midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate()+1, 0, 0, 0);
+    let diff =  Math.floor((midnight - now)/1000);
+    let hoursRemain   = Math.floor(diff/(60*60));
+    let minutesRemain = Math.floor((diff-hoursRemain*60*60)/60);
+    let secondsRemain = Math.floor(diff%60);
     nextgame.innerHTML   = '<span class="nextgame">'+addZero(hoursRemain)+':'+addZero(minutesRemain)+':'+addZero(secondsRemain)+' over</span>';
 }
 

src/alfagok/templates/index.html

@@ -17,15 +17,13 @@
 
         <div id="container" x-data="">
 
-            <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzel #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span> • <span x-text="$store.alfagok.nrGuesses"></span> gokken</span>
+            <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzel #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span> | <span x-text="$store.alfagok.countingDown" • <span x-text="$store.alfagok.nrGuesses"></span> gokken</span>
 
             <div x-cloak class="instructions" x-show="$store.alfagok.guessesBefore.length === 0 && $store.alfagok.guessesAfter.length === 0">
                 <p>Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt.</p>
                 <p x-show="$store.alfagok.isLocalStorageAvailable"></p>
             </div>
 
-            <center>
-
             <p class="guessesheading" x-cloak x-show="$store.alfagok.guessesBefore.length">Het woord van de dag komt <em>na</em>:</p>
             <ul class="guessesbefore">
                 <template x-for="item in $store.alfagok.guessesBefore" :key="item">
@@ -64,11 +62,9 @@
                 </template>
             </ul>
 
-            </center>
-
         </div>
 
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script>
+        <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
         <script src="/static/game.js"></script>
 {#
         <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>