klemek/snex.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Separated client files

Browse Source
This commit is contained in:
Klemek
2019-01-07 15:03:08 +01:00
parent afe4e79a87
commit 5016f1191c
5 changed files with 204 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client.html
-201
View File
@@ -1,201 +0,0 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Roboto, sans-serif;
background-color: #212121;
}
canvas {
background-color: #424242;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<canvas id="game" width="1600" height="900"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let hsize = 300;
let current;
let players;
let history = {};
function ellipse(cx, cy, rx, ry) {
ctx.save(); // save state
ctx.beginPath();
ctx.translate(cx - rx, cy - ry);
ctx.scale(rx, ry);
ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
ctx.restore(); // restore to original state
ctx.fill();
}
function drawPlayer(ratio, p) {
ctx.fillStyle = p.color;
ctx.fillText(p.name, p.pos.x, p.pos.y - ratio * 10);
ellipse(p.pos.x, p.pos.y, ratio * 3, ratio * 3);
if(p.starting > 0)
return;
if (!history[p.name])
history[p.name] = {
i0: 0,
list: new Array(hsize)
};
else
history[p.name].i0 = (history[p.name].i0 + 1) % hsize;
history[p.name].list[history[p.name].i0] = p.pos;
}
function drawHistory(p) {
if (history[p.name]) {
const h = history[p.name];
ctx.strokeStyle = p.color;
ctx.beginPath();
if(!h.list[h.i0])
return;
ctx.moveTo(h.list[h.i0].x, h.list[h.i0].y);
let last = h.list[h.i0];
for (let di = 1; di < hsize; di++) {
const point = h.list[(h.i0 - di + hsize) % hsize];
if (point){
if (Math.abs(last.x - point.x) >= 1600 * .9) {
ctx.stroke();
ctx.moveTo(point.x, point.y);
} else if (Math.abs(last.y - point.y) >= 900 * .9) {
ctx.stroke();
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y)
}
last = point;
}else{
break;
}
}
ctx.stroke();
}
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const ratio = canvas.height / window.innerHeight;
ctx.font = `bold ${ratio * 120}px Roboto`;
ctx.textAlign = 'center';
ctx.fillStyle = '#4b4b4b';
ctx.fillText('snex.io', canvas.width/2 - ratio * 3, canvas.height/2 + ratio*37);
ctx.fillStyle = '#545454';
ctx.fillText('snex.io', canvas.width/2, canvas.height/2 + ratio*40);
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 3;
ctx.textAlign = 'left';
ctx.font = `normal ${ratio * 10}px Roboto`;
const names = Object.keys(players);
names.forEach(function (name) {
const p = players[name];
if(p.alive)
drawPlayer(ratio, players[name]);
if (name === current.name)
current = players[name];
drawHistory(players[name]);
});
requestAnimationFrame(drawGame);
}
const socket = io({
'reconnection': true,
'reconnectionDelay': 1000,
'reconnectionDelayMax': 5000
});
socket.on('connect', function () {
console.log('connected');
});
socket.on('disconnect', function () {
console.log('disconnected');
});
socket.on('info', function(res){
current = res.self;
history = res.history;
hsize = res.hsize;
players = res.players;
drawGame()
});
socket.on('players', function (p) {
players = p;
});
$(document).on('keydown', function (e) {
switch (e.keyCode) {
case 32://space;
current.color = 'new';
socket.emit('update', current);
return;
case 37://left;
current.angleSpd = -1;
socket.emit('update', current);
break;
case 38://up;
break;
case 39://right;
current.angleSpd = 1;
socket.emit('update', current);
break;
case 40://down;
break;
}
});
$(document).on('keyup', function (e) {
switch (e.keyCode) {
case 32://space;
current.color = 'new';
socket.emit('update', current);
return;
case 37://left;
current.angleSpd = 0;
socket.emit('update', current);
break;
case 38://up;
break;
case 39://right;
current.angleSpd = 0;
socket.emit('update', current);
break;
case 40://down;
break;
}
});
</script>
</body>
</html>
client/index.html
+15
View File
@@ -0,0 +1,15 @@
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="main.css" rel="stylesheet">
</head>
<body>
<canvas id="game" width="1600" height="900"></canvas>
<script src="main.js"></script>
</body>
</html>
client/main.css
+21
View File
@@ -0,0 +1,21 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Roboto, sans-serif;
background-color: #212121;
}
canvas {
background-color: #424242;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
margin: auto;
}
client/main.js
+163
View File
@@ -0,0 +1,163 @@
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
let hsize = 300;
let current;
let players;
let history = {};
function ellipse(cx, cy, rx, ry) {
ctx.save(); // save state
ctx.beginPath();
ctx.translate(cx - rx, cy - ry);
ctx.scale(rx, ry);
ctx.arc(1, 1, 1, 0, 2 * Math.PI, false);
ctx.restore(); // restore to original state
ctx.fill();
}
function drawPlayer(ratio, p) {
ctx.fillStyle = p.color;
ctx.fillText(p.name, p.pos.x, p.pos.y - ratio * 10);
ellipse(p.pos.x, p.pos.y, ratio * 3, ratio * 3);
if(p.starting > 0)
return;
if (!history[p.name])
history[p.name] = {
i0: 0,
list: new Array(hsize)
};
else
history[p.name].i0 = (history[p.name].i0 + 1) % hsize;
history[p.name].list[history[p.name].i0] = p.pos;
}
function drawHistory(p) {
if (history[p.name]) {
const h = history[p.name];
ctx.strokeStyle = p.color;
ctx.beginPath();
if(!h.list[h.i0])
return;
ctx.moveTo(h.list[h.i0].x, h.list[h.i0].y);
let last = h.list[h.i0];
for (let di = 1; di < hsize; di++) {
const point = h.list[(h.i0 - di + hsize) % hsize];
if (point){
if (Math.abs(last.x - point.x) >= 1600 * .9) {
ctx.stroke();
ctx.moveTo(point.x, point.y);
} else if (Math.abs(last.y - point.y) >= 900 * .9) {
ctx.stroke();
ctx.moveTo(point.x, point.y);
} else {
ctx.lineTo(point.x, point.y)
}
last = point;
}else{
break;
}
}
ctx.stroke();
}
}
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const ratio = canvas.height / window.innerHeight;
ctx.font = `bold ${ratio * 120}px Roboto`;
ctx.textAlign = 'center';
ctx.fillStyle = '#4b4b4b';
ctx.fillText('snex.io', canvas.width/2 - ratio * 3, canvas.height/2 + ratio*37);
ctx.fillStyle = '#545454';
ctx.fillText('snex.io', canvas.width/2, canvas.height/2 + ratio*40);
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 3;
ctx.textAlign = 'left';
ctx.font = `normal ${ratio * 10}px Roboto`;
const names = Object.keys(players);
names.forEach(function (name) {
const p = players[name];
if(p.alive)
drawPlayer(ratio, players[name]);
if (name === current.name)
current = players[name];
drawHistory(players[name]);
});
requestAnimationFrame(drawGame);
}
const socket = io({
'reconnection': true,
'reconnectionDelay': 1000,
'reconnectionDelayMax': 5000
});
socket.on('connect', function () {
console.log('connected');
});
socket.on('disconnect', function () {
console.log('disconnected');
});
socket.on('info', function(res){
current = res.self;
history = res.history;
hsize = res.hsize;
players = res.players;
drawGame()
});
socket.on('players', function (p) {
players = p;
});
$(document).on('keydown', function (e) {
switch (e.keyCode) {
case 32://space;
current.color = 'new';
socket.emit('update', current);
return;
case 37://left;
current.angleSpd = -1;
socket.emit('update', current);
break;
case 38://up;
break;
case 39://right;
current.angleSpd = 1;
socket.emit('update', current);
break;
case 40://down;
break;
}
});
$(document).on('keyup', function (e) {
switch (e.keyCode) {
case 32://space;
current.color = 'new';
socket.emit('update', current);
return;
case 37://left;
current.angleSpd = 0;
socket.emit('update', current);
break;
case 38://up;
break;
case 39://right;
current.angleSpd = 0;
socket.emit('update', current);
break;
case 40://down;
break;
}
});
server.js
+5 -2
View File
@@ -3,8 +3,11 @@ const http = require('http').Server(app);
const io = require('socket.io')(http); const io = require('socket.io')(http);
const convert = require('color-convert'); const convert = require('color-convert');
app.get('/', function (req, res) { app.get('*', function (req, res) {
res.sendFile(__dirname + '/client.html'); if(req.originalUrl === '/')
res.sendFile(`${__dirname}/client/index.html`);
else
res.sendFile(`${__dirname}/client${req.originalUrl}`);
}); });
function randomColor() { function randomColor() {