Add toggle for non-ILB teams & hide those teams by default
This commit is contained in:
parent
599b266ec0
commit
ea672d710a
12
index.html
12
index.html
|
@ -6,7 +6,13 @@
|
||||||
</title>
|
</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<input type="checkbox" id="shadows_toggle">
|
||||||
<label for="shadows_toggle">
|
<label for="shadows_toggle">
|
||||||
Toggle shadowed players
|
Toggle shadowed players
|
||||||
|
@ -16,6 +22,10 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="results_shadowed">
|
<div id="results_shadowed">
|
||||||
</div>
|
</div>
|
||||||
|
<div id="fkresults">
|
||||||
|
</div>
|
||||||
|
<div id="fkresults_shadowed">
|
||||||
|
</div>
|
||||||
<h1 id="progress">
|
<h1 id="progress">
|
||||||
Loading...
|
Loading...
|
||||||
</h1>
|
</h1>
|
||||||
|
|
126
main.js
126
main.js
|
@ -1,78 +1,116 @@
|
||||||
"use strict"
|
"use strict"
|
||||||
|
|
||||||
let api_response = fetch(
|
/* All undeclared variables are IDs of HTML elements */
|
||||||
"https://cors-proxy.blaseball-reference.com/database/allTeams",
|
|
||||||
).then(function(response) {
|
// 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) {
|
if (response.ok) {
|
||||||
response.json().then(function(teams) {
|
response.json().then(function(teams) {
|
||||||
let totals = teams.map(team =>
|
const teamTotal = team => team.lineup.length + team.rotation.length
|
||||||
team.lineup.length + team.rotation.length
|
const ttShadows = team => teamTotal(team) + team.shadows.length
|
||||||
)
|
|
||||||
|
|
||||||
let results = document.getElementById("results")
|
fetch(datablase + "allDivisions").then(function(response) {
|
||||||
let results_shadowed = document.getElementById("results_shadowed")
|
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)
|
// Get FK results ready for display
|
||||||
// Results are ready so we can show them now
|
display_teams(teamTotal, teams, fkresults)
|
||||||
results.style.display = "block"
|
display_teams(ttShadows, teams, fkresults_shadowed)
|
||||||
|
|
||||||
// Now get the shadowed results ready to display
|
|
||||||
display_teams(
|
|
||||||
totals.map((total, pos) => total + teams[pos].shadows.length),
|
|
||||||
teams,
|
|
||||||
results_shadowed
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
let shadows = document.getElementById("shadows")
|
// Set the input function for & display the options form
|
||||||
// Set the toggle function for & display the checkbox
|
options.oninput = optionsInputHandler
|
||||||
shadows.oninput = checkbox_toggle
|
options.style.display = "block"
|
||||||
shadows.style.display = "block"
|
|
||||||
|
|
||||||
document.getElementById("progress").remove()
|
progress.remove()
|
||||||
} else {
|
} else {
|
||||||
alert("Error fetching Blaseball API data: " + api_response.status)
|
aerror()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function checkbox_toggle() {
|
function display_teams(totals_fn, teams, div_container) {
|
||||||
results_shadowed.style.display = "block"
|
const ending = x => (x === 1 ? "" : "s")
|
||||||
results.style.display = "none"
|
const totals = teams.map(totals_fn)
|
||||||
// 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")
|
|
||||||
// Make the headers & lists for teams
|
// Make the headers & lists for teams
|
||||||
totals.slice().sort((x, y) => x - y)
|
totals.slice().sort((x, y) => x - y)
|
||||||
.filter((total, pos, array) => !pos || total !== array[pos - 1])
|
.filter((total, pos, array) => !pos || total !== array[pos - 1])
|
||||||
.forEach(function(total) {
|
.forEach(function(total) {
|
||||||
div_container.insertAdjacentHTML(
|
div_container.insertAdjacentHTML(
|
||||||
"afterbegin",
|
"afterbegin",
|
||||||
`<h1>${total} player${ENDING(total)}</h1>
|
`<h1>${total} player${ending(total)}</h1>
|
||||||
<ul id="${div_container.id}_tlist${total}"></ul>`
|
<ul id="${div_container.id}_tlist${total}"></ul>`
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
// Put the teams in the lists
|
// Put the teams in the lists
|
||||||
teams.forEach(function(team, pos) {
|
teams.forEach(function(team, pos) {
|
||||||
let hitters = team.lineup.length
|
const hitters = team.lineup.length
|
||||||
let pitchers = team.rotation.length
|
const pitchers = team.rotation.length
|
||||||
let shadow_string = ""
|
let shadow_string = ""
|
||||||
if (div_container.id == "results_shadowed") {
|
if (div_container.id.endsWith("_shadowed")) {
|
||||||
let shadows = team.shadows.length
|
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])
|
document.getElementById(div_container.id + "_tlist" + totals[pos])
|
||||||
.insertAdjacentHTML(
|
.insertAdjacentHTML(
|
||||||
"beforeend",
|
"beforeend",
|
||||||
`<li>${team.fullName}
|
`<li>${team.fullName}
|
||||||
(${hitters} hitter${ENDING(hitters)},
|
(${hitters} hitter${ending(hitters)},
|
||||||
${pitchers} pitcher${ENDING(pitchers)}${shadow_string})</li>`
|
${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"]
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue