Use Amsterdam timezone as this is Dutch ^_^

Savegames using Alpine.js persistence

requirements-server.txt

@@ -2,26 +2,27 @@
 #    uv pip compile requirements-server.in
 annotated-types==0.7.0
     # via pydantic
-anyio==4.6.2.post1
+anyio==4.7.0
     # via
     #   httpx
     #   starlette
     #   watchfiles
-certifi==2024.8.30
+certifi==2024.12.14
     # via
     #   httpcore
     #   httpx
-click==8.1.7
+click==8.1.8
     # via
+    #   rich-toolkit
     #   typer
     #   uvicorn
 dnspython==2.7.0
     # via email-validator
 email-validator==2.2.0
     # via fastapi
-fastapi==0.115.5
+fastapi==0.115.6
     # via -r requirements.in
-fastapi-cli==0.0.5
+fastapi-cli==0.0.7
     # via fastapi
 gunicorn==23.0.0
     # via -r requirements-server.in
@@ -33,14 +34,14 @@ httpcore==1.0.7
     # via httpx
 httptools==0.6.4
     # via uvicorn
-httpx==0.27.2
+httpx==0.28.1
     # via fastapi
 idna==3.10
     # via
     #   anyio
     #   email-validator
     #   httpx
-jinja2==3.1.4
+jinja2==3.1.5
     # via fastapi
 markdown-it-py==3.0.0
     # via rich
@@ -50,13 +51,13 @@ mdurl==0.1.2
     # via markdown-it-py
 packaging==24.2
     # via gunicorn
-pydantic==2.10.1
+pydantic==2.10.4
     # via
     #   fastapi
     #   pydantic-settings
-pydantic-core==2.27.1
+pydantic-core==2.27.2
     # via pydantic
-pydantic-settings==2.6.1
+pydantic-settings==2.7.0
     # via -r requirements.in
 pygments==2.18.0
     # via rich
@@ -64,35 +65,39 @@ python-dotenv==1.0.1
     # via
     #   pydantic-settings
     #   uvicorn
-python-multipart==0.0.17
+python-multipart==0.0.20
     # via fastapi
 pyyaml==6.0.2
     # via uvicorn
 rich==13.9.4
-    # via typer
+    # via
+    #   rich-toolkit
+    #   typer
+rich-toolkit==0.12.0
+    # via fastapi-cli
 shellingham==1.5.4
     # via typer
 sniffio==1.3.1
-    # via
-    #   anyio
-    #   httpx
+    # via anyio
 starlette==0.41.3
     # via fastapi
-typer==0.13.1
+typer==0.15.1
     # via fastapi-cli
 typing-extensions==4.12.2
     # via
+    #   anyio
     #   fastapi
     #   pydantic
     #   pydantic-core
+    #   rich-toolkit
     #   typer
-uvicorn==0.32.1
+uvicorn==0.34.0
     # via
     #   fastapi
     #   fastapi-cli
 uvloop==0.21.0
     # via uvicorn
-watchfiles==0.24.0
+watchfiles==1.0.3
     # via uvicorn
 websockets==14.1
     # via uvicorn

requirements.txt

@@ -2,26 +2,27 @@
 #    uv pip compile requirements.in
 annotated-types==0.7.0
     # via pydantic
-anyio==4.6.2.post1
+anyio==4.7.0
     # via
     #   httpx
     #   starlette
     #   watchfiles
-certifi==2024.8.30
+certifi==2024.12.14
     # via
     #   httpcore
     #   httpx
-click==8.1.7
+click==8.1.8
     # via
+    #   rich-toolkit
     #   typer
     #   uvicorn
 dnspython==2.7.0
     # via email-validator
 email-validator==2.2.0
     # via fastapi
-fastapi==0.115.5
+fastapi==0.115.6
     # via -r requirements.in
-fastapi-cli==0.0.5
+fastapi-cli==0.0.7
     # via fastapi
 h11==0.14.0
     # via
@@ -31,14 +32,14 @@ httpcore==1.0.7
     # via httpx
 httptools==0.6.4
     # via uvicorn
-httpx==0.27.2
+httpx==0.28.1
     # via fastapi
 idna==3.10
     # via
     #   anyio
     #   email-validator
     #   httpx
-jinja2==3.1.4
+jinja2==3.1.5
     # via fastapi
 markdown-it-py==3.0.0
     # via rich
@@ -46,13 +47,13 @@ markupsafe==3.0.2
     # via jinja2
 mdurl==0.1.2
     # via markdown-it-py
-pydantic==2.10.1
+pydantic==2.10.4
     # via
     #   fastapi
     #   pydantic-settings
-pydantic-core==2.27.1
+pydantic-core==2.27.2
     # via pydantic
-pydantic-settings==2.6.1
+pydantic-settings==2.7.0
     # via -r requirements.in
 pygments==2.18.0
     # via rich
@@ -60,35 +61,39 @@ python-dotenv==1.0.1
     # via
     #   pydantic-settings
     #   uvicorn
-python-multipart==0.0.17
+python-multipart==0.0.20
     # via fastapi
 pyyaml==6.0.2
     # via uvicorn
 rich==13.9.4
-    # via typer
+    # via
+    #   rich-toolkit
+    #   typer
+rich-toolkit==0.12.0
+    # via fastapi-cli
 shellingham==1.5.4
     # via typer
 sniffio==1.3.1
-    # via
-    #   anyio
-    #   httpx
+    # via anyio
 starlette==0.41.3
     # via fastapi
-typer==0.13.1
+typer==0.15.1
     # via fastapi-cli
 typing-extensions==4.12.2
     # via
+    #   anyio
     #   fastapi
     #   pydantic
     #   pydantic-core
+    #   rich-toolkit
     #   typer
-uvicorn==0.32.1
+uvicorn==0.34.0
     # via
     #   fastapi
     #   fastapi-cli
 uvloop==0.21.0
     # via uvicorn
-watchfiles==0.24.0
+watchfiles==1.0.3
     # via uvicorn
 websockets==14.1
     # via uvicorn

src/alfagok/main.py

@@ -2,8 +2,9 @@
 import logging
 from datetime import date, datetime, timezone
 from typing import Union
+from zoneinfo import ZoneInfo
 
-from fastapi import FastAPI, Request
+from fastapi import FastAPI, Request, HTTPException
 from fastapi.responses import HTMLResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
@@ -11,6 +12,11 @@ from pydantic import DirectoryPath, FilePath
 from pydantic_settings import BaseSettings
 
 
+VERSION = '0.3.1'
+
+AMSTERDAM = ZoneInfo('Europe/Amsterdam')
+
+
 class Settings(BaseSettings):
     """Configuration needed for alfagok to find its word list, using environment variables."""
 
@@ -51,15 +57,15 @@ if settings.debug:
 
 def get_game_id():
     """Calculate the index for the game/word we are handling today."""
-    today = datetime.now(timezone.utc).date()
+    today = datetime.now(tz=AMSTERDAM).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)
+    this_moment = datetime.now(tz=AMSTERDAM)
+    midnight = datetime.now(tz=AMSTERDAM).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
 
@@ -74,7 +80,7 @@ def is_valid_dictionary_word(word: str) -> bool:
 async def index(request: Request):
     """Generate the main HTML page of the game."""
     language = 'nl'
-    return templates.TemplateResponse(request=request, name='index.html', context={'language': language})
+    return templates.TemplateResponse(request=request, name='index.html', context={'language': language, 'version': VERSION})
 
 
 @app.get('/api/game')
@@ -106,7 +112,10 @@ def handle_guess(word: Union[str, None] = None):
 
 
 @app.get('/api/answer/{item_id}')
-def read_item(item_id: int, guess: Union[str, None] = None):
-    """Get the word for the current game."""
+def read_item(item_id: int):
+    """Get the word for the game with ID `item_id`."""
+    current_game_id = get_game_id()
+    if item_id > current_game_id:
+        raise HTTPException(status_code=403, detail='No peaking!')
     word = words[item_id].strip()
-    return {'item_id': item_id, 'guess': guess, 'word': word}
+    return {'item_id': item_id, 'word': word}

src/alfagok/static/game.css

@@ -33,8 +33,8 @@ a.title {
     padding: 2rem 0 0 0;
 }
 
-.guessesheading {
-    color: #CCC;;
+.guessesheading, .copied {
+    color: #CCC;
 }
 
 .guessesheading, .guessesbefore, .guessesafter {

src/alfagok/static/game.js

@@ -1,33 +1,41 @@
 document.addEventListener('alpine:init', () => {
     Alpine.store('alfagok', {
-        // isLocalStorageAvailable: this.testLocalStorage(),
-        isLocalStorageAvailable: false,
-        savedGameKey: 'saveGame',
-
-        /* Main alfagok application, state etc */
-        gameID: 0,
+        /** Main alfagok application, state etc */
+        gameID: Alpine.$persist(0).as('gameID'),
         countingDown: '',
+        nextGameIn: 0,
+        gameFetchedAt: null,
 
         loading: false,
 
-        winTime: null,
-        startTime: null,
-        gaveUpTime: null, // not implemented yet
+        winTime: Alpine.$persist(null).as('winTime'),
+        startTime: Alpine.$persist(null).as('startTime'),
+        gaveUpTime: Alpine.$persist(null).as('gaveUpTime'), // not implemented yet
 
-        nrGuesses: 0,
-        guessesBefore: [],
-        guessesAfter: [],
+        nrGuesses: Alpine.$persist(0).as('nrGuesses'),
+        guessesBefore: Alpine.$persist([]).as('guessesBefore'),
+        guessesAfter: Alpine.$persist([]).as('guessesAfter'),
 
-        guessValue: '',
+        guessValue: Alpine.$persist('').as('guessValue'),
 
         guessError: '',
 
-        resultGameID: '',
-        resultGuesses: '',
-        resultTimeTaken: '',
+        resultGameID: Alpine.$persist('').as('resultGameID'),
+        resultGuesses: Alpine.$persist('').as('resultGuesses'),
+        resultTimeTaken: Alpine.$persist('').as('resultTimeTaken'),
 
+        resultsCopied: false,
+
+        async init() {
+            /** Initialise the application after loading */
+            await this.getGameID();
+            setInterval(() => {
+                // Update counter to next game (midnight UTC, fetched from API) every second
+                this.countDownTimer();
+            }, 1000);
+        },
         async getGameID() {
-            /* Get the game number from the backend */
+            /** Get the game number from the backend */
             this.loading = true;
             console.log('Loading gameID...');
             let response = await fetch('/api/game');
@@ -35,11 +43,19 @@ document.addEventListener('alpine:init', () => {
             console.log(result);
             this.loading = false;
             if (result.game) {
+                if (this.gameID !== result.game) {
+                    this.setEmptyGameState();
+                }
+                this.nextGameIn = result.deadline;
+                this.gameFetchedAt = new Date();
+                if (this.countingDown === '') {
+                    this.countDownTimer();
+                }
                 return this.gameID = result.game;
             }
         },
-
         async doGuess() {
+            /** Handle the newly entered guess */
             this.guessError = null;
 
             /* Normalise on lowercase, and strip whitespace from begin and end, just in case */
@@ -92,12 +108,16 @@ document.addEventListener('alpine:init', () => {
                 this.winTime = new Date();
                 this.resultGameID = '🧩 Puzzel #' + this.gameID;
                 this.resultGuesses = '🤔 '+ this.nrGuesses + ' gokken';
-                this.resultTimeTaken = '⏱️ ' + getFormattedTime(this.winTime - this.startTime);
+                let winTimeDate = new Date(this.winTime);
+                let startTimeDate = new Date(this.startTime);
+                this.resultTimeTaken = '⏱️ ' + this.getFormattedTime(winTimeDate - startTimeDate);
             }
         },
         setEmptyGameState() {
+            /** Clean slate for new game */
             this.winTime = null;
             this.startTime = null;
+            this.gaveUpTime = null;
 
             this.nrGuesses = 0;
             this.guessesBefore = [];
@@ -110,83 +130,9 @@ document.addEventListener('alpine:init', () => {
             this.resultGameID = '';
             this.resultGuesses = '';
             this.resultTimeTaken = '';
-
-            this.getGameID();
         },
-        // # Local Storage Persistence
-        storeGameState() {
-            localStorage.setItem(this.savedGameKey, JSON.stringify({
-                startTime,
-                winTime,
-                gaveUpTime,
-                guessesBefore,
-            }));
-        },
-        getStoredGameState() {
-            if (!this.isLocalStorageAvailable) return undefined;
-
-            const savedGameJson = localStorage.getItem(this.savedGameKey);
-            try {
-                return savedGameJson && JSON.parse(savedGameJson);
-            } catch (e) {
-                localStorage.removeItem(this.savedGameKey);
-            }
-            return undefined;
-        },
-        loadGameState() {
-            const savedGame = this.getStoredGameState();
-
-            if (!savedGame || !savedGame.gameID || (savedGame.gameID !== this.gameID)) {
-                this.setEmptyGameState();
-                return;
-            }
-            if (!savedGame || !savedGame.startTime) {
-                this.setEmptyGameState();
-                return;
-            }
-            const startTime = new Date(savedGame.startTime);
-            if (!isPlayDateToday(app.playDate)) {
-                this.setEmptyGameState();
-                return;
-            }
-            const savedGameForToday = getDOY(startTime) === getDOY(now());
-            if (!savedGameForToday) {
-                this.resetSavedGames();
-                this.setEmptyGameState();
-                return;
-            }
-            const {
-                winTime,
-                guessesBefore,
-                guessesAfter,
-                guessValue,
-            } = savedGame;
-            const gaveUpTime = null; // to be implemented
-            this.startTime = startTime;
-            this.winTime = (winTime && new Date(winTime)) || null;
-            this.guessesBefore = guessesBefore || [];
-            this.guessesAfter = guessesAfter || [];
-            if (gaveUpTime || this.winTime) {
-                this.guessValue = guessValue;
-            }
-        },
-            resetSavedGames() {
-            localStorage.removeItem(this.savedGameKey);
-        },
-        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;
-            }
-            console.log('Local storage is available? ' + this.isLocalStorageAvailable);
-        },
-        // # Countdown timer
         getFormattedTime(milliseconds) {
+            /** Nicely format time for 'time played' */
             if (!Number.isInteger(milliseconds)) {
                 return '';
             }
@@ -209,19 +155,24 @@ document.addEventListener('alpine:init', () => {
 
             return formattedTime.join(' ') || '0s';
         },
+        // # Countdown timer
         addZero(num){
+            /** Pad with 0 if needed */
             if (num <= 9) return '0' + num;
             else return num;
         },
         countDownTimer(){
-            let nextgame = document.getElementById('nextgame');
+            /** Update counter to next game (midnight UTC, fetched from API) */
+            if (this.gameFetchedAt === null) { return; }
             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 gameDataFetched = new Date(this.gameFetchedAt);
+            let nextGameStart = gameDataFetched.setSeconds(gameDataFetched.getSeconds() + this.nextGameIn);
+            let diff =  Math.floor((nextGameStart - 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>';
+
+            this.countingDown = this.addZero(hoursRemain) + ':' + this.addZero(minutesRemain) + ':' + this.addZero(secondsRemain) + ' over';
         }
     })
 
@@ -240,76 +191,7 @@ document.addEventListener('alpine:init', () => {
 
 });
 
-
-/* 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}u`);
-    }
-    if (minutes) {
-        formattedTime.push(`${minutes}m`);
-    }
-    if (seconds) {
-        formattedTime.push(`${seconds}s`);
-    }
-
-    return formattedTime.join(' ') || '0s';
-}
-
-/* Clipboard stuff **/
-
-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>';
-  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(){
-    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>';
-}
-
-function addZero(num){
-    if(num <=9) return '0'+num;
-    else return num;
-}
-
-go();
-
-
-/* Get current gameID etc **/
-
-document.addEventListener('alpine:initialized', () => {
+// document.addEventListener('alpine:initialized', () => {
     /* On AlpineJS completely loaded, do all this */
-    Alpine.store('alfagok').getGameID();
-    Alpine.store('alfagok').testLocalStorage();
-})
+    // Alpine.store('alfagok').getGameID();
+// })

src/alfagok/templates/index.html

@@ -5,24 +5,24 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <meta name="description" content="Raad het woord van de dag. Elke gok geeft een hint over waar het woord zich in het alfabet bevindt. Iedereen speelt hetzelfde woord.">
-        <link rel="stylesheet" href="/static/game.css">
-        <link id="favicon" rel="icon" type="image/x-icon" href="static/images/favicon.ico">
-        <link rel="apple-touch-icon" sizes="180x180" href="static/images/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="static/images/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon-16x16.png">
-        <link rel="manifest" href="static/images/site.webmanifest">
-        <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
+        <link rel="stylesheet" href="/static/game.css?v={{ version }}">
+        <link id="favicon" rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
+        <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
+        <link rel="manifest" href="/static/images/site.webmanifest">
+        <script src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js" defer></script>
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     </head>
     <body>
 
         <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.countingDown"></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 x-text="$store.alfagok.countingDown"></span> • <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>
 
             <p class="guessesheading" x-cloak x-show="$store.alfagok.guessesBefore.length">Het woord van de dag komt <em>na</em>:</p>
@@ -47,11 +47,11 @@
                         <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>
+                        <p>🔗 <span class="link">alfagok.diginaut.net</span></p>
                     </div>
                 </div>
-                <div id="copyresults"></div>
-                <button class="copy" data-clipboard-target="#results">
+                <div class="copied" x-show="$store.alfagok.resultsCopied">Gekopieerd! Deel je resultaat.</div>
+                <button class="copy" @click="$clipboard($store.alfagok.resultGameID + '\n' + $store.alfagok.resultGuesses + '\n' + $store.alfagok.resultTimeTaken + '\n' + '🔗 alfagok.diginaut.net'); $store.alfagok.resultsCopied = true">
                       Tik om te kopi&euml;ren en te delen ❤️
                 </button>
             </div>
@@ -65,12 +65,10 @@
 
         </div>
 
-        <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
-        <script src="/static/game.js"></script>
+        <script src="/static/game.js?v={{ version }}"></script>
 {#
         <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
         <div x-data :class="$store.darkMode.on && 'bg-black'">...</div>
 #}
-
     </body>
 </html>