From 370ce60b324ffc7339afc219dd0990e5cbcac0f3 Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Tue, 5 Nov 2024 15:29:07 +0100
Subject: [PATCH] Do not blip uninitialised content on load

---
 src/alfagok/static/game.css      | 2 ++
 src/alfagok/templates/index.html | 9 ++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/alfagok/static/game.css b/src/alfagok/static/game.css
index 6a5373c..bfef8ff 100644
--- 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;
diff --git a/src/alfagok/templates/index.html b/src/alfagok/templates/index.html
index bfef2b9..b09e1bf 100644
--- a/src/alfagok/templates/index.html
+++ b/src/alfagok/templates/index.html
@@ -20,7 +20,7 @@
 
             <center>
 
-                <p class="guessesheading" x-show="$store.alfagok.guessesBefore.length">Het woord van de dag komt <em>na</em>:</p>
+                <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>
@@ -31,10 +31,10 @@
                     <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>
+                    <p class="error" x-cloak x-show="$store.alfagok.guessError" x-text="$store.alfagok.guessError"></p>
                 </div>
 
-                <div x-show="$store.alfagok.winTime" class="win">
+                <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">
@@ -51,14 +51,13 @@
                     </button>
                 </div>
 
-                <p class="guessesheading" x-show="$store.alfagok.guessesAfter.length">Het woord van de dag komt <em>voor</em>:</p>
+                <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>
 
-
             </center>
 
         </div>