Chandler Swift
9100cd6ced
Checking the first ten or so results, the ESPN API always seems to return them in this order. If that ever stops being the case, we can always check if `competitors[0]` is home or away, but that appears to be unnecessary at this point. Requested-By: Eric Villnow Fixes: #2
116 lines
5.1 KiB
HTML
116 lines
5.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Upcoming NHL Games | BannerGen</title>
|
|
<link href="bootstrap.min.css" rel="stylesheet">
|
|
<script src="bootstrap.bundle.min.js"></script>
|
|
<style>
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 300px;
|
|
display: block;
|
|
margin: auto;
|
|
padding: 1em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="../">BannerGen</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link" aria-current="page" href="../">Home</a>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link active dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
|
Upcoming Games
|
|
</a>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<li><a class="dropdown-item" href="upcoming-games.html?league=hockey/nhl">NHL</a></li>
|
|
<li><a class="dropdown-item" href="upcoming-games.html?league=baseball/mlb">MLB</a></li>
|
|
<li><a class="dropdown-item" href="upcoming-games.html?league=football/nfl">NFL</a></li>
|
|
<li><a class="dropdown-item" href="upcoming-games.html?league=basketball/nba">NBA</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="../about.html">About</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container my-5">
|
|
<h1>Upcoming Games</h1>
|
|
<div class="btn-group">
|
|
<button class="btn btn-outline-primary" id="older">«</button>
|
|
<button class="btn btn-outline-primary btn-disabled" id="current" disabled></button>
|
|
<button class="btn btn-outline-primary" id="newer">»</button>
|
|
</div>
|
|
<div id="upcoming-games"></div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
const league_sport = (new URLSearchParams(document.location.search)).get("league") ?? "hockey/nhl";
|
|
if (league_sport == "football/nfl") {
|
|
alert("Heads up! ESPN tracks NFL dates differently, and as such the datepicker doesn't currently work. This is a known defect.");
|
|
}
|
|
let dates, current_date_index;
|
|
function populateUpcomingGames(scoreboard_data) {
|
|
const upcoming_games_div = document.getElementById('upcoming-games');
|
|
upcoming_games_div.replaceChildren();
|
|
for (const event of scoreboard_data.events) {
|
|
const competition = event.competitions[0];
|
|
console.log(competition);
|
|
const params = new URLSearchParams({
|
|
left_logo: competition.competitors[1].team.logo,
|
|
right_logo: competition.competitors[0].team.logo,
|
|
left_color: competition.competitors[1].team.color,
|
|
right_color: competition.competitors[0].team.color,
|
|
});
|
|
|
|
const a = document.createElement('a');
|
|
a.href = event.links[0].href;
|
|
const img = document.createElement('img');
|
|
img.src = "../generate/image.png?" + params;
|
|
a.appendChild(img);
|
|
upcoming_games_div.appendChild(a);
|
|
}
|
|
}
|
|
async function updateDate(date_index) {
|
|
current_date_index = date_index;
|
|
const date = dates[date_index];
|
|
document.getElementById('older').disabled = date_index == 0;
|
|
document.getElementById('current').innerHTML = date;
|
|
document.getElementById('newer').disabled = date_index == dates.length - 1;
|
|
const scoreboard_res = await fetch(`https://site.api.espn.com/apis/site/v2/sports/${league_sport}/scoreboard?dates=${date.replaceAll('-', '')}`);
|
|
const scoreboard_data = await scoreboard_res.json();
|
|
populateUpcomingGames(scoreboard_data);
|
|
}
|
|
(async function(){
|
|
const scoreboard_res = await fetch(`https://site.api.espn.com/apis/site/v2/sports/${league_sport}/scoreboard`);
|
|
const scoreboard_data = await scoreboard_res.json();
|
|
window.data = scoreboard_data;
|
|
populateUpcomingGames(scoreboard_data);
|
|
dates = scoreboard_data.leagues[0].calendar.map(s => s.split('T')[0]);
|
|
const date = scoreboard_data.events[0].date.split('T')[0]
|
|
current_date_index = dates.indexOf(date);
|
|
|
|
document.getElementById("older").addEventListener('click', function(){
|
|
updateDate(current_date_index-1);
|
|
});
|
|
document.getElementById("current").innerHTML = date;
|
|
document.getElementById("newer").addEventListener('click', function(){
|
|
updateDate(current_date_index+1);
|
|
});
|
|
})();
|
|
</script>
|
|
</html>
|