From c9d3613d64a3a6ace795d3cff16d9ca4a852a6bd Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Sun, 27 Feb 2022 16:49:13 -0600 Subject: [PATCH] Make tab family take TabButtonOptions directly instead of TabButton --- src/data/layers/aca/c.tsx | 26 +++++++++---------- src/features/boards/board.ts | 1 - src/features/tabs/tabFamily.ts | 46 ++++++++++++++++------------------ 3 files changed, 35 insertions(+), 38 deletions(-) diff --git a/src/data/layers/aca/c.tsx b/src/data/layers/aca/c.tsx index fee6975..aab8664 100644 --- a/src/data/layers/aca/c.tsx +++ b/src/data/layers/aca/c.tsx @@ -28,7 +28,7 @@ import MainDisplay from "@/features/resources/MainDisplay.vue"; import { createResource, displayResource, trackBest } from "@/features/resources/resource"; import Resource from "@/features/resources/Resource.vue"; import { createTab } from "@/features/tabs/tab"; -import { createTabButton, createTabFamily } from "@/features/tabs/tabFamily"; +import { createTabFamily } from "@/features/tabs/tabFamily"; import { createTree, createTreeNode, GenericTreeNode, TreeBranch } from "@/features/trees/tree"; import { createUpgrade } from "@/features/upgrades/upgrade"; import { createLayer } from "@/game/layers"; @@ -468,7 +468,7 @@ const layer = createLayer(() => { const illuminatiTabs = createTabFamily(() => ({ tabs: { - first: createTabButton({ + first: { tab: jsx(() => ( <> {renderRow(...upgrades)} @@ -477,11 +477,11 @@ const layer = createLayer(() => { )), display: "first" - }), - second: createTabButton({ + }, + second: { tab: f.display, display: "second" - }) + } }, style: { width: "660px", @@ -495,7 +495,7 @@ const layer = createLayer(() => { const tabs = createTabFamily(() => ({ tabs: { - mainTab: createTabButton({ + mainTab: { tab: createTab(() => ({ display: jsx(() => ( <> @@ -542,8 +542,8 @@ const layer = createLayer(() => { return ""; }, style: { color: "orange" } - }), - thingies: createTabButton({ + }, + thingies: { tab: createTab(() => ({ style() { return { backgroundColor: "#222222", "--background": "#222222" }; @@ -572,8 +572,8 @@ const layer = createLayer(() => { glowColor: "white", display: "thingies", style: { borderColor: "orange" } - }), - jail: createTabButton({ + }, + jail: { tab: createTab(() => ({ display: jsx(() => ( <> @@ -600,8 +600,8 @@ const layer = createLayer(() => { )) })), display: "jail" - }), - illuminati: createTabButton({ + }, + illuminati: { tab: createTab(() => ({ display: jsx(() => ( // This should really just be <> and , however for some reason the @@ -627,7 +627,7 @@ const layer = createLayer(() => { return showIf(unlockIlluminatiUpgrade.bought.value); }, display: "illuminati" - }) + } } })); diff --git a/src/features/boards/board.ts b/src/features/boards/board.ts index 1681011..6a23888 100644 --- a/src/features/boards/board.ts +++ b/src/features/boards/board.ts @@ -327,7 +327,6 @@ export function createBoard( // This is necessary because board.types is different from T and Board const processedBoard = board as unknown as Board; - return processedBoard; }); } diff --git a/src/features/tabs/tabFamily.ts b/src/features/tabs/tabFamily.ts index c92d428..5134db0 100644 --- a/src/features/tabs/tabFamily.ts +++ b/src/features/tabs/tabFamily.ts @@ -58,27 +58,9 @@ export type GenericTabButton = Replace< } >; -export function createTabButton( - options: T & ThisType> -): TabButton { - const tabButton: T & Partial = options; - tabButton.type = TabButtonType; - tabButton[Component] = TabButtonComponent; - - processComputable(tabButton as T, "visibility"); - setDefault(tabButton, "visibility", Visibility.Visible); - processComputable(tabButton as T, "tab"); - processComputable(tabButton as T, "display"); - processComputable(tabButton as T, "classes"); - processComputable(tabButton as T, "style"); - processComputable(tabButton as T, "glowColor"); - - return tabButton as unknown as TabButton; -} - export interface TabFamilyOptions { visibility?: Computable; - tabs: Computable>; + tabs: Record; classes?: Computable>; style?: Computable; } @@ -96,7 +78,7 @@ export type TabFamily = Replace< T & BaseTabFamily, { visibility: GetComputableTypeWithDefault; - tabs: GetComputableType; + tabs: Record; } >; @@ -125,13 +107,13 @@ export function createTabFamily( makePersistent(tabFamily, Object.keys(tabFamily.tabs)[0]); tabFamily.selected = tabFamily[PersistentState]; tabFamily.activeTab = computed(() => { - const tabs = unref((tabFamily as GenericTabFamily).tabs); + const tabs = unref(processedTabFamily.tabs); if ( tabFamily[PersistentState].value in tabs && - unref(tabs[(tabFamily as GenericTabFamily)[PersistentState].value].visibility) === + unref(tabs[processedTabFamily[PersistentState].value].visibility) === Visibility.Visible ) { - return unref(tabs[(tabFamily as GenericTabFamily)[PersistentState].value].tab); + return unref(tabs[processedTabFamily[PersistentState].value].tab); } const firstTab = Object.values(tabs).find( tab => unref(tab.visibility) === Visibility.Visible @@ -147,11 +129,27 @@ export function createTabFamily( processComputable(tabFamily as T, "classes"); processComputable(tabFamily as T, "style"); + for (const tab in tabFamily.tabs) { + const tabButton: TabButtonOptions & Partial = tabFamily.tabs[tab]; + tabButton.type = TabButtonType; + tabButton[Component] = TabButtonComponent; + + processComputable(tabButton as TabButtonOptions, "visibility"); + setDefault(tabButton, "visibility", Visibility.Visible); + processComputable(tabButton as TabButtonOptions, "tab"); + processComputable(tabButton as TabButtonOptions, "display"); + processComputable(tabButton as TabButtonOptions, "classes"); + processComputable(tabButton as TabButtonOptions, "style"); + processComputable(tabButton as TabButtonOptions, "glowColor"); + } + tabFamily[GatherProps] = function (this: GenericTabFamily) { const { visibility, activeTab, selected, tabs, style, classes } = this; return { visibility, activeTab, selected, tabs, style, classes }; }; - return tabFamily as unknown as TabFamily; + // This is necessary because board.types is different from T and TabFamily + const processedTabFamily = tabFamily as unknown as TabFamily; + return processedTabFamily; }); }