part 2 - game lobby

Author: hiukim

imports/ui/App.jsx

@@ -1,22 +1,51 @@
 import React, { Component } from 'react';
 import { createContainer } from 'meteor/react-meteor-data';
 import Games from '../api/collections/games.js';
+import GameList from './GameList.jsx';
 import GameBoard from './GameBoard.jsx';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedGameId: null,
+    }
+  }
+
+  handleEnterGame(gameId) {
+    this.setState({selectedGameId: gameId});
+  }
+
+  handleBackToGameList() {
+    this.setState({selectedGameId: null});
+  }
+
+  selectedGame() {
+    let selectedGame = _.find(this.props.games, (game) => {
+      return game._id === this.state.selectedGameId;
+    });
+    return selectedGame;
+  }
+
   render() {
-    return (
-      <div>
-        {this.props.game?
-          <GameBoard game={this.props.game}/>
-        : null}
-      </div>
-    )
+    if (this.state.selectedGameId === null) {
+      return (
+        <GameList
+          games={this.props.games}
+          enterGameHandler={this.handleEnterGame.bind(this)}/>
+      )
+    } else {
+      return (
+        <GameBoard
+          game={this.selectedGame()}
+          backToGameListHandler={this.handleBackToGameList.bind(this)}/>
+      )
+    }
   }
 }
 
 export default createContainer(() => {
   return {
-    game: Games.findOne()
+    games: Games.find().fetch()
   };
 }, App);

imports/ui/GameBoard.jsx

@@ -22,6 +22,10 @@ export default class GameBoard extends Component {
     });
   }
 
+  handleBackToGameList() {
+    this.props.backToGameListHandler();
+  }
+
   renderCell(row, col) {
     let value = this.props.game.board[row][col];
     if (value === 0) return (<td>O</td>);
@@ -32,25 +36,28 @@ export default class GameBoard extends Component {
   }
   render() {
     return (
-      <table className="game-board">
-        <tbody>
-          <tr>
-            {this.renderCell(0, 0)}
-            {this.renderCell(0, 1)}
-            {this.renderCell(0, 2)}
-          </tr>
-          <tr>
-            {this.renderCell(1, 0)}
-            {this.renderCell(1, 1)}
-            {this.renderCell(1, 2)}
-          </tr>
-          <tr>
-            {this.renderCell(2, 0)}
-            {this.renderCell(2, 1)}
-            {this.renderCell(2, 2)}
-          </tr>
-        </tbody>
-      </table>
+      <div>
+        <button onClick={this.handleBackToGameList.bind(this)}>Back</button>
+        <table className="game-board">
+          <tbody>
+            <tr>
+              {this.renderCell(0, 0)}
+              {this.renderCell(0, 1)}
+              {this.renderCell(0, 2)}
+            </tr>
+            <tr>
+              {this.renderCell(1, 0)}
+              {this.renderCell(1, 1)}
+              {this.renderCell(1, 2)}
+            </tr>
+            <tr>
+              {this.renderCell(2, 0)}
+              {this.renderCell(2, 1)}
+              {this.renderCell(2, 2)}
+            </tr>
+          </tbody>
+        </table>
+      </div>
     )
   }
 }

imports/ui/GameList.jsx

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import Games from '../api/collections/games.js';
+
+export default class GameList extends Component {
+  handleNewGame() {
+    let gameDoc = {
+      board: [[null, null, null], [null, null, null], [null, null, null]]
+    };
+    Games.insert(gameDoc); // insert a new game document into the collection
+  }
+
+handleEnterGame(gameId) {
+    this.props.enterGameHandler(gameId);
+  }
+
+render() {
+    return (
+    <div>
+      <div>
+        <button onClick={this.handleNewGame.bind(this)}>New Game</button>
+      </div>
+
+<div>
+        <h1>List of games</h1>
+        {this.props.games.map((game, index) => {
+          return (
+            <div key={game._id}>
+              <span>Game {index+1}</span>
+              <button onClick={this.handleEnterGame.bind(this, game._id)}>Enter</button>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+    )
+  }
+}

server/main.js

@@ -1,14 +1,5 @@
-import { Meteor } from 'meteor/meteor';
+import {Meteor} from 'meteor/meteor';
 import Games from '../imports/api/collections/games.js'; // import Games collection
 
 Meteor.startup(() => {
-  // code to run on server at startup
-
-  Games.remove({});  // remove all existing game documents
-
-  let gameDoc = {
-    board: [[null, null, null], [null, null, null], [null, null, null]]
-  };
-
-  Games.insert(gameDoc); // insert a new game document into the collection
 });