board-game-engine-react 0.0.16 → 0.0.18

package/examples/reversi.json

@@ -0,0 +1,215 @@
+{
+  "entities": [
+    {
+      "name": "mainGrid",
+      "entityType": "Grid",
+      "width": 8,
+      "height": 8
+    },
+    {
+      "name": "disc",
+      "state": { "player": "0" },
+      "count": "Infinity"
+    }
+  ],
+  "sharedBoard": [{ "name": "mainGrid" }],
+  "initialPlacements": [
+    {
+      "entity": {
+        "name": "disc",
+        "state": { "player": "0" }
+      },
+      "destination": { "index": 27 }
+    },
+    {
+      "entity": {
+        "name": "disc",
+        "state": { "player": "1" }
+      },
+      "destination": { "index": 28 }
+    },
+    {
+      "entity": {
+        "name": "disc",
+        "state": { "player": "1" }
+      },
+      "destination": { "index": 35 }
+    },
+    {
+      "entity": {
+        "name": "disc",
+        "state": { "player": "0" }
+      },
+      "destination": { "index": 36 }
+    }
+  ],
+  "minPlayers": 2,
+  "maxPlayers": 2,
+  "turn": {
+    "minMoves": 1,
+    "maxMoves": 1,
+    "initialMoves": [{
+      "moveType": "PassTurn",
+      "conditions": [{ "conditionType": "NoPossibleMoves" }]
+    }]
+  },
+  "moves": {
+    "placeDisc": {
+      "moveType": "PlaceNew",
+      "entity": {
+        "state": {
+          "player": {
+            "type": "ctxPath",
+            "path": ["currentPlayer"]
+          }
+        },
+        "conditions": [{
+          "conditionType": "Is",
+          "matcher": { "name": "disc" }
+        }]
+      },
+      "arguments": {
+        "destination": {
+          "playerChoice": true,
+          "conditions": [
+            {
+              "conditionType": "Is",
+              "matcher": { "entityType": "Space" }
+            },
+            {
+              "conditionType": "Not",
+              "conditions": [{ "conditionType": "Contains" }]
+            },
+            {
+              "conditionType": "InLine",
+              "sequence": [
+                {
+                  "conditions": [{
+                    "conditionType": "Is",
+                    "entity": {
+                      "type": "contextPath",
+                      "path": ["originalTarget"]
+                    }
+                  }]
+                },
+                {
+                  "minCount": 1,
+                  "conditions": [
+                    {
+                      "conditionType": "Not",
+                      "conditions": [{
+                        "conditionType": "Contains",
+                        "conditions": [{
+                          "conditionType": "Is",
+                          "matcher": {
+                            "player": {
+                              "type": "ctxPath",
+                              "path": ["currentPlayer"]
+                            }
+                          }
+                        }]
+                      }]
+                    },
+                    {
+                      "conditionType": "ContainsSame",
+                      "properties": ["player"]
+                    }
+                  ]
+                },
+                {
+                  "conditions": [{
+                    "conditionType": "Contains",
+                    "conditions": [{
+                      "conditionType": "Is",
+                      "matcher": {
+                        "player": {
+                          "type": "ctxPath",
+                          "path": ["currentPlayer"]
+                        }
+                      }
+                    }]
+                  }]
+                }
+              ]
+            }
+          ]
+        }
+      },
+      "then": [{
+        "moveType": "ForEach",
+        "arguments": {
+          "targets": {
+            "type": "contextPath",
+            "path": [
+              "moveConditionResults",
+              0,
+              "conditionResults",
+              "argumentResults",
+              "destination",
+              "results",
+              0,
+              "results",
+              2,
+              "matches",
+              { "flatten": true, "map": ["entities"] },
+              { "flatten": true }
+            ]
+          }
+        },
+        "move": {
+          "moveType": "SetState",
+          "arguments": {
+            "entity": {
+              "type": "contextPath",
+              "path": [ "loopTarget" ]
+            },
+            "state": {
+              "property": "player",
+              "value": {
+                "type": "ctxPath",
+                "path": ["currentPlayer"]
+              }
+            }
+          }
+        }
+      }]
+    }
+  },
+  "endIf": [{
+    "conditions": [{
+      "conditionType": "Evaluate",
+      "expression": "passCount == numPlayers",
+      "arguments": {
+        "passCount": {
+          "type": "gamePath",
+          "path": ["_meta", "passedPlayers", "length"]
+        },
+        "numPlayers": {
+          "type": "ctxPath",
+          "path": ["playOrder", "length"]
+        }
+      }
+    }],
+    "result": {
+      "winners": {
+        "type": "mapMax",
+        "targets": {
+          "type": "ctxPath",
+          "path": ["playOrder"]
+        },
+        "mapping": {
+          "type": "count",
+          "conditions": [{
+            "conditionType": "Is",
+            "matcher": {
+              "player": {
+                "type": "contextPath",
+                "path": [ "loopTarget" ]
+              }
+            }
+          }]
+        }
+      }
+    }
+  }]
+}

package/examples/tic-tac-toe.json

@@ -0,0 +1,53 @@
+{
+  "entities": [
+    {
+      "name": "mainGrid",
+      "entityType": "Grid",
+      "width": 3,
+      "height": 3
+    }
+  ],
+  "numPlayers": 2,
+  "moves": {
+    "placePlayerMarker": {
+      "moveType": "PlaceNew",
+      "entity": {
+        "conditions": "isCurrentPlayer"
+      },
+      "arguments": {
+        "destination": {
+          "conditions": [
+            { "entityType": "Space" },
+            "isEmpty"
+          ],
+          "playerChoice": true
+        }
+      }
+    }
+  },
+  "endIf": [
+    {
+      "conditions": [{
+        "conditionType": "HasLine",
+        "target": "mainGrid",
+        "sequence": [
+          {
+            "minCount": 3,
+            "conditions": [{
+              "conditionType": "ContainsSame",
+              "properties": ["player"]
+            }]
+          }
+        ]
+      }],
+      "result": { "winner": "ownerOfFirstResultEntity" }
+    },
+    {
+      "conditions": [{
+        "conditionType": "IsFull",
+        "target": "mainGrid"
+      }],
+      "result": { "draw": true }
+    }
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "board-game-engine-react",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "React library for using board-game-engine",
   "main": "dist/board-game-engine-react.js",
   "scripts": {
@@ -8,9 +8,15 @@
     "test": "jest --verbose false",
     "test:coverage": "jest --coverage --verbose false",
     "build": "rollup -c",
+    "build:coverage": "cross-env COVERAGE=1 rollup -c",
     "storybook": "storybook dev -p 6006",
     "prepare": "npm run build",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test:e2e": "playwright test",
+    "test:e2e:install": "playwright install firefox",
+    "test:e2e:coverage": "npm run build:coverage && cross-env COVERAGE=1 playwright test && nyc merge .nyc_output/run .nyc_output/out.json && nyc report --reporter=html --reporter=text",
+    "serve:harness": "vite --config vite.harness.config.js",
+    "copy-games": "node -e \"const fs=require('fs');const path=require('path');const src=path.join('node_modules','board-game-engine','examples');const dest=path.join('test-app','public','games');fs.mkdirSync(dest,{recursive:true});fs.readdirSync(src).filter(f=>f.endsWith('.json')).forEach(f=>fs.copyFileSync(path.join(src,f),path.join(dest,f)))\""
   },
   "repository": {
     "type": "git",
@@ -52,6 +58,8 @@
     "@testing-library/user-event": "^13.5.0",
     "assert": "^2.0.0",
     "babel-jest": "^27.4.4",
+    "babel-plugin-istanbul": "^6.1.1",
+    "cross-env": "^7.0.3",
     "babel-loader": "^8.3.0",
     "eslint": "",
     "eslint-config-standard": "",
@@ -63,8 +71,10 @@
     "install": "^0.13.0",
     "jest": "^27.4.3",
     "markdown-to-jsx": "",
+    "nyc": "^15.1.0",
     "node-sass": "^7.0.1",
     "npm": "^8.3.1",
+    "@playwright/test": "^1.49.0",
     "prop-types": "^15.8.1",
     "raw-loader": "",
     "react-dom": "^18.2.0",
@@ -76,7 +86,9 @@
     "rollup-plugin-terser": "",
     "sass-loader": "^12.4.0",
     "source-loader": "",
-    "storybook": "^8.4.6"
+    "storybook": "^8.4.6",
+    "vite": "^5.0.0",
+    "@vitejs/plugin-react": "^4.2.1"
   },
   "dependencies": {
     "board-game-engine": "^0.0.9",

package/playwright.config.cjs

@@ -0,0 +1,23 @@
+const { devices } = require('@playwright/test')
+
+const PORT = 5174
+
+module.exports = {
+  testDir: 'e2e',
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'html',
+  use: {
+    baseURL: `http://localhost:${PORT}`,
+    trace: 'on-first-retry',
+    viewport: { width: 800, height: 600 },
+  },
+  projects: [{ name: 'firefox', use: { ...devices['Desktop Firefox'] } }],
+  webServer: {
+    command: `npx vite --config vite.harness.config.js`,
+    url: `http://localhost:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+  },
+}

package/src/components/entity/entity.js

@@ -3,12 +3,19 @@ import { useGame } from "../../contexts/game-context.js";
 import Grid from '../board/grid.js'
 import Space from "../space/space.js";
 
+function sameEntity (a, b) {
+  const idA = a.entityId ?? a.attributes?.entityId
+  const idB = b.entityId ?? b.attributes?.entityId
+  return idA != null && idB != null && idA === idB
+}
+
 export default function Entity ({ entity }) {
   const { clickTarget, allClickable } = useGame()
-  const isClickable = allClickable.has(entity)
+  const isClickable = [...allClickable].some(c => sameEntity(c, entity))
   const attributes = entity.attributes
+  const entityType = attributes.entityType ?? attributes.type
 
-  switch (attributes.type) {
+  switch (entityType) {
     case 'Grid':
       return <Grid grid={entity} isClickable={isClickable} />
     case 'Space':
@@ -24,7 +31,7 @@ export default function Entity ({ entity }) {
         className={[
           'entity',
           attributes.player && `player-${attributes.player}`,
-          allClickable.has(entity) && 'entity--clickable',
+          isClickable && 'entity--clickable',
         ].filter(Boolean).join(' ')}
       >
         {entity.rule.displayProperties?.map((property, i) => (

package/src/components/game/game.js

@@ -5,6 +5,7 @@ import GameStatus from '../game-status/game-status.js'
 import { GameProvider } from "../../contexts/game-context.js";
 
 export default function Game ({ gameConnection, loading, isSpectator }) {
+  console.log('gameConnection?.getState?.()', gameConnection?.getState?.())
   const G = gameConnection?.getState?.().state.G
 
   return G

package/test-app/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Board Game Engine React – E2E harness</title>
+    <style>
+      html, body { margin: 0; min-height: 100vh; font-family: system-ui, -apple-system, sans-serif; background: #0f172a; color: #e5e7eb; }
+      #root { padding: 1rem 1.5rem 2rem; }
+      .harness__controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
+      .harness__controls label { font-size: 0.9rem; }
+      .harness__controls select, .harness__controls input, .harness__controls button {
+        background: #1e293b; color: #e5e7eb; border: 1px solid #334155; border-radius: 6px; padding: 0.4rem 0.75rem; font-size: 0.9rem;
+      }
+      .harness__controls button { cursor: pointer; background: #16a34a; color: #fff; border: none; font-weight: 600; }
+      .harness__controls button:hover { filter: brightness(1.1); }
+      .harness__controls button:disabled { opacity: 0.6; cursor: not-allowed; }
+      .harness__game { min-height: 200px; }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.jsx"></script>
+  </body>
+</html>

package/test-app/main.jsx

@@ -0,0 +1,101 @@
+import React, { useState, useCallback } from 'react'
+import { createRoot } from 'react-dom/client'
+import '../dist/board-game-engine-react.css'
+import { Game, useGameserverConnection } from 'board-game-engine-react'
+
+const GAME_OPTIONS = [
+  { value: 'tic-tac-toe', label: 'Tic Tac Toe' },
+  { value: 'connect-four', label: 'Connect Four' },
+  { value: 'reversi', label: 'Reversi' },
+  { value: 'eights', label: 'Crazy Eights' },
+  { value: 'checkers', label: 'Checkers' },
+]
+
+function Harness () {
+  const [gameKey, setGameKey] = useState('tic-tac-toe')
+  const [numPlayers, setNumPlayers] = useState(2)
+  const [gameRules, setGameRules] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+
+  const startGame = useCallback(async () => {
+    setError(null)
+    setLoading(true)
+    try {
+      const res = await fetch(`/games/${gameKey}.json`)
+      if (!res.ok) throw new Error(res.statusText)
+      const rules = await res.json()
+      const n = Number(numPlayers) || rules.numPlayers || rules.maxPlayers || 2
+      setGameRules(JSON.stringify(rules))
+      setNumPlayers(n)
+    } catch (err) {
+      setError(err.message || String(err))
+      setGameRules(null)
+    } finally {
+      setLoading(false)
+    }
+  }, [gameKey, numPlayers])
+
+  const connection = useGameserverConnection({
+    singlePlayer: true,
+    gameRules: gameRules || '',
+    gameName: gameKey,
+    numPlayers,
+    enabled: !!gameRules,
+  })
+
+  const hasState = connection?.getState?.()
+
+  return (
+    <div className="harness" data-testid="harness">
+      <h1 data-testid="harness-title">Board Game Engine React</h1>
+      <div className="harness__controls">
+        <label>
+          Game
+          <select
+            id="game-select"
+            data-testid="game-select"
+            value={gameKey}
+            onChange={(e) => { setGameKey(e.target.value); setGameRules(null) }}
+          >
+            {GAME_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </label>
+        <label>
+          Players
+          <input
+            id="players-input"
+            data-testid="players-input"
+            type="number"
+            min={1}
+            max={6}
+            value={numPlayers}
+            onChange={(e) => setNumPlayers(Number(e.target.value) || 2)}
+          />
+        </label>
+        <button
+          id="start-btn"
+          data-testid="start-btn"
+          type="button"
+          onClick={startGame}
+          disabled={loading}
+        >
+          {loading ? 'Loading…' : 'Start / Reset Game'}
+        </button>
+      </div>
+      {error && <p data-testid="harness-error" role="alert">{error}</p>}
+      <div className="harness__game" data-testid="harness-game">
+        <Game
+          gameConnection={hasState ? connection : null}
+          loading={gameRules && !hasState ? 'Starting…' : null}
+          isSpectator={false}
+        />
+      </div>
+    </div>
+  )
+}
+
+const root = document.getElementById('root')
+createRoot(root).render(<Harness />)