Add toggle for non-ILB teams & hide those teams by default

This commit is contained in:
Lavender Perry 2021-06-16 11:21:20 -07:00
parent 599b266ec0
commit ea672d710a
Signed by untrusted user: elle
GPG key ID: EF8E44AF715C28A0
2 changed files with 93 additions and 45 deletions

View file

@ -6,7 +6,13 @@
</title>
</head>
<body>
<form id="shadows">
<form id="options">
<input type="checkbox" id="fkteams_toggle">
<label for="fkteams_toggle">
Toggle teams that are not in the ILB.
This may include spoilers for new teams.
</label>
<br />
<input type="checkbox" id="shadows_toggle">
<label for="shadows_toggle">
Toggle shadowed players
@ -16,6 +22,10 @@
</div>
<div id="results_shadowed">
</div>
<div id="fkresults">
</div>
<div id="fkresults_shadowed">
</div>
<h1 id="progress">
Loading...
</h1>

126
main.js
View file

@ -1,78 +1,116 @@
"use strict"
let api_response = fetch(
"https://cors-proxy.blaseball-reference.com/database/allTeams",
).then(function(response) {
/* All undeclared variables are IDs of HTML elements */
// Get & parse Blaseball API data
const datablase = "https://cors-proxy.blaseball-reference.com/database/"
fetch(datablase + "allTeams").then(function(response) {
const aerror = () => alert(
"Error fetching Blaseball API data: " + response.status
)
if (response.ok) {
response.json().then(function(teams) {
let totals = teams.map(team =>
team.lineup.length + team.rotation.length
)
const teamTotal = team => team.lineup.length + team.rotation.length
const ttShadows = team => teamTotal(team) + team.shadows.length
let results = document.getElementById("results")
let results_shadowed = document.getElementById("results_shadowed")
fetch(datablase + "allDivisions").then(function(response) {
if (response.ok) {
response.json().then(function(divisions) {
// Filter all teams to just the ones in the game
const divisionNames = [
// Update whenever Blaseball divisions change
"Wild Low",
"Wild High",
"Mild Low",
"Mild High"
]
let teamIDs = []
divisions.forEach(function(division) {
if (divisionNames.indexOf(division.name) !== -1) {
teamIDs = teamIDs.concat(division.teams)
}
})
const gameTeams = teams.filter(
team => teamIDs.indexOf(team.id) !== -1
)
// Display normal results
display_teams(teamTotal, gameTeams, results)
results.style.display = "block"
// Get shadowed ready for display
display_teams(ttShadows, gameTeams, results_shadowed)
})
} else {
aerror()
}
})
display_teams(totals, teams, results)
// Results are ready so we can show them now
results.style.display = "block"
// Now get the shadowed results ready to display
display_teams(
totals.map((total, pos) => total + teams[pos].shadows.length),
teams,
results_shadowed
)
// Get FK results ready for display
display_teams(teamTotal, teams, fkresults)
display_teams(ttShadows, teams, fkresults_shadowed)
})
let shadows = document.getElementById("shadows")
// Set the toggle function for & display the checkbox
shadows.oninput = checkbox_toggle
shadows.style.display = "block"
// Set the input function for & display the options form
options.oninput = optionsInputHandler
options.style.display = "block"
document.getElementById("progress").remove()
progress.remove()
} else {
alert("Error fetching Blaseball API data: " + api_response.status)
aerror()
}
})
function checkbox_toggle() {
results_shadowed.style.display = "block"
results.style.display = "none"
// Toggle off function
shadows.oninput = function() {
results.style.display = "block"
results_shadowed.style.display = "none"
shadows.oninput = checkbox_toggle
}
}
function display_teams(totals, teams, div_container) {
const ENDING = x => (Math.abs(x) === 1 ? "" : "s")
function display_teams(totals_fn, teams, div_container) {
const ending = x => (x === 1 ? "" : "s")
const totals = teams.map(totals_fn)
// Make the headers & lists for teams
totals.slice().sort((x, y) => x - y)
.filter((total, pos, array) => !pos || total !== array[pos - 1])
.forEach(function(total) {
div_container.insertAdjacentHTML(
"afterbegin",
`<h1>${total} player${ENDING(total)}</h1>
`<h1>${total} player${ending(total)}</h1>
<ul id="${div_container.id}_tlist${total}"></ul>`
)
})
// Put the teams in the lists
teams.forEach(function(team, pos) {
let hitters = team.lineup.length
let pitchers = team.rotation.length
const hitters = team.lineup.length
const pitchers = team.rotation.length
let shadow_string = ""
if (div_container.id == "results_shadowed") {
if (div_container.id.endsWith("_shadowed")) {
let shadows = team.shadows.length
shadow_string = `, ${shadows} shadowed player${ENDING(shadows)}`
shadow_string = `, ${shadows} shadowed player${ending(shadows)}`
}
document.getElementById(div_container.id + "_tlist" + totals[pos])
.insertAdjacentHTML(
"beforeend",
`<li>${team.fullName}
(${hitters} hitter${ENDING(hitters)},
${pitchers} pitcher${ENDING(pitchers)}${shadow_string})</li>`
(${hitters} hitter${ending(hitters)},
${pitchers} pitcher${ending(pitchers)}${shadow_string})</li>`
)
})
}
function optionsInputHandler(event) {
let divToggles
const target = event.target
switch (target) {
case fkteams_toggle: {
divToggles = shadows_toggle.checked
? {on: fkresults_shadowed, off: results_shadowed}
: {on: fkresults, off: results}
break
}
case shadows_toggle: {
divToggles = fkteams_toggle.checked
? {on: fkresults_shadowed, off: fkresults}
: {on: results_shadowed, off: results}
break
}
default:
throw `Unknown input event target ID ${target.id}`
}
[divToggles.on.style.display, divToggles.off.style.display] = target.checked
? ["block", "none"]
: ["none", "block"]
}