give leagues their own page

main_controller.py

@@ -11,13 +11,18 @@ socketio = SocketIO(app)
 def index():
     return render_template("index.html")
 
+@app.route('/league')
+def league():
+    print(request.args)
+    return render_template("index.html", league=request.args['name'])
+
 thread2 = threading.Thread(target=socketio.run,args=(app,'0.0.0.0'))
 thread2.start()
 
 master_games_dic = {} #key timestamp : (game game, {} state)
 data_to_send = []
 
-@socketio.on("recieved")
+@socketio.on("get_states")
 def handle_new_conn(data):
     socketio.emit("states_update", data_to_send, room=request.sid)
 

static/game.html

@@ -1,50 +0,0 @@
-<div class="header">
-    <div class="inning"></div>
-    <div class="weather"></div>
-</div>
-<div class="body">
-    <div class="teams">
-        <div class="team">
-            <div class="team_name away_name"></div>
-            <div class="score away_score"></div>
-        </div>
-        <div class="team">
-            <div class="team_name home_name"></div>
-            <div class="score home_score"></div>
-        </div>
-    </div>
-    <div class="info">
-        <div class="field">
-            <img class="base base_2" src=""/>
-            <div style="display: flex;">
-                <img class="base base_3" src=""/>
-                <img class="base base_1" src=""/>
-            </div>
-        </div>
-        <div class="outs">
-            <div class="outs_title">OUTS</div>
-            <div class="outs_count">
-                <img class="out" src=""/>
-                <img class="out" src=""/>
-            </div>
-        </div>
-    </div>
-    <div class="players">
-        <div class="player pitcher">
-            <div class="player_type">Pitcher:</div>
-            <div class="player_name pitcher_name"></div>
-        </div>
-        <div class="player batter">
-            <div class="player_type">Batter:</div>
-            <div class="player_name batter_name"></div>
-        </div>
-    </div>
-    <div class="update">
-        <div class="update_emoji"></div>
-        <div class="update_text"></div>
-    </div>
-</div>
-<div class="footer">
-    <div class="batting"></div>
-    <div class="leagueoruser"></div>
-</div>

static/games_page.css

@@ -83,6 +83,8 @@ div, button {
     min-width: 100px;
     text-align: center;
     border: none;
+    color: white;
+    text-decoration: none;
 }
 
 #selected_filter {

static/loader.js

@@ -1,52 +1,20 @@
+var socket = io.connect();
+
 $(document).ready(function (){
-    var socket = io.connect();
     var lastupdate;
     var grid = document.getElementById("container");
     
 
     socket.on('connect', function () {
-        socket.emit('recieved', { data: 'I\'m connected!' });
+        socket.emit('get_states', {});
     });
 
     socket.on("states_update", function (json) { //json is an object containing all game updates
+        console.log(json)
         lastupdate = json;
         updateGames(json, $('#selected_filter').text());
-
+        updateLeagues(json);
-        //get all leagues
+        document.getElementsByTagName("html")[0].style.visibility = "visible";
-        leagues = []
-        for (var game of json) {
-            if (game.league != "" && !leagues.includes(game.league)) {
-                leagues.push(game.league)
-            }
-        }
-
-        //remove leagues no longer present
-        $('#filters .filter').each(function(index) {
-            if (!leagues.includes($(this).text())) {
-                if ($(this).attr('id') != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter
-                    $(this).remove();
-                }
-            } else {
-                leagues.splice(leagues.indexOf($(this).text()), 1);
-            }
-        })
-
-        // add leagues not already present
-        for (var league of leagues) { // we removed the entries that are already there in the loop above
-            $('#filters').append("<button class='filter'>"+league+"</button>");
-        }
-
-        //add click handlers to each filter
-        $('#filters .filter').each(function(index) {
-            $(this).click(function() {
-                if ($('#filters #selected_filter').text() == 'All') {
-                    updateGames([], ""); // clear grid when switching off of All, to make games collapse to top
-                }
-                $('#filters #selected_filter').attr('id', '');
-                $(this).attr('id', 'selected_filter');
-                updateGames(lastupdate, $(this).text());
-            })
-        })
     });
 
     const updateGames = (json, filter) => {
@@ -109,7 +77,7 @@ $(document).ready(function (){
     }
 
     const insertEmpty = (grid) => {
-        newBox = document.createElement("DIV");
+        var newBox = document.createElement("DIV");
         newBox.className = "emptyslot";
         grid.appendChild(newBox);
     }
@@ -120,4 +88,62 @@ $(document).ready(function (){
         thisBox.className = "game";
         thisBox.timestamp = game.timestamp;
     };
-});
+
+    const updateLeagues = (games) => {
+        //get all leagues
+        var leagues = []
+        for (var game of games) {
+            if (game.league != "" && !leagues.includes(game.league)) {
+                leagues.push(game.league)
+            }
+        }
+
+         //remove leagues no longer present
+        $('#filters .filter').each(function(index) {
+            if (!leagues.includes($(this).text())) {
+                if (this.id != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter
+                    $(this).remove();
+                }
+            } else {
+                leagues.splice(leagues.indexOf($(this).text()), 1);
+            }
+        })
+
+        // add leagues not already present
+        for (var league of leagues) { // we removed the entries that are already there in the loop above
+            var btn = document.createElement("BUTTON");
+            btn.className = "filter"
+            btn.innerHTML = league
+            $('#filters').append(btn);
+        }
+
+        //add click handlers to each filter
+        $('#filters .filter').each(function(index) {
+            this.onclick = function() {
+                if ($('#filters #selected_filter').text() == 'All') {
+                    updateGames([], ""); // clear grid when switching off of All, to make games collapse to top
+                }
+                $('#filters #selected_filter').attr('id', '');
+                this.id = 'selected_filter';
+
+                var search = new URLSearchParams();
+                search.append("name", this.textContent);
+                console.log("pushing state due to:");
+                console.log(this);
+                history.pushState({'filters' : $('#filters').html()}, "", (this.textContent != 'All' ? "/league?" + search.toString() : "/"));
+                updateGames(lastupdate, this.textContent);
+            }
+        })
+    }
+});
+
+window.onpopstate = function(e) {
+    console.log(e)
+    if (e.state) {
+        $('#filters').html(e.state.filters)
+    } else {
+        $('#filters').html("")
+        $('#filters').append("<button class='filter' id='selected_filter'>All</button>")
+    }
+    socket.emit('get_states', {});
+}

templates/game.html

@@ -1,5 +1,5 @@
 {% macro base(number) -%}
-{% if state.bases[number] %}/static/img/base_filled.png{% else %}/static/img/base_empty.png{% endif %}
+src={% if state.bases[number] %}"/static/img/base_filled.png" alt="{{state.bases[number]}}"{% else %}"/static/img/base_empty.png"{% endif %}
 {%- endmacro %}
 {% macro out(number) -%}
 {% if number <= state.outs %}/static/img/out_out.png{% else %}/static/img/out_in.png{% endif %}
@@ -22,10 +22,10 @@
     </div>
     <div class="info">
         <div class="field">
-            <img class="base base_2" src="{{ base(2) }}"/>
+            <img class="base base_2" {{ base(2) }}/>
             <div style="display: flex;">
-                <img class="base base_3" src="{{ base(3) }}"/>
+                <img class="base base_3" {{ base(3) }}/>
-                <img class="base base_1" src="{{ base(1) }}"/>
+                <img class="base base_1" {{ base(1) }}/>
             </div>
         </div>
         <div class="outs">

templates/index.html

@@ -23,7 +23,8 @@
         <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 id="filters">
             <div>Filter:</div>
-            <button class="filter" id="selected_filter">All</button>
+            <button class="filter" {% if not league %}id="selected_filter"{% endif %}>All</button>
+            {% if league %}<button class="filter" id="selected_filter">{{ league }}</button>{% endif %}
         </div>
     </div>
     <section class="container" id="container">