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

add element-based backgrounds to detail sidebar

Browse source
This commit is contained in:
Justin Edmund 2025-09-24 03:49:20 -07:00
parent 506d33bf57
commit 6034157d07
2 changed files with 414 additions and 387 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
src/lib/components/sidebar/DetailsSidebar.svelte
View file

@ -5,7 +5,12 @@
import { getProficiencyLabel } from '$lib/utils/proficiency'
import { getRaceLabel } from '$lib/utils/race'
import { getGenderLabel } from '$lib/utils/gender'
import { getCharacterDetailImage, getWeaponBaseImage, getSummonDetailImage, getCharacterPose } from '$lib/utils/images'
import {
getCharacterDetailImage,
getWeaponBaseImage,
getSummonDetailImage,
getCharacterPose
} from '$lib/utils/images'
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
interface Props {
@ -42,15 +47,19 @@
// Grid item info (uncap levels from the grid item itself)
const gridUncapLevel = $derived(
type === 'character' ? (item as GridCharacter).uncapLevel :
type === 'weapon' ? (item as GridWeapon).uncapLevel :
(item as GridSummon).uncapLevel
type === 'character'
? (item as GridCharacter).uncapLevel
: type === 'weapon'
? (item as GridWeapon).uncapLevel
: (item as GridSummon).uncapLevel
)
const gridTranscendence = $derived(
type === 'character' ? (item as GridCharacter).transcendenceStep :
type === 'weapon' ? (item as GridWeapon).transcendenceStep :
(item as GridSummon).transcendenceStep
type === 'character'
? (item as GridCharacter).transcendenceStep
: type === 'weapon'
? (item as GridWeapon).transcendenceStep
: (item as GridSummon).transcendenceStep
)
// Get image URL based on type using detail/base variants
@ -66,21 +75,25 @@
return getSummonDetailImage(id)
}
}
// Get element-based background color
function getElementBackground(): string {
const element = itemData?.element
switch (element) {
case 1: return 'var(--wind-item-detail-bg)'
case 2: return 'var(--fire-item-detail-bg)'
case 3: return 'var(--water-item-detail-bg)'
case 4: return 'var(--earth-item-detail-bg)'
case 5: return 'var(--dark-item-detail-bg)'
case 6: return 'var(--light-item-detail-bg)'
default: return 'var(--null-item-detail-bg)'
}
}
</script>
<div class="details-sidebar">
<div class="item-header">
<img
src={getImageUrl()}
alt={displayName(itemData)}
class="item-image"
/>
<div class="item-title">
<h2>{displayName(itemData)}</h2>
{#if itemData?.granblueId}
<span class="granblue-id">ID: {itemData.granblueId}</span>
{/if}
</div>
<div class="item-header" style="background: {getElementBackground()}">
<img src={getImageUrl()} alt={displayName(itemData)} class="item-image {type}" />
</div>
<div class="details-section">
@ -99,7 +112,10 @@
<div class="detail-row">
<span class="label">Race</span>
<span class="value">
{itemData.race.map(r => getRaceLabel(r)).filter(Boolean).join(', ') || '—'}
{itemData.race
.map((r) => getRaceLabel(r))
.filter(Boolean)
.join(', ') || '—'}
</span>
</div>
{/if}
@ -111,7 +127,10 @@
<div class="detail-row">
<span class="label">Proficiencies</span>
<span class="value">
{itemData.proficiency.map(p => getProficiencyLabel(p)).filter(Boolean).join(', ') || '—'}
{itemData.proficiency
.map((p) => getProficiencyLabel(p))
.filter(Boolean)
.join(', ') || '—'}
</span>
</div>
{/if}
@ -127,7 +146,7 @@
<h3>Uncap Status</h3>
<div class="uncap-display">
<UncapIndicator
type={type}
{type}
uncapLevel={gridUncapLevel}
transcendenceStage={gridTranscendence}
special={itemData?.special}
@ -155,7 +174,9 @@
itemData.uncap.flb && 'FLB',
itemData.uncap.ulb && 'ULB',
itemData.uncap.transcendence && 'Transcendence'
].filter(Boolean).join(', ') || 'Standard'}
]
.filter(Boolean)
.join(', ') || 'Standard'}
</span>
</div>
{/if}
@ -279,41 +300,29 @@
@use '$src/themes/layout' as layout;
.details-sidebar {
padding: spacing.$unit-2x;
padding: 0 spacing.$unit-2x spacing.$unit-2x;
color: var(--text-primary, colors.$grey-10);
display: flex;
flex-direction: column;
gap: spacing.$unit-2x;
}
.item-header {
display: flex;
gap: spacing.$unit-2x;
align-items: flex-start;
margin-bottom: spacing.$unit-3x;
padding-bottom: spacing.$unit-2x;
border-bottom: 1px solid var(--border-color, colors.$grey-70);
}
.item-image {
width: 80px;
height: 80px;
border-radius: layout.$item-corner;
object-fit: cover;
background: colors.$grey-80;
border: 1px solid colors.$grey-70;
justify-content: center;
transition: background 0.3s ease;
.item-image.weapon {
width: 62%;
}
.item-title {
flex: 1;
h2 {
margin: 0 0 calc(spacing.$unit * 0.5) 0;
font-size: typography.$font-xlarge;
font-weight: typography.$medium;
color: var(--text-primary, colors.$grey-10);
}
.granblue-id {
font-size: typography.$font-small;
color: var(--text-secondary, colors.$grey-50);
.item-image.summon,
.item-image.character {
width: 100%;
}
}

18
src/themes/themes.scss
View file

@ -233,6 +233,15 @@
--light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20};
// Item detail backgrounds (same colors as nav selected)
--null-item-detail-bg: #{colors.$grey-85};
--wind-item-detail-bg: #{colors.$wind-bg-20};
--fire-item-detail-bg: #{colors.$fire-bg-20};
--water-item-detail-bg: #{colors.$water-bg-20};
--earth-item-detail-bg: #{colors.$earth-bg-20};
--light-item-detail-bg: #{colors.$light-bg-20};
--dark-item-detail-bg: #{colors.$dark-bg-20};
// Light - Element navigation selected text
--null-nav-selected-text: #{colors.$grey-40};
--wind-nav-selected-text: #{colors.$wind-text-20};
@ -511,6 +520,15 @@
--light-nav-selected-bg: #{colors.$light-bg-20};
--dark-nav-selected-bg: #{colors.$dark-bg-20};
// Item detail backgrounds (same colors as nav selected)
--null-item-detail-bg: #{colors.$grey-85};
--wind-item-detail-bg: #{colors.$wind-bg-20};
--fire-item-detail-bg: #{colors.$fire-bg-20};
--water-item-detail-bg: #{colors.$water-bg-20};
--earth-item-detail-bg: #{colors.$earth-bg-20};
--light-item-detail-bg: #{colors.$light-bg-20};
--dark-item-detail-bg: #{colors.$dark-bg-20};
// Dark - Element navigation selected text (same as light theme)
--null-nav-selected-text: #{colors.$grey-40};
--wind-nav-selected-text: #{colors.$wind-text-20};