Tune mobile animation pacing and stabilize clock label

Author: Swon404

src/GameContext.tsx

@@ -258,10 +258,10 @@ export function GameProvider({ children }: { children: ReactNode }) {
         const speed = store.settings.animationSpeed;
         const thinkDelays =
           speed === "very-slow"
-            ? { slide: 1650, teleport: 3800 }
+            ? { slide: 2300, teleport: 6200 }
             : speed === "slow"
-              ? { slide: 1200, teleport: 2900 }
-              : { slide: 900, teleport: 2200 };
+              ? { slide: 1600, teleport: 4800 }
+              : { slide: 1200, teleport: 3700 };
         const minThinkMs = prevMove?.isPortalEntry ? thinkDelays.teleport : thinkDelays.slide;
         const t0 = performance.now();
         const move = await chooseBotMove(state, lvl, { allowExternal: mode.kind === "bot" });

src/components/Clock.tsx

@@ -3,7 +3,7 @@ import { useGame } from "../GameContext";
 const TIMER_OPTIONS = [0, 10, 30, 60, 120] as const;
 
 export function Clock() {
-  const { timeLeft, state, isBotThinking, store, players, updateSetting } = useGame();
+  const { timeLeft, state, store, players, updateSetting } = useGame();
   const current = store.settings.timerSeconds;
   const off = current === 0;
   const secs = off || !isFinite(timeLeft) ? null : Math.max(0, timeLeft);
@@ -34,7 +34,7 @@ export function Clock() {
         {renderBadge(state.turn === "w")}
       </div>
       <div className={`clock-side ${state.turn === "b" ? "active" : ""}`}>
-        <span>♟ {players.b} {isBotThinking ? "(thinking…)" : ""}</span>
+        <span>♟ {players.b}</span>
         {renderBadge(state.turn === "b")}
       </div>
     </div>

src/styles.css

@@ -10,53 +10,53 @@
   --legal-capture: rgba(239, 68, 68, 0.65);
   --selected: rgba(250, 204, 21, 0.55);
   --last: rgba(250, 204, 21, 0.25);
-  --anim-slide-ms: 700ms;
-  --anim-demat-ms: 900ms;
-  --anim-remat-ms: 900ms;
-  --anim-remat-delay-ms: 1100ms;
+  --anim-slide-ms: 900ms;
+  --anim-demat-ms: 1300ms;
+  --anim-remat-ms: 1300ms;
+  --anim-remat-delay-ms: 1700ms;
 }
 
 .board.anim-speed-normal {
-  --anim-slide-ms: 700ms;
-  --anim-demat-ms: 900ms;
-  --anim-remat-ms: 900ms;
-  --anim-remat-delay-ms: 1100ms;
+  --anim-slide-ms: 900ms;
+  --anim-demat-ms: 1300ms;
+  --anim-remat-ms: 1300ms;
+  --anim-remat-delay-ms: 1700ms;
 }
 
 .board.anim-speed-slow {
-  --anim-slide-ms: 900ms;
-  --anim-demat-ms: 1100ms;
-  --anim-remat-ms: 1100ms;
-  --anim-remat-delay-ms: 1400ms;
+  --anim-slide-ms: 1200ms;
+  --anim-demat-ms: 1700ms;
+  --anim-remat-ms: 1700ms;
+  --anim-remat-delay-ms: 2200ms;
 }
 
 .board.anim-speed-very-slow {
-  --anim-slide-ms: 1200ms;
-  --anim-demat-ms: 1500ms;
-  --anim-remat-ms: 1500ms;
-  --anim-remat-delay-ms: 1900ms;
+  --anim-slide-ms: 1700ms;
+  --anim-demat-ms: 2300ms;
+  --anim-remat-ms: 2300ms;
+  --anim-remat-delay-ms: 3000ms;
 }
 
 @media (max-width: 640px) {
   .board.anim-speed-normal {
-    --anim-slide-ms: 900ms;
-    --anim-demat-ms: 1100ms;
-    --anim-remat-ms: 1100ms;
-    --anim-remat-delay-ms: 1400ms;
+    --anim-slide-ms: 1100ms;
+    --anim-demat-ms: 1500ms;
+    --anim-remat-ms: 1500ms;
+    --anim-remat-delay-ms: 2000ms;
   }
 
   .board.anim-speed-slow {
-    --anim-slide-ms: 1100ms;
-    --anim-demat-ms: 1300ms;
-    --anim-remat-ms: 1300ms;
-    --anim-remat-delay-ms: 1700ms;
+    --anim-slide-ms: 1500ms;
+    --anim-demat-ms: 2000ms;
+    --anim-remat-ms: 2000ms;
+    --anim-remat-delay-ms: 2600ms;
   }
 
   .board.anim-speed-very-slow {
-    --anim-slide-ms: 1450ms;
-    --anim-demat-ms: 1800ms;
-    --anim-remat-ms: 1800ms;
-    --anim-remat-delay-ms: 2200ms;
+    --anim-slide-ms: 2100ms;
+    --anim-demat-ms: 2600ms;
+    --anim-remat-ms: 2600ms;
+    --anim-remat-delay-ms: 3400ms;
   }
 }