@scriptonita/chess-football-ui 0.1.1

package/dist/index.cjs

@@ -0,0 +1,1126 @@
+'use strict';
+
+var chunkJ2TBQPPC_cjs = require('./chunk-J2TBQPPC.cjs');
+var chessFootballEngine = require('@scriptonita/chess-football-engine');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var framerMotion = require('framer-motion');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var PIECE_ICON = {
+  king: lucideReact.ChessKing,
+  queen: lucideReact.ChessQueen,
+  rook: lucideReact.ChessRook,
+  bishop: lucideReact.ChessBishop,
+  knight: lucideReact.ChessKnight
+};
+var PieceIcon = ({ type }) => {
+  const Icon = PIECE_ICON[type] ?? lucideReact.ShieldQuestion;
+  const style = {
+    width: "clamp(16px, 7.4cqw, 44px)",
+    height: "clamp(16px, 7.4cqw, 44px)",
+    filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.35))"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Icon, { style, strokeWidth: 1.75, "aria-hidden": "true" });
+};
+var WHITE_PIECE_STYLE = {
+  background: "radial-gradient(circle at 30% 25%, #ffffff 0%, #f4f4f5 55%, #d4d4d8 100%)",
+  boxShadow: [
+    "inset 0 1.5px 1px rgba(255,255,255,0.95)",
+    "inset 0 -2px 3px rgba(0,0,0,0.18)",
+    "0 4px 6px rgba(0,0,0,0.45)",
+    "0 1px 2px rgba(0,0,0,0.35)"
+  ].join(", "),
+  border: "1px solid rgba(0,0,0,0.18)",
+  color: "#09090b"
+};
+var BLACK_PIECE_STYLE = {
+  background: "radial-gradient(circle at 30% 25%, #52525b 0%, #1c1c1f 55%, #050507 100%)",
+  boxShadow: [
+    "inset 0 1.5px 1px rgba(255,255,255,0.22)",
+    "inset 0 -2px 3px rgba(0,0,0,0.6)",
+    "0 4px 6px rgba(0,0,0,0.55)",
+    "0 1px 2px rgba(0,0,0,0.4)"
+  ].join(", "),
+  border: "1px solid rgba(0,0,0,0.55)",
+  color: "#fafafa"
+};
+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;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      onClick,
+      style,
+      className: cn(
+        "relative w-[88%] h-[88%] flex items-center justify-center rounded-full cursor-pointer z-10 transition-transform",
+        isSelected && "ring-4 ring-primary scale-110 z-30",
+        piece.hasMovedThisTurn && "opacity-70"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PieceIcon, { type: piece.type }),
+        hasBall && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full ring-2 ring-orange-400 pointer-events-none" }),
+        isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-full animate-pulse ring-2 ring-yellow-400 ring-offset-2 ring-offset-transparent" })
+      ]
+    }
+  );
+}
+var Football = ({ className }) => {
+  const bodyId = React.useId();
+  const hiId = `${bodyId}-h`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 100 100",
+      className: cn("w-full h-full drop-shadow-md", className),
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: bodyId, cx: "36%", cy: "32%", r: "68%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#f0f9ff" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "55%", stopColor: "#bae6fd" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#38bdf8" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: hiId, cx: "32%", cy: "28%", r: "22%", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "0.85" }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "#ffffff", stopOpacity: "0" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "47", fill: `url(#${bodyId})`, stroke: "#18181b", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { stroke: "#18181b", strokeWidth: "1.4", strokeLinecap: "round", fill: "none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "50", y1: "41", x2: "50", y2: "30" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "41.44", y1: "47.22", x2: "30.97", y2: "43.82" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "44.71", y1: "57.28", x2: "38.24", y2: "66.18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "55.29", y1: "57.28", x2: "61.76", y2: "66.18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "58.56", y1: "47.22", x2: "69.03", y2: "43.82" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "50", y1: "15.5", x2: "50", y2: "4.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "17.18", y1: "39.34", x2: "6.71", y2: "35.94" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "29.72", y1: "77.91", x2: "23.25", y2: "86.81" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "70.28", y1: "77.91", x2: "76.75", y2: "86.81" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "82.82", y1: "39.34", x2: "93.29", y2: "35.94" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "#18181b", stroke: "#18181b", strokeWidth: "0.6", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "50,41 41.44,47.22 44.71,57.28 55.29,57.28 58.56,47.22" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "50,30 57.61,24.47 54.70,15.53 45.30,15.53 42.39,24.47" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "30.97,43.82 28.06,34.88 18.66,34.88 15.75,43.82 23.36,49.35" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "38.24,66.18 29.84,66.18 25.93,75.12 33.54,80.65 41.15,75.12" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "61.76,66.18 58.85,75.12 66.46,80.65 74.07,75.12 71.16,66.18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "69.03,43.82 76.64,49.35 84.25,43.82 81.34,34.88 71.94,34.88" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "50", cy: "50", r: "47", fill: `url(#${hiId})`, pointerEvents: "none" })
+      ]
+    }
+  );
+};
+var COLS = 9;
+var ROWS = 12;
+var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+function GameBoard({ userSide, showCoordinates = false, keyboardNav = false }) {
+  const {
+    boardState,
+    selectedPieceId,
+    setSelectedPieceId,
+    interactionMode,
+    setInteractionMode,
+    movePiece,
+    passBall
+  } = chunkJ2TBQPPC_cjs.useGameStore();
+  const [cursor, setCursor] = React.useState(null);
+  const prevBallRef = React.useRef(boardState?.ball);
+  const prevBall = prevBallRef.current;
+  React.useEffect(() => {
+    prevBallRef.current = boardState?.ball;
+  });
+  const validMoves = React.useMemo(() => {
+    if (!boardState) return [];
+    const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
+    if (sp && interactionMode === "move" && !sp.hasMovedThisTurn) {
+      return chessFootballEngine.getValidMoves(sp, boardState);
+    }
+    return [];
+  }, [boardState, selectedPieceId, interactionMode]);
+  const validPasses = React.useMemo(() => {
+    if (!boardState) return [];
+    const sp = boardState.pieces.find((p) => p.id === selectedPieceId);
+    if (sp && interactionMode === "pass") {
+      return chessFootballEngine.getValidPasses(sp, boardState);
+    }
+    return [];
+  }, [boardState, selectedPieceId, interactionMode]);
+  if (!boardState) return null;
+  const lastMove = boardState.lastMove;
+  const ball = boardState.ball;
+  const ballMoved = !!prevBall && (prevBall.pos.x !== ball.pos.x || prevBall.pos.y !== ball.pos.y);
+  const isPickupOnMove = !!prevBall && !prevBall.holderId && !!ball.holderId && lastMove?.type === "move" && lastMove?.playerId === ball.holderId && ballMoved;
+  const PICKUP_DURATION = 0.5;
+  const pickupCarrierId = isPickupOnMove ? ball.holderId : null;
+  let pickupProportion = 0.5;
+  if (isPickupOnMove && prevBall && lastMove?.from) {
+    const totalSteps = Math.max(
+      Math.abs(lastMove.to.x - lastMove.from.x),
+      Math.abs(lastMove.to.y - lastMove.from.y)
+    );
+    const stepsToBall = Math.max(
+      Math.abs(prevBall.pos.x - lastMove.from.x),
+      Math.abs(prevBall.pos.y - lastMove.from.y)
+    );
+    pickupProportion = totalSteps > 0 ? Math.min(0.85, Math.max(0.15, stepsToBall / totalSteps)) : 0.5;
+  }
+  const handleSquareClick = (x, y) => {
+    if (interactionMode === "move" && selectedPieceId) {
+      if (validMoves.some((m) => m.x === x && m.y === y)) {
+        movePiece(selectedPieceId, { x, y });
+      }
+    } else if (interactionMode === "pass" && selectedPieceId) {
+      if (validPasses.some((p) => p.x === x && p.y === y)) {
+        passBall({ x, y });
+      }
+    }
+  };
+  const handlePieceClick = (pieceId, x, y, e) => {
+    e.stopPropagation();
+    const pieceAt = boardState.pieces.find((p) => p.id === pieceId);
+    if (!pieceAt) return;
+    const isValidDest = validMoves.some((m) => m.x === x && m.y === y) || validPasses.some((p) => p.x === x && p.y === y);
+    if (isValidDest) {
+      handleSquareClick(x, y);
+    } else if (boardState.turn === pieceAt.side && userSide === pieceAt.side) {
+      if (selectedPieceId === pieceAt.id) {
+        if (boardState.ball.holderId === pieceAt.id) {
+          setInteractionMode(interactionMode === "move" ? "pass" : "move");
+        }
+      } else {
+        setSelectedPieceId(pieceAt.id);
+        setInteractionMode("move");
+      }
+    }
+  };
+  const defaultCursor = () => {
+    const sel = boardState.pieces.find((p) => p.id === selectedPieceId);
+    return sel ? { ...sel.pos } : { ...boardState.ball.pos };
+  };
+  const activate = (x, y) => {
+    const pieceAt = boardState.pieces.find((p) => p.pos.x === x && p.pos.y === y);
+    if (pieceAt) {
+      handlePieceClick(pieceAt.id, x, y, { stopPropagation() {
+      } });
+    } else {
+      handleSquareClick(x, y);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (!keyboardNav) return;
+    const step = (dx, dy) => {
+      e.preventDefault();
+      setCursor((c) => {
+        const base = c ?? defaultCursor();
+        return { x: clamp(base.x + dx, 0, COLS - 1), y: clamp(base.y + dy, 0, ROWS - 1) };
+      });
+    };
+    switch (e.key) {
+      case "ArrowUp":
+        step(0, 1);
+        break;
+      // visually up = higher rank (y grows toward the top)
+      case "ArrowDown":
+        step(0, -1);
+        break;
+      case "ArrowLeft":
+        step(-1, 0);
+        break;
+      case "ArrowRight":
+        step(1, 0);
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const c = cursor ?? defaultCursor();
+        setCursor(c);
+        activate(c.x, c.y);
+        break;
+      }
+      case "m":
+      case "M":
+        setInteractionMode("move");
+        break;
+      case "p":
+      case "P":
+        setInteractionMode("pass");
+        break;
+      case "Escape":
+        setSelectedPieceId(null);
+        setInteractionMode(null);
+        break;
+    }
+  };
+  const renderSquares = () => {
+    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 isValidDest = validMoves.some((m) => m.x === x && m.y === y) || validPasses.some((p) => p.x === x && p.y === y);
+        const pieceAt = boardState.pieces.find((p) => p.pos.x === x && p.pos.y === y);
+        const isCursor = keyboardNav && cursor?.x === x && cursor?.y === y;
+        squares.push(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onClick: () => handleSquareClick(x, y),
+              className: cn(
+                "relative aspect-square w-full flex items-center justify-center cursor-pointer",
+                isEven ? "bg-[#2d5a27]" : "bg-[#356a2d]",
+                isGoalArea && "bg-[#1a3a18] ring-1 ring-inset ring-emerald-500/30",
+                isValidDest && (interactionMode === "move" ? "ring-2 ring-inset ring-yellow-400/50 bg-yellow-400/10" : "ring-2 ring-inset ring-sky-400/50 bg-sky-400/10")
+              ),
+              children: [
+                isValidDest && !pieceAt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
+                  "w-3 h-3 rounded-full",
+                  interactionMode === "move" ? "bg-yellow-400/40" : "bg-sky-400/40"
+                ) }),
+                isCursor && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 ring-2 ring-inset ring-white pointer-events-none z-20", "aria-hidden": "true" })
+              ]
+            },
+            `${x}-${y}`
+          )
+        );
+      }
+    }
+    return squares;
+  };
+  const board = /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "w-full max-w-[500px] mx-auto overflow-hidden rounded-xl shadow-2xl border-4 border-[#1a3317] bg-[#1a3317]",
+        keyboardNav && "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent-green focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary"
+      ),
+      ...keyboardNav ? {
+        tabIndex: 0,
+        role: "application",
+        "aria-label": "Game board \u2014 arrow keys to move the cursor, Enter to act",
+        onKeyDown: handleKeyDown,
+        onFocus: () => setCursor((c) => c ?? defaultCursor())
+      } : {},
+      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,
+              {
+                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"
+            );
+          })()
+        ] })
+      ] })
+    }
+  );
+  if (!showCoordinates) return board;
+  const ranksTopToBottom = [...chessFootballEngine.RANK_LABELS].reverse();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-[540px] mx-auto", "aria-hidden": "false", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "grid gap-1 select-none",
+      style: {
+        gridTemplateColumns: "20px 1fr 20px",
+        gridTemplateRows: "14px 1fr 14px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(FileRow, { files: chessFootballEngine.FILE_LABELS }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(RankColumn, { ranks: ranksTopToBottom }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: board }),
+        /* @__PURE__ */ jsxRuntime.jsx(RankColumn, { ranks: ranksTopToBottom }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx(FileRow, { files: chessFootballEngine.FILE_LABELS }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true" })
+      ]
+    }
+  ) });
+}
+function FileRow({ files }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-9 gap-[1px] px-[2px]", children: files.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex items-center justify-center font-mono text-[9px] text-fg-muted/80 uppercase tracking-[0.5px]",
+      children: f
+    },
+    f
+  )) });
+}
+function RankColumn({ ranks }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-rows-12 gap-[1px] py-[2px]", children: ranks.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "flex items-center justify-center font-mono text-[9px] text-fg-muted/80 tabular-nums",
+      children: r
+    },
+    r
+  )) });
+}
+function Avatar({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative w-9 h-9 rounded-full overflow-hidden shrink-0", className), children });
+}
+function AvatarImage({ src, alt, className }) {
+  if (!src) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: alt ?? "", className: cn("w-full h-full object-cover", className) });
+}
+function AvatarFallback({ className, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute inset-0 flex items-center justify-center text-xs font-semibold", className), children });
+}
+var fallback = (key) => key;
+var GameI18nContext = React.createContext(fallback);
+function GameI18nProvider({ t, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(GameI18nContext.Provider, { value: t, children });
+}
+function useGameT() {
+  return React.useContext(GameI18nContext);
+}
+function ActionPoints({ total, remaining, size = 20, className, kingMustRelease }) {
+  const t = useGameT();
+  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
+      );
+    }
+    return /* @__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
+    );
+  }) });
+}
+function initials(name) {
+  return (name?.split(" ").map((w) => w[0]).join("").toUpperCase() || "?").slice(0, 2);
+}
+function Scoreboard({
+  creatorUsername,
+  opponentUsername,
+  creatorAvatarUrl,
+  opponentAvatarUrl,
+  userSide
+}) {
+  const t = useGameT();
+  const { boardState } = chunkJ2TBQPPC_cjs.useGameStore();
+  if (!boardState?.score) return null;
+  const { score, turn, actionPoints, kingMustRelease } = boardState;
+  const myScore = userSide === "white" ? score.white : score.black;
+  const rivalScore = userSide === "white" ? score.black : score.white;
+  const myName = userSide === "white" ? creatorUsername : opponentUsername;
+  const rivalName = userSide === "white" ? opponentUsername : creatorUsername;
+  const myAvatar = userSide === "white" ? creatorAvatarUrl : opponentAvatarUrl;
+  const rivalAvatar = userSide === "white" ? opponentAvatarUrl : creatorAvatarUrl;
+  const myTeam = userSide === "white" ? t("teamWhite") : t("teamBlack");
+  const rivalTeam = userSide === "white" ? t("teamBlack") : t("teamWhite");
+  const isMyTurn = turn === userSide;
+  const myKingMustRelease = isMyTurn && kingMustRelease === turn;
+  const rivalKingMustRelease = !isMyTurn && kingMustRelease === turn;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-secondary flex items-center justify-between px-5 py-2.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PlayerInfo,
+      {
+        name: myName,
+        team: myTeam,
+        avatarUrl: myAvatar,
+        isActive: isMyTurn,
+        actionPoints: isMyTurn ? actionPoints : 0,
+        kingMustRelease: myKingMustRelease,
+        align: "left"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-anton text-[32px] leading-none text-fg-primary tabular-nums", children: myScore }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-anton text-2xl text-fg-muted", children: "\u2014" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-anton text-[32px] leading-none text-fg-primary tabular-nums", children: rivalScore })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      PlayerInfo,
+      {
+        name: rivalName,
+        team: rivalTeam,
+        avatarUrl: rivalAvatar,
+        isActive: !isMyTurn,
+        actionPoints: !isMyTurn ? actionPoints : 0,
+        kingMustRelease: rivalKingMustRelease,
+        align: "right"
+      }
+    )
+  ] });
+}
+function PlayerInfo({ name, team, avatarUrl, isActive, actionPoints, kingMustRelease, align }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2.5", align === "right" && "flex-row-reverse"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn(
+      "w-9 h-9 border-2 transition-colors duration-300",
+      isActive ? "border-accent-green" : "border-border-subtle"
+    ), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: avatarUrl, alt: name, className: "object-cover" }),
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { className: "bg-bg-surface-elevated text-fg-secondary text-xs font-semibold", children: initials(name) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", align === "right" && "items-end"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+        "font-inter text-[13px] font-semibold leading-none transition-colors duration-300",
+        isActive ? "text-fg-primary" : "text-fg-muted"
+      ), children: name }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-1", align === "right" && "flex-row-reverse"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase", children: team }),
+        isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-accent-green animate-pulse", "aria-hidden": "true" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ActionPoints,
+        {
+          total: 5,
+          remaining: actionPoints,
+          size: 12,
+          kingMustRelease,
+          className: "gap-0.5"
+        }
+      )
+    ] })
+  ] });
+}
+function MiniScoreboard({
+  creatorUsername,
+  opponentUsername,
+  userSide,
+  className
+}) {
+  const t = useGameT();
+  const { boardState } = chunkJ2TBQPPC_cjs.useGameStore();
+  if (!boardState?.score) return null;
+  const { score, turn } = boardState;
+  const myScore = userSide === "white" ? score.white : score.black;
+  const rivalScore = userSide === "white" ? score.black : score.white;
+  const myName = userSide === "white" ? creatorUsername : opponentUsername;
+  const rivalName = userSide === "white" ? opponentUsername : creatorUsername;
+  const myTeam = userSide === "white" ? t("teamWhite") : t("teamBlack");
+  const rivalTeam = userSide === "white" ? t("teamBlack") : t("teamWhite");
+  const isMyTurn = turn === userSide;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "w-full max-w-[540px] rounded-xl bg-bg-surface border border-border-subtle",
+        "flex items-center justify-between gap-4 px-5 py-3",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SideCell, { name: myName, team: myTeam, score: myScore, isActive: isMyTurn, align: "left" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-anton text-base text-fg-muted uppercase tracking-[2px]", "aria-hidden": "true", children: "vs" }),
+        /* @__PURE__ */ jsxRuntime.jsx(SideCell, { name: rivalName, team: rivalTeam, score: rivalScore, isActive: !isMyTurn, align: "right" })
+      ]
+    }
+  );
+}
+function SideCell({ name, team, score, isActive, align }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col min-w-0", align === "right" ? "items-end" : "items-start"), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
+      "font-mono text-[10px] uppercase tracking-[0.5px] truncate max-w-[160px]",
+      isActive ? "text-fg-secondary" : "text-fg-muted"
+    ), children: [
+      name,
+      " \xB7 ",
+      team
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
+      "font-anton text-[32px] leading-none tabular-nums",
+      isActive ? "text-fg-primary" : "text-fg-secondary"
+    ), children: score })
+  ] });
+}
+var VARIANT = {
+  primary: "bg-accent-green text-fg-primary font-anton tracking-widest rounded-md hover:bg-accent-green-light active:bg-accent-green-dark",
+  secondary: "bg-bg-surface text-fg-primary font-inter font-semibold rounded-md border border-border-subtle hover:bg-bg-surface-elevated active:bg-bg-secondary",
+  ghost: "bg-transparent text-fg-secondary font-inter font-medium rounded-md hover:text-fg-primary active:text-fg-muted",
+  destructive: "bg-danger/10 text-danger font-inter font-semibold rounded-md border border-danger hover:bg-danger/20 active:bg-danger/30"
+};
+var SIZE = {
+  default: "h-12 min-h-[44px] px-6 text-base",
+  sm: "h-9 min-h-[36px] px-4 text-sm",
+  lg: "h-13 min-h-[52px] px-8 text-lg",
+  icon: "h-11 w-11 min-h-[44px]"
+};
+var Button = React__namespace.forwardRef(
+  ({ className, variant = "primary", size = "default", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-all duration-150",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-green focus-visible:ring-offset-2 focus-visible:ring-offset-bg-primary",
+        "disabled:pointer-events-none disabled:opacity-40",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+        VARIANT[variant],
+        SIZE[size],
+        className
+      ),
+      ...props
+    }
+  )
+);
+Button.displayName = "Button";
+function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, onConfirm, onCancel }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm",
+      role: "dialog",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "bg-bg-surface border border-border-subtle rounded-xl p-6 mx-4 max-w-sm w-full",
+            "flex flex-col gap-4 shadow-2xl"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "font-anton text-lg text-fg-primary uppercase tracking-wide", children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-inter text-sm text-fg-secondary", children: description }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", className: "flex-1", onClick: onCancel, children: cancelLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", className: "flex-1", onClick: onConfirm, children: confirmLabel })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+function GameControls({ isMyTurn }) {
+  const {
+    boardState,
+    selectedPieceId,
+    interactionMode,
+    setInteractionMode,
+    endTurn
+  } = chunkJ2TBQPPC_cjs.useGameStore();
+  const t = useGameT();
+  const [showEndTurnConfirm, setShowEndTurnConfirm] = React.useState(false);
+  if (!boardState) return null;
+  const actionPoints = boardState.actionPoints;
+  const selectedPiece = boardState.pieces.find((p) => p.id === selectedPieceId);
+  const hasBall = selectedPiece && boardState.ball.holderId === selectedPiece.id;
+  const canPass = hasBall && actionPoints > 0;
+  const canMove = actionPoints > 0 && !selectedPiece?.hasMovedThisTurn;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-bg-secondary flex flex-col gap-3 px-5 pt-3 pb-5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isMyTurn && /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        initial: { opacity: 0, y: 8 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: 8 },
+        className: "flex gap-2",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setInteractionMode("move"),
+              disabled: !canMove,
+              className: cn(
+                "flex-1 flex items-center justify-center gap-2 h-11 rounded-md border font-inter text-sm font-semibold",
+                "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-move-highlight",
+                "disabled:opacity-40 disabled:cursor-not-allowed",
+                interactionMode === "move" ? "bg-move-highlight/10 border-move-highlight text-move-highlight" : "bg-bg-surface border-border-subtle text-move-highlight hover:bg-move-highlight/5"
+              ),
+              "aria-pressed": interactionMode === "move",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Move, { size: 16, strokeWidth: 2 }),
+                t("move")
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => setInteractionMode("pass"),
+              disabled: !canPass,
+              className: cn(
+                "flex-1 flex items-center justify-center gap-2 h-11 rounded-md border font-inter text-sm font-semibold",
+                "transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-pass-highlight",
+                "disabled:opacity-40 disabled:cursor-not-allowed",
+                interactionMode === "pass" ? "bg-pass-highlight/10 border-pass-highlight text-pass-highlight" : "bg-bg-surface border-border-subtle text-pass-highlight hover:bg-pass-highlight/5"
+              ),
+              "aria-pressed": interactionMode === "pass",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(Football, {}) }),
+                t("pass")
+              ]
+            }
+          )
+        ]
+      },
+      "action-btns"
+    ) }),
+    isMyTurn && /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        variant: "primary",
+        size: "default",
+        className: "w-full gap-2 tracking-[1.5px]",
+        onClick: () => setShowEndTurnConfirm(true),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Flag, { size: 16, strokeWidth: 2 }),
+          t("endTurn")
+        ]
+      }
+    ),
+    !isMyTurn && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-11 rounded-md bg-bg-surface border border-border-subtle", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-inter text-sm text-fg-muted", children: t("waitingRival") }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmDialog,
+      {
+        open: showEndTurnConfirm,
+        title: t("endTurnConfirm"),
+        description: t("endTurnConfirmDescription", { count: actionPoints }),
+        confirmLabel: t("endTurnConfirmYes"),
+        cancelLabel: t("endTurnKeepPlaying"),
+        onConfirm: () => {
+          endTurn();
+          setShowEndTurnConfirm(false);
+        },
+        onCancel: () => setShowEndTurnConfirm(false)
+      }
+    )
+  ] });
+}
+var PIECE_ICON2 = {
+  king: lucideReact.ChessKing,
+  queen: lucideReact.ChessQueen,
+  rook: lucideReact.ChessRook,
+  bishop: lucideReact.ChessBishop,
+  knight: lucideReact.ChessKnight
+};
+function SelectedPieceDetail({ isMyTurn, className }) {
+  const t = useGameT();
+  const { boardState, selectedPieceId } = chunkJ2TBQPPC_cjs.useGameStore();
+  if (!boardState) return null;
+  const piece = boardState.pieces.find((p) => p.id === selectedPieceId);
+  if (!piece) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "rounded-xl bg-bg-surface/40 border border-dashed border-border-subtle",
+          "px-4 py-3 flex items-center gap-3",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ShieldQuestion, { size: 20, className: "text-fg-muted shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[11px] text-fg-muted", children: t("selectedPiece.empty") })
+        ]
+      }
+    );
+  }
+  const Icon = PIECE_ICON2[piece.type] ?? lucideReact.ShieldQuestion;
+  const longName = t(`pieces.${chessFootballEngine.LONG_KEY[piece.type]}`);
+  const square = chessFootballEngine.squareName(piece.pos);
+  const hasBall = boardState.ball.holderId === piece.id;
+  const movedThisTurn = piece.hasMovedThisTurn && isMyTurn;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl bg-bg-surface border border-border-subtle",
+        "px-4 py-3 flex items-center gap-4",
+        className
+      ),
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": `${longName} ${square}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "w-12 h-12 shrink-0 rounded-full flex items-center justify-center",
+              piece.side === "white" ? "bg-white text-black" : "bg-fg-primary/90 text-bg-primary"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 26, strokeWidth: 1.75, "aria-hidden": "true" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-anton text-base text-fg-primary leading-none uppercase tracking-[0.5px]", children: longName }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[11px] text-fg-muted mt-1", children: t("selectedPiece.atSquare", { square }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end gap-1 shrink-0", children: [
+          hasBall && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 font-mono text-[10px] text-pass-highlight uppercase tracking-[0.5px]", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3 h-3 inline-flex", children: /* @__PURE__ */ jsxRuntime.jsx(Football, {}) }),
+            t("selectedPiece.hasBall")
+          ] }),
+          movedThisTurn && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[10px] text-fg-muted uppercase tracking-[0.5px]", children: t("selectedPiece.alreadyMoved") })
+        ] })
+      ]
+    }
+  );
+}
+function MoveHistory({ scrollable = true, limit, className }) {
+  const t = useGameT();
+  const { boardState } = chunkJ2TBQPPC_cjs.useGameStore();
+  const scrollRef = React.useRef(null);
+  const history = boardState?.moveHistory ?? [];
+  const visible = limit ? history.slice(-limit) : history;
+  const ordered = [...visible].reverse();
+  React.useEffect(() => {
+    if (!scrollable) return;
+    if (scrollRef.current) scrollRef.current.scrollTop = 0;
+  }, [history.length, scrollable]);
+  if (ordered.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: cn(
+          "font-mono text-[11px] text-fg-muted text-center py-3 px-3",
+          "bg-bg-surface/40 rounded-md",
+          className
+        ),
+        children: t("history.empty")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      ref: scrollRef,
+      "aria-label": t("history.title"),
+      className: cn(
+        "flex flex-col gap-1",
+        scrollable && "h-full overflow-y-auto pr-1",
+        className
+      ),
+      children: ordered.map((entry, i) => {
+        const isLatest = i === 0;
+        const prev = ordered[i - 1];
+        const showTurnDivider = !prev || prev.turnNumber !== entry.turnNumber;
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex flex-col gap-1", children: [
+          showTurnDivider && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-2 pt-1",
+              "aria-hidden": prev ? "true" : void 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[9px] tracking-[1px] text-fg-muted uppercase", children: t("history.turn", { n: entry.turnNumber }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 h-px bg-border-subtle/60" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(HistoryRow, { entry, isLatest })
+        ] }, `${entry.at}-${i}`);
+      })
+    }
+  );
+}
+function HistoryRow({ entry, isLatest }) {
+  const t = useGameT();
+  const fromSq = entry.from ? chessFootballEngine.squareName(entry.from) : "\u2014";
+  const toSq = chessFootballEngine.squareName(entry.to);
+  const pieceShort = t(`pieces.${chessFootballEngine.SHORT_KEY[entry.pieceType]}`);
+  let label;
+  switch (entry.type) {
+    case "pass":
+      label = t("history.pass", { to: toSq });
+      break;
+    case "tackle":
+      label = t("history.tackle", { to: toSq });
+      break;
+    case "interception":
+      label = t("history.interception", { to: toSq });
+      break;
+    case "goal":
+      label = t("history.goal", { from: fromSq, to: toSq });
+      break;
+    case "offside":
+      label = t("history.offside", { from: fromSq });
+      break;
+    case "move":
+    default:
+      label = t("history.move", { piece: pieceShort, from: fromSq, to: toSq });
+  }
+  const dotColor = entry.type === "goal" ? "bg-accent-green" : entry.type === "pass" ? "bg-pass-highlight" : entry.type === "interception" ? "bg-danger" : entry.type === "tackle" ? "bg-danger/80" : entry.type === "offside" ? "bg-warning" : "bg-move-highlight";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2.5 min-h-[32px] px-3 py-1.5 rounded-md",
+        "font-mono text-[11px] leading-tight",
+        isLatest ? "bg-bg-surface-elevated text-fg-primary" : "bg-bg-surface/60 text-fg-secondary",
+        entry.pieceSide === "black" && "border-l-2 border-l-fg-primary/30",
+        entry.pieceSide === "white" && "border-l-2 border-l-fg-primary/80"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("w-1.5 h-1.5 rounded-full shrink-0", dotColor)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: label }),
+        entry.type === "goal" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-anton text-[10px] tracking-[1px] uppercase text-accent-green", children: "GOL" })
+      ]
+    }
+  );
+}
+var COLS2 = 9;
+var ROWS2 = 12;
+function StaticGameBoard() {
+  const boardState = React.useMemo(() => chunkJ2TBQPPC_cjs.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-hidden rounded-xl shadow-2xl border-4 border-[#1a3317] bg-[#1a3317]", 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.jsx("div", { className: "absolute inset-0 pointer-events-none", children: boardState.pieces.map((piece) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            GamePiece,
+            {
+              piece,
+              isSelected: false,
+              hasBall: boardState.ball.holderId === piece.id,
+              onClick: () => {
+              }
+            }
+          )
+        },
+        piece.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          left: `${boardState.ball.pos.x / COLS2 * 100}%`,
+          top: `${(ROWS2 - 1 - boardState.ball.pos.y) / ROWS2 * 100}%`,
+          width: `${100 / COLS2}%`,
+          height: `${100 / ROWS2}%`,
+          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, {}) })
+      }
+    )
+  ] });
+}
+
+exports.ActionPoints = ActionPoints;
+exports.Avatar = Avatar;
+exports.AvatarFallback = AvatarFallback;
+exports.AvatarImage = AvatarImage;
+exports.Button = Button;
+exports.ConfirmDialog = ConfirmDialog;
+exports.Football = Football;
+exports.GameBoard = GameBoard;
+exports.GameControls = GameControls;
+exports.GameI18nProvider = GameI18nProvider;
+exports.GamePiece = GamePiece;
+exports.MiniScoreboard = MiniScoreboard;
+exports.MoveHistory = MoveHistory;
+exports.Scoreboard = Scoreboard;
+exports.SelectedPieceDetail = SelectedPieceDetail;
+exports.StaticGameBoard = StaticGameBoard;
+exports.cn = cn;
+exports.useGameT = useGameT;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map