@beta-gamer/react-native 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,136 @@
+# @beta-gamer/react-native
+
+React Native SDK for [Beta Gamer](https://beta-gamer.com) — embed multiplayer games into your mobile 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-native react-native-webview
+```
+
+Then link the native module:
+
+```bash
+# iOS
+cd ios && pod install
+
+# Android — no extra steps needed
+```
+
+## Requirements
+
+- React Native 0.73+
+- `react-native-webview` 13+
+- 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 screen and render**
+
+```tsx
+import {
+  BetaGamerProvider,
+  ChessBoard,
+  ChessMoveHistory,
+  PlayerCard,
+  Timer,
+} from '@beta-gamer/react-native';
+import { View, StyleSheet } from 'react-native';
+
+export default function GameScreen({ sessionToken }: { sessionToken: string }) {
+  return (
+    <BetaGamerProvider token={sessionToken}>
+      <View style={styles.layout}>
+        <PlayerCard player="opponent" style={styles.card} nameStyle={styles.name} />
+        <Timer player="opponent" style={styles.timer} textStyle={styles.clock} />
+
+        <ChessBoard style={styles.board} />
+        <ChessMoveHistory style={styles.history} textStyle={styles.move} />
+
+        <PlayerCard player="self" style={styles.card} nameStyle={styles.name} />
+        <Timer player="self" style={styles.timer} textStyle={styles.clock} />
+      </View>
+    </BetaGamerProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  layout: { flex: 1, backgroundColor: '#0f0f0f' },
+  board:  { flex: 1 },
+  // ... your styles
+});
+```
+
+## Components
+
+### Shared (all games)
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `BetaGamerProvider` | `token`, `serverUrl?` | Wrap your game UI with this. Handles socket connection and theme. |
+| `PlayerCard` | `player`, `style?`, `nameStyle?`, `indicatorStyle?` | Player name + active-turn indicator |
+| `Timer` | `player`, `initialSeconds?`, `style?`, `textStyle?` | Live countdown clock, syncs with server |
+
+### Chess
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `ChessBoard` | `style?` | Interactive chess board (WebView) |
+| `ChessMoveHistory` | `style?`, `textStyle?`, `rowStyle?` | Scrollable move list in algebraic notation |
+
+### Other games
+
+| Component | Game |
+|-----------|------|
+| `CheckersBoard` | checkers |
+| `Connect4Board` | connect4 |
+| `TictactoeBoard` | tictactoe |
+| `SubwayRunnerGame`, `SubwayRunnerScore`, `SubwayRunnerLives` | subway-runner |
+
+## Hooks
+
+```tsx
+import { useGameState, useSession, useSocket, useTheme } from '@beta-gamer/react-native';
+
+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
+```
+
+## Differences from `@beta-gamer/react`
+
+| React | React Native |
+|-------|-------------|
+| `className` prop | `style` / `textStyle` / `rowStyle` props |
+| CSS variables for theming | Theme injected via WebView script |
+| `<div>`, `<span>` | `<View>`, `<Text>` |
+| Move history scrolls via CSS | Wrapped in `<ScrollView>` |
+
+## Supported games
+
+`chess` · `checkers` · `connect4` · `tictactoe` · `subway-runner`
+
+## Links
+
+- [Documentation](https://beta-gamer.com/docs)
+- [Dashboard](https://beta-gamer.com/dashboard)
+- [React SDK](https://www.npmjs.com/package/@beta-gamer/react)

package/dist/index.js

@@ -50,28 +50,29 @@ function decodeToken(token) {
 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 [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"]
+      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 }));
     });
     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 });
+  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/package.json

@@ -1,31 +1,33 @@
 {
   "name": "@beta-gamer/react-native",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React Native SDK for Beta Gamer GaaS — composable game components",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "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"
+    "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": ">=18",
+    "react-native": ">=0.73",
     "react-native-webview": ">=13"
   },
   "dependencies": {
     "socket.io-client": "^4.8.1"
   },
   "devDependencies": {
-    "@types/react":        "^19",
+    "@types/react": "^19",
     "@types/react-native": "^0.73.0",
-    "tsup":                "^8.0.0",
-    "typescript":          "^5"
+    "tsup": "^8.0.0",
+    "typescript": "^5"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/acetennyson/beta-gamer"
+    "url": "https://github.com/acetennyson/beta-gamer-sdk"
   },
   "license": "MIT"
 }