part 7 - wrapping up

Author: hiukim

.gitignore

@@ -1 +1,2 @@
-node_modules/
+node_modules/
+.DS_Store

.meteor/packages

@@ -21,3 +21,5 @@ react-meteor-data
 accounts-password
 aldeed:simple-schema
 mdg:validated-method
+semantic:ui-css
+fourseven:scss

.meteor/versions

@@ -28,6 +28,7 @@ ejson@1.0.12
 email@1.1.16
 es5-shim@4.6.13
 fastclick@1.0.12
+fourseven:scss@3.8.1
 geojson-utils@1.0.9
 hot-code-push@1.0.4
 html-tools@1.0.10
@@ -64,6 +65,7 @@ reactive-var@1.0.10
 reload@1.1.10
 retry@1.0.8
 routepolicy@1.0.11
+semantic:ui-css@2.1.2
 service-configuration@1.0.10
 sha@1.0.8
 spacebars@1.0.12

client/main.css

@@ -0,0 +1,11 @@
+table.game-board {
+  margin: auto;
+
+  tr td {
+    border: 1px solid black;
+    width: 80px;
+    height: 80px;
+    font-size: 80px;
+    text-align: center;
+  }
+}

client/main.scss

@@ -13,22 +13,22 @@ 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() {
+  render() {
     if (!this.props.user) {
       return (
         <div>
@@ -37,7 +37,7 @@ render() {
       )
     }
 
-if (this.state.selectedGameId === null) {
+    if (this.state.selectedGameId === null) {
       return (
         <GameList
           games={this.props.games}

imports/ui/App.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {GamesController} from '../api/controllers/gamesController.js';
+import GameHeader from './GameHeader.jsx';
 import {Game, GameStatuses} from '../api/models/game.js';
 import {userMarkGame} from '../api/methods/games.js';
 
@@ -10,11 +10,11 @@ export default class GameBoard extends Component {
     userMarkGame.call({gameId: game._id, row: row, col: col});
   }
 
-handleBackToGameList() {
+  handleBackToGameList() {
     this.props.backToGameListHandler();
   }
 
-renderCell(row, col) {
+  renderCell(row, col) {
     let value = this.props.game.board[row][col];
     if (value === 0) return (<td>O</td>);
     if (value === 1) return (<td>X</td>);
@@ -23,12 +23,12 @@ renderCell(row, col) {
     );
   }
 
-renderStatus() {
+  renderStatus() {
     let game = this.props.game;
     let status = "";
     if (game.status === GameStatuses.STARTED) {
       let playerIndex = game.currentPlayerIndex();
-      status = `In Progress: current player: ${game.players[playerIndex].username}`;
+      status = `Current player: ${game.players[playerIndex].username}`;
     } else if (game.status === GameStatuses.FINISHED) {
       let playerIndex = game.winner();
       if (playerIndex === null) {
@@ -38,35 +38,58 @@ renderStatus() {
       }
     }
 
-return (
+    return (
       <div>{status}</div>
     )
   }
 
-render() {
+  render() {
     return (
-      <div>
-        <button onClick={this.handleBackToGameList.bind(this)}>Back</button>
-        {this.renderStatus()}
-        <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 className="ui container">
+        <GameHeader user={this.props.user}/>
+
+        <button className="ui button blue" onClick={this.handleBackToGameList.bind(this)}>Back to Lobby</button>
+
+        <div className="ui top attached header">
+          <div className="ui grid">
+            <div className="ui three column center aligned row">
+              <div className="ui column">
+                {this.props.game.players[0].username} <br/>O
+              </div>
+              <div className="ui column">
+                v.s.
+              </div>
+              <div className="ui column">
+                {this.props.game.players[1].username} <br/>X
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="ui attached center aligned segment">
+          {this.renderStatus()}
+        </div>
+
+        <div className="ui attached segment">
+          <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>
       </div>
     )
   }

imports/ui/GameBoard.jsx

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+
+export default class GameBoard extends Component {
+  handleLogout() {
+    Meteor.logout();
+  }
+  render() {
+    return (
+      <div className="ui menu inverted">
+        <div className="header item">
+          Online Tic-Tac-Toe
+        </div>
+
+        {this.props.user? (
+          <div className="right menu">
+            <div className="item">
+              <i className="meh icon"/>
+              {this.props.user.username}
+            </div>
+            <a className="item" onClick={this.handleLogout.bind(this)}>
+              Logout
+            </a>
+          </div>
+        ): null}
+      </div>
+    )
+  }
+}

imports/ui/GameHeader.jsx

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import {GamesController} from '../api/controllers/gamesController.js';
+import GameHeader from './GameHeader.jsx';
 import {Game, GameStatuses} from '../api/models/game.js';
 import {newGame, userJoinGame, userLeaveGame} from '../api/methods/games.js';
 
@@ -12,71 +12,100 @@ export default class GameList extends Component {
     userLeaveGame.call({gameId: gameId});
   }
 
-handleJoinGame(gameId) {
+  handleJoinGame(gameId) {
     userJoinGame.call({gameId: gameId});
   }
 
-handleEnterGame(gameId) {
+  handleEnterGame(gameId) {
     this.props.enterGameHandler(gameId);
   }
 
-activeGames() {
+  activeGames() {
     return _.filter(this.props.games, (game) => {
       return game.status === GameStatuses.WAITING || game.status === GameStatuses.STARTED;
     });
   }
 
-myCurrentGameId() {
+  myCurrentGameId() {
     let game = _.find(this.activeGames(), (game) => {
       return game.userIndex(this.props.user) !== null;
     });
     return game === undefined? null: game._id;
   }
 
-renderPlayers(game) {
-    let player1 = game.players.length > 0? game.players[0].username: '';
-    let player2 = game.players.length > 1? game.players[1].username: '';
+  renderPlayers(game) {
+    let player1 = game.players.length > 0? game.players[0].username: '(waiting)';
+    let player2 = game.players.length > 1? game.players[1].username: '(waiting)';
     return (
-      <span>[{player1}] vs [{player2}]</span>
+      <div>
+        <div>
+          <i className="user icon"></i> {player1}
+        </div>
+        <div>
+          <i className="user icon"></i> {player2}
+        </div>
+      </div>
     )
   }
 
-render() {
+  render() {
     return (
-    <div>
-      <div>
-        <h1>List of games</h1>
-        {this.activeGames().map((game, index) => {
-          return (
-            <div key={game._id}>
-              <span>Game {index+1}</span>
-              {this.renderPlayers(game)}
+    <div className="ui container">
+      <GameHeader user={this.props.user}/>
 
-{/* can leave only if user is in the game, and the game is not started */}
-              {this.myCurrentGameId() === game._id && game.status === GameStatuses.WAITING? (
-                <button onClick={this.handleLeaveGame.bind(this, game._id)}>Leave</button>
-              ): null}
+      <h1 className="ui top attached header">List of games</h1>
+      <div className="ui attached segment">
+        <div className="ui three cards">
+          {this.activeGames().map((game, index) => {
+            return (
+              <div key={game._id} className="ui card">
+                <div className="content">
+                  <div className="header">
+                    {game.status === GameStatuses.WAITING? (
+                      <span className="ui right yellow corner label">
+                        <i className="idea icon"/>
+                      </span>
+                    ): null}
+                    Game {index+1}
+                  </div>
+                </div>
+                <div className="content">
+                  {this.renderPlayers(game)}
+                </div>
 
-{/* can join only if user is not in any game, and the game is not started */}
-              {this.myCurrentGameId() === null && game.status === GameStatuses.WAITING? (
-                <button onClick={this.handleJoinGame.bind(this, game._id)}>Join</button>
-              ): null}
+                <div className="extra content">
+                  {/* can leave only if user is in the game, and the game is not started */}
+                  {this.myCurrentGameId() === game._id && game.status === GameStatuses.WAITING? (
+                    <button className="ui red button" onClick={this.handleLeaveGame.bind(this, game._id)}>Leave</button>
+                  ): null}
 
-{/* can enter only if the game is started */}
-              {game.status === GameStatuses.STARTED? (
-                <button onClick={this.handleEnterGame.bind(this, game._id)}>Enter</button>
-              ): null}
-            </div>
-          )
-        })}
-      </div>
+                  {/* can join only if user is not in any game, and the game is not started */}
+                  {this.myCurrentGameId() === null && game.status === GameStatuses.WAITING? (
+                    <button className="ui green button" onClick={this.handleJoinGame.bind(this, game._id)}>Join</button>
+                  ): null}
 
-{/* 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>
+                  {/* can enter only if the game is started */}
+                  {game.status === GameStatuses.STARTED? (
+                    <button className="ui blue button" onClick={this.handleEnterGame.bind(this, game._id)}>Enter</button>
+                  ): null}
+
+                  {/* just a invisible dummy button to make up the space */}
+                  <button className="ui button" style={{visibility: "hidden"}}>Dummy</button>
+                </div>
+              </div>
+            )
+          })}
         </div>
-      ): null}
+
+        {/* Only show new game button if player is not in any room */}
+      </div>
+      <div className="ui attached segment">
+        {this.myCurrentGameId() === null? (
+          <div>
+            <button className="ui green button" onClick={this.handleNewGame.bind(this)}>New Game</button>
+          </div>
+        ): null}
+      </div>
     </div>
     )
   }