@beta-gamer/react 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,133 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import * as socket_io_client from 'socket.io-client';
+import { Socket } from 'socket.io-client';
+import * as _socket_io_component_emitter from '@socket.io/component-emitter';
+
+type GameType = 'chess' | 'checkers' | 'connect4' | 'tictactoe' | 'subway-runner';
+type MatchType = 'matchmaking' | 'private' | 'bot';
+type SessionMode = 'live' | 'test' | 'training';
+type SessionStatus = 'pending' | 'active' | 'ended';
+interface SessionPlayer {
+    id: string;
+    displayName: string;
+}
+interface SessionTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    boardLight?: string;
+    boardDark?: string;
+    fontFamily?: string;
+    [key: string]: string | undefined;
+}
+interface SessionTokenPayload {
+    sessionId: string;
+    game: GameType;
+    mode: SessionMode;
+    matchType: MatchType;
+    tenantId: string;
+    players: SessionPlayer[];
+    roomCode: string | null;
+    theme: SessionTheme;
+    exp: number;
+}
+interface GameState {
+    status: SessionStatus;
+    players: SessionPlayer[];
+    currentTurn?: string;
+    winner?: string | null;
+    reason?: string;
+}
+
+interface BetaGamerContextValue {
+    token: string;
+    session: SessionTokenPayload;
+    socket: Socket | null;
+    gameState: GameState;
+    theme: SessionTheme;
+}
+interface BetaGamerProviderProps {
+    token: string;
+    serverUrl?: string;
+    children: React.ReactNode;
+}
+declare function BetaGamerProvider({ token, serverUrl, children }: BetaGamerProviderProps): react_jsx_runtime.JSX.Element;
+declare function useBetaGamer(): BetaGamerContextValue;
+
+/** Returns the current game state (status, players, winner, etc.) */
+declare function useGameState(): GameState;
+/** Returns the decoded session payload (game, mode, matchType, players, theme) */
+declare function useSession(): SessionTokenPayload;
+/** Returns the raw Socket.IO socket — for advanced custom event handling */
+declare function useSocket(): socket_io_client.Socket<_socket_io_component_emitter.DefaultEventsMap, _socket_io_component_emitter.DefaultEventsMap> | null;
+/** Returns the active theme tokens */
+declare function useTheme(): SessionTheme;
+
+interface PlayerCardProps {
+    /** 'self' = players[0], 'opponent' = players[1] */
+    player: 'self' | 'opponent';
+    className?: string;
+}
+/** Displays a player's name and active-turn indicator. Style it however you want. */
+declare function PlayerCard({ player, className }: PlayerCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface TimerProps {
+    /** Which player's clock to show */
+    player: 'self' | 'opponent';
+    /** Initial seconds on the clock (e.g. 600 for 10 min) */
+    initialSeconds?: number;
+    className?: string;
+}
+/** A live countdown clock that syncs with the server via socket events. */
+declare function Timer({ player, initialSeconds, className }: TimerProps): react_jsx_runtime.JSX.Element;
+
+interface ChessBoardProps {
+    className?: string;
+}
+/**
+ * The chess board — handles all game rendering and move input internally.
+ * Place this anywhere in your layout. Style the container via className.
+ */
+declare function ChessBoard({ className }: ChessBoardProps): react_jsx_runtime.JSX.Element | null;
+
+interface ChessMoveHistoryProps {
+    className?: string;
+}
+/** Scrollable move history in algebraic notation. Syncs via socket. */
+declare function ChessMoveHistory({ className }: ChessMoveHistoryProps): react_jsx_runtime.JSX.Element;
+
+interface ChessCapturedPiecesProps {
+    player: 'self' | 'opponent';
+    className?: string;
+}
+/** Shows pieces captured by the given player. */
+declare function ChessCapturedPieces({ player, className }: ChessCapturedPiecesProps): react_jsx_runtime.JSX.Element;
+
+declare function CheckersBoard({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function Connect4Board({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+declare function Connect4Score({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function TictactoeBoard({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function SubwayRunnerScore({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SubwayRunnerLives({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SubwayRunnerGame({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { BetaGamerProvider, CheckersBoard, ChessBoard, ChessCapturedPieces, ChessMoveHistory, Connect4Board, Connect4Score, type GameState, type GameType, type MatchType, PlayerCard, type SessionMode, type SessionPlayer, type SessionStatus, type SessionTheme, type SessionTokenPayload, SubwayRunnerGame, SubwayRunnerLives, SubwayRunnerScore, TictactoeBoard, Timer, useBetaGamer, useGameState, useSession, useSocket, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import * as socket_io_client from 'socket.io-client';
+import { Socket } from 'socket.io-client';
+import * as _socket_io_component_emitter from '@socket.io/component-emitter';
+
+type GameType = 'chess' | 'checkers' | 'connect4' | 'tictactoe' | 'subway-runner';
+type MatchType = 'matchmaking' | 'private' | 'bot';
+type SessionMode = 'live' | 'test' | 'training';
+type SessionStatus = 'pending' | 'active' | 'ended';
+interface SessionPlayer {
+    id: string;
+    displayName: string;
+}
+interface SessionTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    boardLight?: string;
+    boardDark?: string;
+    fontFamily?: string;
+    [key: string]: string | undefined;
+}
+interface SessionTokenPayload {
+    sessionId: string;
+    game: GameType;
+    mode: SessionMode;
+    matchType: MatchType;
+    tenantId: string;
+    players: SessionPlayer[];
+    roomCode: string | null;
+    theme: SessionTheme;
+    exp: number;
+}
+interface GameState {
+    status: SessionStatus;
+    players: SessionPlayer[];
+    currentTurn?: string;
+    winner?: string | null;
+    reason?: string;
+}
+
+interface BetaGamerContextValue {
+    token: string;
+    session: SessionTokenPayload;
+    socket: Socket | null;
+    gameState: GameState;
+    theme: SessionTheme;
+}
+interface BetaGamerProviderProps {
+    token: string;
+    serverUrl?: string;
+    children: React.ReactNode;
+}
+declare function BetaGamerProvider({ token, serverUrl, children }: BetaGamerProviderProps): react_jsx_runtime.JSX.Element;
+declare function useBetaGamer(): BetaGamerContextValue;
+
+/** Returns the current game state (status, players, winner, etc.) */
+declare function useGameState(): GameState;
+/** Returns the decoded session payload (game, mode, matchType, players, theme) */
+declare function useSession(): SessionTokenPayload;
+/** Returns the raw Socket.IO socket — for advanced custom event handling */
+declare function useSocket(): socket_io_client.Socket<_socket_io_component_emitter.DefaultEventsMap, _socket_io_component_emitter.DefaultEventsMap> | null;
+/** Returns the active theme tokens */
+declare function useTheme(): SessionTheme;
+
+interface PlayerCardProps {
+    /** 'self' = players[0], 'opponent' = players[1] */
+    player: 'self' | 'opponent';
+    className?: string;
+}
+/** Displays a player's name and active-turn indicator. Style it however you want. */
+declare function PlayerCard({ player, className }: PlayerCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface TimerProps {
+    /** Which player's clock to show */
+    player: 'self' | 'opponent';
+    /** Initial seconds on the clock (e.g. 600 for 10 min) */
+    initialSeconds?: number;
+    className?: string;
+}
+/** A live countdown clock that syncs with the server via socket events. */
+declare function Timer({ player, initialSeconds, className }: TimerProps): react_jsx_runtime.JSX.Element;
+
+interface ChessBoardProps {
+    className?: string;
+}
+/**
+ * The chess board — handles all game rendering and move input internally.
+ * Place this anywhere in your layout. Style the container via className.
+ */
+declare function ChessBoard({ className }: ChessBoardProps): react_jsx_runtime.JSX.Element | null;
+
+interface ChessMoveHistoryProps {
+    className?: string;
+}
+/** Scrollable move history in algebraic notation. Syncs via socket. */
+declare function ChessMoveHistory({ className }: ChessMoveHistoryProps): react_jsx_runtime.JSX.Element;
+
+interface ChessCapturedPiecesProps {
+    player: 'self' | 'opponent';
+    className?: string;
+}
+/** Shows pieces captured by the given player. */
+declare function ChessCapturedPieces({ player, className }: ChessCapturedPiecesProps): react_jsx_runtime.JSX.Element;
+
+declare function CheckersBoard({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function Connect4Board({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+declare function Connect4Score({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function TictactoeBoard({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+declare function SubwayRunnerScore({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SubwayRunnerLives({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SubwayRunnerGame({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+export { BetaGamerProvider, CheckersBoard, ChessBoard, ChessCapturedPieces, ChessMoveHistory, Connect4Board, Connect4Score, type GameState, type GameType, type MatchType, PlayerCard, type SessionMode, type SessionPlayer, type SessionStatus, type SessionTheme, type SessionTokenPayload, SubwayRunnerGame, SubwayRunnerLives, SubwayRunnerScore, TictactoeBoard, Timer, useBetaGamer, useGameState, useSession, useSocket, useTheme };

package/dist/index.js

@@ -0,0 +1,368 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BetaGamerProvider: () => BetaGamerProvider,
+  CheckersBoard: () => CheckersBoard,
+  ChessBoard: () => ChessBoard,
+  ChessCapturedPieces: () => ChessCapturedPieces,
+  ChessMoveHistory: () => ChessMoveHistory,
+  Connect4Board: () => Connect4Board,
+  Connect4Score: () => Connect4Score,
+  PlayerCard: () => PlayerCard,
+  SubwayRunnerGame: () => SubwayRunnerGame,
+  SubwayRunnerLives: () => SubwayRunnerLives,
+  SubwayRunnerScore: () => SubwayRunnerScore,
+  TictactoeBoard: () => TictactoeBoard,
+  Timer: () => Timer,
+  useBetaGamer: () => useBetaGamer,
+  useGameState: () => useGameState,
+  useSession: () => useSession,
+  useSocket: () => useSocket,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context/BetaGamerProvider.tsx
+var import_react = require("react");
+var import_socket = require("socket.io-client");
+var import_jsx_runtime = require("react/jsx-runtime");
+function decodeToken(token) {
+  const payload = token.split(".")[1];
+  return JSON.parse(atob(payload.replace(/-/g, "+").replace(/_/g, "/")));
+}
+var BetaGamerContext = (0, import_react.createContext)(null);
+function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", children }) {
+  const session = decodeToken(token);
+  const socketRef = (0, import_react.useRef)(null);
+  const [gameState, setGameState] = (0, import_react.useState)({
+    status: "pending",
+    players: session.players
+  });
+  (0, import_react.useEffect)(() => {
+    const socket = (0, import_socket.io)(`${serverUrl}/${session.game}`, {
+      auth: { token },
+      transports: ["websocket"]
+    });
+    socketRef.current = socket;
+    socket.on("game:state", (state) => {
+      setGameState((prev) => ({ ...prev, ...state }));
+    });
+    socket.on("game:ended", ({ winner, reason }) => {
+      setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
+    });
+    const root = document.documentElement;
+    const t = session.theme ?? {};
+    if (t.primaryColor) root.style.setProperty("--bg-primary", t.primaryColor);
+    if (t.backgroundColor) root.style.setProperty("--bg-surface", t.backgroundColor);
+    if (t.boardLight) root.style.setProperty("--board-light", t.boardLight);
+    if (t.boardDark) root.style.setProperty("--board-dark", t.boardDark);
+    if (t.fontFamily) root.style.setProperty("--font-family", t.fontFamily);
+    return () => {
+      socket.disconnect();
+    };
+  }, [token, serverUrl, session.game]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetaGamerContext.Provider, { value: { token, session, socket: socketRef.current, gameState, theme: session.theme ?? {} }, children });
+}
+function useBetaGamer() {
+  const ctx = (0, import_react.useContext)(BetaGamerContext);
+  if (!ctx) throw new Error("useBetaGamer must be used inside <BetaGamerProvider>");
+  return ctx;
+}
+
+// src/hooks/index.ts
+function useGameState() {
+  return useBetaGamer().gameState;
+}
+function useSession() {
+  return useBetaGamer().session;
+}
+function useSocket() {
+  return useBetaGamer().socket;
+}
+function useTheme() {
+  return useBetaGamer().theme;
+}
+
+// src/components/PlayerCard.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PlayerCard({ player, className }) {
+  const { players } = useSession();
+  const { currentTurn } = useGameState();
+  const p = player === "self" ? players[0] : players[1];
+  if (!p) return null;
+  const isActive = currentTurn === p.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, "data-active": isActive, "data-player": player, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-role": "display-name", children: p.displayName }),
+    isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-role": "turn-indicator", "aria-label": "Your turn" })
+  ] });
+}
+
+// src/components/Timer.tsx
+var import_react2 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Timer({ player, initialSeconds = 600, className }) {
+  const socket = useSocket();
+  const { status } = useGameState();
+  const [seconds, setSeconds] = (0, import_react2.useState)(initialSeconds);
+  (0, import_react2.useEffect)(() => {
+    if (!socket) return;
+    const handler = (clocks) => {
+      if (clocks[player] !== void 0) setSeconds(clocks[player]);
+    };
+    socket.on("game:clock", handler);
+    return () => {
+      socket.off("game:clock", handler);
+    };
+  }, [socket, player]);
+  (0, import_react2.useEffect)(() => {
+    if (status !== "active") return;
+    const id = setInterval(() => setSeconds((s2) => Math.max(0, s2 - 1)), 1e3);
+    return () => clearInterval(id);
+  }, [status]);
+  const m = Math.floor(seconds / 60).toString().padStart(2, "0");
+  const s = (seconds % 60).toString().padStart(2, "0");
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, "data-player": player, "data-low": seconds < 30, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { "data-role": "clock", children: [
+    m,
+    ":",
+    s
+  ] }) });
+}
+
+// src/components/chess/ChessBoard.tsx
+var import_react3 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ChessBoard({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "chess") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "iframe",
+    {
+      ref: iframeRef,
+      src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/chess`,
+      className,
+      style: { border: "none", width: "100%", height: "100%" },
+      allow: "autoplay",
+      title: "Chess"
+    }
+  );
+}
+
+// src/components/chess/ChessMoveHistory.tsx
+var import_react4 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ChessMoveHistory({ className }) {
+  const socket = useSocket();
+  const [moves, setMoves] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
+    if (!socket) return;
+    const handler = ({ san, moveIndex }) => {
+      const moveNumber = Math.floor(moveIndex / 2) + 1;
+      const isWhite = moveIndex % 2 === 0;
+      setMoves((prev) => {
+        const next = [...prev];
+        if (isWhite) {
+          next.push({ moveNumber, white: san });
+        } else {
+          const last = next[next.length - 1];
+          if (last && last.moveNumber === moveNumber) last.black = san;
+        }
+        return next;
+      });
+    };
+    socket.on("chess:move", handler);
+    return () => {
+      socket.off("chess:move", handler);
+    };
+  }, [socket]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, "data-role": "move-history", children: moves.map(({ moveNumber, white, black }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { "data-role": "move-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { "data-role": "move-number", children: [
+      moveNumber,
+      "."
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-role": "move-white", children: white }),
+    black && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "data-role": "move-black", children: black })
+  ] }, moveNumber)) });
+}
+
+// src/components/chess/ChessCapturedPieces.tsx
+var import_react5 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PIECE_SYMBOLS = {
+  p: "\u265F",
+  n: "\u265E",
+  b: "\u265D",
+  r: "\u265C",
+  q: "\u265B"
+};
+function ChessCapturedPieces({ player, className }) {
+  const socket = useSocket();
+  const { players } = useGameState();
+  const [captured, setCaptured] = (0, import_react5.useState)([]);
+  (0, import_react5.useEffect)(() => {
+    if (!socket) return;
+    const handler = ({ capturedBy, piece }) => {
+      const p = player === "self" ? players[0] : players[1];
+      if (p && capturedBy === p.id) setCaptured((prev) => [...prev, piece]);
+    };
+    socket.on("chess:capture", handler);
+    return () => {
+      socket.off("chess:capture", handler);
+    };
+  }, [socket, player, players]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className, "data-role": "captured-pieces", "data-player": player, children: captured.map((piece, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-role": "piece", "data-type": piece, children: PIECE_SYMBOLS[piece.toLowerCase()] ?? piece }, i)) });
+}
+
+// src/components/checkers/index.tsx
+var import_react6 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CheckersBoard({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "checkers") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/checkers`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Checkers" });
+}
+
+// src/components/connect4/index.tsx
+var import_react7 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Connect4Board({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useEffect)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "connect4") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/connect4`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Connect 4" });
+}
+function Connect4Score({ className }) {
+  const { gameState } = useBetaGamer();
+  const scores = gameState?.scores ?? {};
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className, "data-role": "score", children: Object.entries(scores).map(([id, score]) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "data-player": id, "data-role": "score-value", children: score }, id)) });
+}
+
+// src/components/tictactoe/index.tsx
+var import_react8 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function TictactoeBoard({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "tictactoe") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/tictactoe`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Tic-tac-toe" });
+}
+
+// src/components/subway-runner/index.tsx
+var import_react11 = require("react");
+
+// src/components/subway-runner/SubwayRunnerScore.tsx
+var import_react9 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SubwayRunnerScore({ className }) {
+  const socket = useSocket();
+  const [score, setScore] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
+    if (!socket) return;
+    socket.on("runner:score", (s) => setScore(s));
+    return () => {
+      socket.off("runner:score");
+    };
+  }, [socket]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className, "data-role": "score", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "data-role": "score-value", children: score }) });
+}
+
+// src/components/subway-runner/SubwayRunnerLives.tsx
+var import_react10 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function SubwayRunnerLives({ className }) {
+  const socket = useSocket();
+  const [lives, setLives] = (0, import_react10.useState)(3);
+  (0, import_react10.useEffect)(() => {
+    if (!socket) return;
+    socket.on("runner:lives", (l) => setLives(l));
+    return () => {
+      socket.off("runner:lives");
+    };
+  }, [socket]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className, "data-role": "lives", children: Array.from({ length: lives }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-role": "life", "aria-label": "life" }, i)) });
+}
+
+// src/components/subway-runner/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function SubwayRunnerGame({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "subway-runner") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/subway-runner`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Subway Runner" });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BetaGamerProvider,
+  CheckersBoard,
+  ChessBoard,
+  ChessCapturedPieces,
+  ChessMoveHistory,
+  Connect4Board,
+  Connect4Score,
+  PlayerCard,
+  SubwayRunnerGame,
+  SubwayRunnerLives,
+  SubwayRunnerScore,
+  TictactoeBoard,
+  Timer,
+  useBetaGamer,
+  useGameState,
+  useSession,
+  useSocket,
+  useTheme
+});

package/dist/index.mjs

@@ -0,0 +1,324 @@
+// src/context/BetaGamerProvider.tsx
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { io } from "socket.io-client";
+import { jsx } from "react/jsx-runtime";
+function decodeToken(token) {
+  const payload = token.split(".")[1];
+  return JSON.parse(atob(payload.replace(/-/g, "+").replace(/_/g, "/")));
+}
+var BetaGamerContext = createContext(null);
+function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", children }) {
+  const session = decodeToken(token);
+  const socketRef = useRef(null);
+  const [gameState, setGameState] = useState({
+    status: "pending",
+    players: session.players
+  });
+  useEffect(() => {
+    const socket = io(`${serverUrl}/${session.game}`, {
+      auth: { token },
+      transports: ["websocket"]
+    });
+    socketRef.current = socket;
+    socket.on("game:state", (state) => {
+      setGameState((prev) => ({ ...prev, ...state }));
+    });
+    socket.on("game:ended", ({ winner, reason }) => {
+      setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
+    });
+    const root = document.documentElement;
+    const t = session.theme ?? {};
+    if (t.primaryColor) root.style.setProperty("--bg-primary", t.primaryColor);
+    if (t.backgroundColor) root.style.setProperty("--bg-surface", t.backgroundColor);
+    if (t.boardLight) root.style.setProperty("--board-light", t.boardLight);
+    if (t.boardDark) root.style.setProperty("--board-dark", t.boardDark);
+    if (t.fontFamily) root.style.setProperty("--font-family", t.fontFamily);
+    return () => {
+      socket.disconnect();
+    };
+  }, [token, serverUrl, session.game]);
+  return /* @__PURE__ */ jsx(BetaGamerContext.Provider, { value: { token, session, socket: socketRef.current, gameState, theme: session.theme ?? {} }, children });
+}
+function useBetaGamer() {
+  const ctx = useContext(BetaGamerContext);
+  if (!ctx) throw new Error("useBetaGamer must be used inside <BetaGamerProvider>");
+  return ctx;
+}
+
+// src/hooks/index.ts
+function useGameState() {
+  return useBetaGamer().gameState;
+}
+function useSession() {
+  return useBetaGamer().session;
+}
+function useSocket() {
+  return useBetaGamer().socket;
+}
+function useTheme() {
+  return useBetaGamer().theme;
+}
+
+// src/components/PlayerCard.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function PlayerCard({ player, className }) {
+  const { players } = useSession();
+  const { currentTurn } = useGameState();
+  const p = player === "self" ? players[0] : players[1];
+  if (!p) return null;
+  const isActive = currentTurn === p.id;
+  return /* @__PURE__ */ jsxs("div", { className, "data-active": isActive, "data-player": player, children: [
+    /* @__PURE__ */ jsx2("span", { "data-role": "display-name", children: p.displayName }),
+    isActive && /* @__PURE__ */ jsx2("span", { "data-role": "turn-indicator", "aria-label": "Your turn" })
+  ] });
+}
+
+// src/components/Timer.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Timer({ player, initialSeconds = 600, className }) {
+  const socket = useSocket();
+  const { status } = useGameState();
+  const [seconds, setSeconds] = useState2(initialSeconds);
+  useEffect2(() => {
+    if (!socket) return;
+    const handler = (clocks) => {
+      if (clocks[player] !== void 0) setSeconds(clocks[player]);
+    };
+    socket.on("game:clock", handler);
+    return () => {
+      socket.off("game:clock", handler);
+    };
+  }, [socket, player]);
+  useEffect2(() => {
+    if (status !== "active") return;
+    const id = setInterval(() => setSeconds((s2) => Math.max(0, s2 - 1)), 1e3);
+    return () => clearInterval(id);
+  }, [status]);
+  const m = Math.floor(seconds / 60).toString().padStart(2, "0");
+  const s = (seconds % 60).toString().padStart(2, "0");
+  return /* @__PURE__ */ jsx3("div", { className, "data-player": player, "data-low": seconds < 30, children: /* @__PURE__ */ jsxs2("span", { "data-role": "clock", children: [
+    m,
+    ":",
+    s
+  ] }) });
+}
+
+// src/components/chess/ChessBoard.tsx
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ChessBoard({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = useRef2(null);
+  useEffect3(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "chess") return null;
+  return /* @__PURE__ */ jsx4(
+    "iframe",
+    {
+      ref: iframeRef,
+      src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/chess`,
+      className,
+      style: { border: "none", width: "100%", height: "100%" },
+      allow: "autoplay",
+      title: "Chess"
+    }
+  );
+}
+
+// src/components/chess/ChessMoveHistory.tsx
+import { useEffect as useEffect4, useState as useState3 } from "react";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function ChessMoveHistory({ className }) {
+  const socket = useSocket();
+  const [moves, setMoves] = useState3([]);
+  useEffect4(() => {
+    if (!socket) return;
+    const handler = ({ san, moveIndex }) => {
+      const moveNumber = Math.floor(moveIndex / 2) + 1;
+      const isWhite = moveIndex % 2 === 0;
+      setMoves((prev) => {
+        const next = [...prev];
+        if (isWhite) {
+          next.push({ moveNumber, white: san });
+        } else {
+          const last = next[next.length - 1];
+          if (last && last.moveNumber === moveNumber) last.black = san;
+        }
+        return next;
+      });
+    };
+    socket.on("chess:move", handler);
+    return () => {
+      socket.off("chess:move", handler);
+    };
+  }, [socket]);
+  return /* @__PURE__ */ jsx5("div", { className, "data-role": "move-history", children: moves.map(({ moveNumber, white, black }) => /* @__PURE__ */ jsxs3("div", { "data-role": "move-row", children: [
+    /* @__PURE__ */ jsxs3("span", { "data-role": "move-number", children: [
+      moveNumber,
+      "."
+    ] }),
+    /* @__PURE__ */ jsx5("span", { "data-role": "move-white", children: white }),
+    black && /* @__PURE__ */ jsx5("span", { "data-role": "move-black", children: black })
+  ] }, moveNumber)) });
+}
+
+// src/components/chess/ChessCapturedPieces.tsx
+import { useEffect as useEffect5, useState as useState4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PIECE_SYMBOLS = {
+  p: "\u265F",
+  n: "\u265E",
+  b: "\u265D",
+  r: "\u265C",
+  q: "\u265B"
+};
+function ChessCapturedPieces({ player, className }) {
+  const socket = useSocket();
+  const { players } = useGameState();
+  const [captured, setCaptured] = useState4([]);
+  useEffect5(() => {
+    if (!socket) return;
+    const handler = ({ capturedBy, piece }) => {
+      const p = player === "self" ? players[0] : players[1];
+      if (p && capturedBy === p.id) setCaptured((prev) => [...prev, piece]);
+    };
+    socket.on("chess:capture", handler);
+    return () => {
+      socket.off("chess:capture", handler);
+    };
+  }, [socket, player, players]);
+  return /* @__PURE__ */ jsx6("div", { className, "data-role": "captured-pieces", "data-player": player, children: captured.map((piece, i) => /* @__PURE__ */ jsx6("span", { "data-role": "piece", "data-type": piece, children: PIECE_SYMBOLS[piece.toLowerCase()] ?? piece }, i)) });
+}
+
+// src/components/checkers/index.tsx
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function CheckersBoard({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = useRef3(null);
+  useEffect6(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "checkers") return null;
+  return /* @__PURE__ */ jsx7("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/checkers`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Checkers" });
+}
+
+// src/components/connect4/index.tsx
+import { useEffect as useEffect7, useRef as useRef4 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Connect4Board({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = useRef4(null);
+  useEffect7(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "connect4") return null;
+  return /* @__PURE__ */ jsx8("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/connect4`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Connect 4" });
+}
+function Connect4Score({ className }) {
+  const { gameState } = useBetaGamer();
+  const scores = gameState?.scores ?? {};
+  return /* @__PURE__ */ jsx8("div", { className, "data-role": "score", children: Object.entries(scores).map(([id, score]) => /* @__PURE__ */ jsx8("span", { "data-player": id, "data-role": "score-value", children: score }, id)) });
+}
+
+// src/components/tictactoe/index.tsx
+import { useEffect as useEffect8, useRef as useRef5 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function TictactoeBoard({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = useRef5(null);
+  useEffect8(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "tictactoe") return null;
+  return /* @__PURE__ */ jsx9("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/tictactoe`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Tic-tac-toe" });
+}
+
+// src/components/subway-runner/index.tsx
+import { useEffect as useEffect11, useRef as useRef6 } from "react";
+
+// src/components/subway-runner/SubwayRunnerScore.tsx
+import { useEffect as useEffect9, useState as useState5 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function SubwayRunnerScore({ className }) {
+  const socket = useSocket();
+  const [score, setScore] = useState5(0);
+  useEffect9(() => {
+    if (!socket) return;
+    socket.on("runner:score", (s) => setScore(s));
+    return () => {
+      socket.off("runner:score");
+    };
+  }, [socket]);
+  return /* @__PURE__ */ jsx10("div", { className, "data-role": "score", children: /* @__PURE__ */ jsx10("span", { "data-role": "score-value", children: score }) });
+}
+
+// src/components/subway-runner/SubwayRunnerLives.tsx
+import { useEffect as useEffect10, useState as useState6 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function SubwayRunnerLives({ className }) {
+  const socket = useSocket();
+  const [lives, setLives] = useState6(3);
+  useEffect10(() => {
+    if (!socket) return;
+    socket.on("runner:lives", (l) => setLives(l));
+    return () => {
+      socket.off("runner:lives");
+    };
+  }, [socket]);
+  return /* @__PURE__ */ jsx11("div", { className, "data-role": "lives", children: Array.from({ length: lives }).map((_, i) => /* @__PURE__ */ jsx11("span", { "data-role": "life", "aria-label": "life" }, i)) });
+}
+
+// src/components/subway-runner/index.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function SubwayRunnerGame({ className }) {
+  const { token, session } = useBetaGamer();
+  const iframeRef = useRef6(null);
+  useEffect11(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+    const onLoad = () => iframe.contentWindow?.postMessage({ type: "bg:init", token }, "*");
+    iframe.addEventListener("load", onLoad);
+    return () => iframe.removeEventListener("load", onLoad);
+  }, [token]);
+  if (session.game !== "subway-runner") return null;
+  return /* @__PURE__ */ jsx12("iframe", { ref: iframeRef, src: `${process.env.NEXT_PUBLIC_BETAGAMER_URL ?? "https://api.beta-gamer.com"}/embed/subway-runner`, className, style: { border: "none", width: "100%", height: "100%" }, title: "Subway Runner" });
+}
+export {
+  BetaGamerProvider,
+  CheckersBoard,
+  ChessBoard,
+  ChessCapturedPieces,
+  ChessMoveHistory,
+  Connect4Board,
+  Connect4Score,
+  PlayerCard,
+  SubwayRunnerGame,
+  SubwayRunnerLives,
+  SubwayRunnerScore,
+  TictactoeBoard,
+  Timer,
+  useBetaGamer,
+  useGameState,
+  useSession,
+  useSocket,
+  useTheme
+};

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@beta-gamer/react",
+  "version": "0.1.0",
+  "description": "React SDK for Beta Gamer GaaS — composable game components",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --external react --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "dependencies": {
+    "socket.io-client": "^4.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/acetennyson/beta-gamer"
+  },
+  "license": "MIT"
+}