diginaut/alfagok
1
0
Fork 0
mirror of https://github.com/aquatix/alfagok.git synced 2025-12-06 23:25:09 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Do not blip uninitialised content on load

Browse Source
This commit is contained in:
Michiel Scholten
2024-11-05 15:29:07 +01:00
parent 6ff55f4878
commit 370ce60b32
2 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/alfagok/static/game.css
View File

@@ -7,6 +7,8 @@ body {
padding: 2rem 1rem; padding: 2rem 1rem;
} }
[x-cloak] { display: none !important; }
a.title { a.title {
color: #FF9800; color: #FF9800;
font-weight: bold; font-weight: bold;

9
src/alfagok/templates/index.html
View File

@@ -20,7 +20,7 @@
<center> <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"> <ul class="guessesbefore">
<template x-for="item in $store.alfagok.guessesBefore" :key="item"> <template x-for="item in $store.alfagok.guessesBefore" :key="item">
<li x-text="item"></li> <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()"> <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>#} {# <p x-cloak>Je huidige gok is: <span x-text="$store.alfagok.guessValue"></span></p>#}
<button @click="$store.alfagok.doGuess()">Doe een gok</button> <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>
<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> <h3><b>Je hebt hem! 🎉</b></h3>
<p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p> <p>Het woord van vandaag was <b x-text="$store.alfagok.guessValue"></b>.</p>
<div id="stats"> <div id="stats">
@@ -51,14 +51,13 @@
</button> </button>
</div> </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"> <ul class="guessesafter">
<template x-for="item in $store.alfagok.guessesAfter" :key="item"> <template x-for="item in $store.alfagok.guessesAfter" :key="item">
<li x-text="item"></li> <li x-text="item"></li>
</template> </template>
</ul> </ul>
</center> </center>
</div> </div>