From 5016f1191c5eb70d2b495669c78d811425491d36 Mon Sep 17 00:00:00 2001 From: Klemek Date: Mon, 7 Jan 2019 15:03:08 +0100 Subject: [PATCH] Separated client files --- client.html | 201 ---------------------------------------------- client/index.html | 15 ++++ client/main.css | 21 +++++ client/main.js | 163 +++++++++++++++++++++++++++++++++++++ server.js | 7 +- 5 files changed, 204 insertions(+), 203 deletions(-) delete mode 100644 client.html create mode 100644 client/index.html create mode 100644 client/main.css create mode 100644 client/main.js diff --git a/client.html b/client.html deleted file mode 100644 index b693a84..0000000 --- a/client.html +++ /dev/null @@ -1,201 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..d7b0b7c --- /dev/null +++ b/client/index.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/client/main.css b/client/main.css new file mode 100644 index 0000000..7f0ccfb --- /dev/null +++ b/client/main.css @@ -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; +} \ No newline at end of file diff --git a/client/main.js b/client/main.js new file mode 100644 index 0000000..4a1ee35 --- /dev/null +++ b/client/main.js @@ -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; + } +}); \ No newline at end of file diff --git a/server.js b/server.js index 80703f2..c124c21 100644 --- a/server.js +++ b/server.js @@ -3,8 +3,11 @@ const http = require('http').Server(app); const io = require('socket.io')(http); const convert = require('color-convert'); -app.get('/', function (req, res) { - res.sendFile(__dirname + '/client.html'); +app.get('*', function (req, res) { + if(req.originalUrl === '/') + res.sendFile(`${__dirname}/client/index.html`); + else + res.sendFile(`${__dirname}/client${req.originalUrl}`); }); function randomColor() {