board-game-engine-react 1.0.2 → 2.0.0

package/.storybook/webpack.config.js

@@ -7,7 +7,7 @@ const modulesToTranspile = [
 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')
+    : path.resolve(__dirname, '../src/index.ts')
 
   // brittle
   const babelLoader = config.module.rules[config.module.rules.length - 1]

package/babel.config.js

@@ -2,13 +2,14 @@ const coverage = process.env.COVERAGE === '1'
 
 module.exports = {
   presets: [
+    '@babel/preset-typescript',
     '@babel/preset-react',
     ['@babel/preset-env', { targets: { node: 'current' } }]
   ],
   plugins: [
     '@babel/plugin-proposal-object-rest-spread',
     ...(coverage
-      ? [['istanbul', { include: ['src/**/*.js'], exclude: ['**/*.spec.js', '**/node_modules/**', 'e2e/**'] }]]
+      ? [['istanbul', { include: ['src/**/*.ts', 'src/**/*.tsx'], exclude: ['**/*.spec.js', '**/node_modules/**', 'e2e/**'] }]]
       : [])
   ]
 }

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

@@ -1,8 +1,7 @@
-var __create = Object.create;
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,17 +15,9 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/index.js
+// src/index.ts
 var index_exports = {};
 __export(index_exports, {
   Client: () => import_board_game_engine2.Client,
@@ -37,45 +28,55 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_board_game_engine2 = require("board-game-engine");
 
-// src/components/game/game.js
-var import_react7 = __toESM(require("react"));
-
-// src/components/entity/entity.js
-var import_react4 = __toESM(require("react"));
-
-// src/contexts/game-context.js
-var import_react = __toESM(require("react"));
+// src/contexts/game-context.tsx
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var GameContext = (0, import_react.createContext)({
   clickTarget: () => {
-  }
+  },
+  undoStep: () => {
+  },
+  allClickable: /* @__PURE__ */ new Set(),
+  currentMoveTargets: []
 });
-function GameProvider({ gameConnection, children, isSpectator }) {
+function GameProvider({
+  gameConnection,
+  children,
+  isSpectator
+}) {
   (0, import_react.useEffect)(() => {
-    if (gameConnection.state._stateID === 0) {
+    if (gameConnection.state?._stateID === 0) {
       gameConnection.reset();
     }
-  }, [gameConnection.state._stateID]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GameContext.Provider, { value: {
-    clickTarget: (target) => {
-      if (!isSpectator) {
-        gameConnection.doStep(target);
-      }
-    },
-    undoStep: () => {
-      gameConnection.undoStep();
-    },
-    allClickable: gameConnection.optimisticWinner || isSpectator ? /* @__PURE__ */ new Set() : gameConnection.allClickable,
-    currentMoveTargets: gameConnection.optimisticWinner || isSpectator ? [] : gameConnection.moveBuilder.targets
-  }, children });
+  }, [gameConnection.state?._stateID]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    GameContext.Provider,
+    {
+      value: {
+        clickTarget: (target) => {
+          if (!isSpectator) {
+            gameConnection.doStep(target);
+          }
+        },
+        undoStep: () => {
+          gameConnection.undoStep();
+        },
+        allClickable: gameConnection.optimisticWinner || isSpectator ? /* @__PURE__ */ new Set() : gameConnection.allClickable ?? /* @__PURE__ */ new Set(),
+        currentMoveTargets: gameConnection.optimisticWinner || isSpectator ? [] : gameConnection.moveBuilder?.targets ?? []
+      },
+      children
+    }
+  );
 }
 var useGame = () => (0, import_react.useContext)(GameContext);
 
-// src/components/board/grid.js
-var import_react2 = __toESM(require("react"));
+// src/components/board/grid.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function Grid({ grid }) {
   const { width, height, spaces } = grid.attributes;
+  const w = Number(width ?? 0);
+  const h = Number(height ?? 0);
+  const spaceList = spaces ?? [];
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
@@ -83,31 +84,29 @@ function Grid({ grid }) {
       style: {
         display: "inline-grid",
         width: "100%",
-        gridTemplateColumns: `repeat(${width}, 1fr)`,
-        gridTemplateRows: `repeat(${height}, 1fr)`
+        gridTemplateColumns: `repeat(${w}, 1fr)`,
+        gridTemplateRows: `repeat(${h}, 1fr)`
       },
-      children: spaces.map((space, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "div",
-          {
-            className: "grid__cell",
-            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Entity, { entity: space })
-          },
-          index
-        );
-      })
+      children: spaceList.map((space, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          className: "grid__cell",
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Entity, { entity: space })
+        },
+        index
+      ))
     }
   );
 }
 
-// src/components/space/space.js
-var import_react3 = __toESM(require("react"));
+// src/components/space/space.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Space({ space }) {
   const { clickTarget, allClickable, currentMoveTargets } = useGame();
   const { entities, entityId } = space.attributes;
+  const entityList = entities ?? [];
   const clickable = allClickable.has(space);
-  const targeted = currentMoveTargets?.map((e) => e.entityId).includes(entityId);
+  const targeted = currentMoveTargets.map((e) => e.entityId ?? e.attributes?.entityId).includes(entityId);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "a",
     {
@@ -132,18 +131,18 @@ function Space({ space }) {
             flexWrap: "wrap"
           },
           children: [
-            Array.from({ length: entities.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Array.from({ length: entityList.length }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "div",
               {
                 className: "space__entity-grid__cell",
                 style: {
                   display: "inline-block"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Entity, { entity: entities[i] })
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Entity, { entity: entityList[i] })
               },
               i
             )),
-            !entities.length && space.attributes.name
+            !entityList.length && String(space.attributes.name ?? "")
           ]
         }
       )
@@ -151,7 +150,7 @@ function Space({ space }) {
   );
 }
 
-// src/components/entity/entity.js
+// src/components/entity/entity.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Entity({ entity }) {
   const { clickTarget, allClickable } = useGame();
@@ -160,9 +159,9 @@ function Entity({ entity }) {
   const entityType = attributes.entityType ?? attributes.type;
   switch (entityType) {
     case "Grid":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Grid, { grid: entity, isClickable });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Grid, { grid: entity });
     case "Space":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Space, { space: entity, isClickable });
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Space, { space: entity });
     default:
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "div",
@@ -175,31 +174,33 @@ function Entity({ entity }) {
           },
           className: [
             "entity",
-            attributes.player && `player-${attributes.player}`,
+            attributes.player !== void 0 && `player-${String(attributes.player)}`,
             isClickable && "entity--clickable"
           ].filter(Boolean).join(" "),
           children: entity.rule.displayProperties?.map((property, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
             property,
             ": ",
-            entity.attributes[property]?.toString()
+            String(attributes[property] ?? "")
           ] }, i))
         }
       );
   }
 }
 
-// src/components/abstract-choices/abstract-choices.js
-var import_react5 = __toESM(require("react"));
+// src/components/abstract-choices/abstract-choices.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function AbstractChoices() {
   const { clickTarget, allClickable, undoStep, currentMoveTargets } = useGame();
-  const abstractChoices = [...allClickable].filter((c) => c.abstract);
+  const abstractChoices = [...allClickable].filter(
+    (c) => c.abstract
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         style: { visibility: "hidden" },
         className: "button button--style-b button--x-small abstract-choices__choice",
+        type: "button",
         children: "Spacer"
       }
     ),
@@ -215,6 +216,7 @@ function AbstractChoices() {
           !!currentMoveTargets.length && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
+              type: "button",
               className: "button button--style-c button--x-small abstract-choices__choice abstract-choices__choice--undo",
               onClick: undoStep,
               children: "Undo"
@@ -223,9 +225,10 @@ function AbstractChoices() {
           abstractChoices.map((choice, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
+              type: "button",
               className: "button button--style-b button--x-small abstract-choices__choice",
               onClick: () => clickTarget(choice),
-              children: choice.value
+              children: String(choice.value ?? "")
             },
             i
           ))
@@ -235,28 +238,36 @@ function AbstractChoices() {
   ] });
 }
 
-// src/components/game-status/game-status.js
-var import_react6 = __toESM(require("react"));
+// src/components/game-status/game-status.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-function GameStatus({ gameConnection }) {
-  const players = gameConnection.client.matchData;
-  const winner = gameConnection.state.ctx.gameover?.winner;
-  const draw = gameConnection.state.ctx.gameover?.draw;
+function GameStatus({
+  gameConnection
+}) {
+  const state = gameConnection.state;
+  if (!state) return null;
+  const players = gameConnection.client?.matchData;
+  const winner = state.ctx.gameover?.winner;
+  const draw = 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!`;
+  } else if (players != null && winner != null && winner !== "") {
+    const key = String(winner);
+    winnerString = `${players[key]?.name ?? ""} Wins!`;
+  } else if (winner != null && winner !== "") {
+    winnerString = `Player ${String(winner)} Wins!`;
   }
-  return gameConnection.state.ctx.gameover && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "game-status", children: winnerString });
+  return state.ctx.gameover && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "game-status", children: winnerString });
 }
 
-// src/components/game/game.js
+// src/components/game/game.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function Game({ gameConnection, loading, isSpectator }) {
-  const G = gameConnection?.state?.G;
+function Game({
+  gameConnection,
+  loading,
+  isSpectator
+}) {
+  const G = gameConnection && "state" in gameConnection ? gameConnection.state?.G : void 0;
   return G ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     GameProvider,
     {
@@ -300,10 +311,10 @@ function Game({ gameConnection, loading, isSpectator }) {
   ) : loading;
 }
 
-// src/use-gameserver-connection.js
-var import_react8 = require("react");
+// src/use-gameserver-connection.ts
+var import_react2 = require("react");
 var import_board_game_engine = require("board-game-engine");
-var useGameserverConnection = ({
+function useGameserverConnection({
   server,
   multiplayer,
   matchID,
@@ -315,10 +326,10 @@ var useGameserverConnection = ({
   numPlayers,
   debug,
   enabled = true
-}) => {
-  const [_, forceUpdate] = (0, import_react8.useReducer)((x) => x + 1, 0);
-  const [connection, setConnection] = (0, import_react8.useState)(null);
-  (0, import_react8.useEffect)(() => {
+}) {
+  const [_tick, forceUpdate] = (0, import_react2.useReducer)((x) => x + 1, 0);
+  const [connection, setConnection] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
     if (!gameRules && !boardgameIOGame || credentials && !(matchID && enabled && server)) {
       return;
     }
@@ -341,7 +352,7 @@ var useGameserverConnection = ({
     newConnection.connect();
     setConnection(newConnection);
     return () => {
-      connection?.client?.stop();
+      newConnection.client?.stop();
       setConnection(null);
     };
   }, [
@@ -357,9 +368,8 @@ var useGameserverConnection = ({
   if (connection) {
     return Object.assign(
       connection,
-      connection?.getState?.()
+      connection.getState?.()
     );
-  } else {
-    return {};
   }
-};
+  return {};
+}