Initial support for server-sourced deadline

src/alfagok/main.py

@@ -56,6 +56,14 @@ def get_game_id():
     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
@@ -72,7 +80,7 @@ async def index(request: Request):
 @app.get('/api/game')
 def what_game():
     """Which game is currently on?"""
-    return {'game': get_game_id()}
+    return {'game': get_game_id(), 'deadline': get_game_deadline()}
 
 
 @app.get('/api/guess/{word}')

src/alfagok/static/game.js

@@ -2,6 +2,7 @@ document.addEventListener('alpine:init', () => {
     Alpine.store('alfagok', {
         /* Main alfagok application, state etc */
         gameID: 0,
+        countingDown: '',
 
         loading: false,
 
@@ -88,7 +89,47 @@ document.addEventListener('alpine:init', () => {
                 this.resultGuesses = '🤔 '+ this.nrGuesses + ' gokken';
                 this.resultTimeTaken = '⏱️ ' + getFormattedTime(this.winTime - this.startTime);
             }
+        },
+
+
+        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}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>';
         }
+
     }),
 
     Alpine.store('darkMode', {

src/alfagok/templates/index.html

@@ -17,7 +17,7 @@
 
         <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>