feat(guess-the-word): render a spinner as placeholder for tries indicator

Author: Hdoc1509

vanilla/guess-the-word/index.html

@@ -37,12 +37,13 @@
         <%- include("RingSpinner") %>
       </div>
       <section class="info | grid">
-        <section class="tries | flex flex-wrap">
+        <section class="tries | flex items-center flex-wrap">
           <p class="tries__description">
             Tries (<span id="current-tries">0</span>/<span id="max-tries"
               >?</span
             >)<span aria-hidden="true">:</span>
           </p>
+          <%- include("EllipsisSpinner") %>
           <%- include("StepIndicator") %>
         </section>
         <section class="mistakes">

vanilla/guess-the-word/src/main.js

@@ -6,6 +6,8 @@ import { setupEventListeners } from "./events/listeners/setup";
 import { generateRandomWord } from "./events/handlers/random-word";
 import { applyDifficulty } from "./utils/difficulty/apply";
 import { DefinitionPages } from "./ui/definition/pages";
+import { removeSpinner } from "./ui/spinner";
+import { $triesContainer } from "./ui/tries";
 import "@lib/alert/styles.css";
 import "@fontsource-variable/outfit";
 import "@fontsource/outfit/400.css";
@@ -19,6 +21,7 @@ import "./styles/main.css";
       await removeAvailableWord(word, { difficulty, isInitialization: true });
   });
   await applyDifficulty(difficulty);
+  removeSpinner($triesContainer);
 
   if (words.length === 0)
     await import("./events/handlers/difficulty-complete").then(

vanilla/guess-the-word/src/styles/game-card/info.css

@@ -29,6 +29,18 @@
   gap: 0.25rem 1ch;
 }
 
+.game-card .info .tries {
+  --spinner-size: 2.75em;
+  --spinner-color: var(--slate-600);
+}
+.game-card .info .tries .ellipsis-spinner {
+  height: var(--_ball-size);
+  aspect-ratio: unset;
+}
+.game-card .info .tries .ellipsis-spinner div {
+  top: unset;
+}
+
 .game-card .hints .button {
   --icon-size: 1.875em;
 }