board-game-engine-react 1.0.2 → 2.0.0

package/src/use-gameserver-connection.ts

@@ -0,0 +1,82 @@
+import { useEffect, useReducer, useState } from 'react'
+import {
+  Client,
+  type ClientOptions,
+  type GameFactoryInput,
+} from 'board-game-engine'
+import type { GameserverConnection } from './types'
+
+export type UseGameserverConnectionParams = Omit<ClientOptions, 'gameRules'> & {
+  gameRules?: GameFactoryInput
+  enabled?: boolean
+}
+
+export function useGameserverConnection ({
+  server,
+  multiplayer,
+  matchID,
+  gameRules,
+  gameName,
+  boardgameIOGame,
+  playerID,
+  credentials,
+  numPlayers,
+  debug,
+  enabled = true,
+}: UseGameserverConnectionParams): GameserverConnection | Record<string, never> {
+  const [_tick, forceUpdate] = useReducer((x: number) => x + 1, 0)
+  const [connection, setConnection] = useState<Client | null>(null)
+
+  useEffect(() => {
+    if (
+      (!gameRules && !boardgameIOGame) ||
+      (credentials && !(matchID && enabled && server))
+    ) {
+      return
+    }
+
+    const options: ClientOptions = {
+      server,
+      numPlayers,
+      onClientUpdate: () => {
+        forceUpdate()
+      },
+      debug,
+      matchID,
+      gameRules,
+      boardgameIOGame,
+      gameName,
+      playerID,
+      credentials,
+      multiplayer,
+    }
+
+    const newConnection = new Client(options)
+
+    newConnection.connect()
+
+    setConnection(newConnection)
+
+    return () => {
+      newConnection.client?.stop()
+      setConnection(null)
+    }
+  }, [
+    matchID,
+    server,
+    playerID,
+    credentials,
+    gameRules,
+    boardgameIOGame,
+    enabled,
+    multiplayer,
+  ])
+
+  if (connection) {
+    return Object.assign(
+      connection,
+      connection.getState?.(),
+    ) as GameserverConnection
+  }
+  return {}
+}

package/stories/BoardGameEngineReact.stories.tsx

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react'
+import type { GameFactoryInput } from 'board-game-engine'
+import { Game, useGameserverConnection } from '../src/index'
+import ticTacToe from './tic-tac-toe.json'
+import { ErrorBoundary } from 'react-error-boundary'
+import './styles.css'
+
+const sampleGame = ticTacToe as unknown as GameFactoryInput
+
+export default {
+  title: 'Game',
+  component: Game,
+  className: 'board-game-engine-react',
+  args: {
+    gameRules: sampleGame,
+    numPlayers: 2,
+    isSpectator: false,
+  },
+  argTypes: {
+    gameRules: { control: 'object' },
+    numPlayers: { control: 'number' },
+    isSpectator: { control: 'boolean' },
+  },
+}
+
+const fallbackRender = ({ error }: { error: Error }) => <div>Invalid Game Rules {error.message}</div>
+
+const Template = ({
+  gameRules,
+  numPlayers,
+  loading,
+  isSpectator,
+}: {
+  gameRules: GameFactoryInput
+  numPlayers: number
+  loading?: ReactNode
+  isSpectator?: boolean
+}) => {
+  const gameConnection = useGameserverConnection({
+    gameRules,
+    numPlayers,
+  })
+
+  return (
+    <div className="story">
+      <ErrorBoundary
+        resetKeys={[JSON.stringify(gameRules), numPlayers]}
+        fallbackRender={fallbackRender}
+      >
+        <Game
+          gameConnection={gameConnection}
+          loading={loading}
+          isSpectator={isSpectator}
+        />
+      </ErrorBoundary>
+    </div>
+  )
+}
+
+export const Basic = Template.bind({})
+
+type TemplateProps = Parameters<typeof Template>[0]
+
+export const WithLoading = Object.assign(
+  (args: TemplateProps) => (
+    <Template
+      {...args}
+      loading={<div className="story-loading">Loading game…</div>}
+    />
+  ),
+  {
+    args: {
+      gameRules: sampleGame,
+      numPlayers: 2,
+    },
+  }
+)
+
+export const Spectator = Object.assign(Template.bind({}), {
+  args: {
+    gameRules: sampleGame,
+    numPlayers: 2,
+    isSpectator: true,
+  },
+})

package/test-app/index.html

@@ -20,6 +20,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="./main.jsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>

package/test-app/{main.jsx → main.tsx}

@@ -1,5 +1,6 @@
-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import { createRoot } from 'react-dom/client'
+import type { GameFactoryInput } from 'board-game-engine'
 import '../dist/board-game-engine-react.css'
 import { Game, useGameserverConnection } from 'board-game-engine-react'
 
@@ -14,9 +15,9 @@ const GAME_OPTIONS = [
 function Harness () {
   const [gameKey, setGameKey] = useState('tic-tac-toe')
   const [numPlayers, setNumPlayers] = useState(2)
-  const [gameRules, setGameRules] = useState(null)
+  const [gameRules, setGameRules] = useState<GameFactoryInput | null>(null)
   const [loading, setLoading] = useState(false)
-  const [error, setError] = useState(null)
+  const [error, setError] = useState<string | null>(null)
 
   const startGame = useCallback(async () => {
     setError(null)
@@ -24,12 +25,12 @@ function Harness () {
     try {
       const res = await fetch(`/games/${gameKey}.json`)
       if (!res.ok) throw new Error(res.statusText)
-      const rules = await res.json()
+      const rules = await res.json() as GameFactoryInput
       const n = Number(numPlayers) || rules.numPlayers || rules.maxPlayers || 2
-      setGameRules(JSON.stringify(rules))
+      setGameRules(rules)
       setNumPlayers(n)
     } catch (err) {
-      setError(err.message || String(err))
+      setError(err instanceof Error ? err.message : String(err))
       setGameRules(null)
     } finally {
       setLoading(false)
@@ -37,14 +38,13 @@ function Harness () {
   }, [gameKey, numPlayers])
 
   const connection = useGameserverConnection({
-    singlePlayer: true,
-    gameRules: gameRules || '',
+    gameRules: gameRules ?? undefined,
     gameName: gameKey,
     numPlayers,
-    enabled: !!gameRules,
+    enabled: gameRules != null,
   })
 
-  const hasState = connection?.getState?.()
+  const hasState = connection && 'getState' in connection ? connection.getState?.() : undefined
 
   return (
     <div className="harness" data-testid="harness">
@@ -98,4 +98,6 @@ function Harness () {
 }
 
 const root = document.getElementById('root')
-createRoot(root).render(<Harness />)
+if (root) {
+  createRoot(root).render(<Harness />)
+}

package/tsconfig.build.json

@@ -0,0 +1,14 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "stripInternal": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.d.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "board-game-engine-react": ["./src/index.ts"]
+    },
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM"],
+    "jsx": "react-jsx",
+    "strict": true,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowJs": false,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "rootDir": "."
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.d.ts",
+    "stories/**/*.ts",
+    "stories/**/*.tsx",
+    "test-app/**/*.tsx",
+    "board-game-engine-react.test.ts"
+  ],
+  "exclude": ["node_modules", "dist"]
+}

package/board-game-engine-react.test.js

@@ -1,12 +0,0 @@
-/* eslint-env jest */
-
-import '@testing-library/jest-dom/extend-expect'
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-describe('board-game-engine-react', () => {
-  test('has a test', async () => {
-    return true
-  })
-})

package/jest.config.js

@@ -1,13 +0,0 @@
-module.exports = {
-  transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest'
-  },
-  testEnvironment: 'jsdom',
-  transformIgnorePatterns: [
-    '/node_modules/(?!yarn-bound|@mnbroatch|react-dialogue-tree).+\\.js$'
-  ],
-  moduleNameMapper: {
-    '^.+\\.(css|less|scss)$': 'babel-jest'
-  },
-  clearMocks: true
-}

package/src/components/board/grid.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import Entity from "../entity/entity.js";
-
-export default function Grid ({ grid }) {
-  const { width, height, spaces } = grid.attributes;
-  return (
-    <div
-      className="grid"
-      style={{ 
-        display: 'inline-grid',
-        width: '100%',
-        gridTemplateColumns: `repeat(${width}, 1fr)`,
-        gridTemplateRows: `repeat(${height}, 1fr)`,
-      }}
-    >
-      {spaces.map((space, index) => {
-        return (
-          <div
-            key={index}
-            className="grid__cell"
-          >
-            <Entity entity={space} />
-          </div>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/entity/entity.js

@@ -1,38 +0,0 @@
-import React from 'react'
-import { useGame } from "../../contexts/game-context.js";
-import Grid from '../board/grid.js'
-import Space from "../space/space.js";
-
-export default function Entity ({ entity }) {
-  const { clickTarget, allClickable } = useGame()
-  const isClickable = allClickable.has(entity)
-  const attributes = entity.attributes
-  const entityType = attributes.entityType ?? attributes.type
-
-  switch (entityType) {
-    case 'Grid':
-      return <Grid grid={entity} isClickable={isClickable} />
-    case 'Space':
-      return <Space space={entity} isClickable={isClickable} />
-    default:
-      return <div
-        onClick={(e) => {
-          if (isClickable) {
-            e.stopPropagation()
-            clickTarget(entity)
-          }
-        }}
-        className={[
-          'entity',
-          attributes.player && `player-${attributes.player}`,
-          isClickable && 'entity--clickable',
-        ].filter(Boolean).join(' ')}
-      >
-        {entity.rule.displayProperties?.map((property, i) => (
-          <div key={i}>
-            {property}: {(entity.attributes[property])?.toString()}
-          </div>
-        ))}
-      </div>
-  }
-}

package/src/components/game-status/game-status.js

@@ -1,20 +0,0 @@
-import React from 'react'
-
-export default function GameStatus ({ gameConnection }) {
-  const players = gameConnection.client.matchData
-  const winner = gameConnection.state.ctx.gameover?.winner
-  const draw = gameConnection.state.ctx.gameover?.draw
-  let winnerString = ''
-  if (draw) {
-    winnerString = 'Draw!'
-  } else if (players && winner) {
-    winnerString = `${players[winner].name} Wins!`
-  } else if (winner) {
-    winnerString = `Player ${winner} Wins!`
-  }
-  return gameConnection.state.ctx.gameover && (
-    <div className="game-status">
-      {winnerString}
-    </div>
-  )
-}

package/src/components/space/space.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import { useGame } from "../../contexts/game-context.js";
-import Entity from '../entity/entity.js'
-
-function calculateOptimalCols(numSquares) {
-  if (numSquares === 0) return 1;
-  
-  let bestCols = 1;
-  let bestAspectRatio = Infinity;
-  
-  for (let cols = 1; cols <= numSquares; cols++) {
-    const rows = Math.ceil(numSquares / cols);
-    const aspectRatio = Math.abs(cols - rows);
-    
-    if (aspectRatio < bestAspectRatio) {
-      bestAspectRatio = aspectRatio;
-      bestCols = cols;
-    }
-  }
-  
-  return bestCols;
-}
-
-export default function Space ({ space }) {
-  const { clickTarget, allClickable, currentMoveTargets } = useGame()
-  const { entities, entityId } = space.attributes
-
-  const clickable = allClickable.has(space)
-  const targeted = currentMoveTargets?.map(e => e.entityId).includes(entityId)
-
-  return (
-    <a
-      className={[
-        'space',
-        clickable && 'space--clickable',
-        targeted && 'space--targeted'
-      ].filter(Boolean).join(' ')}
-      onClick={() => clickTarget(space)}
-      style={{
-        display: 'inline-block',
-        flex: '1',
-      }}
-    >
-       <div 
-          className="space__entity-grid"
-          style={{
-            display: 'flex',
-            height: '100%',
-            width: '100%',
-            flexWrap: 'wrap',
-          }}
-        >
-          {Array.from({ length: entities.length }, (_, i) => (
-            <div
-              className="space__entity-grid__cell"
-              style={{
-                display: 'inline-block',
-              }}
-              key={i}
-            >
-              <Entity entity={entities[i]} />
-            </div>
-          ))}
-          {!entities.length && space.attributes.name}
-        </div>
-    </a>
-  );
-}

package/src/contexts/game-context.js

@@ -1,35 +0,0 @@
-import React, { createContext, useContext, useEffect } from 'react';
-
-const GameContext = createContext({
-  clickTarget: () => {},
-});
-
-// do we need isSpectator
-export function GameProvider({ gameConnection, children, isSpectator }) {
-  useEffect(() => {
-    if (gameConnection.state._stateID === 0) {
-      gameConnection.reset()
-    }
-  }, [gameConnection.state._stateID]);
-
-  return (
-    <GameContext.Provider value={{
-      clickTarget: target => {
-        if (!isSpectator) {
-          gameConnection.doStep(target)
-        }
-      },
-      undoStep: () => { gameConnection.undoStep() },
-      allClickable: (gameConnection.optimisticWinner || isSpectator)
-        ? new Set()
-        : gameConnection.allClickable,
-      currentMoveTargets: (gameConnection.optimisticWinner || isSpectator)
-        ? []
-        : gameConnection.moveBuilder.targets,
-    }}>
-      {children}
-    </GameContext.Provider>
-  );
-}
-
-export const useGame = () => useContext(GameContext);

package/src/index.js

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

package/src/use-gameserver-connection.js

@@ -1,74 +0,0 @@
-import { useEffect, useReducer, useState } from 'react'
-import { Client } from 'board-game-engine'
-
-
-export const useGameserverConnection = ({
-  server,
-  multiplayer,
-  matchID,
-  gameRules,
-  gameName,
-  boardgameIOGame,
-  playerID,
-  credentials,
-  numPlayers,
-  debug,
-  enabled = true,
-}) => {
-  const [_, forceUpdate] = useReducer(x => x + 1, 0)
-  const [connection, setConnection] = useState(null)
-
-  useEffect(() => {
-    if (
-      !gameRules && !boardgameIOGame
-        || credentials && !(matchID && enabled && server)
-    ) {
-      return
-    }
-
-    const options = {
-      server,
-      numPlayers,
-      onClientUpdate: () => {
-        forceUpdate()
-      },
-      debug,
-      matchID,
-      gameRules,
-      boardgameIOGame,
-      gameName,
-      playerID,
-      credentials,
-      multiplayer
-    }
-
-    const newConnection = new Client(options)
-
-    newConnection.connect()
-
-    setConnection(newConnection)
-
-    return () => {
-      connection?.client?.stop()
-      setConnection(null)
-    }
-  }, [
-      matchID,
-      server,
-      playerID,
-      credentials,
-      gameRules,
-      boardgameIOGame,
-      enabled,
-      multiplayer,
-    ])
-
-  if (connection) {
-    return Object.assign(
-      connection,
-      connection?.getState?.(),
-    )
-  } else {
-    return {}
-  }
-}

package/stories/BoardGameEngineReact.stories.js

@@ -1,72 +0,0 @@
-import React from 'react'
-import { Game, useGameserverConnection } from '../src/index'
-import ticTacToe from './tic-tac-toe.json'
-import { ErrorBoundary } from 'react-error-boundary'
-import './styles.css'
-
-export default {
-  title: 'Game',
-  component: Game,
-  className: 'board-game-engine-react',
-  args: {
-    gameRules: JSON.stringify(ticTacToe, null, 2),
-    numPlayers: 2,
-    isSpectator: false,
-  },
-  argTypes: {
-    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 fallbackRender = ({ error }) => <div>Invalid Game Rules {error}</div>
-
-const Template = ({ gameRules, numPlayers, loading, isSpectator }) => {
-  const rules = parseGameRules(gameRules, ticTacToe)
-  const gameConnection = useGameserverConnection({
-    gameRules: rules,
-    numPlayers,
-  })
-
-  return (
-    <div className="story">
-      <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,
-}