Merge pull request #86 from esSteres/master
Add league filters (from #65)
This commit is contained in:
commit
47c1cb2c06
|
@ -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 {
|
||||
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,43 @@ 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 > * {
|
||||
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;
|
||||
|
|
|
@ -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) {
|
||||
if (!gameslist.includes(timestamp)) { //adds game to list if not there already
|
||||
gameslist.push(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(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++) {
|
||||
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 +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 = "";
|
||||
|
|
|
@ -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>
|
||||
<button class="filter" id="selected_filter">All</button>
|
||||
</div>
|
||||
</div>
|
||||
<section class="container" id="container">
|
||||
<div class="emptyslot"></div>
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue
Block a user