@mnbroatch/boardgame.io 0.0.1

package/src/client/debug/utils/shortcuts.test.js

@@ -0,0 +1,49 @@
+/*
+ * 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 { AssignShortcuts } from './shortcuts';
+
+test('first char is used', () => {
+  const moves = {
+    clickCell: () => {},
+    playCard: () => {},
+  };
+
+  const shortcuts = AssignShortcuts(moves, '');
+
+  expect(shortcuts).toEqual({
+    clickCell: 'c',
+    playCard: 'p',
+  });
+});
+
+test('a-z if cannot use first char', () => {
+  const moves = {
+    takeCard: () => {},
+    takeToken: () => {},
+  };
+
+  const shortcuts = AssignShortcuts(moves, '');
+
+  expect(shortcuts).toEqual({
+    takeCard: 'a',
+    takeToken: 'b',
+  });
+});
+
+test('a-z if blacklist prevents using first char', () => {
+  const moves = {
+    clickCell: () => {},
+  };
+
+  const shortcuts = AssignShortcuts(moves, 'c');
+
+  expect(shortcuts).toEqual({
+    clickCell: 'a',
+  });
+});

package/src/client/manager.ts

@@ -0,0 +1,177 @@
+import Debug from './debug/Debug.svelte';
+import type { _ClientImpl } from './client';
+
+type SubscriptionState = {
+  client: _ClientImpl;
+  debuggableClients: _ClientImpl[];
+};
+type SubscribeCallback = (arg: SubscriptionState) => void;
+type UnsubscribeCallback = () => void;
+
+/**
+ * Class to manage boardgame.io clients and limit debug panel rendering.
+ */
+export class ClientManager {
+  private debugPanel: Debug | null;
+  private currentClient: _ClientImpl | null;
+  private clients: Map<_ClientImpl, _ClientImpl>;
+  private subscribers: Map<symbol, SubscribeCallback>;
+
+  constructor() {
+    this.debugPanel = null;
+    this.currentClient = null;
+    this.clients = new Map();
+    this.subscribers = new Map();
+  }
+
+  /**
+   * Register a client with the client manager.
+   */
+  register(client: _ClientImpl): void {
+    // Add client to clients map.
+    this.clients.set(client, client);
+    // Mount debug for this client (no-op if another debug is already mounted).
+    this.mountDebug(client);
+    this.notifySubscribers();
+  }
+
+  /**
+   * Unregister a client from the client manager.
+   */
+  unregister(client: _ClientImpl): void {
+    // Remove client from clients map.
+    this.clients.delete(client);
+
+    if (this.currentClient === client) {
+      // If the removed client owned the debug panel, unmount it.
+      this.unmountDebug();
+      // Mount debug panel for next available client.
+      for (const [client] of this.clients) {
+        if (this.debugPanel) break;
+        this.mountDebug(client);
+      }
+    }
+
+    this.notifySubscribers();
+  }
+
+  /**
+   * Subscribe to the client manager state.
+   * Calls the passed callback each time the current client changes or a client
+   * registers/unregisters.
+   * Returns a function to unsubscribe from the state updates.
+   */
+  subscribe(callback: SubscribeCallback): UnsubscribeCallback {
+    const id = Symbol();
+    this.subscribers.set(id, callback);
+    callback(this.getState());
+    return () => {
+      this.subscribers.delete(id);
+    };
+  }
+
+  /**
+   * Switch to a client with a matching playerID.
+   */
+  switchPlayerID(playerID: string): void {
+    // For multiplayer clients, try switching control to a different client
+    // that is using the same transport layer.
+    if (this.currentClient.multiplayer) {
+      for (const [client] of this.clients) {
+        if (
+          client.playerID === playerID &&
+          client.debugOpt !== false &&
+          client.multiplayer === this.currentClient.multiplayer
+        ) {
+          this.switchToClient(client);
+          return;
+        }
+      }
+    }
+
+    // If no client matches, update the playerID for the current client.
+    this.currentClient.updatePlayerID(playerID);
+    this.notifySubscribers();
+  }
+
+  /**
+   * Set the passed client as the active client for debugging.
+   */
+  switchToClient(client: _ClientImpl): void {
+    if (client === this.currentClient) return;
+    this.unmountDebug();
+    this.mountDebug(client);
+    this.notifySubscribers();
+  }
+
+  /**
+   * Notify all subscribers of changes to the client manager state.
+   */
+  private notifySubscribers(): void {
+    const arg = this.getState();
+    this.subscribers.forEach((cb) => {
+      cb(arg);
+    });
+  }
+
+  /**
+   * Get the client manager state.
+   */
+  private getState(): SubscriptionState {
+    return {
+      client: this.currentClient,
+      debuggableClients: this.getDebuggableClients(),
+    };
+  }
+
+  /**
+   * Get an array of the registered clients that haven’t disabled the debug panel.
+   */
+  private getDebuggableClients(): _ClientImpl[] {
+    return [...this.clients.values()].filter(
+      (client) => client.debugOpt !== false
+    );
+  }
+
+  /**
+   * Mount the debug panel using the passed client.
+   */
+  private mountDebug(client: _ClientImpl): void {
+    if (
+      client.debugOpt === false ||
+      this.debugPanel !== null ||
+      typeof document === 'undefined'
+    ) {
+      return;
+    }
+
+    let DebugImpl: typeof Debug | undefined;
+    let target = document.body;
+
+    if (process.env.NODE_ENV !== 'production') {
+      DebugImpl = Debug;
+    }
+
+    if (client.debugOpt && client.debugOpt !== true) {
+      DebugImpl = client.debugOpt.impl || DebugImpl;
+      target = client.debugOpt.target || target;
+    }
+
+    if (DebugImpl) {
+      this.currentClient = client;
+      this.debugPanel = new DebugImpl({
+        target,
+        props: { clientManager: this },
+      });
+    }
+  }
+
+  /**
+   * Unmount the debug panel.
+   */
+  private unmountDebug(): void {
+    this.debugPanel.$destroy();
+    this.debugPanel = null;
+    this.currentClient = null;
+  }
+}

package/src/client/react-native.js

@@ -0,0 +1,136 @@
+/*
+ * 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';
+
+/**
+ * Client
+ *
+ * boardgame.io React Native 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} enhancer - Optional enhancer to send to the Redux store
+ *
+ * Returns:
+ *   A React Native component that wraps board and provides an
+ *   API through props for it to interact with the framework
+ *   and dispatch actions such as MAKE_MOVE.
+ */
+export function Client(opts) {
+  const { game, numPlayers, board, multiplayer, enhancer } = opts;
+  let { loading } = opts;
+
+  // Component that is displayed before the client has synced
+  // with the game master.
+  if (loading === undefined) {
+    const Loading = () => <></>;
+    loading = Loading;
+  }
+
+  /*
+   * 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 {
+    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,
+    };
+
+    static defaultProps = {
+      matchID: 'default',
+      playerID: null,
+      credentials: null,
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.client = RawClient({
+        game,
+        numPlayers,
+        multiplayer,
+        matchID: props.matchID,
+        playerID: props.playerID,
+        credentials: props.credentials,
+        debug: false,
+        enhancer,
+      });
+    }
+
+    componentDidMount() {
+      this.unsubscribe = this.client.subscribe(() => this.forceUpdate());
+      this.client.start();
+    }
+
+    componentWillUnmount() {
+      this.client.stop();
+      this.unsubscribe();
+    }
+
+    componentDidUpdate(prevProps) {
+      if (prevProps.matchID != this.props.matchID) {
+        this.client.updateMatchID(this.props.matchID);
+      }
+      if (prevProps.playerID != this.props.playerID) {
+        this.client.updatePlayerID(this.props.playerID);
+      }
+      if (prevProps.credentials != this.props.credentials) {
+        this.client.updateCredentials(this.props.credentials);
+      }
+    }
+
+    render() {
+      let _board = null;
+
+      const state = this.client.getState();
+
+      if (state === null) {
+        return React.createElement(loading);
+      }
+
+      const { matchID, playerID, ...rest } = this.props;
+
+      if (board) {
+        _board = React.createElement(board, {
+          ...state,
+          ...rest,
+          matchID,
+          playerID,
+          isMultiplayer: !!multiplayer,
+          moves: this.client.moves,
+          events: this.client.events,
+          step: this.client.step,
+          reset: this.client.reset,
+          undo: this.client.undo,
+          redo: this.client.redo,
+          matchData: this.client.matchData,
+          sendChatMessage: this.client.sendChatMessage,
+          chatMessages: this.client.chatMessages,
+        });
+      }
+
+      return _board;
+    }
+  };
+}

package/src/client/react-native.test.js

@@ -0,0 +1,229 @@
+/*
+ * Copyright 2018 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 { Client } from './react-native';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { Local } from './transport/local';
+import { Transport } from './transport/transport';
+
+class NoConnectionTransport extends Transport {
+  connect() {}
+  disconnect() {}
+  sendAction() {}
+  sendChatMessage() {}
+  requestSync() {}
+  updateMatchID() {}
+  updatePlayerID() {}
+  updateCredentials() {}
+}
+
+Enzyme.configure({ adapter: new Adapter() });
+
+class TestBoard extends React.Component {
+  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 is rendered with custom loading', () => {
+  const Loading = () => <>connecting...</>;
+
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+    loading: Loading,
+    multiplayer: (opts) => new NoConnectionTransport(opts),
+  });
+
+  const game = Enzyme.mount(<Board />);
+  const loadingComponent = game.find(Loading);
+
+  expect(loadingComponent.props()).toEqual({});
+  expect(loadingComponent.text()).toBe('connecting...');
+
+  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('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();
+
+  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();
+  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();
+
+  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);
+});
+
+test('can receive enhancer', () => {
+  const enhancer = jest.fn().mockImplementation((next) => next);
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+    enhancer,
+  });
+
+  Enzyme.mount(<Board />);
+  expect(enhancer).toBeCalled();
+});

package/src/client/react.ssr.test.tsx

@@ -0,0 +1,24 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react';
+import type { BoardProps } from './react';
+import { Client } from './react';
+import ReactDOMServer from 'react-dom/server';
+
+class TestBoard extends React.Component<BoardProps> {
+  render() {
+    return <div id="my-board">Board</div>;
+  }
+}
+
+test('board is rendered - ssr', () => {
+  const Board = Client({
+    game: {},
+    board: TestBoard,
+  });
+  const ssrRender = ReactDOMServer.renderToString(<Board />);
+  expect(ssrRender).toContain('bgio-client');
+  expect(ssrRender).toContain('my-board');
+});