From 8a84f23dde3358545f5e48e00c73bd3b98e31163 Mon Sep 17 00:00:00 2001
From: reschan <h>
Date: Thu, 28 Jul 2022 21:00:13 +0700
Subject: [PATCH] remove duplicate tab functions and document tab functions

---
 builder/index_full.html | 10 +++++-----
 js/builder.js           | 17 +++--------------
 2 files changed, 8 insertions(+), 19 deletions(-)

diff --git a/builder/index_full.html b/builder/index_full.html
index 5eb6b88..0c66692 100644
--- a/builder/index_full.html
+++ b/builder/index_full.html
@@ -447,19 +447,19 @@
                             <div class="col mb-1">
                                 <div class="row row-cols-1 rounded text-center dark-5 scaled-font">
                                     <div class="row p-0 m-0 text-nowrap">
-                                        <div id = "str-boost-tab" class="col eDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('str')">
+                                        <div id = "str-boost-btn" class="col eDam dark-4u fake-button elem-boost" onclick="show_tab('str-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
                                             Earth
                                         </div>
-                                        <div id = "dex-boost-tab" class="col tDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('dex')">
+                                        <div id = "dex-boost-btn" class="col tDam dark-4u fake-button elem-boost" onclick="show_tab('dex-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
                                             Thunder
                                         </div>
-                                        <div id = "int-boost-tab" class="col wDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('int')">
+                                        <div id = "int-boost-btn" class="col wDam dark-4u fake-button elem-boost" onclick="show_tab('int-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
                                             Water
                                         </div>
-                                        <div id = "def-boost-tab" class="col fDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('def')">
+                                        <div id = "def-boost-btn" class="col fDam dark-4u fake-button elem-boost" onclick="show_tab('def-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
                                             Fire
                                         </div>
-                                        <div id = "agi-boost-tab" class="col aDam dark-4u fake-button elem-boost" onclick="toggle_boost_tab('agi')">
+                                        <div id = "agi-boost-btn" class="col aDam dark-4u fake-button elem-boost" onclick="show_tab('agi-boost', ['str-boost', 'dex-boost', 'int-boost', 'def-boost', 'agi-boost'])">
                                             Air
                                         </div>
                                     </div>
diff --git a/js/builder.js b/js/builder.js
index 4215577..e24b31a 100644
--- a/js/builder.js
+++ b/js/builder.js
@@ -124,7 +124,7 @@ function toggleButton(button_id) {
     }
 }
 
-// toggle tab
+// Toggles display of a certain element, given the ID.
 function toggle_tab(tab) {
     if (document.querySelector("#"+tab).style.display == "none") {
         document.querySelector("#"+tab).style.display = "";
@@ -133,20 +133,9 @@ function toggle_tab(tab) {
     }
 }
 
-function toggle_boost_tab(tab) {
-    for (const i of skp_order) {
-        document.querySelector("#"+i+"-boost").style.display = "none";
-        document.getElementById(i + "-boost-tab").classList.remove("selected-btn");
-    }
-    document.querySelector("#"+tab+"-boost").style.display = "";
-    document.getElementById(tab + "-boost-tab").classList.add("selected-btn");
-}
-
-// let tabs = ['overall-stats', 'offensive-stats', 'defensive-stats'];
-
+// Toggle display of a certain tab, in a group of tabs, given the target tab ID, and a list of associated tabs.
+// Also sets visual display of an element with ID of target + "-btn" to selected.
 function show_tab(target, tabs) {
-    //console.log(itemFilters)
-
     //hide all tabs, then show the tab of the div clicked and highlight the correct button
     for (const i in tabs) {
         document.querySelector("#" + tabs[i]).style.display = "none";