Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
stephanrotolante authored Sep 21, 2019
0 parents commit 7233397
Show file tree
Hide file tree
Showing 20 changed files with 916 additions and 0 deletions.
35 changes: 35 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
{
"name": "http-server-practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./src/server.js",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"@babel/preset-react": "^7.0.0",
"css-loader": "^3.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"nodemon": "^1.19.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"style-loader": "^1.0.0",
"websocket": "^1.0.29"
},
"devDependencies": {
"@babel/core": "^7.6.0",
"@babel/preset-env": "^7.6.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-preset-env": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.8.0",
"script-loader": "^0.7.2",
"webpack": "^4.40.1",
"webpack-cli": "^3.3.7"
}
}
13 changes: 13 additions & 0 deletions public/client.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
var W3CWebSocket = require('websocket').w3cwebsocket;

var client = new W3CWebSocket('ws://localhost:3000/', 'echo-protocol');

client.onerror = e => {
console.log('Connection Error', e);
};

client.onclose = () => {
console.log('echo-protocol Client Closed');
};

module.exports = client;
10 changes: 10 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
28 changes: 28 additions & 0 deletions public/src/App.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { useState, useLayoutEffect } from 'react';
import Car from './components/Car'
import Canvas from './components/Canvas';


export default props => {
const [otherPlayers,setOtherPlayers] = useState([...props.otherPlayerData]);


document.addEventListener('add-player', (event) => {
setOtherPlayers([...otherPlayers,<Car {...event.detail.data}/>])
})

useLayoutEffect(() => {
},[otherPlayers])
return (
<Canvas {...props}>
<Car {...props} />
{otherPlayers.map((player,index) => {
return (
<React.Fragment key={index}>
{player}
</React.Fragment>
)
})}
</Canvas>
);
}
10 changes: 10 additions & 0 deletions public/src/components/Canvas/css/canvas.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.canvas-main {
height: 100vh;
width: 100vw;
background-color: grey;
}

* {
padding: 0px;
margin: 0px;
}
63 changes: 63 additions & 0 deletions public/src/components/Canvas/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import React, {useState, useLayoutEffect} from 'react';
const client = require('../../../client.js');



import './css/canvas.css';

const Canvas = props => {
const { angle:a, xPos:x, yPos:y, id } = props;
const [angle, setAngle] = useState(a);
const [xPos, setXPos] = useState(x);
const [yPos,setYPos] = useState(y);

useLayoutEffect(() => {
},[])

useLayoutEffect(() => {
console.log('xPos',xPos, 'yPos',yPos,'angle', angle,"cosine sine values", Math.cos(angle* Math.PI / 180.0),Math.sin(angle* Math.PI / 180.0));
const car = document.getElementById(id).style;
car.left = `${xPos}px`;
car.top = `${yPos}px`;
car.transform = `rotate(${angle}deg)`;
client.send(JSON.stringify({action:"UPDATE_PLAYER",data:{id,xPos,yPos,angle}}));
},[xPos,yPos,angle]);


const handleKeyPress = event => {

const { keyCode } = event;

const xDirection = Math.cos(angle* Math.PI / 180.0);
const yDirection = Math.sin(angle* Math.PI / 180.0)

switch(keyCode) {
case 37:
setAngle(angle-5);
break;
case 38:
setXPos(xPos+5*xDirection);
setYPos(yPos+5*yDirection);

break;
case 39:
setAngle(angle+5);
break;
case 40:
setXPos(xPos-5*xDirection);
setYPos(yPos-5*yDirection);
break;
default:

}


}
return (
<div className="canvas-main" onKeyDown={handleKeyPress} tabIndex="0">
{props.children}
</div>
);
}

export default Canvas;
8 changes: 8 additions & 0 deletions public/src/components/Car/css/car.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.car-main {
position: relative;
background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
height: 12px;
width: 30px;
transition: .15s;
transform:rotate(0deg);
}
18 changes: 18 additions & 0 deletions public/src/components/Car/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';

import './css/car.css';
const Car = props => {
const { id, yPos, xPos,angle } = props;




return (
<div className="car-main" style={{'top':`${yPos}px`,'left':`${xPos}`,'transform':`rotate(${angle}deg)`}} id={id} >

</div>
);
}


export default Car;
71 changes: 71 additions & 0 deletions public/src/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react';
const client = require('../client.js');
import ReactDOM from 'react-dom';
import Car from './components/Car';
import App from './App';


client.onopen = () => {
console.log("Browser connected to the server!!");

}

function isEquivalent(a, b) {
// Create arrays of property names
var aProps = Object.getOwnPropertyNames(a);
var bProps = Object.getOwnPropertyNames(b);

// If number of properties is different,
// objects are not equivalent
if (aProps.length != bProps.length) {
return false;
}

for (var i = 0; i < aProps.length; i++) {
var propName = aProps[i];

// If values of same property are not equal,
// objects are not equivalent
if (a[propName] !== b[propName]) {
return false;
}
}

// If we made it this far, objects
// are considered equivalent
return true;
}


client.onmessage = (e) => {
// console.log(e)
const {action, data, otherPlayerData} = JSON.parse(e.data);
switch(action){
case "INIATE":
console.log("iniate")
const otherCars = otherPlayerData.map(other => !isEquivalent(data,other) && <Car {...other}/>)
ReactDOM.render(<App {...data} otherPlayerData={otherCars}/>,document.getElementById('root'));
break;
case "NEW_PLAYER":
console.log("new-player")
document.dispatchEvent(new CustomEvent('add-player',{
detail: {
data
}
}));
break;
case "UPDATE_CANVAS":
console.log('update')
const modifiedCar = document.getElementById(data.id);
modifiedCar.style.top = data.yPos;
modifiedCar.style.left = data.xPos;
modifiedCar.style.transform = `rotate(${data.angle}deg)`
break;
default:
console.log(data);
}

};



Loading

0 comments on commit 7233397

Please sign in to comment.