Allow for a more progressive loading state where possible

Gyanreyer · Apr 15, 2023 · 666a6c3 · 666a6c3
1 parent d13b5a1
commit 666a6c3
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 17 deletions.
diff --git a/src/_components/current-score.webc b/src/_components/current-score.webc
@@ -71,6 +71,7 @@
     font-size: 0.8rem;
     text-align: left;
     width: 10ch;
+    height: 1.1em;
   }
 
   .progress-bar-wrapper {

diff --git a/src/_components/letter-buttons.webc b/src/_components/letter-buttons.webc
@@ -1,8 +1,8 @@
 <div webc:root="override">
   <template
-    x-for="letter in $store.game.outerLetters"
+    x-for="(letter, idx) in $store.game.outerLetters"
     webc:keep
-    x-bind:key="letter"
+    x-bind:key="`${letter}_${idx}`"
   >
     <div class="outer letter">
       <button x-data="letterButton(letter)" x-bind="tmpl"></button>

diff --git a/src/_components/previous-guesses.webc b/src/_components/previous-guesses.webc
@@ -1,8 +1,6 @@
 <div webc:root="override">
   <button x-data="prevGuessModalBtn" x-bind="tmpl">
-    <template x-if="$store.game.guessedWords.length === 0">
-      <span>No words guessed yet</span>
-    </template>
+    <span x-show="mostRecentGuesses.length === 0">No words guessed yet</span>
     <template x-for="word in mostRecentGuesses" x-bind:key="word">
       <span
         x-text="word + '&nbsp;'"

diff --git a/src/index.webc b/src/index.webc
@@ -60,13 +60,11 @@ meta:
     ></script>
   </head>
   <body x-data>
-    <loading-indicator x-show="!$store.game?.isInitialized"></loading-indicator>
-    <template x-if="$store.game?.isInitialized">
-      <div>
-        <page-header></page-header>
-        <page-main></page-main>
-      </div>
-    </template>
+    <loading-indicator x-show="false"></loading-indicator>
+    <div x-cloak>
+      <page-header></page-header>
+      <page-main></page-main>
+    </div>
     <!-- Alpine scripts -->
     <script
       :src="getBundleFileUrl('js', 'alpine-init')"

diff --git a/src/js/game.mjs b/src/js/game.mjs
@@ -68,10 +68,9 @@ async function loadWordData() {
 const GENIUS_PERCENT_THRESHOLD = 0.7;
 
 Alpine.store("game", {
-  isInitialized: false,
   timestamp: 0,
   centerLetter: "",
-  outerLetters: [],
+  outerLetters: new Array(6).fill(""),
   validWords: [],
   guessedWords: [],
   totalPossibleScore: 0,
@@ -194,8 +193,6 @@ Alpine.store("game", {
 
     await this.syncWithDB();
 
-    this.isInitialized = true;
-
     window.addEventListener("visibilitychange", () => {
       if (document.visibilityState === "visible") {
         this.syncWithDB();

diff --git a/src/pwa/serviceWorker.js b/src/pwa/serviceWorker.js
@@ -1,4 +1,4 @@
-const cacheName = "open-spelling-bee-1.1.9";
+const cacheName = "open-spelling-bee-1.2.0";
 const cacheFiles = [
   "/",
   "/index.html",

diff --git a/src/styles/reset.css b/src/styles/reset.css
@@ -42,3 +42,7 @@ button {
 button[type="submit"] {
   font-weight: normal;
 }
+
+[x-cloak] {
+  display: none;
+}