Fix iPhone move animations and replay behavior

Author: Swon404

src/GameContext.tsx

@@ -254,15 +254,13 @@ export function GameProvider({ children }: { children: ReactNode }) {
         // human's own animation has time to play before the board re-renders
         // with the bot's response. Delay scales with animation-speed setting
         // so replay/slow modes remain visually readable.
-        const prevMove = state.history[state.history.length - 1];
         const speed = store.settings.animationSpeed;
-        const thinkDelays =
+        const minThinkMs =
           speed === "very-slow"
-            ? { slide: 2300, teleport: 6200 }
+            ? 1900
             : speed === "slow"
-              ? { slide: 1600, teleport: 4800 }
-              : { slide: 1200, teleport: 3700 };
-        const minThinkMs = prevMove?.isPortalEntry ? thinkDelays.teleport : thinkDelays.slide;
+              ? 1200
+              : 800;
         const t0 = performance.now();
         const move = await chooseBotMove(state, lvl, { allowExternal: mode.kind === "bot" });
         const elapsed = performance.now() - t0;

src/components/Board.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, useState } from "react";
+import { CSSProperties, useLayoutEffect, useState } from "react";
 import { Move, Piece as PieceT, Square, squareName } from "../engine/board";
 import { findKing, inCheck } from "../engine/rules";
 import { useGame } from "../GameContext";
@@ -8,6 +8,17 @@ function isLegalTarget(legal: Move[], sq: Square): Move | undefined {
   return legal.find((m) => m.to.file === sq.file && m.to.rank === sq.rank);
 }
 
+function slideDurationMs(speed: "normal" | "slow" | "very-slow", isMobile: boolean): number {
+  if (isMobile) {
+    if (speed === "very-slow") return 1700;
+    if (speed === "slow") return 1100;
+    return 700;
+  }
+  if (speed === "very-slow") return 1300;
+  if (speed === "slow") return 800;
+  return 500;
+}
+
 interface Props {
   flipped?: boolean;
 }
@@ -35,6 +46,8 @@ export function Board({ flipped = false }: Props) {
   const pieceSet = store.settings.pieceSet;
   const animationSpeed = store.settings.animationSpeed;
   const [pending, setPending] = useState<PendingPromo | null>(null);
+  const [isAnimatingLastMove, setIsAnimatingLastMove] = useState(false);
+  const [showCaptureBoom, setShowCaptureBoom] = useState(false);
 
   const ranks = flipped ? [0, 1, 2, 3, 4, 5, 6, 7] : [7, 6, 5, 4, 3, 2, 1, 0];
   const files = flipped ? [7, 6, 5, 4, 3, 2, 1, 0] : [0, 1, 2, 3, 4, 5, 6, 7];
@@ -68,12 +81,51 @@ export function Board({ flipped = false }: Props) {
     : null;
   const wPortals = state.portals?.w ?? [];
   const bPortals = state.portals?.b ?? [];
-  const isTeleportMove = !!lastMove?.isPortalEntry;
   const rotateBlackForFixedBoard =
     mode.kind === "two-player" &&
     !store.settings.autoFlip &&
     store.settings.rotateBlackPiecesFixedBoard;
 
+  useLayoutEffect(() => {
+    const current = state.history[state.history.length - 1];
+    setShowCaptureBoom(false);
+
+    if (!current || current.from.file < 0 || current.to.file < 0) {
+      setIsAnimatingLastMove(false);
+      return;
+    }
+
+    const isMobile =
+      typeof window !== "undefined" &&
+      window.matchMedia("(max-width: 640px)").matches;
+    const durationMs = slideDurationMs(animationSpeed, isMobile);
+
+    if (durationMs <= 0) {
+      setIsAnimatingLastMove(false);
+      if (current.captured && store.settings.explodeOnCapture) {
+        setShowCaptureBoom(true);
+        const boomId = window.setTimeout(() => setShowCaptureBoom(false), 620);
+        return () => window.clearTimeout(boomId);
+      }
+      return;
+    }
+
+    setIsAnimatingLastMove(true);
+    let boomId: number | undefined;
+    const finishId = window.setTimeout(() => {
+      setIsAnimatingLastMove(false);
+      if (current.captured && store.settings.explodeOnCapture) {
+        setShowCaptureBoom(true);
+        boomId = window.setTimeout(() => setShowCaptureBoom(false), 620);
+      }
+    }, durationMs);
+
+    return () => {
+      window.clearTimeout(finishId);
+      if (boomId !== undefined) window.clearTimeout(boomId);
+    };
+  }, [state.history.length, lastMoveReplayNonce, animationSpeed, store.settings.explodeOnCapture]);
+
   return (
     <>
       <div className={`board board-theme-${theme} piece-set-${pieceSet} anim-speed-${animationSpeed}`}>
@@ -94,6 +146,9 @@ export function Board({ flipped = false }: Props) {
               const isHintTo = hint && hint.to.file === f && hint.to.rank === r;
               const isPortalW = wPortals.some((p) => p.file === f && p.rank === r);
               const isPortalB = bPortals.some((p) => p.file === f && p.rank === r);
+              const slideEnd = lastMove?.portalTo ?? lastMove?.to;
+              const isSlideDestination =
+                !!slideEnd && slideEnd.file === f && slideEnd.rank === r;
               const isTeleportTarget =
                 !!legal && !!legal.isPortalEntry;
               const classes = [
@@ -103,6 +158,7 @@ export function Board({ flipped = false }: Props) {
                 legal && !isTeleportTarget ? (piece ? "legal-capture" : "legal-move") : "",
                 isTeleportTarget ? "legal-teleport" : "",
                 (isLastFrom || isLastTo || isLastTeleport) ? "last-move" : "",
+                isSlideDestination && isAnimatingLastMove ? "animating-destination" : "",
                 isChecked ? "in-check" : "",
                 isHintFrom ? "hint-from" : "",
                 isHintTo ? "hint-to" : ""
@@ -113,12 +169,11 @@ export function Board({ flipped = false }: Props) {
               // landing (portalTo). Otherwise slide to `to` as usual.
               let slideStyle: CSSProperties | undefined;
               let slideKey: string | undefined;
-              const slideEnd = lastMove?.portalTo ?? lastMove?.to;
               const slideHere =
                 slideEnd && slideEnd.file === f && slideEnd.rank === r && lastMove && piece;
-              // Suppress the slide animation for teleport moves; we use a
-              // dematerialise/rematerialise effect instead.
-              if (slideHere && lastMove && slideEnd && !isTeleportMove) {
+              // Animate every move as a continuous linear slide. For portal
+              // entries, slide from `from` directly to the final `portalTo`.
+              if (slideHere && lastMove && slideEnd) {
                 const df = lastMove.from.file - slideEnd.file;
                 const dr = slideEnd.rank - lastMove.from.rank;
                 const sign = flipped ? -1 : 1;
@@ -128,17 +183,13 @@ export function Board({ flipped = false }: Props) {
                 };
                 slideKey = `slide-${moveAnimIndex}`;
               }
-              const isRematerializeHere =
-                isTeleportMove &&
-                lastMove?.portalTo &&
-                lastMove.portalTo.file === f &&
-                lastMove.portalTo.rank === r &&
-                piece;
-              const isDematerializeHere =
-                isTeleportMove &&
-                lastMove &&
-                lastMove.from.file === f &&
-                lastMove.from.rank === r;
+              const capturedColor =
+                lastMove?.color === "w" ? "b" : "w";
+              const showCapturedGhost =
+                isLastTo &&
+                isAnimatingLastMove &&
+                !!lastMove?.captured &&
+                !lastMove?.isEnPassant;
 
               return (
                 <button
@@ -153,15 +204,23 @@ export function Board({ flipped = false }: Props) {
                       aria-hidden="true"
                     />
                   )}
+                  {showCapturedGhost && lastMove?.captured && (
+                    <span className="captured-ghost" aria-hidden="true">
+                      <Piece
+                        color={capturedColor}
+                        type={lastMove.captured}
+                        set={pieceSet}
+                        rotate={rotateBlackForFixedBoard && capturedColor === "b"}
+                      />
+                    </span>
+                  )}
                   {piece && (
                     <span
-                      key={isRematerializeHere ? `remat-${moveAnimIndex}` : slideKey}
+                      key={slideKey}
                       className={
-                        isRematerializeHere
-                          ? "piece-wrap piece-rematerialize"
-                          : slideKey
-                            ? "piece-wrap piece-sliding"
-                            : "piece-wrap"
+                        slideKey && isAnimatingLastMove
+                          ? "piece-wrap piece-sliding"
+                          : "piece-wrap"
                       }
                       style={slideStyle}
                     >
@@ -173,21 +232,7 @@ export function Board({ flipped = false }: Props) {
                       />
                     </span>
                   )}
-                  {isDematerializeHere && lastMove && (
-                    <span
-                      key={`demat-${moveAnimIndex}`}
-                      className="piece-wrap piece-dematerialize"
-                      aria-hidden="true"
-                    >
-                      <Piece
-                        color={lastMove.color}
-                        type={lastMove.piece}
-                        set={pieceSet}
-                        rotate={rotateBlackForFixedBoard && lastMove.color === "b"}
-                      />
-                    </span>
-                  )}
-                  {isLastTo && lastMove?.captured && store.settings.explodeOnCapture && (
+                  {isLastTo && showCaptureBoom && lastMove?.captured && !lastMove?.isEnPassant && (
                     <span key={`boom-${moveAnimIndex}`} className="boom" aria-hidden="true">
                       <span className="boom-core">💥</span>
                       <span className="boom-bit b1">✨</span>

src/screens/GameScreen.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { Board } from "../components/Board";
 import { Clock } from "../components/Clock";
@@ -7,10 +8,54 @@ import { LookPicker } from "../components/LookPicker";
 import { MoveList } from "../components/MoveList";
 import { useGame } from "../GameContext";
 
+function slideDurationMs(speed: "normal" | "slow" | "very-slow", isMobile: boolean): number {
+  if (isMobile) {
+    if (speed === "very-slow") return 1700;
+    if (speed === "slow") return 1100;
+    return 700;
+  }
+  if (speed === "very-slow") return 1300;
+  if (speed === "slow") return 800;
+  return 500;
+}
+
 export function GameScreen() {
   const { mode, state, store, paused, togglePause } = useGame();
-  const flipped =
-    mode.kind === "two-player" && store.settings.autoFlip && state.turn === "b";
+  const shouldAutoFlip = mode.kind === "two-player" && store.settings.autoFlip;
+  const targetFlipped = shouldAutoFlip && state.turn === "b";
+  const [flipped, setFlipped] = useState(targetFlipped);
+  const prevHistLenRef = useRef(state.history.length);
+
+  useEffect(() => {
+    const prevHistLen = prevHistLenRef.current;
+    const historyAdvanced = state.history.length > prevHistLen;
+    prevHistLenRef.current = state.history.length;
+
+    if (!shouldAutoFlip) {
+      setFlipped(false);
+      return;
+    }
+
+    if (!historyAdvanced) {
+      setFlipped(targetFlipped);
+      return;
+    }
+
+    const lastMove = state.history[state.history.length - 1];
+    const isForfeitMove = !!lastMove && lastMove.from.file < 0;
+
+    if (isForfeitMove) {
+      setFlipped(targetFlipped);
+      return;
+    }
+
+    const isMobile =
+      typeof window !== "undefined" &&
+      window.matchMedia("(max-width: 640px)").matches;
+    const delayMs = slideDurationMs(store.settings.animationSpeed, isMobile) + 40;
+    const id = window.setTimeout(() => setFlipped(targetFlipped), delayMs);
+    return () => window.clearTimeout(id);
+  }, [shouldAutoFlip, targetFlipped, state.history, state.history.length, store.settings.animationSpeed]);
 
   return (
     <div className="screen game">