Make tab family take TabButtonOptions directly instead of TabButton

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"
-            })
+            }
         }
     }));
 

src/features/boards/board.ts

@@ -327,7 +327,6 @@ export function createBoard<T extends BoardOptions>(
 
         // This is necessary because board.types is different from T and Board
         const processedBoard = board as unknown as Board<T>;
-
         return processedBoard;
     });
 }

src/features/tabs/tabFamily.ts

@@ -58,27 +58,9 @@ export type GenericTabButton = Replace<
     }
 >;
 
-export function createTabButton<T extends TabButtonOptions>(
-    options: T & ThisType<TabButton<T>>
-): TabButton<T> {
-    const tabButton: T & Partial<BaseTabButton> = 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<T>;
-}
-
 export interface TabFamilyOptions {
     visibility?: Computable<Visibility>;
-    tabs: Computable<Record<string, GenericTabButton>>;
+    tabs: Record<string, TabButtonOptions>;
     classes?: Computable<Record<string, boolean>>;
     style?: Computable<StyleValue>;
 }
@@ -96,7 +78,7 @@ export type TabFamily<T extends TabFamilyOptions> = Replace<
     T & BaseTabFamily,
     {
         visibility: GetComputableTypeWithDefault<T["visibility"], Visibility.Visible>;
-        tabs: GetComputableType<T["tabs"]>;
+        tabs: Record<string, GenericTabButton>;
     }
 >;
 
@@ -125,13 +107,13 @@ export function createTabFamily<T extends TabFamilyOptions>(
         makePersistent<string>(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<T extends TabFamilyOptions>(
         processComputable(tabFamily as T, "classes");
         processComputable(tabFamily as T, "style");
 
+        for (const tab in tabFamily.tabs) {
+            const tabButton: TabButtonOptions & Partial<BaseTabButton> = 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<T>;
+        // This is necessary because board.types is different from T and TabFamily
+        const processedTabFamily = tabFamily as unknown as TabFamily<T>;
+        return processedTabFamily;
     });
 }