2020-12-29 00:48:50 +00:00
|
|
|
$(document).ready(function (){
|
|
|
|
var socket = io.connect();
|
2020-12-31 22:56:08 +00:00
|
|
|
var lastupdate;
|
2020-12-29 00:48:50 +00:00
|
|
|
var grid = document.getElementById("container");
|
|
|
|
|
|
|
|
|
|
|
|
socket.on('connect', function () {
|
|
|
|
socket.emit('recieved', { data: 'I\'m connected!' });
|
|
|
|
});
|
|
|
|
|
|
|
|
socket.on("states_update", function (json) { //json is an object containing all game updates
|
2020-12-31 22:56:08 +00:00
|
|
|
lastupdate = json;
|
|
|
|
updateGames(json, $('#selected_filter').text());
|
|
|
|
|
|
|
|
//get all leagues
|
|
|
|
leagues = []
|
|
|
|
for (var key in json) {
|
2021-01-01 01:40:52 +00:00
|
|
|
if (json[key].is_league && !leagues.includes(json[key].leagueoruser)) {
|
2020-12-31 22:56:08 +00:00
|
|
|
leagues.push(json[key].leagueoruser)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//remove leagues no longer present
|
|
|
|
$('#filters .filter').each(function(index) {
|
|
|
|
if (!leagues.includes($(this).text())) {
|
2021-01-01 01:19:57 +00:00
|
|
|
if ($(this).attr('id') != 'selected_filter' && $(this).text() != "All") { //don't remove the currently selected filter or the "all" filter
|
2020-12-31 22:56:08 +00:00
|
|
|
$(this).remove();
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
leagues.splice(leagues.indexOf($(this).text()), 1);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
// add leagues not already present
|
2021-01-01 01:19:57 +00:00
|
|
|
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>");
|
2020-12-31 22:56:08 +00:00
|
|
|
}
|
2021-01-01 01:19:57 +00:00
|
|
|
|
|
|
|
//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());
|
|
|
|
})
|
|
|
|
})
|
2020-12-31 22:56:08 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const updateGames = (json, filter) => {
|
|
|
|
filterjson = Object();
|
|
|
|
for (const timestamp in json) {
|
|
|
|
if (json[timestamp].leagueoruser == filter || filter == "All") {
|
|
|
|
filterjson[timestamp] = json[timestamp];
|
|
|
|
}
|
|
|
|
}
|
2020-12-30 20:10:29 +00:00
|
|
|
|
2021-01-01 01:19:57 +00:00
|
|
|
if (Object.keys(filterjson).length == 0) {
|
2020-12-30 20:10:29 +00:00
|
|
|
$('#footer div').html("No games right now. Why not head over to Discord and start one?");
|
|
|
|
} else {
|
|
|
|
$('#footer div').html("");
|
|
|
|
}
|
|
|
|
|
2021-01-01 01:19:57 +00:00
|
|
|
//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) {
|
2020-12-31 22:56:08 +00:00
|
|
|
//adds game to list if not there already
|
2021-01-01 01:19:57 +00:00
|
|
|
if (!Array.prototype.slice.call(grid.children).some((x) => x.timestamp == timestamp)) {
|
2020-12-31 06:33:03 +00:00
|
|
|
for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone
|
2020-12-30 08:50:29 +00:00
|
|
|
if (slotnum >= grid.children.length) {
|
|
|
|
for (var i = 0; i < 3; i ++) {
|
2020-12-30 23:53:15 +00:00
|
|
|
insertEmpty(grid);
|
2020-12-30 08:50:29 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
if (grid.children[slotnum].className == "emptyslot") {
|
2021-01-01 01:19:57 +00:00
|
|
|
insertGame(slotnum, filterjson[timestamp], timestamp);
|
2020-12-29 00:48:50 +00:00
|
|
|
break;
|
|
|
|
};
|
|
|
|
};
|
2021-01-01 01:19:57 +00:00
|
|
|
}
|
2020-12-29 00:48:50 +00:00
|
|
|
|
2020-12-31 22:56:08 +00:00
|
|
|
//updates game in list
|
2020-12-31 06:33:03 +00:00
|
|
|
for (var slotnum = 0; slotnum < grid.children.length; slotnum++) {
|
2020-12-29 00:48:50 +00:00
|
|
|
if (grid.children[slotnum].timestamp == timestamp) {
|
2021-01-01 01:19:57 +00:00
|
|
|
updateGame(grid.children[slotnum], filterjson[timestamp]);
|
2020-12-29 00:48:50 +00:00
|
|
|
};
|
|
|
|
};
|
|
|
|
};
|
2020-12-30 23:53:15 +00:00
|
|
|
|
2020-12-31 22:56:08 +00:00
|
|
|
//remove last rows if not needed
|
2020-12-31 08:45:42 +00:00
|
|
|
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]);
|
|
|
|
}
|
2020-12-30 23:53:15 +00:00
|
|
|
}
|
2020-12-31 22:56:08 +00:00
|
|
|
}
|
2020-12-31 02:32:07 +00:00
|
|
|
|
2020-12-30 23:53:15 +00:00
|
|
|
const insertEmpty = (grid) => {
|
|
|
|
newBox = document.createElement("DIV");
|
|
|
|
newBox.className = "emptyslot";
|
|
|
|
grid.appendChild(newBox);
|
|
|
|
}
|
2020-12-29 00:48:50 +00:00
|
|
|
|
|
|
|
const insertGame = (gridboxnum, gamestate, timestamp) => {
|
|
|
|
var thisBox = grid.children[gridboxnum];
|
2020-12-30 08:50:29 +00:00
|
|
|
thisBox.className = "game";
|
|
|
|
thisBox.timestamp = timestamp;
|
2020-12-30 07:18:40 +00:00
|
|
|
fetch("/static/game.html").then(x=>x.text()).then(gamehtml => {
|
|
|
|
thisBox.innerHTML = gamehtml;
|
|
|
|
updateGame(thisBox, gamestate);
|
|
|
|
});
|
2020-12-30 06:31:19 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
const BASE_EMPTY = "/static/img/base_empty.png"
|
|
|
|
const BASE_FILLED = "/static/img/base_filled.png"
|
|
|
|
const OUT_OUT = "/static/img/out_out.png"
|
|
|
|
const OUT_IN = "/static/img/out_in.png"
|
|
|
|
|
|
|
|
const updateGame = (gamediv, gamestate) => {
|
|
|
|
gamediv.id = "updateTarget";
|
2020-12-30 07:48:39 +00:00
|
|
|
$('#updateTarget .inning').html("Inning: " + (gamestate.display_top_of_inning ? "🔼" : "🔽") + " " + gamestate.display_inning + "/" + gamestate.max_innings);
|
2020-12-30 06:31:19 +00:00
|
|
|
$('#updateTarget .weather').html(gamestate.weather_emoji + " " + gamestate.weather_text);
|
|
|
|
|
|
|
|
$('#updateTarget .away_name').html(gamestate.away_name);
|
|
|
|
$('#updateTarget .home_name').html(gamestate.home_name);
|
|
|
|
$('#updateTarget .away_score').html("" + gamestate.away_score);
|
|
|
|
$('#updateTarget .home_score').html("" + gamestate.home_score);
|
|
|
|
|
|
|
|
for (var i = 1; i <= 3; i++) {
|
|
|
|
$('#updateTarget .base_' + i).attr('src', (gamestate.bases[i] == null ? BASE_EMPTY : BASE_FILLED));
|
|
|
|
}
|
|
|
|
|
|
|
|
$('#updateTarget .outs_count').children().each(function(index) {
|
|
|
|
$(this).attr('src', index < gamestate.outs ? OUT_OUT : OUT_IN);
|
|
|
|
});
|
|
|
|
|
|
|
|
$('#updateTarget .pitcher_name').html(gamestate.pitcher);
|
|
|
|
$('#updateTarget .batter_name').html(gamestate.batter);
|
|
|
|
|
|
|
|
$('#updateTarget .update_emoji').html(gamestate.update_emoji);
|
|
|
|
$('#updateTarget .update_text').html(gamestate.update_text);
|
|
|
|
|
2020-12-31 08:32:01 +00:00
|
|
|
$('#updateTarget .batting').html((gamestate.display_top_of_inning ? gamestate.away_name : gamestate.home_name) + " batting.");
|
2020-12-31 18:41:32 +00:00
|
|
|
$('#updateTarget .leagueoruser').html(gamestate.leagueoruser);
|
2020-12-30 06:31:19 +00:00
|
|
|
|
|
|
|
gamediv.id = "";
|
2020-12-29 00:48:50 +00:00
|
|
|
};
|
|
|
|
});
|