built rudimentary css grid for games, loader.js now directs updates to appropriate grid square as they come in

main_controller.py

@@ -1,24 +1,32 @@
 import asyncio, time, datetime, games, json, threading
-from flask import Flask, url_for, Response
+from flask import Flask, url_for, Response, render_template, request, jsonify
+from flask_socketio import SocketIO, emit
 
 app = Flask("the-prestige")
+app.config['SECRET KEY'] = 'dev'
+socketio = SocketIO(app)
 
 @app.route('/')
-def hello():
+def index():
-    return url_for("boop")
+    return render_template("index.html")
 
 @app.route("/gotoboop")
-def boop():
+def get_game_states():
     return states_to_send
 
-thread2 = threading.Thread(target=app.run)
+@socketio.on("recieved")
+def do_another_thing(data):
+    print(data)
+
+thread2 = threading.Thread(target=socketio.run,args=(app,))
 thread2.start()
 
 master_games_dic = {} #key timestamp : (game game, {} state)
-states_to_send = {}
+
 
 def update_loop():
     while True:
+        states_to_send = {}
         game_times = iter(master_games_dic.copy().keys())
         for game_time in game_times:
             this_game, state = master_games_dic[game_time]
@@ -41,7 +49,7 @@ def update_loop():
                     state["update_pause"] = 2
                     state["pitcher"] = "-"
                     state["batter"] = "-"
-                    if state["top_of_inning"]:
+                    if not state["top_of_inning"]:
                         state["display_inning"] -= 1
 
                 if state["update_pause"] == 1:
@@ -91,4 +99,5 @@ def update_loop():
 
             state["update_pause"] -= 1
 
-        time.sleep(6)
+        socketio.emit("states_update", states_to_send)
+        time.sleep(1)

static/games_page.css

@@ -0,0 +1,43 @@
+@import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
+body {
+    background-image: url("prism.png");
+}
+/* Background pattern from Toptal Subtle Patterns */
+
+.container {
+    font-family: 'Alegreya', serif;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 100px 300px;
+    grid-gap: 50px 30px; /*space between rows, then columns*/
+    align-items: center;
+    justify-items: center;
+    grid-auto-rows: 300px;
+    grid-auto-flow: row;
+}
+
+.h1 {
+    margin: auto;
+    width: 45%;
+    font-family: 'Alegreya', serif;
+}
+
+.emptyslot {
+    border: 2px dashed white;
+    border-radius: 15px;
+    align-self: stretch;
+    justify-self: stretch;
+    text-align: center;
+    color: white;
+}
+
+.game {
+    font-family: 'Alegreya', serif;
+    color: white;
+}
+
+h2 {
+    font-family: 'Alegreya', serif;
+    color: white;
+    text-align: center;
+}

static/loader.js

@@ -0,0 +1,41 @@
+$(document).ready(function (){
+    var socket = io.connect();
+    var gameslist = [];
+    var maxslot = 3;
+    var grid = document.getElementById("container");
+    
+
+    socket.on('connect', function () {
+        socket.emit('recieved', { data: 'I\'m connected!' });
+    });
+
+    socket.on("states_update", function (json) { //json is an object containing all game updates
+        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 <= maxslot; slotnum++) {
+                    if (gridBoxes[slotnum].className == "emptyslot") {
+                        insertGame(slotnum, json[timestamp], timestamp);
+                        maxslot += 1;
+                        break;
+                    };
+                };
+            };
+
+            for (var slotnum = 3; slotnum <= maxslot; slotnum++) {
+                if (grid.children[slotnum].timestamp == timestamp) {
+                    console.log(json[timestamp].update_text)
+                    grid.children[slotnum].textContent = json[timestamp].update_text;
+                };
+            };
+        };
+    });
+
+    const insertGame = (gridboxnum, gamestate, timestamp) => {
+        var thisBox = grid.children[gridboxnum];
+        thisBox.className = "game";
+        thisBox.timestamp = timestamp
+        thisBox.textContent = gamestate.update_text;
+    };
+});

templates/index.html

@@ -0,0 +1,32 @@
+<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>
+    <script src="static/loader.js"></script>
+    <link rel="stylesheet" href="/static/games_page.css">
+    <title>⚾ The Blaseball Simsim</title>
+</head>
+
+<body>
+    <section class="container" id="container">
+        <div></div>
+        <div class="emptyslot" id="title">
+            <h1>game page ahoy</h1>
+        </div>
+        <div></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>
+        <div class="emptyslot"></div>
+    </section>
+</body>
+</html>

the-prestige.pyproj

@@ -57,6 +57,14 @@
     <Content Include="games_config.json" />
     <Content Include="ids" />
     <Content Include="matteo.db" />
+    <Content Include="static\games_page.css" />
+    <Content Include="static\loader.js" />
+    <Content Include="static\prism.png" />
+    <Content Include="templates\index.html" />
+  </ItemGroup>
+  <ItemGroup>
+    <Folder Include="static\" />
+    <Folder Include="templates\" />
   </ItemGroup>
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\Python Tools\Microsoft.PythonTools.targets" />
   <!-- Uncomment the CoreCompile target to enable the Build command in

the_prestige.py

@@ -550,10 +550,10 @@ async def watch_game(channel, newgame, user = None):
         "victory_lap" : False,
         "weather_emoji" : newgame.weather.emoji,
         "weather_text" : newgame.weather.name,
-        "delay" : 3
+        "delay" : -1
         } 
 
-    main_controller.master_games_dic[time.time()] = (newgame, state_init)
+    main_controller.master_games_dic[str(time.time())] = (newgame, state_init)
 
     #while not newgame.over or newgame.top_of_inning != top_of_inning:
     #    state = newgame.gamestate_display_full()