forked from profectus/Profectus
Update modifier displays
This commit is contained in:
parent
8524d65dc1
commit
c40b80f60a
3 changed files with 32 additions and 18 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue