ability to change playerID from Debug UI

also simplify semantics by getting rid of special cases for undefined and null

singleplayer mode (handled by reducer.js):
- if playerID is not set, anyone can move
- if playerID is set, check actionPlayers

multiplayer mode (handled by src/server):
- check actionPlayers always

Author: darthfiddler

examples/react/modules/tic-tac-toe/components/board.js

@@ -67,7 +67,7 @@ class Board extends React.Component {
     }
 
     let player = null;
-    if (this.props.playerID !== null) {
+    if (this.props.playerID) {
       player = <div id="player">Player: {this.props.playerID}</div>;
     }
 

src/client/client.js

@@ -156,15 +156,24 @@ class _ClientImpl {
     // isActive.
 
     let isActive = true;
-    if (this.multiplayer) {
-      if (this.playerID == null) {
-        isActive = false;
-      }
-      if (
-        !this.game.flow.canPlayerMakeMove(state.G, state.ctx, this.playerID)
-      ) {
-        isActive = false;
-      }
+
+    const canPlayerMakeMove = this.game.flow.canPlayerMakeMove(
+      state.G,
+      state.ctx,
+      this.playerID
+    );
+
+    if (this.multiplayer && !canPlayerMakeMove) {
+      isActive = false;
+    }
+
+    if (
+      !this.multiplayer &&
+      this.playerID !== null &&
+      this.playerID !== undefined &&
+      !canPlayerMakeMove
+    ) {
+      isActive = false;
     }
 
     if (state.ctx.gameover !== undefined) {

src/client/debug/debug.css

@@ -49,12 +49,18 @@
   background: #ddd;
   position: fixed;
   bottom: 0;
-  width: 100%;
+  box-sizing: border-box;
+  width: 285px;
   margin-left: -20px;
   margin-bottom: 0;
   padding: 10px;
 }
 
+.debug-ui .gameinfo-item div {
+  float: right;
+  text-align: right;
+}
+
 .debug-ui .pane {
   float: left;
   padding: 20px;
@@ -163,11 +169,17 @@
   width: 30px;
   height: 30px;
   line-height: 30px;
-  border: 3px solid #eee;
+  background: #eee;
+  border: 3px solid #fff;
   box-sizing: content-box;
 }
 
+.debug-ui .player.current {
+  background: #555;
+  color: #eee;
+  font-weight: bold;
+}
+
 .debug-ui .player.active {
-  background: #ccc;
-  border: 3px solid #555;
+  border: 3px solid #ff7f50;
 }

src/client/debug/debug.js

@@ -12,6 +12,7 @@ import Mousetrap from 'mousetrap';
 import { AssignShortcuts } from './assign-shortcuts';
 import { GameInfo } from './gameinfo';
 import { Controls } from './controls';
+import { PlayerInfo } from './playerinfo';
 import { DebugMove } from './debug-move';
 import { GameLog } from '../log/log';
 import { restore } from '../../core/action-creators';
@@ -31,11 +32,11 @@ export class Debug extends React.Component {
       ctx: PropTypes.any.isRequired,
       log: PropTypes.array.isRequired,
       isActive: PropTypes.bool,
+      isConnected: PropTypes.bool,
       _initial: PropTypes.any.isRequired,
     }),
     gameID: PropTypes.string.isRequired,
     playerID: PropTypes.string,
-    isConnected: PropTypes.bool,
     isMultiplayer: PropTypes.bool,
     moves: PropTypes.any,
     events: PropTypes.any,
@@ -47,6 +48,9 @@ export class Debug extends React.Component {
     reducer: PropTypes.func,
     overrideGameState: PropTypes.func,
     visualizeAI: PropTypes.func,
+    updateGameID: PropTypes.func,
+    updatePlayerID: PropTypes.func,
+    updateCredentials: PropTypes.func,
   };
 
   constructor(props) {
@@ -155,19 +159,6 @@ export class Debug extends React.Component {
       );
     }
 
-    let players = [];
-    for (let i = 0; i < this.props.gamestate.ctx.numPlayers; i++) {
-      let className = 'player active';
-      if (i != this.props.gamestate.ctx.currentPlayer) {
-        className = 'player';
-      }
-      players.push(
-        <div className={className} key={i}>
-          {i}
-        </div>
-      );
-    }
-
     let className = 'debug-ui';
     if (this.state.dockControls) {
       className += ' docktop';
@@ -204,7 +195,7 @@ export class Debug extends React.Component {
                   gameID={this.props.gameID}
                   playerID={this.props.playerID}
                   isActive={this.props.gamestate.isActive}
-                  isConnected={this.props.isConnected}
+                  isConnected={this.props.gamestate.isConnected}
                   isMultiplayer={this.props.isMultiplayer}
                 />
               )}
@@ -221,7 +212,11 @@ export class Debug extends React.Component {
               />
 
               <h3>Players</h3>
-              <div className="player-box">{players}</div>
+              <PlayerInfo
+                ctx={this.props.gamestate.ctx}
+                playerID={this.props.playerID}
+                onClick={this.props.updatePlayerID}
+              />
 
               <h3>Moves</h3>
 

src/client/debug/gameinfo.js

@@ -10,8 +10,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const Item = props => (
-  <div>
-    <strong>{props.name}</strong> {JSON.stringify(props.value)}
+  <div className="gameinfo-item">
+    <strong>{props.name} </strong>
+    <div>{JSON.stringify(props.value)}</div>
   </div>
 );
 

src/client/debug/playerinfo.js

@@ -0,0 +1,56 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/**
+ * Component that renders information about the
+ * players in the game (whose turn it is etc.).
+ */
+export class PlayerInfo extends React.Component {
+  static propTypes = {
+    ctx: PropTypes.any.isRequired,
+    playerID: PropTypes.any,
+    onClick: PropTypes.func,
+  };
+
+  onClick = playerID => {
+    const arg = playerID == this.props.playerID ? null : playerID;
+    this.props.onClick(arg);
+  };
+
+  render() {
+    let players = [];
+    for (let i = 0; i < this.props.ctx.numPlayers; i++) {
+      const playerID = i + '';
+
+      let className = 'player';
+
+      if (playerID === this.props.ctx.currentPlayer) {
+        className += ' current';
+      }
+
+      if (playerID === this.props.playerID) {
+        className += ' active';
+      }
+
+      players.push(
+        <div
+          className={className}
+          key={i}
+          onClick={() => this.onClick(playerID)}
+        >
+          {playerID}
+        </div>
+      );
+    }
+
+    return <div className="player-box">{players}</div>;
+  }
+}

src/client/debug/playerinfo.test.js

@@ -0,0 +1,47 @@
+/*
+ * 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 { PlayerInfo } from './playerinfo';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('PlayerInfo', () => {
+  const ctx = {
+    numPlayers: 2,
+    currentPlayer: '0',
+  };
+
+  test('click', () => {
+    const fn = jest.fn();
+    const root = Enzyme.mount(<PlayerInfo ctx={ctx} onClick={fn} />);
+    expect(fn).not.toHaveBeenCalled();
+    root
+      .find('.player')
+      .at(0)
+      .simulate('click');
+    expect(root.html()).not.toContain('active');
+    expect(fn).toHaveBeenCalled();
+  });
+
+  test('click while active', () => {
+    const fn = jest.fn();
+    const root = Enzyme.mount(
+      <PlayerInfo ctx={ctx} onClick={fn} playerID="0" />
+    );
+    expect(fn).not.toHaveBeenCalled();
+    root
+      .find('.player')
+      .at(0)
+      .simulate('click');
+    expect(root.html()).toContain('active');
+    expect(fn).toHaveBeenCalled();
+  });
+});

src/client/react-native.test.js

@@ -69,7 +69,7 @@ test('board props', () => {
     multiplayer: true,
   });
   board = Enzyme.mount(<Board />).find(TestBoard);
-  expect(board.props().isActive).toBe(false);
+  expect(board.props().isActive).toBe(true);
   board = Enzyme.mount(<Board playerID={'0'} />).find(TestBoard);
   expect(board.props().isActive).toBe(true);
   board = Enzyme.mount(<Board playerID={'1'} />).find(TestBoard);

src/client/react.js

@@ -88,21 +88,43 @@ export function Client({
         enhancer,
       });
 
+      this.gameID = props.gameID;
+      this.playerID = props.playerID;
+      this.credentials = props.credentials;
+
       this.client.subscribe(() => this.forceUpdate());
     }
 
     componentDidUpdate(prevProps) {
       if (this.props.gameID != prevProps.gameID) {
-        this.client.updateGameID(this.props.gameID);
+        this.updateGameID(this.props.gameID);
       }
       if (this.props.playerID != prevProps.playerID) {
-        this.client.updatePlayerID(this.props.playerID);
+        this.updatePlayerID(this.props.playerID);
       }
       if (this.props.credentials != prevProps.credentials) {
-        this.client.updateCredentials(this.props.credentials);
+        this.updateCredentials(this.props.credentials);
       }
     }
 
+    updateGameID = gameID => {
+      this.client.updateGameID(gameID);
+      this.gameID = gameID;
+      this.forceUpdate();
+    };
+
+    updatePlayerID = playerID => {
+      this.client.updatePlayerID(playerID);
+      this.playerID = playerID;
+      this.forceUpdate();
+    };
+
+    updateCredentials = credentials => {
+      this.client.updateCredentials(credentials);
+      this.credentials = credentials;
+      this.forceUpdate();
+    };
+
     componentDidMount() {
       this.client.connect();
     }
@@ -116,7 +138,7 @@ export function Client({
       let _debug = null;
 
       let state = this.client.getState();
-      const { gameID, playerID, debug: debugProp, ...rest } = this.props;
+      const { debug: debugProp, ...rest } = this.props;
 
       if (this.state.gameStateOverride) {
         state = { ...state, ...this.state.gameStateOverride };
@@ -128,8 +150,8 @@ export function Client({
           isMultiplayer: multiplayer !== undefined,
           moves: this.client.moves,
           events: this.client.events,
-          gameID: gameID,
-          playerID: playerID,
+          gameID: this.gameID,
+          playerID: this.playerID,
           reset: this.client.reset,
           undo: this.client.undo,
           redo: this.client.redo,
@@ -145,14 +167,18 @@ export function Client({
           isMultiplayer: multiplayer !== undefined,
           moves: this.client.moves,
           events: this.client.events,
-          gameID: gameID,
-          playerID: playerID,
+          gameID: this.gameID,
+          playerID: this.playerID,
+          credentials: this.credentials,
           step: this.client.step,
           reset: this.client.reset,
           undo: this.client.undo,
           redo: this.client.redo,
           visualizeAI: ai && ai.visualize,
           overrideGameState: this.overrideGameState,
+          updateGameID: this.updateGameID,
+          updatePlayerID: this.updatePlayerID,
+          updateCredentials: this.updateCredentials,
         });
       }
 

src/client/react.test.js

@@ -70,7 +70,7 @@ test('board props', () => {
     multiplayer: true,
   });
   board = Enzyme.mount(<Board />).find(TestBoard);
-  expect(board.props().isActive).toBe(false);
+  expect(board.props().isActive).toBe(true);
   board = Enzyme.mount(<Board playerID={'0'} />).find(TestBoard);
   expect(board.props().isActive).toBe(true);
   board = Enzyme.mount(<Board playerID={'1'} />).find(TestBoard);