From 33a5f323aa74cb0a8ed2793d408d597782a6cd8c Mon Sep 17 00:00:00 2001
From: Ben Burlingham <ben.burlingham@gmail.com>
Date: Sun, 19 Jul 2020 11:28:31 -0700
Subject: [PATCH] Heartbeat. Readability improvements.

---
 README.md            |  3 ---
 client/connection.js |  4 ++++
 client/controls.js   |  2 +-
 client/grid.js       | 12 ++++++------
 index.html           |  4 ++--
 server/ricochet.js   |  5 ++---
 style/controls.css   |  5 ++---
 style/grid.css       | 10 ++++++----
 8 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 9ba4ae8..1207761 100644
--- a/README.md
+++ b/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
diff --git a/client/connection.js b/client/connection.js
index fe1d88a..69eb810 100644
--- a/client/connection.js
+++ b/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);
 };
diff --git a/client/controls.js b/client/controls.js
index ae2458a..2384f93 100644
--- a/client/controls.js
+++ b/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;
 };
 
diff --git a/client/grid.js b/client/grid.js
index 990beed..4125383 100644
--- a/client/grid.js
+++ b/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);
 };
diff --git a/index.html b/index.html
index aca4507..26394d3 100644
--- a/index.html
+++ b/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>
diff --git a/server/ricochet.js b/server/ricochet.js
index 0e06ef5..a9d1d6e 100644
--- a/server/ricochet.js
+++ b/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 } });
diff --git a/style/controls.css b/style/controls.css
index 9c13aaa..2ada2fc 100644
--- a/style/controls.css
+++ b/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;
diff --git a/style/grid.css b/style/grid.css
index 805e6b5..227e9a8 100644
--- a/style/grid.css
+++ b/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;
 }