thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-22 16:35:42 +00:00
Code Issues Releases Activity Actions

Update modifier displays

Browse source
This commit is contained in:
thepaperpilot 2022-12-10 02:24:14 -06:00
parent 8524d65dc1
commit c40b80f60a
3 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/common/modifiers.css
View file

@ -1,5 +1,6 @@
.modifier-container { .modifier-container {
display: flex; display: flex;
padding: 1px 8px;
} }
.modifier-container:nth-child(2n) { .modifier-container:nth-child(2n) {
@ -9,6 +10,7 @@
.modifier-amount { .modifier-amount {
flex-basis: 100px; flex-basis: 100px;
flex-shrink: 0; flex-shrink: 0;
text-align: right;
} }
.modifier-description { .modifier-description {

15
src/data/common.tsx
View file

@ -305,13 +305,13 @@ export function createCollapsibleModifierSections(
const modifiers = unref(collapsed.value[i]) ? null : ( const modifiers = unref(collapsed.value[i]) ? null : (
<> <>
<div class="modifier-container"> <div class="modifier-container">
<span class="modifier-description">
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
</span>
<span class="modifier-amount"> <span class="modifier-amount">
{format(unref(processed.base[i]) ?? 1)} {format(unref(processed.base[i]) ?? 1)}
{s.unit} {s.unit}
</span> </span>
<span class="modifier-description">
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
</span>
</div> </div>
{renderJSX(unref(s.modifier.description))} {renderJSX(unref(s.modifier.description))}
</> </>
@ -328,8 +328,15 @@ export function createCollapsibleModifierSections(
<br /> <br />
{modifiers} {modifiers}
<hr /> <hr />
Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))} <div class="modifier-container">
<span class="modifier-description">
Total
</span>
<span class="modifier-amount">
{format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
{s.unit} {s.unit}
</span>
</div>
</div> </div>
</> </>
); );

29
src/game/modifiers.tsx
View file

@ -77,16 +77,16 @@ export function createAdditiveModifier<T extends AdditiveModifierOptions>(
? undefined ? undefined
: jsx(() => ( : jsx(() => (
<div class="modifier-container"> <div class="modifier-container">
<span class="modifier-amount">
{Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
{format(unref(processedAddend))}
</span>
{unref(processedDescription) ? ( {unref(processedDescription) ? (
<span class="modifier-description"> <span class="modifier-description">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
{renderJSX(unref(processedDescription)!)} {renderJSX(unref(processedDescription)!)}
</span> </span>
) : null} ) : null}
<span class="modifier-amount">
{Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
{format(unref(processedAddend))}
</span>
</div> </div>
)) ))
}; };
@ -125,15 +125,15 @@ export function createMultiplicativeModifier<T extends MultiplicativeModifierOpt
? undefined ? undefined
: jsx(() => ( : jsx(() => (
<div class="modifier-container"> <div class="modifier-container">
<span class="modifier-amount">
x{format(unref(processedMultiplier))}
</span>
{unref(processedDescription) ? ( {unref(processedDescription) ? (
<span class="modifier-description"> <span class="modifier-description">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
{renderJSX(unref(processedDescription)!)} {renderJSX(unref(processedDescription)!)}
</span> </span>
) : null} ) : null}
<span class="modifier-amount">
×{format(unref(processedMultiplier))}
</span>
</div> </div>
)) ))
}; };
@ -194,9 +194,6 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
? undefined ? undefined
: jsx(() => ( : jsx(() => (
<div class="modifier-container"> <div class="modifier-container">
<span class="modifier-amount">
^{format(unref(processedExponent))}
</span>
{unref(processedDescription) ? ( {unref(processedDescription) ? (
<span class="modifier-description"> <span class="modifier-description">
{/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */} {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@ -204,6 +201,9 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
{supportLowNumbers ? " (+1 effective)" : null} {supportLowNumbers ? " (+1 effective)" : null}
</span> </span>
) : null} ) : null}
<span class="modifier-amount">
^{format(unref(processedExponent))}
</span>
</div> </div>
)) ))
}; };
@ -279,16 +279,21 @@ export function createModifierSection(
</h3> </h3>
<br /> <br />
<div class="modifier-container"> <div class="modifier-container">
<span class="modifier-description">{renderJSX(baseText)}</span>
<span class="modifier-amount"> <span class="modifier-amount">
{format(base)} {format(base)}
{unit} {unit}
</span> </span>
<span class="modifier-description">{renderJSX(baseText)}</span>
</div> </div>
{renderJSX(unref(modifier.description))} {renderJSX(unref(modifier.description))}
<hr /> <hr />
Total: {format(modifier.apply(base))} <div class="modifier-container">
<span class="modifier-description">Total</span>
<span class="modifier-amount">
{format(modifier.apply(base))}
{unit} {unit}
</span>
</div>
</div> </div>
); );
} }