Fix createCollapsibleModifierSections not being lazy

This commit is contained in:
thepaperpilot 2022-07-26 23:56:20 -05:00
parent 1976628b16
commit 0c3ce6af45

View file

@ -259,16 +259,34 @@ export interface Section {
export function createCollapsibleModifierSections( export function createCollapsibleModifierSections(
sectionsFunc: () => Section[] sectionsFunc: () => Section[]
): [JSXFunction, Persistent<boolean>[]] { ): [JSXFunction, Persistent<boolean>[]] {
return createLazyProxy(() => { const sections: Section[] = [];
const sections = sectionsFunc(); const processed:
| {
base: ProcessedComputable<DecimalSource | undefined>[];
baseText: ProcessedComputable<CoercableComponent | undefined>[];
visible: ProcessedComputable<boolean | undefined>[];
}
| Record<string, never> = {};
let calculated = false;
function calculateSections() {
if (!calculated) {
sections.push(...sectionsFunc());
processed.base = sections.map(s => convertComputable(s.base));
processed.baseText = sections.map(s => convertComputable(s.baseText));
processed.visible = sections.map(s => convertComputable(s.visible));
calculated = true;
}
return sections;
}
const processedBase = sections.map(s => convertComputable(s.base)); const collapsed = createLazyProxy(() =>
const processedBaseText = sections.map(s => convertComputable(s.baseText)); calculateSections().map(() => persistent<boolean>(false))
const processedVisible = sections.map(s => convertComputable(s.visible)); ) as Persistent<boolean>[];
const collapsed = sections.map(() => persistent<boolean>(false));
const jsxFunc = jsx(() => { const jsxFunc = jsx(() => {
const sections = calculateSections();
const sectionJSX = sections.map((s, i) => { const sectionJSX = sections.map((s, i) => {
if (unref(processedVisible[i]) === false) return null; if (unref(processed.visible[i]) === false) return null;
const header = ( const header = (
<h3 <h3
onClick={() => (collapsed[i].value = !collapsed[i].value)} onClick={() => (collapsed[i].value = !collapsed[i].value)}
@ -286,11 +304,11 @@ export function createCollapsibleModifierSections(
<> <>
<div class="modifier-container"> <div class="modifier-container">
<span class="modifier-amount"> <span class="modifier-amount">
{format(unref(processedBase[i]) ?? 1)} {format(unref(processed.base[i]) ?? 1)}
{s.unit} {s.unit}
</span> </span>
<span class="modifier-description"> <span class="modifier-description">
{renderJSX(unref(processedBaseText[i]) ?? "Base")} {renderJSX(unref(processed.baseText[i]) ?? "Base")}
</span> </span>
</div> </div>
{renderJSX(unref(s.modifier.description))} {renderJSX(unref(s.modifier.description))}
@ -305,7 +323,7 @@ export function createCollapsibleModifierSections(
<br /> <br />
{modifiers} {modifiers}
<hr /> <hr />
Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))} Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
{s.unit} {s.unit}
</div> </div>
</> </>
@ -314,7 +332,6 @@ export function createCollapsibleModifierSections(
return <>{sectionJSX}</>; return <>{sectionJSX}</>;
}); });
return [jsxFunc, collapsed]; return [jsxFunc, collapsed];
});
} }
/** /**