21 lines
1.0 KiB
Svelte
21 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import type { HoloWorkBoardBonus } from '$lib/engine/board-effects';
|
|
export let bonus: HoloWorkBoardBonus | undefined;
|
|
export let showEmpty = false;
|
|
const labels = { lesson: '레슨 Pt', cube: '큐브', training: '특훈 아이템' };
|
|
$: entries = (Object.keys(labels) as (keyof HoloWorkBoardBonus)[]).filter((key) => (bonus?.[key] ?? 0) > 0);
|
|
</script>
|
|
|
|
{#if entries.length}
|
|
<div class="bonuses" aria-label="홀로워크 보드 보너스">
|
|
{#each entries as key}<span>{labels[key]} <strong>+{bonus![key].toLocaleString('ko-KR', { maximumFractionDigits: 3 })}%</strong></span>{/each}
|
|
</div>
|
|
{:else if showEmpty}<p class="empty">활성 보드 보너스 없음</p>{/if}
|
|
|
|
<style>
|
|
.bonuses { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.bonuses span { padding: 5px 8px; border: 1px solid #65552c; border-radius: 7px; background: rgb(226 190 95 / 8%); color: #d9c890; font-size: 12px; line-height: 1.5; }
|
|
strong { color: #f1d583; white-space: nowrap; }
|
|
.empty { margin: 0; color: #a4adba; font-size: 13px; }
|
|
</style>
|