Add custom renderer parameter to lobby + clean up code (#353)

Author: lehaSVV2009

src/lobby/connection.js

@@ -24,7 +24,7 @@ class _LobbyConnectionImpl {
       this.gameInstances.length = 0;
       const resp = await fetch(this._baseUrl());
       if (resp.status !== 200) {
-        throw 'HTTP status ' + resp.status;
+        throw new Error('HTTP status ' + resp.status);
       }
       const json = await resp.json();
       for (let gameName of json) {
@@ -49,7 +49,7 @@ class _LobbyConnectionImpl {
 
   _getGameComponents(gameName) {
     for (let comp of this.gameComponents) {
-      if (comp.game.name == gameName) return comp;
+      if (comp.game.name === gameName) return comp;
     }
   }
 
@@ -63,11 +63,11 @@ class _LobbyConnectionImpl {
     try {
       let inst = this._findPlayer(this.playerName);
       if (inst) {
-        throw 'player has already joined ' + inst.gameID;
+        throw new Error('player has already joined ' + inst.gameID);
       }
       inst = this._getGameInstance(gameID);
       if (!inst) {
-        throw 'game instance ' + gameID + ' not found';
+        throw new Error('game instance ' + gameID + ' not found');
       }
       const resp = await fetch(
         this._baseUrl() + '/' + gameName + '/' + gameID + '/join',
@@ -80,7 +80,7 @@ class _LobbyConnectionImpl {
           headers: { 'Content-Type': 'application/json' },
         }
       );
-      if (resp.status !== 200) throw 'HTTP status ' + resp.status;
+      if (resp.status !== 200) throw new Error('HTTP status ' + resp.status);
       const json = await resp.json();
       inst.players[Number.parseInt(playerID)].name = this.playerName;
       this.playerCredentials = json.playerCredentials;
@@ -92,7 +92,7 @@ class _LobbyConnectionImpl {
   async leave(gameName, gameID) {
     try {
       let inst = this._getGameInstance(gameID);
-      if (!inst) throw 'game instance not found';
+      if (!inst) throw new Error('game instance not found');
       for (let player of inst.players) {
         if (player.name === this.playerName) {
           const resp = await fetch(
@@ -106,13 +106,15 @@ class _LobbyConnectionImpl {
               headers: { 'Content-Type': 'application/json' },
             }
           );
-          if (resp.status !== 200) throw 'HTTP status ' + resp.status;
+          if (resp.status !== 200) {
+            throw new Error('HTTP status ' + resp.status);
+          }
           delete player.name;
           delete this.playerCredentials;
           return;
         }
       }
-      throw 'player not found in room';
+      throw new Error('player not found in room');
     } catch (error) {
       throw new Error('failed to leave room ' + gameID + ' (' + error + ')');
     }
@@ -130,20 +132,20 @@ class _LobbyConnectionImpl {
   async create(gameName, numPlayers) {
     try {
       const comp = this._getGameComponents(gameName);
-      if (!comp) throw 'game not found';
+      if (!comp) throw new Error('game not found');
       if (
         numPlayers < comp.game.minPlayers ||
         numPlayers > comp.game.maxPlayers
       )
-        throw 'invalid number of players ' + numPlayers;
+        throw new Error('invalid number of players ' + numPlayers);
       const resp = await fetch(this._baseUrl() + '/' + gameName + '/create', {
         method: 'POST',
         body: JSON.stringify({
           numPlayers: numPlayers,
         }),
         headers: { 'Content-Type': 'application/json' },
       });
-      if (resp.status !== 200) throw 'HTTP status ' + resp.status;
+      if (resp.status !== 200) throw new Error('HTTP status ' + resp.status);
     } catch (error) {
       throw new Error(
         'failed to create room for ' + gameName + ' (' + error + ')'

src/lobby/create-room-form.js

@@ -20,23 +20,23 @@ class LobbyCreateRoomForm extends React.Component {
     numPlayers: 2,
   };
 
-  _createGameNameOption(game, idx) {
+  _createGameNameOption = (game, idx) => {
     return (
       <option key={'name-option-' + idx} value={idx}>
         {game.game.name}
       </option>
     );
-  }
+  };
 
-  _createNumPlayersOption(idx) {
+  _createNumPlayersOption = idx => {
     return (
       <option key={'num-option-' + idx} value={idx}>
         {idx}
       </option>
     );
-  }
+  };
 
-  _createNumPlayersRange(game) {
+  _createNumPlayersRange = game => {
     if (!game.minPlayers) {
       game.minPlayers = 1;
     }
@@ -45,7 +45,7 @@ class LobbyCreateRoomForm extends React.Component {
     }
     console.assert(game.maxPlayers >= game.minPlayers);
     return [...new Array(game.maxPlayers + 1).keys()].slice(game.minPlayers);
-  }
+  };
 
   render() {
     return (
@@ -59,39 +59,39 @@ class LobbyCreateRoomForm extends React.Component {
         <span>Players:</span>
         <select
           value={this.state.numPlayers}
-          onChange={evt => this.onChangeNumPlayers(evt)}
+          onChange={this.onChangeNumPlayers}
         >
           {this._createNumPlayersRange(
             this.props.games[this.state.selectedGame].game
           ).map(this._createNumPlayersOption)}
         </select>
         <span className="buttons">
-          <button onClick={() => this.onClickCreate()}>Create</button>
+          <button onClick={this.onClickCreate}>Create</button>
         </span>
       </div>
     );
   }
 
-  onChangeNumPlayers(event) {
+  onChangeNumPlayers = event => {
     this.setState({
       numPlayers: Number.parseInt(event.target.value),
     });
-  }
+  };
 
-  onChangeSelectedGame(event) {
+  onChangeSelectedGame = event => {
     let idx = Number.parseInt(event.target.value);
     this.setState({
       selectedGame: idx,
       numPlayers: this._createNumPlayersRange(this.props.games[idx].game)[0],
     });
-  }
+  };
 
-  onClickCreate() {
+  onClickCreate = () => {
     this.props.createGame(
       this.props.games[this.state.selectedGame].game.name,
       this.state.numPlayers
     );
-  }
+  };
 }
 
 export default LobbyCreateRoomForm;

src/lobby/login-form.js

@@ -30,11 +30,11 @@ class LobbyLoginForm extends React.Component {
         <input
           type="text"
           value={this.state.playerName}
-          onChange={evt => this.onChangePlayerName(evt)}
-          onKeyPress={evt => this.onKeyPress(evt)}
+          onChange={this.onChangePlayerName}
+          onKeyPress={this.onKeyPress}
         />
         <span className="buttons">
-          <button className="buttons" onClick={() => this.onClickEnter()}>
+          <button className="buttons" onClick={this.onClickEnter}>
             Enter
           </button>
         </span>
@@ -47,24 +47,24 @@ class LobbyLoginForm extends React.Component {
     );
   }
 
-  onClickEnter() {
+  onClickEnter = () => {
     if (this.state.playerName === '') return;
     this.props.onEnter(this.state.playerName);
-  }
+  };
 
-  onKeyPress(event) {
+  onKeyPress = event => {
     if (event.key === 'Enter') {
       this.onClickEnter();
     }
-  }
+  };
 
-  onChangePlayerName(event) {
+  onChangePlayerName = event => {
     const name = event.target.value.trim();
     this.setState({
       playerName: name,
       nameErrorMsg: name.length > 0 ? '' : 'empty player name',
     });
-  }
+  };
 }
 
 export default LobbyLoginForm;