Fixed some bugs and better arrow controls

client/main.js

@@ -40,13 +40,13 @@ function drawPlayer(ratio, p) {
     const h = history[p.name];
     ctx.strokeStyle = p.alive ? p.color : '#757575';
     ctx.beginPath();
-    if(!h.list[h.i0])
+    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 (point) {
         if (Math.abs(last.x - point.x) >= 1600 * .9) {
           ctx.stroke();
           ctx.moveTo(point.x, point.y);
@@ -57,7 +57,7 @@ function drawPlayer(ratio, p) {
           ctx.lineTo(point.x, point.y)
         }
         last = point;
-      }else{
+      } else {
         break;
       }
     }
@@ -74,19 +74,18 @@ function drawGame() {
   ctx.textAlign = 'center';
 
   ctx.fillStyle = '#4b4b4b';
-  ctx.fillText('snex.io', canvas.width/2 - ratio * 3, canvas.height/2 + ratio*37);
+  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.fillText('snex.io', canvas.width / 2, canvas.height / 2 + ratio * 40);
 
-  ctx.lineCap = "round";
+  ctx.lineCap = 'round';
-  ctx.lineJoin = "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];
     drawPlayer(ratio, players[name]);
     if (name === current.name)
       current = players[name];
@@ -107,7 +106,7 @@ socket.on('disconnect', function () {
   console.log('disconnected');
 });
 
-socket.on('info', function(res){
+socket.on('info', function (res) {
   current = res.self;
   history = res.history;
   hsize = res.hsize;
@@ -119,44 +118,43 @@ socket.on('players', function (p) {
   players = p;
 });
 
+const keys = {};
+let currentAngleSpd = 0;
+
+function changeAngle(spd) {
+  if (currentAngleSpd !== spd) {
+    current.angleSpd = spd;
+    currentAngleSpd = spd;
+    socket.emit('update', current);
+  }
+}
+
 $(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;
+      changeAngle(-1);
-      socket.emit('update', current);
-      break;
-    case 38://up;
       break;
     case 39://right;
-      current.angleSpd = 1;
+      changeAngle(1);
-      socket.emit('update', current);
-      break;
-    case 40://down;
       break;
   }
+  keys[e.keyCode] = true;
 });
 
 $(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;
+      if (keys[39])
-      socket.emit('update', current);
+        changeAngle(1);
-      break;
+      else
-    case 38://up;
+        changeAngle(0);
       break;
     case 39://right;
-      current.angleSpd = 0;
+      if (keys[37])
-      socket.emit('update', current);
+        changeAngle(-1);
-      break;
+      else
-    case 40://down;
+        changeAngle(0);
       break;
   }
+  keys[e.keyCode] = false;
 });

server.js

@@ -2,16 +2,19 @@ const app = require('express')();
 const http = require('http').Server(app);
 const io = require('socket.io')(http);
 const convert = require('color-convert');
+const fs = require('fs');
 
 app.get('*', function (req, res) {
   if(req.originalUrl === '/')
     res.sendFile(`${__dirname}/client/index.html`);
-  else
+  else if (fs.existsSync(`${__dirname}/client${req.originalUrl}`))
     res.sendFile(`${__dirname}/client${req.originalUrl}`);
+  else
+    res.status(404).send('file not found');
 });
 
 function randomColor() {
-  return '#' + convert.hsl.hex([randInt(0, 256), randInt(50, 200), 256]);
+  return '#' + convert.hsl.hex([randInt(0, 256), randInt(150, 200), 256]);
 }
 
 function randInt(min, max) {
@@ -102,7 +105,7 @@ setInterval(function () {
                 if(Math.abs(lastpoint.x - point.x) < 1600 * .9 && Math.abs(lastpoint.y - point.y) < 900 * .9){
                   ic++;
                   if (intersects(lastpos, p.pos, lastpoint, point)) {
-                    process.stdout.write(`\r${name} collided with ${name2}\n`);
+                    process.stdout.write(`\r${name} collided with ${name2}                            \n`);
                     p.alive = false;
                     break;
                   }
@@ -126,14 +129,14 @@ setInterval(function () {
 }, 20);
 
 setInterval(function () {
-  process.stdout.write(`\rtick ${20 * upc * 20 / 1000}/20 ms (${ic} intersect/s)`);
+  process.stdout.write(`\rtick ${20 * upc * 20 / 1000}/20 ms (${Object.keys(players).length} connected) (${ic} intersect/s)               `);
   upc = 0;
   ic = 0;
 }, 1000);
 
 io.on('connection', function (socket) {
   socket.name = '#' + ('0000' + randInt(0, 10000)).slice(-4);
-  process.stdout.write(`\r${socket.name} connected\n`);
+  process.stdout.write(`\r${socket.name} connected                            \n`);
   players[socket.name] = {
     pos: {
       x: randInt(100, MAXX - 100),
@@ -160,7 +163,7 @@ io.on('connection', function (socket) {
   socket.on('disconnect', function () {
     delete players[socket.name];
     delete history[socket.name];
-    process.stdout.write(`\r${socket.name} disconnected\n`);
+    process.stdout.write(`\r${socket.name} disconnected                            \n`);
     io.emit('players', players);
   });
   socket.on('update', function (newp) {
@@ -171,8 +174,6 @@ io.on('connection', function (socket) {
     }
     if (!p.alive)
       return;
-    if (newp.color === 'new')
-      players[newp.name].color = randomColor();
     if (newp.angleSpd > 0)
       players[newp.name].angleSpd = MAX_ANGLE_SPEED;
     else if (newp.angleSpd < 0)