Merge pull request #87 from esSteres/master

Reduce load on site by generating HTML server-side

main_controller.py

@@ -1,4 +1,4 @@
-import asyncio, time, datetime, games, json, threading
+import asyncio, time, datetime, games, json, threading, jinja2
 from flask import Flask, url_for, Response, render_template, request, jsonify
 from flask_socketio import SocketIO, emit
 
@@ -10,24 +10,36 @@ socketio = SocketIO(app)
 def index():
     return render_template("index.html")
 
-@app.route("/gotoboop")
-def get_game_states():
-    return states_to_send
-
-@socketio.on("recieved")
-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 = {}
+game_states = {}
 
+def data_to_send():
+    template = jinja2.Environment(loader=jinja2.FileSystemLoader('templates')).get_template('game.html')
+    data = []
+    for timestamp in game_states:
+        data.append({
+            'timestamp' : timestamp,
+            'league' : game_states[timestamp]['leagueoruser'] if game_states[timestamp]['is_league'] else '',
+            'html' : template.render( 
+                state=game_states[timestamp], 
+                base_filled="/static/img/base_filled.png", 
+                base_empty="/static/img/base_empty.png", 
+                out_out="/static/img/out_out.png", 
+                out_in="/static/img/out_in.png"
+            )
+        })
+    return data
+
+@socketio.on("recieved")
+def handle_new_conn(data):
+    socketio.emit("states_update", data_to_send(), room=request.sid)
 
 def update_loop():
     while True:
-        states_to_send = {}
+        global game_states
         game_times = iter(master_games_dic.copy().keys())
         for game_time in game_times:
             this_game, state, discrim_string = master_games_dic[game_time]
@@ -109,7 +121,7 @@ def update_loop():
 
             state["top_of_inning"] = this_game.top_of_inning 
 
-            states_to_send[game_time] = state
+            game_states[game_time] = state
 
             if state["update_pause"] <= 1 and state["start_delay"] < 0:
                 if this_game.over:
@@ -122,8 +134,5 @@ def update_loop():
 
             state["update_pause"] -= 1
 
-        global last_update
+        socketio.emit("states_update", data_to_send())
-        last_update = states_to_send
-        
-        socketio.emit("states_update", states_to_send)
         time.sleep(6)

static/loader.js

@@ -14,9 +14,9 @@ $(document).ready(function (){
 
         //get all leagues
         leagues = []
-        for (var key in json) {
+        for (var i in json) {
-            if (json[key].is_league && !leagues.includes(json[key].leagueoruser)) {
+            if (json[i].league != "" && !leagues.includes(json[i].league)) {
-                leagues.push(json[key].leagueoruser)
+                leagues.push(json[i].league)
             }
         }
 
@@ -32,8 +32,8 @@ $(document).ready(function (){
         })
 
         // add leagues not already present
-        for (var league in leagues) { // we removed the entries that are already there in the loop above
+        for (var i in leagues) { // we removed the entries that are already there in the loop above
-            $('#filters').append("<button class='filter'>"+leagues[league]+"</button>");
+            $('#filters').append("<button class='filter'>"+leagues[i]+"</button>");
         }
 
         //add click handlers to each filter
@@ -50,14 +50,14 @@ $(document).ready(function (){
     });
 
     const updateGames = (json, filter) => {
-        filterjson = Object();
+        filterjson = [];
-        for (const timestamp in json) {
+        for (var i in json) {
-            if (json[timestamp].leagueoruser == filter || filter == "All") {
+            if (json[i].league == filter || filter == "All") {
-                filterjson[timestamp] = json[timestamp];
+                filterjson.push(json[i]);
             }
         }
 
-        if (Object.keys(filterjson).length == 0) {
+        if (filterjson.length == 0) {
             $('#footer div').html("No games right now. Why not head over to Discord and start one?");
         } else {
             $('#footer div').html("");
@@ -65,16 +65,16 @@ $(document).ready(function (){
 
         //replace games that have ended with empty slots
         for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
-            if (grid.children[slotnum].className == "game" && !Object.keys(filterjson).includes(grid.children[slotnum].timestamp)) {
+            if (grid.children[slotnum].className == "game" && !filterjson.some((x) => x.timestamp == grid.children[slotnum].timestamp)) {
                 grid.children[slotnum].className = "emptyslot";
                 grid.children[slotnum].timestamp = null;
                 grid.children[slotnum].innerHTML = "";
             }
         }
 
-        for (const timestamp in filterjson) {
+        for (var i in filterjson) {
             //adds game to list if not there already
-            if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == timestamp)) {
+            if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == filterjson[i].timestamp)) {
                 for (var slotnum = 0; 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 ++) {
@@ -82,7 +82,7 @@ $(document).ready(function (){
                         }
                     }
                     if (grid.children[slotnum].className == "emptyslot") {
-                        insertGame(slotnum, filterjson[timestamp], timestamp);
+                        insertGame(slotnum, filterjson[i]);
                         break;
                     };
                 };
@@ -90,8 +90,8 @@ $(document).ready(function (){
 
             //updates game in list
             for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
-                if (grid.children[slotnum].timestamp == timestamp) {
+                if (grid.children[slotnum].timestamp == filterjson[i].timestamp) {
-                    updateGame(grid.children[slotnum], filterjson[timestamp]);
+                    insertGame(slotnum, filterjson[i]);
                 };
             };
         };
@@ -113,48 +113,10 @@ $(document).ready(function (){
         grid.appendChild(newBox);
     }
 
-    const insertGame = (gridboxnum, gamestate, timestamp) => {
+    const insertGame = (gridboxnum, game) => {
         var thisBox = grid.children[gridboxnum];
+        thisBox.innerHTML = game.html;
         thisBox.className = "game";
-        thisBox.timestamp = timestamp;
+        thisBox.timestamp = game.timestamp;
-        fetch("/static/game.html").then(x=>x.text()).then(gamehtml => {
-            thisBox.innerHTML = gamehtml;
-            updateGame(thisBox, gamestate);
-        });
-    };
-
-    const BASE_EMPTY = "/static/img/base_empty.png"
-    const BASE_FILLED = "/static/img/base_filled.png"
-    const OUT_OUT = "/static/img/out_out.png"
-    const OUT_IN = "/static/img/out_in.png"
-
-    const updateGame = (gamediv, gamestate) => {
-        gamediv.id = "updateTarget";
-        $('#updateTarget .inning').html("Inning: " + (gamestate.display_top_of_inning ? "🔼" : "🔽") + " " + gamestate.display_inning + "/" + gamestate.max_innings);
-        $('#updateTarget .weather').html(gamestate.weather_emoji + " " + gamestate.weather_text);
-
-        $('#updateTarget .away_name').html(gamestate.away_name);
-        $('#updateTarget .home_name').html(gamestate.home_name);
-        $('#updateTarget .away_score').html("" + gamestate.away_score);
-        $('#updateTarget .home_score').html("" + gamestate.home_score);
-
-        for (var i = 1; i <= 3; i++) {
-            $('#updateTarget .base_' + i).attr('src', (gamestate.bases[i] == null ? BASE_EMPTY : BASE_FILLED));
-        }
-
-        $('#updateTarget .outs_count').children().each(function(index) {
-            $(this).attr('src', index < gamestate.outs ? OUT_OUT : OUT_IN);
-        });
-
-        $('#updateTarget .pitcher_name').html(gamestate.pitcher);
-        $('#updateTarget .batter_name').html(gamestate.batter);
-
-        $('#updateTarget .update_emoji').html(gamestate.update_emoji);
-        $('#updateTarget .update_text').html(gamestate.update_text);
-
-        $('#updateTarget .batting').html((gamestate.display_top_of_inning ? gamestate.away_name : gamestate.home_name) + " batting.");
-        $('#updateTarget .leagueoruser').html(gamestate.leagueoruser);
-
-        gamediv.id = "";
     };
 });

templates/game.html

@@ -0,0 +1,57 @@
+{% macro base(number) -%}
+{% if state.bases[number] %}{{base_filled}}{% else %}{{base_empty}}{% endif %}
+{%- endmacro %}
+{% macro out(number) -%}
+{% if number <= state.outs %}{{out_filled}}{% else %}{{out_empty}}{% endif %}
+{%- endmacro %}
+
+<div class="header">
+    <div class="inning">Inning: {% if state.display_top_of_inning == true %}🔼{% else %}🔽{% endif %} {{ state.display_inning }}/{{ state.max_innings }}</div>
+    <div class="weather">{{ state.weather_emoji }} {{ state.weather_text }}</div>
+</div>
+<div class="body">
+    <div class="teams">
+        <div class="team">
+            <div class="team_name">{{ state.away_name }}</div>
+            <div class="score">{{ state.away_score }}</div>
+        </div>
+        <div class="team">
+            <div class="team_name">{{ state.home_name }}</div>
+            <div class="score">{{ state.home_score }}</div>
+        </div>
+    </div>
+    <div class="info">
+        <div class="field">
+            <img class="base base_2" src="{{ base(2) }}"/>
+            <div style="display: flex;">
+                <img class="base base_3" src="{{ base(3) }}"/>
+                <img class="base base_1" src="{{ base(1) }}"/>
+            </div>
+        </div>
+        <div class="outs">
+            <div class="outs_title">OUTS</div>
+            <div class="outs_count">
+                <img class="out" src="{{ out(1) }}"/>
+                <img class="out" src="{{ out(2) }}"/>
+            </div>
+        </div>
+    </div>
+    <div class="players">
+        <div class="player pitcher">
+            <div class="player_type">Pitcher:</div>
+            <div class="player_name pitcher_name">{{ state.pitcher }}</div>
+        </div>
+        <div class="player batter">
+            <div class="player_type">Batter:</div>
+            <div class="player_name batter_name">{{ state.batter }}</div>
+        </div>
+    </div>
+    <div class="update">
+        <div class="update_emoji">{{ state.update_emoji }}</div>
+        <div class="update_text">{{ state.update_text }}</div>
+    </div>
+</div>
+<div class="footer">
+    <div class="batting">{% if state.display_top_of_inning == true %}{{ state.away_name }}{% else %}{{ state.home_name }}{% endif %}</div>
+    <div class="leagueoruser">{{ state.leagueoruser }}</div>
+</div>