Aryeh merge with master

README.md

@@ -2,16 +2,21 @@
 This is 3D multiplayer version of the classic Tron game where players compete to be the last rider standing.
 
 ## Live Game
-To play a live version of this game please click here.
+To play a live version of this game please click here http://3d-tron.com.
 
 ## Game Play Design
-3D Tron is a fan variant of the classic Tron game, the player guides a Light Cycle in an arena against opponents, while avoiding the walls and trails of light left behind by all Light Cycles. The player must maneuver quickly and precisely in order to force opponents to run into walls or trails of light.
+3D Tron is a fan variant of the classic Tron game, where players guide a Light Cycle in an arena against opponents, while avoiding the walls and trails of light left behind by all Light Cycles. The players must maneuver quickly and precisely in order to force opponents to run into walls or trails of light.
 
 ## Controls
-User arrow keys to turn
-Avoid the walls and trails of light left behind by all Light Cycles
+User arrow or "w a s d" keys to turn.
+Avoid the walls and trails of light left behind by other players.
 
 ## Architecture
-3D Tron is built on Node.js using Socket.IO for client-server interaction, Three.js and Whitestorm.js for 3D graphics rendering, Physi.js for the physics engine, React for HTML rendering, and Redux for both client and server app state and game state management.
+3D Tron is built on Node.js using Socket.io for client-server interaction, Three.js and Whitestorm.js for 3D graphics rendering, Physi.js for the physics engine, React for HTML rendering, and Redux for both client and server app state and game state management.
 
 Handling of the game logic is distributed between the client and the server. Clients run their own physics calculations to compute their next position and orientation, while the server manages and modifies the master game state according to game logic and client events such as collisions with objects or other players.
+
+## Set up on local machine
+- Clone the repository
+- npm install
+- npm start (Runs webpack and starts the server on port 3000)

browser/components/App.js

@@ -1,28 +1,20 @@
-import React, { Component } from 'react';
+'use strict';
+import React from 'react';
 import { connect } from 'react-redux';
 
 import Game from './Game';
 import Landing from './Landing';
 import LobbyRoom from './LobbyRoom';
 
-const App = ({ gameState }) => {
-
-return (
-    <div>
-      {gameState.isEnter && !gameState.isPlaying && <Landing /> }
-      {!gameState.isEnter && !gameState.isPlaying && <LobbyRoom /> }
-      {gameState.isPlaying  && <Game />}
-    </div>
+const App = ({ gameState }) => (
+  <div>
+    { gameState.isEnter && !gameState.isPlaying && <Landing /> }
+    { !gameState.isEnter && !gameState.isPlaying && <LobbyRoom /> }
+    { gameState.isPlaying && <Game /> }
+  </div>
 );
 
-};
-// if(this.props.gameState === 'landing') render Landing
-// if asdfasd = playing || dead render game
-
 const mapStateToProps = ({ gameState }) => ({ gameState });
 const mapDispatchToProps = null;
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(App);
+export default connect(mapStateToProps, mapDispatchToProps)(App);

browser/components/Chat.js

@@ -1,9 +1,7 @@
+'use strict';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import socket from '../socket';
-import { startChat, stopChat } from '../reducers/gameState';
-
-
 
 class Chat extends Component {
   constructor(props){
@@ -16,7 +14,7 @@ class Chat extends Component {
   }
 
   componentWillUpdate(){
-      this.refs.messageBox.scrollTop = this.refs.messageBox.scrollHeight;
+    this.refs.messageBox.scrollTop = this.refs.messageBox.scrollHeight;
   }
 
 
@@ -35,38 +33,34 @@ class Chat extends Component {
   render() {
     return (
       <div id="chat-box">
-          <div id="message-box">
-            <ul ref="messageBox"
-                id="message-list"
-                className="collection">
-              { this.props.messages && this.props.messages.map((message, i) => {
-                  return (
-                    <li key={i} className="message-item">
-                      {`${message.name}:   ${message.text}`}
-                    </li>
-                  )
-              })}
-            </ul>
-          </div>
-          <input ref="chatInput"
-                   value={this.state.message}
-                   onChange={this.updateMessage}
-                   onKeyPress={evt => { if (evt.key === 'Enter') this.sendMessage(); }}
-                   maxLength={70}
-                   type="text"
-                   id="chat-bar"
-                   placeholder="press 'enter' to send"/>
+        <div id="message-box">
+          <ul ref="messageBox"
+            id="message-list"
+            className="collection">
+            { this.props.messages && this.props.messages.map((message, i) => {
+              return (
+                <li key={i} className="message-item">
+                  {`${message.name}:   ${message.text}`}
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+        <input
+          ref="chatInput"
+          value={this.state.message}
+          onChange={this.updateMessage}
+          onKeyPress={evt => { if (evt.key === 'Enter') this.sendMessage(); }}
+          maxLength={70}
+          type="text"
+          id="chat-bar"
+          placeholder="press 'enter' to send" />
       </div>
-      );
+    );
   }
 }
 
 const mapStateToProps = ({ messages, gameState }) => ({ messages, gameState });
+const mapDispatchToProps = null;
 
-const mapDispatchToProps = dispatch => ({
-});
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Chat);
+export default connect(mapStateToProps, mapDispatchToProps)(Chat);

browser/components/Game.js

@@ -1,76 +1,57 @@
+'use strict';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import math from 'mathjs';
-import world, { speed } from '../game/world';
-import { turnPlayer } from '../reducers/mainPlayer';
-import store from '../store';
+import world from '../game/world';
 import socket from '../socket';
-import { cameraSetOnStart } from '../game/gamePlayFunctions'
-import { DeadNoWinner, Winner, DeadWithWinner} from './InGame'
 
-console.log("SOCKET ID LOCAL STORAGE (IN THE FRONT END)", localStorage.getItem('mySocketId'));
+import { turnPlayer } from '../game/directionsFunctions';
+import { cameraSetOnStart } from '../game/gamePlayFunctions';
+import { DeadNoWinner, Winner, DeadWithWinner } from './InGame';
 
 class Game extends Component {
-  constructor(props) {
-    super(props);
-  }
 
   componentDidMount() {
-    console.log("CDM PROPS", this.props)
     const players = this.props.players;
+    const myPlayer = this.props.mainPlayer;
     world.start();
+    myPlayer.ball.add(world.camera);
+    cameraSetOnStart(myPlayer);
     players.forEach(player => {
-      player.ball.native.addEventListener('collision', (collidedWith) => {
-        console.log("player", player)
-        console.log("collidedWith", collidedWith)
-        socket.emit('ball-collision', {signature: player.signature, id: player.id});
-      }, true);
       player.si = setInterval(player.tail, 10);
     });
-    cameraSetOnStart(this.props.mainPlayer)
-  }
-
-  render(){
-    const TURN_AUDIO = document.createElement('audio');
-    TURN_AUDIO.src = 'mp3/shortBikeTurn.m4a';
-    TURN_AUDIO.load();
 
-    if (this.props.mainPlayer) {
-      const player = this.props.mainPlayer;
-      player.ball.add(world.camera);
+    myPlayer.ball.native.addEventListener('collision', (collidedWith) => {
+      // console.log("collidedWith", collidedWith);
+      socket.emit('ball-collision', {signature: myPlayer.signature, id: myPlayer.id});
+    });
 
-      document.addEventListener('keydown', (event) => {
-        const validKeys = [37, 39, 38, 40, 87, 65, 83, 68];
-        if (validKeys.includes(event.keyCode)) {
-          store.dispatch(turnPlayer(event.keyCode));
-          TURN_AUDIO.play();
-        }
-      });
+    document.addEventListener('keydown', (event) => {
+      const TURN_AUDIO = document.createElement('audio');
+      TURN_AUDIO.src = 'mp3/shortBikeTurn.m4a';
+      TURN_AUDIO.load();
+      const validKeys = [37, 39, 38, 40, 87, 65, 83, 68];
+      if (validKeys.includes(event.keyCode)) {
+        turnPlayer(event.keyCode, myPlayer);
+        TURN_AUDIO.play();
+      }
+    });
+  }
 
-       document.addEventListener('keyup', (event) => {
-        const validKeys = [37, 39, 38, 40, 87, 65, 83, 68];
-        if (validKeys.includes(event.keyCode)) {
-          TURN_AUDIO.stop();
-        }
-      });
+  render() {
     return (
       <div>
-      { 
+      {
         this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? <DeadNoWinner /> : null
       }
-      { 
-        this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? <DeadWithWinner /> : null
+      {
+        this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner).length === 1 ? <DeadWithWinner players={this.props.players} /> : null
       }
-      { 
-        this.props.mainPlayer.winner === true ? <Winner /> : null
+
+      {
+        this.props.mainPlayer.winner ? <Winner /> : null
       }
       </div>
-
-    );
-  } else {
-    return null
-  }
-
+  );
   }
 }
 

browser/components/InGame.js

@@ -1,51 +1,35 @@
-import React, { Component } from 'react';
+'use strict';
+import React from 'react';
 
-export const DeadNoWinner = () => {
- return(
- 	<div>
- 		<div className="input-field">
- 		  <div id="title">You Crashed!</div>
- 		</div>
- 		<div id="general">
- 		  Click and drag with your mouse to watch the rest of the game!
- 		</div>
- 	</div>
- )
-}
+export const DeadNoWinner = () => (
+  <div>
+    <div className="end-game">
+      <div id="title">You Crashed!</div>
+    </div>
+    <div id="general">
+      Click and drag with your mouse to watch the rest of the game!
+    </div>
+  </div>
+);
 
-export const Winner = () => {
- return(
- 	<div>
- 		<div className="input-field">
- 		  <div id="title">You Win!</div>
- 		</div>
- 		<div id="general">
- 		  Game will reload home page soon
- 		</div>
- 	</div>
- )
-}
+export const Winner = () => (
+  <div>
+    <div className="end-game">
+      <div id="title">You Win!</div>
+    </div>
+    <div id="general">
+      Game will reload home page soon
+    </div>
+  </div>
+);
 
-class dWW extends Component {
-	constructor(props){
-		super(props)
-	}
-	render(){
-		let winner = this.props.players.filter(player => player.winner === true)[0].playerName
-		return(
-		 	<div>
-		 		<div className="input-field">
-		 		  <div id="title">{winner} Wins!</div>
-		 		</div>
-		 		<div id="general">
-		 		  Game will reload home page soon
-		 		</div>		
-		 	</div>
- 		)
-
-	}
-}
-
-import { connect } from 'react-redux'
-
-export const DeadWithWinner = connect(({ players }) => ({ players }))(dWW)
+export const DeadWithWinner = ({ players }) => (
+  <div>
+    <div className="end-game">
+      <div id="title">{players.find(player => player.winner).playerName} Wins!</div>
+    </div>
+    <div id="general">
+      Game will reload home page soon
+    </div>
+  </div>
+);