board-game-engine-react 0.0.1

package/.eslintrc.js

@@ -0,0 +1,24 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true
+  },
+  extends: ['plugin:react/recommended', 'standard', 'plugin:storybook/recommended'],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly'
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    'react'
+  ],
+  rules: {
+    'operator-linebreak': ['error', 'before']
+  }
+}

package/.storybook/addons.js

@@ -0,0 +1 @@
+import '@storybook/addon-controls/register';

package/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+  stories: ["../stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-webpack5-compiler-swc",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "@storybook/preset-scss"
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  staticDirs: ['../stories/static'],
+};
+export default config;

package/.storybook/webpack.config.js

@@ -0,0 +1,24 @@
+const path = require('path')
+
+const modulesToTranspile = [
+  'react-dialogue-tree'
+]
+
+module.exports = ({ config, mode }) => {
+  config.resolve.alias['react-yarn-visual-novel'] = mode === 'PRODUCTION'
+    ? path.resolve(__dirname, '../dist/react-yarn-visual-novel.min.js')
+    : path.resolve(__dirname, '../src/index.js')
+
+  // brittle
+  const babelLoader = config.module.rules[config.module.rules.length - 1]
+  babelLoader.exclude.shift()
+  babelLoader.exclude.unshift(new RegExp(
+    `node_modules\/(?!${modulesToTranspile.join('|')}).+`)
+  )
+
+  config.resolve.fallback = {
+    fs: false,
+    path: false,
+  }
+  return config
+}

package/README.md

@@ -0,0 +1,4 @@
+# Board Game Engine React
+
+React-based runner for games using board-game-engine
+

package/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: [
+    '@babel/preset-react',
+    ['@babel/preset-env', { targets: { node: 'current' } }]
+  ],
+  plugins: [
+    '@babel/plugin-proposal-object-rest-spread'
+  ]
+}

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

@@ -0,0 +1,12 @@
+/* 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/dist/board-game-engine-react.css

@@ -0,0 +1,2 @@
+html, body, #storybook-root, .story {
+  height: 100%; }

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

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.BoardGameEngineReact = factory(global.React));
+})(this, (function (React) { 'use strict';
+
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+  function BoardGameEngineReact({}) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "board-game-engine-react"
+    });
+  }
+  BoardGameEngineReact.propTypes = {};
+
+  return BoardGameEngineReact;
+
+}));

package/dist/board-game-engine-react.min.css

@@ -0,0 +1 @@
+html,body,#storybook-root,.story{height:100%}

package/dist/board-game-engine-react.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).BoardGameEngineReact=t(e.React)}(this,function(e){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function o({}){return n.default.createElement("div",{className:"board-game-engine-react"})}return o.propTypes={},o});

package/jest.config.js

@@ -0,0 +1,13 @@
+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/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "board-game-engine-react",
+  "version": "0.0.1",
+  "description": "React library for using board-game-engine",
+  "main": "dist/board-game-engine-react.js",
+  "scripts": {
+    "start": "storybook dev p 6006",
+    "test": "jest --verbose false",
+    "test:coverage": "jest --coverage --verbose false",
+    "build": "rollup -c",
+    "storybook": "storybook dev -p 6006",
+    "prepare": "npm run build",
+    "build-storybook": "storybook build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mnbroatch/board-game-engine-react.git"
+  },
+  "keywords": [
+    "react",
+    "board game",
+    "boardgame",
+    "ui"
+  ],
+  "author": "Matthew Broatch",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mnbroatch/board-game-engine-react/issues"
+  },
+  "homepage": "https://github.com/mnbroatch/board-game-engine-react",
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-object-rest-spread": "",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@rollup/plugin-babel": "",
+    "@rollup/plugin-commonjs": "",
+    "@rollup/plugin-json": "",
+    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/addon-onboarding": "^8.4.6",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.4.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-webpack5": "^8.4.6",
+    "@storybook/test": "^8.4.6",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "assert": "^2.0.0",
+    "babel-jest": "^27.4.4",
+    "babel-loader": "^8.3.0",
+    "eslint": "",
+    "eslint-config-standard": "",
+    "eslint-plugin-import": "",
+    "eslint-plugin-node": "",
+    "eslint-plugin-promise": "",
+    "eslint-plugin-react": "",
+    "eslint-plugin-storybook": "^0.11.1",
+    "install": "^0.13.0",
+    "jest": "^27.4.3",
+    "markdown-to-jsx": "",
+    "node-sass": "^7.0.1",
+    "npm": "^8.3.1",
+    "prop-types": "^15.8.1",
+    "raw-loader": "",
+    "react-dom": "^18.2.0",
+    "react-syntax-highlighter": "",
+    "react-useinterval": "",
+    "rollup": "^2.63.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-scss": "^3.0.0",
+    "rollup-plugin-terser": "",
+    "sass-loader": "^12.4.0",
+    "source-loader": "",
+    "storybook": "^8.4.6"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-error-boundary": "^3.1.4",
+    "react-transition-group": "^4.4.5"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,42 @@
+import babel from '@rollup/plugin-babel'
+import { terser } from 'rollup-plugin-terser'
+import scss from 'rollup-plugin-scss'
+import resolve from 'rollup-plugin-node-resolve'
+
+const config = [
+  {
+    input: 'src/index.js',
+    external: ['react'],
+    output: {
+      format: 'umd',
+      file: 'dist/board-game-engine-react.js',
+      name: 'BoardGameEngineReact'
+    },
+    plugins: [
+      resolve({
+      }),
+      babel({
+      }),
+      scss()
+    ]
+  },
+  {
+    input: 'src/index.js',
+    external: ['react'],
+    output: {
+      format: 'umd',
+      file: 'dist/board-game-engine-react.min.js',
+      name: 'BoardGameEngineReact'
+    },
+    plugins: [
+      resolve({
+      }),
+      babel({
+      }),
+      scss({ outputStyle: 'compressed' }),
+      terser()
+    ]
+  }
+]
+
+export default config

package/src/BoardGameEngineReact.js

@@ -0,0 +1,12 @@
+import React, { useRef } from 'react'
+import PropTypes from 'prop-types'
+
+export default function BoardGameEngineReact ({}) {
+  return (
+    <div className="board-game-engine-react">
+    </div>
+  )
+}
+
+BoardGameEngineReact.propTypes = {
+}

package/src/abstract-choices/abstract-choices.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useGame } from "../contexts/game-context.js";
+
+export default function AbstractChoices () {
+  const { clickTarget, allClickable, undoStep, currentMoveTargets } = useGame()
+
+  const abstractChoices = [...allClickable].filter(c => c.abstract)
+
+  // spacer assumes only one row of choices.
+  // could save and store biggest height instead?
+  return (
+    <div style={{ position: 'relative' }}>
+      <button
+        style={{visibility: 'hidden'}}
+        className="button button--style-b button--x-small abstract-choices__choice"
+      >
+        Spacer
+      </button>
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          width: '100%',
+        }}>
+        {!!currentMoveTargets.length && (
+          <button
+            className="button button--style-c button--x-small abstract-choices__choice abstract-choices__choice--undo"
+            onClick={undoStep}
+          >
+            Undo
+          </button>
+        )}
+        {abstractChoices.map((choice, i) => (
+          <button
+            key={i}
+            className="button button--style-b button--x-small abstract-choices__choice"
+            onClick={() => clickTarget(choice)}
+          >
+            {choice.value}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/board/grid.js

@@ -0,0 +1,28 @@
+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/contexts/game-context.js

@@ -0,0 +1,35 @@
+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/entity/entity.js

@@ -0,0 +1,37 @@
+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
+
+  switch (attributes.type) {
+    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}`,
+          allClickable.has(entity) && 'entity--clickable',
+        ].filter(Boolean).join(' ')}
+      >
+        {entity.rule.displayProperties?.map((property, i) => (
+          <div key={i}>
+            {property}: {(entity.attributes[property])?.toString()}
+          </div>
+        ))}
+      </div>
+  }
+}

package/src/game/game.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import Entity from '../entity/entity.js'
+import AbstractChoices from '../abstract-choices/abstract-choices.js'
+import GameStatus from '../game-status/game-status.js'
+import { GameProvider } from "../../contexts/game-context.js";
+
+export default function Game ({ gameConnection }) {
+  console.log('555gameConnection', gameConnection)
+  const { G } = gameConnection.state
+
+  return (
+    <GameProvider
+      gameConnection={gameConnection}
+      isSpectator
+    >
+      <div className="game">
+        <AbstractChoices />
+        <div
+          className="shared-board"
+          style={{
+            width: '100%',
+            display: 'flex',
+            flexWrap: 'wrap',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1em',
+          }}
+        >
+          {G.sharedBoard.entities.map((entity, i) => <Entity key={i} entity={entity} />)}
+        </div>
+        {G.personalBoards && (
+          <div className="personal-boards">
+            {G.personalBoards.map((board, i) => (
+              <div
+                key={i}
+                className="personal-board"
+                style={{
+                  width: '100%',
+                  display: 'grid',
+                  gridAutoFlow: 'column',
+                  gridAutoRows: '1fr',
+                  gap: '1em',
+                }}
+              >
+                {board.entities.map((entity, j) => (
+                  <Entity key={j} entity={entity} />
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+        <GameStatus gameConnection={gameConnection} />
+      </div>
+    </GameProvider>
+  )
+}

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

@@ -0,0 +1,20 @@
+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/index.js

@@ -0,0 +1,3 @@
+import './styles.scss'
+
+export { default } from './BoardGameEngineReact.js'

package/src/space/space.js

@@ -0,0 +1,68 @@
+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].map(e => e.entityId).includes(entityId)
+  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/styles.scss

@@ -0,0 +1,4 @@
+html, body, #storybook-root, .story, {
+  height: 100%;
+}
+

package/stories/BoardGameEngineReact.stories.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import BoardGameEngineReact from '../src/index'
+import { ErrorBoundary } from 'react-error-boundary'
+import './styles.css'
+
+const dialogue = `
+title: Start
+---
+Red: Hello.
+Blue: Hi!
+Red: I'm here.
+Blue: I'm here too!
+===
+`
+
+export default {
+  title: 'BoardGameEngineReact',
+  component: BoardGameEngineReact,
+  className: 'board-game-engine-react',
+  args: {
+    dialogue,
+  },
+  argTypes: {
+    dialogue: {
+      control: 'text'
+    }
+  }
+}
+
+const Template = (props) => {
+  return (
+    <div className="story">
+      <ErrorBoundary
+        resetKeys={[props.dialogue]}
+        fallbackRender={({ error }) => {
+          return (
+            <div>
+              Invalid Dialogue: {error.message}
+            </div>
+          )
+        }}
+      >
+        <BoardGameEngineReact
+          {...props}
+          onDialogueEnd={() => { alert('onDialogueEnd called') }}
+        />
+      </ErrorBoundary>
+    </div>
+  )
+}
+
+export const Basic = Template.bind({})