forked from profectus/Profectus
Make tab family take TabButtonOptions directly instead of TabButton
This commit is contained in:
parent
5beecba267
commit
c9d3613d64
3 changed files with 35 additions and 38 deletions
|
@ -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"
|
||||
})
|
||||
}
|
||||
}
|
||||
}));
|
||||
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue