example.com

Reset input when guess was successful filed
Better readable heading
2025-12-06 23:25:09 +01:00 · 2024-11-05 16:43:55 +01:00 · 2024-11-05 15:50:19 +01:00 · 2024-11-05 15:49:18 +01:00 · 2024-11-05 15:29:07 +01:00 · 2024-11-05 15:25:53 +01:00
4 changed files with 56 additions and 30 deletions
--- a/README.md
+++ b/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
--- a/src/alfagok/static/game.css
+++ b/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"] {
@@ -61,3 +67,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;
+}
--- a/src/alfagok/static/game.js
+++ b/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,7 +34,6 @@ document.addEventListener('alpine:init', () => {
        },

        async doGuess() {
-            /* Check guess against server */
            this.guessError = null;

            this.guessValue = this.guessValue.toLowerCase();
@@ -46,11 +49,12 @@ document.addEventListener('alpine:init', () => {
            }

            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);
@@ -69,14 +73,19 @@ document.addEventListener('alpine:init', () => {
            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 +120,7 @@ function getFormattedTime(milliseconds) {

    const formattedTime = [];
    if (hours) {
-        formattedTime.push(`${hours}h`);
+        formattedTime.push(`${hours}u`);
    }
    if (minutes) {
        formattedTime.push(`${minutes}m`);
--- a/src/alfagok/templates/index.html
+++ b/src/alfagok/templates/index.html
@@ -20,42 +20,44 @@

            <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>
Author	SHA1	Message	Date
Michiel Scholten	4bacc75a42	example.com	2024-11-05 16:43:55 +01:00
Michiel Scholten	948267359a	Reset input when guess was successful filed	2024-11-05 15:50:19 +01:00
Michiel Scholten	b942200833	Better readable heading	2024-11-05 15:49:18 +01:00
Michiel Scholten	370ce60b32	Do not blip uninitialised content on load	2024-11-05 15:29:07 +01:00
Michiel Scholten	6ff55f4878	Replace input form on correct guess	2024-11-05 15:25:53 +01:00
Michiel Scholten	898362db72	Komt voor/na	2024-11-05 15:22:45 +01:00
Michiel Scholten	a7499d4e74	Generate results when word is found	2024-11-05 15:10:20 +01:00
Michiel Scholten	43dbf54e53	Style the result block	2024-11-05 14:35:12 +01:00