thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Made modifiers lazy

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

106
src/data/common.tsx
View file

@ -20,6 +20,7 @@ import type {
ProcessedComputable ProcessedComputable
} from "util/computed"; } from "util/computed";
import { convertComputable, processComputable } from "util/computed"; import { convertComputable, processComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { renderJSX } from "util/vue"; import { renderJSX } from "util/vue";
import type { Ref } from "vue"; import type { Ref } from "vue";
import { computed, unref } from "vue"; import { computed, unref } from "vue";
@ -33,7 +34,7 @@ export interface ResetButtonOptions extends ClickableOptions {
tree: GenericTree; tree: GenericTree;
/** The specific tree node associated with this reset button */ /** The specific tree node associated with this reset button */
treeNode: GenericTreeNode; treeNode: GenericTreeNode;
/** /**
* Text to display on low conversion amounts, describing what "resetting" is in this context. * Text to display on low conversion amounts, describing what "resetting" is in this context.
* Defaults to "Reset for ". * Defaults to "Reset for ".
*/ */
@ -253,62 +254,67 @@ 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. * 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. * 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( export function createCollapsibleModifierSections(
sections: Section[] sectionsFunc: () => Section[]
): [JSXFunction, Persistent<boolean>[]] { ): [JSXFunction, Persistent<boolean>[]] {
const processedBase = sections.map(s => convertComputable(s.base)); return createLazyProxy(() => {
const processedBaseText = sections.map(s => convertComputable(s.baseText)); const sections = sectionsFunc();
const processedVisible = sections.map(s => convertComputable(s.visible));
const collapsed = sections.map(() => persistent<boolean>(false));
const jsxFunc = jsx(() => {
const sectionJSX = sections.map((s, i) => {
if (unref(processedVisible[i]) === false) return null;
const header = (
<h3
onClick={() => (collapsed[i].value = !collapsed[i].value)}
style="cursor: pointer"
>
<span class={"modifier-toggle" + (unref(collapsed[i]) ? " collapsed" : "")}>
▼
</span>
{s.title}
{s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
</h3>
);
const modifiers = unref(collapsed[i]) ? null : ( const processedBase = sections.map(s => convertComputable(s.base));
<> const processedBaseText = sections.map(s => convertComputable(s.baseText));
<div class="modifier-container"> const processedVisible = sections.map(s => convertComputable(s.visible));
<span class="modifier-amount"> const collapsed = sections.map(() => persistent<boolean>(false));
{format(unref(processedBase[i]) ?? 1)} const jsxFunc = jsx(() => {
const sectionJSX = sections.map((s, i) => {
if (unref(processedVisible[i]) === false) return null;
const header = (
<h3
onClick={() => (collapsed[i].value = !collapsed[i].value)}
style="cursor: pointer"
>
<span class={"modifier-toggle" + (unref(collapsed[i]) ? " collapsed" : "")}>
▼
</span>
{s.title}
{s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
</h3>
);
const modifiers = unref(collapsed[i]) ? null : (
<>
<div class="modifier-container">
<span class="modifier-amount">
{format(unref(processedBase[i]) ?? 1)}
{s.unit}
</span>
<span class="modifier-description">
{renderJSX(unref(processedBaseText[i]) ?? "Base")}
</span>
</div>
{renderJSX(unref(s.modifier.description))}
</>
);
return (
<>
{i === 0 ? null : <br />}
<div>
{header}
<br />
{modifiers}
<hr />
Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
{s.unit} {s.unit}
</span> </div>
<span class="modifier-description"> </>
{renderJSX(unref(processedBaseText[i]) ?? "Base")} );
</span> });
</div> return <>{sectionJSX}</>;
{renderJSX(unref(s.modifier.description))}
</>
);
return (
<>
{i === 0 ? null : <br />}
<div>
{header}
<br />
{modifiers}
<hr />
Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
{s.unit}
</div>
</>
);
}); });
return <>{sectionJSX}</>; return [jsxFunc, collapsed];
}); });
return [jsxFunc, collapsed];
} }
/** /**

206
src/game/modifiers.tsx
View file

@ -6,6 +6,7 @@ import Decimal, { format } from "util/bignum";
import type { WithRequired } from "util/common"; import type { WithRequired } from "util/common";
import type { Computable, ProcessedComputable } from "util/computed"; import type { Computable, ProcessedComputable } from "util/computed";
import { convertComputable } from "util/computed"; import { convertComputable } from "util/computed";
import { createLazyProxy } from "util/proxies";
import { renderJSX } from "util/vue"; import { renderJSX } from "util/vue";
import { computed, unref } from "vue"; import { computed, unref } from "vue";
@ -44,112 +45,161 @@ export type ModifierFromOptionalParams<T, S> = T extends undefined
? Omit<WithRequired<Modifier, "revert" | "description">, "enabled"> ? Omit<WithRequired<Modifier, "revert" | "description">, "enabled">
: WithRequired<Modifier, "revert" | "enabled" | "description">; : 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. * Create a modifier that adds some value to the input value.
* @param addend The amount to add to the input value. * @param optionsFunc Additive modifier options.
* @param description Description of what this modifier is doing.
* @param enabled A computable that will be processed and passed directly into the returned modifier.
*/ */
export function createAdditiveModifier< export function createAdditiveModifier<
T extends Computable<CoercableComponent> | undefined, T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined, S extends Computable<boolean> | undefined,
R = ModifierFromOptionalParams<T, S> R = ModifierFromOptionalParams<T, S>
>(addend: Computable<DecimalSource>, description?: T, enabled?: S): R { >(optionsFunc: () => AdditiveModifierOptions<T, S>): R {
const processedAddend = convertComputable(addend); return createLazyProxy(() => {
const processedDescription = convertComputable(description); const { addend, description, enabled } = optionsFunc();
const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
return { const processedAddend = convertComputable(addend);
apply: (gain: DecimalSource) => Decimal.add(gain, unref(processedAddend)), const processedDescription = convertComputable(description);
revert: (gain: DecimalSource) => Decimal.sub(gain, unref(processedAddend)), const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
enabled: processedEnabled, return {
description: apply: (gain: DecimalSource) => Decimal.add(gain, unref(processedAddend)),
description == null revert: (gain: DecimalSource) => Decimal.sub(gain, unref(processedAddend)),
? undefined enabled: processedEnabled,
: jsx(() => ( description:
<div class="modifier-container"> description == null
<span class="modifier-amount"> ? undefined
{Decimal.gte(unref(processedAddend), 0) ? "+" : ""} : jsx(() => (
{format(unref(processedAddend))} <div class="modifier-container">
</span> <span class="modifier-amount">
{unref(processedDescription) ? ( {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
<span class="modifier-description"> {format(unref(processedAddend))}
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
{renderJSX(unref(processedDescription)!)}
</span> </span>
) : null} {unref(processedDescription) ? (
</div> <span class="modifier-description">
)) {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
} as unknown as R; {renderJSX(unref(processedDescription)!)}
</span>
) : null}
</div>
))
};
}) 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. * Create a modifier that multiplies the input value by some value.
* @param multiplier The value to multiply the input value by. * @param optionsFunc Multiplicative modifier options.
* @param description Description of what this modifier is doing.
* @param enabled A computable that will be processed and passed directly into the returned modifier.
*/ */
export function createMultiplicativeModifier< export function createMultiplicativeModifier<
T extends Computable<CoercableComponent> | undefined, T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined, S extends Computable<boolean> | undefined,
R = ModifierFromOptionalParams<T, S> R = ModifierFromOptionalParams<T, S>
>(multiplier: Computable<DecimalSource>, description?: T, enabled?: S): R { >(optionsFunc: () => MultiplicativeModifierOptions<T, S>): R {
const processedMultiplier = convertComputable(multiplier); return createLazyProxy(() => {
const processedDescription = convertComputable(description); const { multiplier, description, enabled } = optionsFunc();
const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
return { const processedMultiplier = convertComputable(multiplier);
apply: (gain: DecimalSource) => Decimal.times(gain, unref(processedMultiplier)), const processedDescription = convertComputable(description);
revert: (gain: DecimalSource) => Decimal.div(gain, unref(processedMultiplier)), const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
enabled: processedEnabled, return {
description: apply: (gain: DecimalSource) => Decimal.times(gain, unref(processedMultiplier)),
description == null revert: (gain: DecimalSource) => Decimal.div(gain, unref(processedMultiplier)),
? undefined enabled: processedEnabled,
: jsx(() => ( description:
<div class="modifier-container"> description == null
<span class="modifier-amount">x{format(unref(processedMultiplier))}</span> ? undefined
{unref(processedDescription) ? ( : jsx(() => (
<span class="modifier-description"> <div class="modifier-container">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} <span class="modifier-amount">
{renderJSX(unref(processedDescription)!)} x{format(unref(processedMultiplier))}
</span> </span>
) : null} {unref(processedDescription) ? (
</div> <span class="modifier-description">
)) {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
} as unknown as R; {renderJSX(unref(processedDescription)!)}
</span>
) : null}
</div>
))
};
}) 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. * 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 optionsFunc Exponential modifier options.
* @param description Description of what this modifier is doing.
* @param enabled A computable that will be processed and passed directly into the returned modifier.
*/ */
export function createExponentialModifier< export function createExponentialModifier<
T extends Computable<CoercableComponent> | undefined, T extends Computable<CoercableComponent> | undefined,
S extends Computable<boolean> | undefined, S extends Computable<boolean> | undefined,
R = ModifierFromOptionalParams<T, S> R = ModifierFromOptionalParams<T, S>
>(exponent: Computable<DecimalSource>, description?: T, enabled?: S): R { >(optionsFunc: () => ExponentialModifierOptions<T, S>): R {
const processedExponent = convertComputable(exponent); return createLazyProxy(() => {
const processedDescription = convertComputable(description); const { exponent, description, enabled } = optionsFunc();
const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
return { const processedExponent = convertComputable(exponent);
apply: (gain: DecimalSource) => Decimal.pow(gain, unref(processedExponent)), const processedDescription = convertComputable(description);
revert: (gain: DecimalSource) => Decimal.root(gain, unref(processedExponent)), const processedEnabled = enabled == null ? undefined : convertComputable(enabled);
enabled: processedEnabled, return {
description: apply: (gain: DecimalSource) => Decimal.pow(gain, unref(processedExponent)),
description == null revert: (gain: DecimalSource) => Decimal.root(gain, unref(processedExponent)),
? undefined enabled: processedEnabled,
: jsx(() => ( description:
<div class="modifier-container"> description == null
<span class="modifier-amount">^{format(unref(processedExponent))}</span> ? undefined
{unref(processedDescription) ? ( : jsx(() => (
<span class="modifier-description"> <div class="modifier-container">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} <span class="modifier-amount">
{renderJSX(unref(processedDescription)!)} ^{format(unref(processedExponent))}
</span> </span>
) : null} {unref(processedDescription) ? (
</div> <span class="modifier-description">
)) {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
} as unknown as R; {renderJSX(unref(processedDescription)!)}
</span>
) : null}
</div>
))
};
}) as unknown as R;
} }
/** /**