board-game-engine-react 0.0.2 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/board-game-engine-react.js +5 -6
  2. package/dist/board-game-engine-react.min.js +1 -1
  3. package/package.json +1 -1
  4. package/src/components/game/game.js +48 -46
package/dist/board-game-engine-react.js CHANGED
@@ -199,13 +199,12 @@
199
199
  }
200
200
 
201
201
  function Game({
202
- gameConnection
202
+ gameConnection,
203
+ loading
203
204
  }) {
204
205
  console.log('555gameConnection', gameConnection);
205
- const {
206
- G
207
- } = gameConnection.state;
208
- return /*#__PURE__*/React__default["default"].createElement(GameProvider, {
206
+ const G = gameConnection?.state;
207
+ return G ? /*#__PURE__*/React__default["default"].createElement(GameProvider, {
209
208
  gameConnection: gameConnection,
210
209
  isSpectator: true
211
210
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -240,7 +239,7 @@
240
239
  entity: entity
241
240
  }))))), /*#__PURE__*/React__default["default"].createElement(GameStatus, {
242
241
  gameConnection: gameConnection
243
- })));
242
+ }))) : loading;
244
243
  }
245
244
 
246
245
  exports.Game = Game;
package/dist/board-game-engine-react.min.js CHANGED
@@ -1 +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}){console.log("555gameConnection",e);const{G:t}=e.state;return 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"}},t.sharedBoard.entities.map((e,t)=>l.default.createElement(o,{key:t,entity:e}))),t.personalBoards&&l.default.createElement("div",{className:"personal-boards"},t.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})))},Object.defineProperty(e,"__esModule",{value:!0})});
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}){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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "board-game-engine-react",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "description": "React library for using board-game-engine",
5
5
  "main": "dist/board-game-engine-react.js",
6
6
  "scripts": {
package/src/components/game/game.js CHANGED
@@ -4,53 +4,55 @@ import AbstractChoices from '../abstract-choices/abstract-choices.js'
4
4
  import GameStatus from '../game-status/game-status.js'
5
5
  import { GameProvider } from "../../contexts/game-context.js";
6
6
 
7
- export default function Game ({ gameConnection }) {
7
+ export default function Game ({ gameConnection, loading }) {
8
8
  console.log('555gameConnection', gameConnection)
9
- const { G } = gameConnection.state
9
+ const G = gameConnection?.state
10
10
 
11
- return (
12
- <GameProvider
13
- gameConnection={gameConnection}
14
- isSpectator
15
- >
16
- <div className="game">
17
- <AbstractChoices />
18
- <div
19
- className="shared-board"
20
- style={{
21
- width: '100%',
22
- display: 'flex',
23
- flexWrap: 'wrap',
24
- justifyContent: 'center',
25
- alignItems: 'center',
26
- gap: '1em',
27
- }}
28
- >
29
- {G.sharedBoard.entities.map((entity, i) => <Entity key={i} entity={entity} />)}
30
- </div>
31
- {G.personalBoards && (
32
- <div className="personal-boards">
33
- {G.personalBoards.map((board, i) => (
34
- <div
35
- key={i}
36
- className="personal-board"
37
- style={{
38
- width: '100%',
39
- display: 'grid',
40
- gridAutoFlow: 'column',
41
- gridAutoRows: '1fr',
42
- gap: '1em',
43
- }}
44
- >
45
- {board.entities.map((entity, j) => (
46
- <Entity key={j} entity={entity} />
47
- ))}
48
- </div>
49
- ))}
11
+ return G
12
+ ? (
13
+ <GameProvider
14
+ gameConnection={gameConnection}
15
+ isSpectator
16
+ >
17
+ <div className="game">
18
+ <AbstractChoices />
19
+ <div
20
+ className="shared-board"
21
+ style={{
22
+ width: '100%',
23
+ display: 'flex',
24
+ flexWrap: 'wrap',
25
+ justifyContent: 'center',
26
+ alignItems: 'center',
27
+ gap: '1em',
28
+ }}
29
+ >
30
+ {G.sharedBoard.entities.map((entity, i) => <Entity key={i} entity={entity} />)}
50
31
  </div>
51
- )}
52
- <GameStatus gameConnection={gameConnection} />
53
- </div>
54
- </GameProvider>
55
- )
32
+ {G.personalBoards && (
33
+ <div className="personal-boards">
34
+ {G.personalBoards.map((board, i) => (
35
+ <div
36
+ key={i}
37
+ className="personal-board"
38
+ style={{
39
+ width: '100%',
40
+ display: 'grid',
41
+ gridAutoFlow: 'column',
42
+ gridAutoRows: '1fr',
43
+ gap: '1em',
44
+ }}
45
+ >
46
+ {board.entities.map((entity, j) => (
47
+ <Entity key={j} entity={entity} />
48
+ ))}
49
+ </div>
50
+ ))}
51
+ </div>
52
+ )}
53
+ <GameStatus gameConnection={gameConnection} />
54
+ </div>
55
+ </GameProvider>
56
+ )
57
+ : loading
56
58
  }