board-game-engine-react 0.0.1 → 0.0.3

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

@@ -1,20 +1,249 @@
 (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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BoardGameEngineReact = {}, global.React));
+})(this, (function (exports, 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({}) {
+  const GameContext = /*#__PURE__*/React.createContext({
+    clickTarget: () => {}
+  });
+
+  // do we need isSpectator
+  function GameProvider({
+    gameConnection,
+    children,
+    isSpectator
+  }) {
+    React.useEffect(() => {
+      if (gameConnection.state._stateID === 0) {
+        gameConnection.reset();
+      }
+    }, [gameConnection.state._stateID]);
+    return /*#__PURE__*/React__default["default"].createElement(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);
+  }
+  const useGame = () => React.useContext(GameContext);
+
+  function Grid({
+    grid
+  }) {
+    const {
+      width,
+      height,
+      spaces
+    } = grid.attributes;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "grid",
+      style: {
+        display: 'inline-grid',
+        width: '100%',
+        gridTemplateColumns: `repeat(${width}, 1fr)`,
+        gridTemplateRows: `repeat(${height}, 1fr)`
+      }
+    }, spaces.map((space, index) => {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: index,
+        className: "grid__cell"
+      }, /*#__PURE__*/React__default["default"].createElement(Entity, {
+        entity: space
+      }));
+    }));
+  }
+
+  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 /*#__PURE__*/React__default["default"].createElement("a", {
+      className: ['space', clickable && 'space--clickable', targeted && 'space--targeted'].filter(Boolean).join(' '),
+      onClick: () => clickTarget(space),
+      style: {
+        display: 'inline-block',
+        flex: '1'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "space__entity-grid",
+      style: {
+        display: 'flex',
+        height: '100%',
+        width: '100%',
+        flexWrap: 'wrap'
+      }
+    }, Array.from({
+      length: entities.length
+    }, (_, i) => /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "space__entity-grid__cell",
+      style: {
+        display: 'inline-block'
+      },
+      key: i
+    }, /*#__PURE__*/React__default["default"].createElement(Entity, {
+      entity: entities[i]
+    }))), !entities.length && space.attributes.name));
+  }
+
+  function Entity({
+    entity
+  }) {
+    const {
+      clickTarget,
+      allClickable
+    } = useGame();
+    const isClickable = allClickable.has(entity);
+    const attributes = entity.attributes;
+    switch (attributes.type) {
+      case 'Grid':
+        return /*#__PURE__*/React__default["default"].createElement(Grid, {
+          grid: entity,
+          isClickable: isClickable
+        });
+      case 'Space':
+        return /*#__PURE__*/React__default["default"].createElement(Space, {
+          space: entity,
+          isClickable: isClickable
+        });
+      default:
+        return /*#__PURE__*/React__default["default"].createElement("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) => /*#__PURE__*/React__default["default"].createElement("div", {
+          key: i
+        }, property, ": ", entity.attributes[property]?.toString())));
+    }
+  }
+
+  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 /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "board-game-engine-react"
-    });
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/React__default["default"].createElement("button", {
+      style: {
+        visibility: 'hidden'
+      },
+      className: "button button--style-b button--x-small abstract-choices__choice"
+    }, "Spacer"), /*#__PURE__*/React__default["default"].createElement("div", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        width: '100%'
+      }
+    }, !!currentMoveTargets.length && /*#__PURE__*/React__default["default"].createElement("button", {
+      className: "button button--style-c button--x-small abstract-choices__choice abstract-choices__choice--undo",
+      onClick: undoStep
+    }, "Undo"), abstractChoices.map((choice, i) => /*#__PURE__*/React__default["default"].createElement("button", {
+      key: i,
+      className: "button button--style-b button--x-small abstract-choices__choice",
+      onClick: () => clickTarget(choice)
+    }, choice.value))));
+  }
+
+  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 && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "game-status"
+    }, winnerString);
+  }
+
+  function Game({
+    gameConnection,
+    loading
+  }) {
+    console.log('555gameConnection', gameConnection);
+    const G = gameConnection?.state;
+    return G ? /*#__PURE__*/React__default["default"].createElement(GameProvider, {
+      gameConnection: gameConnection,
+      isSpectator: true
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "game"
+    }, /*#__PURE__*/React__default["default"].createElement(AbstractChoices, null), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "shared-board",
+      style: {
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '1em'
+      }
+    }, G.sharedBoard.entities.map((entity, i) => /*#__PURE__*/React__default["default"].createElement(Entity, {
+      key: i,
+      entity: entity
+    }))), G.personalBoards && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "personal-boards"
+    }, G.personalBoards.map((board, i) => /*#__PURE__*/React__default["default"].createElement("div", {
+      key: i,
+      className: "personal-board",
+      style: {
+        width: '100%',
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridAutoRows: '1fr',
+        gap: '1em'
+      }
+    }, board.entities.map((entity, j) => /*#__PURE__*/React__default["default"].createElement(Entity, {
+      key: j,
+      entity: entity
+    }))))), /*#__PURE__*/React__default["default"].createElement(GameStatus, {
+      gameConnection: gameConnection
+    }))) : loading;
   }
-  BoardGameEngineReact.propTypes = {};
 
-  return BoardGameEngineReact;
+  exports.Game = Game;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
 
 }));

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

@@ -1 +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});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).BoardGameEngineReact={},e.React)}(this,function(e,t){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(t);const n=t.createContext({clickTarget:()=>{}});function i({gameConnection:e,children:a,isSpectator:i}){return t.useEffect(()=>{0===e.state._stateID&&e.reset()},[e.state._stateID]),l.default.createElement(n.Provider,{value:{clickTarget:t=>{i||e.doStep(t)},undoStep:()=>{e.undoStep()},allClickable:e.optimisticWinner||i?new Set:e.allClickable,currentMoveTargets:e.optimisticWinner||i?[]:e.moveBuilder.targets}},a)}const c=()=>t.useContext(n);function r({grid:e}){const{width:t,height:a,spaces:n}=e.attributes;return l.default.createElement("div",{className:"grid",style:{display:"inline-grid",width:"100%",gridTemplateColumns:`repeat(${t}, 1fr)`,gridTemplateRows:`repeat(${a}, 1fr)`}},n.map((e,t)=>l.default.createElement("div",{key:t,className:"grid__cell"},l.default.createElement(o,{entity:e}))))}function s({space:e}){const{clickTarget:t,allClickable:a,currentMoveTargets:n}=c(),{entities:i,entityId:r}=e.attributes,s=[...a].map(e=>e.entityId).includes(r),d=n?.map(e=>e.entityId).includes(r);return l.default.createElement("a",{className:["space",s&&"space--clickable",d&&"space--targeted"].filter(Boolean).join(" "),onClick:()=>t(e),style:{display:"inline-block",flex:"1"}},l.default.createElement("div",{className:"space__entity-grid",style:{display:"flex",height:"100%",width:"100%",flexWrap:"wrap"}},Array.from({length:i.length},(e,t)=>l.default.createElement("div",{className:"space__entity-grid__cell",style:{display:"inline-block"},key:t},l.default.createElement(o,{entity:i[t]}))),!i.length&&e.attributes.name))}function o({entity:e}){const{clickTarget:t,allClickable:a}=c(),n=a.has(e),i=e.attributes;switch(i.type){case"Grid":return l.default.createElement(r,{grid:e,isClickable:n});case"Space":return l.default.createElement(s,{space:e,isClickable:n});default:return l.default.createElement("div",{onClick:a=>{n&&(a.stopPropagation(),t(e))},className:["entity",i.player&&`player-${i.player}`,a.has(e)&&"entity--clickable"].filter(Boolean).join(" ")},e.rule.displayProperties?.map((t,a)=>l.default.createElement("div",{key:a},t,": ",e.attributes[t]?.toString())))}}function d(){const{clickTarget:e,allClickable:t,undoStep:a,currentMoveTargets:n}=c(),i=[...t].filter(e=>e.abstract);return l.default.createElement("div",{style:{position:"relative"}},l.default.createElement("button",{style:{visibility:"hidden"},className:"button button--style-b button--x-small abstract-choices__choice"},"Spacer"),l.default.createElement("div",{style:{position:"absolute",top:0,width:"100%"}},!!n.length&&l.default.createElement("button",{className:"button button--style-c button--x-small abstract-choices__choice abstract-choices__choice--undo",onClick:a},"Undo"),i.map((t,a)=>l.default.createElement("button",{key:a,className:"button button--style-b button--x-small abstract-choices__choice",onClick:()=>e(t)},t.value))))}function u({gameConnection:e}){const t=e.client.matchData,a=e.state.ctx.gameover?.winner,n=e.state.ctx.gameover?.draw;let i="";return n?i="Draw!":t&&a?i=`${t[a].name} Wins!`:a&&(i=`Player ${a} Wins!`),e.state.ctx.gameover&&l.default.createElement("div",{className:"game-status"},i)}e.Game=function({gameConnection:e,loading:t}){console.log("555gameConnection",e);const a=e?.state;return a?l.default.createElement(i,{gameConnection:e,isSpectator:!0},l.default.createElement("div",{className:"game"},l.default.createElement(d,null),l.default.createElement("div",{className:"shared-board",style:{width:"100%",display:"flex",flexWrap:"wrap",justifyContent:"center",alignItems:"center",gap:"1em"}},a.sharedBoard.entities.map((e,t)=>l.default.createElement(o,{key:t,entity:e}))),a.personalBoards&&l.default.createElement("div",{className:"personal-boards"},a.personalBoards.map((e,t)=>l.default.createElement("div",{key:t,className:"personal-board",style:{width:"100%",display:"grid",gridAutoFlow:"column",gridAutoRows:"1fr",gap:"1em"}},e.entities.map((e,t)=>l.default.createElement(o,{key:t,entity:e}))))),l.default.createElement(u,{gameConnection:e}))):t},Object.defineProperty(e,"__esModule",{value:!0})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "board-game-engine-react",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "React library for using board-game-engine",
   "main": "dist/board-game-engine-react.js",
   "scripts": {

package/src/{abstract-choices → components/abstract-choices}/abstract-choices.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useGame } from "../contexts/game-context.js";
+import { useGame } from "../../contexts/game-context.js";
 
 export default function AbstractChoices () {
   const { clickTarget, allClickable, undoStep, currentMoveTargets } = useGame()

package/src/components/game/game.js

@@ -0,0 +1,58 @@
+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, loading }) {
+  console.log('555gameConnection', gameConnection)
+  const G = gameConnection?.state
+
+  return G
+    ? (
+      <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>
+    )
+    : loading
+}

package/src/index.js

@@ -1,3 +1,3 @@
 import './styles.scss'
 
-export { default } from './BoardGameEngineReact.js'
+export { default as Game } from './components/game/game.js'

package/src/BoardGameEngineReact.js

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

@@ -1,56 +0,0 @@
-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>
-  )
-}