@scriptonita/chess-football-ui 0.4.2 → 0.5.0

package/dist/index.cjs

@@ -171,6 +171,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 +209,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 +220,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);
@@ -254,7 +313,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 +328,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 +356,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 +376,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 +420,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 +440,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 +453,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",
@@ -484,7 +564,21 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
               /* @__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.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"
+                }
+              )
             ]
           }
         ),
@@ -557,12 +651,92 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
               },
               "ball"
             );
-          })()
+          })(),
+          invalidClickAt && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              "data-testid": "invalid-action-shake",
+              "aria-hidden": "true",
+              initial: false,
+              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}%`
+              },
+              className: "ring-2 ring-inset ring-danger/70 rounded-sm"
+            },
+            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")
-        ] })
+        ] }),
+        keyboardNav && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: shortcutsRef,
+            className: "hidden md:block absolute top-2 right-2 z-40",
+            onKeyDown: (e) => e.stopPropagation(),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setShortcutsOpen((o) => !o);
+                  },
+                  "aria-label": t("shortcuts.buttonLabel"),
+                  "aria-expanded": shortcutsOpen,
+                  className: "w-11 h-11 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 backdrop-blur-sm",
+                  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")
+                      ] })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   );
@@ -608,31 +782,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
     );