@beta-gamer/react-native 0.1.18 → 0.1.21

package/dist/index.mjs

@@ -47,7 +47,7 @@ function decodeToken(token) {
   return JSON.parse(base64Decode(parts[1]));
 }
 var BetaGamerContext = createContext(null);
-function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io", children }) {
+function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io", connectSocket = true, children }) {
   const session = decodeToken(token);
   const [socket, setSocket] = useState(null);
   const [gameState, setGameState] = useState({
@@ -55,6 +55,7 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", so
     players: session.players
   });
   useEffect(() => {
+    if (!connectSocket) return;
     const s = io(`${serverUrl}/${session.game}`, {
       auth: { token },
       path: socketPath,
@@ -152,46 +153,339 @@ function Timer({ player, initialSeconds = 600, style, textStyle }) {
   ] }) });
 }
 
-// src/components/GameWebView.tsx
-import { useRef } from "react";
-import { WebView } from "react-native-webview";
-import { jsx as jsx4 } from "react/jsx-runtime";
-function GameWebView({ game, style }) {
+// src/components/chess/ChessBoard.tsx
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import {
+  View as View3,
+  Text as Text3,
+  TouchableOpacity,
+  Modal,
+  StyleSheet,
+  Dimensions
+} from "react-native";
+import { Chess } from "chess.js";
+import { io as io2 } from "socket.io-client";
+import { jsx as jsx4, jsxs as jsxs3 } from "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 }) {
   const { token, serverUrl, session } = useBetaGamer();
-  const webViewRef = useRef(null);
-  if (session.game !== game) return null;
-  const initScript = `
-    window.__BG_TOKEN__ = ${JSON.stringify(token)};
-    window.postMessage(JSON.stringify({ type: 'bg:init', token: ${JSON.stringify(token)} }), '*');
-    true;
-  `;
-  return /* @__PURE__ */ jsx4(
-    WebView,
-    {
-      ref: webViewRef,
-      source: { uri: `${serverUrl}/embed/${game}` },
-      injectedJavaScriptBeforeContentLoaded: initScript,
-      style: [{ flex: 1 }, style],
-      allowsInlineMediaPlayback: true,
-      mediaPlaybackRequiresUserAction: false
+  const myPlayer = session.players[0];
+  const socketRef = useRef(null);
+  const roomIdRef = useRef(null);
+  const myPlayerIdRef = useRef(myPlayer?.id ?? "");
+  const afkTimerRef = useRef(null);
+  const chessRef = useRef(new Chess());
+  const [fen, setFen] = useState3("start");
+  const [myColor, setMyColor] = useState3("white");
+  const [currentTurn, setCurrentTurn] = useState3(0);
+  const [players, setPlayers] = useState3([]);
+  const [clocks, setClocks] = useState3({ self: 600, opponent: 600 });
+  const [selected, setSelected] = useState3(null);
+  const [legalMoves, setLegalMoves] = useState3([]);
+  const [lastMove, setLastMove] = useState3(null);
+  const [gameOver, setGameOver] = useState3(false);
+  const [gameResult, setGameResult] = useState3(null);
+  const [afkWarning, setAfkWarning] = useState3(null);
+  const [promotionMove, setPromotionMove] = useState3(null);
+  const [moveHistory, setMoveHistory] = useState3([]);
+  if (session.game !== "chess") return null;
+  const isMyTurn = players.length > 0 ? myColor === "white" ? currentTurn === 0 : currentTurn === 1 : false;
+  useEffect3(() => {
+    const s = io2(`${serverUrl}/chess`, {
+      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) => {
+      roomIdRef.current = d.roomId;
+      myPlayerIdRef.current = d.playerId;
+      setMyColor(d.color);
+      chessRef.current.load(d.fen);
+      setFen(d.fen);
+      setCurrentTurn(d.currentTurn ?? 0);
+      setPlayers(d.players ?? []);
+      if (d.playerTimers) {
+        const vals = Object.values(d.playerTimers);
+        setClocks({ self: Math.floor((vals[0] ?? 6e5) / 1e3), opponent: Math.floor((vals[1] ?? 6e5) / 1e3) });
+      }
+    });
+    s.on("game:move:made", (d) => {
+      chessRef.current.load(d.fen);
+      setFen(d.fen);
+      setCurrentTurn(d.currentTurn ?? 0);
+      if (d.move) {
+        setLastMove({ from: d.move.from, to: d.move.to });
+        if (d.move.san) setMoveHistory((prev) => [...prev, { san: d.move.san }]);
+      }
+      setSelected(null);
+      setLegalMoves([]);
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.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) => {
+      setAfkWarning(d);
+      if (afkTimerRef.current) clearInterval(afkTimerRef.current);
+      afkTimerRef.current = setInterval(() => {
+        setAfkWarning((prev) => {
+          if (!prev || prev.secondsRemaining <= 1) {
+            clearInterval(afkTimerRef.current);
+            afkTimerRef.current = null;
+            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            return prev;
+          }
+          return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
+        });
+      }, 1e3);
+    });
+    s.on("chess:afk_warning_cleared", () => {
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.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)) });
+      }
+    });
+    s.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();
+      socketRef.current = null;
+    };
+  }, [token, serverUrl]);
+  const handleSquarePress = (square) => {
+    if (gameOver || !isMyTurn) return;
+    const chess2 = chessRef.current;
+    if (selected) {
+      if (legalMoves.includes(square)) {
+        const piece = chess2.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 });
+          setSelected(null);
+          setLegalMoves([]);
+          return;
+        }
+        emitMove(selected, square);
+        setSelected(null);
+        setLegalMoves([]);
+      } else {
+        const piece = chess2.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));
+        } else {
+          setSelected(null);
+          setLegalMoves([]);
+        }
+      }
+    } else {
+      const piece = chess2.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));
+      }
     }
-  );
-}
-
-// src/components/chess/ChessBoard.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-function ChessBoard({ style }) {
-  return /* @__PURE__ */ jsx5(GameWebView, { game: "chess", style });
+  };
+  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 formatClock = (s) => `${Math.floor(s / 60).toString().padStart(2, "0")}:${(s % 60).toString().padStart(2, "0")}`;
+  const boardSize = Math.min(Dimensions.get("window").width, Dimensions.get("window").height) - 32;
+  const squareSize = boardSize / 8;
+  const files = ["a", "b", "c", "d", "e", "f", "g", "h"];
+  const ranks = ["8", "7", "6", "5", "4", "3", "2", "1"];
+  if (myColor === "black") {
+    files.reverse();
+    ranks.reverse();
+  }
+  const chess = chessRef.current;
+  const opponentName = players.find((p) => p.id !== myPlayerIdRef.current)?.username ?? "Waiting\u2026";
+  return /* @__PURE__ */ jsxs3(View3, { style: [styles.container, style], children: [
+    /* @__PURE__ */ jsxs3(View3, { style: styles.playerRow, children: [
+      /* @__PURE__ */ jsx4(View3, { style: styles.avatar, children: /* @__PURE__ */ jsx4(Text3, { style: styles.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs3(View3, { style: { flex: 1, marginLeft: 10 }, children: [
+        /* @__PURE__ */ jsx4(Text3, { style: styles.playerName, children: opponentName }),
+        /* @__PURE__ */ jsx4(Text3, { style: styles.playerColor, children: myColor === "white" ? "Black" : "White" })
+      ] }),
+      /* @__PURE__ */ jsx4(Text3, { style: [styles.clock, clocks.opponent < 30 && styles.clockDanger], children: formatClock(clocks.opponent) })
+    ] }),
+    showAfkWarning && afkWarning && /* @__PURE__ */ jsxs3(View3, { style: [styles.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles.afkBannerSelf : styles.afkBannerOpponent], children: [
+      /* @__PURE__ */ jsx4(Text3, { style: styles.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F You are AFK \u2014 make a move!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ jsxs3(Text3, { style: styles.afkText, children: [
+        afkWarning.secondsRemaining,
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(View3, { style: { width: boardSize, height: boardSize }, children: ranks.map((rank, rowIdx) => /* @__PURE__ */ jsx4(View3, { 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__ */ jsxs3(
+        TouchableOpacity,
+        {
+          onPress: () => handleSquarePress(square),
+          activeOpacity: 0.85,
+          style: [{ width: squareSize, height: squareSize, backgroundColor: bg, alignItems: "center", justifyContent: "center" }],
+          children: [
+            piece && /* @__PURE__ */ jsx4(Text3, { 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__ */ jsx4(View3, { style: [
+              styles.legalDot,
+              piece ? { ...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)) }),
+    /* @__PURE__ */ jsxs3(View3, { style: styles.playerRow, children: [
+      /* @__PURE__ */ jsx4(View3, { style: [styles.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ jsx4(Text3, { style: styles.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs3(View3, { style: { flex: 1, marginLeft: 10 }, children: [
+        /* @__PURE__ */ jsx4(Text3, { style: styles.playerName, children: myPlayer.displayName }),
+        /* @__PURE__ */ jsx4(Text3, { style: styles.playerColor, children: myColor })
+      ] }),
+      /* @__PURE__ */ jsx4(Text3, { style: [styles.clock, clocks.self < 30 && styles.clockDanger], children: formatClock(clocks.self) })
+    ] }),
+    /* @__PURE__ */ jsxs3(View3, { style: styles.actions, children: [
+      /* @__PURE__ */ jsx4(
+        TouchableOpacity,
+        {
+          style: styles.btnResign,
+          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
+          disabled: gameOver,
+          children: /* @__PURE__ */ jsx4(Text3, { style: styles.btnResignText, children: "Resign" })
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        TouchableOpacity,
+        {
+          style: styles.btnDraw,
+          onPress: () => socketRef.current?.emit("game:draw:offer", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
+          disabled: gameOver,
+          children: /* @__PURE__ */ jsx4(Text3, { style: styles.btnDrawText, children: "Offer draw" })
+        }
+      ),
+      onLeave && /* @__PURE__ */ jsx4(TouchableOpacity, { style: styles.btnLeave, onPress: onLeave, children: /* @__PURE__ */ jsx4(Text3, { style: styles.btnLeaveText, children: "Leave" }) })
+    ] }),
+    /* @__PURE__ */ jsx4(Modal, { visible: !!promotionMove, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx4(View3, { style: styles.modalOverlay, children: /* @__PURE__ */ jsxs3(View3, { style: styles.promotionBox, children: [
+      /* @__PURE__ */ jsx4(Text3, { style: styles.promotionTitle, children: "Promote pawn" }),
+      /* @__PURE__ */ jsx4(View3, { style: { flexDirection: "row", gap: 12 }, children: ["q", "r", "b", "n"].map((p) => /* @__PURE__ */ jsx4(
+        TouchableOpacity,
+        {
+          style: styles.promotionPiece,
+          onPress: () => {
+            if (promotionMove) emitMove(promotionMove.from, promotionMove.to, p);
+            setPromotionMove(null);
+          },
+          children: /* @__PURE__ */ jsx4(Text3, { style: { fontSize: 36 }, children: PIECES[p]?.[myColor === "white" ? "white" : "black"] })
+        },
+        p
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ jsx4(Modal, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx4(View3, { style: styles.modalOverlay, children: /* @__PURE__ */ jsxs3(View3, { style: styles.gameOverBox, children: [
+      /* @__PURE__ */ jsx4(Text3, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+      /* @__PURE__ */ jsx4(Text3, { style: styles.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+      /* @__PURE__ */ jsx4(Text3, { style: styles.gameOverReason, children: gameResult?.reason }),
+      onLeave && /* @__PURE__ */ jsx4(TouchableOpacity, { style: styles.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ jsx4(Text3, { style: styles.btnPlayAgainText, children: "Play again" }) })
+    ] }) }) })
+  ] });
 }
+var styles = 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" },
+  avatarText: { color: "#fff", fontWeight: "bold", fontSize: 13 },
+  playerName: { color: "#fff", fontWeight: "600", fontSize: 14 },
+  playerColor: { color: "#64748b", fontSize: 12, textTransform: "capitalize" },
+  clock: { color: "#fff", fontFamily: "monospace", fontSize: 18, fontWeight: "bold" },
+  clockDanger: { color: "#f87171" },
+  piece: { lineHeight: void 0, includeFontPadding: false },
+  whitePiece: { color: "#fff", textShadowColor: "rgba(0,0,0,0.8)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 3 },
+  blackPiece: { color: "#1a1a1a", textShadowColor: "rgba(255,255,255,0.3)", textShadowOffset: { width: 0, height: 1 }, textShadowRadius: 2 },
+  legalDot: { position: "absolute" },
+  afkBanner: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", borderRadius: 10, paddingHorizontal: 14, paddingVertical: 8, width: "100%" },
+  afkBannerSelf: { backgroundColor: "rgba(127,29,29,0.6)", borderWidth: 1, borderColor: "#dc2626" },
+  afkBannerOpponent: { backgroundColor: "rgba(78,63,0,0.4)", borderWidth: 1, borderColor: "#a16207" },
+  afkText: { color: "#fecaca", fontWeight: "600", fontSize: 13 },
+  actions: { flexDirection: "row", gap: 8, width: "100%" },
+  btnResign: { flex: 1, borderWidth: 1, borderColor: "#7f1d1d", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnResignText: { color: "#f87171", fontSize: 13 },
+  btnDraw: { flex: 1, borderWidth: 1, borderColor: "#334155", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnDrawText: { color: "#94a3b8", fontSize: 13 },
+  btnLeave: { flex: 1, borderWidth: 1, borderColor: "#334155", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnLeaveText: { color: "#94a3b8", fontSize: 13 },
+  modalOverlay: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", alignItems: "center", justifyContent: "center" },
+  promotionBox: { backgroundColor: "#1e293b", borderRadius: 16, padding: 24, alignItems: "center", gap: 16 },
+  promotionTitle: { color: "#fff", fontWeight: "bold", fontSize: 16 },
+  promotionPiece: { width: 60, height: 60, backgroundColor: "#f0d9b5", borderRadius: 8, alignItems: "center", justifyContent: "center" },
+  gameOverBox: { backgroundColor: "#1e293b", borderRadius: 20, padding: 32, alignItems: "center", width: 280 },
+  gameOverTitle: { color: "#fff", fontWeight: "bold", fontSize: 22, marginBottom: 4 },
+  gameOverReason: { color: "#94a3b8", fontSize: 14, marginBottom: 20, textTransform: "capitalize" },
+  btnPlayAgain: { backgroundColor: "#d97706", borderRadius: 10, paddingVertical: 12, paddingHorizontal: 32 },
+  btnPlayAgainText: { color: "#fff", fontWeight: "bold", fontSize: 15 }
+});
 
 // src/components/chess/ChessMoveHistory.tsx
-import { useEffect as useEffect3, useState as useState3 } from "react";
-import { View as View3, Text as Text3, ScrollView } from "react-native";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useState as useState4 } from "react";
+import { View as View4, Text as Text4, ScrollView } from "react-native";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function ChessMoveHistory({ style, rowStyle, textStyle }) {
   const socket = useSocket();
-  const [moves, setMoves] = useState3([]);
-  useEffect3(() => {
+  const [moves, setMoves] = useState4([]);
+  useEffect4(() => {
     if (!socket) return;
     const handler = ({ san, moveIndex }) => {
       const moveNumber = Math.floor(moveIndex / 2) + 1;
@@ -212,7 +506,7 @@ function ChessMoveHistory({ style, rowStyle, textStyle }) {
       socket.off("chess:move", handler);
     };
   }, [socket]);
-  return /* @__PURE__ */ jsx6(ScrollView, { style, children: moves.map(({ moveNumber, white, black }) => /* @__PURE__ */ jsx6(View3, { style: rowStyle, children: /* @__PURE__ */ jsxs3(Text3, { style: textStyle, children: [
+  return /* @__PURE__ */ jsx5(ScrollView, { style, children: moves.map(({ moveNumber, white, black }) => /* @__PURE__ */ jsx5(View4, { style: rowStyle, children: /* @__PURE__ */ jsxs4(Text4, { style: textStyle, children: [
     moveNumber,
     ". ",
     white,
@@ -221,53 +515,769 @@ function ChessMoveHistory({ style, rowStyle, textStyle }) {
 }
 
 // src/components/checkers/index.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function CheckersBoard({ style }) {
-  return /* @__PURE__ */ jsx7(GameWebView, { game: "checkers", style });
+import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import {
+  View as View5,
+  Text as Text5,
+  TouchableOpacity as TouchableOpacity2,
+  Modal as Modal2,
+  StyleSheet as StyleSheet2,
+  Dimensions as Dimensions2
+} from "react-native";
+import { io as io3 } from "socket.io-client";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function CheckersBoard({ style, showAfkWarning = true, onLeave }) {
+  const { token, serverUrl, session } = useBetaGamer();
+  const myPlayer = session.players[0];
+  const socketRef = useRef2(null);
+  const roomIdRef = useRef2(null);
+  const myPlayerIdRef = useRef2(myPlayer?.id ?? "");
+  const afkTimerRef = useRef2(null);
+  const [board, setBoard] = useState5(Array(64).fill(null));
+  const [myColor, setMyColor] = useState5("red");
+  const [currentTurn, setCurrentTurn] = useState5(0);
+  const [players, setPlayers] = useState5([]);
+  const [selectedPiece, setSelectedPiece] = useState5(null);
+  const [validMoves, setValidMoves] = useState5([]);
+  const [gameOver, setGameOver] = useState5(false);
+  const [gameResult, setGameResult] = useState5(null);
+  const [afkWarning, setAfkWarning] = useState5(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";
+  useEffect5(() => {
+    const s = io3(`${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) => {
+      roomIdRef.current = d.roomId;
+      myPlayerIdRef.current = d.playerId;
+      setMyColor(d.color ?? "red");
+      setBoard(d.board ?? Array(64).fill(null));
+      setCurrentTurn(d.currentTurn ?? 0);
+      setPlayers(d.players ?? []);
+    });
+    s.on("game:move:made", (d) => {
+      setBoard(d.board);
+      setCurrentTurn(d.currentTurn ?? 0);
+      setSelectedPiece(null);
+      setValidMoves([]);
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.on("game:valid_moves", (d) => {
+      setSelectedPiece(d.position);
+      setValidMoves(d.moves);
+    });
+    s.on("checkers:afk_warning", (d) => {
+      setAfkWarning(d);
+      if (afkTimerRef.current) clearInterval(afkTimerRef.current);
+      afkTimerRef.current = setInterval(() => {
+        setAfkWarning((prev) => {
+          if (!prev || prev.secondsRemaining <= 1) {
+            clearInterval(afkTimerRef.current);
+            afkTimerRef.current = null;
+            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            return prev;
+          }
+          return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
+        });
+      }, 1e3);
+    });
+    s.on("checkers:afk_warning_cleared", () => {
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.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)) });
+      }
+    });
+    s.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();
+      socketRef.current = null;
+    };
+  }, [token, serverUrl]);
+  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 }
+      });
+      setSelectedPiece(null);
+      setValidMoves([]);
+      return;
+    }
+    if (piece && piece.player === myColor) {
+      socketRef.current?.emit("game:get_moves", {
+        roomId: roomIdRef.current,
+        position: pos,
+        playerId: myPlayerIdRef.current
+      });
+    } else {
+      setSelectedPiece(null);
+      setValidMoves([]);
+    }
+  };
+  const screenWidth = Dimensions2.get("window").width;
+  const boardSize = screenWidth - 32;
+  const cellSize = boardSize / 8;
+  const rows = Array.from({ length: 8 }, (_, r) => r);
+  const cols = Array.from({ length: 8 }, (_, c) => c);
+  if (myColor === "black") {
+    rows.reverse();
+    cols.reverse();
+  }
+  return /* @__PURE__ */ jsxs5(View5, { style: [styles2.container, style], children: [
+    /* @__PURE__ */ jsxs5(View5, { style: styles2.playerRow, children: [
+      /* @__PURE__ */ jsx6(View5, { style: styles2.avatar, children: /* @__PURE__ */ jsx6(Text5, { style: styles2.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs5(View5, { style: { flex: 1, marginLeft: 10 }, children: [
+        /* @__PURE__ */ jsx6(Text5, { style: styles2.playerName, children: opponentName }),
+        /* @__PURE__ */ jsx6(Text5, { style: [styles2.playerColor, { color: opponentColor === "red" ? "#f87171" : "#94a3b8" }], children: opponentColor })
+      ] }),
+      !isMyTurn && !gameOver && /* @__PURE__ */ jsx6(Text5, { style: styles2.turnIndicator, children: "\u25CF thinking" })
+    ] }),
+    showAfkWarning && afkWarning && /* @__PURE__ */ jsxs5(View5, { style: [styles2.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles2.afkSelf : styles2.afkOpponent], children: [
+      /* @__PURE__ */ jsx6(Text5, { style: styles2.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F Make a move!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ jsxs5(Text5, { style: styles2.afkText, children: [
+        afkWarning.secondsRemaining,
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx6(View5, { style: { width: boardSize, height: boardSize, borderWidth: 3, borderColor: "#92400e", borderRadius: 4 }, children: rows.map((row) => /* @__PURE__ */ jsx6(View5, { 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__ */ jsxs5(
+        TouchableOpacity2,
+        {
+          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__ */ jsx6(View5, { 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__ */ jsx6(Text5, { style: { fontSize: cellSize * 0.35 }, children: "\u{1F451}" }) }),
+            moveTarget && !piece && /* @__PURE__ */ jsx6(View5, { style: [
+              styles2.moveDot,
+              { width: cellSize * 0.3, height: cellSize * 0.3, borderRadius: cellSize * 0.15 },
+              isCapture ? styles2.moveDotCapture : styles2.moveDotNormal
+            ] }),
+            moveTarget && piece && /* @__PURE__ */ jsx6(View5, { style: [StyleSheet2.absoluteFill, styles2.captureRing, { borderRadius: cellSize / 2 }] })
+          ]
+        },
+        col
+      );
+    }) }, row)) }),
+    /* @__PURE__ */ jsxs5(View5, { style: styles2.playerRow, children: [
+      /* @__PURE__ */ jsx6(View5, { style: [styles2.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ jsx6(Text5, { style: styles2.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs5(View5, { style: { flex: 1, marginLeft: 10 }, children: [
+        /* @__PURE__ */ jsx6(Text5, { style: styles2.playerName, children: myPlayer.displayName }),
+        /* @__PURE__ */ jsx6(Text5, { style: [styles2.playerColor, { color: myColor === "red" ? "#f87171" : "#94a3b8" }], children: myColor })
+      ] }),
+      isMyTurn && !gameOver && /* @__PURE__ */ jsx6(Text5, { style: styles2.turnIndicator, children: "\u25CF your turn" })
+    ] }),
+    /* @__PURE__ */ jsxs5(View5, { style: styles2.actions, children: [
+      /* @__PURE__ */ jsx6(
+        TouchableOpacity2,
+        {
+          style: styles2.btnResign,
+          disabled: gameOver,
+          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
+          children: /* @__PURE__ */ jsx6(Text5, { style: styles2.btnResignText, children: "Resign" })
+        }
+      ),
+      onLeave && /* @__PURE__ */ jsx6(TouchableOpacity2, { style: styles2.btnLeave, onPress: onLeave, children: /* @__PURE__ */ jsx6(Text5, { style: styles2.btnLeaveText, children: "Leave" }) })
+    ] }),
+    /* @__PURE__ */ jsx6(Modal2, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx6(View5, { style: styles2.modalOverlay, children: /* @__PURE__ */ jsxs5(View5, { style: styles2.gameOverBox, children: [
+      /* @__PURE__ */ jsx6(Text5, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+      /* @__PURE__ */ jsx6(Text5, { style: styles2.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+      /* @__PURE__ */ jsx6(Text5, { style: styles2.gameOverReason, children: gameResult?.reason }),
+      onLeave && /* @__PURE__ */ jsx6(TouchableOpacity2, { style: styles2.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ jsx6(Text5, { style: styles2.btnPlayAgainText, children: "Play again" }) })
+    ] }) }) })
+  ] });
 }
+var styles2 = StyleSheet2.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" },
+  avatarText: { color: "#fff", fontWeight: "bold", fontSize: 13 },
+  playerName: { color: "#fff", fontWeight: "600", fontSize: 14 },
+  playerColor: { fontSize: 12, textTransform: "capitalize" },
+  turnIndicator: { color: "#a78bfa", fontSize: 12 },
+  cellSelected: { borderWidth: 3, borderColor: "#facc15" },
+  cellValidMove: { borderWidth: 3, borderColor: "#4ade80" },
+  piece: { borderRadius: 999, alignItems: "center", justifyContent: "center" },
+  pieceRed: { backgroundColor: "#ef4444", borderWidth: 2, borderColor: "#991b1b" },
+  pieceBlack: { backgroundColor: "#374151", borderWidth: 2, borderColor: "#111827" },
+  pieceSelected: { transform: [{ scale: 1.1 }] },
+  moveDot: { position: "absolute" },
+  moveDotNormal: { backgroundColor: "rgba(74,222,128,0.6)" },
+  moveDotCapture: { backgroundColor: "rgba(251,146,60,0.7)" },
+  captureRing: { borderWidth: 3, borderColor: "rgba(251,146,60,0.7)" },
+  afkBanner: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", borderRadius: 10, paddingHorizontal: 14, paddingVertical: 8, width: "100%" },
+  afkSelf: { backgroundColor: "rgba(127,29,29,0.6)", borderWidth: 1, borderColor: "#dc2626" },
+  afkOpponent: { backgroundColor: "rgba(78,63,0,0.4)", borderWidth: 1, borderColor: "#a16207" },
+  afkText: { color: "#fecaca", fontWeight: "600", fontSize: 13 },
+  actions: { flexDirection: "row", gap: 8, width: "100%" },
+  btnResign: { flex: 1, borderWidth: 1, borderColor: "#7f1d1d", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnResignText: { color: "#f87171", fontSize: 13 },
+  btnLeave: { flex: 1, borderWidth: 1, borderColor: "#334155", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnLeaveText: { color: "#94a3b8", fontSize: 13 },
+  modalOverlay: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", alignItems: "center", justifyContent: "center" },
+  gameOverBox: { backgroundColor: "#1e293b", borderRadius: 20, padding: 32, alignItems: "center", width: 280 },
+  gameOverTitle: { color: "#fff", fontWeight: "bold", fontSize: 22, marginBottom: 4 },
+  gameOverReason: { color: "#94a3b8", fontSize: 14, marginBottom: 20, textTransform: "capitalize" },
+  btnPlayAgain: { backgroundColor: "#d97706", borderRadius: 10, paddingVertical: 12, paddingHorizontal: 32 },
+  btnPlayAgainText: { color: "#fff", fontWeight: "bold", fontSize: 15 }
+});
 
 // src/components/connect4/index.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-function Connect4Board({ style }) {
-  return /* @__PURE__ */ jsx8(GameWebView, { game: "connect4", style });
+import { useEffect as useEffect6, useRef as useRef3, useState as useState6 } from "react";
+import {
+  View as View6,
+  Text as Text6,
+  TouchableOpacity as TouchableOpacity3,
+  Modal as Modal3,
+  StyleSheet as StyleSheet3,
+  Dimensions as Dimensions3
+} from "react-native";
+import { io as io4 } from "socket.io-client";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function Connect4Board({ style, showAfkWarning = true, onLeave }) {
+  const { token, serverUrl, session } = useBetaGamer();
+  const myPlayer = session.players[0];
+  const socketRef = useRef3(null);
+  const roomIdRef = useRef3(null);
+  const myPlayerIdRef = useRef3(myPlayer?.id ?? "");
+  const afkTimerRef = useRef3(null);
+  const ROWS = 6;
+  const COLS = 7;
+  const [board, setBoard] = useState6(Array(ROWS * COLS).fill(null));
+  const [myColor, setMyColor] = useState6("red");
+  const [currentTurn, setCurrentTurn] = useState6(0);
+  const [players, setPlayers] = useState6([]);
+  const [lastMove, setLastMove] = useState6(null);
+  const [winningCells, setWinningCells] = useState6(null);
+  const [gameOver, setGameOver] = useState6(false);
+  const [gameResult, setGameResult] = useState6(null);
+  const [afkWarning, setAfkWarning] = useState6(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";
+  useEffect6(() => {
+    const s = io4(`${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) => {
+      roomIdRef.current = d.roomId;
+      myPlayerIdRef.current = d.playerId;
+      setMyColor(d.color ?? "red");
+      setBoard(d.board ?? Array(ROWS * COLS).fill(null));
+      setCurrentTurn(d.currentTurn ?? 0);
+      setPlayers(d.players ?? []);
+    });
+    s.on("game:move:made", (d) => {
+      setBoard(d.board);
+      setCurrentTurn(d.currentTurn ?? 0);
+      if (d.lastMove != null) setLastMove(d.lastMove);
+      if (d.winningCells) setWinningCells(d.winningCells);
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.on("connect4:afk_warning", (d) => {
+      setAfkWarning(d);
+      if (afkTimerRef.current) clearInterval(afkTimerRef.current);
+      afkTimerRef.current = setInterval(() => {
+        setAfkWarning((prev) => {
+          if (!prev || prev.secondsRemaining <= 1) {
+            clearInterval(afkTimerRef.current);
+            afkTimerRef.current = null;
+            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            return prev;
+          }
+          return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
+        });
+      }, 1e3);
+    });
+    s.on("connect4:afk_warning_cleared", () => {
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.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)) });
+      }
+    });
+    s.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();
+      socketRef.current = null;
+    };
+  }, [token, serverUrl]);
+  const handleColumnPress = (col) => {
+    if (!isMyTurn || gameOver) return;
+    if (board[col] !== null) return;
+    socketRef.current?.emit("game:move", { roomId: roomIdRef.current, column: col, playerId: myPlayerIdRef.current });
+  };
+  const screenWidth = Dimensions3.get("window").width;
+  const boardWidth = screenWidth - 32;
+  const cellSize = boardWidth / COLS;
+  const ColorDot = ({ color, size = 12 }) => /* @__PURE__ */ jsx7(View6, { style: { width: size, height: size, borderRadius: size / 2, backgroundColor: color === "red" ? "#ef4444" : "#eab308", marginRight: 6 } });
+  return /* @__PURE__ */ jsxs6(View6, { style: [styles3.container, style], children: [
+    /* @__PURE__ */ jsxs6(View6, { style: styles3.playerRow, children: [
+      /* @__PURE__ */ jsx7(View6, { style: styles3.avatar, children: /* @__PURE__ */ jsx7(Text6, { style: styles3.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs6(View6, { style: { flex: 1, marginLeft: 10, flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx7(ColorDot, { color: opponentColor }),
+        /* @__PURE__ */ jsxs6(View6, { children: [
+          /* @__PURE__ */ jsx7(Text6, { style: styles3.playerName, children: opponentName }),
+          /* @__PURE__ */ jsx7(Text6, { style: styles3.playerColor, children: opponentColor })
+        ] })
+      ] }),
+      !isMyTurn && !gameOver && /* @__PURE__ */ jsx7(Text6, { style: styles3.turnIndicator, children: "\u25CF thinking" })
+    ] }),
+    showAfkWarning && afkWarning && /* @__PURE__ */ jsxs6(View6, { style: [styles3.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles3.afkSelf : styles3.afkOpponent], children: [
+      /* @__PURE__ */ jsx7(Text6, { style: styles3.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F Drop a piece!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ jsxs6(Text6, { style: styles3.afkText, children: [
+        afkWarning.secondsRemaining,
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6(View6, { style: { width: boardWidth, backgroundColor: "#2563eb", borderRadius: 12, padding: 6 }, children: [
+      /* @__PURE__ */ jsx7(View6, { style: { flexDirection: "row" }, children: Array.from({ length: COLS }, (_, col) => {
+        const canDrop = isMyTurn && !gameOver && board[col] === null;
+        return /* @__PURE__ */ jsx7(
+          TouchableOpacity3,
+          {
+            onPress: () => handleColumnPress(col),
+            activeOpacity: 0.7,
+            style: { width: cellSize, height: 28, alignItems: "center", justifyContent: "center" },
+            children: canDrop && /* @__PURE__ */ jsx7(Text6, { style: { color: "#fff", fontSize: 14 }, children: "\u25BC" })
+          },
+          col
+        );
+      }) }),
+      Array.from({ length: ROWS }, (_, row) => /* @__PURE__ */ jsx7(View6, { 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__ */ jsx7(View6, { style: { width: cellSize, height: cellSize, padding: 3 }, children: /* @__PURE__ */ jsx7(View6, { style: [styles3.cell, isWinning && styles3.cellWin], children: piece && /* @__PURE__ */ jsx7(View6, { style: [
+          styles3.piece,
+          piece === "red" ? styles3.pieceRed : styles3.pieceYellow,
+          isWinning && styles3.pieceWin,
+          isLast && !isWinning && styles3.pieceLast
+        ] }) }) }, col);
+      }) }, row))
+    ] }),
+    /* @__PURE__ */ jsxs6(View6, { style: styles3.playerRow, children: [
+      /* @__PURE__ */ jsx7(View6, { style: [styles3.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ jsx7(Text6, { style: styles3.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs6(View6, { style: { flex: 1, marginLeft: 10, flexDirection: "row", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx7(ColorDot, { color: myColor }),
+        /* @__PURE__ */ jsxs6(View6, { children: [
+          /* @__PURE__ */ jsx7(Text6, { style: styles3.playerName, children: myPlayer.displayName }),
+          /* @__PURE__ */ jsx7(Text6, { style: styles3.playerColor, children: myColor })
+        ] })
+      ] }),
+      isMyTurn && !gameOver && /* @__PURE__ */ jsx7(Text6, { style: styles3.turnIndicator, children: "\u25CF your turn" })
+    ] }),
+    /* @__PURE__ */ jsxs6(View6, { style: styles3.actions, children: [
+      /* @__PURE__ */ jsx7(
+        TouchableOpacity3,
+        {
+          style: styles3.btnResign,
+          disabled: gameOver,
+          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
+          children: /* @__PURE__ */ jsx7(Text6, { style: styles3.btnResignText, children: "Resign" })
+        }
+      ),
+      onLeave && /* @__PURE__ */ jsx7(TouchableOpacity3, { style: styles3.btnLeave, onPress: onLeave, children: /* @__PURE__ */ jsx7(Text6, { style: styles3.btnLeaveText, children: "Leave" }) })
+    ] }),
+    /* @__PURE__ */ jsx7(Modal3, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx7(View6, { style: styles3.modalOverlay, children: /* @__PURE__ */ jsxs6(View6, { style: styles3.gameOverBox, children: [
+      /* @__PURE__ */ jsx7(Text6, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+      /* @__PURE__ */ jsx7(Text6, { style: styles3.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+      /* @__PURE__ */ jsx7(Text6, { style: styles3.gameOverReason, children: gameResult?.reason }),
+      onLeave && /* @__PURE__ */ jsx7(TouchableOpacity3, { style: styles3.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ jsx7(Text6, { style: styles3.btnPlayAgainText, children: "Play again" }) })
+    ] }) }) })
+  ] });
 }
+var styles3 = StyleSheet3.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" },
+  avatarText: { color: "#fff", fontWeight: "bold", fontSize: 13 },
+  playerName: { color: "#fff", fontWeight: "600", fontSize: 14 },
+  playerColor: { color: "#64748b", fontSize: 12, textTransform: "capitalize" },
+  turnIndicator: { color: "#a78bfa", fontSize: 12 },
+  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 } },
+  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%" },
+  afkSelf: { backgroundColor: "rgba(127,29,29,0.6)", borderWidth: 1, borderColor: "#dc2626" },
+  afkOpponent: { backgroundColor: "rgba(78,63,0,0.4)", borderWidth: 1, borderColor: "#a16207" },
+  afkText: { color: "#fecaca", fontWeight: "600", fontSize: 13 },
+  actions: { flexDirection: "row", gap: 8, width: "100%" },
+  btnResign: { flex: 1, borderWidth: 1, borderColor: "#7f1d1d", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnResignText: { color: "#f87171", fontSize: 13 },
+  btnLeave: { flex: 1, borderWidth: 1, borderColor: "#334155", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnLeaveText: { color: "#94a3b8", fontSize: 13 },
+  modalOverlay: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", alignItems: "center", justifyContent: "center" },
+  gameOverBox: { backgroundColor: "#1e293b", borderRadius: 20, padding: 32, alignItems: "center", width: 280 },
+  gameOverTitle: { color: "#fff", fontWeight: "bold", fontSize: 22, marginBottom: 4 },
+  gameOverReason: { color: "#94a3b8", fontSize: 14, marginBottom: 20, textTransform: "capitalize" },
+  btnPlayAgain: { backgroundColor: "#d97706", borderRadius: 10, paddingVertical: 12, paddingHorizontal: 32 },
+  btnPlayAgainText: { color: "#fff", fontWeight: "bold", fontSize: 15 }
+});
 
 // src/components/tictactoe/index.tsx
+import { useEffect as useEffect7, useRef as useRef4, useState as useState7 } from "react";
+import {
+  View as View7,
+  Text as Text7,
+  TouchableOpacity as TouchableOpacity4,
+  Modal as Modal4,
+  StyleSheet as StyleSheet4,
+  Dimensions as Dimensions4
+} from "react-native";
+import { io as io5 } from "socket.io-client";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function TictactoeBoard({ style, showAfkWarning = true, onLeave }) {
+  const { token, serverUrl, session } = useBetaGamer();
+  const myPlayer = session.players[0];
+  const socketRef = useRef4(null);
+  const roomIdRef = useRef4(null);
+  const myPlayerIdRef = useRef4(myPlayer?.id ?? "");
+  const afkTimerRef = useRef4(null);
+  const [board, setBoard] = useState7(Array(9).fill(null));
+  const [myMark, setMyMark] = useState7("X");
+  const [currentTurn, setCurrentTurn] = useState7(0);
+  const [players, setPlayers] = useState7([]);
+  const [winningLine, setWinningLine] = useState7(null);
+  const [gameOver, setGameOver] = useState7(false);
+  const [gameResult, setGameResult] = useState7(null);
+  const [afkWarning, setAfkWarning] = useState7(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";
+  useEffect7(() => {
+    const s = io5(`${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) => {
+      roomIdRef.current = d.roomId;
+      myPlayerIdRef.current = d.playerId;
+      setMyMark(d.mark);
+      setBoard(d.board ?? Array(9).fill(null));
+      setCurrentTurn(d.currentTurn ?? 0);
+      setPlayers(d.players ?? []);
+    });
+    s.on("game:move:made", (d) => {
+      setBoard(d.board);
+      setCurrentTurn(d.currentTurn ?? 0);
+      if (d.winningLine) setWinningLine(d.winningLine);
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.on("tictactoe:afk_warning", (d) => {
+      setAfkWarning(d);
+      if (afkTimerRef.current) clearInterval(afkTimerRef.current);
+      afkTimerRef.current = setInterval(() => {
+        setAfkWarning((prev) => {
+          if (!prev || prev.secondsRemaining <= 1) {
+            clearInterval(afkTimerRef.current);
+            afkTimerRef.current = null;
+            if (roomIdRef.current) s.emit("afk:check", { roomId: roomIdRef.current });
+            return prev;
+          }
+          return { ...prev, secondsRemaining: prev.secondsRemaining - 1 };
+        });
+      }, 1e3);
+    });
+    s.on("tictactoe:afk_warning_cleared", () => {
+      if (afkTimerRef.current) {
+        clearInterval(afkTimerRef.current);
+        afkTimerRef.current = null;
+      }
+      setAfkWarning(null);
+    });
+    s.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)) });
+      }
+    });
+    s.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();
+      socketRef.current = null;
+    };
+  }, [token, serverUrl]);
+  const handleCellPress = (idx) => {
+    if (!isMyTurn || gameOver || board[idx]) return;
+    socketRef.current?.emit("game:move", { roomId: roomIdRef.current, position: idx, playerId: myPlayerIdRef.current });
+  };
+  const screenWidth = Dimensions4.get("window").width;
+  const boardSize = screenWidth - 32;
+  const cellSize = boardSize / 3;
+  return /* @__PURE__ */ jsxs7(View7, { style: [styles4.container, style], children: [
+    /* @__PURE__ */ jsxs7(View7, { style: styles4.playerRow, children: [
+      /* @__PURE__ */ jsx8(View7, { style: styles4.avatar, children: /* @__PURE__ */ jsx8(Text7, { style: styles4.avatarText, children: opponentName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs7(View7, { style: { flex: 1, marginLeft: 10 }, children: [
+        /* @__PURE__ */ jsx8(Text7, { style: styles4.playerName, children: opponentName }),
+        /* @__PURE__ */ jsx8(Text7, { style: styles4.playerColor, children: myMark === "X" ? "O" : "X" })
+      ] }),
+      !isMyTurn && !gameOver && /* @__PURE__ */ jsx8(Text7, { style: styles4.turnIndicator, children: "\u25CF thinking" })
+    ] }),
+    showAfkWarning && afkWarning && /* @__PURE__ */ jsxs7(View7, { style: [styles4.afkBanner, afkWarning.playerId === myPlayerIdRef.current ? styles4.afkSelf : styles4.afkOpponent], children: [
+      /* @__PURE__ */ jsx8(Text7, { style: styles4.afkText, children: afkWarning.playerId === myPlayerIdRef.current ? "\u26A0\uFE0F Make a move!" : "\u23F3 Opponent is AFK" }),
+      /* @__PURE__ */ jsxs7(Text7, { style: styles4.afkText, children: [
+        afkWarning.secondsRemaining,
+        "s"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx8(View7, { 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__ */ jsx8(
+        TouchableOpacity4,
+        {
+          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__ */ jsx8(Text7, { style: [styles4.mark, cell === "X" ? styles4.markX : styles4.markO, isWinning && styles4.markWin], children: cell === "X" ? "\u2715" : "\u25CB" }) : isMyTurn && !gameOver ? /* @__PURE__ */ jsx8(Text7, { style: [styles4.mark, myMark === "X" ? styles4.markX : styles4.markO, { opacity: 0.2 }], children: myMark === "X" ? "\u2715" : "\u25CB" }) : null
+        },
+        idx
+      );
+    }) }),
+    /* @__PURE__ */ jsxs7(View7, { style: styles4.playerRow, children: [
+      /* @__PURE__ */ jsx8(View7, { style: [styles4.avatar, { backgroundColor: "#92400e" }], children: /* @__PURE__ */ jsx8(Text7, { style: styles4.avatarText, children: myPlayer.displayName[0]?.toUpperCase() }) }),
+      /* @__PURE__ */ jsxs7(View7, { style: { flex: 1, marginLeft: 10 }, children: [
+        /* @__PURE__ */ jsx8(Text7, { style: styles4.playerName, children: myPlayer.displayName }),
+        /* @__PURE__ */ jsx8(Text7, { style: styles4.playerColor, children: myMark })
+      ] }),
+      isMyTurn && !gameOver && /* @__PURE__ */ jsx8(Text7, { style: styles4.turnIndicator, children: "\u25CF your turn" })
+    ] }),
+    /* @__PURE__ */ jsxs7(View7, { style: styles4.actions, children: [
+      /* @__PURE__ */ jsx8(
+        TouchableOpacity4,
+        {
+          style: styles4.btnResign,
+          disabled: gameOver,
+          onPress: () => socketRef.current?.emit("game:resign", { roomId: roomIdRef.current, playerId: myPlayerIdRef.current }),
+          children: /* @__PURE__ */ jsx8(Text7, { style: styles4.btnResignText, children: "Resign" })
+        }
+      ),
+      onLeave && /* @__PURE__ */ jsx8(TouchableOpacity4, { style: styles4.btnLeave, onPress: onLeave, children: /* @__PURE__ */ jsx8(Text7, { style: styles4.btnLeaveText, children: "Leave" }) })
+    ] }),
+    /* @__PURE__ */ jsx8(Modal4, { visible: gameOver && !!gameResult, transparent: true, animationType: "fade", children: /* @__PURE__ */ jsx8(View7, { style: styles4.modalOverlay, children: /* @__PURE__ */ jsxs7(View7, { style: styles4.gameOverBox, children: [
+      /* @__PURE__ */ jsx8(Text7, { style: { fontSize: 48, marginBottom: 8 }, children: gameResult?.winner === myPlayerIdRef.current ? "\u{1F3C6}" : gameResult?.winner ? "\u{1F614}" : "\u{1F91D}" }),
+      /* @__PURE__ */ jsx8(Text7, { style: styles4.gameOverTitle, children: gameResult?.winner === myPlayerIdRef.current ? "You won!" : gameResult?.winner ? "You lost" : "Draw" }),
+      /* @__PURE__ */ jsx8(Text7, { style: styles4.gameOverReason, children: gameResult?.reason }),
+      onLeave && /* @__PURE__ */ jsx8(TouchableOpacity4, { style: styles4.btnPlayAgain, onPress: onLeave, children: /* @__PURE__ */ jsx8(Text7, { style: styles4.btnPlayAgainText, children: "Play again" }) })
+    ] }) }) })
+  ] });
+}
+var styles4 = StyleSheet4.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" },
+  avatarText: { color: "#fff", fontWeight: "bold", fontSize: 13 },
+  playerName: { color: "#fff", fontWeight: "600", fontSize: 14 },
+  playerColor: { color: "#64748b", fontSize: 12 },
+  turnIndicator: { color: "#a78bfa", fontSize: 12 },
+  cellActive: { backgroundColor: "#4c1d95" },
+  cellIdle: { backgroundColor: "#1e1b4b" },
+  cellWin: { backgroundColor: "#15803d" },
+  mark: { fontSize: 48, fontWeight: "bold", lineHeight: 56 },
+  markX: { color: "#60a5fa" },
+  markO: { color: "#f472b6" },
+  markWin: { color: "#fff" },
+  afkBanner: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", borderRadius: 10, paddingHorizontal: 14, paddingVertical: 8, width: "100%" },
+  afkSelf: { backgroundColor: "rgba(127,29,29,0.6)", borderWidth: 1, borderColor: "#dc2626" },
+  afkOpponent: { backgroundColor: "rgba(78,63,0,0.4)", borderWidth: 1, borderColor: "#a16207" },
+  afkText: { color: "#fecaca", fontWeight: "600", fontSize: 13 },
+  actions: { flexDirection: "row", gap: 8, width: "100%" },
+  btnResign: { flex: 1, borderWidth: 1, borderColor: "#7f1d1d", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnResignText: { color: "#f87171", fontSize: 13 },
+  btnLeave: { flex: 1, borderWidth: 1, borderColor: "#334155", borderRadius: 8, paddingVertical: 8, alignItems: "center" },
+  btnLeaveText: { color: "#94a3b8", fontSize: 13 },
+  modalOverlay: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", alignItems: "center", justifyContent: "center" },
+  gameOverBox: { backgroundColor: "#1e293b", borderRadius: 20, padding: 32, alignItems: "center", width: 280 },
+  gameOverTitle: { color: "#fff", fontWeight: "bold", fontSize: 22, marginBottom: 4 },
+  gameOverReason: { color: "#94a3b8", fontSize: 14, marginBottom: 20, textTransform: "capitalize" },
+  btnPlayAgain: { backgroundColor: "#d97706", borderRadius: 10, paddingVertical: 12, paddingHorizontal: 32 },
+  btnPlayAgainText: { color: "#fff", fontWeight: "bold", fontSize: 15 }
+});
+
+// src/components/subway-runner/index.tsx
+import { useEffect as useEffect8, useState as useState8 } from "react";
+import { View as View8, Text as Text8 } from "react-native";
+
+// src/components/GameWebView.tsx
+import { useRef as useRef5 } from "react";
+import { WebView } from "react-native-webview";
 import { jsx as jsx9 } from "react/jsx-runtime";
-function TictactoeBoard({ style }) {
-  return /* @__PURE__ */ jsx9(GameWebView, { game: "tictactoe", style });
+function GameWebView({ game, style, showAfkWarning = true }) {
+  const { token, serverUrl, session } = useBetaGamer();
+  const webViewRef = useRef5(null);
+  if (session.game !== game) return null;
+  const uri = showAfkWarning ? `${serverUrl}/embed/${game}` : `${serverUrl}/embed/${game}?afkWarning=0`;
+  const initScript = `
+    window.__BG_TOKEN__ = ${JSON.stringify(token)};
+    window.postMessage(JSON.stringify({ type: 'bg:init', token: ${JSON.stringify(token)} }), '*');
+    true;
+  `;
+  return /* @__PURE__ */ jsx9(
+    WebView,
+    {
+      ref: webViewRef,
+      source: { uri },
+      injectedJavaScriptBeforeContentLoaded: initScript,
+      style: [{ flex: 1 }, style],
+      allowsInlineMediaPlayback: true,
+      mediaPlaybackRequiresUserAction: false
+    }
+  );
 }
 
 // src/components/subway-runner/index.tsx
-import { useEffect as useEffect4, useState as useState4 } from "react";
-import { View as View4, Text as Text4 } from "react-native";
 import { jsx as jsx10 } from "react/jsx-runtime";
 function SubwayRunnerGame({ style }) {
   return /* @__PURE__ */ jsx10(GameWebView, { game: "subway-runner", style });
 }
 function SubwayRunnerScore({ style, textStyle }) {
   const socket = useSocket();
-  const [score, setScore] = useState4(0);
-  useEffect4(() => {
+  const [score, setScore] = useState8(0);
+  useEffect8(() => {
     if (!socket) return;
     socket.on("runner:score", (s) => setScore(s));
     return () => {
       socket.off("runner:score");
     };
   }, [socket]);
-  return /* @__PURE__ */ jsx10(View4, { style, children: /* @__PURE__ */ jsx10(Text4, { style: textStyle, children: score }) });
+  return /* @__PURE__ */ jsx10(View8, { style, children: /* @__PURE__ */ jsx10(Text8, { style: textStyle, children: score }) });
 }
 function SubwayRunnerLives({ style, lifeStyle }) {
   const socket = useSocket();
-  const [lives, setLives] = useState4(3);
-  useEffect4(() => {
+  const [lives, setLives] = useState8(3);
+  useEffect8(() => {
     if (!socket) return;
     socket.on("runner:lives", (l) => setLives(l));
     return () => {
       socket.off("runner:lives");
     };
   }, [socket]);
-  return /* @__PURE__ */ jsx10(View4, { style: [{ flexDirection: "row" }, style], children: Array.from({ length: lives }).map((_, i) => /* @__PURE__ */ jsx10(View4, { style: lifeStyle, accessibilityLabel: "life" }, i)) });
+  return /* @__PURE__ */ jsx10(View8, { style: [{ flexDirection: "row" }, style], children: Array.from({ length: lives }).map((_, i) => /* @__PURE__ */ jsx10(View8, { style: lifeStyle, accessibilityLabel: "life" }, i)) });
 }
 export {
   BetaGamerProvider,