@beta-gamer/react 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,131 @@
+# @beta-gamer/react
+
+React SDK for [Beta Gamer](https://beta-gamer.com) — embed multiplayer games into your app as composable components. You control the layout, we handle the game logic, matchmaking, and real-time sync.
+
+## Installation
+
+```bash
+npm install @beta-gamer/react
+```
+
+## Requirements
+
+- React 18+
+- A Beta Gamer tenant account and API key → [beta-gamer.com](https://beta-gamer.com)
+
+## Quick start
+
+**1. Create a session from your backend** (never expose your API key on the client)
+
+```ts
+const res = await fetch('https://api.beta-gamer.com/v1/sessions', {
+  method: 'POST',
+  headers: {
+    'Authorization': 'Bearer bg_live_xxxx',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    game: 'chess',
+    matchType: 'matchmaking',
+    players: [{ id: 'user_123', displayName: 'Alex' }],
+  }),
+});
+const { sessionToken } = await res.json();
+```
+
+**2. Pass the token to your frontend and render**
+
+```tsx
+import {
+  BetaGamerProvider,
+  ChessBoard,
+  ChessMoveHistory,
+  PlayerCard,
+  Timer,
+} from '@beta-gamer/react';
+
+export default function GamePage({ sessionToken }: { sessionToken: string }) {
+  return (
+    <BetaGamerProvider token={sessionToken}>
+      <div className="your-layout">
+        <PlayerCard player="opponent" className="opponent-card" />
+        <Timer player="opponent" className="timer" />
+
+        <ChessBoard className="board" />
+        <ChessMoveHistory className="sidebar" />
+
+        <PlayerCard player="self" className="player-card" />
+        <Timer player="self" className="timer" />
+      </div>
+    </BetaGamerProvider>
+  );
+}
+```
+
+## Components
+
+### Shared (all games)
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `BetaGamerProvider` | `token`, `serverUrl?` | Wrap your game UI with this. Handles socket connection and theme. |
+| `PlayerCard` | `player` (`"self"` \| `"opponent"`), `className?` | Player name + active-turn indicator |
+| `Timer` | `player`, `initialSeconds?`, `className?` | Live countdown clock, syncs with server |
+
+### Chess
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `ChessBoard` | `className?` | Interactive chess board |
+| `ChessMoveHistory` | `className?` | Scrollable move list in algebraic notation |
+| `ChessCapturedPieces` | `player`, `className?` | Pieces captured by the given player |
+
+### Other games
+
+| Component | Game |
+|-----------|------|
+| `CheckersBoard` | checkers |
+| `Connect4Board`, `Connect4Score` | connect4 |
+| `TictactoeBoard` | tictactoe |
+| `SubwayRunnerGame`, `SubwayRunnerScore`, `SubwayRunnerLives` | subway-runner |
+
+## Hooks
+
+```tsx
+import { useGameState, useSession, useSocket, useTheme } from '@beta-gamer/react';
+
+const { status, winner, reason } = useGameState();
+const { game, mode, matchType, players } = useSession();
+const socket = useSocket(); // raw Socket.IO socket for custom events
+const theme = useTheme();   // active theme tokens
+```
+
+## Listening to game events
+
+```tsx
+import { useSocket } from '@beta-gamer/react';
+import { useEffect } from 'react';
+
+function MyComponent() {
+  const socket = useSocket();
+
+  useEffect(() => {
+    if (!socket) return;
+    socket.on('chess.check', ({ attackingPlayerId }) => {
+      console.log('Check by', attackingPlayerId);
+    });
+  }, [socket]);
+}
+```
+
+See the [full event reference](https://beta-gamer.com/docs/webhooks) in the docs.
+
+## Supported games
+
+`chess` · `checkers` · `connect4` · `tictactoe` · `subway-runner`
+
+## Links
+
+- [Documentation](https://beta-gamer.com/docs)
+- [Dashboard](https://beta-gamer.com/dashboard)
+- [React Native SDK](https://www.npmjs.com/package/@beta-gamer/react-native)

package/dist/index.d.mts

@@ -49,9 +49,10 @@ interface BetaGamerContextValue {
 interface BetaGamerProviderProps {
     token: string;
     serverUrl?: string;
+    socketPath?: string;
     children: React.ReactNode;
 }
-declare function BetaGamerProvider({ token, serverUrl, children }: BetaGamerProviderProps): react_jsx_runtime.JSX.Element;
+declare function BetaGamerProvider({ token, serverUrl, socketPath, children }: BetaGamerProviderProps): react_jsx_runtime.JSX.Element;
 declare function useBetaGamer(): BetaGamerContextValue;
 
 /** Returns the current game state (status, players, winner, etc.) */

package/dist/index.d.ts

@@ -49,9 +49,10 @@ interface BetaGamerContextValue {
 interface BetaGamerProviderProps {
     token: string;
     serverUrl?: string;
+    socketPath?: string;
     children: React.ReactNode;
 }
-declare function BetaGamerProvider({ token, serverUrl, children }: BetaGamerProviderProps): react_jsx_runtime.JSX.Element;
+declare function BetaGamerProvider({ token, serverUrl, socketPath, children }: BetaGamerProviderProps): react_jsx_runtime.JSX.Element;
 declare function useBetaGamer(): BetaGamerContextValue;
 
 /** Returns the current game state (status, players, winner, etc.) */

package/dist/index.js

@@ -50,23 +50,24 @@ function decodeToken(token) {
   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 }) {
+function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io", children }) {
   const session = decodeToken(token);
-  const socketRef = (0, import_react.useRef)(null);
+  const [socket, setSocket] = (0, import_react.useState)(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}`, {
+    const s = (0, import_socket.io)(`${serverUrl}/${session.game}`, {
       auth: { token },
-      transports: ["websocket"]
+      path: socketPath,
+      transports: ["websocket", "polling"]
     });
-    socketRef.current = socket;
-    socket.on("game:state", (state) => {
+    s.on("connect", () => setSocket(s));
+    s.on("game:state", (state) => {
       setGameState((prev) => ({ ...prev, ...state }));
     });
-    socket.on("game:ended", ({ winner, reason }) => {
+    s.on("game:ended", ({ winner, reason }) => {
       setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
     });
     const root = document.documentElement;
@@ -77,10 +78,11 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", ch
     if (t.boardDark) root.style.setProperty("--board-dark", t.boardDark);
     if (t.fontFamily) root.style.setProperty("--font-family", t.fontFamily);
     return () => {
-      socket.disconnect();
+      s.disconnect();
+      setSocket(null);
     };
-  }, [token, serverUrl, session.game]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetaGamerContext.Provider, { value: { token, session, socket: socketRef.current, gameState, theme: session.theme ?? {} }, children });
+  }, [token, serverUrl, session.game, socketPath]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BetaGamerContext.Provider, { value: { token, session, socket, gameState, theme: session.theme ?? {} }, children });
 }
 function useBetaGamer() {
   const ctx = (0, import_react.useContext)(BetaGamerContext);

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/context/BetaGamerProvider.tsx
-import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { io } from "socket.io-client";
 import { jsx } from "react/jsx-runtime";
 function decodeToken(token) {
@@ -7,23 +7,24 @@ function decodeToken(token) {
   return JSON.parse(atob(payload.replace(/-/g, "+").replace(/_/g, "/")));
 }
 var BetaGamerContext = createContext(null);
-function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", children }) {
+function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", socketPath = "/socket.io", children }) {
   const session = decodeToken(token);
-  const socketRef = useRef(null);
+  const [socket, setSocket] = useState(null);
   const [gameState, setGameState] = useState({
     status: "pending",
     players: session.players
   });
   useEffect(() => {
-    const socket = io(`${serverUrl}/${session.game}`, {
+    const s = io(`${serverUrl}/${session.game}`, {
       auth: { token },
-      transports: ["websocket"]
+      path: socketPath,
+      transports: ["websocket", "polling"]
     });
-    socketRef.current = socket;
-    socket.on("game:state", (state) => {
+    s.on("connect", () => setSocket(s));
+    s.on("game:state", (state) => {
       setGameState((prev) => ({ ...prev, ...state }));
     });
-    socket.on("game:ended", ({ winner, reason }) => {
+    s.on("game:ended", ({ winner, reason }) => {
       setGameState((prev) => ({ ...prev, status: "ended", winner, reason }));
     });
     const root = document.documentElement;
@@ -34,10 +35,11 @@ function BetaGamerProvider({ token, serverUrl = "https://api.beta-gamer.com", ch
     if (t.boardDark) root.style.setProperty("--board-dark", t.boardDark);
     if (t.fontFamily) root.style.setProperty("--font-family", t.fontFamily);
     return () => {
-      socket.disconnect();
+      s.disconnect();
+      setSocket(null);
     };
-  }, [token, serverUrl, session.game]);
-  return /* @__PURE__ */ jsx(BetaGamerContext.Provider, { value: { token, session, socket: socketRef.current, gameState, theme: session.theme ?? {} }, children });
+  }, [token, serverUrl, session.game, socketPath]);
+  return /* @__PURE__ */ jsx(BetaGamerContext.Provider, { value: { token, session, socket, gameState, theme: session.theme ?? {} }, children });
 }
 function useBetaGamer() {
   const ctx = useContext(BetaGamerContext);
@@ -105,11 +107,11 @@ function Timer({ player, initialSeconds = 600, className }) {
 }
 
 // src/components/chess/ChessBoard.tsx
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef } from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function ChessBoard({ className }) {
   const { token, session } = useBetaGamer();
-  const iframeRef = useRef2(null);
+  const iframeRef = useRef(null);
   useEffect3(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -197,11 +199,11 @@ function ChessCapturedPieces({ player, className }) {
 }
 
 // src/components/checkers/index.tsx
-import { useEffect as useEffect6, useRef as useRef3 } from "react";
+import { useEffect as useEffect6, useRef as useRef2 } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function CheckersBoard({ className }) {
   const { token, session } = useBetaGamer();
-  const iframeRef = useRef3(null);
+  const iframeRef = useRef2(null);
   useEffect6(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -214,11 +216,11 @@ function CheckersBoard({ className }) {
 }
 
 // src/components/connect4/index.tsx
-import { useEffect as useEffect7, useRef as useRef4 } from "react";
+import { useEffect as useEffect7, useRef as useRef3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function Connect4Board({ className }) {
   const { token, session } = useBetaGamer();
-  const iframeRef = useRef4(null);
+  const iframeRef = useRef3(null);
   useEffect7(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -236,11 +238,11 @@ function Connect4Score({ className }) {
 }
 
 // src/components/tictactoe/index.tsx
-import { useEffect as useEffect8, useRef as useRef5 } from "react";
+import { useEffect as useEffect8, useRef as useRef4 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function TictactoeBoard({ className }) {
   const { token, session } = useBetaGamer();
-  const iframeRef = useRef5(null);
+  const iframeRef = useRef4(null);
   useEffect8(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;
@@ -253,7 +255,7 @@ function TictactoeBoard({ className }) {
 }
 
 // src/components/subway-runner/index.tsx
-import { useEffect as useEffect11, useRef as useRef6 } from "react";
+import { useEffect as useEffect11, useRef as useRef5 } from "react";
 
 // src/components/subway-runner/SubwayRunnerScore.tsx
 import { useEffect as useEffect9, useState as useState5 } from "react";
@@ -291,7 +293,7 @@ function SubwayRunnerLives({ className }) {
 import { jsx as jsx12 } from "react/jsx-runtime";
 function SubwayRunnerGame({ className }) {
   const { token, session } = useBetaGamer();
-  const iframeRef = useRef6(null);
+  const iframeRef = useRef5(null);
   useEffect11(() => {
     const iframe = iframeRef.current;
     if (!iframe) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beta-gamer/react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "React SDK for Beta Gamer GaaS — composable game components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -12,7 +12,9 @@
       "types": "./dist/index.d.ts"
     }
   },
-  "files": ["dist"],
+  "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"
@@ -30,7 +32,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/acetennyson/beta-gamer"
+    "url": "https://github.com/acetennyson/beta-gamer-sdk"
   },
   "license": "MIT"
 }