endie/team-big
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Wiki Activity

Add option to include shadowed players (also results div is back with its sibling results_shadowed div)

Browse source
This commit is contained in:
Lavender 2021-04-05 20:01:14 -07:00
parent 6190157b2f
commit e71e4a4d12
Signed by: endie
GPG key ID: CC5162D7C2146F01
3 changed files with 77 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
index.html
View file

@ -6,6 +6,16 @@
</title>
</head>
<body>
<form id="shadows">
<input type="checkbox" id="shadows_toggle">
<label for="shadows_toggle">
Toggle shadowed players
</label>
</form>
<div id="results">
</div>
<div id="results_shadowed">
</div>
<h1 id="progress">
Loading...
</h1>
@ -20,7 +30,8 @@
<noscript>
your browser is bad and doesn't support javascript, or you turned it off<br />
this website needs javascript to function<br />
please enable javascript, if you want you can check its not doing anything bad by looking at the source code<br />
please enable javascript, if you want you can check its not doing anything bad
by looking at the source code<br />
if you have enabled it, refreshing the page should work
</noscript>
</body>

79
main.js
View file

@ -6,26 +6,69 @@ request.open(
request.send();
request.onload = function() {
let ending = x => (Math.abs(x) === 1 ? "" : "s")
let teams = JSON.parse(this.response)
let totals = teams.map(team => team.lineup.length + team.rotation.length)
// Get all player counts that there are from greatest to least
// & make headers & lists for them
totals.slice().sort((x, y) => x - y)
.filter((item, pos, array) => !pos || item !== array[pos - 1])
.forEach(function(item) {
document.body.insertAdjacentHTML("afterbegin",
`<h1>${item} player${ending(item)}</h1>
<ul id="tlist${item}"></ul>`)
})
// Put the teams in the lists
teams.forEach(function(item, pos) {
document.getElementById("tlist" + totals[pos]).insertAdjacentHTML("beforeend",
`<li>${item.fullName}
(${item.lineup.length} hitter${ending(item.lineup.length)},
${item.rotation.length} pitcher${ending(item.rotation.length)})</li>`)
})
let results = document.getElementById("results")
let results_shadowed = document.getElementById("results_shadowed")
let shadows = document.getElementById("shadows")
display_teams(
totals,
teams,
results,
team => team.lineup.length,
team => team.rotation.length,
)
// 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].bullpen.length + teams[pos].bench.length),
teams,
results_shadowed,
team => team.lineup.length + team.bullpen.length,
team => team.rotation.length + team.bench.length,
)
// Set the toggle function for & display the checkbox
shadows.oninput = shadows_on = function() {
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 = shadows_on
}
}
shadows.style.display = "block"
document.getElementById("progress").remove()
}
function display_teams(totals, teams, div_container, hitters_fn, pitchers_fn) {
const ENDING = x => (Math.abs(x) === 1 ? "" : "s")
// 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>
<ul id="${div_container.id}_tlist${total}"></ul>`)
})
// Put the teams in the lists
teams.forEach(function(team, pos) {
let hitters = hitters_fn(team)
let pitchers = pitchers_fn(team)
document.getElementById(div_container.id + "_tlist" + totals[pos])
.insertAdjacentHTML(
"beforeend",
`<li>${team.fullName}
(${hitters} hitter${ENDING(hitters)},
${pitchers} pitcher${ENDING(pitchers)})</li>`
)
})
}

4
style.css
View file

@ -7,3 +7,7 @@ body {
li {
list-style: decimal-leading-zero;
}
form {
display: none;
}