Add option to include shadowed players (also results div is back with its sibling results_shadowed div)
This commit is contained in:
parent
6190157b2f
commit
e71e4a4d12
GPG key ID:
CC5162D7C2146F01
3 changed files with 77 additions and 19 deletions
13
index.html
13
index.html
|
|
@ -6,6 +6,16 @@
|
||||||
</title>
|
</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<h1 id="progress">
|
||||||
Loading...
|
Loading...
|
||||||
</h1>
|
</h1>
|
||||||
|
|
@ -20,7 +30,8 @@
|
||||||
<noscript>
|
<noscript>
|
||||||
your browser is bad and doesn't support javascript, or you turned it off<br />
|
your browser is bad and doesn't support javascript, or you turned it off<br />
|
||||||
this website needs javascript to function<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
|
if you have enabled it, refreshing the page should work
|
||||||
</noscript>
|
</noscript>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
79
main.js
79
main.js
|
|
@ -6,26 +6,69 @@ request.open(
|
||||||
request.send();
|
request.send();
|
||||||
|
|
||||||
request.onload = function() {
|
request.onload = function() {
|
||||||
let ending = x => (Math.abs(x) === 1 ? "" : "s")
|
|
||||||
|
|
||||||
let teams = JSON.parse(this.response)
|
let teams = JSON.parse(this.response)
|
||||||
let totals = teams.map(team => team.lineup.length + team.rotation.length)
|
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
|
let results = document.getElementById("results")
|
||||||
totals.slice().sort((x, y) => x - y)
|
let results_shadowed = document.getElementById("results_shadowed")
|
||||||
.filter((item, pos, array) => !pos || item !== array[pos - 1])
|
let shadows = document.getElementById("shadows")
|
||||||
.forEach(function(item) {
|
|
||||||
document.body.insertAdjacentHTML("afterbegin",
|
display_teams(
|
||||||
`<h1>${item} player${ending(item)}</h1>
|
totals,
|
||||||
<ul id="tlist${item}"></ul>`)
|
teams,
|
||||||
})
|
results,
|
||||||
// Put the teams in the lists
|
team => team.lineup.length,
|
||||||
teams.forEach(function(item, pos) {
|
team => team.rotation.length,
|
||||||
document.getElementById("tlist" + totals[pos]).insertAdjacentHTML("beforeend",
|
)
|
||||||
`<li>${item.fullName}
|
// Results are ready so we can show them now
|
||||||
(${item.lineup.length} hitter${ending(item.lineup.length)},
|
results.style.display = "block"
|
||||||
${item.rotation.length} pitcher${ending(item.rotation.length)})</li>`)
|
|
||||||
})
|
// 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()
|
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>`
|
||||||
|
)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,3 +7,7 @@ body {
|
||||||
li {
|
li {
|
||||||
list-style: decimal-leading-zero;
|
list-style: decimal-leading-zero;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue