Fixed invisible tail bug + tail refresh from server every second

client/main.js

@@ -22,15 +22,16 @@ function ellipse(cx, cy, rx, ry) {
   ctx.fill();
 }
 
-function drawPlayer(ratio, p) {
-  ctx.fillStyle = p.alive ? p.color : '#757575';
-  ctx.fillText(p.name, p.pos.x, p.pos.y - ratio * 10);
-  if (p.alive) {
-    ellipse(p.pos.x, p.pos.y, ratio * 3, ratio * 3);
-    if (p.starting > 0)
-      return;
+function clone(a) {
+  return {x: parseFloat(a.x), y: parseFloat(a.y)};
+}
 
-    if (!lock) {
+setInterval(function () {
+  //main loop
+  Object.keys(players).forEach(function (name) {
+    const p = players[name];
+    if (p.alive) {
+      if (p.starting <= 0 && !lock) {
         if (!history[p.name])
           history[p.name] = {
             i0: 0,
@@ -38,13 +39,33 @@ function drawPlayer(ratio, p) {
           };
         else
           history[p.name].i0 = (history[p.name].i0 + 1) % hsize;
-      history[p.name].list[history[p.name].i0] = p.pos;
+        history[p.name].list[history[p.name].i0] = clone(p.pos);
+      } else {
+        history[p.name] = {
+          i0: 0,
+          list: new Array(hsize)
+        };
+        history[p.name].list[0] = clone(p.pos);
       }
     }
+  });
+
+}, 20);
+
+function drawPlayer(ratio, p) {
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = 3;
+
+  ctx.fillStyle = p.alive ? p.color : '#757575';
+  ctx.fillText(p.name, p.pos.x, p.pos.y - ratio * 10);
+  if (p.alive)
+    ellipse(p.pos.x, p.pos.y, ratio * 3, ratio * 3);
 
   if (history[p.name]) {
     const h = history[p.name];
     ctx.strokeStyle = p.alive ? p.color : '#757575';
+    console.log('h', h.list.length);
     ctx.beginPath();
     if (!h.list[h.i0])
       return;
@@ -93,10 +114,6 @@ function drawGame() {
   ctx.textAlign = 'left';
   writeText(leaderboard, 30, canvas.width / 30, canvas.height / 15, 'normal');
 
-  ctx.lineCap = 'round';
-  ctx.lineJoin = 'round';
-  ctx.lineWidth = 3;
-
   ctx.textAlign = 'left';
   ctx.font = `normal ${ratio * 15}px Roboto`;
   const names = Object.keys(players);
@@ -139,7 +156,6 @@ socket.on('disconnect', function () {
 socket.on('info', function (res) {
   current = res.self;
   history = res.history;
-  hsize = res.hsize;
   players = res.players;
   room = res.room;
   window.location.hash = '#' + room;

server.js

@@ -135,7 +135,7 @@ setInterval(function () {
               let lastpoint = h2.list[h2.i0];
               if (!lastpoint)
                 return;
-              for (let di = 1; di < HSIZE; di++) {
+              for (let di = 1; di < HSIZE - 1; di++) {
                 const point = h2.list[(h2.i0 - di + HSIZE) % HSIZE];
                 if (point !== undefined) {
                   if (Math.abs(lastpoint.x - point.x) < 1600 * .9 && Math.abs(lastpoint.y - point.y) < 900 * .9) {
@@ -169,6 +169,12 @@ setInterval(function () {
       io.to(rname).emit('lock', true);
     }
     io.to(rname).emit('players', room.players);
+
+    room.historyTimer -= 20;
+    if (room.historyTimer <= 0) {
+      io.to(rname).emit('history', room.history);
+      room.historyTimer += 1000;
+    }
   });
   updateCount++;
 }, 20);
@@ -199,7 +205,8 @@ io.on('connection', function (socket) {
       rooms[socket.room] = {
         waiting: 0,
         players: {},
-        history: {}
+        history: {},
+        historyTimer: 0
       }
     }