Fix/css class

client/components/BattleContainer.js

@@ -5,6 +5,7 @@ import Player from './Player'
 import Mike from './Mike' // opponent
 import Banner from './Banner'
 import Scoreboard from './Scoreboard'
+import Chat from './Chat'
 
 import * as Game from '../models/game'
 
@@ -27,7 +28,9 @@ export default class BattleContainer extends React.Component {
   componentDidMount() {
     this.gameId = sessionStorage.getItem('gameId');
     this.userId = sessionStorage.getItem('userId');
-
+    //populate facebook photo image. either undefined or not.
+    this.fbPhoto = sessionStorage.getItem('imgUrl');
+    this.fbName = sessionStorage.getItem('fbUser')
     // populate player and opponent state objects
     this.updatePlayer();
     this.updateOpponent();
@@ -84,17 +87,24 @@ export default class BattleContainer extends React.Component {
     }
   }
 
+
   updatePlayer() {
     return Game.getPlayerById(this.userId)
       .then(data => {
-        this.setState({player: data[0]});
+        console.log('here is our data,', data)
+        //console.log(`${this.userId}: ${data}`);
+        // this if checker is a safety net
+        if (data[0] !== undefined) {
+          this.setState({player: data[0]});
+        }
         return;
       });
   }
 
   updateOpponent() {
     return Game.getOpponentByPlayerId(this.userId, this.gameId)
       .then(data => {
+        console.log('here is opponent data:', data)
         this.setState({opponent: data[0]});
         return;
       });
@@ -202,6 +212,9 @@ export default class BattleContainer extends React.Component {
             icon={this.state.opponentIcon}
           />
         </div>
+        <Chat 
+          player={this.state.player}
+        />
     </div>
     );
   }

client/components/Chat.js

@@ -0,0 +1,76 @@
+import React from 'react';
+
+export default class Chat extends React.Component {
+
+	constructor(){
+    super();
+    this.state = {
+    	messages: [],
+    	chatText: '',
+    	username: ''
+    }
+  }
+
+  componentWillMount() {
+  	this.gameId = sessionStorage.getItem('gameId');
+  	this.fbUser = sessionStorage.getItem('fbUser');
+  	this.setState({username: this.fbUser})
+
+  	// this.userId = sessionStorage.getItem('userId');
+
+  	socket.emit('subscribe', this.gameId);
+  	var self = this
+		socket.on('chat message', function(msg){
+			console.log("socket.on: ", msg)
+  		self.setState({messages: self.state.messages.concat(msg) })
+		});
+  }
+
+  _handleSubmit(e) {
+    var self = this
+
+    e.preventDefault()
+    this.gameId = sessionStorage.getItem('gameId');
+    console.log("uh ", this.gameId)
+    console.log("socket.emit: ", this.state.chatText)
+    socket.emit('send', {room: this.gameId, name: self.state.username ? self.state.username : self.props.player.name, message: this.state.chatText})
+  }
+
+  render () {
+		return (
+	    <div className="chatBox">
+	      <div className="messages">
+	      <table className="table table-hover">
+	      	<tbody>
+	      		{this.state.messages.map(function(msg, index){return (<Message key={index} name={msg.name} message={msg.message} />)})}
+        	</tbody>
+        </table>
+        </div>
+        <form onSubmit={this._handleSubmit.bind(this)}>
+        	<input 
+        		type="text"
+        		value={this.state.chatText}
+        		className="u-full-width"
+            placeholder="chat..."
+            id="chatInput"
+						onChange={event => this.setState({chatText: event.target.value})}/>
+
+          <input type="submit" style={{visibility: 'hidden'}} ></input>
+        </form>
+      </div>
+    )
+	}
+}
+
+class Message extends React.Component {
+  render() {
+    return (
+
+          <tr className="message">
+            <td className="text-left">{this.props.name}</td>
+            <td className="text-right">{this.props.message}</td>
+          </tr>
+
+    )
+  }
+}

client/components/Chatbox.jsx

@@ -0,0 +1,108 @@
+import React from "react"
+
+export default class Chatbox extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      text    : "",
+      messages: [],
+    }
+  }
+
+  componentDidMount() {
+    var self = this
+    socket.on("Chatbox message", function (msg) {
+      self.setState({
+        messages: self.state.messages.concat(msg)
+      })
+    });
+  }
+
+  _handleSubmit(event) {
+    event.preventDefault();
+    socket.emit("Chatbox message", {
+      name   : sessionStorage.getItem("fbUser") || "Anon",
+      message: this.state.text,
+      imgUrl    : sessionStorage.getItem("imgUrl") || "http://placehold.it/50/55C1E7/fff&text=Anon"
+    })
+    // send request to the socket.io
+    this.setState({
+      text: ""
+    })
+  }
+
+  render() {
+
+    return (
+      <div className="row">
+        <div className="col-md-5">
+          <Messages messages={this.state.messages}/>
+          <form onSubmit={this._handleSubmit.bind(this)}>
+              <div className="input-group">
+              <input
+                type="text"
+                className="form-control input-sm"
+                onFocus={event => this.value = ""}
+                value={this.state.text}
+                placeholder="Type your message here..."
+                id="btn-input"
+                onChange={event => this.setState({text: event.target.value})}
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    )
+  }
+}
+
+class Messages extends React.Component {
+
+  _createMessages() {
+    return this.props.messages.map((msg, index) => {
+      return <Message
+        key={index}
+        name={msg.name.substring(0, 15)}
+        message={msg.message.substring(0, 31)}
+        imgUrl={msg.imgUrl}
+        />
+    });
+  }
+
+  render() {
+    return (
+      <div className="panel panel-primary">
+        <div className="panel-body">
+          <ul className="chat">
+            {this._createMessages()}
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+class Message extends React.Component {
+  render() {
+    return (
+      <li className="left clearfix">
+        <span className="chat-img pull-left">
+          <img
+            height="71"
+            width="71"
+            src={this.props.imgUrl}
+            alt="User Avatar"
+            className="img-circle"/>
+        </span>
+        <div className="chat-body clearfix">
+          <div className="header">
+            <strong className="primary-font">{this.props.name}</strong>
+            <small className="pull-right text-muted">12 mins ago</small>
+          </div>
+          <p className="pull-right">{this.props.message}</p>
+        </div>
+      </li>
+    )
+  }
+}

client/components/Create.js

@@ -7,8 +7,9 @@ export default class Join extends React.Component {
   constructor(){
     super();
   }
-
-  // generate new access code and reroute to there
+componentWillMount(){
+  this.fbName = sessionStorage.getItem('fbUser');
+}
   handleCreate(e) {
     e.preventDefault();
     let gameGenerated = false;
@@ -18,7 +19,7 @@ export default class Join extends React.Component {
     db.gameList()
       .then(gameList => {
         const accessCodes = gameList.map(game => game.access_code);
-        // check if generated access code already exists 
+        // check if generated access code already exists
         while (!gameGenerated) {
           if (!accessCodes.includes(accessCode)) {
             // create new game using access code
@@ -32,9 +33,24 @@ export default class Join extends React.Component {
                 return gameId;
               })
               .then(gameId => {
+
+                var username;
+                sessionStorage.getItem('fbUser') ?
+                username = sessionStorage.getItem('fbUser')
+                : username = this.props.username;
+
+                var imageUrl;
+                sessionStorage.getItem('imgUrl') ?
+                imageUrl = sessionStorage.getItem('imgUrl')
+                : null;
+
+
+                console.log("showing username before insertion:", username);
+                console.log('showing imageurl before insertion:', imageUrl)
                 // create new user using new gameId
-                db.generateNewUser(gameId, this.props.username)
+                db.generateNewUser(gameId, username, imageUrl, 'create')
                   .then(userId => {
+                    // console.log("showing returned user id in Create:", userId);
                     userId = userId[0];
 
                     // set current userId to local storage
@@ -51,20 +67,24 @@ export default class Join extends React.Component {
       })
   }
 
-  // show create game username input and buttons 
-  render() {
-    return (
+  // show create game username input and buttons
+ render() {
+     return (
       <form className="create-game">
-        <input 
-          type="text" 
+      {this.fbName ?
+        <h4>{this.fbName}</h4>
+        :
+        <input
+          type="text"
           placeholder="Enter your name"
           value={this.props.username}
           onChange={this.props.handleUsernameChange}
         />
+      }
 
         <div className="button-container">
-          <button type="submit" onClick={this.handleCreate.bind(this)}>Create Game</button>
-          <button onClick={this.props.handleViewChange.bind(null, 'menu')}>Back</button>
+          <button className="btn btn-default" type="submit" onClick={this.handleCreate.bind(this)}>Create Game</button>
+          <button className="btn btn-default" onClick={this.props.handleViewChange.bind(null, 'menu')}>Back</button>
         </div>
       </form>
     );

client/components/End.js

@@ -1,7 +1,24 @@
 import React from 'react'
 import { Link } from 'react-router'
+import * as Menu from '../models/menu'
 //--------------------Game Over Page-------------//
 export default class End extends React.Component{
+
+  componentDidMount() {
+
+    var winner = this.props.winner;
+    var userId = this.props.userId;
+    // console.log("showing user id in end.js:", this.props);
+    Menu.updateGameStatus(this.props.gameId, 'completed')
+      .then(function(data) {
+        console.log("updated status to complete!:", data);
+        Menu.updateUserRecord(userId, winner)
+          .then(function(data) {
+
+          })
+      })
+  }
+
   render() {
     return (
       <section className="narrative container six columns offset-by-three">
@@ -13,8 +30,8 @@ export default class End extends React.Component{
         <hr />
 
         <div className="button-container">
-          <button onClick={this.props.rematch}>Rematch</button>
-          <Link to="/"><button>Leave Game</button></Link>
+          <button className="btn btn-default" onClick={this.props.rematch}>Rematch</button>
+          <Link to="/"><button className="btn btn-default">Leave Game</button></Link>
         </div>
 
       </section>

client/components/Game.js

@@ -86,6 +86,8 @@ export default class Game extends React.Component {
           endGame={this.endGame.bind(this)} 
         /> : 
         <End 
+          gameId={this.gameId}
+          userId={this.userId}
           winner={this.state.winner}
           rematch={this.rematch.bind(this)} 
         />}