Improved tabs (#573)

* unify tabs

* move tabs to js

* move currentTab to enum

* move currentTab to enum

* fix switching tabs

* fix subtabs

* add event in element

* fix: infinite loop & tabs that aren't unlocked

* draggable

* draggable

* fix: make arrow keys work with dragged elements

* make corruptions tab draggable

* feat: make tabs hideable

Author: KhafraDev

index.html

@@ -223,21 +223,6 @@
             </div>
         </div>
         <nav class="navbar">
-            <div id="tabrow">
-                <button id="buildingstab" i18n="tabs.main.buildings"></button>
-                <button id="upgradestab" i18n="tabs.main.upgrades"></button>
-                <button class="coinunlock4" id="achievementstab" i18n="tabs.main.achievements"></button>
-                <button class="prestigeunlock" id="runestab" i18n="tabs.main.runes"></button>
-                <button class="transcendunlock" id="challengetab" i18n="tabs.main.challenges"></button>
-                <button class="reincarnationunlock" id="researchtab" i18n="tabs.main.research"></button>
-                <button class="chal8" id="anttab" i18n="tabs.main.antHill"></button>
-                <button class="chal10" id="cubetab" i18n="tabs.main.wowCubes"></button>
-                <button class="chal11" id="traitstab" i18n="tabs.main.corruption"></button>
-                <button class="singularity" id="singularitytab" i18n="tabs.main.singularity"></button>
-                <button id="settingstab" i18n="tabs.main.settings"></button>
-                <button class="reincarnationunlock" id="shoptab" i18n="tabs.main.shop"></button>
-                <button class="isEvent" id="eventtab">UNSMITH</button>
-            </div>
         </nav>
     </header>
     <div id="tabBorder" style="background-color: yellow;"></div>

src/Ants.ts

@@ -18,6 +18,7 @@ import { Synergism } from './Events'
 import type { ResetHistoryEntryAntSacrifice } from './History'
 import { buyResearch } from './Research'
 import { resetAnts } from './Reset'
+import { Tabs } from './Tabs'
 import { updateTalismanInventory } from './Talismans'
 import { clearInterval, setInterval } from './Timers'
 import type { FirstToEighth, ZeroToSeven } from './types/Synergism'
@@ -74,7 +75,7 @@ export const antRepeat = (i: number) => {
 }
 
 export const updateAntDescription = (i: number) => {
-  if (G.currentTab !== 'ant') {
+  if (G.currentTab !== Tabs.AntHill) {
     return
   }
   const el = DOMCacheGetOrSet('anttierdescription')

src/EventListeners.ts

@@ -64,7 +64,7 @@ import { buyGoldenQuarks, getLastUpgradeInfo, singularityPerks } from './singula
 import { displayStats } from './Statistics'
 import { generateExportSummary } from './Summary'
 import { player, resetCheck, saveSynergy } from './Synergism'
-import { changeSubTab, changeTab } from './Tabs'
+import { changeSubTab, Tabs } from './Tabs'
 import {
   buyAllTalismanResources,
   buyTalismanEnhance,
@@ -117,7 +117,7 @@ import {
   updateRuneBlessingBuyAmount
 } from './Toggles'
 import type { OneToFive, Player } from './types/Synergism'
-import { changeTabColor, Confirm } from './UpdateHTML'
+import { Confirm } from './UpdateHTML'
 import { shopMouseover } from './UpdateVisuals'
 import {
   buyConstantUpgrades,
@@ -215,29 +215,14 @@ export const generateEventHandlers = () => {
   DOMCacheGetOrSet('ascendChallengeBtn').addEventListener('click', () => resetCheck('ascensionChallenge'))
   DOMCacheGetOrSet('ascendbtn').addEventListener('click', () => resetCheck('ascension'))
   DOMCacheGetOrSet('singularitybtn').addEventListener('click', () => resetCheck('singularity'))
-  // Part 2: Tabs (sucks)
-  // Onmouseover Events
-  DOMCacheGetOrSet('buildingstab').addEventListener('click', () => changeTab('buildings'))
-  DOMCacheGetOrSet('upgradestab').addEventListener('click', () => changeTab('upgrades'))
-  DOMCacheGetOrSet('settingstab').addEventListener('click', () => changeTab('settings'))
-  DOMCacheGetOrSet('achievementstab').addEventListener('click', () => changeTab('achievements'))
-  DOMCacheGetOrSet('runestab').addEventListener('click', () => changeTab('runes'))
-  DOMCacheGetOrSet('challengetab').addEventListener('click', () => changeTab('challenge'))
-  DOMCacheGetOrSet('researchtab').addEventListener('click', () => changeTab('research'))
-  DOMCacheGetOrSet('shoptab').addEventListener('click', () => changeTab('shop'))
-  DOMCacheGetOrSet('anttab').addEventListener('click', () => changeTab('ant'))
-  DOMCacheGetOrSet('cubetab').addEventListener('click', () => changeTab('cube'))
-  DOMCacheGetOrSet('traitstab').addEventListener('click', () => changeTab('traits'))
-  DOMCacheGetOrSet('singularitytab').addEventListener('click', () => changeTab('singularity'))
-  DOMCacheGetOrSet('eventtab').addEventListener('click', () => changeTab('event'))
 
   // BUILDINGS TAB
   // Part 1: Upper portion (Subtab toggle)
   const buildingTypes = ['Coin', 'Diamond', 'Mythos', 'Particle', 'Tesseract']
   for (let index = 0; index < buildingTypes.length; index++) {
     DOMCacheGetOrSet(`switchTo${buildingTypes[index]}Building`).addEventListener(
       'click',
-      () => changeSubTab('buildings', { page: index })
+      () => changeSubTab(Tabs.Buildings, { page: index })
     )
   }
   // Part 2: Building Amount Toggles
@@ -377,7 +362,7 @@ export const generateEventHandlers = () => {
   for (let index = 0; index < 4; index++) {
     DOMCacheGetOrSet(`toggleRuneSubTab${index + 1}`).addEventListener(
       'click',
-      () => changeSubTab('runes', { page: index })
+      () => changeSubTab(Tabs.Runes, { page: index })
     )
   }
 
@@ -563,7 +548,7 @@ export const generateEventHandlers = () => {
   for (let index = 0; index < 7; index++) {
     DOMCacheGetOrSet(`switchCubeSubTab${index + 1}`).addEventListener(
       'click',
-      () => changeSubTab('cube', { page: index })
+      () => changeSubTab(Tabs.WowCubes, { page: index })
     )
   }
 
@@ -754,8 +739,8 @@ export const generateEventHandlers = () => {
 
   // CORRUPTION TAB
   // Part 0: Subtabs
-  DOMCacheGetOrSet('corrStatsBtn').addEventListener('click', () => changeSubTab('traits', { page: 0 }))
-  DOMCacheGetOrSet('corrLoadoutsBtn').addEventListener('click', () => changeSubTab('traits', { page: 1 }))
+  DOMCacheGetOrSet('corrStatsBtn').addEventListener('click', () => changeSubTab(Tabs.Corruption, { page: 0 }))
+  DOMCacheGetOrSet('corrLoadoutsBtn').addEventListener('click', () => changeSubTab(Tabs.Corruption, { page: 1 }))
 
   // Part 1: Displays
   DOMCacheGetOrSet('corruptionDisplays').addEventListener('click', () => corruptionDisplay(10))
@@ -770,7 +755,7 @@ export const generateEventHandlers = () => {
   // Part 0: Subtabs
   const settingSubTabs = Array.from<HTMLElement>(document.querySelectorAll('[id^="switchSettingSubTab"]'))
   for (const subtab of settingSubTabs) {
-    subtab.addEventListener('click', () => changeSubTab('settings', { page: settingSubTabs.indexOf(subtab) }))
+    subtab.addEventListener('click', () => changeSubTab(Tabs.Settings, { page: settingSubTabs.indexOf(subtab) }))
   }
 
   const t = Array.from(document.querySelectorAll<HTMLElement>('button.statsNerds'))
@@ -969,13 +954,10 @@ TODO: Fix this entire tab it's utter shit
   for (let index = 0; index < 5; index++) {
     DOMCacheGetOrSet(`toggleSingularitySubTab${index + 1}`).addEventListener(
       'click',
-      () => changeSubTab('singularity', { page: index })
+      () => changeSubTab(Tabs.Singularity, { page: index })
     )
   }
 
-  const tabs = document.querySelectorAll<HTMLElement>('#tabrow > button')
-  tabs.forEach((b) => b.addEventListener('click', () => changeTabColor()))
-
   // EVENT TAB (Replace as events are created)
   DOMCacheGetOrSet('unsmith').addEventListener('click', () => clickSmith())
 

src/Helper.ts

@@ -14,6 +14,7 @@ import { quarkHandler } from './Quark'
 import { checkMaxRunes, redeemShards, unlockedRune } from './Runes'
 import { useConsumable } from './Shop'
 import { player } from './Synergism'
+import { Tabs } from './Tabs'
 import { buyAllTalismanResources } from './Talismans'
 import { visualUpdateAmbrosia, visualUpdateOcteracts, visualUpdateResearch } from './UpdateVisuals'
 import { Globals as G } from './Variables'
@@ -211,7 +212,7 @@ export const automaticTools = (input: AutoToolInput, time: number) => {
       // Add Obtainium
       player.researchPoints = Math.min(1e300, player.researchPoints + obtainiumGain * time * timeMultiplier)
       // Update visual displays if appropriate
-      if (G.currentTab === 'research') {
+      if (G.currentTab === Tabs.Research) {
         visualUpdateResearch()
       }
       break

src/Hotkeys.ts

@@ -4,12 +4,12 @@ import { DOMCacheGetOrSet } from './Cache/DOM'
 import { promocodes } from './ImportExport'
 import { useConsumable } from './Shop'
 import { player, resetCheck, synergismHotkeys } from './Synergism'
-import { keyboardTabChange as kbTabChange } from './Tabs'
+import { keyboardTabChange as kbTabChange, tabRow, Tabs } from './Tabs'
 import { confirmReply, toggleAutoChallengeRun, toggleCorruptionLevel } from './Toggles'
 import { Alert, Confirm, Prompt } from './UpdateHTML'
 import { Globals as G } from './Variables'
 
-export const defaultHotkeys = new Map<string, [string, () => unknown, boolean]>([
+export const defaultHotkeys = new Map<string, [string, () => unknown, /* hide during notification */ boolean]>([
   ['A', ['Buy Accelerators', () => buyAccelerator(), false]],
   ['B', ['Boost Accelerator', () => boostAccelerator(), false]],
   ['C', ['Auto Challenge', () => {
@@ -39,7 +39,8 @@ export const defaultHotkeys = new Map<string, [string, () => unknown, boolean]>(
   ['SHIFT+E', ['Exit Asc. Challenge', () => resetCheck('ascensionChallenge'), false]], // Its already checks if inside Asc. Challenge
   ['SHIFT+O', ['Use Off. Potion', () => useConsumable('offeringPotion'), false]],
   ['SHIFT+P', ['Use Obt. Potion', () => useConsumable('obtainiumPotion'), false]],
-  ['SHIFT+S', ['Reset Singularity', () => resetCheck('singularity'), false]]
+  ['SHIFT+S', ['Reset Singularity', () => resetCheck('singularity'), false]],
+  ['CTRL+B', ['Un-hide Tabs', () => tabRow.reappend(), false]]
 ])
 
 export let hotkeysEnabled = false
@@ -92,6 +93,7 @@ const eventHotkeys = (event: KeyboardEvent): void => {
   if (event.altKey) {
     keyPrefix += 'ALT+'
   }
+
   const key = keyPrefix + event.key.toUpperCase()
 
   // Disable the TAB key as it may allow unexpected operations
@@ -113,7 +115,7 @@ const eventHotkeys = (event: KeyboardEvent): void => {
     event.preventDefault()
   }
 
-  if (G.currentTab === 'settings' && player.subtabNumber === 6) {
+  if (G.currentTab === Tabs.Settings && player.subtabNumber === 6) {
     DOMCacheGetOrSet('lastHotkey').textContent = key
     DOMCacheGetOrSet('lastHotkeyName').textContent = hotkeyName
   }
@@ -252,4 +254,12 @@ export const resetHotkeys = async () => {
   }
 }
 
-document.addEventListener('keydown', eventHotkeys)
+export const pressedKeys = new Set<string>()
+
+document.addEventListener('keydown', (event) => {
+  eventHotkeys(event)
+
+  pressedKeys.add(event.code)
+})
+
+document.addEventListener('keyup', (event) => pressedKeys.delete(event.code))

src/ImportExport.ts

@@ -14,7 +14,7 @@ import { shopData } from './Shop'
 import { singularityData } from './singularity'
 import { synergismStage } from './Statistics'
 import { blankSave, format, player, reloadShit, saveCheck, saveSynergy } from './Synergism'
-import { changeSubTab, changeTab } from './Tabs'
+import { changeSubTab, changeTab, Tabs } from './Tabs'
 import type { Player } from './types/Synergism'
 import { Alert, Confirm, Prompt } from './UpdateHTML'
 import { cleanString, getElementById, productContents, sumContents } from './Utility'
@@ -278,13 +278,13 @@ export const resetGame = async () => {
     codes: Array.from(blankSave.codes)
   }) as Player
   // Reset Displays
-  changeTab('buildings')
-  changeSubTab('buildings', { page: 0 })
-  changeSubTab('runes', { page: 0 }) // Set 'runes' subtab back to 'runes' tab
-  changeSubTab('cube', { page: 0 }) // Set 'cube tribues' subtab back to 'cubes' tab
-  changeSubTab('traits', { page: 0 }) // set 'corruption main'
-  changeSubTab('singularity', { page: 0 }) // set 'singularity main'
-  changeSubTab('settings', { page: 0 }) // set 'statistics main'
+  changeTab(Tabs.Buildings)
+  changeSubTab(Tabs.Buildings, { page: 0 })
+  changeSubTab(Tabs.Runes, { page: 0 }) // Set 'runes' subtab back to 'runes' tab
+  changeSubTab(Tabs.WowCubes, { page: 0 }) // Set 'cube tribues' subtab back to 'cubes' tab
+  changeSubTab(Tabs.Corruption, { page: 0 }) // set 'corruption main'
+  changeSubTab(Tabs.Singularity, { page: 0 }) // set 'singularity main'
+  changeSubTab(Tabs.Settings, { page: 0 }) // set 'statistics main'
   // Import Game
   await importSynergism(btoa(JSON.stringify(hold)), true)
 }

src/Plugins/Dashboard.ts

@@ -3,6 +3,7 @@ import { DOMCacheGetOrSet } from '../Cache/DOM'
 import { CalcCorruptionStuff } from '../Calculate'
 import { platUpgradeBaseCosts } from '../Platonic'
 import { format, player } from '../Synergism'
+import { Tabs } from '../Tabs'
 import { toggleAntAutoSacrifice, toggleAutoChallengeRun, toggleAutoResearch, toggleAutoSacrifice } from '../Toggles'
 import { visualUpdateCubes } from '../UpdateVisuals'
 import { getElementById, stripIndents } from '../Utility'
@@ -198,7 +199,7 @@ const renderDashboardSlow = () => {
 }
 
 const renderDashboardFast = () => {
-  if (G.currentTab !== 'settings') {
+  if (G.currentTab !== Tabs.Settings) {
     open = false
     return exitDashboard()
   }
@@ -209,12 +210,12 @@ const renderDashboardFast = () => {
 const openDashboard = () => {
   // compute blessings total amounts
   const n = player.subtabNumber
-  G.currentTab = 'cube'
+  G.currentTab = Tabs.WowCubes
   ;[0, 1, 2, 3].forEach((i) => {
     player.subtabNumber = i
     visualUpdateCubes()
   })
-  G.currentTab = 'settings'
+  G.currentTab = Tabs.Settings
   player.subtabNumber = n
   // render and display dashboard
   renderDashboardFast()

src/Reset.ts

@@ -39,7 +39,7 @@ import { resetofferings } from './Runes'
 import { resetShopUpgrades, shopData } from './Shop'
 import { calculateSingularityDebuff, getFastForwardTotalMultiplier } from './singularity'
 import { blankSave, format, player, saveSynergy, updateAll, updateEffectiveLevelMult } from './Synergism'
-import { changeSubTab, changeTab } from './Tabs'
+import { changeSubTab, changeTab, Tabs } from './Tabs'
 import { updateTalismanAppearance, updateTalismanInventory } from './Talismans'
 import { calculateTesseractBlessings } from './Tesseracts'
 import { IconSets } from './Themes'
@@ -1188,13 +1188,13 @@ export const singularity = async (setSingNumber = -1): Promise<void> => {
   }) as Player
 
   // Reset Displays
-  changeTab('buildings')
-  changeSubTab('buildings', { page: 0 })
-  changeSubTab('runes', { page: 0 }) // Set 'runes' subtab back to 'runes' tab
-  changeSubTab('cube', { page: 0 }) // Set 'cube tribues' subtab back to 'cubes' tab
-  changeSubTab('traits', { page: 0 }) // set 'corruption main'
-  changeSubTab('singularity', { page: 0 }) // set 'singularity main'
-  changeSubTab('settings', { page: 0 }) // set 'statistics main'
+  changeTab(Tabs.Buildings)
+  changeSubTab(Tabs.Buildings, { page: 0 })
+  changeSubTab(Tabs.Runes, { page: 0 }) // Set 'runes' subtab back to 'runes' tab
+  changeSubTab(Tabs.WowCubes, { page: 0 }) // Set 'cube tribues' subtab back to 'cubes' tab
+  changeSubTab(Tabs.Corruption, { page: 0 }) // set 'corruption main'
+  changeSubTab(Tabs.Singularity, { page: 0 }) // set 'singularity main'
+  changeSubTab(Tabs.Settings, { page: 0 }) // set 'statistics main'
 
   hold.history.singularity = player.history.singularity
   hold.totalQuarksEver = player.totalQuarksEver