add league filters

static/games_page.css

@@ -5,7 +5,7 @@ body {
 }
 /* Background pattern from Toptal Subtle Patterns */
 
-div {
+div, button {
     font-family: 'Alegreya', serif;
     color: white;
 }
@@ -62,16 +62,18 @@ div {
     margin-top: 10px;
 }
 
-#filters > div {
+#filters > * {
     padding: 4px 8px;
     margin: 0px 8px;
     font-size: 16pt;
+    background: rgba(0,0,0,0);
 }
 
 #filters > .filter {
     border-radius: 8px;
-    min-width: 50px;
+    min-width: 100px;
     text-align: center;
+    border: none;
 }
 
 #selected_filter {

static/loader.js

@@ -23,7 +23,7 @@ $(document).ready(function (){
         //remove leagues no longer present
         $('#filters .filter').each(function(index) {
             if (!leagues.includes($(this).text())) {
-                if ($(this).attr('id') != 'selected_filter') {
+                if ($(this).attr('id') != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter
                     $(this).remove();
                 }
             } else {
@@ -32,9 +32,21 @@ $(document).ready(function (){
         })
 
         // add leagues not already present
-        for (var league in leagues) {
+        for (var league in leagues) { // we removed the entries that are already there in the loop above
-            $('filters').append("<div class='filter'>"+league+"</div>");
+            $('#filters').append("<button class='filter'>"+leagues[league]+"</button>");
         }
+
+        //add click handlers to each filter
+        $('#filters .filter').each(function(index) {
+            $(this).click(function() {
+                if ($('#filters #selected_filter').text() == 'All') {
+                    updateGames(Object(), ""); // 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) => {
@@ -45,15 +57,24 @@ $(document).ready(function (){
             }
         }
 
-        if (Object.keys(json).length == 0) {
+        if (Object.keys(filterjson).length == 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) {
+        //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)) {
+                grid.children[slotnum].className = "emptyslot";
+                grid.children[slotnum].timestamp = null;
+                grid.children[slotnum].innerHTML = "";
+            }
+        }
+
+        for (const timestamp in filterjson) {
             //adds game to list if not there already
-            if (!grid.children.some((x) => x.timestamp == timestamp)) {
+            if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == 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 ++) {
@@ -61,28 +82,20 @@ $(document).ready(function (){
                         }
                     }
                     if (grid.children[slotnum].className == "emptyslot") {
-                        insertGame(slotnum, json[timestamp], timestamp);
+                        insertGame(slotnum, filterjson[timestamp], timestamp);
                         break;
                     };
                 };
-            };
+            }
 
             //updates game in list
             for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
                 if (grid.children[slotnum].timestamp == timestamp) {
-                    updateGame(grid.children[slotnum], json[timestamp]);
+                    updateGame(grid.children[slotnum], filterjson[timestamp]);
                 };
             };
         };
 
-        //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(json).includes(grid.children[slotnum].timestamp)) {
-                grid.children[slotnum].className = "emptyslot";
-                grid.children[slotnum].innerHTML = "";
-            }
-        }
-
         //remove last rows if not needed
         while (grid.children[grid.children.length-1].className == "emptyslot" &&
                grid.children[grid.children.length-2].className == "emptyslot" &&

templates/index.html

@@ -23,7 +23,7 @@
         <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>
-            <div class="filter" id="selected_filter">All</div>
+            <button class="filter" id="selected_filter">All</button>
         </div>
     </div>
     <section class="container" id="container">

the_prestige.py

@@ -124,6 +124,7 @@ class StartGameCommand(Command):
         elif "--league " in command.split("\n")[0]:
             league = command.split("\n")[0].split("--league ")[1]
 
+        innings = None
         try:
             team_name1 = command.split("\n")[1].strip()
             team1 = games.get_team(team_name1)
@@ -152,7 +153,6 @@ class StartGameCommand(Command):
                     teams = games.search_team(team_name2.lower())
                     if len(teams) == 1:
                         team2 = teams[0]
-                    innings = None
             except IndexError:
                 await msg.channel.send("We need at least three lines: startgame, away team, and home team are required. Optionally, the number of innings can go at the end, if you want a change of pace.")
                 return