fix(client): Make chatMessages and sendChatMessage always available

This change makes sure the chat fields on the client class are always 
present, so consumers don’t have to double check whether they are there 
before using them.

This commit also moves the dummy transport logic out of the client and 
into a dedicated `DummyTransport`.

Author: delucis

examples/react-web/src/chess/board.js

@@ -67,7 +67,7 @@ class Board extends React.Component {
 
         {this._getStatus()}
         {disconnected}
-        {this.props.sendChatMessage && this.props.chatMessages && (
+        {this.props.isMultiplayer && this.props.playerID !== null && (
           <Chat
             onSend={this.props.sendChatMessage}
             messages={this.props.chatMessages}

examples/react-web/src/chess/chat.js

@@ -7,7 +7,8 @@ const Chat = ({ onSend, messages }) => {
     setMessage(event.target.value);
   };
 
-  const triggerSend = () => {
+  const triggerSend = (event) => {
+    event.preventDefault();
     onSend(message);
     setMessage('');
   };
@@ -18,19 +19,21 @@ const Chat = ({ onSend, messages }) => {
         style={{
           height: 200,
           maxWidth: 400,
+          padding: '.5em',
           overflow: 'scroll',
           border: '1px solid black',
         }}
       >
         {messages.map((message) => (
-          <div key={message.id}>
-            <div>{message.sender}</div>
-            <div>{JSON.stringify(message.payload)}</div>
+          <div key={message.id} style={{ marginBottom: '.25em' }}>
+            <strong>Player {message.sender}:</strong> {message.payload}
           </div>
         ))}
       </div>
-      <input onChange={onChange} value={message} />
-      <button onClick={triggerSend}>Send</button>
+      <form onSubmit={triggerSend}>
+        <input onChange={onChange} value={message} />
+        <button type="submit">Send</button>
+      </form>
     </div>
   );
 };

package.json

@@ -177,7 +177,7 @@
     },
     "coveragePathIgnorePatterns": [
       "/node_modules/",
-      "src/.*/random.alea.js",
+      "src/client/transport/dummy",
       "src/client/debug/.*",
       "src/types.ts"
     ],

src/client/client.test.ts

@@ -279,6 +279,8 @@ describe('multiplayer', () => {
       subscribeMatchData(fn) {
         this.callback = fn;
       }
+
+      subscribeChatMessage() {}
     }
     const customTransport = () =>
       (new CustomTransport() as unknown) as Transport;

src/client/client.ts

@@ -18,6 +18,7 @@ import { CreateGameReducer } from '../core/reducer';
 import { InitializeGame } from '../core/initialize';
 import { PlayerView } from '../plugins/main';
 import type { Transport, TransportOpts } from './transport/transport';
+import { DummyTransport } from './transport/dummy';
 import { ClientManager } from './manager';
 import type {
   ActivePlayersArg,
@@ -308,31 +309,17 @@ export class _ClientImpl<G extends any = any> {
 
     this.store = createStore(this.reducer, this.initialState, enhancer);
 
-    this.transport = ({
-      isConnected: true,
-      onAction: () => {},
-      subscribe: () => {},
-      subscribeMatchData: () => {},
-      subscribeChatMessage: () => {},
-      connect: () => {},
-      disconnect: () => {},
-      updateMatchID: () => {},
-      updatePlayerID: () => {},
-    } as unknown) as Transport;
-
-    if (multiplayer) {
-      // typeof multiplayer is 'function'
-      this.transport = multiplayer({
-        gameKey: game,
-        game: this.game,
-        store: this.store,
-        matchID,
-        playerID,
-        credentials,
-        gameName: this.game.name,
-        numPlayers,
-      });
-    }
+    if (!multiplayer) multiplayer = DummyTransport;
+    this.transport = multiplayer({
+      gameKey: game,
+      game: this.game,
+      store: this.store,
+      matchID,
+      playerID,
+      credentials,
+      gameName: this.game.name,
+      numPlayers,
+    });
 
     this.createDispatchers();
 
@@ -341,20 +328,18 @@ export class _ClientImpl<G extends any = any> {
       this.notifySubscribers();
     });
 
-    if (this.transport.onChatMessage) {
-      this.chatMessages = [];
-      this.sendChatMessage = (payload) => {
-        this.transport.onChatMessage(this.matchID, {
-          id: nanoid(7),
-          sender: this.playerID,
-          payload: payload,
-        });
-      };
-      this.transport.subscribeChatMessage((message) => {
-        this.chatMessages = [...this.chatMessages, message];
-        this.notifySubscribers();
+    this.chatMessages = [];
+    this.sendChatMessage = (payload) => {
+      this.transport.onChatMessage(this.matchID, {
+        id: nanoid(7),
+        sender: this.playerID,
+        payload: payload,
       });
-    }
+    };
+    this.transport.subscribeChatMessage((message) => {
+      this.chatMessages = [...this.chatMessages, message];
+      this.notifySubscribers();
+    });
   }
 
   private notifySubscribers() {

src/client/transport/dummy.ts

@@ -0,0 +1,21 @@
+import { Transport } from './transport';
+import type { TransportOpts } from './transport';
+
+/**
+ * This class doesn’t do anything, but simplifies the client class by providing
+ * dummy functions to call, so we don’t need to mock them in the client.
+ */
+class DummyImpl extends Transport {
+  connect() {}
+  disconnect() {}
+  onAction() {}
+  onChatMessage() {}
+  subscribe() {}
+  subscribeChatMessage() {}
+  subscribeMatchData() {}
+  updateCredentials() {}
+  updateMatchID() {}
+  updatePlayerID() {}
+}
+
+export const DummyTransport = (opts: TransportOpts) => new DummyImpl(opts);