use css classes for tab switching

Pseudo-Corp · Jan 11, 2025 · b726cbb · b726cbb
1 parent ccfe36f
commit b726cbb
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 81 deletions.
diff --git a/Synergism.css b/Synergism.css
@@ -137,6 +137,15 @@ body.loading {
 .amberText { color: var(--amber-text-color); }
 .lightyellowText { color: var(--lightgoldenrodyellow-text-color); }
 
+.active-subtab {
+    background-color: crimson;
+}
+
+#corrStatsBtn.active-subtab,
+#corrLoadoutsBtn.active-subtab {
+    background-color: dodgerblue;
+}
+
 .boxColor {
     border: 3px solid;
     border-color: var(--boxmain-bordercolor);
@@ -2657,24 +2666,6 @@ p#ascendHotKeys {
     background-color: green;
 }
 
-/* .constUpgradeSingle {
-    background-color: gold;
-}
-
-.constUpgradeSingleAvailable {
-    background-color: gold;
-    cursor: pointer;
-}
-
-.constUpgradeSingleAvailable:hover {
-    background-color: #fff4b3;
-} */
-
-.subtabSwitcher > * > button.buttonActive,
-.subtabSwitcher > button.buttonActive {
-    background-color: crimson;
-}
-
 .subtabContent {
     display: none;
 }

diff --git a/index.html b/index.html
@@ -235,7 +235,7 @@
 
     <div id="buildings">
         <div class="subTabWrapper">
-            <button id="switchToCoinBuilding" style="border: 2px solid yellow; background-color: crimson;" i18n="tabs.buildings.coin"></button>
+            <button id="switchToCoinBuilding" class="active-subtab" style="border: 2px solid yellow;" i18n="tabs.buildings.coin"></button>
             <button class="prestigeunlock" id="switchToDiamondBuilding" style="border: 2px solid cyan" i18n="tabs.buildings.diamond"></button>
             <button class="transcendunlock" id="switchToMythosBuilding" style="border: 2px solid plum" i18n="tabs.buildings.mythos"></button>
             <button class="reincarnationunlock" id="switchToParticleBuilding" style="border: 2px solid greenyellow" i18n="tabs.buildings.particle"></button>
@@ -1195,7 +1195,7 @@
     <div id="runes" style="display: none;">
         <div id="runesToggle">
             <button id="toggleautosacrifice" style="border: 2px solid orangered"></button>
-            <button id="toggleRuneSubTab1" style="border: 2px solid gold" i18n="tabs.runes.runes"></button>
+            <button id="toggleRuneSubTab1" class="active-subtab" style="border: 2px solid gold" i18n="tabs.runes.runes"></button>
             <button class="chal9" id="toggleRuneSubTab2" style="border: 2px solid silver" i18n="tabs.runes.talismans"></button>
             <button class="chal9" id="toggleRuneSubTab3" style="border: 2px solid silver" i18n="tabs.runes.blessings"></button>
             <button class="chal12" id="toggleRuneSubTab4" style="border: 2px solid silver" i18n="tabs.runes.spirits"></button>
@@ -1554,7 +1554,7 @@
 
     <div id="challenges" style="display: none;">
         <div id="challengesTabsToggle">
-            <button id="toggleChallengesSubTab1" style="border: 2px solid green; color: white; background-color: crimson" i18n="tabs.challenges.normal"></button>
+            <button id="toggleChallengesSubTab1" class="active-subtab" style="border: 2px solid green; color: white;" i18n="tabs.challenges.normal"></button>
             <button id="toggleChallengesSubTab2" class="singChallenges" style="border: 2px solid purple; color: gold" i18n="tabs.challenges.exalt"></button>
         </div>
         <!-- You call containers "Steamed Wrappers" despite the fact they contain multiple elements? -->
@@ -2067,7 +2067,7 @@
         <div id="cubesWrapper">
             <div id="wowCubeSidebar">
                 <div id="wowCubeSidebarButtons">
-                    <button id="switchCubeSubTab1" class="cubeSwitchTabBtn" style="border: 2px solid gold; background-color: crimson;" i18n="tabs.cubes.cubeTributes"></button>
+                    <button id="switchCubeSubTab1" class="cubeSwitchTabBtn active-subtab" style="border: 2px solid gold;" i18n="tabs.cubes.cubeTributes"></button>
                     <button id="switchCubeSubTab2" class="cubeSwitchTabBtn chal11" style="border: 2px solid orange;" i18n="tabs.cubes.tesseract"></button>
                     <button id="switchCubeSubTab3" class="cubeSwitchTabBtn chal13" style="border: 2px solid red;" i18n="tabs.cubes.hypercube"></button>
                     <button id="switchCubeSubTab4" class="cubeSwitchTabBtn chal14" style="border: 2px solid orchid;" i18n="tabs.cubes.platonic"></button>
@@ -2797,7 +2797,7 @@
     <div id="traits" style="display: none;">
         <div id="corruptionStatsLoadouts" class="flex column">
             <span id="corrButtonRow" class="flex row center">
-                <button id="corrStatsBtn" i18n="corruptions.corrStatsBtn"></button>
+                <button id="corrStatsBtn" class="active-subtab" i18n="corruptions.corrStatsBtn"></button>
                 <button id="corrLoadoutsBtn" i18n="corruptions.corrLoadoutsBtn"></button>
             </span>
             <div id="corruptionStats" class="corruptionContainer">
@@ -2900,7 +2900,7 @@
 
     <div id="settings" style="display: none;">
         <div class="subtabSwitcher subTabWrapper">
-            <button id="switchSettingSubTab1" class="buttonActive" style="border: 2px solid white" i18n="tabs.main.settings"></button>
+            <button id="switchSettingSubTab1" class="active-subtab" style="border: 2px solid white" i18n="tabs.main.settings"></button>
             <button id="switchSettingSubTab2" style="border: 2px solid cyan" i18n="tabs.settings.languages"></button>
             <button id="switchSettingSubTab3" style="border: 2px solid gold" i18n="tabs.settings.credit"></button>
             <button id="switchSettingSubTab4" style="border: 2px solid orange" i18n="tabs.settings.stats"></button>
@@ -4164,7 +4164,7 @@ <h1>Artists</h1>
 
     <div id="singularity">
         <div id="singularityTabsToggle">
-            <button id="toggleSingularitySubTab1" style="border: 2px solid silver; color: white; background-color: crimson" i18n="tabs.main.shop"></button>
+            <button id="toggleSingularitySubTab1" class="active-subtab" style="border: 2px solid silver; color: white;" i18n="tabs.main.shop"></button>
             <button id="toggleSingularitySubTab2" style="border: 2px solid orange; color: white" i18n="tabs.singularity.perks-penalties"></button>
             <button id="toggleSingularitySubTab3" class="octeracts" style="border: 2px solid blue; color: white" i18n="tabs.singularity.octeracts"></button>
             <button id="toggleSingularitySubTab4" class="ambrosia" style="border: 2px solid #ffbf00; color: gold" i18n="tabs.singularity.ambrosia"></button>

diff --git a/src/Tabs.ts b/src/Tabs.ts
@@ -54,30 +54,33 @@ const subtabInfo: Record<Tabs, SubTab> = {
   [Tabs.Settings]: {
     tabSwitcher: () => setActiveSettingScreen,
     subTabList: [
-      { subTabID: 'settingsubtab', unlocked: true },
-      { subTabID: 'languagesubtab', unlocked: true },
-      { subTabID: 'creditssubtab', unlocked: true },
-      { subTabID: 'statisticsSubTab', unlocked: true },
+      { subTabID: 'settingsubtab', unlocked: true, buttonID: 'switchSettingSubTab1' },
+      { subTabID: 'languagesubtab', unlocked: true, buttonID: 'switchSettingSubTab2' },
+      { subTabID: 'creditssubtab', unlocked: true, buttonID: 'switchSettingSubTab3' },
+      { subTabID: 'statisticsSubTab', unlocked: true, buttonID: 'switchSettingSubTab4' },
       {
         subTabID: 'resetHistorySubTab',
         get unlocked () {
           return player.unlocks.prestige
-        }
+        },
+        buttonID: 'switchSettingSubTab5'
       },
       {
         subTabID: 'ascendHistorySubTab',
         get unlocked () {
           return player.ascensionCount > 0
-        }
+        },
+        buttonID: 'switchSettingSubTab6'
       },
       {
         subTabID: 'singularityHistorySubTab',
         get unlocked () {
           return player.highestSingularityCount > 0
-        }
+        },
+        buttonID: 'switchSettingSubTab7'
       },
-      { subTabID: 'hotkeys', unlocked: true },
-      { subTabID: 'accountSubTab', unlocked: true }
+      { subTabID: 'hotkeys', unlocked: true, buttonID: 'switchSettingSubTab8' },
+      { subTabID: 'accountSubTab', unlocked: true, buttonID: 'switchSettingSubTab9' }
     ]
   },
   [Tabs.Shop]: { subTabList: [] },
@@ -636,28 +639,12 @@ export const changeTab = (tabs: Tabs, step?: number) => {
   ;(document.activeElement as HTMLElement | null)?.blur()
 
   const subTabList = subtabInfo[G.currentTab].subTabList
-  if (G.currentTab !== Tabs.Settings) {
-    for (let i = 0; i < subTabList.length; i++) {
-      const id = subTabList[i].buttonID
-      if (id && DOMCacheHas(id)) {
-        const button = DOMCacheGetOrSet(id)
-
-        if (button.style.backgroundColor === 'crimson') { // handles every tab except settings and corruptions
-          player.subtabNumber = i
-          break
-        }
-        // what in the shit is this?!
-        if (player.tabnumber === 9 && button.style.borderColor === 'dodgerblue') { // handle corruption tab
-          player.subtabNumber = i
-          break
-        }
-      }
-    }
-  } else { // handle settings tab
-    // The first getElementById makes sure that it still works if other tabs start using the subtabSwitcher class
-    const btns = document.querySelectorAll('[id^="switchSettingSubTab"]')
-    for (let i = 0; i < btns.length; i++) {
-      if (btns[i].classList.contains('buttonActive')) {
+  for (let i = 0; i < subTabList.length; i++) {
+    const id = subTabList[i].buttonID
+    if (id && DOMCacheHas(id)) {
+      const button = DOMCacheGetOrSet(id)
+
+      if (button.classList.contains('active-subtab')) {
         player.subtabNumber = i
         break
       }
@@ -694,6 +681,18 @@ export const changeSubTab = (tabs: Tabs, { page, step }: SubTabSwitchOptions) =>
   }
 
   if (subTabList.unlocked) {
+    for (const subtab of subTabs.subTabList) {
+      if (!subtab.buttonID) continue
+
+      const element = DOMCacheGetOrSet(subtab.buttonID)
+
+      if (subtab === subTabList) {
+        element.classList.add('active-subtab')
+      } else {
+        element.classList.remove('active-subtab')
+      }
+    }
+
     subTabs.tabSwitcher?.()(subTabList.subTabID)
     if (tab.getType() === Tabs.Singularity && page === 3) {
       player.visitedAmbrosiaSubtab = true

diff --git a/src/Toggles.ts b/src/Toggles.ts
@@ -368,12 +368,10 @@ export const toggleBuildingScreen = (input: string) => {
     }
   }
 
-  for (const key in screen) {
-    DOMCacheGetOrSet(screen[key].screen).style.display = 'none'
-    DOMCacheGetOrSet(screen[key].button).style.backgroundColor = ''
+  for (const { screen: screenKey } of Object.values(screen)) {
+    DOMCacheGetOrSet(screenKey).style.display = 'none'
   }
   DOMCacheGetOrSet(screen[G.buildingSubTab].screen).style.display = 'flex'
-  DOMCacheGetOrSet(screen[G.buildingSubTab].button).style.backgroundColor = 'crimson'
   player.subtabNumber = screen[G.buildingSubTab].subtabNumber
 }
 
@@ -387,11 +385,9 @@ export const toggleRuneScreen = (indexStr: string) => {
     const b = DOMCacheGetOrSet(`runeContainer${i}`)
     if (i === index) {
       a.style.border = '2px solid gold'
-      a.style.backgroundColor = 'crimson'
       b.style.display = 'flex'
     } else {
       a.style.border = '2px solid silver'
-      a.style.backgroundColor = ''
       b.style.display = 'none'
     }
   }
@@ -402,13 +398,10 @@ export const toggleChallengesScreen = (indexStr: string) => {
   const index = Number(indexStr)
 
   for (let i = 1; i <= 2; i++) {
-    const a = DOMCacheGetOrSet(`toggleChallengesSubTab${i}`)
     const b = DOMCacheGetOrSet(`challengesWrapper${i}`)
     if (i === index) {
-      a.style.backgroundColor = 'crimson'
       b.style.display = 'block'
     } else {
-      a.style.backgroundColor = ''
       b.style.display = 'none'
     }
   }
@@ -465,13 +458,10 @@ export const toggleSingularityScreen = (indexStr: string) => {
   const index = Number(indexStr)
 
   for (let i = 1; i <= 4; i++) {
-    const a = DOMCacheGetOrSet(`toggleSingularitySubTab${i}`)
     const b = DOMCacheGetOrSet(`singularityContainer${i}`)
     if (i === index) {
-      a.style.backgroundColor = 'crimson'
       b.style.display = 'block'
     } else {
-      a.style.backgroundColor = ''
       b.style.display = 'none'
     }
   }
@@ -510,17 +500,12 @@ interface ChadContributor {
 }
 
 export const setActiveSettingScreen = async (subtab: string) => {
-  const clickedButton =
-    DOMCacheGetOrSet('settings').getElementsByClassName('subtabSwitcher')[0].children[player.subtabNumber]
   const subtabEl = DOMCacheGetOrSet(subtab)
   if (subtabEl.classList.contains('subtabActive')) {
     return
   }
 
-  const switcherEl = clickedButton.parentNode!
-  switcherEl.querySelectorAll('.buttonActive').forEach((b) => b.classList.remove('buttonActive'))
-  clickedButton.classList.add('buttonActive')
-
+  // subtabActive class displays the element; it is invisible by default
   subtabEl.parentNode!.querySelectorAll('.subtabActive').forEach((subtab) => subtab.classList.remove('subtabActive'))
   subtabEl.classList.add('subtabActive')
 
@@ -713,7 +698,6 @@ export const toggleCubeSubTab = (indexStr: string) => {
       cubeTab.style.display = 'flex'
       player.subtabNumber = j - 1
     }
-    DOMCacheGetOrSet(`switchCubeSubTab${j}`).style.backgroundColor = i === j ? 'crimson' : ''
   }
 
   visualUpdateCubes()

diff --git a/src/UpdateHTML.ts b/src/UpdateHTML.ts
@@ -1098,16 +1098,19 @@ export const updateAchievementBG = () => {
 }
 
 export const showCorruptionStatsLoadouts = () => {
+  const statsButton = DOMCacheGetOrSet('corrStatsBtn')
+  const corrLoadoutsButton = DOMCacheGetOrSet('corrLoadoutsBtn')
+
   if (player.corruptionShowStats) {
     DOMCacheGetOrSet('corruptionStats').style.display = 'flex'
     DOMCacheGetOrSet('corruptionLoadouts').style.display = 'none'
-    DOMCacheGetOrSet('corrStatsBtn').style.borderColor = 'dodgerblue'
-    DOMCacheGetOrSet('corrLoadoutsBtn').style.borderColor = 'white'
+    statsButton.classList.add('subtab-active')
+    corrLoadoutsButton.classList.remove('subtab-active')
   } else {
     DOMCacheGetOrSet('corruptionStats').style.display = 'none'
     DOMCacheGetOrSet('corruptionLoadouts').style.display = 'flex'
-    DOMCacheGetOrSet('corrStatsBtn').style.borderColor = 'white'
-    DOMCacheGetOrSet('corrLoadoutsBtn').style.borderColor = 'dodgerblue'
+    statsButton.classList.remove('subtab-active')
+    corrLoadoutsButton.classList.add('subtab-active')
   }
 }
 

diff --git a/src/purchases/CartTab.ts b/src/purchases/CartTab.ts
@@ -76,9 +76,9 @@ class CartTab {
   #updateSubtabs () {
     for (const [index, element] of yieldQuerySelectorAll('.subtabSwitcher button')) {
       if (player.subtabNumber === index) {
-        element.classList.add('buttonActive')
+        element.classList.add('active-subtab')
       } else {
-        element.classList.remove('buttonActive')
+        element.classList.remove('active-subtab')
       }
     }