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 @@
+
to start your own games!