Make tab family take TabButtonOptions directly instead of TabButton

This commit is contained in:
thepaperpilot 2022-02-27 16:49:13 -06:00
parent 5beecba267
commit c9d3613d64
3 changed files with 35 additions and 38 deletions

View file

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

View file

@ -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;
});
}

View file

@ -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;
});
}