@scriptonita/chess-football-ui 0.6.0 → 0.7.0

package/dist/index.js

@@ -53,26 +53,66 @@ var BLACK_PIECE_STYLE = {
   border: "1px solid rgba(0,0,0,0.55)",
   color: "#fafafa"
 };
+var ON_BOARD_CHIP_STYLE = {
+  white: {
+    ...WHITE_PIECE_STYLE,
+    boxShadow: [
+      "inset 0 1.5px 1px rgba(255,255,255,0.95)",
+      "inset 0 -2px 3px rgba(0,0,0,0.18)",
+      "0 1px 1px rgba(0,0,0,0.35)"
+    ].join(", ")
+  },
+  black: {
+    ...BLACK_PIECE_STYLE,
+    boxShadow: [
+      "inset 0 1.5px 1px rgba(255,255,255,0.22)",
+      "inset 0 -2px 3px rgba(0,0,0,0.6)",
+      "0 1px 1px rgba(0,0,0,0.5)"
+    ].join(", ")
+  }
+};
 var MOVED_STYLE = {
   filter: "saturate(0.15) brightness(0.75)"
 };
-function GamePiece({ piece, isSelected, hasBall, onClick }) {
-  const baseStyle = piece.side === "white" ? WHITE_PIECE_STYLE : BLACK_PIECE_STYLE;
-  const style = piece.hasMovedThisTurn ? { ...baseStyle, ...MOVED_STYLE } : baseStyle;
+function GamePiece({ piece, isSelected, hasBall, onClick, isMoving = false }) {
+  const chipStyle = ON_BOARD_CHIP_STYLE[piece.side];
   return /* @__PURE__ */ jsxs(
     "div",
     {
       onClick,
-      style,
+      style: piece.hasMovedThisTurn ? MOVED_STYLE : void 0,
       className: cn(
-        "relative w-[88%] h-[88%] flex items-center justify-center rounded-full cursor-pointer z-10 transition-transform motion-reduce:transition-none",
+        "relative w-[88%] h-[88%] rounded-full cursor-pointer z-10 transition-transform duration-200 ease-out motion-reduce:transition-none",
         isSelected && "ring-4 ring-primary scale-110 z-30",
+        isMoving && "scale-[1.08] z-40",
         piece.hasMovedThisTurn && "opacity-70"
       ),
       children: [
-        /* @__PURE__ */ jsx(PieceIcon, { type: piece.type, side: piece.side }),
-        hasBall && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full ring-2 ring-orange-400 pointer-events-none" }),
-        isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full animate-pulse motion-reduce:animate-none ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            "data-testid": "piece-shadow",
+            "data-lifted": isMoving ? "true" : "false",
+            className: cn(
+              "absolute inset-0 rounded-full bg-black pointer-events-none transition-all duration-200 ease-out motion-reduce:transition-none",
+              isMoving ? "translate-x-[9%] translate-y-[24%] scale-[1.04] opacity-35 blur-[5px]" : "translate-x-[4%] translate-y-[9%] scale-95 opacity-50 blur-[3px]"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "piece-chip",
+            style: chipStyle,
+            className: "absolute inset-0 rounded-full flex items-center justify-center",
+            children: [
+              /* @__PURE__ */ jsx(PieceIcon, { type: piece.type, side: piece.side }),
+              hasBall && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full ring-2 ring-orange-400 pointer-events-none" }),
+              isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-full animate-pulse motion-reduce:animate-none ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
+            ]
+          }
+        )
       ]
     }
   );
@@ -184,10 +224,204 @@ function GameI18nProvider({ t, children }) {
 function useGameT() {
   return useContext(GameI18nContext);
 }
+function BallHolderChip({ className }) {
+  const t = useGameT();
+  const boardState = useGameStore((s) => s.boardState);
+  const holder = boardState?.pieces.find((p) => p.id === boardState.ball.holderId) ?? null;
+  if (!holder) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5 min-h-[1.75rem]", className), "aria-live": "polite", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: holder.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__ */ jsx(PieceIcon, { type: holder.type, side: holder.side }),
+          /* @__PURE__ */ 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__ */ jsx("div", { className: "w-2.5 h-2.5", children: /* @__PURE__ */ jsx(Football, {}) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "font-inter text-[11px] text-fg-secondary", children: [
+      t("ballHolder"),
+      ": ",
+      t(`pieces.${holder.type}`)
+    ] })
+  ] });
+}
+function KeyboardShortcutsList({ className }) {
+  const t = useGameT();
+  return /* @__PURE__ */ jsxs("ul", { className: cn("font-mono text-[10px] text-fg-secondary leading-relaxed", className), children: [
+    /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "\u2191\u2193\u2190\u2192" }),
+      " ",
+      t("shortcuts.arrows")
+    ] }),
+    /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "Enter" }),
+      " ",
+      t("shortcuts.select")
+    ] }),
+    /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "M" }),
+      " ",
+      t("shortcuts.move")
+    ] }),
+    /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "P" }),
+      " ",
+      t("shortcuts.pass")
+    ] }),
+    /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "Esc" }),
+      " ",
+      t("shortcuts.cancel")
+    ] })
+  ] });
+}
+var PITCH_COLS = 9;
+var PITCH_ROWS = 12;
+var isGoalAreaSquare = (x, y) => x >= 2 && x <= 6 && (y >= 0 && y <= 1 || y >= PITCH_ROWS - 2 && y <= PITCH_ROWS - 1);
+var GOAL_AREA_SHADE_CLASS = "shadow-[inset_0_0_0_100vmax_rgba(0,0,0,0.32)]";
+function pitchSquareClass(x, y) {
+  const isEven = (x + y) % 2 === 0;
+  return cn(
+    "relative aspect-square w-full",
+    isEven ? "bg-field-green-1" : "bg-field-green-2",
+    isGoalAreaSquare(x, y) && GOAL_AREA_SHADE_CLASS
+  );
+}
+var GRAIN_TILE_SVG = '<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="g" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" seed="7" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(#g)"/></svg>';
+var GRAIN_TILE_URL = `url("data:image/svg+xml;utf8,${encodeURIComponent(GRAIN_TILE_SVG)}")`;
+var VIGNETTE = "radial-gradient(120% 95% at 50% 38%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,0.26) 100%)";
+function GrassOverlay({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      "data-testid": "grass-overlay",
+      className: cn("absolute inset-0 pointer-events-none overflow-hidden", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-layer": "grain",
+            className: "absolute inset-0 mix-blend-overlay opacity-60",
+            style: { backgroundImage: GRAIN_TILE_URL, backgroundSize: "160px 160px" }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { "data-layer": "light", className: "absolute inset-0", style: { background: VIGNETTE } })
+      ]
+    }
+  );
+}
+var CHALK = "#f6f5ee";
+function PitchMarkings({ className, children }) {
+  const id = useId();
+  const filterId = `${id}-chalk`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 9 12",
+      preserveAspectRatio: "none",
+      className: cn("absolute inset-0 w-full h-full pointer-events-none", className),
+      "aria-hidden": "true",
+      "data-testid": "pitch-markings",
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "filter",
+          {
+            id: filterId,
+            filterUnits: "userSpaceOnUse",
+            x: "-0.5",
+            y: "-0.5",
+            width: "10",
+            height: "13",
+            colorInterpolationFilters: "sRGB",
+            children: [
+              /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "5.5", numOctaves: "2", seed: "3", result: "edgeNoise" }),
+              /* @__PURE__ */ jsx(
+                "feDisplacementMap",
+                {
+                  in: "SourceGraphic",
+                  in2: "edgeNoise",
+                  scale: "0.045",
+                  xChannelSelector: "R",
+                  yChannelSelector: "G",
+                  result: "rough"
+                }
+              ),
+              /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "14", numOctaves: "3", seed: "11", result: "dust" }),
+              /* @__PURE__ */ jsx(
+                "feColorMatrix",
+                {
+                  in: "dust",
+                  type: "matrix",
+                  values: "0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.75 0 0 0 0.55",
+                  result: "dustMask"
+                }
+              ),
+              /* @__PURE__ */ jsx("feComposite", { in: "rough", in2: "dustMask", operator: "arithmetic", k1: "1", k2: "0", k3: "0", k4: "0" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx("g", { "data-layer": "halo", fill: "none", stroke: CHALK, strokeOpacity: "0.09", strokeWidth: "0.16", strokeLinecap: "round", children: /* @__PURE__ */ jsx(Markings, {}) }),
+        /* @__PURE__ */ jsx(
+          "g",
+          {
+            "data-layer": "chalk",
+            filter: `url(#${filterId})`,
+            fill: "none",
+            stroke: CHALK,
+            strokeOpacity: "0.82",
+            strokeWidth: "0.07",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx(Markings, {})
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function Markings() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("rect", { x: "0.06", y: "0.06", width: "8.88", height: "11.88" }),
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "0.06", width: "5", height: "1.94" }),
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "5", height: "1.94" }),
+    /* @__PURE__ */ jsx("line", { x1: "0.06", y1: "6", x2: "8.94", y2: "6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "6", r: "1.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "6", r: "0.09", fill: CHALK, fillOpacity: "0.9", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "1.5", r: "0.08", fill: CHALK, fillOpacity: "0.9", stroke: "none" }),
+    /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "10.5", r: "0.08", fill: CHALK, fillOpacity: "0.9", stroke: "none" }),
+    /* @__PURE__ */ jsx("path", { d: "M 3.086,2 A 1.5,1.5 0 0 0 5.914,2" }),
+    /* @__PURE__ */ jsx("path", { d: "M 3.086,10 A 1.5,1.5 0 0 1 5.914,10" })
+  ] });
+}
+function PitchSurface({ className, squareClassName, children }) {
+  const squares = [];
+  for (let y = PITCH_ROWS - 1; y >= 0; y--) {
+    for (let x = 0; x < PITCH_COLS; x++) {
+      squares.push(
+        /* @__PURE__ */ jsx("div", { className: cn(pitchSquareClass(x, y), squareClassName?.(x, y)) }, `${x}-${y}`)
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), style: { containerType: "inline-size" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 gap-[1px]", "data-testid": "pitch-squares", children: squares }),
+    /* @__PURE__ */ jsx(GrassOverlay, {}),
+    /* @__PURE__ */ jsx(PitchMarkings, {}),
+    children
+  ] });
+}
 var COLS = 9;
 var ROWS = 12;
 var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
-function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
+var cellX = (x) => `${x * 100}%`;
+var cellY = (y) => `${(ROWS - 1 - y) * 100}%`;
+var PIECE_SLIDE = { type: "spring", stiffness: 190, damping: 28, mass: 1 };
+var BALL_SLIDE = { type: "spring", stiffness: 300, damping: 26, mass: 0.6 };
+function GameBoard({ userSide, showCoordinates = false, keyboardNav = true, toolbar = true }) {
   const t = useGameT();
   const prefersReducedMotion = useReducedMotion();
   const {
@@ -219,6 +453,14 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
     setInvalidClickAt({ x, y, nonce: invalidClickNonceRef.current });
   };
   const [hoveredPassAt, setHoveredPassAt] = useState(null);
+  const [movingIds, setMovingIds] = useState(() => /* @__PURE__ */ new Set());
+  const setMoving = (id, moving) => setMovingIds((prev) => {
+    if (prev.has(id) === moving) return prev;
+    const next = new Set(prev);
+    if (moving) next.add(id);
+    else next.delete(id);
+    return next;
+  });
   useEffect(() => {
     if (!invalidClickAt) return;
     const id = setTimeout(() => setInvalidClickAt(null), 100);
@@ -273,7 +515,6 @@ 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);
@@ -416,8 +657,6 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
     const squares = [];
     for (let y = ROWS - 1; y >= 0; y--) {
       for (let x = 0; x < COLS; x++) {
-        const isGoalArea = x >= 2 && x <= 6 && (y >= 0 && y <= 1 || y >= 10 && y <= 11);
-        const isEven = (x + y) % 2 === 0;
         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;
@@ -439,9 +678,8 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
               },
               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",
-                isGoalArea && "bg-[#1a3a18] ring-1 ring-inset ring-emerald-500/30",
+                pitchSquareClass(x, y),
+                "flex items-center justify-center cursor-pointer",
                 !isValidMove && !isValidPass && isLastMove && "bg-last-move-highlight/20",
                 // §8: pulsing warning ring on enemy goal area
                 isOffsideRisk && isEnemyGoalArea && !isValidMove && !isValidPass && "ring-2 ring-inset ring-warning/60",
@@ -528,25 +766,8 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
         onKeyDown: handleKeyDown
       } : {},
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center justify-between gap-2 px-2.5 py-1", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1.5 min-h-[1.75rem]", "aria-live": "polite", children: ballHolderPiece && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                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__ */ jsx(PieceIcon, { type: ballHolderPiece.type, side: ballHolderPiece.side }),
-                  /* @__PURE__ */ 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__ */ jsx("div", { className: "w-2.5 h-2.5", children: /* @__PURE__ */ jsx(Football, {}) }) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("span", { className: "font-inter text-[11px] text-fg-secondary", children: [
-              t("ballHolder"),
-              ": ",
-              t(`pieces.${ballHolderPiece.type}`)
-            ] })
-          ] }) }),
+        toolbar && /* @__PURE__ */ jsxs("div", { className: "hidden md:flex items-center justify-between gap-2 px-2.5 py-1", "data-testid": "board-toolbar", children: [
+          /* @__PURE__ */ jsx(BallHolderChip, {}),
           keyboardNav && /* @__PURE__ */ jsxs(
             "div",
             {
@@ -575,33 +796,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
                     onClick: (e) => e.stopPropagation(),
                     children: [
                       /* @__PURE__ */ jsx("p", { className: "font-inter text-[11px] font-semibold text-fg-primary mb-1.5", children: t("shortcuts.title") }),
-                      /* @__PURE__ */ jsxs("ul", { className: "font-mono text-[10px] text-fg-secondary leading-relaxed", children: [
-                        /* @__PURE__ */ jsxs("li", { children: [
-                          /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "\u2191\u2193\u2190\u2192" }),
-                          " ",
-                          t("shortcuts.arrows")
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { children: [
-                          /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "Enter" }),
-                          " ",
-                          t("shortcuts.select")
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { children: [
-                          /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "M" }),
-                          " ",
-                          t("shortcuts.move")
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { children: [
-                          /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "P" }),
-                          " ",
-                          t("shortcuts.pass")
-                        ] }),
-                        /* @__PURE__ */ jsxs("li", { children: [
-                          /* @__PURE__ */ jsx("kbd", { className: "text-fg-primary", children: "Esc" }),
-                          " ",
-                          t("shortcuts.cancel")
-                        ] })
-                      ] })
+                      /* @__PURE__ */ jsx(KeyboardShortcutsList, {})
                     ]
                   }
                 )
@@ -611,58 +806,51 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative", style: { containerType: "inline-size" }, children: [
           /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 gap-[1px]", children: renderSquares() }),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(GrassOverlay, {}),
+          /* @__PURE__ */ jsx(PitchMarkings, {}),
+          /* @__PURE__ */ jsx(
             "svg",
             {
               viewBox: "0 0 9 12",
               preserveAspectRatio: "none",
               className: "absolute inset-0 w-full h-full pointer-events-none",
               "aria-hidden": "true",
-              children: [
-                /* @__PURE__ */ jsx("rect", { x: "2", y: "0", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-                /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-                /* @__PURE__ */ jsx("line", { x1: "0", y1: "6", x2: "9", y2: "6", stroke: "white", strokeOpacity: "0.35", strokeWidth: "0.05" }),
-                /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "6", r: "1.5", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-                /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "6", r: "0.12", fill: "white", fillOpacity: "0.5" }),
-                /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "1.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
-                /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "10.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
-                /* @__PURE__ */ 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__ */ 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__ */ 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"
-                  }
-                )
-              ]
+              children: hoveredPassAt && passCarrier && /* @__PURE__ */ 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__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
+          /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 pointer-events-none", "data-testid": "pieces-layer", children: [
             /* @__PURE__ */ jsx(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 };
+              const pieceTransition = isPickupCarrier ? { duration: PICKUP_DURATION, ease: "linear" } : PIECE_SLIDE;
               return /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  layout: true,
+                  "data-piece-id": piece.id,
                   initial: false,
-                  animate: {
-                    left: `${piece.pos.x / COLS * 100}%`,
-                    top: `${(ROWS - 1 - piece.pos.y) / ROWS * 100}%`
-                  },
+                  animate: { x: cellX(piece.pos.x), y: cellY(piece.pos.y) },
                   transition: pieceTransition,
+                  onAnimationStart: () => setMoving(piece.id, true),
+                  onAnimationComplete: () => setMoving(piece.id, false),
                   style: {
                     position: "absolute",
+                    left: 0,
+                    top: 0,
                     width: `${100 / COLS}%`,
-                    height: `${100 / ROWS}%`
+                    height: `${100 / ROWS}%`,
+                    willChange: "transform"
                   },
                   className: "flex items-center justify-center pointer-events-auto",
                   children: /* @__PURE__ */ jsx(
@@ -671,6 +859,7 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
                       piece,
                       isSelected: selectedPieceId === piece.id,
                       hasBall: boardState.ball.holderId === piece.id,
+                      isMoving: movingIds.has(piece.id),
                       onClick: (e) => handlePieceClick(piece.id, piece.pos.x, piece.pos.y, e)
                     }
                   )
@@ -679,23 +868,23 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
               );
             }) }),
             (() => {
-              const targetX = ball.pos.x / COLS * 100;
-              const targetY = (ROWS - 1 - ball.pos.y) / ROWS * 100;
+              const targetX = cellX(ball.pos.x);
+              const targetY = cellY(ball.pos.y);
               let animate;
               let transition;
               if (isPickupOnMove && prevBall) {
-                const prevX = prevBall.pos.x / COLS * 100;
-                const prevY = (ROWS - 1 - prevBall.pos.y) / ROWS * 100;
+                const prevX = cellX(prevBall.pos.x);
+                const prevY = cellY(prevBall.pos.y);
                 const pulseStart = Math.max(0.05, pickupProportion - 0.06);
                 animate = {
-                  left: [`${prevX}%`, `${prevX}%`, `${prevX}%`, `${targetX}%`],
-                  top: [`${prevY}%`, `${prevY}%`, `${prevY}%`, `${targetY}%`],
+                  x: [prevX, prevX, prevX, targetX],
+                  y: [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 };
+                animate = { x: targetX, y: targetY, scale: 1 };
+                transition = ball.holderId ? PIECE_SLIDE : BALL_SLIDE;
               }
               return /* @__PURE__ */ jsx(
                 motion.div,
@@ -705,9 +894,12 @@ function GameBoard({ userSide, showCoordinates = false, keyboardNav = true }) {
                   transition,
                   style: {
                     position: "absolute",
+                    left: 0,
+                    top: 0,
                     width: `${100 / COLS}%`,
                     height: `${100 / ROWS}%`,
-                    zIndex: 50
+                    zIndex: 50,
+                    willChange: "transform"
                   },
                   className: "flex items-center justify-center pointer-events-none",
                   children: /* @__PURE__ */ jsx("div", { className: "w-[60%] h-[60%]", children: /* @__PURE__ */ jsx(Football, {}) })
@@ -1268,77 +1460,31 @@ var COLS2 = 9;
 var ROWS2 = 12;
 function StaticGameBoard() {
   const boardState = useMemo(() => getInitialBoardState("white"), []);
-  const renderSquares = () => {
-    const squares = [];
-    for (let y = ROWS2 - 1; y >= 0; y--) {
-      for (let x = 0; x < COLS2; x++) {
-        const isGoalArea = x >= 2 && x <= 6 && (y >= 0 && y <= 1 || y >= 10 && y <= 11);
-        const isEven = (x + y) % 2 === 0;
-        squares.push(
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "relative aspect-square w-full",
-                isEven ? "bg-[#2d5a27]" : "bg-[#356a2d]",
-                isGoalArea && "bg-[#1a3a18] ring-1 ring-inset ring-emerald-500/30"
-              )
-            },
-            `${x}-${y}`
-          )
-        );
-      }
-    }
-    return squares;
-  };
   return /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden rounded-xl shadow-2xl border-4 border-[#1a3317] bg-[#1a3317]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative", style: { containerType: "inline-size" }, children: [
-      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-9 gap-[1px]", children: renderSquares() }),
-      /* @__PURE__ */ 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__ */ jsx("rect", { x: "2", y: "0", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-            /* @__PURE__ */ jsx("rect", { x: "2", y: "10", width: "5", height: "2", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-            /* @__PURE__ */ jsx("line", { x1: "0", y1: "6", x2: "9", y2: "6", stroke: "white", strokeOpacity: "0.35", strokeWidth: "0.05" }),
-            /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "6", r: "1.5", fill: "none", stroke: "white", strokeOpacity: "0.3", strokeWidth: "0.05" }),
-            /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "6", r: "0.12", fill: "white", fillOpacity: "0.5" }),
-            /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "1.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
-            /* @__PURE__ */ jsx("circle", { cx: "4.5", cy: "10.5", r: "0.1", fill: "white", fillOpacity: "0.5" }),
-            /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "absolute inset-0 pointer-events-none", children: boardState.pieces.map((piece) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: `${piece.pos.x / COLS2 * 100}%`,
-            top: `${(ROWS2 - 1 - piece.pos.y) / ROWS2 * 100}%`,
-            width: `${100 / COLS2}%`,
-            height: `${100 / ROWS2}%`
-          },
-          className: "flex items-center justify-center",
-          children: /* @__PURE__ */ jsx(
-            GamePiece,
-            {
-              piece,
-              isSelected: false,
-              hasBall: boardState.ball.holderId === piece.id,
-              onClick: () => {
-              }
-            }
-          )
+    /* @__PURE__ */ jsx(PitchSurface, { children: /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pointer-events-none", children: boardState.pieces.map((piece) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: `${piece.pos.x / COLS2 * 100}%`,
+          top: `${(ROWS2 - 1 - piece.pos.y) / ROWS2 * 100}%`,
+          width: `${100 / COLS2}%`,
+          height: `${100 / ROWS2}%`
         },
-        piece.id
-      )) })
-    ] }),
+        className: "flex items-center justify-center",
+        children: /* @__PURE__ */ jsx(
+          GamePiece,
+          {
+            piece,
+            isSelected: false,
+            hasBall: boardState.ball.holderId === piece.id,
+            onClick: () => {
+            }
+          }
+        )
+      },
+      piece.id
+    )) }) }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -1544,6 +1690,6 @@ function HistoryChip({ lastMove, onClick, className }) {
   );
 }
 
-export { ActionPoints, Avatar, AvatarFallback, AvatarImage, Button, ConfirmDialog, EventToast, Football, GAME_I18N_KEYS, GameBoard, GameControls, GameI18nProvider, GamePiece, MiniScoreboard, MobileHistory, MoveHistory, Scoreboard, SelectedPieceDetail, StaticGameBoard, TurnBanner, cn, useGameT };
+export { ActionPoints, Avatar, AvatarFallback, AvatarImage, BallHolderChip, Button, ConfirmDialog, EventToast, Football, GAME_I18N_KEYS, GOAL_AREA_SHADE_CLASS, GameBoard, GameControls, GameI18nProvider, GamePiece, GrassOverlay, KeyboardShortcutsList, MiniScoreboard, MobileHistory, MoveHistory, PITCH_COLS, PITCH_ROWS, PitchMarkings, PitchSurface, Scoreboard, SelectedPieceDetail, StaticGameBoard, TurnBanner, cn, isGoalAreaSquare, pitchSquareClass, useGameT };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map