Made modifiers lazy

This commit is contained in:
thepaperpilot 2022-07-26 15:25:31 -05:00
parent 17a033bfd9
commit 1997f70699
2 changed files with 184 additions and 128 deletions

View file

@ -20,6 +20,7 @@ import type {
ProcessedComputable
} from "util/computed";
import { convertComputable, processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { renderJSX } from "util/vue";
import type { Ref } from "vue";
import { computed, unref } from "vue";
@ -253,10 +254,14 @@ export interface Section {
/**
* Takes an array of modifier "sections", and creates a JSXFunction that can render all those sections, and allow each section to be collapsed.
* Also returns a list of persistent refs that are used to control which sections are currently collapsed.
* @param sectionsFunc A function that returns the sections to display.
*/
export function createCollapsibleModifierSections(
sections: Section[]
sectionsFunc: () => Section[]
): [JSXFunction, Persistent<boolean>[]] {
return createLazyProxy(() => {
const sections = sectionsFunc();
const processedBase = sections.map(s => convertComputable(s.base));
const processedBaseText = sections.map(s => convertComputable(s.baseText));
const processedVisible = sections.map(s => convertComputable(s.visible));
@ -309,6 +314,7 @@ export function createCollapsibleModifierSections(
return <>{sectionJSX}</>;
});
return [jsxFunc, collapsed];
});
}
/**

View file

@ -6,6 +6,7 @@ import Decimal, { format } from "util/bignum";
import type { WithRequired } from "util/common";
import type { Computable, ProcessedComputable } from "util/computed";
import { convertComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { renderJSX } from "util/vue";
import { computed, unref } from "vue";
@ -44,17 +45,31 @@ export type ModifierFromOptionalParams<T, S> = T extends undefined
? Omit<WithRequired<Modifier, "revert" | "description">, "enabled">
: WithRequired<Modifier, "revert" | "enabled" | "description">;
/** An object that configures an additive modifier via {@link createAdditiveModifier}. */
export interface AdditiveModifierOptions<
T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined
> {
/** The amount to add to the input value. */
addend: Computable<DecimalSource>;
/** Description of what this modifier is doing. */
description?: T;
/** A computable that will be processed and passed directly into the returned modifier. */
enabled?: S;
}
/**
* Create a modifier that adds some value to the input value.
* @param addend The amount to add to the input value.
* @param description Description of what this modifier is doing.
* @param enabled A computable that will be processed and passed directly into the returned modifier.
* @param optionsFunc Additive modifier options.
*/
export function createAdditiveModifier<
T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined,
R = ModifierFromOptionalParams<T, S>
>(addend: Computable<DecimalSource>, description?: T, enabled?: S): R {
>(optionsFunc: () => AdditiveModifierOptions<T, S>): R {
return createLazyProxy(() => {
const { addend, description, enabled } = optionsFunc();
const processedAddend = convertComputable(addend);
const processedDescription = convertComputable(description);
const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
@ -79,20 +94,35 @@ export function createAdditiveModifier<
) : null}
</div>
))
} as unknown as R;
};
}) as unknown as R;
}
/** An object that configures an multiplicative modifier via {@link createMultiplicativeModifier}. */
export interface MultiplicativeModifierOptions<
T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined
> {
/** The amount to multiply the input value by. */
multiplier: Computable<DecimalSource>;
/** Description of what this modifier is doing. */
description?: T;
/** A computable that will be processed and passed directly into the returned modifier. */
enabled?: S;
}
/**
* Create a modifier that multiplies the input value by some value.
* @param multiplier The value to multiply the input value by.
* @param description Description of what this modifier is doing.
* @param enabled A computable that will be processed and passed directly into the returned modifier.
* @param optionsFunc Multiplicative modifier options.
*/
export function createMultiplicativeModifier<
T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined,
R = ModifierFromOptionalParams<T, S>
>(multiplier: Computable<DecimalSource>, description?: T, enabled?: S): R {
>(optionsFunc: () => MultiplicativeModifierOptions<T, S>): R {
return createLazyProxy(() => {
const { multiplier, description, enabled } = optionsFunc();
const processedMultiplier = convertComputable(multiplier);
const processedDescription = convertComputable(description);
const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
@ -105,7 +135,9 @@ export function createMultiplicativeModifier<
? undefined
: jsx(() => (
<div class="modifier-container">
<span class="modifier-amount">x{format(unref(processedMultiplier))}</span>
<span class="modifier-amount">
x{format(unref(processedMultiplier))}
</span>
{unref(processedDescription) ? (
<span class="modifier-description">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@ -114,20 +146,35 @@ export function createMultiplicativeModifier<
) : null}
</div>
))
} as unknown as R;
};
}) as unknown as R;
}
/** An object that configures an exponential modifier via {@link createExponentialModifier}. */
export interface ExponentialModifierOptions<
T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined
> {
/** The amount to raise the input value to the power of. */
exponent: Computable<DecimalSource>;
/** Description of what this modifier is doing. */
description?: T;
/** A computable that will be processed and passed directly into the returned modifier. */
enabled?: S;
}
/**
* Create a modifier that raises the input value to the power of some value.
* @param exponent The value to raise the input value to the power of.
* @param description Description of what this modifier is doing.
* @param enabled A computable that will be processed and passed directly into the returned modifier.
* @param optionsFunc Exponential modifier options.
*/
export function createExponentialModifier<
T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined,
R = ModifierFromOptionalParams<T, S>
>(exponent: Computable<DecimalSource>, description?: T, enabled?: S): R {
>(optionsFunc: () => ExponentialModifierOptions<T, S>): R {
return createLazyProxy(() => {
const { exponent, description, enabled } = optionsFunc();
const processedExponent = convertComputable(exponent);
const processedDescription = convertComputable(description);
const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
@ -140,7 +187,9 @@ export function createExponentialModifier<
? undefined
: jsx(() => (
<div class="modifier-container">
<span class="modifier-amount">^{format(unref(processedExponent))}</span>
<span class="modifier-amount">
^{format(unref(processedExponent))}
</span>
{unref(processedDescription) ? (
<span class="modifier-description">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@ -149,7 +198,8 @@ export function createExponentialModifier<
) : null}
</div>
))
} as unknown as R;
};
}) as unknown as R;
}
/**