part 4 - account system

Author: hiukim

.meteor/packages

@@ -20,3 +20,4 @@ [email protected]              # Enable ECMAScript2015+ syntax in app code
 [email protected]             # Publish all data to the clients (for prototyping)
 [email protected]                # Allow all DB writes from clients (for prototyping)
 react-meteor-data
+accounts-password

.meteor/versions

@@ -1,3 +1,5 @@
+[email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -16,12 +18,14 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -34,6 +38,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
@@ -46,18 +51,23 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]_1
 [email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
 [email protected]
+[email protected]
+[email protected]
 [email protected]
 [email protected]
+[email protected]
 [email protected]
 [email protected]
 [email protected]

imports/api/collections/games.js

@@ -1,3 +1,39 @@
 import { Mongo } from 'meteor/mongo';
 
 export default Games = new Mongo.Collection('games');
+
+_.extend(Games, {
+  newGame() {
+    let gameDoc = {
+      board: [[null, null, null], [null, null, null], [null, null, null]],
+      players: []
+    };
+    let gameId = Games.insert(gameDoc); // insert a new game document into the collection
+    return gameId;
+  },
+
+  joinGame(gameId, user) {
+    console.log("gameId; ", gameId, user);
+    let game = Games.findOne(gameId);
+    if (game.players.length === 2) {
+      throw "game is full";
+    }
+    game.players.push({
+      userId: user._id,
+      username: user.username
+    });
+    Games.update(game._id, {
+      $set: {players: game.players}
+    });
+  },
+
+  leaveGame(gameId, user) {
+    let game = Games.findOne(gameId);
+    game.players = _.reject(game.players, (player) => {
+      return player.userId === user._id;
+    });
+    Games.update(game._id, {
+      $set: {players: game.players}
+    });
+  }
+});

imports/ui/App.jsx

@@ -3,6 +3,7 @@ import { createContainer } from 'meteor/react-meteor-data';
 import Games from '../api/collections/games.js';
 import GameList from './GameList.jsx';
 import GameBoard from './GameBoard.jsx';
+import LoginForm from './LoginForm.jsx';
 
 class App extends Component {
   constructor(props) {
@@ -12,40 +13,51 @@ class App extends Component {
     }
   }
 
-  handleEnterGame(gameId) {
+handleEnterGame(gameId) {
     this.setState({selectedGameId: gameId});
   }
 
-  handleBackToGameList() {
+handleBackToGameList() {
     this.setState({selectedGameId: null});
   }
 
-  selectedGame() {
+selectedGame() {
     let selectedGame = _.find(this.props.games, (game) => {
       return game._id === this.state.selectedGameId;
     });
     return selectedGame;
   }
 
-  render() {
-    if (this.state.selectedGameId === null) {
+render() {
+    if (!this.props.user) {
+      return (
+        <div>
+          <LoginForm/>
+        </div>
+      )
+    }
+
+if (this.state.selectedGameId === null) {
       return (
         <GameList
           games={this.props.games}
-          enterGameHandler={this.handleEnterGame.bind(this)}/>
+          enterGameHandler={this.handleEnterGame.bind(this)}
+          user={this.props.user}/>
       )
     } else {
       return (
         <GameBoard
           game={this.selectedGame()}
-          backToGameListHandler={this.handleBackToGameList.bind(this)}/>
+          backToGameListHandler={this.handleBackToGameList.bind(this)}
+          user={this.props.user}/>
       )
     }
   }
 }
 
 export default createContainer(() => {
   return {
+    user: Meteor.user(),
     games: Games.find().fetch()
   };
 }, App);

imports/ui/GameBoard.jsx

@@ -16,6 +16,9 @@ export default class GameBoard extends Component {
   handleCellClick(row, col) {
     let currentPlayer = this.currentPlayer();
     let game = this.props.game;
+
+    if (game.players[currentPlayer].userId !== this.props.user._id) return;
+
     game.board[row][col] = currentPlayer;
     Games.update(game._id, {
       $set: {board: game.board}

imports/ui/GameList.jsx

@@ -3,34 +3,76 @@ 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
+    Games.newGame(this.props.user);
+  }
+
+handleLeaveGame(gameId) {
+    Games.leaveGame(gameId, this.props.user);
+  }
+
+handleJoinGame(gameId) {
+    Games.joinGame(gameId, this.props.user);
   }
 
 handleEnterGame(gameId) {
     this.props.enterGameHandler(gameId);
   }
 
+myCurrentGameId() {
+    // find game where the user is currently in
+    let game = _.find(this.props.games, (game) => {
+      return _.find(game.players, (player) => {
+        return player.userId === this.props.user._id;
+      }) !== undefined;
+    });
+    if (game === undefined) return null;
+    return game._id;
+  }
+
+renderPlayers(game) {
+    let player1 = game.players.length > 0? game.players[0].username: '';
+    let player2 = game.players.length > 1? game.players[1].username: '';
+    return (
+      <span>[{player1}] vs [{player2}]</span>
+    )
+  }
+
 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>
+              {this.renderPlayers(game)}
+
+{/* can leave only if user is in the game, and the game is not started */}
+              {this.myCurrentGameId() === game._id && game.players.length < 2? (
+                <button onClick={this.handleLeaveGame.bind(this, game._id)}>Leave</button>
+              ): null}
+
+{/* can join only if user is not in any game, and the game is not started */}
+              {this.myCurrentGameId() === null && game.players.length < 2? (
+                <button onClick={this.handleJoinGame.bind(this, game._id)}>Join</button>
+              ): null}
+
+{/* can enter only if the game is started */}
+              {game.players.length === 2? (
+                <button onClick={this.handleEnterGame.bind(this, game._id)}>Enter</button>
+              ): null}
             </div>
           )
         })}
       </div>
+
+{/* Only show new game button if player is not in any room */}
+      {this.myCurrentGameId() === null? (
+        <div>
+          <button onClick={this.handleNewGame.bind(this)}>New Game</button>
+        </div>
+      ): null}
     </div>
     )
   }

imports/ui/LoginForm.jsx

@@ -0,0 +1,36 @@
+import { Random } from 'meteor/random'
+import React, { Component } from 'react';
+
+export default class LoginForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+    }
+  }
+
+  handleUsernameChange(e) {
+    this.setState({username: e.target.value});
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+
+  let username = this.state.username.trim();
+    if (username === '') return;
+    Accounts.createUser({
+      username: username,
+      password: Random.secret()
+    });
+  }
+
+  render() {
+    return (
+      <form name="login-form" onSubmit={this.handleSubmit.bind(this)}>
+        <h1>Login</h1>
+        <input type="text" onChange={this.handleUsernameChange.bind(this)} placeholder="Enter your name"/>
+        <input type="submit" value="Login"/>
+      </form>
+    )
+  }
+}