From 5fba158b294ea507d420d7834f3bce211b6b0116 Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Thu, 31 Dec 2020 17:56:08 -0500 Subject: [PATCH] work on league filters --- static/games_page.css | 49 +++++++++++++++++++++++++++++++----------- static/loader.js | 50 +++++++++++++++++++++++++++++++++++++------ templates/index.html | 8 ++++--- 3 files changed, 84 insertions(+), 23 deletions(-) diff --git a/static/games_page.css b/static/games_page.css index af6b1d3..65cb5bd 100644 --- a/static/games_page.css +++ b/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; diff --git a/static/loader.js b/static/loader.js index 7ca2d83..49c9905 100644 --- a/static/loader.js +++ b/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("
"+league+"
"); + } + }); + + 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 = ""; diff --git a/templates/index.html b/templates/index.html index 71354d1..025e71b 100644 --- a/templates/index.html +++ b/templates/index.html @@ -17,12 +17,14 @@

THE SIMMADOME

Join SIBR on to start your own games!

+
+
Filter:
+
All
+