board-game-engine-react 1.0.0 → 1.0.2

package/README.md

@@ -18,7 +18,7 @@ npm install board-game-engine-react react
 
 ### `Game`
 
-Root UI component. Renders the current game state (shared board, personal boards, abstract choices, status). Wrap with a provider that supplies `gameConnection`.
+Root UI component. Renders the current game state (shared board, personal boards, abstract choices, status). Pass a `gameConnection` object from `useGameserverConnection`.
 
 ```jsx
 import { Game, useGameserverConnection } from 'board-game-engine-react'
@@ -26,10 +26,11 @@ import { Game, useGameserverConnection } from 'board-game-engine-react'
 function App() {
   const gameConnection = useGameserverConnection({
     server: 'https://your-server.com',
-    gameId: 'room-1',
+    matchID: 'room-1',
     gameRules: myGameRules,
-    clientToken: '…',
-    // …other options
+    credentials: '…',
+    playerID: '0',
+    numPlayers: 2,
   })
 
   return (
@@ -42,31 +43,40 @@ function App() {
 }
 ```
 
+Single-player (no server): omit `server`, `matchID`, and `credentials` and pass `gameRules` and `numPlayers`:
+
+```jsx
+const gameConnection = useGameserverConnection({
+  gameRules: myGameRules,
+  numPlayers: 2,
+})
+```
+
 | Prop              | Type    | Description |
 |-------------------|---------|-------------|
 | `gameConnection`  | object  | Connection/state object (e.g. from `useGameserverConnection`). |
-| `loading`        | node   | Rendered while there is no game state (e.g. connecting). |
-| `isSpectator`    | boolean | If true, disables making moves. |
+| `loading`         | node    | Rendered while there is no game state (e.g. connecting). |
+| `isSpectator`     | boolean | If true, disables making moves. |
 
 ---
 
 ### `useGameserverConnection(options)`
 
-Hook that creates and maintains a connection to a game server. Returns an object that includes connection state and methods; pass this object as `gameConnection` to `<Game />`.
-
-| Option              | Type    | Description |
-|---------------------|---------|-------------|
-| `server`            | string  | Game server URL (required unless `singlePlayer`). |
-| `gameId`            | string  | Room/game id (required unless `singlePlayer`). |
-| `clientToken`       | string  | Auth token for the client (required unless `singlePlayer`). |
-| `gameRules`         | object  | Game definition from board-game-engine (for server-driven games). |
-| `boardgameIOGame`   | object  | boardgame.io game config (alternative to `gameRules`). |
-| `gameName`          | string  | Game name sent to server. |
-| `boardgamePlayerID` | string  | Player id (e.g. `'0'`, `'1'`). |
-| `numPlayers`        | number  | Number of players. |
-| `debug`             | boolean | Enable debug logging. |
-| `singlePlayer`      | boolean | If true, run locally without a server (default: `false`). |
-| `enabled`           | boolean | If false, skip connecting (default: `true`). |
+Hook that creates and maintains a connection to a game server (or a local game when no server is configured). Returns an object that includes connection state and methods; pass this object as `gameConnection` to `<Game />`.
+
+| Option            | Type    | Description |
+|-------------------|---------|-------------|
+| `server`          | string  | Game server URL (required for multiplayer). |
+| `matchID`         | string  | Room/match id (required for multiplayer). |
+| `credentials`     | string  | Auth credentials for the client (required for multiplayer). |
+| `gameRules`       | object  | Game definition from board-game-engine. |
+| `boardgameIOGame` | object  | boardgame.io game config (alternative to `gameRules`). |
+| `gameName`        | string  | Game name sent to server. |
+| `playerID`        | string  | Player id (e.g. `'0'`, `'1'`). |
+| `numPlayers`      | number  | Number of players. |
+| `multiplayer`     | boolean | Use server multiplayer; omit or false for local/single-player. |
+| `debug`           | boolean | Enable debug logging. |
+| `enabled`         | boolean | If false, skip connecting (default: `true`). |
 
 ---
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "board-game-engine-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React library for using board-game-engine",
   "main": "./dist/board-game-engine-react.cjs",
   "module": "./dist/board-game-engine-react.mjs",
@@ -94,7 +94,7 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
-    "board-game-engine": "file:../board-game-engine",
+    "board-game-engine": "^1.0.5",
     "react": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-transition-group": "^4.4.5"

package/stories/BoardGameEngineReact.stories.js

@@ -11,40 +11,62 @@ export default {
   args: {
     gameRules: JSON.stringify(ticTacToe, null, 2),
     numPlayers: 2,
+    isSpectator: false,
   },
   argTypes: {
-    gameRules: {
-      control: 'text'
-    },
-    numPlayers: {
-      control: 'number'
-    }
+    gameRules: { control: 'text' },
+    numPlayers: { control: 'number' },
+    isSpectator: { control: 'boolean' },
+  },
+}
+
+const parseGameRules = (gameRules, fallback) => {
+  if (typeof gameRules !== 'string') return gameRules
+  try {
+    return JSON.parse(gameRules || '{}')
+  } catch {
+    return fallback
   }
 }
 
-const Template = ({ gameRules, numPlayers }) => {
+const fallbackRender = ({ error }) => <div>Invalid Game Rules {error}</div>
+
+const Template = ({ gameRules, numPlayers, loading, isSpectator }) => {
+  const rules = parseGameRules(gameRules, ticTacToe)
   const gameConnection = useGameserverConnection({
-    gameRules,
-    singlePlayer: true,
+    gameRules: rules,
     numPlayers,
   })
 
   return (
     <div className="story">
-      <ErrorBoundary
-        resetKeys={[gameRules, numPlayers]}
-        fallbackRender={({ error }) => {
-          return (
-            <div>
-              Invalid Game Rules {error}
-            </div>
-          )
-        }}
-      >
-        <Game gameConnection={gameConnection} />
+      <ErrorBoundary resetKeys={[gameRules, numPlayers]} fallbackRender={fallbackRender}>
+        <Game
+          gameConnection={gameConnection}
+          loading={loading}
+          isSpectator={isSpectator}
+        />
       </ErrorBoundary>
     </div>
   )
 }
 
 export const Basic = Template.bind({})
+
+export const WithLoading = (args) => (
+  <Template
+    {...args}
+    loading={<div className="story-loading">Loading game…</div>}
+  />
+)
+WithLoading.args = {
+  gameRules: JSON.stringify(ticTacToe, null, 2),
+  numPlayers: 2,
+}
+
+export const Spectator = Template.bind({})
+Spectator.args = {
+  gameRules: JSON.stringify(ticTacToe, null, 2),
+  numPlayers: 2,
+  isSpectator: true,
+}