Fix animation (#3)

Fixes #1

Author: gameroman

apps/wordle/package.json

@@ -3,9 +3,9 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "bunx astro build",
-    "deploy": "bunx wrangler deploy",
-    "dev": "bunx astro dev",
+    "build": "astro build",
+    "deploy": "wrangler deploy",
+    "dev": "astro dev",
     "test": "bun test"
   },
   "dependencies": {

apps/wordle/src/hooks/useGame.ts

@@ -1,21 +1,18 @@
-import { createSignal, batch } from "solid-js";
-
+import { batch, createSignal } from "solid-js";
+import { CONFIG, WORDS } from "~/config";
+import { getNewWord } from "~/lib/get-new-word";
+import { getTileColors } from "~/lib/get-tile-colors";
+import { showNotification } from "~/lib/show-notification";
+import { showSharePopup } from "~/lib/show-share-popup";
 import type {
+  BoardAction,
   CurrentSection,
   GameMode,
   KeyColor,
-  TileColor,
-  BoardAction,
   State,
+  TileColor,
 } from "~/types";
 
-import { WORDS, CONFIG } from "~/config";
-
-import { getNewWord } from "~/lib/get-new-word";
-import { getTileColors } from "~/lib/get-tile-colors";
-import { showNotification } from "~/lib/show-notification";
-import { showSharePopup } from "~/lib/show-share-popup";
-
 import { useSettings } from "./useSettings";
 import { useStats } from "./useStats";
 import { useTiles } from "./useTiles";
@@ -102,9 +99,9 @@ export function useGame() {
     setKeycolors((prev) => ({ ...prev, ...newKeyColors }));
   }
 
-  function submitGuess(guess: string) {
+  async function submitGuess(guess: string) {
     if (!WORDS.guesses.includes(guess)) {
-      shakeCurrentRow();
+      await shakeCurrentRow();
       showNotification(`Word ${guess.toUpperCase()} does not exist`);
       return;
     }

apps/wordle/src/hooks/useTiles.ts

@@ -68,11 +68,14 @@ export function useTiles() {
     }, 150);
   }
 
-  function shakeCurrentRow() {
+  async function shakeCurrentRow() {
     const row = getCurrentRow();
     const start = row * CONFIG.wordLength;
     const end = start + CONFIG.wordLength;
 
+    // Wait for any ongoing pop animations to finish (150ms)
+    await delay(150);
+
     setTiles((prev) => {
       const copy = [...prev];
       for (let i = start; i < end; i++) {