Fixed paths to the favicons

README.md

@@ -89,7 +89,7 @@ Environment="DICTIONARY_LIST=/srv/www_data/alfagok.example.com/dictionary.txt"
 Environment="STATIC_DIR=/srv/www/alfagok.example.com/alfagok/src/alfagok/static"
 Environment="TEMPLATE_DIR=/srv/www/alfagok.example.com/alfagok/src/alfagok/templates"
 
-ExecStart=/srv/www/alfagok.example.com/venv/bin/gunicorn -c /srv/www/_webconfig/sites/alfagok.diginaut.net/gunicorn_alfagok_conf.py alfagok.main:app
+ExecStart=/srv/www/alfagok.example.com/venv/bin/gunicorn -c /srv/www/_webconfig/sites/alfagok.example.com/gunicorn_alfagok_conf.py alfagok.main:app
 
 [Install]
 WantedBy=multi-user.target

requirements-server.txt

@@ -19,7 +19,7 @@ dnspython==2.7.0
     # via email-validator
 email-validator==2.2.0
     # via fastapi
-fastapi==0.115.4
+fastapi==0.115.5
     # via -r requirements.in
 fastapi-cli==0.0.5
     # via fastapi
@@ -29,7 +29,7 @@ h11==0.14.0
     # via
     #   httpcore
     #   uvicorn
-httpcore==1.0.6
+httpcore==1.0.7
     # via httpx
 httptools==0.6.4
     # via uvicorn
@@ -48,7 +48,7 @@ markupsafe==3.0.2
     # via jinja2
 mdurl==0.1.2
     # via markdown-it-py
-packaging==24.1
+packaging==24.2
     # via gunicorn
 pydantic==2.9.2
     # via
@@ -76,9 +76,9 @@ sniffio==1.3.1
     # via
     #   anyio
     #   httpx
-starlette==0.41.2
+starlette==0.41.3
     # via fastapi
-typer==0.12.5
+typer==0.13.1
     # via fastapi-cli
 typing-extensions==4.12.2
     # via
@@ -94,5 +94,5 @@ uvloop==0.21.0
     # via uvicorn
 watchfiles==0.24.0
     # via uvicorn
-websockets==13.1
+websockets==14.1
     # via uvicorn

requirements.txt

@@ -19,7 +19,7 @@ dnspython==2.7.0
     # via email-validator
 email-validator==2.2.0
     # via fastapi
-fastapi==0.115.4
+fastapi==0.115.5
     # via -r requirements.in
 fastapi-cli==0.0.5
     # via fastapi
@@ -27,7 +27,7 @@ h11==0.14.0
     # via
     #   httpcore
     #   uvicorn
-httpcore==1.0.6
+httpcore==1.0.7
     # via httpx
 httptools==0.6.4
     # via uvicorn
@@ -72,9 +72,9 @@ sniffio==1.3.1
     # via
     #   anyio
     #   httpx
-starlette==0.41.2
+starlette==0.41.3
     # via fastapi
-typer==0.12.5
+typer==0.13.1
     # via fastapi-cli
 typing-extensions==4.12.2
     # via
@@ -90,5 +90,5 @@ uvloop==0.21.0
     # via uvicorn
 watchfiles==0.24.0
     # via uvicorn
-websockets==13.1
+websockets==14.1
     # via uvicorn

src/alfagok/static/game.css

@@ -7,6 +7,8 @@ body {
     padding: 2rem 1rem;
 }
 
+[x-cloak] { display: none !important; }
+
 a.title {
     color: #FF9800;
     font-weight: bold;
@@ -23,12 +25,16 @@ a.title {
     float: right;
 }
 
+#container center {
+    padding-top: 2rem;
+}
+
 .instructions {
     padding: 2rem 0 0 0;
 }
 
-.guessesbefore {
-    padding-top: 2rem;
+.guessesheading {
+    color: #CCC;;
 }
 
 input[type="text"] {
@@ -50,6 +56,7 @@ button {
 
 ul {
     list-style-type: none;
+    padding-left: 0;
 }
 
 .error {
@@ -61,3 +68,12 @@ input[type="text"], button, .error {
     padding: .5rem;
     font-size: 1.5rem;
 }
+
+.win {
+    background-color: rgb(42 73 54);
+    padding: 1rem;
+}
+
+.results {
+    background-color: #333;
+}

src/alfagok/static/game.js

@@ -16,6 +16,10 @@ document.addEventListener('alpine:init', () => {
 
         guessError: '',
 
+        resultGameID: '',
+        resultGuesses: '',
+        resultTimeTaken: '',
+
         async getGameID() {
             /* Get the game number from the backend */
             this.loading = true;
@@ -30,10 +34,10 @@ document.addEventListener('alpine:init', () => {
         },
 
         async doGuess() {
-            /* Check guess against server */
             this.guessError = null;
 
-            this.guessValue = this.guessValue.toLowerCase();
+            /* Normalise on lowercase, and strip whitespace from begin and end, just in case */
+            this.guessValue = this.guessValue.toLowerCase().trim();
 
             if (this.guessValue === '') {
                 console.log('Nothing filled in');
@@ -45,12 +49,12 @@ document.addEventListener('alpine:init', () => {
                 return;
             }
 
-            this.nrGuesses++;
-            if (this.startTime === '') {
+            if (this.startTime === null) {
                 console.log('Setting startTime to now');
-                this.startTime = now();
+                this.startTime = new Date();
             }
 
+            /* Check guess against server */
             this.loading = true;
 
             let response = await fetch('/api/guess/' + this.guessValue);
@@ -66,17 +70,23 @@ document.addEventListener('alpine:init', () => {
                 }
                 return;
             }
+            this.nrGuesses++;
             if (result.hint && result.hint === 'after') {
                 this.guessesBefore.push(this.guessValue);
                 this.guessesBefore.sort();
+                this.guessValue = '';
             }
             if (result.hint && result.hint === 'before') {
                 this.guessesAfter.push(this.guessValue);
                 this.guessesAfter.sort();
+                this.guessValue = '';
             }
             if (result.hint && result.hint === 'it') {
                 console.log('gevonden!');
-                this.winTime = now();
+                this.winTime = new Date();
+                this.resultGameID = '🧩 Puzzel #' + this.gameID;
+                this.resultGuesses = '🤔 '+ this.nrGuesses + ' gokken';
+                this.resultTimeTaken = '⏱️ ' + getFormattedTime(this.winTime - this.startTime);
             }
         }
     }),
@@ -111,7 +121,7 @@ function getFormattedTime(milliseconds) {
 
     const formattedTime = [];
     if (hours) {
-        formattedTime.push(`${hours}h`);
+        formattedTime.push(`${hours}u`);
     }
     if (minutes) {
         formattedTime.push(`${minutes}m`);

src/alfagok/static/images/site.webmanifest

@@ -0,0 +1 @@
+{"name":"alfagok","short_name":"alfagok","icons":[{"src":"/static/images/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/static/images//android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/alfagok/templates/index.html

@@ -6,56 +6,64 @@
         <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@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>
+            <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>
 
             <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">
                         <li x-text="item"></li>
                     </template>
                 </ul>
 
-                <input type="text" autocomplete="new-password" autocorrect="off" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess()">
+                <div x-show="!$store.alfagok.winTime">
+                    <input type="text" autocomplete="new-password" autocorrect="off" x-model="$store.alfagok.guessValue" @keyup.enter="$store.alfagok.doGuess()">
 {#                <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>#}
-                <button @click="$store.alfagok.doGuess()">Doe een gok</button>
-                <p class="error" x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
+                    <button @click="$store.alfagok.doGuess()">Doe een gok</button>
+                    <p class="error" x-cloak x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
+                </div>
 
+                <div x-cloak x-show="$store.alfagok.winTime" class="win">
+                    <h3><b>Je hebt hem! 🎉</b></h3>
+                    <p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
+                    <div id="stats">
+                        <div id="results">
+                            <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>
+                        </div>
+                    </div>
+                    <div id="copyresults"></div>
+                    <button class="copy" data-clipboard-target="#results">
+                          Tik om te kopi&euml;ren en te delen ❤️
+                    </button>
+                </div>
+
+                <p class="guessesheading" x-cloak x-show="$store.alfagok.guessesAfter.length">Het woord van de dag komt <em>voor</em>:</p>
                 <ul class="guessesafter">
                     <template x-for="item in $store.alfagok.guessesAfter" :key="item">
                         <li x-text="item"></li>
                     </template>
                 </ul>
 
-
-                <div>
-                    <div x-show="$store.alfagok.winTime" class="win">
-                        <h3><b>Je hebt hem! 🎉</b></h3>
-                        <p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
-                        <div id="stats">
-                            <div id="results">
-                                <p><b x-data="{ message: '🧩 Puzzel #' + $store.alfagok.gameID }" x-text="message"></b></p>
-                                <p x-data="{ message: '🤔 '+ $store.alfagok.nrGuesses + ' gokken' }" x-text="message"></p>
-                                <p x-data="{ message: '⏱️ ' + getFormattedTime($store.alfagok.winTime - $store.alfagok.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 en te delen ❤️
-                        </button>
-                    </div>
-                </div>
             </center>
 
         </div>

wordlist/create_list.py

@@ -1,45 +1,102 @@
+import os.path
 import random
 
-MIN_LENGTH = 5
+MIN_LENGTH = 4
 MAX_LENGTH = 10
 
 NUMBER_DAYS = 5 * 365
 
+# Set to True if you want to use the big but difficult OpenTaal list
+USE_OPENTAAL = False
+
+with open('wikiwoordenboek_basiswoorden.lst', 'r', encoding='utf-8') as wordfile:
+    wikiwoorden_words = wordfile.readlines()
+    print(f'wikiwoorden basic list contains {len(wikiwoorden_words)} words')
+
+scrabble_words = []
+if os.path.isfile('scrabblewoorden.txt'):
+    with open('scrabblewoorden.txt', 'r', encoding='utf-8') as wordfile:
+        scrabble_words = wordfile.readlines()
+        print(f'scrabblewoorden list contains {len(scrabble_words)} words')
+else:
+    print('scrabblewoorden.txt not found, skipped')
+
 with open('basiswoorden-gekeurd.txt', 'r', encoding='utf-8') as wordfile:
-    all_words = wordfile.readlines()
-    print(f'original list contains {len(all_words)} words')
+    basis_words = wordfile.readlines()
+    print(f'opentaal basic list contains {len(basis_words)} words')
 
-    dictionary_list = []
-    result_list = []
-    for word in all_words:
-        word = word.strip()
-        if word.isalpha() and word.lower() == word:
-            # Word is valid for our dictionary
-            dictionary_list.append(f'{word}\n')
-        if word.isalpha() and word.lower() == word and len(word) > MIN_LENGTH and len(word) <= MAX_LENGTH:
-            # Word is 'fit' for our game
-            result_list.append(f'{word}\n')
+with open('flexies-ongekeurd.txt', 'r', encoding='utf-8') as wordfile:
+    # Vervoegingen and such, see https://nl.wikipedia.org/wiki/Flexie_(taalkunde)
+    flexies_words = wordfile.readlines()
+    print(f'flexies list contains {len(flexies_words)} words')
 
-    # print(result_list)
-    print(f'words filtered: {len(result_list)} with length > {MIN_LENGTH} and <= {MAX_LENGTH}')
-    print(f'words in dictionary: {len(dictionary_list)}')
+with open('/usr/share/dict/american-english', 'r', encoding='utf-8') as wordfile:
+    # English words we want to filter from the list; don't really care if there's accidental overlap with Dutch words
+    english_words = wordfile.readlines()
+    print(f'english list contains {len(english_words)} words')
 
-    with open('filtered.txt', 'w', encoding='utf-8') as f:
-        f.writelines(result_list)
+print()
+print('merging and filtering...')
+print()
 
-    with open('dictionary.txt', 'w', encoding='utf-8') as f:
-        f.writelines(dictionary_list)
+all_words_count = 0
+dictionary_list = []
+result_list = []
+for word in wikiwoorden_words + scrabble_words + basis_words + flexies_words:
+    all_words_count += 1
+    word = word.strip()
+    if word.isalpha() and word.lower() == word:
+        # Word is valid for our dictionary
+        dictionary_list.append(f'{word}\n')
 
-    selection_list = []
+# Deduplicate dictionary
+dictionary_list = sorted(list(set(dictionary_list)), key=str.casefold)
 
-    # Randomly select words for each day
-    while len(selection_list) < NUMBER_DAYS:
-        # Use index - 1 because lists start at index 0
-        word_index = random.randrange(0, len(result_list) - 1)
-        selection_list.append(result_list[word_index])
+if USE_OPENTAAL:
+    # Use basis_words if you want to use the big but difficult OpenTaal list
+    source_words = basis_words
+else:
+    # Combine the basic words and the Scrabble word lists
+    source_words = wikiwoorden_words + scrabble_words
 
-    # Save the result
-    with open('word_of_the_day.txt', 'w', encoding='utf-8') as f:
-        f.writelines(selection_list)
+for word in source_words:
+    word = word.strip()
+    if word.isalpha() and word.lower() == word and len(word) >= MIN_LENGTH and len(word) <= MAX_LENGTH:
+        # Word is 'fit' for our game
+        result_list.append(f'{word}\n')
 
-    print(f'done writing {len(selection_list)} random words, enjoy!')
+if USE_OPENTAAL:
+    nl_set = set(result_list)
+    en_set = set(english_words)
+
+    # Only keep the words that are not found in the English set
+    filtered_set = nl_set.difference(en_set)
+    filtered_list = sorted(list(filtered_set), key=str.casefold)
+else:
+    filtered_list = sorted(list(set(result_list)), key=str.casefold)
+
+print(f'words total: {all_words_count}')
+print(f'words in dictionary: {len(dictionary_list)}')
+print(f'words initially filtered: {len(result_list)} with length >= {MIN_LENGTH} and <= {MAX_LENGTH}')
+if USE_OPENTAAL:
+    print(f'words after filtering english: {len(filtered_list)}')
+
+with open('filtered.txt', 'w', encoding='utf-8') as f:
+    f.writelines(filtered_list)
+
+with open('dictionary.txt', 'w', encoding='utf-8') as f:
+    f.writelines(dictionary_list)
+
+selection_list = []
+
+# Randomly select words for each day
+while len(selection_list) < NUMBER_DAYS:
+    # Use index - 1 because lists start at index 0
+    word_index = random.randrange(0, len(filtered_list) - 1)
+    selection_list.append(filtered_list[word_index])
+
+# Save the result
+with open('word_of_the_day.txt', 'w', encoding='utf-8') as f:
+    f.writelines(selection_list)
+
+print(f'done writing {len(selection_list)} random words, enjoy!')