Change color of box next to move in GameLog (#70)

* Change color of box next to move in GameLog based on the player that made the move (#4)

* use Map instead of Set and split into multiple lines for readability

* disable broadcasting the RESTORE action because it confuses log rewinding

* fix test

src/client/log/log.css

@@ -30,8 +30,72 @@
 }
 
 .gamelog .log-move {
-  border-left: 25px solid #ccc;
+  border-left: 25px solid;
   margin-top: 5px;
   background: #fff;
   padding: 5px;
 }
+
+.gamelog div.player0 {
+  border-left-color: #001f3f;
+}
+
+.gamelog div.player1 {
+  border-left-color: #0074D9;
+}
+
+.gamelog div.player2 {
+  border-left-color: #7FDBFF;
+}
+
+.gamelog div.player3 {
+  border-left-color: #39CCCC;
+}
+
+.gamelog div.player4 {
+  border-left-color: #3D9970;
+}
+
+.gamelog div.player5 {
+  border-left-color: #2ECC40;
+}
+
+.gamelog div.player6 {
+  border-left-color: #01FF70;
+}
+
+.gamelog div.player7 {
+  border-left-color: #FFDC00;
+}
+
+.gamelog div.player8 {
+  border-left-color: #FF851B;
+}
+
+.gamelog div.player9 {
+  border-left-color: #FF4136;
+}
+
+.gamelog div.player10 {
+  border-left-color: #85144b;
+}
+
+.gamelog div.player11 {
+  border-left-color: #F012BE;
+}
+
+.gamelog div.player12 {
+  border-left-color: #B10DC9;
+}
+
+.gamelog div.player13 {
+  border-left-color: #111111;
+}
+
+.gamelog div.player14 {
+  border-left-color: #AAAAAA;
+}
+
+.gamelog div.player15 {
+  border-left-color: #DDDDDD;
+}

src/client/log/log.js

@@ -54,6 +54,7 @@ export class GameLog extends React.Component {
     let turns = [];
     let currentTurn = [];
     let turnToLogIndex = {};
+    const playerIDs = new Map();
 
     for (let i = 0; i < this.props.log.length; i++) {
       const item = this.props.log[i];
@@ -64,8 +65,16 @@ export class GameLog extends React.Component {
         currentTurn = [];
       } else {
         const args = item.move.args || [];
+
+        const playerID = item.move.playerID;
+        if (!playerIDs.has(playerID)) {
+          playerIDs.set(playerID, playerIDs.size)
+        }
+        const playerNumber = playerIDs.get(playerID);
+        const classNames = `log-move player${playerNumber}`;
+
         currentTurn.push(
-          <div key={i} className="log-move">
+          <div key={i} className={classNames}>
           {item.move.type}({args.join(',')})
           </div>
         );

src/client/multiplayer/multiplayer.js

@@ -6,7 +6,7 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import { MAKE_MOVE, GAME_EVENT, RESTORE } from '../../core/action-types';
+import { MAKE_MOVE, GAME_EVENT } from '../../core/action-types';
 import * as ActionCreators from '../../core/action-creators';
 import { createStore, applyMiddleware } from 'redux';
 import io from 'socket.io-client';
@@ -45,7 +45,6 @@ export class Multiplayer {
     const whiteListedActions = new Set([
       MAKE_MOVE,
       GAME_EVENT,
-      RESTORE
     ]);
 
     // Redux middleware to emit a message on a socket

src/client/multiplayer/multiplayer.test.js

@@ -90,10 +90,6 @@ test('move whitelist', () => {
   expect(mockSocket.emit).toHaveBeenCalled();
   mockSocket.emit.mockReset();
 
-  store.dispatch(ActionCreators.restore());
-  expect(mockSocket.emit).toHaveBeenCalled();
-  mockSocket.emit.mockReset();
-
   store.dispatch({ type: 'unknown' });
   expect(mockSocket.emit).not.toHaveBeenCalled();
   mockSocket.emit.mockReset();