-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 7233397
Showing
20 changed files
with
916 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
|
||
}; | ||
|
||
|
||
|
Oops, something went wrong.