resolve #85 add option in Client config to specify socket server (#90)

* resolve #85 add option in Client config to specify socket server

* minor refactor

src/client/client.js

@@ -17,23 +17,31 @@ import { createEventDispatchers } from '../core/flow';
 import { createGameReducer, createMoveDispatchers } from '../core/reducer';
 import './client.css';
 
-/*
- * client
+/**
+ * Client
  *
- * Main function used to a register a game client.
+ * Main function used to a create a game client.
  *
- * Args:
- *   G     - The initial game state.
- *   moves - The game move reducer.
- *   board - React component to render your game.
+ * @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} multiplayer - Set to true or { server: '<host>:<port>' }
+ *                                  to make a multiplayer client. The second
+ *                                  syntax specifies a non-default socket server.
+ * @param {...object} debug - Enables the Debug UI.
  *
  * 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 and END_TURN.
  */
 function Client({ game, numPlayers, board, multiplayer, debug }) {
-  if (!multiplayer) multiplayer = false;
+  let server = undefined;
+  if (multiplayer instanceof Object && 'server' in multiplayer) {
+    server = multiplayer.server;
+    multiplayer = true;
+  }
+
   if (debug === undefined) debug = true;
 
   const GameReducer = createGameReducer({
@@ -77,7 +85,8 @@ function Client({ game, numPlayers, board, multiplayer, debug }) {
           props.gameID,
           props.playerID,
           game.name,
-          numPlayers
+          numPlayers,
+          server
         );
         this.store = this.multiplayerClient.createStore(GameReducer);
       } else {

src/client/client.test.js

@@ -163,3 +163,24 @@ test('update gameID / playerID', () => {
   expect(spy1).toHaveBeenCalled();
   expect(spy2).toHaveBeenCalled();
 });
+
+test('multiplayer server set when provided', () => {
+  let Board = null;
+  let game = null;
+
+  let host = 'host';
+  let port = '4321';
+  Board = Client({
+    game: Game({
+      moves: {
+        A: (G, ctx, arg) => ({ arg }),
+      },
+    }),
+    board: TestBoard,
+    multiplayer: { server: host + ':' + port },
+  });
+  game = Enzyme.mount(<Board gameID="a" playerID="1" />);
+  const m = game.instance().multiplayerClient;
+  expect(m.socket.io.engine.hostname).toEqual(host);
+  expect(m.socket.io.engine.port).toEqual(port);
+});

src/client/multiplayer/multiplayer.js

@@ -24,8 +24,9 @@ export class Multiplayer {
    * @param {string} playerID - The player ID associated with this client.
    * @param {string} gameName - The game type (the `name` field in `Game`).
    * @param {string} numPlayers - The number of players.
+   * @param {string} server - The game server in the form of 'hostname:port'. Defaults to the server serving the client if not provided.
    */
-  constructor(socketImpl, gameID, playerID, gameName, numPlayers) {
+  constructor(socketImpl, gameID, playerID, gameName, numPlayers, server) {
     this.gameName = gameName || 'default';
     this.gameID = gameID || 'default';
     this.playerID = playerID || null;
@@ -36,7 +37,11 @@ export class Multiplayer {
     if (socketImpl !== undefined) {
       this.socket = socketImpl;
     } else {
-      this.socket = io('/' + gameName);
+      if (server) {
+        this.socket = io('http://' + server + '/' + gameName);
+      } else {
+        this.socket = io('/' + gameName);
+      }
     }
   }
 

src/client/multiplayer/multiplayer.test.js

@@ -94,3 +94,17 @@ test('move whitelist', () => {
   expect(mockSocket.emit).not.toHaveBeenCalled();
   mockSocket.emit.mockReset();
 });
+
+test('game server is set when provided', () => {
+  var hostname = 'host';
+  var port = '1234';
+  var server = hostname + ':' + port;
+
+  const m = new Multiplayer(undefined, 0, 0, 0, 1, server);
+  expect(m.socket.io.engine.hostname).toEqual(hostname);
+  expect(m.socket.io.engine.port).toEqual(port);
+
+  const m2 = new Multiplayer(undefined, 0, 0, 0, 1, undefined);
+  expect(m2.socket.io.engine.hostname).not.toEqual(hostname);
+  expect(m2.socket.io.engine.port).not.toEqual(port);
+});