@beta-gamer/react-native 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,118 @@
+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';
+import { ViewStyle, TextStyle } from 'react-native';
+
+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 {
+    player: 'self' | 'opponent';
+    style?: ViewStyle;
+    nameStyle?: TextStyle;
+    indicatorStyle?: ViewStyle;
+}
+declare function PlayerCard({ player, style, nameStyle, indicatorStyle }: PlayerCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface TimerProps {
+    player: 'self' | 'opponent';
+    initialSeconds?: number;
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}
+declare function Timer({ player, initialSeconds, style, textStyle }: TimerProps): react_jsx_runtime.JSX.Element;
+
+declare function ChessBoard({ style }: {
+    style?: ViewStyle;
+}): react_jsx_runtime.JSX.Element;
+
+interface ChessMoveHistoryProps {
+    style?: ViewStyle;
+    rowStyle?: ViewStyle;
+    textStyle?: TextStyle;
+}
+declare function ChessMoveHistory({ style, rowStyle, textStyle }: ChessMoveHistoryProps): react_jsx_runtime.JSX.Element;
+
+declare function CheckersBoard({ style }: {
+    style?: ViewStyle;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Connect4Board({ style }: {
+    style?: ViewStyle;
+}): react_jsx_runtime.JSX.Element;
+
+declare function TictactoeBoard({ style }: {
+    style?: ViewStyle;
+}): react_jsx_runtime.JSX.Element;
+
+declare function SubwayRunnerGame({ style }: {
+    style?: ViewStyle;
+}): react_jsx_runtime.JSX.Element;
+declare function SubwayRunnerScore({ style, textStyle }: {
+    style?: ViewStyle;
+    textStyle?: TextStyle;
+}): react_jsx_runtime.JSX.Element;
+declare function SubwayRunnerLives({ style, lifeStyle }: {
+    style?: ViewStyle;
+    lifeStyle?: ViewStyle;
+}): react_jsx_runtime.JSX.Element;
+
+export { BetaGamerProvider, CheckersBoard, ChessBoard, ChessMoveHistory, Connect4Board, 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,279 @@
+"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,
+  ChessMoveHistory: () => ChessMoveHistory,
+  Connect4Board: () => Connect4Board,
+  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 }));
+    });
+    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_react_native = require("react-native");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function PlayerCard({ player, style, nameStyle, indicatorStyle }) {
+  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)(import_react_native.View, { style, accessibilityRole: "text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.Text, { style: nameStyle, children: p.displayName }),
+    isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native.View, { style: indicatorStyle, accessibilityLabel: "Active turn" })
+  ] });
+}
+
+// src/components/Timer.tsx
+var import_react2 = require("react");
+var import_react_native2 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Timer({ player, initialSeconds = 600, style, textStyle }) {
+  const socket = useSocket();
+  const { status } = useGameState();
+  const [seconds, setSeconds] = (0, import_react2.useState)(initialSeconds);
+  (0, import_react2.useEffect)(() => {
+    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)(import_react_native2.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.Text, { style: textStyle, children: [
+    m,
+    ":",
+    s
+  ] }) });
+}
+
+// src/components/GameWebView.tsx
+var import_react3 = require("react");
+var import_react_native_webview = require("react-native-webview");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var BASE_URL = "https://api.beta-gamer.com";
+function GameWebView({ game, style }) {
+  const { token, session } = useBetaGamer();
+  const webViewRef = (0, import_react3.useRef)(null);
+  if (session.game !== game) return null;
+  const initScript = `
+    window.__BG_TOKEN__ = ${JSON.stringify(token)};
+    window.dispatchEvent(new Event('bg:ready'));
+    true;
+  `;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_native_webview.WebView,
+    {
+      ref: webViewRef,
+      source: { uri: `${BASE_URL}/embed/${game}` },
+      injectedJavaScriptBeforeContentLoaded: initScript,
+      style: [{ flex: 1 }, style],
+      allowsInlineMediaPlayback: true,
+      mediaPlaybackRequiresUserAction: false
+    }
+  );
+}
+
+// src/components/chess/ChessBoard.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ChessBoard({ style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GameWebView, { game: "chess", style });
+}
+
+// src/components/chess/ChessMoveHistory.tsx
+var import_react4 = require("react");
+var import_react_native3 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ChessMoveHistory({ style, rowStyle, textStyle }) {
+  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?.moveNumber === moveNumber) last.black = san;
+        }
+        return next;
+      });
+    };
+    socket.on("chess:move", handler);
+    return () => {
+      socket.off("chess:move", handler);
+    };
+  }, [socket]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native3.ScrollView, { style, children: moves.map(({ moveNumber, white, black }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native3.View, { style: rowStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native3.Text, { style: textStyle, children: [
+    moveNumber,
+    ". ",
+    white,
+    black ? `  ${black}` : ""
+  ] }) }, moveNumber)) });
+}
+
+// src/components/checkers/index.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CheckersBoard({ style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(GameWebView, { game: "checkers", style });
+}
+
+// src/components/connect4/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Connect4Board({ style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(GameWebView, { game: "connect4", style });
+}
+
+// src/components/tictactoe/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function TictactoeBoard({ style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(GameWebView, { game: "tictactoe", style });
+}
+
+// src/components/subway-runner/index.tsx
+var import_react5 = require("react");
+var import_react_native4 = require("react-native");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SubwayRunnerGame({ style }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(GameWebView, { game: "subway-runner", style });
+}
+function SubwayRunnerScore({ style, textStyle }) {
+  const socket = useSocket();
+  const [score, setScore] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
+    if (!socket) return;
+    socket.on("runner:score", (s) => setScore(s));
+    return () => {
+      socket.off("runner:score");
+    };
+  }, [socket]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native4.View, { style, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native4.Text, { style: textStyle, children: score }) });
+}
+function SubwayRunnerLives({ style, lifeStyle }) {
+  const socket = useSocket();
+  const [lives, setLives] = (0, import_react5.useState)(3);
+  (0, import_react5.useEffect)(() => {
+    if (!socket) return;
+    socket.on("runner:lives", (l) => setLives(l));
+    return () => {
+      socket.off("runner:lives");
+    };
+  }, [socket]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native4.View, { style: [{ flexDirection: "row" }, style], children: Array.from({ length: lives }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native4.View, { style: lifeStyle, accessibilityLabel: "life" }, i)) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BetaGamerProvider,
+  CheckersBoard,
+  ChessBoard,
+  ChessMoveHistory,
+  Connect4Board,
+  PlayerCard,
+  SubwayRunnerGame,
+  SubwayRunnerLives,
+  SubwayRunnerScore,
+  TictactoeBoard,
+  Timer,
+  useBetaGamer,
+  useGameState,
+  useSession,
+  useSocket,
+  useTheme
+});

package/package.json

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