board-game-engine-react 0.0.6 → 0.0.7
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.
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
|
-
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
|
|
3
|
-
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BoardGameEngineReact = {}, global.React));
|
|
5
|
-
})(this, (function (exports, React) { 'use strict';
|
|
2
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('board-game-engine')) :
|
|
3
|
+
typeof define === 'function' && define.amd ? define(['exports', 'react', 'board-game-engine'], factory) :
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.BoardGameEngineReact = {}, global.React, global.boardGameEngine));
|
|
5
|
+
})(this, (function (exports, React, boardGameEngine) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -242,7 +242,55 @@
|
|
|
242
242
|
}))) : loading;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
+
const useGameserverConnection = ({
|
|
246
|
+
server,
|
|
247
|
+
gameId,
|
|
248
|
+
gameRules,
|
|
249
|
+
gameName,
|
|
250
|
+
boardgameIOGame,
|
|
251
|
+
boardgamePlayerID,
|
|
252
|
+
clientToken,
|
|
253
|
+
numPlayers,
|
|
254
|
+
debug,
|
|
255
|
+
singlePlayer = false,
|
|
256
|
+
enabled = true
|
|
257
|
+
}) => {
|
|
258
|
+
const [_, forceUpdate] = React.useReducer(x => x + 1, 0);
|
|
259
|
+
const [connection, setConnection] = React.useState(null);
|
|
260
|
+
React.useEffect(() => {
|
|
261
|
+
if (!gameRules && !boardgameIOGame || !singlePlayer && (!gameId || !clientToken || !enabled || !server)) return;
|
|
262
|
+
const options = {
|
|
263
|
+
server,
|
|
264
|
+
numPlayers,
|
|
265
|
+
onClientUpdate: () => {
|
|
266
|
+
forceUpdate();
|
|
267
|
+
},
|
|
268
|
+
debug,
|
|
269
|
+
gameId,
|
|
270
|
+
gameRules,
|
|
271
|
+
boardgameIOGame,
|
|
272
|
+
gameName,
|
|
273
|
+
boardgamePlayerID,
|
|
274
|
+
clientToken,
|
|
275
|
+
singlePlayer
|
|
276
|
+
};
|
|
277
|
+
const newConnection = new boardGameEngine.Client(options);
|
|
278
|
+
newConnection.connect();
|
|
279
|
+
setConnection(newConnection);
|
|
280
|
+
return () => {
|
|
281
|
+
connection?.client?.stop();
|
|
282
|
+
setConnection(null);
|
|
283
|
+
};
|
|
284
|
+
}, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled]);
|
|
285
|
+
if (connection) {
|
|
286
|
+
return Object.assign(connection, connection?.getState?.());
|
|
287
|
+
} else {
|
|
288
|
+
return {};
|
|
289
|
+
}
|
|
290
|
+
};
|
|
291
|
+
|
|
245
292
|
exports.Game = Game;
|
|
293
|
+
exports.useGameserverConnection = useGameserverConnection;
|
|
246
294
|
|
|
247
295
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
248
296
|
|
|
@@ -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
|
|
1
|
+
!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
CHANGED
package/src/index.js
CHANGED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { useEffect, useReducer, useState } from 'react'
|
|
2
|
+
import { Client } from 'board-game-engine'
|
|
3
|
+
|
|
4
|
+
export const useGameserverConnection = ({
|
|
5
|
+
server,
|
|
6
|
+
gameId,
|
|
7
|
+
gameRules,
|
|
8
|
+
gameName,
|
|
9
|
+
boardgameIOGame,
|
|
10
|
+
boardgamePlayerID,
|
|
11
|
+
clientToken,
|
|
12
|
+
numPlayers,
|
|
13
|
+
debug,
|
|
14
|
+
singlePlayer = false,
|
|
15
|
+
enabled = true,
|
|
16
|
+
}) => {
|
|
17
|
+
const [_, forceUpdate] = useReducer(x => x + 1, 0)
|
|
18
|
+
const [connection, setConnection] = useState(null)
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (!gameRules && !boardgameIOGame || !singlePlayer && (!gameId || !clientToken || !enabled || !server)) return
|
|
22
|
+
|
|
23
|
+
const options = {
|
|
24
|
+
server,
|
|
25
|
+
numPlayers,
|
|
26
|
+
onClientUpdate: () => {
|
|
27
|
+
forceUpdate()
|
|
28
|
+
},
|
|
29
|
+
debug,
|
|
30
|
+
gameId,
|
|
31
|
+
gameRules,
|
|
32
|
+
boardgameIOGame,
|
|
33
|
+
gameName,
|
|
34
|
+
boardgamePlayerID,
|
|
35
|
+
clientToken,
|
|
36
|
+
singlePlayer,
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
const newConnection = new Client(options)
|
|
40
|
+
|
|
41
|
+
newConnection.connect()
|
|
42
|
+
|
|
43
|
+
setConnection(newConnection)
|
|
44
|
+
|
|
45
|
+
return () => {
|
|
46
|
+
connection?.client?.stop()
|
|
47
|
+
setConnection(null)
|
|
48
|
+
}
|
|
49
|
+
}, [gameId, boardgamePlayerID, clientToken, gameRules, boardgameIOGame, enabled])
|
|
50
|
+
|
|
51
|
+
if (connection) {
|
|
52
|
+
return Object.assign(
|
|
53
|
+
connection,
|
|
54
|
+
connection?.getState?.(),
|
|
55
|
+
)
|
|
56
|
+
} else {
|
|
57
|
+
return {}
|
|
58
|
+
}
|
|
59
|
+
}
|