work on league filters

static/games_page.css

@@ -5,34 +5,32 @@ body {
 }
 /* Background pattern from Toptal Subtle Patterns */
 
-#link_div {
+div {
     font-family: 'Alegreya', serif;
+    color: white;
+}
+
+#link_div {
     text-align: right;
     position: absolute;
     top: 0px;
     right: 30px;
 }
 
-#link_div > a:link {
-    color: lightblue;
+#link_div > a {
     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,41 @@ body {
 
 #header {
     width: 100%;
-    height: 100px;
-    margin-bottom: 50px;
+    height: 150px;
+    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 > div {
+    padding: 4px 8px;
+    margin: 0px 8px;
+    font-size: 16pt;
+}
+
+#filters > .filter {
+    border-radius: 8px;
+    min-width: 50px;
+    text-align: center;
+}
+
+#selected_filter {
+    background: rgb(113, 54, 138);
+}
+
 #footer {
     display: flex;
     flex-direction: column;
@@ -63,8 +88,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,6 +9,41 @@ $(document).ready(function (){
     });
 
     socket.on("states_update", function (json) { //json is an object containing all game updates
+        lastupdate = json;
+        updateGames(json, $('#selected_filter').text());
+
+        //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).remove();
+                }
+            } else {
+                leagues.splice(leagues.indexOf($(this).text()), 1);
+            }
+        })
+
+        // add leagues not already present
+        for (var league in leagues) {
+            $('filters').append("<div class='filter'>"+league+"</div>");
+        }
+    });
+
+    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(json).length == 0) {
             $('#footer div').html("No games right now. Why not head over to Discord and start one?");
@@ -17,8 +52,8 @@ $(document).ready(function (){
         }
 
         for (const timestamp in json) {
-            if (!gameslist.includes(timestamp)) { //adds game to list if not there already
-                gameslist.push(timestamp)
+            //adds game to list if not there already
+            if (!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 ++) {
@@ -32,6 +67,7 @@ $(document).ready(function (){
                 };
             };
 
+            //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]);
@@ -39,23 +75,24 @@ $(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(json).includes(grid.children[slotnum].timestamp))) {
+            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" &&
                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 +140,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">
-                Twitter
-            </a>
+            <a href="https://twitter.com/intent/follow?screen_name=SIBR_XVI" class="link" target="_blank" rel="noopener noreferrer">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>
+            <div class="filter" id="selected_filter">All</div>
+        </div>
     </div>
     <section class="container" id="container">
         <div class="emptyslot"></div>