lobby auto refresh + leave game ready to play (#510)

* lobby: add auto-refresh of list of rooms - add settings 'refreshInterval' * lobby: show 'leave' button even if the game is ready to play
boardgameio · Nov 15, 2019 · 4efddb4 · 4efddb4
1 parent a8b7028
commit 4efddb4
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 40 deletions.
diff --git a/src/lobby/react.js b/src/lobby/react.js
@@ -33,6 +33,7 @@ const LobbyPhases = {
  * @param {string} gameServer - Address of the game server (for example 'localhost:8001').
  *                              If not set, defaults to the server that served the page.
  * @param {function} clientFactory - Function that is used to create the game clients.
+ * @param {number} refreshInterval - Interval between server updates (default: 2000ms).
  * @param {bool}   debug - Enable debug information (default: false).
  *
  * Returns:
@@ -45,11 +46,13 @@ class Lobby extends React.Component {
     gameServer: PropTypes.string,
     debug: PropTypes.bool,
     clientFactory: PropTypes.func,
+    refreshInterval: PropTypes.number,
   };
 
   static defaultProps = {
     debug: false,
     clientFactory: Client,
+    refreshInterval: 2000,
   };
 
   state = {
@@ -63,7 +66,7 @@ class Lobby extends React.Component {
   constructor(props) {
     super(props);
     this._createConnection(this.props);
-    this._updateConnection();
+    setInterval(this._updateConnection, this.props.refreshInterval);
   }
 
   componentDidMount() {

diff --git a/src/lobby/react.test.js b/src/lobby/react.test.js
@@ -418,6 +418,8 @@ describe('lobby', () => {
           .find('LobbyRoomInstance')
           .first()
           .find('button')
+
+          .first()
           .simulate('click');
         expect(lobby.instance().state.runningGame).toEqual({
           app: NullComponent,
@@ -466,6 +468,8 @@ describe('lobby', () => {
           .find('LobbyRoomInstance')
           .at(2)
           .find('button')
+
+          .first()
           .simulate('click');
         expect(spy).not.toHaveBeenCalledWith(expect.anything(), {
           gameID: 'gameID3',
@@ -495,6 +499,7 @@ describe('lobby', () => {
           .find('LobbyRoomInstance')
           .first()
           .find('button')
+          .first()
           .simulate('click');
         // exit game
         lobby

diff --git a/src/lobby/room-instance.js b/src/lobby/room-instance.js
@@ -26,62 +26,81 @@ class LobbyRoomInstance extends React.Component {
     return player.name || '[free]';
   };
 
+  _createButtonJoin = (inst, seatId) => (
+    <button
+      key={'button-join-' + inst.gameID}
+      onClick={() =>
+        this.props.onClickJoin(inst.gameName, inst.gameID, '' + seatId)
+      }
+    >
+      Join
+    </button>
+  );
+
+  _createButtonLeave = inst => (
+    <button
+      key={'button-leave-' + inst.gameID}
+      onClick={() => this.props.onClickLeave(inst.gameName, inst.gameID)}
+    >
+      Leave
+    </button>
+  );
+
+  _createButtonPlay = (inst, seatId) => (
+    <button
+      key={'button-play-' + inst.gameID}
+      onClick={() =>
+        this.props.onClickPlay(inst.gameName, {
+          gameID: inst.gameID,
+          playerID: '' + seatId,
+          numPlayers: inst.players.length,
+        })
+      }
+    >
+      Play
+    </button>
+  );
+
+  _createButtonSpectate = inst => (
+    <button
+      key={'button-spectate-' + inst.gameID}
+      onClick={() =>
+        this.props.onClickPlay(inst.gameName, {
+          gameID: inst.gameID,
+          numPlayers: inst.players.length,
+        })
+      }
+    >
+      Spectate
+    </button>
+  );
+
   _createInstanceButtons = inst => {
     const playerSeat = inst.players.find(
       player => player.name === this.props.playerName
     );
     const freeSeat = inst.players.find(player => !player.name);
     if (playerSeat && freeSeat) {
       // already seated: waiting for game to start
-      return (
-        <button
-          onClick={() => this.props.onClickLeave(inst.gameName, inst.gameID)}
-        >
-          Leave
-        </button>
-      );
+      return this._createButtonLeave(inst);
     }
     if (freeSeat) {
       // at least 1 seat is available
-      return (
-        <button
-          onClick={() =>
-            this.props.onClickJoin(inst.gameName, inst.gameID, '' + freeSeat.id)
-          }
-        >
-          Join
-        </button>
-      );
+      return this._createButtonJoin(inst, freeSeat.id);
     }
     // room is full
     if (playerSeat) {
       return (
-        <button
-          onClick={() =>
-            this.props.onClickPlay(inst.gameName, {
-              gameID: inst.gameID,
-              playerID: '' + playerSeat.id,
-              numPlayers: inst.players.length,
-            })
-          }
-        >
-          Play
-        </button>
+        <div>
+          {[
+            this._createButtonPlay(inst, playerSeat.id),
+            this._createButtonLeave(inst),
+          ]}
+        </div>
       );
     }
     // allow spectating
-    return (
-      <button
-        onClick={() =>
-          this.props.onClickPlay(inst.gameName, {
-            gameID: inst.gameID,
-            numPlayers: inst.players.length,
-          })
-        }
-      >
-        Spectate
-      </button>
-    );
+    return this._createButtonSpectate(inst);
   };
 
   render() {