42 lines
1.7 KiB
Svelte
42 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import CalcInfo from '../CalcInfo.svelte';
|
|
|
|
interface Props {
|
|
maxHP: number;
|
|
needHP: number;
|
|
effStam: number;
|
|
spurtStartHP?: number[];
|
|
showStats: boolean;
|
|
mode: number;
|
|
modePer: number;
|
|
mean: number;
|
|
}
|
|
|
|
let { maxHP, needHP, effStam, spurtStartHP = [0, 0], showStats, mode, modePer, mean }: Props = $props();
|
|
|
|
const needHPPer = $derived((100 * needHP) / maxHP);
|
|
const white = $derived(Math.trunc(maxHP * 0.015));
|
|
const gold = $derived(Math.trunc(maxHP * 0.055));
|
|
const goldDebuff = $derived(Math.trunc(maxHP * -0.03));
|
|
</script>
|
|
|
|
<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
|
|
<CalcInfo title="Max HP" class="max-w-72 flex-1">{Math.floor(maxHP)}</CalcInfo>
|
|
<CalcInfo title="Spurt Threshold" class="max-w-72 flex-1">{Math.ceil(needHP)} ({needHPPer.toFixed(1)}%)</CalcInfo>
|
|
<CalcInfo title="Spurt Start HP" class="hidden max-w-72 flex-1">
|
|
{Math.ceil(spurtStartHP[1])} – {Math.ceil(spurtStartHP[0])}
|
|
</CalcInfo>
|
|
</div>
|
|
<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
|
|
<CalcInfo title="White Recovery" class="max-w-72 flex-1">+{white} HP</CalcInfo>
|
|
<CalcInfo title="Gold Recovery" class="max-w-72 flex-1">+{gold} HP</CalcInfo>
|
|
<CalcInfo title="Gold Debuff" class="max-w-72 flex-1">{goldDebuff} HP</CalcInfo>
|
|
</div>
|
|
{#if showStats}
|
|
<div class="mx-auto flex w-full flex-col place-items-center md:flex-row md:justify-center">
|
|
<CalcInfo title="Mode HP from Skills" class="max-w-72 flex-1">{Math.round(mode)} (P={modePer.toFixed(1)}%)</CalcInfo>
|
|
<CalcInfo title="Mean HP from Skills" class="max-w-72 flex-1">{Math.round(mean)}</CalcInfo>
|
|
<CalcInfo title="Effective Stamina" class="max-w-72 flex-1">{Math.ceil(effStam)}</CalcInfo>
|
|
</div>
|
|
{/if}
|