@beta-gamer/react-native 0.1.2 → 0.1.5

package/dist/index.d.mts

@@ -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

@@ -43,9 +43,31 @@ module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_socket = require("socket.io-client");
 var import_jsx_runtime = require("react/jsx-runtime");
+function base64Decode(str) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+  const normalized = str.replace(/-/g, "+").replace(/_/g, "/");
+  let output = "";
+  let i = 0;
+  while (i < normalized.length) {
+    const e1 = chars.indexOf(normalized[i++]);
+    const e2 = chars.indexOf(normalized[i++]);
+    const e3 = chars.indexOf(normalized[i++]);
+    const e4 = chars.indexOf(normalized[i++]);
+    output += String.fromCharCode(e1 << 2 | e2 >> 4);
+    if (e3 !== 64) output += String.fromCharCode((e2 & 15) << 4 | e3 >> 2);
+    if (e4 !== 64) output += String.fromCharCode((e3 & 3) << 6 | e4);
+  }
+  return decodeURIComponent(escape(output));
+}
 function decodeToken(token) {
-  const payload = token.split(".")[1];
-  return JSON.parse(atob(payload.replace(/-/g, "+").replace(/_/g, "/")));
+  if (!token || typeof token !== "string") {
+    throw new Error("@beta-gamer/react-native: token is required and must be a string");
+  }
+  const parts = token.split(".");
+  if (parts.length < 2) {
+    throw new Error("@beta-gamer/react-native: invalid session token format");
+  }
+  return JSON.parse(base64Decode(parts[1]));
 }
 var BetaGamerContext = (0, import_react.createContext)(null);
 function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", children }) {
@@ -60,11 +82,11 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", ch
       auth: { token },
       transports: ["websocket", "polling"]
     });
-    s.on("connect", () => setSocket(s));
+    setSocket(s);
     s.on("game:state", (state) => {
       setGameState((prev) => ({ ...prev, ...state }));
     });
-    s.on("game:ended", ({ winner, reason }) => {
+    s.on("game:over", ({ winner, reason }) => {
       setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
     });
     return () => {

package/dist/index.mjs

@@ -0,0 +1,260 @@
+// src/context/BetaGamerProvider.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+import { io } from "socket.io-client";
+import { jsx } from "react/jsx-runtime";
+function base64Decode(str) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
+  const normalized = str.replace(/-/g, "+").replace(/_/g, "/");
+  let output = "";
+  let i = 0;
+  while (i < normalized.length) {
+    const e1 = chars.indexOf(normalized[i++]);
+    const e2 = chars.indexOf(normalized[i++]);
+    const e3 = chars.indexOf(normalized[i++]);
+    const e4 = chars.indexOf(normalized[i++]);
+    output += String.fromCharCode(e1 << 2 | e2 >> 4);
+    if (e3 !== 64) output += String.fromCharCode((e2 & 15) << 4 | e3 >> 2);
+    if (e4 !== 64) output += String.fromCharCode((e3 & 3) << 6 | e4);
+  }
+  return decodeURIComponent(escape(output));
+}
+function decodeToken(token) {
+  if (!token || typeof token !== "string") {
+    throw new Error("@beta-gamer/react-native: token is required and must be a string");
+  }
+  const parts = token.split(".");
+  if (parts.length < 2) {
+    throw new Error("@beta-gamer/react-native: invalid session token format");
+  }
+  return JSON.parse(base64Decode(parts[1]));
+}
+var BetaGamerContext = createContext(null);
+function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", children }) {
+  const session = decodeToken(token);
+  const [socket, setSocket] = useState(null);
+  const [gameState, setGameState] = useState({
+    status: "pending",
+    players: session.players
+  });
+  useEffect(() => {
+    const s = io(`${serverUrl}/${session.game}`, {
+      auth: { token },
+      transports: ["websocket", "polling"]
+    });
+    setSocket(s);
+    s.on("game:state", (state) => {
+      setGameState((prev) => ({ ...prev, ...state }));
+    });
+    s.on("game:over", ({ winner, reason }) => {
+      setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
+    });
+    return () => {
+      s.disconnect();
+      setSocket(null);
+    };
+  }, [token, serverUrl, session.game]);
+  return /* @__PURE__ */ jsx(BetaGamerContext.Provider, { value: { token, session, socket, 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 { View, Text } from "react-native";
+import { jsx as jsx2, jsxs } from "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__ */ jsxs(View, { style, accessibilityRole: "text", children: [
+    /* @__PURE__ */ jsx2(Text, { style: nameStyle, children: p.displayName }),
+    isActive && /* @__PURE__ */ jsx2(View, { style: indicatorStyle, accessibilityLabel: "Active turn" })
+  ] });
+}
+
+// src/components/Timer.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+import { View as View2, Text as Text2 } from "react-native";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function Timer({ player, initialSeconds = 600, style, textStyle }) {
+  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(View2, { style, children: /* @__PURE__ */ jsxs2(Text2, { style: textStyle, children: [
+    m,
+    ":",
+    s
+  ] }) });
+}
+
+// src/components/GameWebView.tsx
+import { useRef } from "react";
+import { WebView } from "react-native-webview";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var BASE_URL = "https://api.beta-gamer.com";
+function GameWebView({ game, style }) {
+  const { token, session } = useBetaGamer();
+  const webViewRef = 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__ */ jsx4(
+    WebView,
+    {
+      ref: webViewRef,
+      source: { uri: `${BASE_URL}/embed/${game}` },
+      injectedJavaScriptBeforeContentLoaded: initScript,
+      style: [{ flex: 1 }, style],
+      allowsInlineMediaPlayback: true,
+      mediaPlaybackRequiresUserAction: false
+    }
+  );
+}
+
+// src/components/chess/ChessBoard.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ChessBoard({ style }) {
+  return /* @__PURE__ */ jsx5(GameWebView, { game: "chess", style });
+}
+
+// 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";
+function ChessMoveHistory({ style, rowStyle, textStyle }) {
+  const socket = useSocket();
+  const [moves, setMoves] = useState3([]);
+  useEffect3(() => {
+    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__ */ jsx6(ScrollView, { style, children: moves.map(({ moveNumber, white, black }) => /* @__PURE__ */ jsx6(View3, { style: rowStyle, children: /* @__PURE__ */ jsxs3(Text3, { style: textStyle, children: [
+    moveNumber,
+    ". ",
+    white,
+    black ? `  ${black}` : ""
+  ] }) }, moveNumber)) });
+}
+
+// src/components/checkers/index.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function CheckersBoard({ style }) {
+  return /* @__PURE__ */ jsx7(GameWebView, { game: "checkers", style });
+}
+
+// src/components/connect4/index.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Connect4Board({ style }) {
+  return /* @__PURE__ */ jsx8(GameWebView, { game: "connect4", style });
+}
+
+// src/components/tictactoe/index.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function TictactoeBoard({ style }) {
+  return /* @__PURE__ */ jsx9(GameWebView, { game: "tictactoe", style });
+}
+
+// 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(() => {
+    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 }) });
+}
+function SubwayRunnerLives({ style, lifeStyle }) {
+  const socket = useSocket();
+  const [lives, setLives] = useState4(3);
+  useEffect4(() => {
+    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)) });
+}
+export {
+  BetaGamerProvider,
+  CheckersBoard,
+  ChessBoard,
+  ChessMoveHistory,
+  Connect4Board,
+  PlayerCard,
+  SubwayRunnerGame,
+  SubwayRunnerLives,
+  SubwayRunnerScore,
+  TictactoeBoard,
+  Timer,
+  useBetaGamer,
+  useGameState,
+  useSession,
+  useSocket,
+  useTheme
+};

package/package.json

@@ -1,15 +1,25 @@
 {
   "name": "@beta-gamer/react-native",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "React Native SDK for Beta Gamer GaaS — composable game components",
   "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "react-native": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "require": "./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"
+    "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-native --external react-native-webview",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --external react --external react-native --external react-native-webview --watch"
   },
   "peerDependencies": {
     "react": ">=18",