From 26611780b95c44bc03f67dc1f29a597230c34d79 Mon Sep 17 00:00:00 2001
From: Elijah Steres <elijahsteres@gmail.com>
Date: Wed, 30 Dec 2020 03:50:29 -0500
Subject: [PATCH 1/2] allow page to expand as needed

---
 static/loader.js | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/static/loader.js b/static/loader.js
index adf4e08..ffd0035 100644
--- a/static/loader.js
+++ b/static/loader.js
@@ -1,8 +1,7 @@
 $(document).ready(function (){
     var socket = io.connect();
     var gameslist = [];
-    var maxslot = 3;
-    var totalslots = 15;
+    var maxSlot = 3;
     var grid = document.getElementById("container");
     
 
@@ -14,17 +13,23 @@ $(document).ready(function (){
         for (const timestamp in json) {
             if (!gameslist.includes(timestamp)) { //adds game to list if not there already
                 gameslist.push(timestamp)
-                var gridBoxes = grid.children;
-                for (var slotnum = 3; slotnum <= Math.min(maxslot, totalslots-1); slotnum++) {
-                    if (gridBoxes[slotnum].className == "emptyslot") {
+                for (var slotnum = 3; true; slotnum++) { //this is really a while loop but 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);
+                        }
+                    }
+                    if (grid.children[slotnum].className == "emptyslot") {
                         insertGame(slotnum, json[timestamp], timestamp);
-                        maxslot += 1;
+                        maxSlot = Math.max(maxSlot, slotnum);
                         break;
                     };
                 };
             };
 
-            for (var slotnum = 3; slotnum <= Math.min(maxslot, totalslots-1); slotnum++) {
+            for (var slotnum = 3; slotnum <= maxSlot; slotnum++) {
                 if (grid.children[slotnum].timestamp == timestamp) {
                     updateGame(grid.children[slotnum], json[timestamp]);
                 };
@@ -34,11 +39,9 @@ $(document).ready(function (){
 
     const insertGame = (gridboxnum, gamestate, timestamp) => {
         var thisBox = grid.children[gridboxnum];
+        thisBox.className = "game";
+        thisBox.timestamp = timestamp;
         fetch("/static/game.html").then(x=>x.text()).then(gamehtml => {
-            console.log(gamehtml)
-            console.log(thisBox)
-            thisBox.className = "game";
-            thisBox.timestamp = timestamp;
             thisBox.innerHTML = gamehtml;
             updateGame(thisBox, gamestate);
         });

From ebd403138e9723b50b491568bcd6cada89523efc Mon Sep 17 00:00:00 2001
From: Elijah Steres <elijahsteres@gmail.com>
Date: Wed, 30 Dec 2020 04:16:41 -0500
Subject: [PATCH 2/2] fix some bugs and do some more styling

---
 static/games_page.css | 8 +++++++-
 static/loader.js      | 6 +++---
 templates/index.html  | 5 +----
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/static/games_page.css b/static/games_page.css
index f37bc70..514b9b5 100644
--- a/static/games_page.css
+++ b/static/games_page.css
@@ -18,10 +18,14 @@ body {
 }
 
 #title {
-    grid-column: 2;
+    grid-column: 1 / 4;
     grid-row: 1;
 }
 
+#title > .page_header {
+    margin: auto
+}
+
 .link{
     position: relative;
     top: 10px; 
@@ -84,11 +88,13 @@ h2 {
 .inning {
     float: left;
     margin: 5px;
+    margin-left: 8px;
 }
 
 .weather {
     float: right;
     margin: 5px;
+    margin-right: 8px;
 }
 
 .body {
diff --git a/static/loader.js b/static/loader.js
index da8fd50..d9e34dd 100644
--- a/static/loader.js
+++ b/static/loader.js
@@ -1,7 +1,7 @@
 $(document).ready(function (){
     var socket = io.connect();
     var gameslist = [];
-    var maxSlot = 3;
+    var maxSlot = 1;
     var grid = document.getElementById("container");
     
 
@@ -13,7 +13,7 @@ $(document).ready(function (){
         for (const timestamp in json) {
             if (!gameslist.includes(timestamp)) { //adds game to list if not there already
                 gameslist.push(timestamp)
-                for (var slotnum = 3; true; slotnum++) { //this is really a while loop but don't tell anyone
+                for (var slotnum = 1; true; slotnum++) { //this is really a while loop but don't tell anyone
                     if (slotnum >= grid.children.length) {
                         for (var i = 0; i < 3; i ++) {
                             newBox = document.createElement("DIV");
@@ -29,7 +29,7 @@ $(document).ready(function (){
                 };
             };
 
-            for (var slotnum = 3; slotnum <= maxSlot; slotnum++) {
+            for (var slotnum = 1; slotnum <= maxSlot; slotnum++) {
                 if (grid.children[slotnum].timestamp == timestamp) {
                     updateGame(grid.children[slotnum], json[timestamp]);
                 };
diff --git a/templates/index.html b/templates/index.html
index 6adf449..a591815 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,4 @@
 <html lang="en-US">
-
 <head>
     <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.4/socket.io.js"></script>
@@ -10,12 +9,10 @@
 
 <body>
     <section class="container" id="container">
-        <div></div>
         <div id="title">
-            <h2 class="page_header">THE SIMMADOME</h2>
+            <h2 class="page_header" style="font-size: 50px;">THE SIMMADOME</h2>
             <h2 class="page_header">Join SIBR on <a href="https://discord.gg/UhAajY2NCW" class="link"><img src="static/discord.png" height="30"></a> to start your own games!</h2>
         </div>
-        <div></div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>