Merge pull request #80 from esSteres/redacted

make games disappear when not present in an update

main_controller.py

@@ -58,7 +58,12 @@ def update_loop():
 
                 if state["update_pause"] == 1:
                     state["update_emoji"] = "🍿"
-                    if this_game.top_of_inning:
+                    if this_game.over:
+                        winning_team = this_game.teams['home'].name if this_game.teams['home'].score > this_game.teams['away'].score else this_game.teams['away'].name
+                        state["update_text"] = f"{winning_team} wins{' with a victory lap' if state['victory_lap'] else ''}!"
+                        state["pitcher"] = "-"
+                        state["batter"] = "-"
+                    elif this_game.top_of_inning:
                         state["update_text"] = f"Top of {this_game.inning}. {this_game.teams['away'].name} batting!"
                     else:
                         if this_game.inning >= this_game.max_innings:
@@ -99,9 +104,13 @@ def update_loop():
             states_to_send[game_time] = state
 
             if state["update_pause"] <= 1 and state["delay"] < 0:
+                if this_game.over:
+                    master_games_dic.pop(game_time)
+                else:
                     this_game.gamestate_update_full()
 
             state["update_pause"] -= 1
+
         global last_update
         last_update = states_to_send
         socketio.emit("states_update", states_to_send)

static/games_page.css

@@ -119,11 +119,9 @@ h2 {
     display: grid;
     grid-template-columns: 60% 40%;
     grid-template-areas:
-      "teams info"
+      "teams info" "players info" "update update";
-      "players players"
+    grid-template-rows: 100px;
-      "update update";
+    grid-row-gap: 14px;
-    grid-template-rows: 130px;
-    grid-row-gap: 10px;
     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,10 +200,10 @@ 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%;
+    padding-right: 50px;
 }
 
 .player {
@@ -223,6 +220,8 @@ h2 {
 
 .update {
     grid-area: update;
+    margin-right: 10px;
+    margin-top: 10px;
 }
 
 .update_emoji, .update_text {

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,27 +22,48 @@ $(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");
+                            insertEmpty(grid);
-                            newBox.className = "emptyslot";
-                            grid.appendChild(newBox);
                         }
                     }
                     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]);
+            }
+        }
+
+        var requiredcells = Math.max(4, (3 * Math.ceil(Object.keys(json).length/3))+1);
+
+        while (grid.children.length > requiredcells) {
+            grid.removeChild(grid.children[requiredcells]);
+        }
+
+        while (grid.children.length < requiredcells) {
+            insertEmpty(grid);
+        }
+
+        console.log(grid.children.length)
     });
 
+    const insertEmpty = (grid) => {
+        newBox = document.createElement("DIV");
+        newBox.className = "emptyslot";
+        grid.appendChild(newBox);
+    }
+
     const insertGame = (gridboxnum, gamestate, timestamp) => {
         var thisBox = grid.children[gridboxnum];
         thisBox.className = "game";