From f7d650e559c57b20abe5bd8b6ec5ae265cc6e25b Mon Sep 17 00:00:00 2001
From: Elijah Steres <elijahsteres@gmail.com>
Date: Wed, 30 Dec 2020 18:53:15 -0500
Subject: [PATCH] add removal of completed games (I think)

---
 static/games_page.css | 17 ++++++++---------
 static/loader.js      | 25 ++++++++++++++++++-------
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/static/games_page.css b/static/games_page.css
index bbb93e2..476d3f5 100644
--- a/static/games_page.css
+++ b/static/games_page.css
@@ -119,11 +119,9 @@ h2 {
     display: grid;
     grid-template-columns: 60% 40%;
     grid-template-areas:
-      "teams info"
-      "players players"
-      "update update";
-    grid-template-rows: 130px;
-    grid-row-gap: 10px;
+      "teams info" "players info" "update update";
+    grid-template-rows: 100px;
+    grid-row-gap: 14px;
     grid-column-gap: 10px;
     flex: 1;
 }
@@ -133,7 +131,6 @@ h2 {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    flex: 1;
 }
 
 .team {
@@ -151,7 +148,7 @@ h2 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: space-between;
+    justify-content: space-around;
     background: #4f545c;
     padding-top: 8px;
     padding-bottom: 4px;
@@ -203,9 +200,9 @@ h2 {
     grid-area: players;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: space-around;
     align-items: center;
-    height: max-content;
+    height: 100%;
     width: 100%;
 }
 
@@ -223,6 +220,8 @@ h2 {
 
 .update {
     grid-area: update;
+    margin-right: 10px;
+    margin-top: 10px;
 }
 
 .update_emoji, .update_text {
diff --git a/static/loader.js b/static/loader.js
index ff05642..10c7e54 100644
--- a/static/loader.js
+++ b/static/loader.js
@@ -1,7 +1,6 @@
 $(document).ready(function (){
     var socket = io.connect();
     var gameslist = [];
-    var maxSlot = 1;
     var grid = document.getElementById("container");
     
 
@@ -11,7 +10,7 @@ $(document).ready(function (){
 
     socket.on("states_update", function (json) { //json is an object containing all game updates
 
-        if (Object.keys(json) == 0) {
+        if (Object.keys(json).length == 0) {
             $('#footer div').html("No games right now. Why not head over to Discord and start one?");
         } else {
             $('#footer div').html("");
@@ -23,26 +22,38 @@ $(document).ready(function (){
                 for (var slotnum = 1; true; slotnum++) { //this is really a while loop but shh don't tell anyone
                     if (slotnum >= grid.children.length) {
                         for (var i = 0; i < 3; i ++) {
-                            newBox = document.createElement("DIV");
-                            newBox.className = "emptyslot";
-                            grid.appendChild(newBox);
+                            insertEmpty(grid);
                         }
                     }
                     if (grid.children[slotnum].className == "emptyslot") {
                         insertGame(slotnum, json[timestamp], timestamp);
-                        maxSlot = Math.max(maxSlot, slotnum);
                         break;
                     };
                 };
             };
 
-            for (var slotnum = 1; slotnum <= maxSlot; slotnum++) {
+            for (var slotnum = 1; slotnum < grid.children.length; slotnum++) {
                 if (grid.children[slotnum].timestamp == timestamp) {
                     updateGame(grid.children[slotnum], json[timestamp]);
                 };
             };
         };
+
+        for (var slotnum = 1; slotnum < grid.children.length; slotnum++) {
+            if (grid.children[slotnum].className == "game" && !(Object.keys(json).includes(grid.children[slotnum].timestamp))) {
+                grid.removeChild(grid.children[slotnum]);
+            }
+        }
+
+        while((grid.children.length - 1) % 3 != 0 || grid.children.length == 0) {
+            insertEmpty(grid);
+        }
     });
+    const insertEmpty = (grid) => {
+        newBox = document.createElement("DIV");
+        newBox.className = "emptyslot";
+        grid.appendChild(newBox);
+    }
 
     const insertGame = (gridboxnum, gamestate, timestamp) => {
         var thisBox = grid.children[gridboxnum];