Feature/wins losses

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="u-full-width">
+	      	<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>{this.props.name}</td>
+            <td>{this.props.message}</td>
+          </tr>
+
+    )
+  }
+}

client/components/Chatbox.jsx

@@ -0,0 +1,97 @@
+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,
+    })
+    // send request to the socket.io
+    this.setState({
+      text: ""
+    })
+  }
+
+  render() {
+
+    return (
+      <div >
+        <form onSubmit={this._handleSubmit.bind(this)}>
+          <div className="input-group">
+            <input
+              type="text"
+              className="form-control"
+              onFocus={event => this.value = ""}
+              value={this.state.text}
+              placeholder="chat..."
+              id="chatInput"
+              onChange={event => this.setState({text: event.target.value})}
+            />
+          </div>
+        </form>
+        <Messages messages={this.state.messages}/>
+      </div>
+    )
+  }
+}
+
+class Messages extends React.Component {
+
+  _createMessages() {
+    var msgTrim;
+    if (this.props.messages.length > 10) {
+      msgTrim = this.props.messages.slice(this.props.messages.length - 10);
+    } else {
+      msgTrim = this.props.messages;
+    }
+    return msgTrim.map((msg,
+    index) => {
+      return <Message
+        key={index}
+        name={msg.name.substring(0, 15)}
+        message={msg.message.substring(0, 31)}/>
+    });
+  }
+
+  render() {
+    return (
+      <div className="messages">
+        <table className="table table-hover">
+          <tbody>
+            {this._createMessages()}
+          </tbody>
+        </table>
+      </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/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)} 
         />}