Merge pull request #86 from esSteres/master

Add league filters (from #65)

static/games_page.css

@@ -5,34 +5,32 @@ body {
 }
 /* Background pattern from Toptal Subtle Patterns */
 
-#link_div {
+div, button {
     font-family: 'Alegreya', serif;
+    color: white;
+}
+
+#link_div {
     text-align: right;
     position: absolute;
     top: 0px;
     right: 30px;
 }
 
-#link_div > a:link {
+#link_div > a {
-    color: lightblue;
     background-color: transparent;
     text-decoration: underline;
 }
 
-#link_div > a:visited {
+#link_div > a:link, #link_div > a:visited {
     color: lightblue;
-    background-color: transparent;
-    text-decoration: underline;
 }
 
 #link_div > a:hover {
     color: white;
-    background-color: transparent;
-    text-decoration: underline;
 }
 
 .container {
-    font-family: 'Alegreya', serif;
     display: grid;
     grid-template-columns: repeat(3, minmax(500px, 1fr));
     grid-template-rows: 330px;
@@ -45,14 +43,43 @@ body {
 
 #header {
     width: 100%;
-    height: 100px;
+    height: 150px;
-    margin-bottom: 50px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 #header > .page_header {
     margin: auto
 }
 
+#filters {
+    display: flex;
+    justify-content: space-around;
+    width: max-content;
+    margin-top: 10px;
+}
+
+#filters > * {
+    padding: 4px 8px;
+    margin: 0px 8px;
+    font-size: 16pt;
+    background: rgba(0,0,0,0);
+}
+
+#filters > .filter {
+    border-radius: 8px;
+    min-width: 100px;
+    text-align: center;
+    border: none;
+}
+
+#selected_filter {
+    background: rgb(113, 54, 138);
+}
+
 #footer {
     display: flex;
     flex-direction: column;
@@ -63,8 +90,6 @@ body {
 
 #footer > div {
     text-align: center;
-    color: white;
-    font-family: 'Alegreya', serif;
     font-size: 20px;
     position: relative;
     top: 5px;

static/loader.js

@@ -1,6 +1,6 @@
 $(document).ready(function (){
     var socket = io.connect();
-    var gameslist = [];
+    var lastupdate;
     var grid = document.getElementById("container");
     
 
@@ -9,16 +9,72 @@ $(document).ready(function (){
     });
 
     socket.on("states_update", function (json) { //json is an object containing all game updates
+        lastupdate = json;
+        updateGames(json, $('#selected_filter').text());
 
-        if (Object.keys(json).length == 0) {
+        //get all leagues
+        leagues = []
+        for (var key in json) {
+            if (json[key].is_league) {
+                leagues.push(json[key].leagueoruser)
+            }
+        }
+
+        //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 in leagues) { // we removed the entries that are already there in the loop above
+            $('#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) => {
+        filterjson = Object();
+        for (const timestamp in json) {
+            if (json[timestamp].leagueoruser == filter || filter == "All") {
+                filterjson[timestamp] = json[timestamp];
+            }
+        }
+
+        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
-            if (!gameslist.includes(timestamp)) { //adds game to list if not there already
+        for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
-                gameslist.push(timestamp)
+            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 (!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 ++) {
@@ -26,36 +82,30 @@ $(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]);
                 };
             };
         };
 
-        for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
+        //remove last rows if not needed
-            if (grid.children[slotnum].className == "game" && !(Object.keys(json).includes(grid.children[slotnum].timestamp))) {
-                grid.children[slotnum].className = "emptyslot";
-                grid.children[slotnum].innerHTML = "";
-            }
-        }
-
         while (grid.children[grid.children.length-1].className == "emptyslot" &&
                grid.children[grid.children.length-2].className == "emptyslot" &&
                grid.children[grid.children.length-3].className == "emptyslot" &&
                grid.children.length > 3) {
-
             for (var i = 0; i < 3; i++) {
                 grid.removeChild(grid.children[grid.children.length-1]);
             }
         }
-    });
+    }
 
     const insertEmpty = (grid) => {
         newBox = document.createElement("DIV");
@@ -103,7 +153,6 @@ $(document).ready(function (){
         $('#updateTarget .update_text').html(gamestate.update_text);
 
         $('#updateTarget .batting').html((gamestate.display_top_of_inning ? gamestate.away_name : gamestate.home_name) + " batting.");
-        console.log(gamestate.leagueoruser)
         $('#updateTarget .leagueoruser').html(gamestate.leagueoruser);
 
         gamediv.id = "";

templates/index.html

@@ -17,12 +17,14 @@
         <div id="link_div">
             <a href="https://www.patreon.com/sixteen" class="link" target="_blank" rel="noopener noreferrer">Patreon</a><br />
             <a href="https://github.com/Sakimori/matteo-the-prestige" class="link" target="_blank" rel="noopener noreferrer">Github</a><br />
-            <a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" class="link" target="_blank" rel="noopener noreferrer">
+            <a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" class="link" target="_blank" rel="noopener noreferrer">Twitter</a>
-                Twitter
-            </a>
         </div>
         <h2 class="page_header" style="font-size: 50px;">THE SIMMADOME</h2>
         <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>
+        </div>
     </div>
     <section class="container" id="container">
         <div class="emptyslot"></div>

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