From 200fce3d7696f6116cf372c928581923b96d8382 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 12 Feb 2017 17:24:45 -0500 Subject: [PATCH 01/26] Refactored mainPlayer reducer, turn functions, and when the game starts did world.scene.remove instead of calling collision function on bikes we do not want in the scene. --- browser/components/Game.js | 32 +++++++++++++++++++---------- browser/game/directionsFunctions.js | 14 ++++++++----- browser/game/gamePlayFunctions.js | 9 +++++--- browser/game/turnFunctions.js | 8 ++++---- browser/reducers/mainPlayer.js | 22 -------------------- browser/socket.js | 4 +++- server/serverSockets/socket.js | 7 ++++--- 7 files changed, 47 insertions(+), 49 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index 80a4408..9aae798 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -2,7 +2,7 @@ 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 { turnPlayer } from '../game/directionsFunctions'; import store from '../store'; import socket from '../socket'; import { cameraSetOnStart } from '../game/gamePlayFunctions' @@ -18,16 +18,26 @@ class Game extends Component { componentDidMount() { console.log("CDM PROPS", this.props) const players = this.props.players; + const me = this.props.mainPlayer; world.start(); + // 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) 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) + me.ball.native.addEventListener('collision', (collidedWith) => { + console.log("ME", me); + console.log("collidedWith", collidedWith); + socket.emit('ball-collision', {signature: me.signature, id: me.id}); + }); + cameraSetOnStart(me); } render(){ @@ -42,7 +52,7 @@ class Game extends Component { document.addEventListener('keydown', (event) => { const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; if (validKeys.includes(event.keyCode)) { - store.dispatch(turnPlayer(event.keyCode)); + turnPlayer(event.keyCode, this.props.mainPlayer); TURN_AUDIO.play(); } }); @@ -55,13 +65,13 @@ class Game extends Component { }); return (
- { + { this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null } - { + { this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null } - { + { this.props.mainPlayer.winner === true ? : null }
diff --git a/browser/game/directionsFunctions.js b/browser/game/directionsFunctions.js index 389d5fe..0237370 100644 --- a/browser/game/directionsFunctions.js +++ b/browser/game/directionsFunctions.js @@ -1,12 +1,14 @@ import world, { speed } from './world'; +import store from '../store'; import socket from '../socket'; +// const me = store.getState().mainPlayer; + const turnLeft = (player) => { socket.emit('directionChange', { id: player.id, turn: 'left' }); - return player; }; const turnRight = (player) => { @@ -14,7 +16,6 @@ const turnRight = (player) => { id: player.id, turn: 'right' }); - return player; }; const turnUp = (player) => { @@ -22,7 +23,6 @@ const turnUp = (player) => { id: player.id, turn: 'up' }); - return player; }; const turnDown = (player) => { @@ -30,7 +30,11 @@ const turnDown = (player) => { id: player.id, turn: 'down' }); - return player; }; -export { turnLeft, turnRight, turnUp, turnDown }; +export const turnPlayer = (direction, me) => { + if (direction === 37 || direction === 65) turnLeft(me); + if (direction === 39 || direction === 68) turnRight(me); + if (direction === 38 || direction === 87) turnUp(me); + if (direction === 40 || direction === 83) turnDown(me); +}; diff --git a/browser/game/gamePlayFunctions.js b/browser/game/gamePlayFunctions.js index 496ab30..d5cbed3 100644 --- a/browser/game/gamePlayFunctions.js +++ b/browser/game/gamePlayFunctions.js @@ -1,7 +1,8 @@ import world, { speed } from './world'; import store from '../store'; import { scalarInitialPosition } from './players'; -import { onDeath } from '../reducers/players' +import { onDeath } from '../reducers/players'; +import { setMainPlayer } from '../reducers/mainPlayer'; //rotate function export const rotate = (user) => { let ups, vs @@ -110,7 +111,8 @@ export const collisionHandler = player => { clearInterval(player.si) world.scene.remove(player.ball.native) world.scene.remove(player.bike.native) - if(player.id) store.dispatch(onDeath(player)) + console.log("HEHREHREHRHERHERHERHERHE"); + if(player.id !== store.getState().mainPlayer.id) store.dispatch(onDeath(player)) if(player.walls.length !== 0) { player.walls.forEach(wall => world.scene.remove(wall.native)) } @@ -119,6 +121,7 @@ export const collisionHandler = player => { } if(player.signature===store.getState().mainPlayer.signature){ player.ball.remove(world.camera) + // store.dispatch(setMainPlayer(player)); world.setControls(new WHS.OrbitControls()); } } @@ -158,4 +161,4 @@ export const cameraSetOnStart = (player) => { upVector.x*6-(player.ball.position.x/scalarInitialPosition)*speed*3, upVector.y*6-(player.ball.position.y/scalarInitialPosition)*speed*3, upVector.z*6-(player.ball.position.z/scalarInitialPosition)*speed*3)) -} \ No newline at end of file +} diff --git a/browser/game/turnFunctions.js b/browser/game/turnFunctions.js index abccfd3..ac9e0ae 100644 --- a/browser/game/turnFunctions.js +++ b/browser/game/turnFunctions.js @@ -15,7 +15,7 @@ export const left = (player) => { player.ball.setLinearVelocity(newVel); player.ball.native._physijs.linearVelocity.set(newVel.x, newVel.y, newVel.z); player.ball.native.up.set(up2.x, up2.y, up2.z); - return rotate(player) + rotate(player) }; export const right = (player) => { @@ -27,7 +27,7 @@ export const right = (player) => { player.ball.setLinearVelocity(newVel); player.ball.native._physijs.linearVelocity.set(newVel.x, newVel.y, newVel.z); player.ball.native.up.set(up2.x, up2.y, up2.z); - return rotate(player) + rotate(player) }; export const up = (player) => { @@ -44,7 +44,7 @@ export const up = (player) => { player.ball.setLinearVelocity({x: vx, y: vy, z: vz}); player.ball.native._physijs.linearVelocity.set(vx, vy, vz); player.ball.native.up.set(up2.x, up2.y, up2.z); - return rotate(player); + rotate(player); }; export const down = (player) => { @@ -61,5 +61,5 @@ export const down = (player) => { player.ball.setLinearVelocity({x: vx, y: vy, z: vz}); player.ball.native._physijs.linearVelocity.set(vx, vy, vz); player.ball.native.up.set(up2.x, up2.y, up2.z); - return rotate(player); + rotate(player); }; diff --git a/browser/reducers/mainPlayer.js b/browser/reducers/mainPlayer.js index d46fca2..df41fb9 100644 --- a/browser/reducers/mainPlayer.js +++ b/browser/reducers/mainPlayer.js @@ -1,10 +1,5 @@ -import { turnLeft, turnRight, turnUp, turnDown } from '../game/directionsFunctions'; /*---------- ACTION TYPES ----------*/ const SET_MAIN_PLAYER = 'SET_MAIN_PLAYER'; -const TURN_PLAYER_LEFT = 'TURN_PLAYER_LEFT'; -const TURN_PLAYER_RIGHT = 'TURN_PLAYER_RIGHT'; -const TURN_PLAYER_UP = 'TURN_PLAYER_UP'; -const TURN_PLAYER_DOWN = 'TURN_PLAYER_DOWN'; /*---------- ACTION CREATORS ----------*/ export const setMainPlayer = (player) => ({ @@ -12,15 +7,6 @@ export const setMainPlayer = (player) => ({ player }); -export const turnPlayer = (direction) => { - let type; - if (direction === 37 || direction === 65) type = TURN_PLAYER_LEFT; - if (direction === 39 || direction === 68) type = TURN_PLAYER_RIGHT; - if (direction === 38 || direction === 87) type = TURN_PLAYER_UP; - if (direction === 40 || direction === 83) type = TURN_PLAYER_DOWN; - return { type }; -}; - /*---------- THUNK CREATORS ----------*/ /*---------- REDUCER ----------*/ @@ -31,14 +17,6 @@ export default (mainPlayer = {}, action) => { switch (action.type) { case SET_MAIN_PLAYER: return action.player; - case TURN_PLAYER_LEFT: - return turnLeft(mainPlayer); - case TURN_PLAYER_RIGHT: - return turnRight(mainPlayer); - case TURN_PLAYER_UP: - return turnUp(mainPlayer); - case TURN_PLAYER_DOWN: - return turnDown(mainPlayer); default: return mainPlayer; } diff --git a/browser/socket.js b/browser/socket.js index 590664e..dd5b661 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -46,7 +46,9 @@ export const initializeSocket = () => { socket.on('startGame', () => { allBikes.forEach(player => { if (!player.id){ - collisionHandler(player); + // collisionHandler(player); + world.scene.remove(player.ball.native); + world.scene.remove(player.bike.native); } }); store.dispatch(startGame()); diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index abe1f77..580387b 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -56,6 +56,7 @@ module.exports = io => { //Here the back end recognizes that a ball collided and sends out a syncronized message to all users to handle the collision. socket.on('ball-collision', (playerData) => { + console.log("COLLISON"); io.sockets.emit('ball-collision-to-handle', playerData); if (playerData.id) { console.log(chalk.red(playerData.id)); @@ -63,9 +64,9 @@ module.exports = io => { console.log(chalk.red(store.getState().users.filter(user => user.active === true).length)); } - if (store.getState().users.filter(user => user.active === true).length === 1){ - io.sockets.emit('endGame'); - } + // if (store.getState().users.filter(user => user.active === true).length === 1){ + // io.sockets.emit('endGame'); + // } }); //Here the back end recognizes a request to change direction emits to the front end that a given player is turning. From 5ad8a21860824c832181bb4bcd2f0942c77581a4 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 12 Feb 2017 18:22:51 -0500 Subject: [PATCH 02/26] Still working on it. --- browser/components/Game.js | 2 +- browser/game/gamePlayFunctions.js | 45 +++++++++++++++++++------------ browser/reducers/mainPlayer.js | 10 +++++++ browser/reducers/players.js | 3 ++- browser/socket.js | 7 +++-- 5 files changed, 46 insertions(+), 21 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index 9aae798..f74ce16 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -60,7 +60,7 @@ class Game extends Component { document.addEventListener('keyup', (event) => { const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; if (validKeys.includes(event.keyCode)) { - TURN_AUDIO.stop(); + TURN_AUDIO.pause(); } }); return ( diff --git a/browser/game/gamePlayFunctions.js b/browser/game/gamePlayFunctions.js index d5cbed3..455a0f2 100644 --- a/browser/game/gamePlayFunctions.js +++ b/browser/game/gamePlayFunctions.js @@ -2,7 +2,7 @@ import world, { speed } from './world'; import store from '../store'; import { scalarInitialPosition } from './players'; import { onDeath } from '../reducers/players'; -import { setMainPlayer } from '../reducers/mainPlayer'; +import { setMainPlayer, onDeathMainPlayer } from '../reducers/mainPlayer'; //rotate function export const rotate = (user) => { let ups, vs @@ -108,23 +108,34 @@ export const rotate = (user) => { }; export const collisionHandler = player => { - clearInterval(player.si) - world.scene.remove(player.ball.native) - world.scene.remove(player.bike.native) - console.log("HEHREHREHRHERHERHERHERHE"); - if(player.id !== store.getState().mainPlayer.id) store.dispatch(onDeath(player)) - if(player.walls.length !== 0) { - player.walls.forEach(wall => world.scene.remove(wall.native)) - } - if(!!player.wall[0]) { - world.scene.remove(player.wall[0].native) - } - if(player.signature===store.getState().mainPlayer.signature){ - player.ball.remove(world.camera) - // store.dispatch(setMainPlayer(player)); + const me = store.getState().mainPlayer; + world.scene.remove(player.ball.native); + world.scene.remove(player.bike.native); + if (player.id === me.id) { + player.ball.remove(world.camera); world.setControls(new WHS.OrbitControls()); - } -} + store.dispatch(onDeathMainPlayer(me)); + } + // store.dispatch(onDeath(player)); +}; +// export const collisionHandler = player => { +// clearInterval(player.si) +// world.scene.remove(player.ball.native) +// world.scene.remove(player.bike.native) +// console.log("HEHREHREHRHERHERHERHERHE"); +// if(player.id !== store.getState().mainPlayer.id) store.dispatch(onDeath(player)) +// if(player.walls.length !== 0) { +// player.walls.forEach(wall => world.scene.remove(wall.native)) +// } +// if(!!player.wall[0]) { +// world.scene.remove(player.wall[0].native) +// } +// if(player.signature===store.getState().mainPlayer.signature){ +// player.ball.remove(world.camera) +// // store.dispatch(setMainPlayer(player)); +// world.setControls(new WHS.OrbitControls()); +// } +// } export const cameraSet = (player) => { let velocityVector = player.ball.native._physijs.linearVelocity diff --git a/browser/reducers/mainPlayer.js b/browser/reducers/mainPlayer.js index df41fb9..b939a54 100644 --- a/browser/reducers/mainPlayer.js +++ b/browser/reducers/mainPlayer.js @@ -1,5 +1,6 @@ /*---------- ACTION TYPES ----------*/ const SET_MAIN_PLAYER = 'SET_MAIN_PLAYER'; +const MAIN_PLAYER_DEATH = 'MAIN_PLAYER_DEATH'; /*---------- ACTION CREATORS ----------*/ export const setMainPlayer = (player) => ({ @@ -7,6 +8,11 @@ export const setMainPlayer = (player) => ({ player }); +export const onDeathMainPlayer = (me) => ({ + type: MAIN_PLAYER_DEATH, + me +}); + /*---------- THUNK CREATORS ----------*/ /*---------- REDUCER ----------*/ @@ -17,6 +23,10 @@ export default (mainPlayer = {}, action) => { switch (action.type) { case SET_MAIN_PLAYER: return action.player; + case MAIN_PLAYER_DEATH: + // newPlayer.si = 0; + // newPlayer.status = 'dead'; + return newPlayer; default: return mainPlayer; } diff --git a/browser/reducers/players.js b/browser/reducers/players.js index cd64ad0..e457f6a 100644 --- a/browser/reducers/players.js +++ b/browser/reducers/players.js @@ -80,7 +80,8 @@ export default (players = initialState, action) => { case ON_DEATH: return players.map((player) => { - if(player.signature === action.player.signature){ + if (player.signature === action.player.signature){ + clearInterval(player.si); player.status = 'dead' } return player diff --git a/browser/socket.js b/browser/socket.js index dd5b661..34ab509 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -6,7 +6,7 @@ import { receiveMessage } from './reducers/messages'; import { left, right, up, down } from './game/turnFunctions'; import world, { speed } from './game/world'; import { cameraSet, collisionHandler } from './game/gamePlayFunctions'; -import { declareWinner } from './reducers/players'; +import { declareWinner, onDeath } from './reducers/players'; const socket = io('/'); @@ -46,7 +46,9 @@ export const initializeSocket = () => { socket.on('startGame', () => { allBikes.forEach(player => { if (!player.id){ + // NOT NEEDED // collisionHandler(player); + // THIS INSTEAD world.scene.remove(player.ball.native); world.scene.remove(player.bike.native); } @@ -79,8 +81,9 @@ export const initializeSocket = () => { }); socket.on('ball-collision-to-handle', playerData => { - const playerToRemove = store.getState().players.find(player => player.signature === playerData.signature); + const playerToRemove = store.getState().players.find(player => player.id === playerData.id); collisionHandler(playerToRemove); + // store.dispatch(onDeath(playerToRemove)); }); socket.on('removePlayer', userId => { From d0699f31291d3bfd7c38ed9bfefa1de10e642bb3 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 12 Feb 2017 19:08:25 -0500 Subject: [PATCH 03/26] Refactored uneeded code like making too many dispatch calls to the store. Main bug still not fixed. --- browser/components/Game.js | 41 ++++++++++++++----------------- browser/components/LobbyRoom.js | 2 +- browser/game/gamePlayFunctions.js | 2 ++ browser/game/playerConstructor.js | 2 +- browser/reducers/gameState.js | 3 +-- browser/reducers/mainPlayer.js | 2 +- browser/reducers/players.js | 8 +++--- browser/socket.js | 9 ++++--- server/reducers/users.js | 29 +++++++++++----------- server/serverSockets/socket.js | 2 +- 10 files changed, 47 insertions(+), 53 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index f74ce16..eb849e3 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -40,30 +40,30 @@ class Game extends Component { cameraSetOnStart(me); } - render(){ + 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); + const player = this.props.mainPlayer; + player.ball.add(world.camera); - document.addEventListener('keydown', (event) => { - const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; - if (validKeys.includes(event.keyCode)) { - turnPlayer(event.keyCode, this.props.mainPlayer); - TURN_AUDIO.play(); - } - }); + document.addEventListener('keydown', (event) => { + const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; + if (validKeys.includes(event.keyCode)) { + turnPlayer(event.keyCode, this.props.mainPlayer); + TURN_AUDIO.play(); + } + }); + + document.addEventListener('keyup', (event) => { + const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; + if (validKeys.includes(event.keyCode)) { + TURN_AUDIO.pause(); + } + }); - document.addEventListener('keyup', (event) => { - const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; - if (validKeys.includes(event.keyCode)) { - TURN_AUDIO.pause(); - } - }); - return ( + return (
{ this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null @@ -75,12 +75,7 @@ class Game extends Component { this.props.mainPlayer.winner === true ? : null }
- ); - } else { - return null - } - } } diff --git a/browser/components/LobbyRoom.js b/browser/components/LobbyRoom.js index c37d480..af63010 100644 --- a/browser/components/LobbyRoom.js +++ b/browser/components/LobbyRoom.js @@ -24,7 +24,7 @@ class LobbyRoom extends Component { } let exisitingPlayers = this.props.players.filter(player => { - return player.playerName; + return player.id; }) console.log('exisitingPlayer', exisitingPlayers) diff --git a/browser/game/gamePlayFunctions.js b/browser/game/gamePlayFunctions.js index 455a0f2..89337d9 100644 --- a/browser/game/gamePlayFunctions.js +++ b/browser/game/gamePlayFunctions.js @@ -116,6 +116,8 @@ export const collisionHandler = player => { world.setControls(new WHS.OrbitControls()); store.dispatch(onDeathMainPlayer(me)); } + + // WHEN THIS IS USED WE GET OUR PROBLEM // store.dispatch(onDeath(player)); }; // export const collisionHandler = player => { diff --git a/browser/game/playerConstructor.js b/browser/game/playerConstructor.js index 563e49a..b76a15c 100644 --- a/browser/game/playerConstructor.js +++ b/browser/game/playerConstructor.js @@ -17,7 +17,7 @@ export default function PlayerConstructor(color){ let that = this that.ball = sphereBase.clone(); that.cameraTarget; - that.status = "alive" + // that.status = "alive" that.winner = false that.t=0 that.bike; diff --git a/browser/reducers/gameState.js b/browser/reducers/gameState.js index 4a2bd9b..b6ba4e0 100644 --- a/browser/reducers/gameState.js +++ b/browser/reducers/gameState.js @@ -12,7 +12,6 @@ const initialState = { isEnter: true }; - export const startGame = () => ({ type: START_GAME, }); @@ -23,7 +22,7 @@ export const stopGame = () => ({ export const enterLobby = () => ({ type: ENTER_LOBBY -}) +}); diff --git a/browser/reducers/mainPlayer.js b/browser/reducers/mainPlayer.js index b939a54..e54c677 100644 --- a/browser/reducers/mainPlayer.js +++ b/browser/reducers/mainPlayer.js @@ -25,7 +25,7 @@ export default (mainPlayer = {}, action) => { return action.player; case MAIN_PLAYER_DEATH: // newPlayer.si = 0; - // newPlayer.status = 'dead'; + newPlayer.status = 'dead'; return newPlayer; default: return mainPlayer; diff --git a/browser/reducers/players.js b/browser/reducers/players.js index e457f6a..4e5e776 100644 --- a/browser/reducers/players.js +++ b/browser/reducers/players.js @@ -39,7 +39,7 @@ export const onDeath = (player) => ({ export const declareWinner = (player) => ({ type: DECLARE_WINNER, player -}) +}); /*---------- THUNK CREATORS ----------*/ @@ -54,21 +54,19 @@ export default (players = initialState, action) => { action.users.map((user, index) => { if (user.id) { newPlayers[index].id = user.id; + newPlayers[index].status = 'alive'; } return user; }); return newPlayers; case ADD_PLAYER_NAME: - // console.log('PLAYER WITH NEW NAME 1', players) - let playerWithNewName = players.map((player) => { + return players.map((player) => { if (player.id === action.playerId) { player.playerName = action.playerName; } return player; }); - // console.log('PLAYER WITH NEW NAME2', playerWithNewName) - return playerWithNewName case REMOVE_PLAYER: return players.map((bike) => { diff --git a/browser/socket.js b/browser/socket.js index 34ab509..99c6191 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -22,10 +22,10 @@ export const initializeSocket = () => { socket.on('addUser', (allUsers) => { store.dispatch(setPlayerId(allUsers)); - console.log('ALL USERS ****', allUsers) - allUsers.forEach(user => { - store.dispatch(addPlayerName(user.id, user.playerName)) - }) + console.log('ALL USERS ****', allUsers); + // allUsers.forEach(user => { + // if (user.id) store.dispatch(addPlayerName(user.id, user.playerName)); + // }); const myUser = allUsers.find(user => user.id === localStorage.getItem('mySocketId')); const myBike = allBikes.find(bike => bike.id === myUser.id); store.dispatch(setMainPlayer(myBike)); @@ -45,6 +45,7 @@ export const initializeSocket = () => { socket.on('startGame', () => { allBikes.forEach(player => { + console.log(player); if (!player.id){ // NOT NEEDED // collisionHandler(player); diff --git a/server/reducers/users.js b/server/reducers/users.js index 5b8a0a7..4617052 100644 --- a/server/reducers/users.js +++ b/server/reducers/users.js @@ -18,7 +18,7 @@ const removeUser = (userId) => ({ userId }); -const readyPlayer = (playerId) => ({ +const startReady = (playerId) => ({ type: READY_PLAYER, playerId }); @@ -32,7 +32,7 @@ const addUserName = (userId, playerName) => ({ type: ADD_USER_NAME, userId, playerName -}) +}); /* --------------- THUNK ACTION CREATORS --------------- */ @@ -51,11 +51,11 @@ const removeUserAndEmit = socket => { }; }; -const startReady = playerId => { - return dispatch => { - dispatch(readyPlayer(playerId)); - }; -}; +// const startReady = playerId => { +// return dispatch => { +// dispatch(readyPlayer(playerId)); +// }; +// }; /* --------------- REDUCER --------------- */ const initialState = [ {id: ''}, @@ -83,13 +83,13 @@ function userReducer (state = initialState, action) { return newUser; case READY_PLAYER: - return state.map((user) => { - if (user.id === action.playerId) { - user.readyToPlay = true; - user.active = true; - } - return user; - }); + return state.map((user) => { + if (user.id === action.playerId) { + user.readyToPlay = true; + user.active = true; + } + return user; + }); case REMOVE_USER: return newUser.map(user => { @@ -127,7 +127,6 @@ module.exports = { addUser, REMOVE_USER, removeUser, - readyPlayer, createAndEmitUser, removeUserAndEmit, userReducer, diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index 580387b..4e0fdaa 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -37,7 +37,7 @@ module.exports = io => { socket.on('readyPlayer', (playerId) => { store.dispatch(startReady(playerId)); - let checkReadyUsers = store.getState().users.filter(user => user.id !== '' ); + let checkReadyUsers = store.getState().users.filter(user => user.id); // gamePlay // if (checkReadyUsers.length > 1 && From 582f2cf2b4b049a4f776e22f19921f37a8487417 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 12 Feb 2017 22:26:39 -0500 Subject: [PATCH 04/26] Cleaned up some code. Got rid of extra dispatch calls to the store. Not using the dispatch(onDeath(player)) as that is messing stuff up. --- browser/components/App.js | 6 ++-- browser/components/Chat.js | 17 +++++------ browser/components/Game.js | 31 +++++++------------- browser/components/LobbyRoom.js | 47 +++++++++++++------------------ browser/game/playerConstructor.js | 2 +- browser/reducers/gameState.js | 4 --- browser/reducers/musicPlayer.js | 6 +--- browser/reducers/players.js | 19 ++++++------- browser/socket.js | 27 +++++++----------- server/serverSockets/socket.js | 18 ++++++------ 10 files changed, 68 insertions(+), 109 deletions(-) diff --git a/browser/components/App.js b/browser/components/App.js index 7b736c1..7758f7c 100644 --- a/browser/components/App.js +++ b/browser/components/App.js @@ -6,15 +6,13 @@ import Landing from './Landing'; import LobbyRoom from './LobbyRoom'; const App = ({ gameState }) => { - -return ( + return (
{gameState.isEnter && !gameState.isPlaying && } {!gameState.isEnter && !gameState.isPlaying && } {gameState.isPlaying && }
-); - + ); }; // if(this.props.gameState === 'landing') render Landing // if asdfasd = playing || dead render game diff --git a/browser/components/Chat.js b/browser/components/Chat.js index d63782b..2da0b05 100644 --- a/browser/components/Chat.js +++ b/browser/components/Chat.js @@ -48,14 +48,15 @@ class Chat extends Component { })} - { if (evt.key === 'Enter') this.sendMessage(); }} - maxLength={70} - type="text" - id="chat-bar" - placeholder="press 'enter' to send"/> + { if (evt.key === 'Enter') this.sendMessage(); }} + maxLength={70} + type="text" + id="chat-bar" + placeholder="press 'enter' to send" /> ); } diff --git a/browser/components/Game.js b/browser/components/Game.js index eb849e3..e2a53c5 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -1,12 +1,11 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; -import math from 'mathjs'; -import world, { speed } from '../game/world'; +import world from '../game/world'; import { turnPlayer } from '../game/directionsFunctions'; import store from '../store'; import socket from '../socket'; -import { cameraSetOnStart } from '../game/gamePlayFunctions' -import { DeadNoWinner, Winner, DeadWithWinner} from './InGame' +import { cameraSetOnStart } from '../game/gamePlayFunctions'; +import { DeadNoWinner, Winner, DeadWithWinner} from './InGame'; console.log("SOCKET ID LOCAL STORAGE (IN THE FRONT END)", localStorage.getItem('mySocketId')); @@ -18,26 +17,17 @@ class Game extends Component { componentDidMount() { console.log("CDM PROPS", this.props) const players = this.props.players; - const me = this.props.mainPlayer; + const myPlayer = this.props.mainPlayer; world.start(); - // 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) players.forEach(player => { player.si = setInterval(player.tail, 10); }); - me.ball.native.addEventListener('collision', (collidedWith) => { - console.log("ME", me); + myPlayer.ball.native.addEventListener('collision', (collidedWith) => { + console.log("ME", myPlayer); console.log("collidedWith", collidedWith); - socket.emit('ball-collision', {signature: me.signature, id: me.id}); + socket.emit('ball-collision', {signature: myPlayer.signature, id: myPlayer.id}); }); - cameraSetOnStart(me); + cameraSetOnStart(myPlayer); } render() { @@ -47,17 +37,16 @@ class Game extends Component { const player = this.props.mainPlayer; player.ball.add(world.camera); + const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; document.addEventListener('keydown', (event) => { - const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; if (validKeys.includes(event.keyCode)) { turnPlayer(event.keyCode, this.props.mainPlayer); TURN_AUDIO.play(); } }); - document.addEventListener('keyup', (event) => { - const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; + document.addEventListener('keyup', (event) => { if (validKeys.includes(event.keyCode)) { TURN_AUDIO.pause(); } diff --git a/browser/components/LobbyRoom.js b/browser/components/LobbyRoom.js index af63010..c52cf88 100644 --- a/browser/components/LobbyRoom.js +++ b/browser/components/LobbyRoom.js @@ -3,62 +3,53 @@ import { connect } from 'react-redux'; import socket from '../socket'; import Chat from './Chat'; - -//not needed yet -// import ControlPanel from './ControlPanel'; -// import BugReportForm from './BugReportForm'; - - class LobbyRoom extends Component { constructor(props) { super(props); - } - - render() { + this.readyPlayerEmitter = this.readyPlayerEmitter.bind(this); + } - function readyPlayerEmitter(){ - console.log("CLICK????****") - const socketId = localStorage.getItem('mySocketId') - socket.emit('readyPlayer', socketId) + readyPlayerEmitter() { + const socketId = localStorage.getItem('mySocketId'); + socket.emit('readyPlayer', socketId); } - let exisitingPlayers = this.props.players.filter(player => { - return player.id; - }) + render() { + let exisitingPlayers = this.props.players.filter(player => player.id); console.log('exisitingPlayer', exisitingPlayers) - //let { isPlaying } = this.props.gameState; - // let { bugReportOpen } = this.props.controlPanel; + return (
STAGING AREA
-

PLAYERS ONLINE

+

PLAYERS ONLINE

    - { exisitingPlayers.map((player,index) => { + { exisitingPlayers.map((player, index) => { return ( -
  • +
  • {player.playerName}
  • - ) + ); }) }
- +
); } } -// players={ this.props.players } -//things we probably need... + const mapStateToProps = ({ gameState, players}) => ({ gameState, players }); const mapDispatchToProps = dispatch => ({ addPlayerName: e => dispatch(addPlayerName(localStorage.getItem('mySocketId'), e.target.value)) diff --git a/browser/game/playerConstructor.js b/browser/game/playerConstructor.js index b76a15c..563e49a 100644 --- a/browser/game/playerConstructor.js +++ b/browser/game/playerConstructor.js @@ -17,7 +17,7 @@ export default function PlayerConstructor(color){ let that = this that.ball = sphereBase.clone(); that.cameraTarget; - // that.status = "alive" + that.status = "alive" that.winner = false that.t=0 that.bike; diff --git a/browser/reducers/gameState.js b/browser/reducers/gameState.js index b6ba4e0..0854517 100644 --- a/browser/reducers/gameState.js +++ b/browser/reducers/gameState.js @@ -24,10 +24,6 @@ export const enterLobby = () => ({ type: ENTER_LOBBY }); - - - - /*-------REDUCER------------*/ export default (state = initialState, action) => { diff --git a/browser/reducers/musicPlayer.js b/browser/reducers/musicPlayer.js index 37fd0ca..c9a7663 100644 --- a/browser/reducers/musicPlayer.js +++ b/browser/reducers/musicPlayer.js @@ -6,7 +6,7 @@ AUDIO.autoplay = true; /*---------- INITIAL STATE ----------*/ const initialState = { songPlaying: true - } +}; /*---------- ACTION TYPES ----------*/ const START_PLAYING = 'START_PLAYING'; @@ -27,7 +27,6 @@ export const pause = () => { }; }; - export const toggleSong = () => { return (dispatch, getState) => { const currentState = getState().musicPlayer; @@ -39,9 +38,6 @@ export const toggleSong = () => { }; }; - - - /*---------- THUNK CREATORS ----------*/ /*---------- REDUCER ----------*/ diff --git a/browser/reducers/players.js b/browser/reducers/players.js index 4e5e776..74eff97 100644 --- a/browser/reducers/players.js +++ b/browser/reducers/players.js @@ -1,6 +1,5 @@ import allPlayers from '../game/players'; import world from '../game/world'; -import { rotate } from '../game/gamePlayFunctions'; import store from '../store'; /*---------- INITIAL STATE ----------*/ @@ -10,8 +9,8 @@ const initialState = allPlayers; const SET_PLAYER_ID = 'SET_PLAYER_ID'; const ADD_PLAYER_NAME = 'ADD_PLAYER_NAME'; const REMOVE_PLAYER = 'REMOVE_PLAYER'; -const ON_DEATH = 'ON_DEATH' -const DECLARE_WINNER = 'DECLARE_WINNER' +const ON_DEATH = 'ON_DEATH'; +const DECLARE_WINNER = 'DECLARE_WINNER'; /*---------- ACTION CREATORS ----------*/ export const setPlayerId = (users) => ({ @@ -25,7 +24,6 @@ export const addPlayerName = (playerId, playerName) => ({ playerName }); - export const removePlayer = (userId) => ({ type: REMOVE_PLAYER, userId @@ -54,7 +52,6 @@ export default (players = initialState, action) => { action.users.map((user, index) => { if (user.id) { newPlayers[index].id = user.id; - newPlayers[index].status = 'alive'; } return user; }); @@ -80,18 +77,18 @@ export default (players = initialState, action) => { return players.map((player) => { if (player.signature === action.player.signature){ clearInterval(player.si); - player.status = 'dead' + player.status = 'dead'; } - return player + return player; }); case DECLARE_WINNER: return players.map((player) => { - if(player.signature === action.player.signature){ - player.winner = true + if (player.signature === action.player.signature){ + player.winner = true; } - return player - }) + return player; + }); default: return players; } diff --git a/browser/socket.js b/browser/socket.js index 99c6191..fba9f2d 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -4,7 +4,7 @@ import { startGame, stopGame} from './reducers/gameState'; import { setMainPlayer } from './reducers/mainPlayer'; import { receiveMessage } from './reducers/messages'; import { left, right, up, down } from './game/turnFunctions'; -import world, { speed } from './game/world'; +import world from './game/world'; import { cameraSet, collisionHandler } from './game/gamePlayFunctions'; import { declareWinner, onDeath } from './reducers/players'; @@ -23,33 +23,27 @@ export const initializeSocket = () => { socket.on('addUser', (allUsers) => { store.dispatch(setPlayerId(allUsers)); console.log('ALL USERS ****', allUsers); - // allUsers.forEach(user => { - // if (user.id) store.dispatch(addPlayerName(user.id, user.playerName)); - // }); + const myUser = allUsers.find(user => user.id === localStorage.getItem('mySocketId')); const myBike = allBikes.find(bike => bike.id === myUser.id); store.dispatch(setMainPlayer(myBike)); }); - socket.on('addPlayerName', (socketId, playerName) =>{ + socket.on('addPlayerName', (socketId, playerName) => { console.log("ADD OTHER PLAYERS NAME", socketId, playerName); store.dispatch(addPlayerName(socketId, playerName)); }); socket.on('addNewMessage', (text, senderName) => { console.log("RECEIVE MESSAGE & SENDERNAME FRONTEND ***", text, senderName); - store.dispatch(receiveMessage({text:text, name:senderName})); + store.dispatch(receiveMessage({text: text, name: senderName})); }); - socket.on('startGame', () => { allBikes.forEach(player => { console.log(player); - if (!player.id){ - // NOT NEEDED - // collisionHandler(player); - // THIS INSTEAD + if (!player.id) { world.scene.remove(player.ball.native); world.scene.remove(player.bike.native); } @@ -84,21 +78,20 @@ export const initializeSocket = () => { socket.on('ball-collision-to-handle', playerData => { const playerToRemove = store.getState().players.find(player => player.id === playerData.id); collisionHandler(playerToRemove); - // store.dispatch(onDeath(playerToRemove)); }); socket.on('removePlayer', userId => { - console.log("ARE WE REMOVING PLAYER ON THE FRONT END?") + console.log("ARE WE REMOVING PLAYER ON THE FRONT END?"); store.dispatch(removePlayer(userId)); }); socket.on('endGame', () => { // store.dispatch(stopGame()); - let lastStanding = store.getState().players.filter(player => player.status === 'alive')[0] - console.log("lastStanding", lastStanding) - store.dispatch(declareWinner(lastStanding)) + let lastStanding = store.getState().players.filter(player => player.status === 'alive')[0]; + console.log("lastStanding", lastStanding); + store.dispatch(declareWinner(lastStanding)); // store.dispatch(stopGame()); - setTimeout(()=> window.location.reload(true), 10000) + setTimeout(() => window.location.reload(true), 10000); }); }; diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index 4e0fdaa..4709819 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -16,7 +16,7 @@ module.exports = io => { // New user enters; create new user and new user appears for everyone else store.dispatch(createAndEmitUser(socket)); const allUsers = store.getState().users; - console.log(allUsers) + console.log("ALL USERS", allUsers); io.sockets.emit('addUser', allUsers); //Player ready in landing page @@ -27,13 +27,11 @@ module.exports = io => { socket.broadcast.emit('addPlayerName', socketId, playerName); }); - socket.on('newMessage', (message, socketId)=>{ - let getSender = store.getState().users.find(user => { - return user.id === socketId - }); + socket.on('newMessage', (message, socketId) => { + let getSender = store.getState().users.find(user => user.id === socketId); io.sockets.emit('addNewMessage', message, getSender.playerName); - }) + }); socket.on('readyPlayer', (playerId) => { store.dispatch(startReady(playerId)); @@ -64,9 +62,9 @@ module.exports = io => { console.log(chalk.red(store.getState().users.filter(user => user.active === true).length)); } - // if (store.getState().users.filter(user => user.active === true).length === 1){ - // io.sockets.emit('endGame'); - // } + if (store.getState().users.filter(user => user.active === true).length === 1){ + io.sockets.emit('endGame'); + } }); //Here the back end recognizes a request to change direction emits to the front end that a given player is turning. @@ -76,7 +74,7 @@ module.exports = io => { socket.on('disconnect', () => { store.dispatch(removeUserAndEmit(socket)); - io.sockets.emit('removePlayer', socket.id) + io.sockets.emit('removePlayer', socket.id); console.log(chalk.magenta(`${socket.id} has disconnected`)); }); }); From bd517e68db0859f7b1821dd952551a1c74694d7d Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 14 Feb 2017 22:27:32 -0500 Subject: [PATCH 05/26] Cleaned up some code. When one player crashes does not crash other players. --- browser/components/Game.js | 10 +--------- browser/game/gamePlayFunctions.js | 22 +++++++++++----------- browser/socket.js | 3 --- 3 files changed, 12 insertions(+), 23 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index e2a53c5..d89ab49 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -15,7 +15,6 @@ class Game extends Component { } componentDidMount() { - console.log("CDM PROPS", this.props) const players = this.props.players; const myPlayer = this.props.mainPlayer; world.start(); @@ -23,8 +22,7 @@ class Game extends Component { player.si = setInterval(player.tail, 10); }); myPlayer.ball.native.addEventListener('collision', (collidedWith) => { - console.log("ME", myPlayer); - console.log("collidedWith", collidedWith); + // console.log("collidedWith", collidedWith); socket.emit('ball-collision', {signature: myPlayer.signature, id: myPlayer.id}); }); cameraSetOnStart(myPlayer); @@ -46,12 +44,6 @@ class Game extends Component { } }); - document.addEventListener('keyup', (event) => { - if (validKeys.includes(event.keyCode)) { - TURN_AUDIO.pause(); - } - }); - return (
{ diff --git a/browser/game/gamePlayFunctions.js b/browser/game/gamePlayFunctions.js index 89337d9..ef6d90e 100644 --- a/browser/game/gamePlayFunctions.js +++ b/browser/game/gamePlayFunctions.js @@ -119,6 +119,17 @@ export const collisionHandler = player => { // WHEN THIS IS USED WE GET OUR PROBLEM // store.dispatch(onDeath(player)); + if (player.walls.length !== 0) { + player.walls.forEach(wall => world.scene.remove(wall.native)); + } + if (player.wall[0]) { + world.scene.remove(player.wall[0].native); + } + if (player.signature === store.getState().mainPlayer.signature){ + player.ball.remove(world.camera); + // store.dispatch(setMainPlayer(player)); + world.setControls(new WHS.OrbitControls()); + } }; // export const collisionHandler = player => { // clearInterval(player.si) @@ -126,17 +137,6 @@ export const collisionHandler = player => { // world.scene.remove(player.bike.native) // console.log("HEHREHREHRHERHERHERHERHE"); // if(player.id !== store.getState().mainPlayer.id) store.dispatch(onDeath(player)) -// if(player.walls.length !== 0) { -// player.walls.forEach(wall => world.scene.remove(wall.native)) -// } -// if(!!player.wall[0]) { -// world.scene.remove(player.wall[0].native) -// } -// if(player.signature===store.getState().mainPlayer.signature){ -// player.ball.remove(world.camera) -// // store.dispatch(setMainPlayer(player)); -// world.setControls(new WHS.OrbitControls()); -// } // } export const cameraSet = (player) => { diff --git a/browser/socket.js b/browser/socket.js index fba9f2d..af19db4 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -86,13 +86,10 @@ export const initializeSocket = () => { }); socket.on('endGame', () => { - // store.dispatch(stopGame()); let lastStanding = store.getState().players.filter(player => player.status === 'alive')[0]; console.log("lastStanding", lastStanding); store.dispatch(declareWinner(lastStanding)); - // store.dispatch(stopGame()); setTimeout(() => window.location.reload(true), 10000); - }); }; From 7bebac256f763330f48fca87bdd87ba2d2194de5 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 14 Feb 2017 22:33:20 -0500 Subject: [PATCH 06/26] updated readme --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index e661ac5..3b38ef1 100644 --- a/README.md +++ b/README.md @@ -15,3 +15,9 @@ Avoid the walls and trails of light left behind by all Light Cycles 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 run build +- Server will run on port 3000 From a61b9e9f6a9da45dce52715d2843f66f3fa4d92e Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 14 Feb 2017 22:39:10 -0500 Subject: [PATCH 07/26] Updated tests --- tests/browser/react-redux/reducers/gameState.js | 3 ++- tests/server/redux/actions/users.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/tests/browser/react-redux/reducers/gameState.js b/tests/browser/react-redux/reducers/gameState.js index d233d96..40f90ec 100644 --- a/tests/browser/react-redux/reducers/gameState.js +++ b/tests/browser/react-redux/reducers/gameState.js @@ -12,7 +12,8 @@ describe("|----- FRONTEND Game State Reducer -----|", () => { it('has proper initial state', () => { expect(testStore.getState()).to.be.deep.equal({ - isPlaying: false + isPlaying: false, + isEnter: true }); }); diff --git a/tests/server/redux/actions/users.js b/tests/server/redux/actions/users.js index ccb73e2..77386a3 100644 --- a/tests/server/redux/actions/users.js +++ b/tests/server/redux/actions/users.js @@ -1,6 +1,6 @@ import {expect} from 'chai'; -import {addUser, removeUser, readyPlayer, playerCollision} from '../../../../server/reducers/users'; +import {addUser, removeUser, startReady, playerCollision} from '../../../../server/reducers/users'; describe("|----- BACKEND User Actions -----|", () => { const testUserId = '12345'; @@ -20,7 +20,7 @@ describe("|----- BACKEND User Actions -----|", () => { }); it('Sets user to ready', () => { - expect(readyPlayer(testUserId)).to.be.deep.equal({ + expect(startReady(testUserId)).to.be.deep.equal({ type: 'READY_PLAYER', playerId: testUserId }); From a642510a5ecd29efc4b2c749d4d2fb90bf335d69 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 14 Feb 2017 22:45:26 -0500 Subject: [PATCH 08/26] Update README.md --- README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/README.md b/README.md index 3b38ef1..68b9c8b 100644 --- a/README.md +++ b/README.md @@ -19,5 +19,4 @@ Handling of the game logic is distributed between the client and the server. Cli ## Set up on local machine - Clone the repository - npm install -- npm run build -- Server will run on port 3000 +- npm run build (server will run on port 3000) From 8d94ab4961b449f69b2acce907f79ad3dc9fc0ef Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Fri, 17 Feb 2017 13:50:37 -0500 Subject: [PATCH 09/26] Updated stylesheet --- public/index.html | 3 +- public/stylesheet.css | 188 +++++++++++++++++++++--------------------- 2 files changed, 95 insertions(+), 96 deletions(-) diff --git a/public/index.html b/public/index.html index 04189c1..04acd05 100644 --- a/public/index.html +++ b/public/index.html @@ -1,4 +1,3 @@ - @@ -7,7 +6,7 @@ - + diff --git a/public/stylesheet.css b/public/stylesheet.css index 9600adf..1a361d1 100644 --- a/public/stylesheet.css +++ b/public/stylesheet.css @@ -1,12 +1,12 @@ body, html { - height: 100%; - color: #ffffff; - font-size: 1em; - font-family: "Quicksand", sans-serif; - overflow: hidden; + height: 100%; + color: #ffffff; + font-size: 1em; + font-family: "Quicksand", sans-serif; + overflow: hidden; - background: url('./images/bluebike.jpg') no-repeat top center fixed; - background-size: cover; + background: url('./images/bluebike.jpg') no-repeat top center fixed; + background-size: cover; } button:focus { @@ -54,70 +54,70 @@ button:focus { } #name-box{ - font-weight: bold; - color: white; - position: fixed; - font-size: 4vh; - top: 55%; - left: 50%; - transform: translate(-50%, -50%); - width: 25vw; - height: 7vh; - border: 1px solid; - border-radius: 8px; - background-color: transparent; - text-align: center; + font-weight: bold; + color: white; + position: fixed; + font-size: 4vh; + top: 55%; + left: 50%; + transform: translate(-50%, -50%); + width: 25vw; + height: 7vh; + border: 1px solid; + border-radius: 8px; + background-color: transparent; + text-align: center; } #play-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: white; - position: fixed; - font-size: 3.5vh; - top: 65%; - left: 50%; - transform: translate(-50%, -50%); - border: 1px solid; - border-radius: 14px; - background-color: transparent; - text-align: center; - padding: 1vh 1vw; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: white; + position: fixed; + font-size: 3.5vh; + top: 65%; + left: 50%; + transform: translate(-50%, -50%); + border: 1px solid; + border-radius: 14px; + background-color: transparent; + text-align: center; + padding: 1vh 1vw; } #join-box { -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: white; - position: fixed; - font-size: 2.5vh; - top: 91%; - left: 82.5%; - transform: translate(-50%, -50%); - border: 1px solid; - border-radius: 6px; - background-color: transparent; - text-align: center; - padding: 2vh 2vw; - z-index: 3; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: white; + position: fixed; + font-size: 2.5vh; + top: 91%; + left: 82.5%; + transform: translate(-50%, -50%); + border: 1px solid; + border-radius: 6px; + background-color: transparent; + text-align: center; + padding: 2vh 2vw; + z-index: 3; } #music-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - color: white; - position: fixed;font-size: 2vh; - top: 90%; - left: 10%; - transform: translate(-50%, -50%); - border: 1px solid; - border-radius: 14px; - background-color: transparent; - text-align: center; - padding: 1vh 1vw; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + color: white; + position: fixed;font-size: 2vh; + top: 90%; + left: 10%; + transform: translate(-50%, -50%); + border: 1px solid; + border-radius: 14px; + background-color: transparent; + text-align: center; + padding: 1vh 1vw; } .glyphicon { @@ -156,9 +156,9 @@ ul { } #listName { -color: #c8c8c8; -background-color:#303030; -text-align: left + color: #c8c8c8; + background-color:#303030; + text-align: left } .listName-item{ @@ -169,39 +169,39 @@ text-align: left } #chat-box { - transform: scale(1.1,1.1); - font-size: 1.1em; - bottom: 20%; - margin-left: 18%; - position: fixed; - width: 75%; - max-width: 80em; - height: 60%; - z-index: 1; - float: right; - background: black; - border: 2px solid white; - border-radius: 10px; + transform: scale(1.1,1.1); + font-size: 1.1em; + bottom: 20%; + margin-left: 18%; + position: fixed; + width: 75%; + max-width: 80em; + height: 60%; + z-index: 1; + float: right; + background: black; + border: 2px solid white; + border-radius: 10px; } #chat-bar { - height: 3rem; - position: absolute; - bottom: -29%; - left: 3.9%; - width: 82%; - height: 12%; - transform: scale(1.1, 1.1); - background-color: grey; - margin-bottom: 5%; - box-sizing: inherit; - padding-top: 0.5em; - padding-left: 2.5%; - border-left: 1px solid #aaa; - border-bottom: 1px solid #aaa; - border-right: 1px solid #aaa; - border-radius: 10px; - color: black; + height: 3rem; + position: absolute; + bottom: -29%; + left: 3.9%; + width: 82%; + height: 12%; + transform: scale(1.1, 1.1); + background-color: grey; + margin-bottom: 5%; + box-sizing: inherit; + padding-top: 0.5em; + padding-left: 2.5%; + border-left: 1px solid #aaa; + border-bottom: 1px solid #aaa; + border-right: 1px solid #aaa; + border-radius: 10px; + color: black; } #message-box { From 49d247beacc03c8ea141d1d013dc79489e349857 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 21 Feb 2017 00:38:17 -0500 Subject: [PATCH 10/26] Updated Readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 68b9c8b..b44849b 100644 --- a/README.md +++ b/README.md @@ -2,21 +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 ## 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 run build (server will run on port 3000) +- npm start (Runs webpack and starts the server on port 3000) From bcab7c08b7294064e6f086a43a29543f4d2541c1 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 00:42:31 -0500 Subject: [PATCH 11/26] Going through code trying to clean up and fix bugs. Refactor --- browser/components/Game.js | 34 +++++++++++++++------------------- browser/reducers/players.js | 6 +++--- browser/socket.js | 14 +++++++++++--- server/serverSockets/socket.js | 5 +++-- 4 files changed, 32 insertions(+), 27 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index d89ab49..a9f4cb6 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -21,11 +21,6 @@ class Game extends Component { players.forEach(player => { player.si = setInterval(player.tail, 10); }); - myPlayer.ball.native.addEventListener('collision', (collidedWith) => { - // console.log("collidedWith", collidedWith); - socket.emit('ball-collision', {signature: myPlayer.signature, id: myPlayer.id}); - }); - cameraSetOnStart(myPlayer); } render() { @@ -34,8 +29,8 @@ class Game extends Component { TURN_AUDIO.load(); const player = this.props.mainPlayer; - player.ball.add(world.camera); const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; + player.ball.add(world.camera); document.addEventListener('keydown', (event) => { if (validKeys.includes(event.keyCode)) { @@ -44,19 +39,20 @@ class Game extends Component { } }); - return ( -
- { - this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null - } - { - this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null - } - { - this.props.mainPlayer.winner === true ? : null - } -
- ); + // { + // this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null + // } + // { + // this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null + // } + // return ( + // + // + // this.props.mainPlayer.winner ?
: null + // + // + // ); + return null; } } diff --git a/browser/reducers/players.js b/browser/reducers/players.js index 74eff97..dc783cb 100644 --- a/browser/reducers/players.js +++ b/browser/reducers/players.js @@ -34,9 +34,9 @@ export const onDeath = (player) => ({ player }); -export const declareWinner = (player) => ({ +export const declareWinner = (playerId) => ({ type: DECLARE_WINNER, - player + playerId }); /*---------- THUNK CREATORS ----------*/ @@ -84,7 +84,7 @@ export default (players = initialState, action) => { case DECLARE_WINNER: return players.map((player) => { - if (player.signature === action.player.signature){ + if (player.id === action.playerId){ player.winner = true; } return player; diff --git a/browser/socket.js b/browser/socket.js index af19db4..80ddf24 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -8,6 +8,8 @@ import world from './game/world'; import { cameraSet, collisionHandler } from './game/gamePlayFunctions'; import { declareWinner, onDeath } from './reducers/players'; +import { cameraSetOnStart } from './game/gamePlayFunctions'; + const socket = io('/'); export const initializeSocket = () => { @@ -27,6 +29,11 @@ export const initializeSocket = () => { const myUser = allUsers.find(user => user.id === localStorage.getItem('mySocketId')); const myBike = allBikes.find(bike => bike.id === myUser.id); store.dispatch(setMainPlayer(myBike)); + myBike.ball.native.addEventListener('collision', (collidedWith) => { + // console.log("collidedWith", collidedWith); + socket.emit('ball-collision', {signature: myBike.signature, id: myBike.id}); + }); + cameraSetOnStart(myBike); }); socket.on('addPlayerName', (socketId, playerName) => { @@ -85,11 +92,12 @@ export const initializeSocket = () => { store.dispatch(removePlayer(userId)); }); - socket.on('endGame', () => { - let lastStanding = store.getState().players.filter(player => player.status === 'alive')[0]; + socket.on('endGame', (lastStanding) => { + // let lastStanding = store.getState().players.filter(player => player.status === 'alive')[0]; console.log("lastStanding", lastStanding); store.dispatch(declareWinner(lastStanding)); - setTimeout(() => window.location.reload(true), 10000); + console.log("END GAME", store.getState().players); + // setTimeout(() => window.location.reload(true), 10000); }); }; diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index 4709819..b5d3166 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -62,8 +62,9 @@ module.exports = io => { console.log(chalk.red(store.getState().users.filter(user => user.active === true).length)); } - if (store.getState().users.filter(user => user.active === true).length === 1){ - io.sockets.emit('endGame'); + const lastStanding = store.getState().users.filter(user => user.active); + if (lastStanding.length === 1){ + io.sockets.emit('endGame', lastStanding[0].id); } }); From 3e17ff5d318b73a4abac611f5311f52dabfcb7a5 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 01:16:34 -0500 Subject: [PATCH 12/26] Seems I got automatic dying fixed... --- browser/components/Game.js | 60 +++++++++++++++---------------- browser/game/gamePlayFunctions.js | 4 +-- browser/socket.js | 3 +- server/reducers/users.js | 12 +++---- 4 files changed, 37 insertions(+), 42 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index a9f4cb6..40b200f 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -9,50 +9,46 @@ import { DeadNoWinner, Winner, DeadWithWinner} from './InGame'; console.log("SOCKET ID LOCAL STORAGE (IN THE FRONT END)", localStorage.getItem('mySocketId')); -class Game extends Component { - constructor(props) { - super(props); +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]; + const player = store.getState().mainPlayer; + if (validKeys.includes(event.keyCode)) { + turnPlayer(event.keyCode, player); + TURN_AUDIO.play(); } +}); + +class Game extends Component { componentDidMount() { const players = this.props.players; const myPlayer = this.props.mainPlayer; world.start(); + cameraSetOnStart(myPlayer); players.forEach(player => { player.si = setInterval(player.tail, 10); }); + myPlayer.ball.add(world.camera); } render() { - const TURN_AUDIO = document.createElement('audio'); - TURN_AUDIO.src = 'mp3/shortBikeTurn.m4a'; - TURN_AUDIO.load(); - - const player = this.props.mainPlayer; - const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; - player.ball.add(world.camera); - - document.addEventListener('keydown', (event) => { - if (validKeys.includes(event.keyCode)) { - turnPlayer(event.keyCode, this.props.mainPlayer); - TURN_AUDIO.play(); - } - }); - - // { - // this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null - // } - // { - // this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null - // } - // return ( - // - // - // this.props.mainPlayer.winner ?
: null - // - // - // ); - return null; + return ( +
+ { + this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null + } + { + this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null + } + + { + this.props.mainPlayer.winner ? : null + } +
+ ); } } diff --git a/browser/game/gamePlayFunctions.js b/browser/game/gamePlayFunctions.js index ef6d90e..030b41e 100644 --- a/browser/game/gamePlayFunctions.js +++ b/browser/game/gamePlayFunctions.js @@ -112,13 +112,13 @@ export const collisionHandler = player => { world.scene.remove(player.ball.native); world.scene.remove(player.bike.native); if (player.id === me.id) { - player.ball.remove(world.camera); + me.ball.remove(world.camera); world.setControls(new WHS.OrbitControls()); store.dispatch(onDeathMainPlayer(me)); } // WHEN THIS IS USED WE GET OUR PROBLEM - // store.dispatch(onDeath(player)); + store.dispatch(onDeath(player)); if (player.walls.length !== 0) { player.walls.forEach(wall => world.scene.remove(wall.native)); } diff --git a/browser/socket.js b/browser/socket.js index 80ddf24..219b6e0 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -33,7 +33,6 @@ export const initializeSocket = () => { // console.log("collidedWith", collidedWith); socket.emit('ball-collision', {signature: myBike.signature, id: myBike.id}); }); - cameraSetOnStart(myBike); }); socket.on('addPlayerName', (socketId, playerName) => { @@ -97,7 +96,7 @@ export const initializeSocket = () => { console.log("lastStanding", lastStanding); store.dispatch(declareWinner(lastStanding)); console.log("END GAME", store.getState().players); - // setTimeout(() => window.location.reload(true), 10000); + setTimeout(() => window.location.reload(true), 10000); }); }; diff --git a/server/reducers/users.js b/server/reducers/users.js index 4617052..f104a81 100644 --- a/server/reducers/users.js +++ b/server/reducers/users.js @@ -58,12 +58,12 @@ const removeUserAndEmit = socket => { // }; /* --------------- REDUCER --------------- */ const initialState = [ - {id: ''}, - {id: ''}, - {id: ''}, - {id: ''}, - {id: ''}, - {id: ''} + {id: '', active: false, readyToPlay: false}, + {id: '', active: false, readyToPlay: false}, + {id: '', active: false, readyToPlay: false}, + {id: '', active: false, readyToPlay: false}, + {id: '', active: false, readyToPlay: false}, + {id: '', active: false, readyToPlay: false} ]; function userReducer (state = initialState, action) { From cab8140271d075ceb17b606199d545dda19a6423 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 02:20:23 -0500 Subject: [PATCH 13/26] Moved collision event listener to socket file and put it where we set mainPlayer. No more crashing out of nowhere. --- browser/components/App.js | 2 +- browser/components/Game.js | 51 +++++++++++++++++---------------- browser/components/Landing.js | 39 +++++++++++++------------ browser/components/LobbyRoom.js | 4 +-- browser/socket.js | 1 - server/serverSockets/socket.js | 9 ++---- 6 files changed, 51 insertions(+), 55 deletions(-) diff --git a/browser/components/App.js b/browser/components/App.js index 7758f7c..1f1d56b 100644 --- a/browser/components/App.js +++ b/browser/components/App.js @@ -10,7 +10,7 @@ const App = ({ gameState }) => {
{gameState.isEnter && !gameState.isPlaying && } {!gameState.isEnter && !gameState.isPlaying && } - {gameState.isPlaying && } + {gameState.isPlaying && }
); }; diff --git a/browser/components/Game.js b/browser/components/Game.js index 40b200f..513994c 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -9,17 +9,6 @@ import { DeadNoWinner, Winner, DeadWithWinner} from './InGame'; console.log("SOCKET ID LOCAL STORAGE (IN THE FRONT END)", localStorage.getItem('mySocketId')); -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]; - const player = store.getState().mainPlayer; - if (validKeys.includes(event.keyCode)) { - turnPlayer(event.keyCode, player); - TURN_AUDIO.play(); - } -}); class Game extends Component { @@ -32,23 +21,35 @@ class Game extends Component { player.si = setInterval(player.tail, 10); }); myPlayer.ball.add(world.camera); + + 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]; + const player = store.getState().mainPlayer; + if (validKeys.includes(event.keyCode)) { + turnPlayer(event.keyCode, player); + TURN_AUDIO.play(); + } + }); } render() { - return ( -
- { - this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null - } - { - this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null - } - - { - this.props.mainPlayer.winner ? : null - } -
- ); + return ( +
+ { + this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null + } + { + this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null + } + + { + this.props.mainPlayer.winner ? : null + } +
+ ); } } diff --git a/browser/components/Landing.js b/browser/components/Landing.js index 317a15c..cdaabec 100644 --- a/browser/components/Landing.js +++ b/browser/components/Landing.js @@ -15,29 +15,26 @@ import store from '../store'; class Landing extends Component { constructor(props) { super(props); - // this.readyPlayerEmitter = this.readyPlayerEmitter.bind(this); + // this.playerNameEmitter = this.playerNameEmitter.bind(this); } + // playerNameEmitter(event) { + // event.preventDefault(); + // console.log("GETTING HERE?"); + // const socketId = localStorage.getItem('mySocketId'); + // const playerName = event.target.nickName.value; + // socket.emit('playerName', socketId, playerName); + // // store.dispatch(addPlayerName(socketId, event.target.nickName.value)); + // store.dispatch(enterLobby()); + // } render() { - function playerNameEmitter(event) { - event.preventDefault(); - console.log("GETTING HERE?"); - const socketId = localStorage.getItem('mySocketId'); - const playerName = event.target.nickName.value; - socket.emit('playerName', socketId, playerName); - store.dispatch(addPlayerName(socketId, event.target.nickName.value)); - store.dispatch(enterLobby()); - } - - //let { isPlaying } = this.props.gameState; - // let { bugReportOpen } = this.props.controlPanel; return (
3D TRON
-
+ Enter
@@ -69,9 +65,16 @@ class Landing extends Component { const mapStateToProps = ({ gameState, players, musicPlayer }) => ({ gameState, players, musicPlayer }); const mapDispatchToProps = dispatch => ({ - enterLobby: () => dispatch(enterLobby()), - setPlayerName: e => dispatch(addPlayerName(localStorage.getItem('mySocketId'), e.target.nickName.value)), - toggleSong: event => dispatch(toggleSong()) + playerNameEmitter: (event) => { + event.preventDefault(); + console.log("GETTING HERE?"); + const socketId = localStorage.getItem('mySocketId'); + const playerName = event.target.nickName.value; + socket.emit('playerName', socketId, playerName); + // store.dispatch(addPlayerName(socketId, event.target.nickName.value)); + store.dispatch(enterLobby()); + }, + toggleSong: () => dispatch(toggleSong()) }); export default connect(mapStateToProps, mapDispatchToProps)(Landing); diff --git a/browser/components/LobbyRoom.js b/browser/components/LobbyRoom.js index c52cf88..b851481 100644 --- a/browser/components/LobbyRoom.js +++ b/browser/components/LobbyRoom.js @@ -51,9 +51,7 @@ class LobbyRoom extends Component { } const mapStateToProps = ({ gameState, players}) => ({ gameState, players }); -const mapDispatchToProps = dispatch => ({ - addPlayerName: e => dispatch(addPlayerName(localStorage.getItem('mySocketId'), e.target.value)) -}); +const mapDispatchToProps = null; export default connect( mapStateToProps, diff --git a/browser/socket.js b/browser/socket.js index 219b6e0..4bb147b 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -92,7 +92,6 @@ export const initializeSocket = () => { }); socket.on('endGame', (lastStanding) => { - // let lastStanding = store.getState().players.filter(player => player.status === 'alive')[0]; console.log("lastStanding", lastStanding); store.dispatch(declareWinner(lastStanding)); console.log("END GAME", store.getState().players); diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index b5d3166..576f34d 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -24,7 +24,7 @@ module.exports = io => { socket.on('playerName', (socketId, playerName) => { store.dispatch(addUserName(socketId, playerName)); - socket.broadcast.emit('addPlayerName', socketId, playerName); + io.sockets.emit('addPlayerName', socketId, playerName); }); socket.on('newMessage', (message, socketId) => { @@ -37,13 +37,8 @@ module.exports = io => { store.dispatch(startReady(playerId)); let checkReadyUsers = store.getState().users.filter(user => user.id); -// gamePlay -// if (checkReadyUsers.length > 1 && - - -// test for debug if (checkReadyUsers.length >= 1 && - checkReadyUsers.length === checkReadyUsers.filter(user => user.readyToPlay === true).length) { + checkReadyUsers.length === checkReadyUsers.filter(user => user.readyToPlay).length) { // if (users.filter(user => user.readyToPlay).length === 3) { io.sockets.emit('startGame'); } From fe84bf5e882c302bbeca6a00dadf520cb843482d Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 14:58:53 -0500 Subject: [PATCH 14/26] =?UTF-8?q?Moved=C2=A0collision=C2=A0listener=C2=A0b?= =?UTF-8?q?ack=C2=A0to=C2=A0componentDidMount=C2=A0in=C2=A0Game=C2=A0Compo?= =?UTF-8?q?nent=20.=C2=A0Clean=C2=A0up.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- browser/components/Game.js | 10 +++++---- browser/components/Landing.js | 37 +------------------------------ browser/game/gamePlayFunctions.js | 3 ++- browser/reducers/players.js | 2 -- browser/socket.js | 22 ++++-------------- public/index.html | 2 +- public/stylesheet.css | 2 +- server/reducers/users.js | 7 +----- server/serverSockets/socket.js | 2 -- 9 files changed, 16 insertions(+), 71 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index 513994c..5714af3 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -7,20 +7,22 @@ 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')); - - class Game extends Component { componentDidMount() { const players = this.props.players; const myPlayer = this.props.mainPlayer; world.start(); + myPlayer.ball.add(world.camera); cameraSetOnStart(myPlayer); players.forEach(player => { player.si = setInterval(player.tail, 10); }); - myPlayer.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 TURN_AUDIO = document.createElement('audio'); diff --git a/browser/components/Landing.js b/browser/components/Landing.js index cdaabec..647e4ef 100644 --- a/browser/components/Landing.js +++ b/browser/components/Landing.js @@ -13,23 +13,8 @@ import store from '../store'; // import BugReportForm from './BugReportForm'; class Landing extends Component { - constructor(props) { - super(props); - // this.playerNameEmitter = this.playerNameEmitter.bind(this); - } - - // playerNameEmitter(event) { - // event.preventDefault(); - // console.log("GETTING HERE?"); - // const socketId = localStorage.getItem('mySocketId'); - // const playerName = event.target.nickName.value; - // socket.emit('playerName', socketId, playerName); - // // store.dispatch(addPlayerName(socketId, event.target.nickName.value)); - // store.dispatch(enterLobby()); - // } render() { - return (
3D TRON
@@ -67,32 +52,12 @@ const mapStateToProps = ({ gameState, players, musicPlayer }) => ({ gameState, p const mapDispatchToProps = dispatch => ({ playerNameEmitter: (event) => { event.preventDefault(); - console.log("GETTING HERE?"); const socketId = localStorage.getItem('mySocketId'); const playerName = event.target.nickName.value; socket.emit('playerName', socketId, playerName); - // store.dispatch(addPlayerName(socketId, event.target.nickName.value)); - store.dispatch(enterLobby()); + dispatch(enterLobby()); }, toggleSong: () => dispatch(toggleSong()) }); export default connect(mapStateToProps, mapDispatchToProps)(Landing); - -// onClick = { this.props.enterLobby } - -//
-// -// -//
diff --git a/browser/game/gamePlayFunctions.js b/browser/game/gamePlayFunctions.js index 030b41e..98ddc37 100644 --- a/browser/game/gamePlayFunctions.js +++ b/browser/game/gamePlayFunctions.js @@ -117,8 +117,9 @@ export const collisionHandler = player => { store.dispatch(onDeathMainPlayer(me)); } - // WHEN THIS IS USED WE GET OUR PROBLEM + // WHEN THIS IS USED WE (used to) GET OUR PROBLEM store.dispatch(onDeath(player)); + if (player.walls.length !== 0) { player.walls.forEach(wall => world.scene.remove(wall.native)); } diff --git a/browser/reducers/players.js b/browser/reducers/players.js index dc783cb..c79920c 100644 --- a/browser/reducers/players.js +++ b/browser/reducers/players.js @@ -1,6 +1,4 @@ import allPlayers from '../game/players'; -import world from '../game/world'; -import store from '../store'; /*---------- INITIAL STATE ----------*/ const initialState = allPlayers; diff --git a/browser/socket.js b/browser/socket.js index 4bb147b..d270470 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -1,14 +1,11 @@ import store from './store'; -import { setPlayerId, updatePlayer, addPlayerName, removePlayer } from './reducers/players'; -import { startGame, stopGame} from './reducers/gameState'; +import { setPlayerId, addPlayerName, removePlayer, declareWinner } from './reducers/players'; +import { startGame } from './reducers/gameState'; import { setMainPlayer } from './reducers/mainPlayer'; import { receiveMessage } from './reducers/messages'; import { left, right, up, down } from './game/turnFunctions'; import world from './game/world'; import { cameraSet, collisionHandler } from './game/gamePlayFunctions'; -import { declareWinner, onDeath } from './reducers/players'; - -import { cameraSetOnStart } from './game/gamePlayFunctions'; const socket = io('/'); @@ -24,31 +21,21 @@ export const initializeSocket = () => { socket.on('addUser', (allUsers) => { store.dispatch(setPlayerId(allUsers)); - console.log('ALL USERS ****', allUsers); - const myUser = allUsers.find(user => user.id === localStorage.getItem('mySocketId')); const myBike = allBikes.find(bike => bike.id === myUser.id); store.dispatch(setMainPlayer(myBike)); - myBike.ball.native.addEventListener('collision', (collidedWith) => { - // console.log("collidedWith", collidedWith); - socket.emit('ball-collision', {signature: myBike.signature, id: myBike.id}); - }); }); socket.on('addPlayerName', (socketId, playerName) => { - console.log("ADD OTHER PLAYERS NAME", socketId, playerName); store.dispatch(addPlayerName(socketId, playerName)); }); socket.on('addNewMessage', (text, senderName) => { - console.log("RECEIVE MESSAGE & SENDERNAME FRONTEND ***", text, senderName); store.dispatch(receiveMessage({text: text, name: senderName})); - }); socket.on('startGame', () => { allBikes.forEach(player => { - console.log(player); if (!player.id) { world.scene.remove(player.ball.native); world.scene.remove(player.bike.native); @@ -87,14 +74,13 @@ export const initializeSocket = () => { }); socket.on('removePlayer', userId => { - console.log("ARE WE REMOVING PLAYER ON THE FRONT END?"); store.dispatch(removePlayer(userId)); }); socket.on('endGame', (lastStanding) => { - console.log("lastStanding", lastStanding); + // console.log("lastStanding", lastStanding); store.dispatch(declareWinner(lastStanding)); - console.log("END GAME", store.getState().players); + // console.log("END GAME", store.getState().players); setTimeout(() => window.location.reload(true), 10000); }); }; diff --git a/public/index.html b/public/index.html index 04acd05..5893f08 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - + diff --git a/public/stylesheet.css b/public/stylesheet.css index 1a361d1..6a1b153 100644 --- a/public/stylesheet.css +++ b/public/stylesheet.css @@ -5,7 +5,7 @@ body, html { font-family: "Quicksand", sans-serif; overflow: hidden; - background: url('./images/bluebike.jpg') no-repeat top center fixed; + /*background: url('./images/bluebike.jpg') no-repeat top center fixed;*/ background-size: cover; } diff --git a/server/reducers/users.js b/server/reducers/users.js index f104a81..9870ec1 100644 --- a/server/reducers/users.js +++ b/server/reducers/users.js @@ -51,11 +51,6 @@ const removeUserAndEmit = socket => { }; }; -// const startReady = playerId => { -// return dispatch => { -// dispatch(readyPlayer(playerId)); -// }; -// }; /* --------------- REDUCER --------------- */ const initialState = [ {id: '', active: false, readyToPlay: false}, @@ -66,7 +61,7 @@ const initialState = [ {id: '', active: false, readyToPlay: false} ]; -function userReducer (state = initialState, action) { +function userReducer(state = initialState, action) { const newUser = [...state]; diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index 576f34d..3d7b92b 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -16,12 +16,10 @@ module.exports = io => { // New user enters; create new user and new user appears for everyone else store.dispatch(createAndEmitUser(socket)); const allUsers = store.getState().users; - console.log("ALL USERS", allUsers); io.sockets.emit('addUser', allUsers); //Player ready in landing page //We need to update this so that game starting works smoothly - socket.on('playerName', (socketId, playerName) => { store.dispatch(addUserName(socketId, playerName)); io.sockets.emit('addPlayerName', socketId, playerName); From f7638f2e5d42d4284b0659240a67a22169c35e81 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 15:15:15 -0500 Subject: [PATCH 15/26] Delete extra packages from package.json --- package.json | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/package.json b/package.json index dc49702..09f246e 100644 --- a/package.json +++ b/package.json @@ -27,20 +27,11 @@ "bcrypt": "^0.8.7", "bluebird": "^3.4.6", "body-parser": "^1.15.2", - "cannon": "github:schteppe/cannon.js", "chalk": "^1.1.3", - "classnames": "^2.2.5", - "cookie-session": "^2.0.0-alpha.2", "express": "^4.14.0", - "jquery": "^3.1.1", - "json-loader": "^0.5.4", "lodash": "^4.17.4", - "materialize-css": "^0.97.8", "mathjs": "^3.9.0", - "morgan": "^1.7.0", "nodemon": "^1.11.0", - "passport": "^0.3.2", - "passport-local": "^1.0.0", "pg": "^6.1.0", "pg-hstore": "^2.3.2", "react": "^15.4.2", @@ -49,14 +40,11 @@ "react-redux": "^4.4.6", "react-router": "^3.0.0", "redux": "^3.6.0", - "redux-devtools-extension": "^1.0.0", "redux-logger": "^2.7.4", "redux-thunk": "^2.1.0", "sequelize": "^3.26.0", "socket.io": "^1.7.2", "swearjar": "^0.1.3", - "three": "^0.82.1", - "three.js": "^0.77.1", "volleyball": "^1.4.1", "webpack": "^1.13.3", "whitestormjs": "^0.11.2", From 3d08a3d20afaa15b4331d6fa3c68a47781e908f4 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 15:53:14 -0500 Subject: [PATCH 16/26] Cleaned up react components. Fixed server users reducer test. --- browser/components/App.js | 25 ++++----- browser/components/Chat.js | 59 +++++++++----------- browser/components/InGame.js | 80 ++++++++++++---------------- browser/components/Landing.js | 76 +++++++++++--------------- browser/game/playerConstructor.js | 2 - tests/server/redux/reducers/users.js | 2 +- 6 files changed, 101 insertions(+), 143 deletions(-) diff --git a/browser/components/App.js b/browser/components/App.js index 1f1d56b..5645b73 100644 --- a/browser/components/App.js +++ b/browser/components/App.js @@ -1,26 +1,19 @@ -import React, { Component } from 'react'; +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 ( -
- {gameState.isEnter && !gameState.isPlaying && } - {!gameState.isEnter && !gameState.isPlaying && } - {gameState.isPlaying && } -
- ); -}; -// if(this.props.gameState === 'landing') render Landing -// if asdfasd = playing || dead render game +const App = ({ gameState }) => ( +
+ { gameState.isEnter && !gameState.isPlaying && } + { !gameState.isEnter && !gameState.isPlaying && } + { gameState.isPlaying && } +
+); const mapStateToProps = ({ gameState }) => ({ gameState }); const mapDispatchToProps = null; -export default connect( - mapStateToProps, - mapDispatchToProps -)(App); +export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/browser/components/Chat.js b/browser/components/Chat.js index 2da0b05..8667c48 100644 --- a/browser/components/Chat.js +++ b/browser/components/Chat.js @@ -3,8 +3,6 @@ import { connect } from 'react-redux'; import socket from '../socket'; import { startChat, stopChat } from '../reducers/gameState'; - - class Chat extends Component { constructor(props){ super(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,39 +33,34 @@ class Chat extends Component { render() { return (
-
-
    - { this.props.messages && this.props.messages.map((message, i) => { - return ( -
  • - {`${message.name}: ${message.text}`} -
  • - ) - })} -
-
- { if (evt.key === 'Enter') this.sendMessage(); }} - maxLength={70} - type="text" - id="chat-bar" - placeholder="press 'enter' to send" /> +
+
    + { this.props.messages && this.props.messages.map((message, i) => { + return ( +
  • + {`${message.name}: ${message.text}`} +
  • + ); + })} +
+
+ { if (evt.key === 'Enter') this.sendMessage(); }} + maxLength={70} + type="text" + id="chat-bar" + placeholder="press 'enter' to send" />
- ); + ); } } const mapStateToProps = ({ messages, gameState }) => ({ messages, gameState }); +const mapDispatchToProps = null; -const mapDispatchToProps = dispatch => ({ -}); - -export default connect( - mapStateToProps, - mapDispatchToProps -)(Chat); +export default connect(mapStateToProps, mapDispatchToProps)(Chat); diff --git a/browser/components/InGame.js b/browser/components/InGame.js index aa66702..045df33 100644 --- a/browser/components/InGame.js +++ b/browser/components/InGame.js @@ -1,51 +1,37 @@ -import React, { Component } from 'react'; +import React from 'react'; +import { connect } from 'react-redux'; -export const DeadNoWinner = () => { - return( -
-
-
You Crashed!
-
-
- Click and drag with your mouse to watch the rest of the game! -
-
- ) -} +export const DeadNoWinner = () => ( +
+
+
You Crashed!
+
+
+ Click and drag with your mouse to watch the rest of the game! +
+
+); -export const Winner = () => { - return( -
-
-
You Win!
-
-
- Game will reload home page soon -
-
- ) -} +export const Winner = () => ( +
+
+
You Win!
+
+
+ Game will reload home page soon +
+
+); -class dWW extends Component { - constructor(props){ - super(props) - } - render(){ - let winner = this.props.players.filter(player => player.winner === true)[0].playerName - return( -
-
-
{winner} Wins!
-
-
- Game will reload home page soon -
-
- ) +const DeadWithWinner = ({ players }) => ( +
+
+
{players.find(player => player.winner).playerName} Wins!
+
+
+ Game will reload home page soon +
+
+); - } -} - -import { connect } from 'react-redux' - -export const DeadWithWinner = connect(({ players }) => ({ players }))(dWW) \ No newline at end of file +export default connect(({ players }) => ({ players }))(DeadWithWinner); diff --git a/browser/components/Landing.js b/browser/components/Landing.js index 647e4ef..ec96dad 100644 --- a/browser/components/Landing.js +++ b/browser/components/Landing.js @@ -1,54 +1,42 @@ -import React, { Component } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; import socket from '../socket'; -import { addPlayerName } from '../reducers/players'; import { enterLobby } from '../reducers/gameState'; import { toggleSong } from '../reducers/musicPlayer'; -import world from '../game/world'; -import store from '../store'; -//not needed yet -// import ControlPanel from './ControlPanel'; -// import BugReportForm from './BugReportForm'; +const Landing = ({ musicPlayer, playerNameEmitter, toggleSong }) => ( +
+
3D TRON
+
+
+ + +
+ +
+
Use "w a s d" or arrow keys to turn
+
+); -class Landing extends Component { - - render() { - return ( -
-
3D TRON
-
-
- - - -
- -
-
Use "w a s d" or arrow keys to turn
-
- ); - } -} - -const mapStateToProps = ({ gameState, players, musicPlayer }) => ({ gameState, players, musicPlayer }); +const mapStateToProps = ({ musicPlayer }) => ({ musicPlayer }); const mapDispatchToProps = dispatch => ({ playerNameEmitter: (event) => { event.preventDefault(); diff --git a/browser/game/playerConstructor.js b/browser/game/playerConstructor.js index 563e49a..12b344d 100644 --- a/browser/game/playerConstructor.js +++ b/browser/game/playerConstructor.js @@ -11,8 +11,6 @@ const sphereBase = new WHS.Sphere({ } }); - - export default function PlayerConstructor(color){ let that = this that.ball = sphereBase.clone(); diff --git a/tests/server/redux/reducers/users.js b/tests/server/redux/reducers/users.js index bd2a819..fabcb13 100644 --- a/tests/server/redux/reducers/users.js +++ b/tests/server/redux/reducers/users.js @@ -14,7 +14,7 @@ describe("|----- BACKEND User Reducer -----|", () => { it('has proper initial state', () => { expect(testStore.getState()).to.be.deep.equal([ - {id: ''}, {id: ''}, {id: ''}, {id: ''}, {id: ''}, {id: ''} + {id: '', active: false, readyToPlay: false}, {id: '', active: false, readyToPlay: false}, {id: '', active: false, readyToPlay: false}, {id: '', active: false, readyToPlay: false}, {id: '', active: false, readyToPlay: false}, {id: '', active: false, readyToPlay: false} ]); }); From fd2b86ecf50be0ac9d536dafee0b8da56f09c3ea Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 16:20:12 -0500 Subject: [PATCH 17/26] Passed down props directly to DeadWithWinner component. --- browser/components/Game.js | 7 +++---- browser/components/InGame.js | 4 +--- browser/game/directionsFunctions.js | 2 -- 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index 5714af3..1b8db40 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -5,7 +5,7 @@ import { turnPlayer } from '../game/directionsFunctions'; import store from '../store'; import socket from '../socket'; import { cameraSetOnStart } from '../game/gamePlayFunctions'; -import { DeadNoWinner, Winner, DeadWithWinner} from './InGame'; +import { DeadNoWinner, Winner, DeadWithWinner } from './InGame'; class Game extends Component { @@ -29,9 +29,8 @@ class Game extends Component { TURN_AUDIO.src = 'mp3/shortBikeTurn.m4a'; TURN_AUDIO.load(); const validKeys = [37, 39, 38, 40, 87, 65, 83, 68]; - const player = store.getState().mainPlayer; if (validKeys.includes(event.keyCode)) { - turnPlayer(event.keyCode, player); + turnPlayer(event.keyCode, myPlayer); TURN_AUDIO.play(); } }); @@ -44,7 +43,7 @@ class Game extends Component { this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null } { - this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null + this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null } { diff --git a/browser/components/InGame.js b/browser/components/InGame.js index 045df33..59ce93d 100644 --- a/browser/components/InGame.js +++ b/browser/components/InGame.js @@ -23,7 +23,7 @@ export const Winner = () => (
); -const DeadWithWinner = ({ players }) => ( +export const DeadWithWinner = ({ players }) => (
{players.find(player => player.winner).playerName} Wins!
@@ -33,5 +33,3 @@ const DeadWithWinner = ({ players }) => (
); - -export default connect(({ players }) => ({ players }))(DeadWithWinner); diff --git a/browser/game/directionsFunctions.js b/browser/game/directionsFunctions.js index 0237370..65d9714 100644 --- a/browser/game/directionsFunctions.js +++ b/browser/game/directionsFunctions.js @@ -2,8 +2,6 @@ import world, { speed } from './world'; import store from '../store'; import socket from '../socket'; -// const me = store.getState().mainPlayer; - const turnLeft = (player) => { socket.emit('directionChange', { id: player.id, From 04d1b4cbff8a42de4f2e511e1750aeb52e184112 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 16:24:52 -0500 Subject: [PATCH 18/26] Delete import connect from InGame file --- browser/components/InGame.js | 1 - 1 file changed, 1 deletion(-) diff --git a/browser/components/InGame.js b/browser/components/InGame.js index 59ce93d..222d724 100644 --- a/browser/components/InGame.js +++ b/browser/components/InGame.js @@ -1,5 +1,4 @@ import React from 'react'; -import { connect } from 'react-redux'; export const DeadNoWinner = () => (
From cd4de9d94e57d3f45c82a8b146457386717ca960 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Sun, 26 Feb 2017 16:27:21 -0500 Subject: [PATCH 19/26] .DS_Store banished! --- .DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index 44dd219e47ebdd40c771c6906cca92731924029e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK%TB{U3>-s+DwRWz9QPOagH=_&pdSEgQz4{~pjPFaTYsDJ1Jo+v$^qGucd}lO zSD8Z`1CZ6Jc?6aK=5$4zbs3wUtB>p^B8p-)p7D+z4NhoB+0y~#-lH?t9+&(*j?Hn` zZu{P9-Qj~}w=DdI-RI`ewSD*M7f)BtXey8jqynixDv%0HDZrksHeWdAnhK->slbl{ z`h6&L#Tqy`+NXnyjR3?M!)AQ8S%O$JK&*j-BO^3%D$%JDBZfGg@e+A8aBy@w#BOGt zxLIOC5xbr7V(F0Tm}@GK3S292>)WOF|0nt{^Zzv|cd0-s@UIk**?O~H@s*;tj$TfC vZK1!=zm2(;&c#|W(ONM#+KL}8@`^t5yao=AMrYjU#QYIZUD8s4zfj-{v1=QQ From 2313d017e5aaa0548fec5274ccc1179035f0964e Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 28 Feb 2017 20:26:45 -0500 Subject: [PATCH 20/26] Move redux-devtools-extension to regular depen. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 09f246e..d78e708 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "react-redux": "^4.4.6", "react-router": "^3.0.0", "redux": "^3.6.0", + "redux-devtools-extension": "^1.0.0", "redux-logger": "^2.7.4", "redux-thunk": "^2.1.0", "sequelize": "^3.26.0", @@ -56,7 +57,6 @@ "enzyme": "^2.7.1", "mocha": "^2.3.3", "react-addons-test-utils": "^15.4.0", - "redux-devtools-extension": "^1.0.0", "sinon": "^1.17.7", "supertest": "^1.1.0", "supertest-as-promised": "^3.1.0" From c1374d012acd6f1c0a954db3b4c5832efe7d6494 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Tue, 28 Feb 2017 20:37:56 -0500 Subject: [PATCH 21/26] Move nodemon to dev dep. --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d78e708..3f7cf00 100644 --- a/package.json +++ b/package.json @@ -31,7 +31,6 @@ "express": "^4.14.0", "lodash": "^4.17.4", "mathjs": "^3.9.0", - "nodemon": "^1.11.0", "pg": "^6.1.0", "pg-hstore": "^2.3.2", "react": "^15.4.2", @@ -59,6 +58,7 @@ "react-addons-test-utils": "^15.4.0", "sinon": "^1.17.7", "supertest": "^1.1.0", - "supertest-as-promised": "^3.1.0" + "supertest-as-promised": "^3.1.0", + "nodemon": "^1.11.0" } } From c62055fd330801ff4aca1deebf0a685dbaab7638 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Wed, 1 Mar 2017 01:36:26 -0500 Subject: [PATCH 22/26] Made game reload when game only had one player. --- browser/components/Game.js | 2 +- browser/components/InGame.js | 6 +++--- browser/components/Landing.js | 4 ++-- server/serverSockets/socket.js | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/browser/components/Game.js b/browser/components/Game.js index 1b8db40..133ea85 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -43,7 +43,7 @@ class Game extends Component { this.props.mainPlayer.status === 'dead' && this.props.players.filter(player => player.winner === true).length === 0 ? : null } { - this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner === true).length === 1 ? : null + this.props.mainPlayer.status === 'dead' && !this.props.mainPlayer.winner && this.props.players.filter(player => player.winner).length === 1 ? : null } { diff --git a/browser/components/InGame.js b/browser/components/InGame.js index 222d724..91a440d 100644 --- a/browser/components/InGame.js +++ b/browser/components/InGame.js @@ -2,7 +2,7 @@ import React from 'react'; export const DeadNoWinner = () => (
-
+
You Crashed!
@@ -13,7 +13,7 @@ export const DeadNoWinner = () => ( export const Winner = () => (
-
+
You Win!
@@ -24,7 +24,7 @@ export const Winner = () => ( export const DeadWithWinner = ({ players }) => (
-
+
{players.find(player => player.winner).playerName} Wins!
diff --git a/browser/components/Landing.js b/browser/components/Landing.js index ec96dad..91688f9 100644 --- a/browser/components/Landing.js +++ b/browser/components/Landing.js @@ -6,9 +6,9 @@ import { enterLobby } from '../reducers/gameState'; import { toggleSong } from '../reducers/musicPlayer'; const Landing = ({ musicPlayer, playerNameEmitter, toggleSong }) => ( -
+
3D TRON
-
+
{ console.log(chalk.red(store.getState().users.filter(user => user.active === true).length)); } - const lastStanding = store.getState().users.filter(user => user.active); - if (lastStanding.length === 1){ - io.sockets.emit('endGame', lastStanding[0].id); + const alivePlayers = store.getState().users.filter(user => user.active); + if (alivePlayers.length <= 1) { + io.sockets.emit('endGame', alivePlayers[0] ? alivePlayers[0].id : store.getState().users[0].id); } }); From c61f959696d791ca86f3b84fc05d64fe1732b7b7 Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Wed, 1 Mar 2017 16:50:11 -0500 Subject: [PATCH 23/26] Got rid of redux dev tools as they were creating an issue. --- browser/store.js | 3 +-- package.json | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/browser/store.js b/browser/store.js index 0152b85..f317087 100644 --- a/browser/store.js +++ b/browser/store.js @@ -1,9 +1,8 @@ import { createStore, applyMiddleware } from 'redux'; import createLogger from 'redux-logger'; import thunkMiddleware from 'redux-thunk'; -import { composeWithDevTools } from 'redux-devtools-extension'; import rootReducer from './reducers'; -const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(createLogger(), thunkMiddleware))); +const store = createStore(rootReducer, applyMiddleware(createLogger(), thunkMiddleware)); export default store; diff --git a/package.json b/package.json index 3f7cf00..1c9cca9 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "react-redux": "^4.4.6", "react-router": "^3.0.0", "redux": "^3.6.0", - "redux-devtools-extension": "^1.0.0", "redux-logger": "^2.7.4", "redux-thunk": "^2.1.0", "sequelize": "^3.26.0", From 1292fa2855024d50c4c95b87846ab43cb94bb18c Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Wed, 1 Mar 2017 22:12:15 -0500 Subject: [PATCH 24/26] Add use strict to files --- browser/components/App.js | 1 + browser/components/Chat.js | 2 +- browser/components/Game.js | 5 +++-- browser/components/InGame.js | 1 + browser/components/Landing.js | 1 + browser/components/LobbyRoom.js | 1 + browser/game/directionsFunctions.js | 3 +-- browser/game/field.js | 1 + browser/game/world.js | 1 + browser/reducers/gameState.js | 1 + browser/reducers/index.js | 1 + browser/reducers/mainPlayer.js | 1 + browser/reducers/messages.js | 1 + browser/reducers/musicPlayer.js | 1 + browser/reducers/players.js | 1 + browser/socket.js | 3 ++- browser/store.js | 1 + server/index.js | 1 - server/reducers/users.js | 2 +- server/serverSockets/index.js | 1 + server/serverSockets/socket.js | 1 + server/store.js | 1 + 22 files changed, 24 insertions(+), 8 deletions(-) diff --git a/browser/components/App.js b/browser/components/App.js index 5645b73..6b237f7 100644 --- a/browser/components/App.js +++ b/browser/components/App.js @@ -1,3 +1,4 @@ +'use strict'; import React from 'react'; import { connect } from 'react-redux'; diff --git a/browser/components/Chat.js b/browser/components/Chat.js index 8667c48..2ba3341 100644 --- a/browser/components/Chat.js +++ b/browser/components/Chat.js @@ -1,7 +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){ diff --git a/browser/components/Game.js b/browser/components/Game.js index 133ea85..eb2d180 100644 --- a/browser/components/Game.js +++ b/browser/components/Game.js @@ -1,9 +1,10 @@ +'use strict'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import world from '../game/world'; -import { turnPlayer } from '../game/directionsFunctions'; -import store from '../store'; import socket from '../socket'; + +import { turnPlayer } from '../game/directionsFunctions'; import { cameraSetOnStart } from '../game/gamePlayFunctions'; import { DeadNoWinner, Winner, DeadWithWinner } from './InGame'; diff --git a/browser/components/InGame.js b/browser/components/InGame.js index 91a440d..026f7bf 100644 --- a/browser/components/InGame.js +++ b/browser/components/InGame.js @@ -1,3 +1,4 @@ +'use strict'; import React from 'react'; export const DeadNoWinner = () => ( diff --git a/browser/components/Landing.js b/browser/components/Landing.js index 91688f9..23aeb60 100644 --- a/browser/components/Landing.js +++ b/browser/components/Landing.js @@ -1,3 +1,4 @@ +'use strict'; import React from 'react'; import { connect } from 'react-redux'; import socket from '../socket'; diff --git a/browser/components/LobbyRoom.js b/browser/components/LobbyRoom.js index b851481..e52d049 100644 --- a/browser/components/LobbyRoom.js +++ b/browser/components/LobbyRoom.js @@ -1,3 +1,4 @@ +'use strict'; import React, { Component } from 'react'; import { connect } from 'react-redux'; import socket from '../socket'; diff --git a/browser/game/directionsFunctions.js b/browser/game/directionsFunctions.js index 65d9714..8282eef 100644 --- a/browser/game/directionsFunctions.js +++ b/browser/game/directionsFunctions.js @@ -1,5 +1,4 @@ -import world, { speed } from './world'; -import store from '../store'; +'use strict'; import socket from '../socket'; const turnLeft = (player) => { diff --git a/browser/game/field.js b/browser/game/field.js index 0b5fe5d..a9cac4c 100644 --- a/browser/game/field.js +++ b/browser/game/field.js @@ -1,3 +1,4 @@ +'use strict'; const plane1 = new WHS.Box({ geometry: {width: 1000, height: 1000, depth: 0}, mass: 0, diff --git a/browser/game/world.js b/browser/game/world.js index 131a50f..ee1aa89 100644 --- a/browser/game/world.js +++ b/browser/game/world.js @@ -1,3 +1,4 @@ +'use strict'; // const WHS = require('whitestormjs'); import { field } from './field'; diff --git a/browser/reducers/gameState.js b/browser/reducers/gameState.js index 0854517..7139a23 100644 --- a/browser/reducers/gameState.js +++ b/browser/reducers/gameState.js @@ -1,3 +1,4 @@ +'use strict'; /*-------- ACTION TYPES ---------*/ //const IS_DISPLAYED = 'IS_DISPLAYED'; diff --git a/browser/reducers/index.js b/browser/reducers/index.js index 9b597b7..57e2654 100644 --- a/browser/reducers/index.js +++ b/browser/reducers/index.js @@ -1,3 +1,4 @@ +'use strict'; import { combineReducers } from 'redux'; import players from './players'; import mainPlayer from './mainPlayer'; diff --git a/browser/reducers/mainPlayer.js b/browser/reducers/mainPlayer.js index e54c677..07c86be 100644 --- a/browser/reducers/mainPlayer.js +++ b/browser/reducers/mainPlayer.js @@ -1,3 +1,4 @@ +'use strict'; /*---------- ACTION TYPES ----------*/ const SET_MAIN_PLAYER = 'SET_MAIN_PLAYER'; const MAIN_PLAYER_DEATH = 'MAIN_PLAYER_DEATH'; diff --git a/browser/reducers/messages.js b/browser/reducers/messages.js index 7473ee9..3797e95 100644 --- a/browser/reducers/messages.js +++ b/browser/reducers/messages.js @@ -1,3 +1,4 @@ +'use strict'; /*---------- INITIAL STATE ----------*/ const initialState = []; diff --git a/browser/reducers/musicPlayer.js b/browser/reducers/musicPlayer.js index c9a7663..0a500f1 100644 --- a/browser/reducers/musicPlayer.js +++ b/browser/reducers/musicPlayer.js @@ -1,3 +1,4 @@ +'use strict'; const AUDIO = document.createElement('audio'); AUDIO.src = 'mp3/SoundTrack.mp3'; AUDIO.load(); diff --git a/browser/reducers/players.js b/browser/reducers/players.js index c79920c..aadd1dc 100644 --- a/browser/reducers/players.js +++ b/browser/reducers/players.js @@ -1,3 +1,4 @@ +'use strict'; import allPlayers from '../game/players'; /*---------- INITIAL STATE ----------*/ diff --git a/browser/socket.js b/browser/socket.js index d270470..a2ea573 100644 --- a/browser/socket.js +++ b/browser/socket.js @@ -1,11 +1,12 @@ +'use strict'; import store from './store'; import { setPlayerId, addPlayerName, removePlayer, declareWinner } from './reducers/players'; import { startGame } from './reducers/gameState'; import { setMainPlayer } from './reducers/mainPlayer'; import { receiveMessage } from './reducers/messages'; import { left, right, up, down } from './game/turnFunctions'; -import world from './game/world'; import { cameraSet, collisionHandler } from './game/gamePlayFunctions'; +import world from './game/world'; const socket = io('/'); diff --git a/browser/store.js b/browser/store.js index f317087..e746664 100644 --- a/browser/store.js +++ b/browser/store.js @@ -1,3 +1,4 @@ +'use strict'; import { createStore, applyMiddleware } from 'redux'; import createLogger from 'redux-logger'; import thunkMiddleware from 'redux-thunk'; diff --git a/server/index.js b/server/index.js index 0b46594..eb82798 100644 --- a/server/index.js +++ b/server/index.js @@ -6,7 +6,6 @@ const express = require('express'); const volleyball = require('volleyball'); const bodyParser = require('body-parser'); const app = express(); -var socketio = require('socket.io'); const ioInit = require('./serverSockets'); diff --git a/server/reducers/users.js b/server/reducers/users.js index 9870ec1..0719213 100644 --- a/server/reducers/users.js +++ b/server/reducers/users.js @@ -1,5 +1,5 @@ +'use strict'; /* --------------- ACTIONS --------------- */ - const ADD_USER = 'ADD_USER'; const REMOVE_USER = 'REMOVE_USER'; const READY_PLAYER = 'READY_PLAYER'; diff --git a/server/serverSockets/index.js b/server/serverSockets/index.js index 86b8b9d..f5ba844 100644 --- a/server/serverSockets/index.js +++ b/server/serverSockets/index.js @@ -1,3 +1,4 @@ +'use strict'; const socketio = require('socket.io'); let IO = null; diff --git a/server/serverSockets/socket.js b/server/serverSockets/socket.js index 95e2571..5d88bf6 100644 --- a/server/serverSockets/socket.js +++ b/server/serverSockets/socket.js @@ -1,3 +1,4 @@ +'use strict'; const chalk = require('chalk'); const store = require('../store'); const { diff --git a/server/store.js b/server/store.js index ff63be1..409aa64 100644 --- a/server/store.js +++ b/server/store.js @@ -1,3 +1,4 @@ +'use strict'; const { createStore, applyMiddleware, combineReducers } = require('redux'); const thunkMiddleware = require('redux-thunk').default; From 426e5f11060c5738e12eb054577f9e09a3d2716c Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Wed, 1 Mar 2017 22:25:35 -0500 Subject: [PATCH 25/26] Made LobbyRoom component "dumb". --- browser/components/LobbyRoom.js | 89 +++++++++++++-------------------- 1 file changed, 34 insertions(+), 55 deletions(-) diff --git a/browser/components/LobbyRoom.js b/browser/components/LobbyRoom.js index e52d049..c27d737 100644 --- a/browser/components/LobbyRoom.js +++ b/browser/components/LobbyRoom.js @@ -1,60 +1,39 @@ 'use strict'; -import React, { Component } from 'react'; +import React from 'react'; import { connect } from 'react-redux'; import socket from '../socket'; import Chat from './Chat'; -class LobbyRoom extends Component { - constructor(props) { - super(props); - - this.readyPlayerEmitter = this.readyPlayerEmitter.bind(this); - } - - readyPlayerEmitter() { - const socketId = localStorage.getItem('mySocketId'); - socket.emit('readyPlayer', socketId); - } - - render() { - let exisitingPlayers = this.props.players.filter(player => player.id); - - console.log('exisitingPlayer', exisitingPlayers) - - return ( -
-
STAGING AREA
- -

PLAYERS ONLINE

-
    - { exisitingPlayers.map((player, index) => { - return ( -
  • - {player.playerName} -
  • - ); - }) - } -
-
- - - - -
- ); - } -} - -const mapStateToProps = ({ gameState, players}) => ({ gameState, players }); -const mapDispatchToProps = null; - -export default connect( - mapStateToProps, - mapDispatchToProps -)(LobbyRoom); +const LobbyRoom = ({ exisitingPlayers, readyPlayerEmitter }) => ( +
+
STAGING AREA
+ +

PLAYERS ONLINE

+
    + { + exisitingPlayers.map(player => +
  • + {player.playerName} +
  • + ) + } +
+
+ + + +
+); + +const mapStateToProps = ({ gameState, players }) => ({ gameState, exisitingPlayers: players.filter(player => player.id) }); +const mapDispatchToProps = () => ({ + readyPlayerEmitter: () => socket.emit('readyPlayer', localStorage.getItem('mySocketId')) +}); + +export default connect(mapStateToProps, mapDispatchToProps)(LobbyRoom); From 0c4f61cf2972c8b15dc781a4bc1bc4f830c0fbec Mon Sep 17 00:00:00 2001 From: Aryeh Harris Date: Wed, 1 Mar 2017 22:37:36 -0500 Subject: [PATCH 26/26] update readme --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b44849b..fb1537f 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,8 @@ To play a live version of this game please click here http://3d-tron.com. 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.