granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add level and element to raid tile

Browse source
This commit is contained in:
Justin Edmund 2025-12-21 11:32:11 -08:00
parent 5d00c1580d
commit 7cde30a427
1 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/lib/components/party/info/RaidTile.svelte
View file

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import InfoTile from './InfoTile.svelte' import InfoTile from './InfoTile.svelte'
import type { Raid } from '$lib/types/api/entities' import type { Raid } from '$lib/types/api/entities'
import { getRaidImage } from '$lib/utils/images'
import { getElementLabel } from '$lib/utils/element'
interface Props { interface Props {
raid?: Raid raid?: Raid
@ -13,15 +15,18 @@
if (typeof raid.name === 'string') return raid.name if (typeof raid.name === 'string') return raid.name
return raid.name?.en || raid.name?.ja || 'Unknown Raid' return raid.name?.en || raid.name?.ja || 'Unknown Raid'
}) })
const elementLabel = $derived(raid ? getElementLabel(raid.element) : null)
</script> </script>
<InfoTile label="Raid" class="raid-tile"> <InfoTile label="Raid" class="raid-tile">
{#if raid} {#if raid}
<div class="raid-info"> <div class="raid-info">
<span class="raid-name">{raidName()}</span> <img src={getRaidImage(raid.slug)} alt="" class="raid-image" />
{#if raid.group?.difficulty} <div class="raid-details">
<span class="raid-difficulty">Lv. {raid.group.difficulty}</span> <span class="raid-name">{raidName()}</span>
{/if} <span class="raid-meta">Lv. {raid.level} · {elementLabel}</span>
</div>
</div> </div>
{:else} {:else}
<span class="empty-state">No raid selected</span> <span class="empty-state">No raid selected</span>
@ -31,22 +36,35 @@
<style lang="scss"> <style lang="scss">
@use '$src/themes/spacing' as *; @use '$src/themes/spacing' as *;
@use '$src/themes/typography' as *; @use '$src/themes/typography' as *;
@use '$src/themes/layout' as *;
.raid-info { .raid-info {
display: flex;
align-items: center;
gap: $unit;
}
.raid-image {
height: 48px;
width: auto;
border-radius: $item-corner;
}
.raid-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit-half; gap: 2px;
} }
.raid-name { .raid-name {
font-size: $font-medium; font-size: $font-small;
font-weight: $bold; font-weight: $bold;
color: var(--text-primary); color: var(--text-primary);
} }
.raid-difficulty { .raid-meta {
font-size: $font-regular; font-size: $font-small;
color: var(--text-secondary); color: var(--text-tertiary);
} }
.empty-state { .empty-state {