From 6ff55f48781fcd4a3078c321352b162037c75c08 Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Tue, 5 Nov 2024 15:25:53 +0100
Subject: [PATCH] Replace input form on correct guess

---
 src/alfagok/templates/index.html | 43 ++++++++++++++++----------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/alfagok/templates/index.html b/src/alfagok/templates/index.html
index 500dfc3..bfef2b9 100644
--- a/src/alfagok/templates/index.html
+++ b/src/alfagok/templates/index.html
@@ -27,10 +27,29 @@
                     </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-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
+                </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-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-show="$store.alfagok.guessesAfter.length">Het woord van de dag komt <em>voor</em>:</p>
                 <ul class="guessesafter">
@@ -40,24 +59,6 @@
                 </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-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>
-                </div>
             </center>
 
         </div>