@beta-gamer/react-native 0.1.22 → 0.1.23

package/dist/index.js

@@ -32,10 +32,15 @@ __export(index_exports, {
   TictactoeBoard: () => TictactoeBoard,
   Timer: () => Timer,
   useBetaGamer: () => useBetaGamer,
+  useCheckersGame: () => useCheckersGame,
+  useChessGame: () => useChessGame,
+  useConnect: () => useConnect,
+  useConnect4Game: () => useConnect4Game,
   useGameState: () => useGameState,
   useSession: () => useSession,
   useSocket: () => useSocket,
-  useTheme: () => useTheme
+  useTheme: () => useTheme,
+  useTictactoeGame: () => useTictactoeGame
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -97,13 +102,13 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
   });
   (0, import_react.useEffect)(() => {
     if (!connectSocket) return;
-    const s = (0, import_socket.io)(`${serverUrl}/${session.game}`, {
+    const s4 = (0, import_socket.io)(`${serverUrl}/${session.game}`, {
       auth: { token },
       path: socketPath,
       transports: ["websocket", "polling"]
     });
-    setSocket(s);
-    s.on("connect_error", (err) => {
+    setSocket(s4);
+    s4.on("connect_error", (err) => {
       const msg = err.message?.toLowerCase() ?? "";
       let reason = "Unable to connect to the game server.";
       if (msg.includes("websocket") || msg.includes("transport")) reason = "Connection failed: server does not accept WebSocket connections.";
@@ -114,14 +119,14 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
       else if (err.message) reason = `Connection error: ${err.message}`;
       import_react_native.Alert.alert("Connection Error", `[Beta Gamer] ${reason}`);
     });
-    s.on("game:state", (state) => {
+    s4.on("game:state", (state) => {
       setGameState((prev) => ({ ...prev, ...state }));
     });
-    s.on("game:over", ({ winner, reason }) => {
+    s4.on("game:over", ({ winner, reason }) => {
       setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
     });
     return () => {
-      s.disconnect();
+      s4.disconnect();
       setSocket(null);
     };
   }, [token, serverUrl, socketPath, session.game]);
@@ -134,6 +139,8 @@ function useBetaGamer() {
 }
 
 // src/hooks/index.ts
+var import_react2 = require("react");
+var import_socket2 = require("socket.io-client");
 function useGameState() {
   return useBetaGamer().gameState;
 }
@@ -146,6 +153,26 @@ function useSocket() {
 function useTheme() {
   return useBetaGamer().theme;
 }
+function useConnect() {
+  const { token, serverUrl, session } = useBetaGamer();
+  const [socket, setSocket] = (0, import_react2.useState)(null);
+  const socketRef = (0, import_react2.useRef)(null);
+  (0, import_react2.useEffect)(() => {
+    const s4 = (0, import_socket2.io)(`${serverUrl}/${session.game}`, {
+      auth: { token },
+      path: "/socket.io",
+      transports: ["websocket", "polling"]
+    });
+    socketRef.current = s4;
+    setSocket(s4);
+    return () => {
+      s4.disconnect();
+      socketRef.current = null;
+      setSocket(null);
+    };
+  }, [token, serverUrl, session.game]);
+  return socket;
+}
 
 // src/components/PlayerCard.tsx
 var import_react_native2 = require("react-native");
@@ -163,14 +190,14 @@ function PlayerCard({ player, style, nameStyle, indicatorStyle }) {
 }
 
 // src/components/Timer.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_react_native3 = require("react-native");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Timer({ player, initialSeconds = 600, style, textStyle }) {
   const socket = useSocket();
   const { status } = useGameState();
-  const [seconds, setSeconds] = (0, import_react2.useState)(initialSeconds);
-  (0, import_react2.useEffect)(() => {
+  const [seconds, setSeconds] = (0, import_react3.useState)(initialSeconds);
+  (0, import_react3.useEffect)(() => {
     if (!socket) return;
     const handler = (clocks) => {
       if (clocks[player] !== void 0) setSeconds(clocks[player]);
@@ -180,73 +207,65 @@ function Timer({ player, initialSeconds = 600, style, textStyle }) {
       socket.off("game:clock", handler);
     };
   }, [socket, player]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (status !== "active") return;
-    const id = setInterval(() => setSeconds((s2) => Math.max(0, s2 - 1)), 1e3);
+    const id = setInterval(() => setSeconds((s5) => Math.max(0, s5 - 1)), 1e3);
     return () => clearInterval(id);
   }, [status]);
   const m = Math.floor(seconds / 60).toString().padStart(2, "0");
-  const s = (seconds % 60).toString().padStart(2, "0");
+  const s4 = (seconds % 60).toString().padStart(2, "0");
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native3.Text, { style: textStyle, children: [
     m,
     ":",
-    s
+    s4
   ] }) });
 }
 
 // src/components/chess/ChessBoard.tsx
-var import_react3 = require("react");
 var import_react_native4 = require("react-native");
+
+// src/components/chess/useChessGame.ts
+var import_react4 = require("react");
+var import_socket3 = require("socket.io-client");
 var import_chess = require("chess.js");
-var import_socket2 = require("socket.io-client");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var PIECES = {
-  p: { white: "\u2659", black: "\u265F" },
-  n: { white: "\u2658", black: "\u265E" },
-  b: { white: "\u2657", black: "\u265D" },
-  r: { white: "\u2656", black: "\u265C" },
-  q: { white: "\u2655", black: "\u265B" },
-  k: { white: "\u2654", black: "\u265A" }
-};
-function ChessBoard({ style, showAfkWarning = true, onLeave }) {
+function useChessGame() {
   const { token, serverUrl, session } = useBetaGamer();
   const myPlayer = session.players[0];
-  const socketRef = (0, import_react3.useRef)(null);
-  const roomIdRef = (0, import_react3.useRef)(null);
-  const myPlayerIdRef = (0, import_react3.useRef)(myPlayer?.id ?? "");
-  const afkTimerRef = (0, import_react3.useRef)(null);
-  const chessRef = (0, import_react3.useRef)(new import_chess.Chess());
-  const [fen, setFen] = (0, import_react3.useState)("start");
-  const [myColor, setMyColor] = (0, import_react3.useState)("white");
-  const [currentTurn, setCurrentTurn] = (0, import_react3.useState)(0);
-  const [players, setPlayers] = (0, import_react3.useState)([]);
-  const [clocks, setClocks] = (0, import_react3.useState)({ self: 600, opponent: 600 });
-  const [selected, setSelected] = (0, import_react3.useState)(null);
-  const [legalMoves, setLegalMoves] = (0, import_react3.useState)([]);
-  const [lastMove, setLastMove] = (0, import_react3.useState)(null);
-  const [gameOver, setGameOver] = (0, import_react3.useState)(false);
-  const [gameResult, setGameResult] = (0, import_react3.useState)(null);
-  const [afkWarning, setAfkWarning] = (0, import_react3.useState)(null);
-  const [promotionMove, setPromotionMove] = (0, import_react3.useState)(null);
-  const [moveHistory, setMoveHistory] = (0, import_react3.useState)([]);
-  if (session.game !== "chess") return null;
-  const isMyTurn = players.length > 0 ? myColor === "white" ? currentTurn === 0 : currentTurn === 1 : false;
-  (0, import_react3.useEffect)(() => {
-    const s = (0, import_socket2.io)(`${serverUrl}/chess`, {
+  const socketRef = (0, import_react4.useRef)(null);
+  const roomIdRef = (0, import_react4.useRef)(null);
+  const myPlayerIdRef = (0, import_react4.useRef)(myPlayer?.id ?? "");
+  const afkTimerRef = (0, import_react4.useRef)(null);
+  const chessRef = (0, import_react4.useRef)(new import_chess.Chess());
+  const [fen, setFen] = (0, import_react4.useState)("start");
+  const [myColor, setMyColor] = (0, import_react4.useState)("white");
+  const [currentTurn, setCurrentTurn] = (0, import_react4.useState)(0);
+  const [players, setPlayers] = (0, import_react4.useState)([]);
+  const [clocks, setClocks] = (0, import_react4.useState)({ self: 600, opponent: 600 });
+  const [selected, setSelected] = (0, import_react4.useState)(null);
+  const [legalMoves, setLegalMoves] = (0, import_react4.useState)([]);
+  const [lastMove, setLastMove] = (0, import_react4.useState)(null);
+  const [moveHistory, setMoveHistory] = (0, import_react4.useState)([]);
+  const [promotionMove, setPromotionMove] = (0, import_react4.useState)(null);
+  const [gameOver, setGameOver] = (0, import_react4.useState)(false);
+  const [gameResult, setGameResult] = (0, import_react4.useState)(null);
+  const [afkWarning, setAfkWarning] = (0, import_react4.useState)(null);
+  const [, forceUpdate] = (0, import_react4.useState)(0);
+  (0, import_react4.useEffect)(() => {
+    const s4 = (0, import_socket3.io)(`${serverUrl}/chess`, {
       auth: { token },
       path: "/socket.io",
       transports: ["websocket", "polling"]
     });
-    socketRef.current = s;
-    const join = () => s.emit("matchmaking:join", {
+    socketRef.current = s4;
+    const join = () => s4.emit("matchmaking:join", {
       username: myPlayer.displayName,
       playerId: myPlayer.id,
-      wantsBot: false,
+      wantsBot: session.matchType === "bot",
       sessionId: session.sessionId
     });
-    if (s.connected) join();
-    else s.once("connect", join);
-    s.on("game:started", (d) => {
+    if (s4.connected) join();
+    else s4.once("connect", join);
+    s4.on("game:started", (d) => {
       roomIdRef.current = d.roomId;
       myPlayerIdRef.current = d.playerId;
       setMyColor(d.color);
@@ -259,7 +278,7 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
         setClocks({ self: Math.floor((vals[0] ?? 6e5) / 1e3), opponent: Math.floor((vals[1] ?? 6e5) / 1e3) });
       }
     });
-    s.on("game:move:made", (d) => {
+    s4.on("game:move:made", (d) => {
       chessRef.current.load(d.fen);
       setFen(d.fen);
       setCurrentTurn(d.currentTurn ?? 0);
@@ -275,14 +294,14 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
       }
       setAfkWarning(null);
     });
-    s.on("timer:update", (d) => {
+    s4.on("timer:update", (d) => {
       if (!d.playerTimers) return;
       Object.entries(d.playerTimers).forEach(([id, ms]) => {
         if (id === myPlayerIdRef.current) setClocks((c) => ({ ...c, self: Math.floor(ms / 1e3) }));
         else setClocks((c) => ({ ...c, opponent: Math.floor(ms / 1e3) }));
       });
     });
-    s.on("chess:afk_warning", (d) => {
+    s4.on("chess:afk_warning", (d) => {
       setAfkWarning(d);
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
       afkTimerRef.current = setInterval(() => {
@@ -290,21 +309,21 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
           if (!prev || prev.secondsRemaining <= 1) {
             clearInterval(afkTimerRef.current);
             afkTimerRef.current = null;
-            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            if (roomIdRef.current) s4.emit("afk:check", { roomId: roomIdRef.current });
             return prev;
           }
           return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
         });
       }, 1e3);
     });
-    s.on("chess:afk_warning_cleared", () => {
+    s4.on("chess:afk_warning_cleared", () => {
       if (afkTimerRef.current) {
         clearInterval(afkTimerRef.current);
         afkTimerRef.current = null;
       }
       setAfkWarning(null);
     });
-    s.on("afk:status", (status) => {
+    s4.on("afk:status", (status) => {
       if (!status) {
         if (afkTimerRef.current) {
           clearInterval(afkTimerRef.current);
@@ -315,22 +334,31 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
         setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
       }
     });
-    s.on("game:over", (d) => {
+    s4.on("game:over", (d) => {
       setGameResult({ winner: d.winner ?? null, reason: d.reason });
       setTimeout(() => setGameOver(true), 400);
     });
     return () => {
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
-      s.disconnect();
+      s4.disconnect();
       socketRef.current = null;
     };
   }, [token, serverUrl]);
+  const isMyTurn = players.length > 0 ? myColor === "white" ? currentTurn === 0 : currentTurn === 1 : false;
+  const emitMove = (from, to, promotion) => {
+    if (!socketRef.current || !roomIdRef.current) return;
+    socketRef.current.emit("game:move", {
+      roomId: roomIdRef.current,
+      playerId: myPlayerIdRef.current,
+      move: promotion ? { from, to, promotion } : { from, to }
+    });
+  };
   const handleSquarePress = (square) => {
     if (gameOver || !isMyTurn) return;
-    const chess2 = chessRef.current;
+    const chess = chessRef.current;
     if (selected) {
       if (legalMoves.includes(square)) {
-        const piece = chess2.get(selected);
+        const piece = chess.get(selected);
         const toRank = square[1];
         if (piece?.type === "p" && (piece.color === "w" && toRank === "8" || piece.color === "b" && toRank === "1")) {
           setPromotionMove({ from: selected, to: square });
@@ -342,36 +370,83 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
         setSelected(null);
         setLegalMoves([]);
       } else {
-        const piece = chess2.get(square);
+        const piece = chess.get(square);
         const myColorChar = myColor === "white" ? "w" : "b";
         if (piece && piece.color === myColorChar) {
-          const moves = chess2.moves({ square, verbose: true });
           setSelected(square);
-          setLegalMoves(moves.map((m) => m.to));
+          setLegalMoves(chess.moves({ square, verbose: true }).map((m) => m.to));
         } else {
           setSelected(null);
           setLegalMoves([]);
         }
       }
     } else {
-      const piece = chess2.get(square);
+      const piece = chess.get(square);
       const myColorChar = myColor === "white" ? "w" : "b";
       if (piece && piece.color === myColorChar) {
-        const moves = chess2.moves({ square, verbose: true });
         setSelected(square);
-        setLegalMoves(moves.map((m) => m.to));
+        setLegalMoves(chess.moves({ square, verbose: true }).map((m) => m.to));
       }
     }
+    forceUpdate((n) => n + 1);
   };
-  const emitMove = (from, to, promotion) => {
-    if (!socketRef.current || !roomIdRef.current) return;
-    socketRef.current.emit("game:move", {
-      roomId: roomIdRef.current,
-      playerId: myPlayerIdRef.current,
-      move: promotion ? { from, to, promotion } : { from, to }
-    });
+  return {
+    socket: socketRef.current,
+    roomId: roomIdRef.current,
+    myPlayerId: myPlayerIdRef.current,
+    myColor,
+    fen,
+    currentTurn,
+    players,
+    clocks,
+    selected,
+    legalMoves,
+    lastMove,
+    moveHistory,
+    promotionMove,
+    gameOver,
+    gameResult,
+    afkWarning,
+    isMyTurn,
+    chess: chessRef.current,
+    handleSquarePress,
+    emitMove,
+    setPromotionMove
   };
-  const formatClock = (s) => `${Math.floor(s / 60).toString().padStart(2, "0")}:${(s % 60).toString().padStart(2, "0")}`;
+}
+
+// src/components/chess/ChessBoard.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PIECES = {
+  p: { white: "\u2659", black: "\u265F" },
+  n: { white: "\u2658", black: "\u265E" },
+  b: { white: "\u2657", black: "\u265D" },
+  r: { white: "\u2656", black: "\u265C" },
+  q: { white: "\u2655", black: "\u265B" },
+  k: { white: "\u2654", black: "\u265A" }
+};
+function ChessBoard({ style, layout = "board-only", showAfkWarning = true, onLeave }) {
+  const { session } = useBetaGamer();
+  if (session.game !== "chess") return null;
+  const game = useChessGame();
+  const {
+    myColor,
+    fen,
+    selected,
+    legalMoves,
+    lastMove,
+    promotionMove,
+    gameOver,
+    gameResult,
+    afkWarning,
+    isMyTurn,
+    chess,
+    handleSquarePress,
+    emitMove,
+    setPromotionMove
+  } = game;
+  const { session: { players: sessionPlayers } } = useBetaGamer();
+  const myPlayer = sessionPlayers[0];
   const boardSize = Math.min(import_react_native4.Dimensions.get("window").width, import_react_native4.Dimensions.get("window").height) - 32;
   const squareSize = boardSize / 8;
   const files = ["a", "b", "c", "d", "e", "f", "g", "h"];
@@ -380,8 +455,63 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
     files.reverse();
     ranks.reverse();
   }
-  const chess = chessRef.current;
-  const opponentName = players.find((p) => p.id !== myPlayerIdRef.current)?.username ?? "Waiting\u2026";
+  const board = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { width: boardSize, height: boardSize }, children: ranks.map((rank, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { flexDirection: "row" }, children: files.map((file, colIdx) => {
+    const square = `${file}${rank}`;
+    const piece = chess.get(square);
+    const isLight = (rowIdx + colIdx) % 2 === 0;
+    const isSelected = selected === square;
+    const isLegal = legalMoves.includes(square);
+    const isLast = lastMove && (lastMove.from === square || lastMove.to === square);
+    let bg = isLight ? "#f0d9b5" : "#b58863";
+    if (isSelected) bg = "#7fc97f";
+    else if (isLast) bg = isLight ? "#cdd16f" : "#aaa23a";
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_react_native4.TouchableOpacity,
+      {
+        onPress: () => handleSquarePress(square),
+        activeOpacity: 0.85,
+        style: { width: squareSize, height: squareSize, backgroundColor: bg, alignItems: "center", justifyContent: "center" },
+        children: [
+          piece && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles.piece, { fontSize: squareSize * 0.72 }, piece.color === "w" ? styles.whitePiece : styles.blackPiece], children: PIECES[piece.type]?.[piece.color === "w" ? "white" : "black"] }),
+          isLegal && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [
+            styles.legalDot,
+            piece ? { ...import_react_native4.StyleSheet.absoluteFillObject, borderRadius: squareSize / 2, borderWidth: 3, borderColor: "rgba(0,180,0,0.5)", backgroundColor: "transparent" } : { width: squareSize * 0.3, height: squareSize * 0.3, borderRadius: squareSize * 0.15, backgroundColor: "rgba(0,180,0,0.45)" }
+          ] })
+        ]
+      },
+      square
+    );
+  }) }, rank)) });
+  const promotionModal = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: !!promotionMove, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.promotionBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.promotionTitle, children: "Promote pawn" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { flexDirection: "row", gap: 12 }, children: ["q", "r", "b", "n"].map((p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.TouchableOpacity,
+      {
+        style: styles.promotionPiece,
+        onPress: () => {
+          if (promotionMove) emitMove(promotionMove.from, promotionMove.to, p);
+          setPromotionMove(null);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: { fontSize: 36 }, children: PIECES[p]?.[myColor === "white" ? "white" : "black"] })
+      },
+      p
+    )) })
+  ] }) }) });
+  const gameOverModal = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.gameOverBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === game.myPlayerId ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.gameOverTitle, children: gameResult?.winner === game.myPlayerId ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.gameOverReason, children: gameResult?.reason }),
+    onLeave && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { style: styles.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.btnPlayAgainText, children: "Play again" }) })
+  ] }) }) });
+  if (layout === "board-only") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style, children: [
+      board,
+      promotionModal,
+      gameOverModal
+    ] });
+  }
+  const opponentName = game.players.find((p) => p.id !== game.myPlayerId)?.username ?? "Waiting\u2026";
+  const formatClock = (s4) => `${Math.floor(s4 / 60).toString().padStart(2, "0")}:${(s4 % 60).toString().padStart(2, "0")}`;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles.container, style], children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.playerRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.avatarText, children: opponentName[0]?.toUpperCase() }) }),
@@ -389,57 +519,31 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.playerName, children: opponentName }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.playerColor, children: myColor === "white" ? "Black" : "White" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles.clock, clocks.opponent < 30 && styles.clockDanger], children: formatClock(clocks.opponent) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles.clock, game.clocks.opponent < 30 && styles.clockDanger], children: formatClock(game.clocks.opponent) })
     ] }),
-    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles.afkBannerSelf : styles.afkBannerOpponent], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F You are AFK \u2014 make a move!" : "\u23F3 Opponent is AFK" }),
+    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles.afkBanner, afkWarning.playerId === game.myPlayerId ? styles.afkBannerSelf : styles.afkBannerOpponent], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.afkText, children: afkWarning.playerId === game.myPlayerId ? "\u26A0\uFE0F You are AFK \u2014 make a move!" : "\u23F3 Opponent is AFK" }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.Text, { style: styles.afkText, children: [
         afkWarning.secondsRemaining,
         "s"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { width: boardSize, height: boardSize }, children: ranks.map((rank, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { flexDirection: "row" }, children: files.map((file, colIdx) => {
-      const square = `${file}${rank}`;
-      const piece = chess.get(square);
-      const isLight = (rowIdx + colIdx) % 2 === 0;
-      const isSelected = selected === square;
-      const isLegal = legalMoves.includes(square);
-      const isLast = lastMove && (lastMove.from === square || lastMove.to === square);
-      let bg = isLight ? "#f0d9b5" : "#b58863";
-      if (isSelected) bg = "#7fc97f";
-      else if (isLast) bg = isLight ? "#cdd16f" : "#aaa23a";
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        import_react_native4.TouchableOpacity,
-        {
-          onPress: () => handleSquarePress(square),
-          activeOpacity: 0.85,
-          style: [{ width: squareSize, height: squareSize, backgroundColor: bg, alignItems: "center", justifyContent: "center" }],
-          children: [
-            piece && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles.piece, { fontSize: squareSize * 0.72 }, piece.color === "w" ? styles.whitePiece : styles.blackPiece], children: PIECES[piece.type]?.[piece.color === "w" ? "white" : "black"] }),
-            isLegal && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [
-              styles.legalDot,
-              piece ? { ...import_react_native4.StyleSheet.absoluteFillObject, borderRadius: squareSize / 2, borderWidth: 3, borderColor: "rgba(0,180,0,0.5)", backgroundColor: "transparent" } : { width: squareSize * 0.3, height: squareSize * 0.3, borderRadius: squareSize * 0.15, backgroundColor: "rgba(0,180,0,0.45)" }
-            ] })
-          ]
-        },
-        square
-      );
-    }) }, rank)) }),
+    board,
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.playerRow, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: { flex: 1, marginLeft: 10 }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.playerName, children: myPlayer.displayName }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.playerColor, children: myColor })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles.clock, clocks.self < 30 && styles.clockDanger], children: formatClock(clocks.self) })
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles.clock, game.clocks.self < 30 && styles.clockDanger], children: formatClock(game.clocks.self) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.actions, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_react_native4.TouchableOpacity,
         {
           style: styles.btnResign,
-          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
           disabled: gameOver,
+          onPress: () => game.socket?.emit("game:resign", { roomId: game.roomId, playerId: game.myPlayerId }),
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.btnResignText, children: "Resign" })
         }
       ),
@@ -447,34 +551,15 @@ function ChessBoard({ style, showAfkWarning = true, onLeave }) {
         import_react_native4.TouchableOpacity,
         {
           style: styles.btnDraw,
-          onPress: () => socketRef.current?.emit("game:draw:offer", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
           disabled: gameOver,
+          onPress: () => game.socket?.emit("game:draw:offer", { roomId: game.roomId, playerId: game.myPlayerId }),
           children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.btnDrawText, children: "Offer draw" })
         }
       ),
       onLeave && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { style: styles.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.btnLeaveText, children: "Leave" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: !!promotionMove, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.promotionBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.promotionTitle, children: "Promote pawn" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: { flexDirection: "row", gap: 12 }, children: ["q", "r", "b", "n"].map((p) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_react_native4.TouchableOpacity,
-        {
-          style: styles.promotionPiece,
-          onPress: () => {
-            if (promotionMove) emitMove(promotionMove.from, promotionMove.to, p);
-            setPromotionMove(null);
-          },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: { fontSize: 36 }, children: PIECES[p]?.[myColor === "white" ? "white" : "black"] })
-        },
-        p
-      )) })
-    ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles.gameOverBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.gameOverReason, children: gameResult?.reason }),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { style: styles.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles.btnPlayAgainText, children: "Play again" }) })
-    ] }) }) })
+    promotionModal,
+    gameOverModal
   ] });
 }
 var styles = import_react_native4.StyleSheet.create({
@@ -513,13 +598,13 @@ var styles = import_react_native4.StyleSheet.create({
 });
 
 // src/components/chess/ChessMoveHistory.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_react_native5 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function ChessMoveHistory({ style, rowStyle, textStyle }) {
   const socket = useSocket();
-  const [moves, setMoves] = (0, import_react4.useState)([]);
-  (0, import_react4.useEffect)(() => {
+  const [moves, setMoves] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
     if (!socket) return;
     const handler = ({ san, moveIndex }) => {
       const moveNumber = Math.floor(moveIndex / 2) + 1;
@@ -549,46 +634,33 @@ function ChessMoveHistory({ style, rowStyle, textStyle }) {
 }
 
 // src/components/checkers/index.tsx
-var import_react5 = require("react");
 var import_react_native6 = require("react-native");
-var import_socket3 = require("socket.io-client");
+var import_socket4 = require("socket.io-client");
+var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function CheckersBoard({ style, showAfkWarning = true, onLeave }) {
+function useCheckersGame() {
   const { token, serverUrl, session } = useBetaGamer();
   const myPlayer = session.players[0];
-  const socketRef = (0, import_react5.useRef)(null);
-  const roomIdRef = (0, import_react5.useRef)(null);
-  const myPlayerIdRef = (0, import_react5.useRef)(myPlayer?.id ?? "");
-  const afkTimerRef = (0, import_react5.useRef)(null);
-  const [board, setBoard] = (0, import_react5.useState)(Array(64).fill(null));
-  const [myColor, setMyColor] = (0, import_react5.useState)("red");
-  const [currentTurn, setCurrentTurn] = (0, import_react5.useState)(0);
-  const [players, setPlayers] = (0, import_react5.useState)([]);
-  const [selectedPiece, setSelectedPiece] = (0, import_react5.useState)(null);
-  const [validMoves, setValidMoves] = (0, import_react5.useState)([]);
-  const [gameOver, setGameOver] = (0, import_react5.useState)(false);
-  const [gameResult, setGameResult] = (0, import_react5.useState)(null);
-  const [afkWarning, setAfkWarning] = (0, import_react5.useState)(null);
-  if (session.game !== "checkers") return null;
-  const isMyTurn = players.length > 0 ? players[currentTurn]?.id === myPlayerIdRef.current : false;
-  const opponentName = players.find((p) => p.id !== myPlayerIdRef.current)?.username ?? "Waiting\u2026";
-  const opponentColor = myColor === "red" ? "black" : "red";
-  (0, import_react5.useEffect)(() => {
-    const s = (0, import_socket3.io)(`${serverUrl}/checkers`, {
-      auth: { token },
-      path: "/socket.io",
-      transports: ["websocket", "polling"]
-    });
-    socketRef.current = s;
-    const join = () => s.emit("matchmaking:join", {
-      username: myPlayer.displayName,
-      playerId: myPlayer.id,
-      wantsBot: false,
-      sessionId: session.sessionId
-    });
-    if (s.connected) join();
-    else s.once("connect", join);
-    s.on("game:started", (d) => {
+  const socketRef = (0, import_react6.useRef)(null);
+  const roomIdRef = (0, import_react6.useRef)(null);
+  const myPlayerIdRef = (0, import_react6.useRef)(myPlayer?.id ?? "");
+  const afkTimerRef = (0, import_react6.useRef)(null);
+  const [board, setBoard] = (0, import_react6.useState)(Array(64).fill(null));
+  const [myColor, setMyColor] = (0, import_react6.useState)("red");
+  const [currentTurn, setCurrentTurn] = (0, import_react6.useState)(0);
+  const [players, setPlayers] = (0, import_react6.useState)([]);
+  const [selectedPiece, setSelectedPiece] = (0, import_react6.useState)(null);
+  const [validMoves, setValidMoves] = (0, import_react6.useState)([]);
+  const [gameOver, setGameOver] = (0, import_react6.useState)(false);
+  const [gameResult, setGameResult] = (0, import_react6.useState)(null);
+  const [afkWarning, setAfkWarning] = (0, import_react6.useState)(null);
+  (0, import_react6.useEffect)(() => {
+    const s4 = (0, import_socket4.io)(`${serverUrl}/checkers`, { auth: { token }, path: "/socket.io", transports: ["websocket", "polling"] });
+    socketRef.current = s4;
+    const join = () => s4.emit("matchmaking:join", { username: myPlayer.displayName, playerId: myPlayer.id, wantsBot: session.matchType === "bot", sessionId: session.sessionId });
+    if (s4.connected) join();
+    else s4.once("connect", join);
+    s4.on("game:started", (d) => {
       roomIdRef.current = d.roomId;
       myPlayerIdRef.current = d.playerId;
       setMyColor(d.color ?? "red");
@@ -596,7 +668,7 @@ function CheckersBoard({ style, showAfkWarning = true, onLeave }) {
       setCurrentTurn(d.currentTurn ?? 0);
       setPlayers(d.players ?? []);
     });
-    s.on("game:move:made", (d) => {
+    s4.on("game:move:made", (d) => {
       setBoard(d.board);
       setCurrentTurn(d.currentTurn ?? 0);
       setSelectedPiece(null);
@@ -607,11 +679,11 @@ function CheckersBoard({ style, showAfkWarning = true, onLeave }) {
       }
       setAfkWarning(null);
     });
-    s.on("game:valid_moves", (d) => {
+    s4.on("game:valid_moves", (d) => {
       setSelectedPiece(d.position);
       setValidMoves(d.moves);
     });
-    s.on("checkers:afk_warning", (d) => {
+    s4.on("checkers:afk_warning", (d) => {
       setAfkWarning(d);
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
       afkTimerRef.current = setInterval(() => {
@@ -619,66 +691,63 @@ function CheckersBoard({ style, showAfkWarning = true, onLeave }) {
           if (!prev || prev.secondsRemaining <= 1) {
             clearInterval(afkTimerRef.current);
             afkTimerRef.current = null;
-            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            if (roomIdRef.current) s4.emit("afk:check", { roomId: roomIdRef.current });
             return prev;
           }
           return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
         });
       }, 1e3);
     });
-    s.on("checkers:afk_warning_cleared", () => {
+    s4.on("checkers:afk_warning_cleared", () => {
       if (afkTimerRef.current) {
         clearInterval(afkTimerRef.current);
         afkTimerRef.current = null;
       }
       setAfkWarning(null);
     });
-    s.on("afk:status", (status) => {
+    s4.on("afk:status", (status) => {
       if (!status) {
         if (afkTimerRef.current) {
           clearInterval(afkTimerRef.current);
           afkTimerRef.current = null;
         }
         setAfkWarning(null);
-      } else {
-        setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
-      }
+      } else setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
     });
-    s.on("game:over", (d) => {
+    s4.on("game:over", (d) => {
       setGameResult({ winner: d.winner ?? null, reason: d.reason });
       setTimeout(() => setGameOver(true), 400);
     });
     return () => {
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
-      s.disconnect();
+      s4.disconnect();
       socketRef.current = null;
     };
   }, [token, serverUrl]);
+  const isMyTurn = players.length > 0 ? players[currentTurn]?.id === myPlayerIdRef.current : false;
   const handleCellPress = (pos) => {
     if (gameOver || !isMyTurn) return;
     const piece = board[pos];
     const moveTarget = validMoves.find((m) => m.to === pos);
     if (moveTarget && selectedPiece !== null) {
-      socketRef.current?.emit("game:move", {
-        roomId: roomIdRef.current,
-        playerId: myPlayerIdRef.current,
-        move: { from: selectedPiece, to: pos, captures: moveTarget.captures }
-      });
+      socketRef.current?.emit("game:move", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current, move: { from: selectedPiece, to: pos, captures: moveTarget.captures } });
       setSelectedPiece(null);
       setValidMoves([]);
-      return;
-    }
-    if (piece && piece.player === myColor) {
-      socketRef.current?.emit("game:get_moves", {
-        roomId: roomIdRef.current,
-        position: pos,
-        playerId: myPlayerIdRef.current
-      });
+    } else if (piece && piece.player === myColor) {
+      socketRef.current?.emit("game:get_moves", { roomId: roomIdRef.current, position: pos, playerId: myPlayerIdRef.current });
     } else {
       setSelectedPiece(null);
       setValidMoves([]);
     }
   };
+  return { socket: socketRef.current, roomId: roomIdRef.current, myPlayerId: myPlayerIdRef.current, myColor, board, currentTurn, players, selectedPiece, validMoves, gameOver, gameResult, afkWarning, isMyTurn, handleCellPress };
+}
+function CheckersBoard({ style, layout = "board-only", showAfkWarning = true, onLeave }) {
+  const { session } = useBetaGamer();
+  if (session.game !== "checkers") return null;
+  const game = useCheckersGame();
+  const { myColor, board, selectedPiece, validMoves, gameOver, gameResult, afkWarning, isMyTurn, handleCellPress } = game;
+  const myPlayer = session.players[0];
   const screenWidth = import_react_native6.Dimensions.get("window").width;
   const boardSize = screenWidth - 32;
   const cellSize = boardSize / 8;
@@ -688,87 +757,81 @@ function CheckersBoard({ style, showAfkWarning = true, onLeave }) {
     rows.reverse();
     cols.reverse();
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [styles2.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles2.playerRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: styles2.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+  const boardEl = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: { width: boardSize, height: boardSize, borderWidth: 3, borderColor: "#92400e", borderRadius: 4 }, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: { flexDirection: "row" }, children: cols.map((col) => {
+    const pos = row * 8 + col;
+    const piece = board[pos];
+    const isLight = (row + col) % 2 === 0;
+    const isSelected = selectedPiece === pos;
+    const moveTarget = validMoves.find((m) => m.to === pos);
+    const isCapture = (moveTarget?.captures?.length ?? 0) > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_react_native6.TouchableOpacity,
+      {
+        onPress: () => handleCellPress(pos),
+        activeOpacity: isLight ? 1 : 0.85,
+        style: [{ width: cellSize, height: cellSize, alignItems: "center", justifyContent: "center", backgroundColor: isLight ? "#f0d9b5" : "#b58863" }, isSelected && s.cellSelected, moveTarget && s.cellValidMove],
+        children: [
+          piece && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [s.piece, { width: cellSize * 0.78, height: cellSize * 0.78 }, piece.player === "red" ? s.pieceRed : s.pieceBlack, isSelected && s.pieceSelected], children: piece.type === "king" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: { fontSize: cellSize * 0.35 }, children: "\u{1F451}" }) }),
+          moveTarget && !piece && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [s.moveDot, { width: cellSize * 0.3, height: cellSize * 0.3, borderRadius: cellSize * 0.15 }, isCapture ? s.moveDotCapture : s.moveDotNormal] }),
+          moveTarget && piece && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [import_react_native6.StyleSheet.absoluteFill, s.captureRing, { borderRadius: cellSize / 2 }] })
+        ]
+      },
+      col
+    );
+  }) }, row)) });
+  const gameOverModal = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: s.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: s.gameOverBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === game.myPlayerId ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.gameOverTitle, children: gameResult?.winner === game.myPlayerId ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.gameOverReason, children: gameResult?.reason }),
+    onLeave && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.TouchableOpacity, { style: s.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.btnPlayAgainText, children: "Play again" }) })
+  ] }) }) });
+  if (layout === "board-only") return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style, children: [
+    boardEl,
+    gameOverModal
+  ] });
+  const opponentName = game.players.find((p) => p.id !== game.myPlayerId)?.username ?? "Waiting\u2026";
+  const opponentColor = myColor === "red" ? "black" : "red";
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [s.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: s.playerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: s.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.avatarText, children: opponentName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: { flex: 1, marginLeft: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.playerName, children: opponentName }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: [styles2.playerColor, { color: opponentColor === "red" ? "#f87171" : "#94a3b8" }], children: opponentColor })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.playerName, children: opponentName }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: [s.playerColor, { color: opponentColor === "red" ? "#f87171" : "#94a3b8" }], children: opponentColor })
       ] }),
-      !isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.turnIndicator, children: "\u25CF thinking" })
+      !isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.turnIndicator, children: "\u25CF thinking" })
     ] }),
-    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [styles2.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles2.afkSelf : styles2.afkOpponent], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F Make a move!" : "\u23F3 Opponent is AFK" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.Text, { style: styles2.afkText, children: [
+    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: [s.afkBanner, afkWarning.playerId === game.myPlayerId ? s.afkSelf : s.afkOpponent], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.afkText, children: afkWarning.playerId === game.myPlayerId ? "\u26A0\uFE0F Make a move!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.Text, { style: s.afkText, children: [
         afkWarning.secondsRemaining,
         "s"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: { width: boardSize, height: boardSize, borderWidth: 3, borderColor: "#92400e", borderRadius: 4 }, children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: { flexDirection: "row" }, children: cols.map((col) => {
-      const pos = row * 8 + col;
-      const piece = board[pos];
-      const isLight = (row + col) % 2 === 0;
-      const isSelected = selectedPiece === pos;
-      const moveTarget = validMoves.find((m) => m.to === pos);
-      const isCapture = (moveTarget?.captures?.length ?? 0) > 0;
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-        import_react_native6.TouchableOpacity,
-        {
-          onPress: () => handleCellPress(pos),
-          activeOpacity: isLight ? 1 : 0.85,
-          style: [
-            { width: cellSize, height: cellSize, alignItems: "center", justifyContent: "center" },
-            { backgroundColor: isLight ? "#f0d9b5" : "#b58863" },
-            isSelected && styles2.cellSelected,
-            moveTarget && styles2.cellValidMove
-          ],
-          children: [
-            piece && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [
-              styles2.piece,
-              { width: cellSize * 0.78, height: cellSize * 0.78 },
-              piece.player === "red" ? styles2.pieceRed : styles2.pieceBlack,
-              isSelected && styles2.pieceSelected
-            ], children: piece.type === "king" && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: { fontSize: cellSize * 0.35 }, children: "\u{1F451}" }) }),
-            moveTarget && !piece && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [
-              styles2.moveDot,
-              { width: cellSize * 0.3, height: cellSize * 0.3, borderRadius: cellSize * 0.15 },
-              isCapture ? styles2.moveDotCapture : styles2.moveDotNormal
-            ] }),
-            moveTarget && piece && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [import_react_native6.StyleSheet.absoluteFill, styles2.captureRing, { borderRadius: cellSize / 2 }] })
-          ]
-        },
-        col
-      );
-    }) }, row)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles2.playerRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [styles2.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+    boardEl,
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: s.playerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: [s.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: { flex: 1, marginLeft: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.playerName, children: myPlayer.displayName }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: [styles2.playerColor, { color: myColor === "red" ? "#f87171" : "#94a3b8" }], children: myColor })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.playerName, children: myPlayer.displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: [s.playerColor, { color: myColor === "red" ? "#f87171" : "#94a3b8" }], children: myColor })
       ] }),
-      isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.turnIndicator, children: "\u25CF your turn" })
+      isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.turnIndicator, children: "\u25CF your turn" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles2.actions, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: s.actions, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         import_react_native6.TouchableOpacity,
         {
-          style: styles2.btnResign,
+          style: s.btnResign,
           disabled: gameOver,
-          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.btnResignText, children: "Resign" })
+          onPress: () => game.socket?.emit("game:resign", { roomId: game.roomId, playerId: game.myPlayerId }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.btnResignText, children: "Resign" })
         }
       ),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.TouchableOpacity, { style: styles2.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.btnLeaveText, children: "Leave" }) })
+      onLeave && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.TouchableOpacity, { style: s.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: s.btnLeaveText, children: "Leave" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: styles2.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles2.gameOverBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.gameOverReason, children: gameResult?.reason }),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.TouchableOpacity, { style: styles2.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Text, { style: styles2.btnPlayAgainText, children: "Play again" }) })
-    ] }) }) })
+    gameOverModal
   ] });
 }
-var styles2 = import_react_native6.StyleSheet.create({
+var s = import_react_native6.StyleSheet.create({
   container: { flex: 1, backgroundColor: "#0a0a0f", alignItems: "center", padding: 16, gap: 10 },
   playerRow: { flexDirection: "row", alignItems: "center", backgroundColor: "#0f172a", borderRadius: 12, padding: 12, width: "100%" },
   avatar: { width: 32, height: 32, borderRadius: 16, backgroundColor: "#334155", alignItems: "center", justifyContent: "center" },
@@ -804,48 +867,35 @@ var styles2 = import_react_native6.StyleSheet.create({
 });
 
 // src/components/connect4/index.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_react_native7 = require("react-native");
-var import_socket4 = require("socket.io-client");
+var import_socket5 = require("socket.io-client");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Connect4Board({ style, showAfkWarning = true, onLeave }) {
+var ROWS = 6;
+var COLS = 7;
+function useConnect4Game() {
   const { token, serverUrl, session } = useBetaGamer();
   const myPlayer = session.players[0];
-  const socketRef = (0, import_react6.useRef)(null);
-  const roomIdRef = (0, import_react6.useRef)(null);
-  const myPlayerIdRef = (0, import_react6.useRef)(myPlayer?.id ?? "");
-  const afkTimerRef = (0, import_react6.useRef)(null);
-  const ROWS = 6;
-  const COLS = 7;
-  const [board, setBoard] = (0, import_react6.useState)(Array(ROWS * COLS).fill(null));
-  const [myColor, setMyColor] = (0, import_react6.useState)("red");
-  const [currentTurn, setCurrentTurn] = (0, import_react6.useState)(0);
-  const [players, setPlayers] = (0, import_react6.useState)([]);
-  const [lastMove, setLastMove] = (0, import_react6.useState)(null);
-  const [winningCells, setWinningCells] = (0, import_react6.useState)(null);
-  const [gameOver, setGameOver] = (0, import_react6.useState)(false);
-  const [gameResult, setGameResult] = (0, import_react6.useState)(null);
-  const [afkWarning, setAfkWarning] = (0, import_react6.useState)(null);
-  if (session.game !== "connect4") return null;
-  const isMyTurn = players.length > 0 ? players[currentTurn]?.id === myPlayerIdRef.current : false;
-  const opponentName = players.find((p) => p.id !== myPlayerIdRef.current)?.username ?? "Waiting\u2026";
-  const opponentColor = myColor === "red" ? "yellow" : "red";
-  (0, import_react6.useEffect)(() => {
-    const s = (0, import_socket4.io)(`${serverUrl}/connect4`, {
-      auth: { token },
-      path: "/socket.io",
-      transports: ["websocket", "polling"]
-    });
-    socketRef.current = s;
-    const join = () => s.emit("matchmaking:join", {
-      username: myPlayer.displayName,
-      playerId: myPlayer.id,
-      wantsBot: false,
-      sessionId: session.sessionId
-    });
-    if (s.connected) join();
-    else s.once("connect", join);
-    s.on("game:started", (d) => {
+  const socketRef = (0, import_react7.useRef)(null);
+  const roomIdRef = (0, import_react7.useRef)(null);
+  const myPlayerIdRef = (0, import_react7.useRef)(myPlayer?.id ?? "");
+  const afkTimerRef = (0, import_react7.useRef)(null);
+  const [board, setBoard] = (0, import_react7.useState)(Array(ROWS * COLS).fill(null));
+  const [myColor, setMyColor] = (0, import_react7.useState)("red");
+  const [currentTurn, setCurrentTurn] = (0, import_react7.useState)(0);
+  const [players, setPlayers] = (0, import_react7.useState)([]);
+  const [lastMove, setLastMove] = (0, import_react7.useState)(null);
+  const [winningCells, setWinningCells] = (0, import_react7.useState)(null);
+  const [gameOver, setGameOver] = (0, import_react7.useState)(false);
+  const [gameResult, setGameResult] = (0, import_react7.useState)(null);
+  const [afkWarning, setAfkWarning] = (0, import_react7.useState)(null);
+  (0, import_react7.useEffect)(() => {
+    const s4 = (0, import_socket5.io)(`${serverUrl}/connect4`, { auth: { token }, path: "/socket.io", transports: ["websocket", "polling"] });
+    socketRef.current = s4;
+    const join = () => s4.emit("matchmaking:join", { username: myPlayer.displayName, playerId: myPlayer.id, wantsBot: session.matchType === "bot", sessionId: session.sessionId });
+    if (s4.connected) join();
+    else s4.once("connect", join);
+    s4.on("game:started", (d) => {
       roomIdRef.current = d.roomId;
       myPlayerIdRef.current = d.playerId;
       setMyColor(d.color ?? "red");
@@ -853,7 +903,7 @@ function Connect4Board({ style, showAfkWarning = true, onLeave }) {
       setCurrentTurn(d.currentTurn ?? 0);
       setPlayers(d.players ?? []);
     });
-    s.on("game:move:made", (d) => {
+    s4.on("game:move:made", (d) => {
       setBoard(d.board);
       setCurrentTurn(d.currentTurn ?? 0);
       if (d.lastMove != null) setLastMove(d.lastMove);
@@ -864,7 +914,7 @@ function Connect4Board({ style, showAfkWarning = true, onLeave }) {
       }
       setAfkWarning(null);
     });
-    s.on("connect4:afk_warning", (d) => {
+    s4.on("connect4:afk_warning", (d) => {
       setAfkWarning(d);
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
       afkTimerRef.current = setInterval(() => {
@@ -872,129 +922,138 @@ function Connect4Board({ style, showAfkWarning = true, onLeave }) {
           if (!prev || prev.secondsRemaining <= 1) {
             clearInterval(afkTimerRef.current);
             afkTimerRef.current = null;
-            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            if (roomIdRef.current) s4.emit("afk:check", { roomId: roomIdRef.current });
             return prev;
           }
           return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
         });
       }, 1e3);
     });
-    s.on("connect4:afk_warning_cleared", () => {
+    s4.on("connect4:afk_warning_cleared", () => {
       if (afkTimerRef.current) {
         clearInterval(afkTimerRef.current);
         afkTimerRef.current = null;
       }
       setAfkWarning(null);
     });
-    s.on("afk:status", (status) => {
+    s4.on("afk:status", (status) => {
       if (!status) {
         if (afkTimerRef.current) {
           clearInterval(afkTimerRef.current);
           afkTimerRef.current = null;
         }
         setAfkWarning(null);
-      } else {
-        setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
-      }
+      } else setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
     });
-    s.on("game:over", (d) => {
+    s4.on("game:over", (d) => {
       if (d.winningCells) setWinningCells(d.winningCells);
       setGameResult({ winner: d.winner ?? null, reason: d.reason });
       setTimeout(() => setGameOver(true), 400);
     });
     return () => {
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
-      s.disconnect();
+      s4.disconnect();
       socketRef.current = null;
     };
   }, [token, serverUrl]);
+  const isMyTurn = players.length > 0 ? players[currentTurn]?.id === myPlayerIdRef.current : false;
   const handleColumnPress = (col) => {
-    if (!isMyTurn || gameOver) return;
-    if (board[col] !== null) return;
+    if (!isMyTurn || gameOver || board[col] !== null) return;
     socketRef.current?.emit("game:move", { roomId: roomIdRef.current, column: col, playerId: myPlayerIdRef.current });
   };
+  return { socket: socketRef.current, roomId: roomIdRef.current, myPlayerId: myPlayerIdRef.current, myColor, board, currentTurn, players, lastMove, winningCells, gameOver, gameResult, afkWarning, isMyTurn, handleColumnPress };
+}
+function Connect4Board({ style, layout = "board-only", showAfkWarning = true, onLeave }) {
+  const { session } = useBetaGamer();
+  if (session.game !== "connect4") return null;
+  const game = useConnect4Game();
+  const { myColor, board, lastMove, winningCells, gameOver, gameResult, afkWarning, isMyTurn, handleColumnPress } = game;
+  const myPlayer = session.players[0];
   const screenWidth = import_react_native7.Dimensions.get("window").width;
   const boardWidth = screenWidth - 32;
   const cellSize = boardWidth / COLS;
   const ColorDot = ({ color, size = 12 }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { width: size, height: size, borderRadius: size / 2, backgroundColor: color === "red" ? "#ef4444" : "#eab308", marginRight: 6 } });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles3.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles3.playerRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: styles3.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+  const boardEl = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { width: boardWidth, backgroundColor: "#2563eb", borderRadius: 12, padding: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { flexDirection: "row" }, children: Array.from({ length: COLS }, (_, col) => {
+      const canDrop = isMyTurn && !gameOver && board[col] === null;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        import_react_native7.TouchableOpacity,
+        {
+          onPress: () => handleColumnPress(col),
+          activeOpacity: 0.7,
+          style: { width: cellSize, height: 28, alignItems: "center", justifyContent: "center" },
+          children: canDrop && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: "#fff", fontSize: 14 }, children: "\u25BC" })
+        },
+        col
+      );
+    }) }),
+    Array.from({ length: ROWS }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { flexDirection: "row" }, children: Array.from({ length: COLS }, (_2, col) => {
+      const pos = row * COLS + col;
+      const piece = board[pos];
+      const isWinning = winningCells?.includes(pos);
+      const isLast = lastMove === pos;
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { width: cellSize, height: cellSize, padding: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [s2.cell, isWinning && s2.cellWin], children: piece && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [s2.piece, piece === "red" ? s2.pieceRed : s2.pieceYellow, isWinning && s2.pieceWin, isLast && !isWinning && s2.pieceLast] }) }) }, col);
+    }) }, row))
+  ] });
+  const gameOverModal = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: s2.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: s2.gameOverBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === game.myPlayerId ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.gameOverTitle, children: gameResult?.winner === game.myPlayerId ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.gameOverReason, children: gameResult?.reason }),
+    onLeave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.TouchableOpacity, { style: s2.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.btnPlayAgainText, children: "Play again" }) })
+  ] }) }) });
+  if (layout === "board-only") return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style, children: [
+    boardEl,
+    gameOverModal
+  ] });
+  const opponentName = game.players.find((p) => p.id !== game.myPlayerId)?.username ?? "Waiting\u2026";
+  const opponentColor = myColor === "red" ? "yellow" : "red";
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [s2.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: s2.playerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: s2.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.avatarText, children: opponentName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flex: 1, marginLeft: 10, flexDirection: "row", alignItems: "center" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColorDot, { color: opponentColor }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.playerName, children: opponentName }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.playerColor, children: opponentColor })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.playerName, children: opponentName }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.playerColor, children: opponentColor })
         ] })
       ] }),
-      !isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.turnIndicator, children: "\u25CF thinking" })
+      !isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.turnIndicator, children: "\u25CF thinking" })
     ] }),
-    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [styles3.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles3.afkSelf : styles3.afkOpponent], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F Drop a piece!" : "\u23F3 Opponent is AFK" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.Text, { style: styles3.afkText, children: [
+    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: [s2.afkBanner, afkWarning.playerId === game.myPlayerId ? s2.afkSelf : s2.afkOpponent], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.afkText, children: afkWarning.playerId === game.myPlayerId ? "\u26A0\uFE0F Drop a piece!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.Text, { style: s2.afkText, children: [
         afkWarning.secondsRemaining,
         "s"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { width: boardWidth, backgroundColor: "#2563eb", borderRadius: 12, padding: 6 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { flexDirection: "row" }, children: Array.from({ length: COLS }, (_, col) => {
-        const canDrop = isMyTurn && !gameOver && board[col] === null;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_react_native7.TouchableOpacity,
-          {
-            onPress: () => handleColumnPress(col),
-            activeOpacity: 0.7,
-            style: { width: cellSize, height: 28, alignItems: "center", justifyContent: "center" },
-            children: canDrop && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { color: "#fff", fontSize: 14 }, children: "\u25BC" })
-          },
-          col
-        );
-      }) }),
-      Array.from({ length: ROWS }, (_, row) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { flexDirection: "row" }, children: Array.from({ length: COLS }, (_2, col) => {
-        const pos = row * COLS + col;
-        const piece = board[pos];
-        const isWinning = winningCells?.includes(pos);
-        const isLast = lastMove === pos;
-        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: { width: cellSize, height: cellSize, padding: 3 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [styles3.cell, isWinning && styles3.cellWin], children: piece && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [
-          styles3.piece,
-          piece === "red" ? styles3.pieceRed : styles3.pieceYellow,
-          isWinning && styles3.pieceWin,
-          isLast && !isWinning && styles3.pieceLast
-        ] }) }) }, col);
-      }) }, row))
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles3.playerRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [styles3.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+    boardEl,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: s2.playerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: [s2.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: { flex: 1, marginLeft: 10, flexDirection: "row", alignItems: "center" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ColorDot, { color: myColor }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.playerName, children: myPlayer.displayName }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.playerColor, children: myColor })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.playerName, children: myPlayer.displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.playerColor, children: myColor })
         ] })
       ] }),
-      isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.turnIndicator, children: "\u25CF your turn" })
+      isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.turnIndicator, children: "\u25CF your turn" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles3.actions, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: s2.actions, children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         import_react_native7.TouchableOpacity,
         {
-          style: styles3.btnResign,
+          style: s2.btnResign,
           disabled: gameOver,
-          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.btnResignText, children: "Resign" })
+          onPress: () => game.socket?.emit("game:resign", { roomId: game.roomId, playerId: game.myPlayerId }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.btnResignText, children: "Resign" })
         }
       ),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.TouchableOpacity, { style: styles3.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.btnLeaveText, children: "Leave" }) })
+      onLeave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.TouchableOpacity, { style: s2.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: s2.btnLeaveText, children: "Leave" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.View, { style: styles3.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native7.View, { style: styles3.gameOverBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.gameOverReason, children: gameResult?.reason }),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.TouchableOpacity, { style: styles3.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native7.Text, { style: styles3.btnPlayAgainText, children: "Play again" }) })
-    ] }) }) })
+    gameOverModal
   ] });
 }
-var styles3 = import_react_native7.StyleSheet.create({
+var s2 = import_react_native7.StyleSheet.create({
   container: { flex: 1, backgroundColor: "#0a0a0f", alignItems: "center", padding: 16, gap: 10 },
   playerRow: { flexDirection: "row", alignItems: "center", backgroundColor: "#0f172a", borderRadius: 12, padding: 12, width: "100%" },
   avatar: { width: 32, height: 32, borderRadius: 16, backgroundColor: "#334155", alignItems: "center", justifyContent: "center" },
@@ -1005,8 +1064,8 @@ var styles3 = import_react_native7.StyleSheet.create({
   cell: { flex: 1, borderRadius: 999, backgroundColor: "#1e3a5f", alignItems: "center", justifyContent: "center" },
   cellWin: { backgroundColor: "#15803d" },
   piece: { width: "85%", height: "85%", borderRadius: 999 },
-  pieceRed: { backgroundColor: "#ef4444", shadowColor: "#ef4444", shadowOpacity: 0.5, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
-  pieceYellow: { backgroundColor: "#eab308", shadowColor: "#eab308", shadowOpacity: 0.5, shadowRadius: 4, shadowOffset: { width: 0, height: 2 } },
+  pieceRed: { backgroundColor: "#ef4444" },
+  pieceYellow: { backgroundColor: "#eab308" },
   pieceWin: { transform: [{ scale: 1.1 }] },
   pieceLast: { borderWidth: 2, borderColor: "#22d3ee" },
   afkBanner: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", borderRadius: 10, paddingHorizontal: 14, paddingVertical: 8, width: "100%" },
@@ -1027,44 +1086,32 @@ var styles3 = import_react_native7.StyleSheet.create({
 });
 
 // src/components/tictactoe/index.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_react_native8 = require("react-native");
-var import_socket5 = require("socket.io-client");
+var import_socket6 = require("socket.io-client");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function TictactoeBoard({ style, showAfkWarning = true, onLeave }) {
+function useTictactoeGame() {
   const { token, serverUrl, session } = useBetaGamer();
   const myPlayer = session.players[0];
-  const socketRef = (0, import_react7.useRef)(null);
-  const roomIdRef = (0, import_react7.useRef)(null);
-  const myPlayerIdRef = (0, import_react7.useRef)(myPlayer?.id ?? "");
-  const afkTimerRef = (0, import_react7.useRef)(null);
-  const [board, setBoard] = (0, import_react7.useState)(Array(9).fill(null));
-  const [myMark, setMyMark] = (0, import_react7.useState)("X");
-  const [currentTurn, setCurrentTurn] = (0, import_react7.useState)(0);
-  const [players, setPlayers] = (0, import_react7.useState)([]);
-  const [winningLine, setWinningLine] = (0, import_react7.useState)(null);
-  const [gameOver, setGameOver] = (0, import_react7.useState)(false);
-  const [gameResult, setGameResult] = (0, import_react7.useState)(null);
-  const [afkWarning, setAfkWarning] = (0, import_react7.useState)(null);
-  if (session.game !== "tictactoe") return null;
-  const isMyTurn = players.length > 0 ? players[currentTurn]?.id === myPlayerIdRef.current : false;
-  const opponentName = players.find((p) => p.id !== myPlayerIdRef.current)?.username ?? "Waiting\u2026";
-  (0, import_react7.useEffect)(() => {
-    const s = (0, import_socket5.io)(`${serverUrl}/tictactoe`, {
-      auth: { token },
-      path: "/socket.io",
-      transports: ["websocket", "polling"]
-    });
-    socketRef.current = s;
-    const join = () => s.emit("matchmaking:join", {
-      username: myPlayer.displayName,
-      playerId: myPlayer.id,
-      wantsBot: false,
-      sessionId: session.sessionId
-    });
-    if (s.connected) join();
-    else s.once("connect", join);
-    s.on("game:started", (d) => {
+  const socketRef = (0, import_react8.useRef)(null);
+  const roomIdRef = (0, import_react8.useRef)(null);
+  const myPlayerIdRef = (0, import_react8.useRef)(myPlayer?.id ?? "");
+  const afkTimerRef = (0, import_react8.useRef)(null);
+  const [board, setBoard] = (0, import_react8.useState)(Array(9).fill(null));
+  const [myMark, setMyMark] = (0, import_react8.useState)("X");
+  const [currentTurn, setCurrentTurn] = (0, import_react8.useState)(0);
+  const [players, setPlayers] = (0, import_react8.useState)([]);
+  const [winningLine, setWinningLine] = (0, import_react8.useState)(null);
+  const [gameOver, setGameOver] = (0, import_react8.useState)(false);
+  const [gameResult, setGameResult] = (0, import_react8.useState)(null);
+  const [afkWarning, setAfkWarning] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    const s4 = (0, import_socket6.io)(`${serverUrl}/tictactoe`, { auth: { token }, path: "/socket.io", transports: ["websocket", "polling"] });
+    socketRef.current = s4;
+    const join = () => s4.emit("matchmaking:join", { username: myPlayer.displayName, playerId: myPlayer.id, wantsBot: session.matchType === "bot", sessionId: session.sessionId });
+    if (s4.connected) join();
+    else s4.once("connect", join);
+    s4.on("game:started", (d) => {
       roomIdRef.current = d.roomId;
       myPlayerIdRef.current = d.playerId;
       setMyMark(d.mark);
@@ -1072,7 +1119,7 @@ function TictactoeBoard({ style, showAfkWarning = true, onLeave }) {
       setCurrentTurn(d.currentTurn ?? 0);
       setPlayers(d.players ?? []);
     });
-    s.on("game:move:made", (d) => {
+    s4.on("game:move:made", (d) => {
       setBoard(d.board);
       setCurrentTurn(d.currentTurn ?? 0);
       if (d.winningLine) setWinningLine(d.winningLine);
@@ -1082,7 +1129,7 @@ function TictactoeBoard({ style, showAfkWarning = true, onLeave }) {
       }
       setAfkWarning(null);
     });
-    s.on("tictactoe:afk_warning", (d) => {
+    s4.on("tictactoe:afk_warning", (d) => {
       setAfkWarning(d);
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
       afkTimerRef.current = setInterval(() => {
@@ -1090,117 +1137,124 @@ function TictactoeBoard({ style, showAfkWarning = true, onLeave }) {
           if (!prev || prev.secondsRemaining <= 1) {
             clearInterval(afkTimerRef.current);
             afkTimerRef.current = null;
-            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            if (roomIdRef.current) s4.emit("afk:check", { roomId: roomIdRef.current });
             return prev;
           }
           return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
         });
       }, 1e3);
     });
-    s.on("tictactoe:afk_warning_cleared", () => {
+    s4.on("tictactoe:afk_warning_cleared", () => {
       if (afkTimerRef.current) {
         clearInterval(afkTimerRef.current);
         afkTimerRef.current = null;
       }
       setAfkWarning(null);
     });
-    s.on("afk:status", (status) => {
+    s4.on("afk:status", (status) => {
       if (!status) {
         if (afkTimerRef.current) {
           clearInterval(afkTimerRef.current);
           afkTimerRef.current = null;
         }
         setAfkWarning(null);
-      } else {
-        setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
-      }
+      } else setAfkWarning({ playerId: status.playerId, secondsRemaining: Math.max(1, Math.round((status.expiresAt - Date.now()) / 1e3)) });
     });
-    s.on("game:over", (d) => {
+    s4.on("game:over", (d) => {
       setGameResult({ winner: d.winner ?? null, reason: d.reason });
       setTimeout(() => setGameOver(true), 400);
     });
     return () => {
       if (afkTimerRef.current) clearInterval(afkTimerRef.current);
-      s.disconnect();
+      s4.disconnect();
       socketRef.current = null;
     };
   }, [token, serverUrl]);
+  const isMyTurn = players.length > 0 ? players[currentTurn]?.id === myPlayerIdRef.current : false;
   const handleCellPress = (idx) => {
     if (!isMyTurn || gameOver || board[idx]) return;
     socketRef.current?.emit("game:move", { roomId: roomIdRef.current, position: idx, playerId: myPlayerIdRef.current });
   };
+  return { socket: socketRef.current, roomId: roomIdRef.current, myPlayerId: myPlayerIdRef.current, myMark, board, currentTurn, players, winningLine, gameOver, gameResult, afkWarning, isMyTurn, handleCellPress };
+}
+function TictactoeBoard({ style, layout = "board-only", showAfkWarning = true, onLeave }) {
+  const { session } = useBetaGamer();
+  if (session.game !== "tictactoe") return null;
+  const game = useTictactoeGame();
+  const { myMark, board, winningLine, gameOver, gameResult, afkWarning, isMyTurn, handleCellPress } = game;
+  const myPlayer = session.players[0];
   const screenWidth = import_react_native8.Dimensions.get("window").width;
   const boardSize = screenWidth - 32;
   const cellSize = boardSize / 3;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: [styles4.container, style], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles4.playerRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: styles4.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+  const boardEl = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: { width: boardSize, height: boardSize, flexDirection: "row", flexWrap: "wrap" }, children: board.map((cell, idx) => {
+    const isWinning = winningLine?.includes(idx);
+    const isEmpty = cell === null;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_react_native8.TouchableOpacity,
+      {
+        onPress: () => handleCellPress(idx),
+        activeOpacity: 0.8,
+        style: [
+          { width: cellSize, height: cellSize, alignItems: "center", justifyContent: "center", borderWidth: 2, borderColor: "#1e1b4b" },
+          isWinning ? s3.cellWin : isEmpty && isMyTurn && !gameOver ? s3.cellActive : s3.cellIdle
+        ],
+        children: cell ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: [s3.mark, cell === "X" ? s3.markX : s3.markO, isWinning && s3.markWin], children: cell === "X" ? "\u2715" : "\u25CB" }) : isMyTurn && !gameOver ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: [s3.mark, myMark === "X" ? s3.markX : s3.markO, { opacity: 0.2 }], children: myMark === "X" ? "\u2715" : "\u25CB" }) : null
+      },
+      idx
+    );
+  }) });
+  const gameOverModal = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: s3.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: s3.gameOverBox, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === game.myPlayerId ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.gameOverTitle, children: gameResult?.winner === game.myPlayerId ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.gameOverReason, children: gameResult?.reason }),
+    onLeave && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.TouchableOpacity, { style: s3.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.btnPlayAgainText, children: "Play again" }) })
+  ] }) }) });
+  if (layout === "board-only") return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style, children: [
+    boardEl,
+    gameOverModal
+  ] });
+  const opponentName = game.players.find((p) => p.id !== game.myPlayerId)?.username ?? "Waiting\u2026";
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: [s3.container, style], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: s3.playerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: s3.avatar, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.avatarText, children: opponentName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: { flex: 1, marginLeft: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.playerName, children: opponentName }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.playerColor, children: myMark === "X" ? "O" : "X" })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.playerName, children: opponentName }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.playerColor, children: myMark === "X" ? "O" : "X" })
       ] }),
-      !isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.turnIndicator, children: "\u25CF thinking" })
+      !isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.turnIndicator, children: "\u25CF thinking" })
     ] }),
-    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: [styles4.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles4.afkSelf : styles4.afkOpponent], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F Make a move!" : "\u23F3 Opponent is AFK" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.Text, { style: styles4.afkText, children: [
+    showAfkWarning && afkWarning && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: [s3.afkBanner, afkWarning.playerId === game.myPlayerId ? s3.afkSelf : s3.afkOpponent], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.afkText, children: afkWarning.playerId === game.myPlayerId ? "\u26A0\uFE0F Make a move!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.Text, { style: s3.afkText, children: [
         afkWarning.secondsRemaining,
         "s"
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: { width: boardSize, height: boardSize, flexDirection: "row", flexWrap: "wrap" }, children: board.map((cell, idx) => {
-      const isWinning = winningLine?.includes(idx);
-      const isEmpty = cell === null;
-      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-        import_react_native8.TouchableOpacity,
-        {
-          onPress: () => handleCellPress(idx),
-          activeOpacity: 0.8,
-          style: [
-            {
-              width: cellSize,
-              height: cellSize,
-              alignItems: "center",
-              justifyContent: "center",
-              borderWidth: 2,
-              borderColor: "#1e1b4b"
-            },
-            isWinning ? styles4.cellWin : isEmpty && isMyTurn && !gameOver ? styles4.cellActive : styles4.cellIdle
-          ],
-          children: cell ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: [styles4.mark, cell === "X" ? styles4.markX : styles4.markO, isWinning && styles4.markWin], children: cell === "X" ? "\u2715" : "\u25CB" }) : isMyTurn && !gameOver ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: [styles4.mark, myMark === "X" ? styles4.markX : styles4.markO, { opacity: 0.2 }], children: myMark === "X" ? "\u2715" : "\u25CB" }) : null
-        },
-        idx
-      );
-    }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles4.playerRow, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [styles4.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+    boardEl,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: s3.playerRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: [s3.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: { flex: 1, marginLeft: 10 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.playerName, children: myPlayer.displayName }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.playerColor, children: myMark })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.playerName, children: myPlayer.displayName }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.playerColor, children: myMark })
       ] }),
-      isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.turnIndicator, children: "\u25CF your turn" })
+      isMyTurn && !gameOver && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.turnIndicator, children: "\u25CF your turn" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles4.actions, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: s3.actions, children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         import_react_native8.TouchableOpacity,
         {
-          style: styles4.btnResign,
+          style: s3.btnResign,
           disabled: gameOver,
-          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.btnResignText, children: "Resign" })
+          onPress: () => game.socket?.emit("game:resign", { roomId: game.roomId, playerId: game.myPlayerId }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.btnResignText, children: "Resign" })
         }
       ),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.TouchableOpacity, { style: styles4.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.btnLeaveText, children: "Leave" }) })
+      onLeave && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.TouchableOpacity, { style: s3.btnLeave, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: s3.btnLeaveText, children: "Leave" }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.View, { style: styles4.modalOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native8.View, { style: styles4.gameOverBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.gameOverReason, children: gameResult?.reason }),
-      onLeave && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.TouchableOpacity, { style: styles4.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native8.Text, { style: styles4.btnPlayAgainText, children: "Play again" }) })
-    ] }) }) })
+    gameOverModal
   ] });
 }
-var styles4 = import_react_native8.StyleSheet.create({
+var s3 = import_react_native8.StyleSheet.create({
   container: { flex: 1, backgroundColor: "#0a0a0f", alignItems: "center", padding: 16, gap: 10 },
   playerRow: { flexDirection: "row", alignItems: "center", backgroundColor: "#0f172a", borderRadius: 12, padding: 12, width: "100%" },
   avatar: { width: 32, height: 32, borderRadius: 16, backgroundColor: "#334155", alignItems: "center", justifyContent: "center" },
@@ -1233,16 +1287,16 @@ var styles4 = import_react_native8.StyleSheet.create({
 });
 
 // src/components/subway-runner/index.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_native9 = require("react-native");
 
 // src/components/GameWebView.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_native_webview = require("react-native-webview");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function GameWebView({ game, style, showAfkWarning = true }) {
   const { token, serverUrl, session } = useBetaGamer();
-  const webViewRef = (0, import_react8.useRef)(null);
+  const webViewRef = (0, import_react9.useRef)(null);
   if (session.game !== game) return null;
   const uri = showAfkWarning ? `${serverUrl}/embed/${game}` : `${serverUrl}/embed/${game}?afkWarning=0`;
   const initScript = `
@@ -1270,10 +1324,10 @@ function SubwayRunnerGame({ style }) {
 }
 function SubwayRunnerScore({ style, textStyle }) {
   const socket = useSocket();
-  const [score, setScore] = (0, import_react9.useState)(0);
-  (0, import_react9.useEffect)(() => {
+  const [score, setScore] = (0, import_react10.useState)(0);
+  (0, import_react10.useEffect)(() => {
     if (!socket) return;
-    socket.on("runner:score", (s) => setScore(s));
+    socket.on("runner:score", (s4) => setScore(s4));
     return () => {
       socket.off("runner:score");
     };
@@ -1282,8 +1336,8 @@ function SubwayRunnerScore({ style, textStyle }) {
 }
 function SubwayRunnerLives({ style, lifeStyle }) {
   const socket = useSocket();
-  const [lives, setLives] = (0, import_react9.useState)(3);
-  (0, import_react9.useEffect)(() => {
+  const [lives, setLives] = (0, import_react10.useState)(3);
+  (0, import_react10.useEffect)(() => {
     if (!socket) return;
     socket.on("runner:lives", (l) => setLives(l));
     return () => {
@@ -1306,8 +1360,13 @@ function SubwayRunnerLives({ style, lifeStyle }) {
   TictactoeBoard,
   Timer,
   useBetaGamer,
+  useCheckersGame,
+  useChessGame,
+  useConnect,
+  useConnect4Game,
   useGameState,
   useSession,
   useSocket,
-  useTheme
+  useTheme,
+  useTictactoeGame
 });