@mnbroatch/boardgame.io 0.0.1

package/src/lobby/connection.ts

@@ -0,0 +1,162 @@
+/*
+ * Copyright 2018 The boardgame.io Authors
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import type { ComponentType } from 'react';
+import { LobbyClient } from './client';
+import type { Game, LobbyAPI } from '../types';
+
+export interface GameComponent {
+  game: Game;
+  board: ComponentType<any>;
+}
+
+interface LobbyConnectionOpts {
+  server: string;
+  playerName?: string;
+  playerCredentials?: string;
+  gameComponents: GameComponent[];
+}
+
+class _LobbyConnectionImpl {
+  client: LobbyClient;
+  gameComponents: GameComponent[];
+  playerName: string;
+  playerCredentials?: string;
+  matches: LobbyAPI.MatchList['matches'];
+
+  constructor({
+    server,
+    gameComponents,
+    playerName,
+    playerCredentials,
+  }: LobbyConnectionOpts) {
+    this.client = new LobbyClient({ server });
+    this.gameComponents = gameComponents;
+    this.playerName = playerName || 'Visitor';
+    this.playerCredentials = playerCredentials;
+    this.matches = [];
+  }
+
+  async refresh() {
+    try {
+      this.matches = [];
+      const games = await this.client.listGames();
+      for (const game of games) {
+        if (!this._getGameComponents(game)) continue;
+        const { matches } = await this.client.listMatches(game);
+        this.matches.push(...matches);
+      }
+    } catch (error) {
+      throw new Error('failed to retrieve list of matches (' + error + ')');
+    }
+  }
+
+  _getMatchInstance(matchID: string) {
+    for (const inst of this.matches) {
+      if (inst['matchID'] === matchID) return inst;
+    }
+  }
+
+  _getGameComponents(gameName: string) {
+    for (const comp of this.gameComponents) {
+      if (comp.game.name === gameName) return comp;
+    }
+  }
+
+  _findPlayer(playerName: string) {
+    for (const inst of this.matches) {
+      if (inst.players.some((player) => player.name === playerName))
+        return inst;
+    }
+  }
+
+  async join(gameName: string, matchID: string, playerID: string) {
+    try {
+      let inst = this._findPlayer(this.playerName);
+      if (inst) {
+        throw new Error('player has already joined ' + inst.matchID);
+      }
+      inst = this._getMatchInstance(matchID);
+      if (!inst) {
+        throw new Error('game instance ' + matchID + ' not found');
+      }
+      const json = await this.client.joinMatch(gameName, matchID, {
+        playerID,
+        playerName: this.playerName,
+      });
+      inst.players[Number.parseInt(playerID)].name = this.playerName;
+      this.playerCredentials = json.playerCredentials;
+    } catch (error) {
+      throw new Error('failed to join match ' + matchID + ' (' + error + ')');
+    }
+  }
+
+  async leave(gameName: string, matchID: string) {
+    try {
+      const inst = this._getMatchInstance(matchID);
+      if (!inst) throw new Error('match instance not found');
+      for (const player of inst.players) {
+        if (player.name === this.playerName) {
+          await this.client.leaveMatch(gameName, matchID, {
+            playerID: player.id.toString(),
+            credentials: this.playerCredentials,
+          });
+          delete player.name;
+          delete this.playerCredentials;
+          return;
+        }
+      }
+      throw new Error('player not found in match');
+    } catch (error) {
+      throw new Error('failed to leave match ' + matchID + ' (' + error + ')');
+    }
+  }
+
+  async disconnect() {
+    const inst = this._findPlayer(this.playerName);
+    if (inst) {
+      await this.leave(inst.gameName, inst.matchID);
+    }
+    this.matches = [];
+    this.playerName = 'Visitor';
+  }
+
+  async create(gameName: string, numPlayers: number) {
+    try {
+      const comp = this._getGameComponents(gameName);
+      if (!comp) throw new Error('game not found');
+      if (
+        numPlayers < comp.game.minPlayers ||
+        numPlayers > comp.game.maxPlayers
+      )
+        throw new Error('invalid number of players ' + numPlayers);
+      await this.client.createMatch(gameName, { numPlayers });
+    } catch (error) {
+      throw new Error(
+        'failed to create match for ' + gameName + ' (' + error + ')'
+      );
+    }
+  }
+}
+
+/**
+ * LobbyConnection
+ *
+ * Lobby model.
+ *
+ * @param {string}   server - '<host>:<port>' of the server.
+ * @param {Array}    gameComponents - A map of Board and Game objects for the supported games.
+ * @param {string}   playerName - The name of the player.
+ * @param {string}   playerCredentials - The credentials currently used by the player, if any.
+ *
+ * Returns:
+ *   A JS object that synchronizes the list of running game instances with the server and provides an API to create/join/start instances.
+ */
+export function LobbyConnection(opts: LobbyConnectionOpts) {
+  return new _LobbyConnectionImpl(opts);
+}

package/src/lobby/create-match-form.tsx

@@ -0,0 +1,122 @@
+/*
+ * Copyright 2018 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import type { Game } from '../types';
+import type { GameComponent } from './connection';
+
+type CreateMatchProps = {
+  games: GameComponent[];
+  createMatch: (gameName: string, numPlayers: number) => Promise<void>;
+};
+
+type CreateMatchState = {
+  selectedGame: number;
+  numPlayers: number;
+};
+
+class LobbyCreateMatchForm extends React.Component<
+  CreateMatchProps,
+  CreateMatchState
+> {
+  state = {
+    selectedGame: 0,
+    numPlayers: 2,
+  };
+
+  constructor(props: CreateMatchProps) {
+    super(props);
+    /* fix min and max number of players */
+    for (const game of props.games) {
+      const matchDetails = game.game;
+      if (!matchDetails.minPlayers) {
+        matchDetails.minPlayers = 1;
+      }
+      if (!matchDetails.maxPlayers) {
+        matchDetails.maxPlayers = 4;
+      }
+      console.assert(matchDetails.maxPlayers >= matchDetails.minPlayers);
+    }
+    this.state = {
+      selectedGame: 0,
+      numPlayers: props.games[0].game.minPlayers,
+    };
+  }
+
+  _createGameNameOption = (game: GameComponent, idx: number) => {
+    return (
+      <option key={'name-option-' + idx} value={idx}>
+        {game.game.name}
+      </option>
+    );
+  };
+
+  _createNumPlayersOption = (idx: number) => {
+    return (
+      <option key={'num-option-' + idx} value={idx}>
+        {idx}
+      </option>
+    );
+  };
+
+  _createNumPlayersRange = (game: Game) => {
+    return Array.from({ length: game.maxPlayers + 1 })
+      .map((_, i) => i)
+      .slice(game.minPlayers);
+  };
+
+  render() {
+    return (
+      <div>
+        <select
+          value={this.state.selectedGame}
+          onChange={(evt) => this.onChangeSelectedGame(evt)}
+        >
+          {this.props.games.map((game, index) =>
+            this._createGameNameOption(game, index)
+          )}
+        </select>
+        <span>Players:</span>
+        <select
+          value={this.state.numPlayers}
+          onChange={this.onChangeNumPlayers}
+        >
+          {this._createNumPlayersRange(
+            this.props.games[this.state.selectedGame].game
+          ).map((number) => this._createNumPlayersOption(number))}
+        </select>
+        <span className="buttons">
+          <button onClick={this.onClickCreate}>Create</button>
+        </span>
+      </div>
+    );
+  }
+
+  onChangeNumPlayers = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    this.setState({
+      numPlayers: Number.parseInt(event.target.value),
+    });
+  };
+
+  onChangeSelectedGame = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const idx = Number.parseInt(event.target.value);
+    this.setState({
+      selectedGame: idx,
+      numPlayers: this.props.games[idx].game.minPlayers,
+    });
+  };
+
+  onClickCreate = () => {
+    this.props.createMatch(
+      this.props.games[this.state.selectedGame].game.name,
+      this.state.numPlayers
+    );
+  };
+}
+
+export default LobbyCreateMatchForm;

package/src/lobby/login-form.tsx

@@ -0,0 +1,75 @@
+/*
+ * Copyright 2018 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+
+type LoginFormProps = {
+  playerName?: string;
+  onEnter: (playerName: string) => void;
+};
+
+type LoginFormState = {
+  playerName?: string;
+  nameErrorMsg: string;
+};
+
+class LobbyLoginForm extends React.Component<LoginFormProps, LoginFormState> {
+  static defaultProps = {
+    playerName: '',
+  };
+
+  state = {
+    playerName: this.props.playerName,
+    nameErrorMsg: '',
+  };
+
+  render() {
+    return (
+      <div>
+        <p className="phase-title">Choose a player name:</p>
+        <input
+          type="text"
+          value={this.state.playerName}
+          onChange={this.onChangePlayerName}
+          onKeyPress={this.onKeyPress}
+        />
+        <span className="buttons">
+          <button className="buttons" onClick={this.onClickEnter}>
+            Enter
+          </button>
+        </span>
+        <br />
+        <span className="error-msg">
+          {this.state.nameErrorMsg}
+          <br />
+        </span>
+      </div>
+    );
+  }
+
+  onClickEnter = () => {
+    if (this.state.playerName === '') return;
+    this.props.onEnter(this.state.playerName);
+  };
+
+  onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      this.onClickEnter();
+    }
+  };
+
+  onChangePlayerName = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const name = event.target.value.trim();
+    this.setState({
+      playerName: name,
+      nameErrorMsg: name.length > 0 ? '' : 'empty player name',
+    });
+  };
+}
+
+export default LobbyLoginForm;

package/src/lobby/match-instance.tsx

@@ -0,0 +1,135 @@
+/*
+ * Copyright 2018 The boardgame.io Authors.
+ *
+ * Use of this source code is governed by a MIT-style
+ * license that can be found in the LICENSE file or at
+ * https://opensource.org/licenses/MIT.
+ */
+
+import React from 'react';
+import type { LobbyAPI } from '../types';
+
+export type MatchOpts = {
+  numPlayers: number;
+  matchID: string;
+  playerID?: string;
+};
+
+type Match = {
+  gameName: string;
+  matchID: string;
+  players: LobbyAPI.Match['players'];
+};
+
+type MatchInstanceProps = {
+  match: Match;
+  playerName: string;
+  onClickJoin: (gameName: string, matchID: string, playerID: string) => void;
+  onClickLeave: (gameName: string, matchID: string) => void;
+  onClickPlay: (gameName: string, matchOpts: MatchOpts) => void;
+};
+
+class LobbyMatchInstance extends React.Component<MatchInstanceProps> {
+  _createSeat = (player: { name?: string }) => {
+    return player.name || '[free]';
+  };
+
+  _createButtonJoin = (inst: Match, seatId: number) => (
+    <button
+      key={'button-join-' + inst.matchID}
+      onClick={() =>
+        this.props.onClickJoin(inst.gameName, inst.matchID, '' + seatId)
+      }
+    >
+      Join
+    </button>
+  );
+
+  _createButtonLeave = (inst: Match) => (
+    <button
+      key={'button-leave-' + inst.matchID}
+      onClick={() => this.props.onClickLeave(inst.gameName, inst.matchID)}
+    >
+      Leave
+    </button>
+  );
+
+  _createButtonPlay = (inst: Match, seatId: number) => (
+    <button
+      key={'button-play-' + inst.matchID}
+      onClick={() =>
+        this.props.onClickPlay(inst.gameName, {
+          matchID: inst.matchID,
+          playerID: '' + seatId,
+          numPlayers: inst.players.length,
+        })
+      }
+    >
+      Play
+    </button>
+  );
+
+  _createButtonSpectate = (inst: Match) => (
+    <button
+      key={'button-spectate-' + inst.matchID}
+      onClick={() =>
+        this.props.onClickPlay(inst.gameName, {
+          matchID: inst.matchID,
+          numPlayers: inst.players.length,
+        })
+      }
+    >
+      Spectate
+    </button>
+  );
+
+  _createInstanceButtons = (inst: Match) => {
+    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 match to start
+      return this._createButtonLeave(inst);
+    }
+    if (freeSeat) {
+      // at least 1 seat is available
+      return this._createButtonJoin(inst, freeSeat.id);
+    }
+    // match is full
+    if (playerSeat) {
+      return (
+        <div>
+          {[
+            this._createButtonPlay(inst, playerSeat.id),
+            this._createButtonLeave(inst),
+          ]}
+        </div>
+      );
+    }
+    // allow spectating
+    return this._createButtonSpectate(inst);
+  };
+
+  render() {
+    const match = this.props.match;
+    let status = 'OPEN';
+    if (!match.players.some((player) => !player.name)) {
+      status = 'RUNNING';
+    }
+    return (
+      <tr key={'line-' + match.matchID}>
+        <td key={'cell-name-' + match.matchID}>{match.gameName}</td>
+        <td key={'cell-status-' + match.matchID}>{status}</td>
+        <td key={'cell-seats-' + match.matchID}>
+          {match.players.map((player) => this._createSeat(player)).join(', ')}
+        </td>
+        <td key={'cell-buttons-' + match.matchID}>
+          {this._createInstanceButtons(match)}
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default LobbyMatchInstance;

package/src/lobby/react.ssr.test.tsx

@@ -0,0 +1,22 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react';
+import Lobby from './react';
+import ReactDOMServer from 'react-dom/server';
+
+/* mock server requests */
+global.fetch = jest
+  .fn()
+  .mockReturnValue({ ok: true, status: 200, json: () => [] });
+
+describe('lobby', () => {
+  test('is rendered', () => {
+    const components: any[] = [{ board: 'Board', game: { name: 'GameName' } }];
+    const ssrRender = ReactDOMServer.renderToString(
+      <Lobby gameServer="localhost" gameComponents={components} />
+    );
+    expect(ssrRender).toContain('lobby-view');
+  });
+});