feat: Improve consistency around “match” instead of “game” (#765)

* refactor: Rename `gameID` to `matchID` in clients & transports

* docs: Update to replace `gameID` with `matchID`

* docs: Update example code to use `matchID` instead of `gameID`

* refactor: `gameMetadata` → `matchMetadata` in clients & transports

* refactor: `matchMetadata` → `matchData`

* refactor(types): `MatchMetadata` → `MatchData`

docs/documentation/api/Client.md

@@ -53,8 +53,8 @@ const client = Client({
   // See `src/client/client.js` for details.
   multiplayer: false,
 
-  // Game to connect to (multiplayer).
-  gameID: 'gameID',
+  // Match to connect to (multiplayer).
+  matchID: 'matchID',
 
   // Associate the client with a player (multiplayer).
   playerID: 'playerID',
@@ -91,7 +91,7 @@ The following properties are available on a client instance:
 - `log`: The game log.
 
 
-- `gameID`: The game ID associated with the client.
+- `matchID`: The match ID associated with the client.
 
 
 - `playerID`: The player ID associated with the client.
@@ -100,8 +100,8 @@ The following properties are available on a client instance:
 - `credentials`: Multiplayer authentication credentials for this player.
 
 
-- `matchMetadata`: An array containing the players that have joined
-  the match from a [room](/api/Lobby.md).
+- `matchData`: An array containing the players that have joined
+  the current match via the [Lobby API](/api/Lobby.md).
 
   Example:
 
@@ -175,7 +175,7 @@ The following methods are available on a client instance:
 - `redo()`: Function that redoes the previously undone move.
 
 
-- `updateGameID(id)`: Function to update the client’s game ID.
+- `updateMatchID(id)`: Function to update the client’s match ID.
 
 
 - `updatePlayerID(id)`: Function to update the client’s player ID.
@@ -202,8 +202,8 @@ A React component that runs the client.
 
 The component supports the following `props`:
 
-1. `gameID` (_string_):
-   Connect to a particular game (multiplayer).
+1. `matchID` (_string_):
+   Connect to a particular match (multiplayer).
 
 2. `playerID` (_string_):
    Associate the client with a player (multiplayer).
@@ -308,14 +308,14 @@ following as `props`:
 - `log`: The game log.
 
 
-- `gameID`: The game ID associated with the client.
+- `matchID`: The match ID associated with the client.
 
 
 - `playerID`: The player ID associated with the client.
 
 
-- `matchMetadata`: An array containing the players that have joined
-  the game from a [room](/api/Lobby.md).
+- `matchData`: An array containing the players that have joined
+  the current match via the [Lobby API](/api/Lobby.md).
 
     Example:
 

docs/documentation/multiplayer.md

@@ -299,35 +299,35 @@ const TicTacToe = {
 
 By default all client instances connect to a game with
 an ID `'default'`. To play a new game instance, you can pass
-`gameID` to your client. All clients that use
+`matchID` to your client. All clients that use
 this ID will now see the same game state.
 
 <!-- tabs:start -->
 
 #### **Plain JS**
 
-Pass `gameID` when creating your boardgame.io client:
+Pass `matchID` when creating your boardgame.io client:
 ```js
 const client = Client({
   game: TicTacToe,
-  gameID: 'gameid',
+  matchID: 'matchID',
   // ...
 });
 ```
 
-You an also update a `gameID` on an already instantiated client:
+You an also update a `matchID` on an already instantiated client:
 ```js
-client.updateGameID('newGameID');
+client.updateMatchID('newID');
 ```
 
 #### **React**
 
 ```
-<TicTacToeClient gameID="gameid"/>
+<TicTacToeClient matchID="match-id"/>
 ```
 <!-- tabs:end -->
 
-The `gameID`, similar to the `playerID` can again be determined
+The `matchID`, similar to the `playerID` can again be determined
 either by a URL path or a lobby implementation.
 
 ### Storage

examples/react-native/App.js

@@ -22,7 +22,7 @@ const App = Client({
 const Singleplayer = () => (
   <View style={styles.container}>
     <Image source={logo} style={styles.logo} />
-    <App gameID="single" />
+    <App matchID="single" />
   </View>
 );
 

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

@@ -22,7 +22,7 @@ const App = Client({
 
 const Multiplayer = playerID => () => (
   <div style={{ padding: 50 }}>
-    <App gameID="multi" playerID={playerID} />
+    <App matchID="multi" playerID={playerID} />
     PlayerID: {playerID}
   </div>
 );

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

@@ -18,7 +18,7 @@ const App = Client({
 
 const Singleplayer = () => (
   <div style={{ padding: 50 }}>
-    <App gameID="single" />
+    <App matchID="single" />
   </div>
 );
 

examples/react-web/src/random/index.js

@@ -19,7 +19,7 @@ const App = Client({
 
 const SingleView = () => (
   <div style={{ padding: 50 }}>
-    <App gameID="Random" />
+    <App matchID="Random" />
   </div>
 );
 

examples/react-web/src/redacted-move/multiview.js

@@ -34,15 +34,15 @@ const Multiview = () => (
     </p>
     <div className="runner">
       <div className="run">
-        <App gameID="redacted-move" playerID="0" />
+        <App matchID="redacted-move" playerID="0" />
         &lt;App playerID=&quot;0&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="redacted-move" playerID="1" />
+        <App matchID="redacted-move" playerID="1" />
         &lt;App playerID=&quot;1&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="redacted-move" />
+        <App matchID="redacted-move" />
         &lt;App/&gt;
       </div>
     </div>

examples/react-web/src/secret-state/multiview.js

@@ -25,19 +25,19 @@ const Multiview = () => (
     <h1>Secret Info</h1>
     <div className="runner">
       <div className="run">
-        <App gameID="secret-state" playerID="0" />
+        <App matchID="secret-state" playerID="0" />
         &lt;App playerID=&quot;0&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="secret-state" playerID="1" />
+        <App matchID="secret-state" playerID="1" />
         &lt;App playerID=&quot;1&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="secret-state" playerID="2" />
+        <App matchID="secret-state" playerID="2" />
         &lt;App playerID=&quot;2&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="secret-state" />
+        <App matchID="secret-state" />
         &lt;App/&gt;
       </div>
     </div>

examples/react-web/src/simulator/simulator.js

@@ -118,7 +118,7 @@ class App extends React.Component {
 
     let players = [];
     for (let i = 0; i < 6; i++) {
-      players.push(<App key={i} gameID={this.type} playerID={i + ''} />);
+      players.push(<App key={i} matchID={this.type} playerID={i + ''} />);
     }
 
     return (
@@ -152,7 +152,7 @@ class App extends React.Component {
 
         <div className="turnorder-content">
           <div className="player-container">
-            <App gameID={this.type} />
+            <App matchID={this.type} />
             <span>{players}</span>
           </div>
           <div className="description">

examples/react-web/src/tic-tac-toe/authenticated.js

@@ -26,7 +26,7 @@ class AuthenticatedClient extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      gameID: 'gameID',
+      matchID: 'matchID',
       players: {
         '0': {
           credentials: 'credentials',
@@ -46,13 +46,13 @@ class AuthenticatedClient extends React.Component {
       .post(`http://${hostname}:${PORT}/games/${gameName}/create`)
       .send({ numPlayers: 2 });
 
-    const gameID = newGame.body.gameID;
+    const matchID = newGame.body.matchID;
 
     let playerCredentials = [];
 
     for (let playerID of [0, 1]) {
       const player = await request
-        .post(`http://${hostname}:${PORT}/games/${gameName}/${gameID}/join`)
+        .post(`http://${hostname}:${PORT}/games/${gameName}/${matchID}/join`)
         .send({
           gameName,
           playerID,
@@ -63,7 +63,7 @@ class AuthenticatedClient extends React.Component {
     }
 
     this.setState({
-      gameID,
+      matchID,
       players: {
         '0': {
           credentials: playerCredentials[0],
@@ -77,7 +77,7 @@ class AuthenticatedClient extends React.Component {
 
   onPlayerCredentialsChange(playerID, credentials) {
     this.setState({
-      gameID: this.state.gameID,
+      matchID: this.state.matchID,
       players: {
         ...this.state.players,
         [playerID]: {
@@ -90,7 +90,7 @@ class AuthenticatedClient extends React.Component {
   render() {
     return (
       <AuthenticatedExample
-        gameID={this.state.gameID}
+        matchID={this.state.matchID}
         players={this.state.players}
         onPlayerCredentialsChange={this.onPlayerCredentialsChange.bind(this)}
       />
@@ -100,7 +100,7 @@ class AuthenticatedClient extends React.Component {
 
 class AuthenticatedExample extends React.Component {
   static propTypes = {
-    gameID: PropTypes.string,
+    matchID: PropTypes.string,
     players: PropTypes.any,
     onPlayerCredentialsChange: PropTypes.func,
   };
@@ -118,7 +118,7 @@ class AuthenticatedExample extends React.Component {
         <div className="runner">
           <div className="run">
             <App
-              gameID={this.props.gameID}
+              matchID={this.props.matchID}
               playerID="0"
               credentials={this.props.players['0'].credentials}
             />
@@ -132,7 +132,7 @@ class AuthenticatedExample extends React.Component {
           </div>
           <div className="run">
             <App
-              gameID={this.props.gameID}
+              matchID={this.props.matchID}
               playerID="1"
               credentials={this.props.players['1'].credentials}
             />

examples/react-web/src/tic-tac-toe/multiplayer.js

@@ -24,11 +24,11 @@ const Multiplayer = () => (
     <h1>Multiplayer</h1>
     <div className="runner">
       <div className="run">
-        <App gameID="multi" playerID="0" />
+        <App matchID="multi" playerID="0" />
         &lt;App playerID=&quot;0&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="multi" playerID="1" />
+        <App matchID="multi" playerID="1" />
         &lt;App playerID=&quot;1&quot;/&gt;
       </div>
     </div>

examples/react-web/src/tic-tac-toe/singleplayer.js

@@ -21,7 +21,7 @@ const App = Client({
 const Singleplayer = () => (
   <div>
     <h1>Singleplayer</h1>
-    <App gameID="single" />
+    <App matchID="single" />
   </div>
 );
 

examples/react-web/src/tic-tac-toe/spectator.js

@@ -25,15 +25,15 @@ const Spectator = () => (
     <h1>Spectator</h1>
     <div className="runner">
       <div className="run">
-        <App gameID="spectator" playerID="0" />
+        <App matchID="spectator" playerID="0" />
         &lt;App playerID=&quot;0&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="spectator" playerID="1" />
+        <App matchID="spectator" playerID="1" />
         &lt;App playerID=&quot;1&quot;/&gt;
       </div>
       <div className="run">
-        <App gameID="spectator" />
+        <App matchID="spectator" />
         Spectator
       </div>
     </div>

examples/snippets/src/phases-1/Player.svelte

@@ -7,7 +7,7 @@
 
   const client = Client({
     game: Game,
-    gameID: 'default',
+    matchID: 'default',
     playerID,
     debug: false,
     numPlayers: 3,

examples/snippets/src/phases-2/Player.svelte

@@ -7,7 +7,7 @@
 
   const client = Client({
     game: Game,
-    gameID: 'default',
+    matchID: 'default',
     playerID,
     debug: false,
     numPlayers: 3,

examples/snippets/src/stages-1/Player.svelte

@@ -7,7 +7,7 @@
 
   const client = Client({
     game: Game,
-    gameID: 'default',
+    matchID: 'default',
     playerID,
     debug: false,
     numPlayers: 3,

src/client/client.test.ts

@@ -233,7 +233,7 @@ describe('multiplayer', () => {
         this.callback = null;
       }
 
-      subscribeGameMetadata(fn) {
+      subscribeMatchData(fn) {
         this.callback = fn;
       }
     }
@@ -256,7 +256,7 @@ describe('multiplayer', () => {
     test('metadata callback', () => {
       const metadata = { m: true };
       client.transport.callback(metadata);
-      expect(client.gameMetadata).toEqual(metadata);
+      expect(client.matchData).toEqual(metadata);
     });
   });
 });