@scriptonita/chess-football-ui 0.4.2 → 0.6.0

package/dist/index.cjs

@@ -149,6 +149,7 @@ var Football = ({ className }) => {
 var STATIC_I18N_KEYS = [
   "actionPointsAriaLabel",
   "actionPointsShort",
+  "ballHolder",
   "endTurn",
   "endTurnConfirm",
   "endTurnConfirmDescription",
@@ -171,6 +172,13 @@ var STATIC_I18N_KEYS = [
   "selectedPiece.atSquare",
   "selectedPiece.empty",
   "selectedPiece.hasBall",
+  "shortcuts.arrows",
+  "shortcuts.buttonLabel",
+  "shortcuts.cancel",
+  "shortcuts.move",
+  "shortcuts.pass",
+  "shortcuts.select",
+  "shortcuts.title",
   "teamBlack",
   "teamWhite",
   "waitingRival",
@@ -202,6 +210,7 @@ var ROWS = 12;
 var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
 function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
   const t = useGameT();
+  const prefersReducedMotion = framerMotion.useReducedMotion();
   const {
     boardState,
     selectedPieceId,
@@ -212,11 +221,62 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
   } = chunkLTFNSTAQ_cjs.useGameStore();
   const [cursor, setCursor] = React.useState(null);
   const [disambiguateAt, setDisambiguateAt] = React.useState(null);
+  const [shortcutsOpen, setShortcutsOpen] = React.useState(false);
+  const shortcutsRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!shortcutsOpen) return;
+    const onPointerDown = (e) => {
+      if (shortcutsRef.current && !shortcutsRef.current.contains(e.target)) {
+        setShortcutsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [shortcutsOpen]);
+  const [invalidClickAt, setInvalidClickAt] = React.useState(null);
+  const invalidClickNonceRef = React.useRef(0);
+  const triggerInvalidClickShake = (x, y) => {
+    invalidClickNonceRef.current += 1;
+    setInvalidClickAt({ x, y, nonce: invalidClickNonceRef.current });
+  };
+  const [hoveredPassAt, setHoveredPassAt] = React.useState(null);
+  React.useEffect(() => {
+    if (!invalidClickAt) return;
+    const id = setTimeout(() => setInvalidClickAt(null), 100);
+    return () => clearTimeout(id);
+  }, [invalidClickAt]);
   const prevBallRef = React.useRef(boardState?.ball);
   const prevBall = prevBallRef.current;
   React.useEffect(() => {
     prevBallRef.current = boardState?.ball;
   });
+  const prevTurnRef = React.useRef(boardState?.turn);
+  const [replay, setReplay] = React.useState(null);
+  React.useEffect(() => {
+    const prevTurn = prevTurnRef.current;
+    prevTurnRef.current = boardState?.turn;
+    if (!boardState || prevTurn === boardState.turn) return;
+    if (boardState.turn !== userSide) {
+      setReplay(null);
+      return;
+    }
+    if (prefersReducedMotion || userSide === null) return;
+    const lastEntry = boardState.moveHistory.at(-1);
+    if (!lastEntry) return;
+    const steps = boardState.moveHistory.filter(
+      (m) => m.turnNumber === lastEntry.turnNumber && m.pieceSide !== userSide
+    );
+    if (steps.length > 1) setReplay({ steps, index: 0 });
+  }, [boardState, userSide, prefersReducedMotion]);
+  React.useEffect(() => {
+    if (!replay) return;
+    if (replay.index >= replay.steps.length - 1) {
+      const id2 = setTimeout(() => setReplay(null), 350);
+      return () => clearTimeout(id2);
+    }
+    const id = setTimeout(() => setReplay((r) => r ? { ...r, index: r.index + 1 } : null), 350);
+    return () => clearTimeout(id);
+  }, [replay]);
   const validMoves = React.useMemo(() => {
     if (!boardState) return [];
     const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
@@ -234,6 +294,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
     return [];
   }, [boardState, selectedPieceId]);
   if (!boardState) return null;
+  const ballHolderPiece = boardState.pieces.find((p) => p.id === boardState.ball.holderId) ?? null;
   const lastMove = boardState.lastMove;
   const ball = boardState.ball;
   const ballMoved = !!prevBall && (prevBall.pos.x !== ball.pos.x || prevBall.pos.y !== ball.pos.y);
@@ -254,7 +315,11 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
   }
   const ballCarrier = ball.holderId ? boardState.pieces.find((p) => p.id === ball.holderId) ?? null : null;
   const isOffsideRisk = !!ballCarrier && ballCarrier.type !== "king" && userSide !== null && ballCarrier.side === userSide && boardState.turn === userSide && chessFootballEngine.isInEnemyArea(ballCarrier.pos, ballCarrier.side);
+  const passCarrier = boardState.pieces.find((p) => p.id === selectedPieceId && boardState.ball.holderId === p.id) ?? null;
+  const trajectoryPath = hoveredPassAt && passCarrier ? passCarrier.type === "knight" ? [hoveredPassAt] : chessFootballEngine.getPath(passCarrier.pos, hoveredPassAt) : null;
+  const trajectoryIntercepted = !!(trajectoryPath && passCarrier && trajectoryPath.some((sq) => boardState.pieces.some((p) => p.pos.x === sq.x && p.pos.y === sq.y && p.side !== passCarrier.side)));
   const handleSquareClick = (x, y) => {
+    if (replay) return;
     setCursor(null);
     const isValidMove = validMoves.some((m) => m.x === x && m.y === y);
     const isValidPass = validPasses.some((p) => p.x === x && p.y === y);
@@ -265,15 +330,21 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
     if (isValidMove && selectedPieceId) {
       movePiece(selectedPieceId, { x, y });
       setDisambiguateAt(null);
+      setInvalidClickAt(null);
     } else if (isValidPass) {
       passBall({ x, y });
       setDisambiguateAt(null);
+      setInvalidClickAt(null);
     } else {
+      if (selectedPieceId) {
+        triggerInvalidClickShake(x, y);
+      }
       setDisambiguateAt(null);
     }
   };
   const handlePieceClick = (pieceId, x, y, e) => {
     e.stopPropagation();
+    if (replay) return;
     const pieceAt = boardState.pieces.find((p) => p.id === pieceId);
     if (!pieceAt) return;
     const isValidMove = validMoves.some((m) => m.x === x && m.y === y);
@@ -287,6 +358,10 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
         setSelectedPieceId(pieceAt.id);
       }
       setDisambiguateAt(null);
+      setInvalidClickAt(null);
+    } else if (selectedPieceId) {
+      triggerInvalidClickShake(x, y);
+      setDisambiguateAt(null);
     }
   };
   const defaultCursor = () => {
@@ -303,7 +378,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
     }
   };
   const handleKeyDown = (e) => {
-    if (!keyboardNav) return;
+    if (!keyboardNav || replay) return;
     const step = (dx, dy) => {
       e.preventDefault();
       setCursor((c) => {
@@ -347,7 +422,9 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
         }
         break;
       case "Escape":
-        if (disambiguateAt) {
+        if (shortcutsOpen) {
+          setShortcutsOpen(false);
+        } else if (disambiguateAt) {
           setDisambiguateAt(null);
         } else {
           setSelectedPieceId(null);
@@ -365,8 +442,9 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
         const isValidMove = validMoves.some((m) => m.x === x && m.y === y);
         const isValidPass = validPasses.some((p) => p.x === x && p.y === y);
         const isAmbiguous = isValidMove && isValidPass;
-        const isLastMoveOrigin = lastMove?.from && lastMove.from.x === x && lastMove.from.y === y;
-        const isLastMoveDest = lastMove?.to && lastMove.to.x === x && lastMove.to.y === y;
+        const displayedLastMove = replay ? replay.steps[replay.index] : lastMove;
+        const isLastMoveOrigin = displayedLastMove?.from && displayedLastMove.from.x === x && displayedLastMove.from.y === y;
+        const isLastMoveDest = displayedLastMove?.to && displayedLastMove.to.x === x && displayedLastMove.to.y === y;
         const isLastMove = isLastMoveOrigin || isLastMoveDest;
         const isEnemyGoalArea = userSide !== null && (x >= 2 && x <= 6) && (userSide === "white" ? y >= 10 && y <= 11 : y >= 0 && y <= 1);
         const pieceAt = boardState.pieces.find((p) => p.pos.x === x && p.pos.y === y);
@@ -377,6 +455,10 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
             "div",
             {
               onClick: () => handleSquareClick(x, y),
+              onMouseEnter: () => {
+                if (isValidPass) setHoveredPassAt({ x, y });
+              },
+              onMouseLeave: () => setHoveredPassAt(null),
               className: cn(
                 "relative aspect-square w-full flex items-center justify-center cursor-pointer",
                 isEven ? "bg-field-green-1" : "bg-field-green-2",
@@ -449,7 +531,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
     }
     return squares;
   };
-  const board = /* @__PURE__ */ jsxRuntime.jsx(
+  const board = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn(
@@ -466,104 +548,220 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
         "aria-label": "Game board \u2014 arrow keys to move the cursor, Enter to act",
         onKeyDown: handleKeyDown
       } : {},
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { containerType: "inline-size" }, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-9 gap-[1px]", children: renderSquares() }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "svg",
-          {
-            viewBox: "0 0 9 12",
-            preserveAspectRatio: "none",
-            className: "absolute inset-0 w-full h-full pointer-events-none",
-            "aria-hidden": "true",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "0", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-              /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "10", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-              /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "6", x2: "9", y2: "6", stroke: "white", strokeOpacity: "0.35", strokeWidth: "0.05" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "6", r: "1.5", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "6", r: "0.12", fill: "white", fillOpacity: "0.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "1.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "10.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 3.086,2 A 1.5,1.5 0 0 0 5.914,2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-              /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 3.086,10 A 1.5,1.5 0 0 1 5.914,10", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: boardState.pieces.map((piece) => {
-            const isPickupCarrier = pickupCarrierId === piece.id;
-            const pieceTransition = isPickupCarrier ? { duration: PICKUP_DURATION, ease: "linear" } : { type: "spring", stiffness: 200, damping: 25, mass: 1 };
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.motion.div,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex items-center justify-between gap-2 px-2.5 py-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1.5 min-h-[1.75rem]", "aria-live": "polite", children: ballHolderPiece && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
               {
-                layout: true,
-                initial: false,
-                animate: {
-                  left: `${piece.pos.x / COLS * 100}%`,
-                  top: `${(ROWS - 1 - piece.pos.y) / ROWS * 100}%`
-                },
-                transition: pieceTransition,
-                style: {
-                  position: "absolute",
-                  width: `${100 / COLS}%`,
-                  height: `${100 / ROWS}%`
-                },
-                className: "flex items-center justify-center pointer-events-auto",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  GamePiece,
+                style: ballHolderPiece.side === "white" ? WHITE_PIECE_STYLE : BLACK_PIECE_STYLE,
+                className: "relative w-7 h-7 flex items-center justify-center rounded-full shrink-0",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(PieceIcon, { type: ballHolderPiece.type, side: ballHolderPiece.side }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-1 -right-1 w-3.5 h-3.5 flex items-center justify-center rounded-full bg-bg-secondary border border-border-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-2.5 h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(Football, {}) }) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-inter text-[11px] text-fg-secondary", children: [
+              t("ballHolder"),
+              ": ",
+              t(`pieces.${ballHolderPiece.type}`)
+            ] })
+          ] }) }),
+          keyboardNav && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: shortcutsRef,
+              className: "relative",
+              onKeyDown: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
                   {
-                    piece,
-                    isSelected: selectedPieceId === piece.id,
-                    hasBall: boardState.ball.holderId === piece.id,
-                    onClick: (e) => handlePieceClick(piece.id, piece.pos.x, piece.pos.y, e)
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setShortcutsOpen((o) => !o);
+                    },
+                    "aria-label": t("shortcuts.buttonLabel"),
+                    "aria-expanded": shortcutsOpen,
+                    className: "w-8 h-8 flex items-center justify-center rounded-full bg-bg-secondary/80 border border-border-subtle text-fg-muted hover:text-fg-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HelpCircle, { size: 16, strokeWidth: 2, "aria-hidden": "true" })
+                  }
+                ),
+                shortcutsOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: "absolute top-full right-0 mt-1 z-50 w-max max-w-[220px] bg-bg-secondary border border-border-subtle rounded-md shadow-xl p-2.5 pointer-events-auto",
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-inter text-[11px] font-semibold text-fg-primary mb-1.5", children: t("shortcuts.title") }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "font-mono text-[10px] text-fg-secondary leading-relaxed", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "text-fg-primary", children: "\u2191\u2193\u2190\u2192" }),
+                          " ",
+                          t("shortcuts.arrows")
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "text-fg-primary", children: "Enter" }),
+                          " ",
+                          t("shortcuts.select")
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "text-fg-primary", children: "M" }),
+                          " ",
+                          t("shortcuts.move")
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "text-fg-primary", children: "P" }),
+                          " ",
+                          t("shortcuts.pass")
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: "text-fg-primary", children: "Esc" }),
+                          " ",
+                          t("shortcuts.cancel")
+                        ] })
+                      ] })
+                    ]
                   }
                 )
-              },
-              piece.id
-            );
-          }) }),
-          (() => {
-            const targetX = ball.pos.x / COLS * 100;
-            const targetY = (ROWS - 1 - ball.pos.y) / ROWS * 100;
-            let animate;
-            let transition;
-            if (isPickupOnMove && prevBall) {
-              const prevX = prevBall.pos.x / COLS * 100;
-              const prevY = (ROWS - 1 - prevBall.pos.y) / ROWS * 100;
-              const pulseStart = Math.max(0.05, pickupProportion - 0.06);
-              animate = {
-                left: [`${prevX}%`, `${prevX}%`, `${prevX}%`, `${targetX}%`],
-                top: [`${prevY}%`, `${prevY}%`, `${prevY}%`, `${targetY}%`],
-                scale: [1, 1, 1.35, 1]
-              };
-              transition = { duration: PICKUP_DURATION, times: [0, pulseStart, pickupProportion, 1], ease: "linear" };
-            } else {
-              animate = { left: `${targetX}%`, top: `${targetY}%`, scale: 1 };
-              transition = { type: "spring", stiffness: 300, damping: 30, mass: 0.5 };
+              ]
             }
-            return /* @__PURE__ */ jsxRuntime.jsx(
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { containerType: "inline-size" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-9 gap-[1px]", children: renderSquares() }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              viewBox: "0 0 9 12",
+              preserveAspectRatio: "none",
+              className: "absolute inset-0 w-full h-full pointer-events-none",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "0", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
+                /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2", y: "10", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "0", y1: "6", x2: "9", y2: "6", stroke: "white", strokeOpacity: "0.35", strokeWidth: "0.05" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "6", r: "1.5", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "6", r: "0.12", fill: "white", fillOpacity: "0.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "1.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "4.5", cy: "10.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 3.086,2 A 1.5,1.5 0 0 0 5.914,2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
+                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M 3.086,10 A 1.5,1.5 0 0 1 5.914,10", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
+                hoveredPassAt && passCarrier && /* @__PURE__ */ jsxRuntime.jsx(
+                  "line",
+                  {
+                    "data-testid": "pass-trajectory-line",
+                    x1: passCarrier.pos.x + 0.5,
+                    y1: ROWS - 1 - passCarrier.pos.y + 0.5,
+                    x2: hoveredPassAt.x + 0.5,
+                    y2: ROWS - 1 - hoveredPassAt.y + 0.5,
+                    stroke: trajectoryIntercepted ? "var(--danger)" : "var(--pass-highlight)",
+                    strokeWidth: "0.08",
+                    strokeDasharray: "0.15 0.1",
+                    strokeLinecap: "round"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "sync", children: boardState.pieces.map((piece) => {
+              const isPickupCarrier = pickupCarrierId === piece.id;
+              const pieceTransition = isPickupCarrier ? { duration: PICKUP_DURATION, ease: "linear" } : { type: "spring", stiffness: 200, damping: 25, mass: 1 };
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
+                {
+                  layout: true,
+                  initial: false,
+                  animate: {
+                    left: `${piece.pos.x / COLS * 100}%`,
+                    top: `${(ROWS - 1 - piece.pos.y) / ROWS * 100}%`
+                  },
+                  transition: pieceTransition,
+                  style: {
+                    position: "absolute",
+                    width: `${100 / COLS}%`,
+                    height: `${100 / ROWS}%`
+                  },
+                  className: "flex items-center justify-center pointer-events-auto",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    GamePiece,
+                    {
+                      piece,
+                      isSelected: selectedPieceId === piece.id,
+                      hasBall: boardState.ball.holderId === piece.id,
+                      onClick: (e) => handlePieceClick(piece.id, piece.pos.x, piece.pos.y, e)
+                    }
+                  )
+                },
+                piece.id
+              );
+            }) }),
+            (() => {
+              const targetX = ball.pos.x / COLS * 100;
+              const targetY = (ROWS - 1 - ball.pos.y) / ROWS * 100;
+              let animate;
+              let transition;
+              if (isPickupOnMove && prevBall) {
+                const prevX = prevBall.pos.x / COLS * 100;
+                const prevY = (ROWS - 1 - prevBall.pos.y) / ROWS * 100;
+                const pulseStart = Math.max(0.05, pickupProportion - 0.06);
+                animate = {
+                  left: [`${prevX}%`, `${prevX}%`, `${prevX}%`, `${targetX}%`],
+                  top: [`${prevY}%`, `${prevY}%`, `${prevY}%`, `${targetY}%`],
+                  scale: [1, 1, 1.35, 1]
+                };
+                transition = { duration: PICKUP_DURATION, times: [0, pulseStart, pickupProportion, 1], ease: "linear" };
+              } else {
+                animate = { left: `${targetX}%`, top: `${targetY}%`, scale: 1 };
+                transition = { type: "spring", stiffness: 300, damping: 30, mass: 0.5 };
+              }
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                framerMotion.motion.div,
+                {
+                  initial: false,
+                  animate,
+                  transition,
+                  style: {
+                    position: "absolute",
+                    width: `${100 / COLS}%`,
+                    height: `${100 / ROWS}%`,
+                    zIndex: 50
+                  },
+                  className: "flex items-center justify-center pointer-events-none",
+                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[60%] h-[60%]", children: /* @__PURE__ */ jsxRuntime.jsx(Football, {}) })
+                },
+                "ball"
+              );
+            })(),
+            invalidClickAt && /* @__PURE__ */ jsxRuntime.jsx(
               framerMotion.motion.div,
               {
+                "data-testid": "invalid-action-shake",
+                "aria-hidden": "true",
                 initial: false,
-                animate,
-                transition,
+                animate: prefersReducedMotion ? { opacity: [0.9, 0] } : { x: [0, -3, 3, -3, 3, 0] },
+                transition: { duration: 0.08 },
                 style: {
                   position: "absolute",
+                  left: `${invalidClickAt.x / COLS * 100}%`,
+                  top: `${(ROWS - 1 - invalidClickAt.y) / ROWS * 100}%`,
                   width: `${100 / COLS}%`,
-                  height: `${100 / ROWS}%`,
-                  zIndex: 50
+                  height: `${100 / ROWS}%`
                 },
-                className: "flex items-center justify-center pointer-events-none",
-                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[60%] h-[60%]", children: /* @__PURE__ */ jsxRuntime.jsx(Football, {}) })
+                className: "ring-2 ring-inset ring-danger/70 rounded-sm"
               },
-              "ball"
-            );
-          })()
-        ] }),
-        isOffsideRisk && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 px-3 py-1.5 bg-warning/20 border border-warning/50 rounded-full font-inter text-xs font-semibold text-warning pointer-events-none whitespace-nowrap backdrop-blur-sm", children: [
-          "\u26A0 ",
-          t("offsideWarning")
+              invalidClickAt.nonce
+            )
+          ] }),
+          isOffsideRisk && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 z-30 flex items-center gap-1.5 px-3 py-1.5 bg-warning/20 border border-warning/50 rounded-full font-inter text-xs font-semibold text-warning pointer-events-none whitespace-nowrap backdrop-blur-sm", children: [
+            "\u26A0 ",
+            t("offsideWarning")
+          ] })
         ] })
-      ] })
+      ]
     }
   );
   if (!showCoordinates) return board;
@@ -608,31 +806,50 @@ function AvatarFallback({ className, children }) {
 }
 function ActionPoints({ total, remaining, size = 20, className, kingMustRelease }) {
   const t = useGameT();
+  const prevRemainingRef = React.useRef(remaining);
+  const [spentRange, setSpentRange] = React.useState(null);
+  React.useEffect(() => {
+    const prev = prevRemainingRef.current;
+    prevRemainingRef.current = remaining;
+    if (remaining < prev) {
+      setSpentRange([remaining, prev - 1]);
+      const id = setTimeout(() => setSpentRange(null), 300);
+      return () => clearTimeout(id);
+    }
+    setSpentRange(null);
+  }, [remaining]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center gap-1.5", className), "aria-label": t("actionPointsAriaLabel", { remaining, total }), children: Array.from({ length: total }).map((_, i) => {
     const isActive = i < remaining;
     const showCrown = kingMustRelease && i === total - 1;
-    if (showCrown) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        lucideReact.Crown,
-        {
-          size,
-          strokeWidth: 2,
-          className: "text-yellow-400 fill-yellow-400 transition-colors duration-150",
-          "aria-hidden": "true"
-        },
-        i
-      );
-    }
+    const justSpent = !!spentRange && i >= spentRange[0] && i <= spentRange[1];
     return /* @__PURE__ */ jsxRuntime.jsx(
-      lucideReact.Zap,
+      framerMotion.motion.span,
       {
-        size,
-        strokeWidth: 2,
-        className: cn(
-          "transition-colors duration-150",
-          isActive ? "text-accent-green fill-accent-green" : "text-fg-muted fill-none"
-        ),
-        "aria-hidden": "true"
+        "data-testid": `ap-pip-${i}`,
+        "data-spent": justSpent || void 0,
+        className: "inline-flex",
+        animate: justSpent ? { scale: [1.5, 1] } : void 0,
+        transition: { duration: 0.3 },
+        children: showCrown ? /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.Crown,
+          {
+            size,
+            strokeWidth: 2,
+            className: "text-yellow-400 fill-yellow-400 transition-colors duration-150",
+            "aria-hidden": "true"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.Zap,
+          {
+            size,
+            strokeWidth: 2,
+            className: cn(
+              "transition-colors duration-150",
+              isActive ? "text-accent-green fill-accent-green" : "text-fg-muted fill-none"
+            ),
+            "aria-hidden": "true"
+          }
+        )
       },
       i
     );