board-game-engine-react 0.0.22 → 1.0.0

package/README.md

@@ -1,4 +1,85 @@
 # Board Game Engine React
 
-React-based runner for games using board-game-engine
+React library for running games built with [board-game-engine](https://www.npmjs.com/package/board-game-engine). Renders shared boards, personal boards, choices, and game status; connects to a game server or runs in single-player mode.
 
+For game rules, state shape, and engine concepts, see the [board-game-engine](https://www.npmjs.com/package/board-game-engine) package.
+
+---
+
+## Install
+
+```bash
+npm install board-game-engine-react react
+```
+
+---
+
+## API
+
+### `Game`
+
+Root UI component. Renders the current game state (shared board, personal boards, abstract choices, status). Wrap with a provider that supplies `gameConnection`.
+
+```jsx
+import { Game, useGameserverConnection } from 'board-game-engine-react'
+
+function App() {
+  const gameConnection = useGameserverConnection({
+    server: 'https://your-server.com',
+    gameId: 'room-1',
+    gameRules: myGameRules,
+    clientToken: '…',
+    // …other options
+  })
+
+  return (
+    <Game
+      gameConnection={gameConnection}
+      loading={<div>Connecting…</div>}
+      isSpectator={false}
+    />
+  )
+}
+```
+
+| 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. |
+
+---
+
+### `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`). |
+
+---
+
+## Styles
+
+Import the default styles so the game UI looks correct:
+
+```js
+import 'board-game-engine-react/dist/board-game-engine-react.css'
+```
+
+---
+
+## Further reading
+
+- **[board-game-engine](https://www.npmjs.com/package/board-game-engine)** — Game rules, state, `Client` options, and engine concepts.

package/dist/board-game-engine-react.cjs

@@ -29,12 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
-  Client: () => Client4,
+  Client: () => import_board_game_engine2.Client,
   Game: () => Game,
+  gameFactory: () => import_board_game_engine2.gameFactory,
   useGameserverConnection: () => useGameserverConnection
 });
 module.exports = __toCommonJS(index_exports);
-var BoardGameEngine2 = __toESM(require("board-game-engine"));
+var import_board_game_engine2 = require("board-game-engine");
 
 // src/components/game/game.js
 var import_react7 = __toESM(require("react"));
@@ -301,25 +302,26 @@ function Game({ gameConnection, loading, isSpectator }) {
 
 // src/use-gameserver-connection.js
 var import_react8 = require("react");
-var BoardGameEngine = __toESM(require("board-game-engine"));
-var Client2 = BoardGameEngine.Client;
+var import_board_game_engine = require("board-game-engine");
 var useGameserverConnection = ({
   server,
-  gameId,
+  multiplayer,
+  matchID,
   gameRules,
   gameName,
   boardgameIOGame,
-  boardgamePlayerID,
-  clientToken,
+  playerID,
+  credentials,
   numPlayers,
   debug,
-  singlePlayer = false,
   enabled = true
 }) => {
   const [_, forceUpdate] = (0, import_react8.useReducer)((x) => x + 1, 0);
   const [connection, setConnection] = (0, import_react8.useState)(null);
   (0, import_react8.useEffect)(() => {
-    if (!gameRules && !boardgameIOGame || !singlePlayer && (!gameId || !clientToken || !enabled || !server)) return;
+    if (!gameRules && !boardgameIOGame || credentials && !(matchID && enabled && server)) {
+      return;
+    }
     const options = {
       server,
       numPlayers,
@@ -327,22 +329,31 @@ var useGameserverConnection = ({
         forceUpdate();
       },
       debug,
-      gameId,
+      matchID,
       gameRules,
       boardgameIOGame,
       gameName,
-      boardgamePlayerID,
-      clientToken,
-      singlePlayer
+      playerID,
+      credentials,
+      multiplayer
     };
-    const newConnection = new Client2(options);
+    const newConnection = new import_board_game_engine.Client(options);
     newConnection.connect();
     setConnection(newConnection);
     return () => {
       connection?.client?.stop();
       setConnection(null);
     };
-  }, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled]);
+  }, [
+    matchID,
+    server,
+    playerID,
+    credentials,
+    gameRules,
+    boardgameIOGame,
+    enabled,
+    multiplayer
+  ]);
   if (connection) {
     return Object.assign(
       connection,
@@ -352,6 +363,3 @@ var useGameserverConnection = ({
     return {};
   }
 };
-
-// src/index.js
-var Client4 = BoardGameEngine2.Client;

package/dist/board-game-engine-react.mjs

@@ -1,5 +1,5 @@
 // src/index.js
-import * as BoardGameEngine2 from "board-game-engine";
+import { Client as Client2, gameFactory } from "board-game-engine";
 
 // src/components/game/game.js
 import React7 from "react";
@@ -266,25 +266,26 @@ function Game({ gameConnection, loading, isSpectator }) {
 
 // src/use-gameserver-connection.js
 import { useEffect as useEffect2, useReducer, useState } from "react";
-import * as BoardGameEngine from "board-game-engine";
-var Client2 = BoardGameEngine.Client;
+import { Client } from "board-game-engine";
 var useGameserverConnection = ({
   server,
-  gameId,
+  multiplayer,
+  matchID,
   gameRules,
   gameName,
   boardgameIOGame,
-  boardgamePlayerID,
-  clientToken,
+  playerID,
+  credentials,
   numPlayers,
   debug,
-  singlePlayer = false,
   enabled = true
 }) => {
   const [_, forceUpdate] = useReducer((x) => x + 1, 0);
   const [connection, setConnection] = useState(null);
   useEffect2(() => {
-    if (!gameRules && !boardgameIOGame || !singlePlayer && (!gameId || !clientToken || !enabled || !server)) return;
+    if (!gameRules && !boardgameIOGame || credentials && !(matchID && enabled && server)) {
+      return;
+    }
     const options = {
       server,
       numPlayers,
@@ -292,22 +293,31 @@ var useGameserverConnection = ({
         forceUpdate();
       },
       debug,
-      gameId,
+      matchID,
       gameRules,
       boardgameIOGame,
       gameName,
-      boardgamePlayerID,
-      clientToken,
-      singlePlayer
+      playerID,
+      credentials,
+      multiplayer
     };
-    const newConnection = new Client2(options);
+    const newConnection = new Client(options);
     newConnection.connect();
     setConnection(newConnection);
     return () => {
       connection?.client?.stop();
       setConnection(null);
     };
-  }, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled]);
+  }, [
+    matchID,
+    server,
+    playerID,
+    credentials,
+    gameRules,
+    boardgameIOGame,
+    enabled,
+    multiplayer
+  ]);
   if (connection) {
     return Object.assign(
       connection,
@@ -317,11 +327,9 @@ var useGameserverConnection = ({
     return {};
   }
 };
-
-// src/index.js
-var Client4 = BoardGameEngine2.Client;
 export {
-  Client4 as Client,
+  Client2 as Client,
   Game,
+  gameFactory,
   useGameserverConnection
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "board-game-engine-react",
-  "version": "0.0.22",
+  "version": "1.0.0",
   "description": "React library for using board-game-engine",
   "main": "./dist/board-game-engine-react.cjs",
   "module": "./dist/board-game-engine-react.mjs",
@@ -50,8 +50,6 @@
     "@babel/preset-react": "",
     "@chromatic-com/storybook": "^3.2.2",
     "@playwright/test": "^1.49.0",
-    "esbuild": "^0.24.0",
-    "esbuild-plugin-istanbul": "^0.3.0",
     "@storybook/addon-essentials": "^8.4.6",
     "@storybook/addon-interactions": "^8.4.6",
     "@storybook/addon-onboarding": "^8.4.6",
@@ -70,6 +68,8 @@
     "babel-loader": "^8.3.0",
     "babel-plugin-istanbul": "^6.1.1",
     "cross-env": "^7.0.3",
+    "esbuild": "^0.24.0",
+    "esbuild-plugin-istanbul": "^0.3.0",
     "eslint": "",
     "eslint-config-standard": "",
     "eslint-plugin-import": "",
@@ -94,7 +94,7 @@
     "vite": "^5.0.0"
   },
   "dependencies": {
-    "board-game-engine": "^0.0.11",
+    "board-game-engine": "file:../board-game-engine",
     "react": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-transition-group": "^4.4.5"

package/src/index.js

@@ -1,6 +1,5 @@
 import './styles.css'
-import * as BoardGameEngine from 'board-game-engine'
+export { Client, gameFactory } from 'board-game-engine'
 
 export { default as Game } from './components/game/game.js'
 export { useGameserverConnection } from './use-gameserver-connection'
-export const Client = BoardGameEngine.Client

package/src/use-gameserver-connection.js

@@ -1,26 +1,30 @@
 import { useEffect, useReducer, useState } from 'react'
-import * as BoardGameEngine from 'board-game-engine'
-const Client = BoardGameEngine.Client
+import { Client } from 'board-game-engine'
 
 
 export const useGameserverConnection = ({
   server,
-  gameId,
+  multiplayer,
+  matchID,
   gameRules,
   gameName,
   boardgameIOGame,
-  boardgamePlayerID,
-  clientToken,
+  playerID,
+  credentials,
   numPlayers,
   debug,
-  singlePlayer = false,
   enabled = true,
 }) => {
   const [_, forceUpdate] = useReducer(x => x + 1, 0)
   const [connection, setConnection] = useState(null)
 
   useEffect(() => {
-    if (!gameRules && !boardgameIOGame || !singlePlayer && (!gameId || !clientToken || !enabled || !server)) return
+    if (
+      !gameRules && !boardgameIOGame
+        || credentials && !(matchID && enabled && server)
+    ) {
+      return
+    }
 
     const options = {
       server,
@@ -29,13 +33,13 @@ export const useGameserverConnection = ({
         forceUpdate()
       },
       debug,
-      gameId,
+      matchID,
       gameRules,
       boardgameIOGame,
       gameName,
-      boardgamePlayerID,
-      clientToken,
-      singlePlayer,
+      playerID,
+      credentials,
+      multiplayer
     }
 
     const newConnection = new Client(options)
@@ -48,7 +52,16 @@ export const useGameserverConnection = ({
       connection?.client?.stop()
       setConnection(null)
     }
-  }, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled])
+  }, [
+      matchID,
+      server,
+      playerID,
+      credentials,
+      gameRules,
+      boardgameIOGame,
+      enabled,
+      multiplayer,
+    ])
 
   if (connection) {
     return Object.assign(

package/vite.config.js

@@ -0,0 +1,16 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  root: resolve(__dirname, 'test-app'),
+  plugins: [react()],
+  server: {
+    port: 5174,
+  },
+  resolve: {
+    alias: {
+      'board-game-engine-react': resolve(__dirname, 'dist/board-game-engine-react.mjs'),
+    },
+  },
+})

package/vite.harness.config.js

@@ -10,7 +10,7 @@ export default defineConfig({
   },
   resolve: {
     alias: {
-      'board-game-engine-react': resolve(__dirname, 'dist/board-game-engine-react.js'),
+      'board-game-engine-react': resolve(__dirname, 'dist/board-game-engine-react.mjs'),
     },
   },
 })