board-game-engine-react 0.0.5 → 0.0.7

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  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';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('board-game-engine')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'board-game-engine'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BoardGameEngineReact = {}, global.React, global.boardGameEngine));
+})(this, (function (exports, React, boardGameEngine) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -203,7 +203,7 @@
     loading,
     isSpectator
   }) {
-    const G = gameConnection?.state?.G;
+    const G = gameConnection?.getState?.().state.G;
     return G ? /*#__PURE__*/React__default["default"].createElement(GameProvider, {
       gameConnection: gameConnection,
       isSpectator: isSpectator
@@ -242,7 +242,55 @@
     }))) : loading;
   }
 
+  const useGameserverConnection = ({
+    server,
+    gameId,
+    gameRules,
+    gameName,
+    boardgameIOGame,
+    boardgamePlayerID,
+    clientToken,
+    numPlayers,
+    debug,
+    singlePlayer = false,
+    enabled = true
+  }) => {
+    const [_, forceUpdate] = React.useReducer(x => x + 1, 0);
+    const [connection, setConnection] = React.useState(null);
+    React.useEffect(() => {
+      if (!gameRules && !boardgameIOGame || !singlePlayer && (!gameId || !clientToken || !enabled || !server)) return;
+      const options = {
+        server,
+        numPlayers,
+        onClientUpdate: () => {
+          forceUpdate();
+        },
+        debug,
+        gameId,
+        gameRules,
+        boardgameIOGame,
+        gameName,
+        boardgamePlayerID,
+        clientToken,
+        singlePlayer
+      };
+      const newConnection = new boardGameEngine.Client(options);
+      newConnection.connect();
+      setConnection(newConnection);
+      return () => {
+        connection?.client?.stop();
+        setConnection(null);
+      };
+    }, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled]);
+    if (connection) {
+      return Object.assign(connection, connection?.getState?.());
+    } else {
+      return {};
+    }
+  };
+
   exports.Game = Game;
+  exports.useGameserverConnection = useGameserverConnection;
 
   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?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,isSpectator:a}){const n=e?.state?.G;return n?l.default.createElement(i,{gameConnection:e,isSpectator:a},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"}},n.sharedBoard.entities.map((e,t)=>l.default.createElement(o,{key:t,entity:e}))),n.personalBoards&&l.default.createElement("div",{className:"personal-boards"},n.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})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("board-game-engine")):"function"==typeof define&&define.amd?define(["exports","react","board-game-engine"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).BoardGameEngineReact={},e.React,e.boardGameEngine)}(this,function(e,t,a){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t);const i=t.createContext({clickTarget:()=>{}});function r({gameConnection:e,children:a,isSpectator:n}){return t.useEffect(()=>{0===e.state._stateID&&e.reset()},[e.state._stateID]),l.default.createElement(i.Provider,{value:{clickTarget:t=>{n||e.doStep(t)},undoStep:()=>{e.undoStep()},allClickable:e.optimisticWinner||n?new Set:e.allClickable,currentMoveTargets:e.optimisticWinner||n?[]:e.moveBuilder.targets}},a)}const c=()=>t.useContext(i);function s({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(d,{entity:e}))))}function o({space:e}){const{clickTarget:t,allClickable:a,currentMoveTargets:n}=c(),{entities:i,entityId:r}=e.attributes,s=[...a].map(e=>e.entityId).includes(r),o=n?.map(e=>e.entityId).includes(r);return l.default.createElement("a",{className:["space",s&&"space--clickable",o&&"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(d,{entity:i[t]}))),!i.length&&e.attributes.name))}function d({entity:e}){const{clickTarget:t,allClickable:a}=c(),n=a.has(e),i=e.attributes;switch(i.type){case"Grid":return l.default.createElement(s,{grid:e,isClickable:n});case"Space":return l.default.createElement(o,{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 u(){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 m({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,isSpectator:a}){const n=e?.getState?.().state.G;return n?l.default.createElement(r,{gameConnection:e,isSpectator:a},l.default.createElement("div",{className:"game"},l.default.createElement(u,null),l.default.createElement("div",{className:"shared-board",style:{width:"100%",display:"flex",flexWrap:"wrap",justifyContent:"center",alignItems:"center",gap:"1em"}},n.sharedBoard.entities.map((e,t)=>l.default.createElement(d,{key:t,entity:e}))),n.personalBoards&&l.default.createElement("div",{className:"personal-boards"},n.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(d,{key:t,entity:e}))))),l.default.createElement(m,{gameConnection:e}))):t},e.useGameserverConnection=({server:e,gameId:n,gameRules:l,gameName:i,boardgameIOGame:r,boardgamePlayerID:c,clientToken:s,numPlayers:o,debug:d,singlePlayer:u=!1,enabled:m=!0})=>{const[f,g]=t.useReducer(e=>e+1,0),[p,y]=t.useState(null);return t.useEffect(()=>{if(!((l||r)&&(u||n&&s&&m&&e)))return;const t={server:e,numPlayers:o,onClientUpdate:()=>{g()},debug:d,gameId:n,gameRules:l,boardgameIOGame:r,gameName:i,boardgamePlayerID:c,clientToken:s,singlePlayer:u},f=new a.Client(t);return f.connect(),y(f),()=>{p?.client?.stop(),y(null)}},[n,c,s,l,r,m]),p?Object.assign(p,p?.getState?.()):{}},Object.defineProperty(e,"__esModule",{value:!0})});

package/package.json

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

package/src/components/game/game.js

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

package/src/index.js

@@ -1,3 +1,4 @@
 import './styles.scss'
 
 export { default as Game } from './components/game/game.js'
+export { useGameserverConnection } from './use-gameserver-connection'

package/src/use-gameserver-connection.js

@@ -0,0 +1,59 @@
+import { useEffect, useReducer, useState } from 'react'
+import { Client } from 'board-game-engine'
+
+export const useGameserverConnection = ({
+  server,
+  gameId,
+  gameRules,
+  gameName,
+  boardgameIOGame,
+  boardgamePlayerID,
+  clientToken,
+  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
+
+    const options = {
+      server,
+      numPlayers,
+      onClientUpdate: () => {
+        forceUpdate()
+      },
+      debug,
+      gameId,
+      gameRules,
+      boardgameIOGame,
+      gameName,
+      boardgamePlayerID,
+      clientToken,
+      singlePlayer,
+    }
+
+    const newConnection = new Client(options)
+
+    newConnection.connect()
+
+    setConnection(newConnection)
+
+    return () => {
+      connection?.client?.stop()
+      setConnection(null)
+    }
+  }, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled])
+
+  if (connection) {
+    return Object.assign(
+      connection,
+      connection?.getState?.(),
+    )
+  } else {
+    return {}
+  }
+}