Surface game metadata and player nicknames in client / react props (#436)

* Surface game metadata and player nicknames in client / react props

* Add gameMetadata to Client documentation

* Do not send credentials to clients in metadata, update documentation, add tests

* remove unnecessary code from client.js

* Address review

Author: jasonharrison

docs/documentation/api/Client.md

@@ -108,9 +108,28 @@ The `Board` component will receive the following as `props`:
 
 10. `playerID`: The player ID associated with the client.
 
-11. `isActive`: `true` if the client is able to currently make
+11. `gameMetadata`: An object containing the players that have joined the game from a [room](/api/Lobby.md).
+
+Example:
+
+````json
+{
+  "players": {
+    "0": {
+      "id": 0,
+      "name": "Alice"
+    },
+    "1": {
+      "id": 1,
+      "name": "Bob"
+    }
+  }
+}```
+
+12.  `isActive`: `true` if the client is able to currently make
     a move or interact with the game.
 
-12. `isMultiplayer`: `true` if it is a multiplayer game.
+13.  `isMultiplayer`: `true` if it is a multiplayer game.
 
-13. `isConnected`: `true` if connection to the server is active.
+14.  `isConnected`: `true` if connection to the server is active.
+````

src/client/client.js

@@ -239,6 +239,7 @@ class _ClientImpl {
       isConnected: true,
       onAction: () => {},
       subscribe: () => {},
+      subscribeGameMetadata: _metadata => {}, // eslint-disable-line no-unused-vars
       connect: () => {},
       updateGameID: () => {},
       updatePlayerID: () => {},
@@ -286,6 +287,10 @@ class _ClientImpl {
     }
 
     this.createDispatchers();
+
+    this.transport.subscribeGameMetadata(metadata => {
+      this.gameMetadata = metadata;
+    });
   }
 
   subscribe(fn) {

src/client/client.test.js

@@ -195,7 +195,13 @@ describe('multiplayer', () => {
 
   describe('custom transport', () => {
     class CustomTransport {
-      custom = true;
+      constructor() {
+        this.callback = null;
+      }
+
+      subscribeGameMetadata(fn) {
+        this.callback = fn;
+      }
     }
 
     let client;
@@ -209,7 +215,12 @@ describe('multiplayer', () => {
 
     test('correct transport used', () => {
       expect(client.transport).toBeInstanceOf(CustomTransport);
-      expect(client.transport.custom).toBe(true);
+    });
+
+    test('metadata callback', () => {
+      const metadata = { m: true };
+      client.transport.callback(metadata);
+      expect(client.gameMetadata).toEqual(metadata);
     });
   });
 

src/client/react-native.js

@@ -113,6 +113,7 @@ export function Client(opts) {
           reset: this.client.reset,
           undo: this.client.undo,
           redo: this.client.redo,
+          gameMetadata: this.client.gameMetadata,
         });
       }
 

src/client/react.js

@@ -170,6 +170,7 @@ export function Client(opts) {
           reset: this.client.reset,
           undo: this.client.undo,
           redo: this.client.redo,
+          gameMetadata: this.client.gameMetadata,
         });
       }
 

src/client/transport/local.js

@@ -121,6 +121,8 @@ export class Local {
    */
   subscribe() {}
 
+  subscribeGameMetadata(_metadata) {} // eslint-disable-line no-unused-vars
+
   /**
    * Updates the game id.
    * @param {string} id - The new game id.

src/client/transport/socketio.js

@@ -46,6 +46,7 @@ export class SocketIO {
     this.gameID = this.gameName + ':' + this.gameID;
     this.isConnected = false;
     this.callback = () => {};
+    this.gameMetadataCallback = () => {};
   }
 
   /**
@@ -96,10 +97,11 @@ export class SocketIO {
 
     // Called when the client first connects to the master
     // and requests the current game state.
-    this.socket.on('sync', (gameID, state, log) => {
+    this.socket.on('sync', (gameID, state, log, gameMetadata) => {
       if (gameID == this.gameID) {
         const action = ActionCreators.sync(state, log);
         this.store.dispatch(action);
+        this.gameMetadataCallback(gameMetadata);
       }
     });
 
@@ -124,6 +126,10 @@ export class SocketIO {
     this.callback = fn;
   }
 
+  subscribeGameMetadata(fn) {
+    this.gameMetadataCallback = fn;
+  }
+
   /**
    * Updates the game id.
    * @param {string} id - The new game id.

src/master/master.js

@@ -259,14 +259,20 @@ export class Master {
   async onSync(gameID, playerID, numPlayers) {
     const key = gameID;
 
-    let state;
+    let state, gameMetadata, filteredGameMetadata;
 
     if (this.executeSynchronously) {
       state = this.storageAPI.get(key);
+      gameMetadata = this.storageAPI.get(GameMetadataKey(gameID));
     } else {
       state = await this.storageAPI.get(key);
+      gameMetadata = await this.storageAPI.get(GameMetadataKey(gameID));
+    }
+    if (gameMetadata) {
+      filteredGameMetadata = Object.values(gameMetadata.players).map(player => {
+        return { id: player.id, name: player.name };
+      });
     }
-
     // If the game doesn't exist, then create one on demand.
     // TODO: Move this out of the sync call.
     if (state === undefined) {
@@ -301,7 +307,7 @@ export class Master {
     this.transportAPI.send({
       playerID,
       type: 'sync',
-      args: [gameID, filteredState, log],
+      args: [gameID, filteredState, log, filteredGameMetadata],
     });
 
     return;

src/master/master.test.js

@@ -44,6 +44,36 @@ describe('sync', () => {
     await master.onSync('gameID', '0', 2);
     expect(send).toHaveBeenCalled();
   });
+
+  test('should not have metadata', async () => {
+    await master.onSync('gameID', '0', 2);
+    // [0][0] = first call, first argument
+    expect(send.mock.calls[0][0].args[3]).toBeUndefined();
+  });
+
+  test('should have metadata', async () => {
+    const db = new InMemory();
+    const dbMetadata = {
+      players: {
+        '0': {
+          id: 0,
+          credentials: 'qS2m4Ujb_',
+          name: 'Alice',
+        },
+        '1': {
+          id: 1,
+          credentials: 'nIQtXFybDD',
+          name: 'Bob',
+        },
+      },
+    };
+    db.set('gameID:metadata', dbMetadata);
+    const masterWithMetadata = new Master(game, db, TransportAPI(send));
+    await masterWithMetadata.onSync('gameID', '0', 2);
+
+    const expectedMetadata = [{ id: 0, name: 'Alice' }, { id: 1, name: 'Bob' }];
+    expect(send.mock.calls[0][0].args[3]).toMatchObject(expectedMetadata);
+  });
 });
 
 describe('update', () => {