More styling, nicely red feedback block

README.md

@@ -9,8 +9,107 @@ Using Alpine.js on the frontend and FastAPI as backend.
 
 ## Environment variables
 
-```
+```fish
 set -x WORD_LIST /path/to/alfagok_wordlist.txt
 set -x START_DATE 2024-11-02
 set -x DICTIONARY_LIST /path/to/dictionary.txt
 ```
+
+In `src/alfagok`, with an active virtualenv with packages installed (`uv pip sync requirements.txt`), run:
+
+`fastapi dev main.py`
+
+
+## Example configs
+
+### nginx
+
+/etc/nginx/sites-enabled/alfagok.example.com.conf
+
+```nginx
+server {
+    listen [::]:443 ssl; # managed by Certbot
+    listen 443 ssl; # managed by Certbot
+    server_name alfagok.example.com;
+
+    real_ip_header      X-Forwarded-For;
+
+    access_log  /var/log/nginx/access_alfagok.example.com.log;
+    error_log  /var/log/nginx/error_alfagok.example.com.log  warn;
+
+    location / {
+        proxy_pass             http://127.0.0.1:8889;
+        proxy_read_timeout     60;
+        proxy_connect_timeout  60;
+        proxy_redirect         off;
+
+        # Allow the use of websockets
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    ssl_certificate /etc/letsencrypt/live/alfagok.example.com/fullchain.pem; # managed by Certbot
+    ssl_certificate_key /etc/letsencrypt/live/alfagok.example.com/privkey.pem; # managed by Certbot
+    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+
+}
+server {
+    if ($host = alfagok.example.com) {
+        return 301 https://$host$request_uri;
+    } # managed by Certbot
+
+    listen [::]:80;
+    listen 80;
+    server_name alfagok.example.com;
+    return 404; # managed by Certbot
+}
+```
+
+### systemd unit file
+
+/etc/systemd/system/alfagok.service
+
+```ini
+[Unit]
+Description=Gunicorn Daemon for alfagok game FastAPI
+After=network.target
+
+[Service]
+User=USERNAME (fill in!)
+Group=USERGROUP (fill in!)
+WorkingDirectory=/srv/www/alfagok.example.com/alfagok/src
+
+Environment="START_DATE=2024-11-02"
+Environment="WORD_LIST=/srv/www_data/alfagok.example.com/wordlist.txt"
+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
+
+[Install]
+WantedBy=multi-user.target
+```
+
+### gunicorn config file
+
+```python
+# gunicorn_conf.py
+from multiprocessing import cpu_count
+
+bind = "127.0.0.1:8889"
+
+# Worker Options
+#workers = cpu_count() + 1
+workers = 1
+worker_class = 'uvicorn.workers.UvicornWorker'
+
+# Logging Options, dir should be writable for User in systemd unit file
+loglevel = 'debug'
+accesslog = '/var/log/alfagok/access_log'
+errorlog = '/var/log/alfagok/error_log'
+```

src/alfagok/static/game.css

@@ -1,6 +1,39 @@
 body {
     background-color: #333;
     color: #FFF;
+
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+
+a.title {
+    color: #FF9800;
+    font-weight: bold;
+    text-decoration: none;
+    font-size: 1.5rem;
+}
+
+.puzzleno {
+    border: 1px solid grey;
+    color: grey;
+    padding: .2em .5em;
+    border-radius: 1em;
+    text-align: right;
+    float: right;
+}
+
+.instructions {
+    padding: 2rem 0 0 0;
+}
+
+.guessesbefore {
+    padding-top: 2rem;
+}
+
+input[type="text"] {
+    box-sizing: border-box;
+    width: 100%;
 }
 
 button {
@@ -8,5 +41,23 @@ button {
     color: #333;
 
     border: 0;
-    padding: .2rem;
+    margin-top: .5rem;
+
+    cursor: pointer;
+
+    width: 100%;
+}
+
+ul {
+    list-style-type: none;
+}
+
+.error {
+    background-color: #F00;
+    color: #FFF;
+}
+
+input[type="text"], button, .error {
+    padding: .5rem;
+    font-size: 1.5rem;
 }

src/alfagok/static/game.js

@@ -1,43 +1,101 @@
-/* API calls **/
+document.addEventListener('alpine:init', () => {
-async function doGuess(guessWord) {
+    Alpine.store('alfagok', {
-    Alpine.store('alfagok').loading = true;
+        /* Main alfagok application, state etc */
-        Alpine.store('alfagok').guessError = null;
+        gameID: 0,
-    if (guessWord === '') {
-        console.log('Nothing filled in');
-        Alpine.store('alfagok').guessError = 'Vul een woord in';
-        return;
-    }
 
-    Alpine.store('alfagok').nrGuesses++;
+        loading: false,
-    if (Alpine.store('alfagok').startTime === '') {
-        console.log('Setting startTime to now');
-    }
 
-    let response = await fetch('/api/guess/' + guessWord);
+        winTime: null,
-    let result = await response.json();
+        startTime: null,
-    console.log(result);
 
-    Alpine.store('alfagok').loading = false;
+        nrGuesses: 0,
-    if (result.error) {
+        guessesBefore: [],
-        console.log('Error occurred during guess');
+        guessesAfter: [],
-        if (result.error === 'Word not in dictionary') {
+
-            Alpine.store('alfagok').guessError = 'Woord komt niet in de woordenlijst voor';
+        guessValue: '',
+
+        guessError: '',
+
+        async getGameID() {
+            /* Get the game number from the backend */
+            this.loading = true;
+            console.log('Loading gameID...');
+            let response = await fetch('/api/game');
+            let result = await response.json();
+            console.log(result);
+            this.loading = false;
+            if (result.game) {
+                return this.gameID = result.game;
+            }
+        },
+
+        async doGuess() {
+            /* Check guess against server */
+            this.guessError = null;
+
+            this.guessValue = this.guessValue.toLowerCase();
+
+            if (this.guessValue === '') {
+                console.log('Nothing filled in');
+                this.guessError = 'Vul een woord in';
+                return;
+            }
+            if (this.guessesBefore.includes(this.guessValue) || this.guessesAfter.includes(this.guessValue)) {
+                this.guessError = 'Woord is al gebruikt';
+                return;
+            }
+
+            this.nrGuesses++;
+            if (this.startTime === '') {
+                console.log('Setting startTime to now');
+                this.startTime = now();
+            }
+
+            this.loading = true;
+
+            let response = await fetch('/api/guess/' + this.guessValue);
+            let result = await response.json();
+            console.log(result);
+
+            this.loading = false;
+
+            if (result.error) {
+                console.log('Error occurred during guess');
+                if (result.error === 'Word not in dictionary') {
+                    this.guessError = 'Woord komt niet in de woordenlijst voor';
+                }
+                return;
+            }
+            if (result.hint && result.hint === 'after') {
+                this.guessesBefore.push(this.guessValue);
+                this.guessesBefore.sort();
+            }
+            if (result.hint && result.hint === 'before') {
+                this.guessesAfter.push(this.guessValue);
+                this.guessesAfter.sort();
+            }
+            if (result.hint && result.hint === 'it') {
+                console.log('gevonden!');
+                this.winTime = now();
+            }
         }
-        return;
+    }),
-    }
+
-    if (result.hint && result.hint === 'after') {
+    Alpine.store('darkMode', {
-        console.log('na');
+        /* Different Alpine app, dark mode settings for the game */
-        Alpine.store('alfagok').guessesBefore.push(guessWord);
+        init() {
-    }
+            this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
-    if (result.hint && result.hint === 'before') {
+        },
-        console.log('voor');
+
-        Alpine.store('alfagok').guessesAfter.push(guessWord);
+        on: false,
-    }
+
-    if (result.hint && result.hint === 'it') {
+        toggle() {
-        console.log('gevonden');
+            this.on = ! this.on
-        Alpine.store('alfagok').winTime = 'yay';
+        }
-    }
+    })
-}
+
+});
+
 
 /* Time formatting **/
 
@@ -102,3 +160,11 @@ function addZero(num){
 }
 
 go();
+
+
+/* Get current gameID etc **/
+
+document.addEventListener('alpine:initialized', () => {
+    /* On AlpineJS completely loaded, do all this */
+    Alpine.store('alfagok').getGameID();
+})

src/alfagok/templates/index.html

@@ -4,86 +4,34 @@
         <title>alfagok</title>
         <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">
         <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     </head>
     <body>
 
-        <script>
+        <div id="container" x-data="">
-            document.addEventListener('alpine:init', () => {
-                Alpine.store('alfagok', {
-                    gameID: 0,
 
-                    loading: false,
+            <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzel #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span></span>
 
-                    winTime: null,
+            <div x-cloak class="instructions" x-show="$store.alfagok.guessesBefore.length === 0 && $store.alfagok.guessesAfter.length === 0">
-                    startTime: null,
-
-                    nrGuesses: 0,
-                    guessesBefore: [],
-                    guessesAfter: [],
-
-                    guessValue: '',
-
-                    guessError: '',
-
-                    async getGameID() {
-                        this.loading = true;
-                        console.log('Loading gameID...');
-                        let response = await fetch('/api/game');
-                        let result = await response.json();
-                        console.log(result);
-                        this.loading = false;
-                        if (result.game) {
-                            return this.gameID = result.game;
-                        }
-                    }
-
-                }),
-
-                Alpine.store('darkMode', {
-                    init() {
-                        this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
-                    },
-
-                    on: false,
-
-                    toggle() {
-                        this.on = ! this.on
-                    }
-                })
-
-            })
-        </script>
-
-        <div
-            id="container"
-            x-data=""
-        >
-
-            <a href="/" x-cloak class="title">alfagok</a> <span class="puzzleno">puzzle #<span x-text="$store.alfagok.gameID"></span> • <span id="nextgame"></span></span>
-
-            <div x-cloak x-show="$store.alfagok.guessesBefore.length || $store.alfagok.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>
             </div>
 
-
             <center>
 
-                <ul>
+                <ul class="guessesbefore">
                     <template x-for="item in $store.alfagok.guessesBefore" :key="item">
                         <li x-text="item"></li>
                     </template>
                 </ul>
 
-                <input type="text" x-model="$store.alfagok.guessValue" @keyup.enter="doGuess($store.alfagok.guessValue)">
+                <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="doGuess($store.alfagok.guessValue)">Doe een gok</button>
+                <button @click="$store.alfagok.doGuess()">Doe een gok</button>
-                <p x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
+                <p class="error" x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
 
-                <ul>
+                <ul class="guessesafter">
                     <template x-for="item in $store.alfagok.guessesAfter" :key="item">
                         <li x-text="item"></li>
                     </template>
@@ -96,7 +44,7 @@
                         <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: '🧩 Puzzle #' + $store.alfagok.gameID }" x-text="message"></b></p>
+                                <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>
@@ -112,20 +60,12 @@
 
         </div>
 
-
-        <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
-        <div x-data :class="$store.darkMode.on && 'bg-black'">...</div>
-
-
         <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.12/clipboard.min.js" rel=preload></script>
         <script src="/static/game.js"></script>
-
+{#
-        <script>
+        <button x-data @click="$store.darkMode.toggle()">Toggle Dark Mode</button>
-            document.addEventListener('alpine:initialized', () => {
+        <div x-data :class="$store.darkMode.on && 'bg-black'">...</div>
-                //Alpine.store('alfagok').gameID = getGameID();
+#}
-                Alpine.store('alfagok').getGameID();
-            })
-        </script>
 
     </body>
 </html>