From 909c7a5f5e2b80eb3315efc1471f14320449ecf3 Mon Sep 17 00:00:00 2001 From: thepaperpilot Date: Wed, 15 Feb 2023 00:09:06 -0600 Subject: [PATCH] Make modifier section take options func and display bad numbers in red --- src/data/common.tsx | 26 ++++++--- src/game/modifiers.tsx | 116 ++++++++++++++++++++++++++++++++--------- 2 files changed, 111 insertions(+), 31 deletions(-) diff --git a/src/data/common.tsx b/src/data/common.tsx index f1a5f6d..3f68007 100644 --- a/src/data/common.tsx +++ b/src/data/common.tsx @@ -256,9 +256,11 @@ 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. + * @param smallerIsBetter Determines whether numbers larger or smaller than the base should be displayed as red. */ export function createCollapsibleModifierSections( - sectionsFunc: () => Section[] + sectionsFunc: () => Section[], + smallerIsBetter = false ): [JSXFunction, Persistent>] { const sections: Section[] = []; const processed: @@ -326,6 +328,9 @@ export function createCollapsibleModifierSections( const hasPreviousSection = !firstVisibleSection; firstVisibleSection = false; + const base = unref(processed.base[i]) ?? 1; + const total = s.modifier.apply(base); + return ( <> {hasPreviousSection ?
: null} @@ -335,11 +340,20 @@ export function createCollapsibleModifierSections( {modifiers}
- - Total - - - {format(s.modifier.apply(unref(processed.base[i]) ?? 1))} + Total + + {formatSmall(total)} {s.unit}
diff --git a/src/game/modifiers.tsx b/src/game/modifiers.tsx index 830e937..eb4ec2e 100644 --- a/src/game/modifiers.tsx +++ b/src/game/modifiers.tsx @@ -52,6 +52,8 @@ export interface AdditiveModifierOptions { description?: Computable | undefined; /** A computable that will be processed and passed directly into the returned modifier. */ enabled?: Computable | undefined; + /** Determines if numbers larger or smaller than 0 should be displayed as red. */ + smallerIsBetter?: boolean; } /** @@ -62,7 +64,7 @@ export function createAdditiveModifier( optionsFunc: () => T ): ModifierFromOptionalParams { return createLazyProxy(() => { - const { addend, description, enabled } = optionsFunc(); + const { addend, description, enabled, smallerIsBetter } = optionsFunc(); const processedAddend = convertComputable(addend); const processedDescription = convertComputable(description); @@ -82,7 +84,18 @@ export function createAdditiveModifier( {renderJSX(unref(processedDescription)!)} ) : null} - + {Decimal.gte(unref(processedAddend), 0) ? "+" : ""} {formatSmall(unref(processedAddend))} @@ -100,6 +113,8 @@ export interface MultiplicativeModifierOptions { description?: Computable | undefined; /** A computable that will be processed and passed directly into the returned modifier. */ enabled?: Computable | undefined; + /** Determines if numbers larger or smaller than 1 should be displayed as red. */ + smallerIsBetter?: boolean; } /** @@ -110,7 +125,7 @@ export function createMultiplicativeModifier T ): ModifierFromOptionalParams { return createLazyProxy(() => { - const { multiplier, description, enabled } = optionsFunc(); + const { multiplier, description, enabled, smallerIsBetter } = optionsFunc(); const processedMultiplier = convertComputable(multiplier); const processedDescription = convertComputable(description); @@ -130,7 +145,18 @@ export function createMultiplicativeModifier ) : null} - + ×{formatSmall(unref(processedMultiplier))} @@ -149,6 +175,8 @@ export interface ExponentialModifierOptions { enabled?: Computable | undefined; /** Add 1 before calculating, then remove it afterwards. This prevents low numbers from becoming lower. */ supportLowNumbers?: boolean; + /** Determines if numbers larger or smaller than 1 should be displayed as red. */ + smallerIsBetter?: boolean; } /** @@ -159,7 +187,8 @@ export function createExponentialModifier( optionsFunc: () => T ): ModifierFromOptionalParams { return createLazyProxy(() => { - const { exponent, description, enabled, supportLowNumbers } = optionsFunc(); + const { exponent, description, enabled, supportLowNumbers, smallerIsBetter } = + optionsFunc(); const processedExponent = convertComputable(exponent); const processedDescription = convertComputable(description); @@ -200,7 +229,18 @@ export function createExponentialModifier( {supportLowNumbers ? " (+1 effective)" : null} ) : null} - + ^{formatSmall(unref(processedExponent))} @@ -252,35 +292,50 @@ export function createSequentialModifier< }) as unknown as S; } +/** An object that configures a modifier section via {@link createModifierSection}. */ +export interface ModifierSectionOptions { + /** The header for the section. */ + title: string; + /** Smaller text that appears in the header after the title. */ + subtitle?: string; + /** The modifier to render. */ + modifier: WithRequired; + /** The base value that'll be passed into the modifier. Defaults to 1. */ + base?: DecimalSource; + /** The unit of the value being modified, if any. */ + unit?: string; + /** The label to use for the base value. Defaults to "Base". */ + baseText?: CoercableComponent; + /** Determines if numbers larger or smaller than the base should be displayed as red. */ + smallerIsBetter?: boolean; +} + /** * Create a JSX element that displays a modifier. * Intended to be used with the output from {@link createSequentialModifier}. - * @param title The header for the section. - * @param subtitle Smaller text that appears in the header after the title. - * @param modifier The modifier to render. - * @param base The base value that'll be passed into the modifier. - * @param unit The unit of the value being modified, if any. - * @param baseText The label to use for the base value. + * @param options Modifier section options. */ -export function createModifierSection( - title: string, - subtitle: string, - modifier: WithRequired, - base: DecimalSource = 1, - unit = "", - baseText: CoercableComponent = "Base" -) { +export function createModifierSection({ + title, + subtitle, + modifier, + base, + unit, + baseText, + smallerIsBetter +}: ModifierSectionOptions) { + const total = modifier.apply(base ?? 1); return (

{title} - {subtitle ? ({subtitle}) : null} + {subtitle == null ? null : ({subtitle})}


- {renderJSX(baseText)} + {renderJSX(baseText ?? "Base")} - {formatSmall(base)} + {formatSmall(base ?? 1)} {unit}
@@ -288,8 +343,19 @@ export function createModifierSection(
Total - - {formatSmall(modifier.apply(base))} + + {formatSmall(total)} {unit}