62 lines
3.3 KiB
Svelte
62 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import ItemIcon from '$lib/components/ItemIcon.svelte';
|
|
import type { TalentTier } from '$lib/builder/loadout';
|
|
|
|
let {
|
|
label = 'TALENT TIER',
|
|
name,
|
|
talent,
|
|
value = $bindable(1),
|
|
onchange
|
|
}: {
|
|
label?: string;
|
|
name: string;
|
|
talent: { name: string; iconUrl?: string; tiers?: Array<{ tier: string }> };
|
|
value?: TalentTier;
|
|
onchange?: (tier: TalentTier) => void;
|
|
} = $props();
|
|
|
|
const available = (tier: TalentTier) => talent.tiers?.some((entry) => entry.tier === (tier === 2 ? 'II' : 'I')) ?? false;
|
|
const choose = (tier: TalentTier) => {
|
|
value = tier;
|
|
onchange?.(tier);
|
|
};
|
|
</script>
|
|
|
|
<fieldset class="talent-tier-choice">
|
|
<legend>{label}</legend>
|
|
<div>
|
|
{#each [1, 2] as tier}
|
|
<label class:tier-two={tier === 2}>
|
|
<input type="radio" {name} value={tier} checked={value === tier} disabled={!available(tier as TalentTier)} onchange={() => choose(tier as TalentTier)}/>
|
|
<span>
|
|
<ItemIcon src={talent.iconUrl} alt="" className="talent-tier-icon"/>
|
|
<small>TIER {tier === 2 ? 'II' : 'I'}</small>
|
|
<b>T{tier}</b>
|
|
<em>{available(tier as TalentTier) ? value === tier ? 'SELECTED' : 'SELECT' : 'UNAVAILABLE'}</em>
|
|
</span>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</fieldset>
|
|
|
|
<style>
|
|
.talent-tier-choice{min-width:0;margin:8px 0 0;padding:0;border:0}
|
|
.talent-tier-choice legend{margin-bottom:5px;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.07em}
|
|
.talent-tier-choice>div{display:grid;grid-template-columns:1fr 1fr;gap:5px}
|
|
.talent-tier-choice label{min-width:0;cursor:pointer}
|
|
.talent-tier-choice input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
|
|
.talent-tier-choice span{min-height:64px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:1px 8px;padding:7px;border:1px solid var(--shd-border);background:var(--shd-builder-canvas);color:var(--shd-text);transition:var(--shd-transition)}
|
|
.talent-tier-choice :global(.talent-tier-icon){grid-row:1/3;width:40px;height:40px;object-fit:contain}
|
|
.talent-tier-choice .tier-two :global(.talent-tier-icon){filter:sepia(.3) saturate(1.45) hue-rotate(335deg) brightness(1.12)}
|
|
.talent-tier-choice small{align-self:end;color:var(--shd-text-muted);font-size:var(--shd-type-telemetry);font-weight:900;letter-spacing:.06em}
|
|
.talent-tier-choice b{grid-column:3;grid-row:1/3;color:var(--shd-text-muted);font-size:18px}
|
|
.talent-tier-choice em{align-self:start;color:var(--shd-text-dim);font-size:var(--shd-type-telemetry);font-style:normal;font-weight:900}
|
|
.talent-tier-choice label:hover span{border-color:var(--shd-border-strong);background:var(--shd-surface-active)}
|
|
.talent-tier-choice input:checked+span{border-color:var(--shd-builder-selection-border);background:var(--shd-builder-selection);box-shadow:inset 0 -2px var(--shd-orange)}
|
|
.talent-tier-choice input:checked+span b,.talent-tier-choice input:checked+span em{color:var(--shd-orange)}
|
|
.talent-tier-choice input:focus-visible+span{outline:2px solid var(--shd-focus-ring);outline-offset:2px}
|
|
.talent-tier-choice input:disabled+span{opacity:.38;cursor:not-allowed;filter:saturate(.35)}
|
|
@media(max-width:430px){.talent-tier-choice span{grid-template-columns:36px minmax(0,1fr);}.talent-tier-choice :global(.talent-tier-icon){width:34px;height:34px}.talent-tier-choice b{display:none}}
|
|
</style>
|