From ea672d710a45fad5b5f39195abe6545e67bf698f Mon Sep 17 00:00:00 2001
From: Lavender Perry <endie2@protonmail.com>
Date: Wed, 16 Jun 2021 11:21:20 -0700
Subject: [PATCH] Add toggle for non-ILB teams & hide those teams by default

---
 index.html |  12 ++++-
 main.js    | 126 ++++++++++++++++++++++++++++++++++-------------------
 2 files changed, 93 insertions(+), 45 deletions(-)
diff --git a/index.html b/index.html
index 78b9211..1818a49 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/main.js b/main.js
index 376c953..7d64d5b 100644
--- a/main.js
+++ b/main.js
@@ -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"]
+}
