make games appear immediately on page load and add message for when no games are running

main_controller.py

@@ -15,13 +15,14 @@ def get_game_states():
     return states_to_send
 
 @socketio.on("recieved")
-def do_another_thing(data):
-    print(data)
+def handle_new_conn(data):
+    socketio.emit("states_update", last_update, room=request.sid)
 
 thread2 = threading.Thread(target=socketio.run,args=(app,))
 thread2.start()
 
 master_games_dic = {} #key timestamp : (game game, {} state)
+last_update = {}
 
 
 def update_loop():
@@ -101,6 +102,7 @@ def update_loop():
                 this_game.gamestate_update_full()
 
             state["update_pause"] -= 1
-
+        global last_update
+        last_update = states_to_send
         socketio.emit("states_update", states_to_send)
         time.sleep(3)

static/games_page.css

@@ -26,6 +26,23 @@ body {
     margin: auto
 }
 
+#footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 75px;
+}
+
+#footer > div {
+    text-align: center;
+    color: white;
+    font-family: 'Alegreya', serif;
+    font-size: 20px;
+    position: relative;
+    top: 5px;
+}
+
 .link{
     position: relative;
     top: 10px; 

static/loader.js

@@ -10,10 +10,17 @@ $(document).ready(function (){
     });
 
     socket.on("states_update", function (json) { //json is an object containing all game updates
+
+        if (Object.keys(json) == 0) {
+            $('#footer div').html("No games right now. Why not head over to Discord and start one?");
+        } else {
+            $('#footer div').html("");
+        }
+
         for (const timestamp in json) {
             if (!gameslist.includes(timestamp)) { //adds game to list if not there already
                 gameslist.push(timestamp)
-                for (var slotnum = 1; 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 shh don't tell anyone
                     if (slotnum >= grid.children.length) {
                         for (var i = 0; i < 3; i ++) {
                             newBox = document.createElement("DIV");

templates/index.html

@@ -16,15 +16,9 @@
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>
         <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
-        <div class="emptyslot"></div>
     </section>
+    <div id="footer">
+        <div></div>
+    </div>
 </body>
 </html>