Heartbeat. Readability improvements.

README.md

@@ -11,6 +11,3 @@ A victory state can be stored by taking a snapshot of the current stack.
 
 ## Credits
 Icons from [https://game-icons.net](https://game-icons.net)
-
-## TODO
-- Fix 6 things

client/connection.js

@@ -3,6 +3,7 @@
 const Connection = function() {
     this.retryCounter = 0;
     this.name = null;
+    this.heartbeatTimer = null;
 
     this.socketListeners = {
         open: this.onOpen.bind(this),
@@ -53,6 +54,9 @@ Connection.prototype.send = function(json) {
 Connection.prototype.onOpen = function() {
     this.retryCounter = 0;
 
+    clearTimeout(this.heartbeatTimer);
+    this.heartbeatTimer = setTimeout(this.ws.send.bind(null, { type: 'heartbeat' }), 30000);
+
     const evt = new Event('L-conn-open');
     document.dispatchEvent(evt);
 };

client/controls.js

@@ -192,7 +192,7 @@ Controls.prototype.msgState = function(evt) {
 };
 
 Controls.prototype.msgWin = function(evt) {
-    document.getElementById('controls-win-message').innerHTML = `Congratulations ${this.names[evt.detail.body.player_id]} !`;
+    document.getElementById('controls-win-player').innerHTML = this.names[evt.detail.body.player_id];
     document.getElementById('controls-win-count').innerHTML = evt.detail.body.moveCount;
 };
 

client/grid.js

@@ -70,10 +70,10 @@ Grid.prototype.drawWalls = function() {
 
         if (i1 === i2) {
             wall.className = 'content-wall-y';
-            wall.style.height = this.squareSideLength + 'px';
+            wall.style.height = `${this.squareSideLength + 2}px`;
         } else {
             wall.className = 'content-wall-x';
-            wall.style.width = this.squareSideLength + 'px';
+            wall.style.width = `${this.squareSideLength + 2}px`;
         }
 
         grid.appendChild(wall)
@@ -236,10 +236,10 @@ Grid.prototype.drawObjective = function() {
 
     star.appendChild(path);
     star.style.position = 'absolute';
-    star.style.left = `${s * this.objective.i}px`
-    star.style.top = `${s * this.objective.j}px`
-    star.style.height = `${s}px`;
-    star.style.width = `${s}px`;
+    star.style.left = `${s * this.objective.i + 4}px`
+    star.style.top = `${s * this.objective.j + 4}px`
+    star.style.height = `${s - 8}px`;
+    star.style.width = `${s - 8}px`;
 
     grid.appendChild(star);
 };

index.html

@@ -59,7 +59,7 @@
 
             <div class='controls-block' id="controls-win">
                 <div class='controls-title'>Round over</div> 
-                <div class="controls-message" id='controls-win-message'></div>
+                <div class="controls-message" id='controls-win-message'><span id='controls-win-player'></span> wins!</div>
 
                 <div id='controls-win-count'></div>
 
@@ -94,7 +94,7 @@
                     return;
                 }
                 
-                const evt = new CustomEvent('L-join', { detail: rawInput });
+                const evt = new CustomEvent('L-join', { detail: rawInput.substr(0, 20) });
                 document.dispatchEvent(evt);
             })
         </script>

server/ricochet.js

@@ -39,8 +39,9 @@ const Ricochet = function({ messenger }) {
         return acc;
     }, {});
 
+    const shuffledIcons = this.shuffle(ICONS);
     this.icons = this.robotIds.reduce((acc, id, i) => {
-        acc[id] = ICONS[i];
+        acc[id] = shuffledIcons[i];
         return acc;
     }, {});
 
@@ -75,8 +76,6 @@ Ricochet.prototype.onConnect = function(ws, req) {
 
     this.addPlayer(ws.id, santizedName);
 
-    console.log(ws.id)
-
     this.messenger.messageAll({ type: 'players', body: this.players });
 
     this.messenger.messageOne(ws, { type: 'connected', body: { player_id: ws.id, player_name: santizedName } });

style/controls.css

@@ -10,7 +10,6 @@
 
 .controls-block {
     background: #23074d;
-    border: 6px solid #483c6c;
     border-radius: 0 18px 0 18px;
     color: #0cffe1;
     display: none;
@@ -24,6 +23,7 @@
 
 .controls-title {
     background: #0cffe1;
+    border-bottom: 2px solid black;
     color: #ff217c;
     font-size: 14px;
     margin-bottom: 16px;
@@ -58,8 +58,7 @@
 
 /*===== MOVES BLOCK =====*/
 #controls-moves {
-    background: #00dfd4;
-    border: 6px solid #483c6c;
+    background: #ffec83;
     border-radius: 0 18px 0 18px;
     color: #ff217c;
     position: relative;

style/grid.css

@@ -22,17 +22,19 @@
 
 .content-wall-x {
     background: #222;
-    height: 8px;
-    margin-top: -4px;
+    height: 2px;
+    margin-left: -1px;
+    margin-top: -1px;
     position: absolute;
     z-index: 3;
 }
 
 .content-wall-y {
     background: #222;
-    margin-left: -4px;
+    margin-left: -1px;
+    margin-top: -1px;
     position: absolute;
-    width: 8px;
+    width: 2px;
     z-index: 3;
 }