@mnbroatch/boardgame.io 0.0.1

package/src/client/react.test.tsx

@@ -0,0 +1,213 @@
+/*
+ * Copyright 2017 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+/* eslint-disable unicorn/no-array-callback-reference */
+
+import React from 'react';
+import type { BoardProps } from './react';
+import { Client } from './react';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { Local } from './transport/local';
+import { SocketIO } from './transport/socketio';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+class TestBoard extends React.Component<
+  BoardProps & { doStuff?; extraValue? }
+> {
+  render() {
+    return <div id="board">Board</div>;
+  }
+}
+
+test('board is rendered', () => {
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+  });
+
+  const game = Enzyme.mount(<Board />);
+  const board = game.find(TestBoard);
+
+  expect(board.props().isActive).toBe(true);
+  expect(board.text()).toBe('Board');
+
+  game.unmount();
+});
+
+test('board props', () => {
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+  });
+  const board = Enzyme.mount(<Board />).find(TestBoard);
+  expect(board.props().isMultiplayer).toEqual(false);
+  expect(board.props().isActive).toBe(true);
+});
+
+test('can pass extra props to Client', () => {
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+  });
+  const board = Enzyme.mount(
+    <Board doStuff={() => true} extraValue={55} />
+  ).find(TestBoard);
+  expect(board.props().doStuff()).toBe(true);
+  expect(board.props().extraValue).toBe(55);
+});
+
+test('debug ui can be turned off', () => {
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+    debug: false,
+  });
+
+  const game = Enzyme.mount(<Board />);
+  expect(game.find('.debug-ui')).toHaveLength(0);
+});
+
+test('custom loading component', () => {
+  const Loading = () => <div>custom</div>;
+  const Board = Client({
+    game: {},
+    loading: Loading,
+    board: TestBoard,
+    multiplayer: SocketIO(),
+  });
+  const board = Enzyme.mount(<Board />);
+  expect(board.html()).toContain('custom');
+});
+
+test('can pass empty board', () => {
+  const Board = Client({
+    game: {},
+  });
+
+  const game = Enzyme.mount(<Board />);
+  expect(game).not.toBe(undefined);
+});
+
+test('move api', () => {
+  const Board = Client({
+    game: {
+      moves: {
+        A: (_, arg) => ({ arg }),
+      },
+    },
+    board: TestBoard,
+  });
+
+  const game = Enzyme.mount(<Board />);
+  const board = game.find('TestBoard').instance() as TestBoard;
+
+  expect(board.props.G).toEqual({});
+  board.props.moves.A(42);
+  expect(board.props.G).toEqual({ arg: 42 });
+});
+
+test('update matchID / playerID', () => {
+  let Board = null;
+  let game = null;
+
+  // No multiplayer.
+
+  Board = Client({
+    game: {
+      moves: {
+        A: (_, arg) => ({ arg }),
+      },
+    },
+    board: TestBoard,
+  });
+  game = Enzyme.mount(<Board />);
+  game.setProps({ matchID: 'a' });
+  game.setProps({ playerID: '3' });
+  expect(game.instance().transport).toBe(undefined);
+
+  // Multiplayer.
+
+  Board = Client({
+    game: {
+      moves: {
+        A: (_, arg) => ({ arg }),
+      },
+    },
+    board: TestBoard,
+    multiplayer: Local(),
+  });
+  game = Enzyme.mount(<Board matchID="a" playerID="1" credentials="foo" />);
+  const m = game.instance().client.transport;
+  const g = game.instance().client;
+
+  const spy1 = jest.spyOn(m, 'updateMatchID');
+  const spy2 = jest.spyOn(m, 'updatePlayerID');
+  const spy3 = jest.spyOn(g, 'updateCredentials');
+
+  expect(m.matchID).toBe('a');
+  expect(m.playerID).toBe('1');
+
+  game.setProps({ matchID: 'a' });
+  game.setProps({ playerID: '1' });
+  game.setProps({ credentials: 'foo' });
+
+  expect(m.matchID).toBe('a');
+  expect(m.playerID).toBe('1');
+  expect(spy1).not.toHaveBeenCalled();
+  expect(spy2).not.toHaveBeenCalled();
+  expect(spy3).not.toHaveBeenCalled();
+
+  game.setProps({ matchID: 'next' });
+  game.setProps({ playerID: 'next' });
+  game.setProps({ credentials: 'bar' });
+
+  expect(m.matchID).toBe('next');
+  expect(m.playerID).toBe('next');
+  expect(spy1).toHaveBeenCalled();
+  expect(spy2).toHaveBeenCalled();
+  expect(spy3).toHaveBeenCalled();
+});
+
+test('local playerView', () => {
+  const Board = Client({
+    game: {
+      setup: () => ({ secret: true }),
+      playerView: ({ playerID }) => ({ stripped: playerID }),
+    },
+    board: TestBoard,
+    numPlayers: 2,
+  });
+
+  const game = Enzyme.mount(<Board playerID="1" />);
+  const board = game.find('TestBoard').instance() as TestBoard;
+  expect(board.props.G).toEqual({ stripped: '1' });
+});
+
+test('reset Game', () => {
+  const Board = Client({
+    game: {
+      moves: {
+        A: (_, arg) => ({ arg }),
+      },
+    },
+    board: TestBoard,
+  });
+
+  const game = Enzyme.mount(<Board />);
+  const board = game.find('TestBoard').instance() as TestBoard;
+
+  const initial = { G: { ...board.props.G }, ctx: { ...board.props.ctx } };
+
+  expect(board.props.G).toEqual({});
+  board.props.moves.A(42);
+  expect(board.props.G).toEqual({ arg: 42 });
+  board.props.reset();
+  expect(board.props.G).toEqual(initial.G);
+  expect(board.props.ctx).toEqual(initial.ctx);
+});

package/src/client/react.tsx

@@ -0,0 +1,192 @@
+/*
+ * Copyright 2017 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Client as RawClient } from './client';
+import type { ClientOpts, ClientState, _ClientImpl } from './client';
+
+type WrappedBoardDelegates = 'matchID' | 'playerID' | 'credentials';
+
+export type WrappedBoardProps = Pick<
+  ClientOpts,
+  WrappedBoardDelegates | 'debug'
+>;
+
+type ExposedClientProps<G extends any = any> = Pick<
+  _ClientImpl<G>,
+  | 'log'
+  | 'moves'
+  | 'events'
+  | 'reset'
+  | 'undo'
+  | 'redo'
+  | 'playerID'
+  | 'matchID'
+  | 'matchData'
+  | 'sendChatMessage'
+  | 'chatMessages'
+>;
+
+export type BoardProps<G extends any = any> = ClientState<G> &
+  Omit<WrappedBoardProps, keyof ExposedClientProps<G>> &
+  ExposedClientProps<G> & {
+    isMultiplayer: boolean;
+  };
+
+type ReactClientOpts<
+  G extends any = any,
+  P extends BoardProps<G> = BoardProps<G>,
+  PluginAPIs extends Record<string, unknown> = Record<string, unknown>
+> = Omit<ClientOpts<G, PluginAPIs>, WrappedBoardDelegates> & {
+  board?: React.ComponentType<P>;
+  loading?: React.ComponentType;
+};
+
+/**
+ * Client
+ *
+ * boardgame.io React client.
+ *
+ * @param {...object} game - The return value of `Game`.
+ * @param {...object} numPlayers - The number of players.
+ * @param {...object} board - The React component for the game.
+ * @param {...object} loading - (optional) The React component for the loading state.
+ * @param {...object} multiplayer - Set to a falsy value or a transportFactory, e.g., SocketIO()
+ * @param {...object} debug - Enables the Debug UI.
+ * @param {...object} enhancer - Optional enhancer to send to the Redux store
+ *
+ * Returns:
+ *   A React component that wraps board and provides an
+ *   API through props for it to interact with the framework
+ *   and dispatch actions such as MAKE_MOVE, GAME_EVENT, RESET,
+ *   UNDO and REDO.
+ */
+export function Client<
+  G extends any = any,
+  P extends BoardProps<G> = BoardProps<G>,
+  PluginAPIs extends Record<string, unknown> = Record<string, unknown>
+>(opts: ReactClientOpts<G, P, PluginAPIs>) {
+  const { game, numPlayers, board, multiplayer, enhancer } = opts;
+  let { loading, debug } = opts;
+
+  // Component that is displayed before the client has synced
+  // with the game master.
+  if (loading === undefined) {
+    const Loading = () => <div className="bgio-loading">connecting...</div>;
+    loading = Loading;
+  }
+
+  type AdditionalProps = Omit<P, keyof BoardProps<G>>;
+
+  /*
+   * WrappedBoard
+   *
+   * The main React component that wraps the passed in
+   * board component and adds the API to its props.
+   */
+  return class WrappedBoard extends React.Component<
+    WrappedBoardProps & AdditionalProps
+  > {
+    client: _ClientImpl<G>;
+    unsubscribe?: () => void;
+
+    static propTypes = {
+      // The ID of a game to connect to.
+      // Only relevant in multiplayer.
+      matchID: PropTypes.string,
+      // The ID of the player associated with this client.
+      // Only relevant in multiplayer.
+      playerID: PropTypes.string,
+      // This client's authentication credentials.
+      // Only relevant in multiplayer.
+      credentials: PropTypes.string,
+      // Enable / disable the Debug UI.
+      debug: PropTypes.any,
+    };
+
+    static defaultProps = {
+      matchID: 'default',
+      playerID: null,
+      credentials: null,
+      debug: true,
+    };
+
+    constructor(props: WrappedBoardProps & AdditionalProps) {
+      super(props);
+
+      if (debug === undefined) {
+        debug = props.debug;
+      }
+
+      this.client = RawClient({
+        game,
+        debug,
+        numPlayers,
+        multiplayer,
+        matchID: props.matchID,
+        playerID: props.playerID,
+        credentials: props.credentials,
+        enhancer,
+      });
+    }
+
+    componentDidMount() {
+      this.unsubscribe = this.client.subscribe(() => this.forceUpdate());
+      this.client.start();
+    }
+
+    componentWillUnmount() {
+      this.client.stop();
+      this.unsubscribe();
+    }
+
+    componentDidUpdate(prevProps: WrappedBoardProps & AdditionalProps) {
+      if (this.props.matchID != prevProps.matchID) {
+        this.client.updateMatchID(this.props.matchID);
+      }
+      if (this.props.playerID != prevProps.playerID) {
+        this.client.updatePlayerID(this.props.playerID);
+      }
+      if (this.props.credentials != prevProps.credentials) {
+        this.client.updateCredentials(this.props.credentials);
+      }
+    }
+
+    render() {
+      const state = this.client.getState();
+
+      if (state === null) {
+        return React.createElement(loading);
+      }
+
+      let _board = null;
+
+      if (board) {
+        _board = React.createElement(board, {
+          ...state,
+          ...(this.props as P),
+          isMultiplayer: !!multiplayer,
+          moves: this.client.moves,
+          events: this.client.events,
+          matchID: this.client.matchID,
+          playerID: this.client.playerID,
+          reset: this.client.reset,
+          undo: this.client.undo,
+          redo: this.client.redo,
+          log: this.client.log,
+          matchData: this.client.matchData,
+          sendChatMessage: this.client.sendChatMessage,
+          chatMessages: this.client.chatMessages,
+        });
+      }
+
+      return <div className="bgio-client">{_board}</div>;
+    }
+  };
+}

package/src/client/transport/dummy.ts

@@ -0,0 +1,19 @@
+import { Transport } from './transport';
+import type { TransportOpts } from './transport';
+
+/**
+ * This class doesn’t do anything, but simplifies the client class by providing
+ * dummy functions to call, so we don’t need to mock them in the client.
+ */
+class DummyImpl extends Transport {
+  connect() {}
+  disconnect() {}
+  sendAction() {}
+  sendChatMessage() {}
+  requestSync() {}
+  updateCredentials() {}
+  updateMatchID() {}
+  updatePlayerID() {}
+}
+
+export const DummyTransport = (opts: TransportOpts) => new DummyImpl(opts);