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

fix empty summon placeholder sizing with transparent svg

Browse source
This commit is contained in:
Justin Edmund 2026-01-06 00:58:54 -08:00
parent 77949edd9d
commit 59db1ec054
1 changed files with 20 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/lib/components/reps/SummonRep.svelte
View file

@ -20,9 +20,14 @@
Array.from({ length: 6 }, (_, i) => summons.find((s: GridSummon) => s?.position === i)) Array.from({ length: 6 }, (_, i) => summons.find((s: GridSummon) => s?.position === i))
) )
// Transparent SVG placeholders with correct aspect ratios for grid sizing
// Main/friend: 56x97, Grid: 184x138
const mainPlaceholder = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 97'%3E%3C/svg%3E`
const gridPlaceholder = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184 138'%3E%3C/svg%3E`
function summonImageUrl(s?: GridSummon, isMain = false): string { function summonImageUrl(s?: GridSummon, isMain = false): string {
const id = s?.summon?.granblueId const id = s?.summon?.granblueId
if (!id) return '' if (!id) return isMain ? mainPlaceholder : gridPlaceholder
const size = isMain ? 'main' : 'grid' const size = isMain ? 'main' : 'grid'
return getSummonImage(id, size) return getSummonImage(id, size)
} }
@ -30,27 +35,27 @@
<div class="rep" class:extended={extendedView}> <div class="rep" class:extended={extendedView}>
<div class="mainSummon" class:empty={!main}> <div class="mainSummon" class:empty={!main}>
{#if main}<img <img
alt="Main Summon" alt={main ? 'Main Summon' : ''}
src={summonImageUrl(main, true)} src={summonImageUrl(main, true)}
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/>{/if} />
</div> </div>
<ul class="summons"> <ul class="summons">
{#each grid as s, i} {#each grid as s, i}
<li class="summon" class:empty={!s}> <li class="summon" class:empty={!s}>
{#if s}<img alt="Summon" src={summonImageUrl(s)} loading="lazy" decoding="async" />{/if} <img alt={s ? 'Summon' : ''} src={summonImageUrl(s)} loading="lazy" decoding="async" />
</li> </li>
{/each} {/each}
</ul> </ul>
<div class="friendSummon" class:empty={!friend}> <div class="friendSummon" class:empty={!friend}>
{#if friend}<img <img
alt="Friend Summon" alt={friend ? 'Friend Summon' : ''}
src={summonImageUrl(friend, true)} src={summonImageUrl(friend, true)}
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/>{/if} />
</div> </div>
</div> </div>
@ -67,6 +72,7 @@
// Layout: main summon | 6 grid summons (3x2) | friend summon // Layout: main summon | 6 grid summons (3x2) | friend summon
grid-template-columns: auto 1fr auto; grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr;
.summon, .summon,
.mainSummon, .mainSummon,
@ -90,7 +96,6 @@
.mainSummon, .mainSummon,
.friendSummon { .friendSummon {
@include rep.aspect(rep.$summon-main-w, rep.$summon-main-h); @include rep.aspect(rep.$summon-main-w, rep.$summon-main-h);
display: grid;
height: calc(100% - 6px); height: calc(100% - 6px);
align-self: center; align-self: center;
} }