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

summon rep: show subauras + friend summon, 3x2 grid layout

Browse source
This commit is contained in:
Justin Edmund 2025-12-22 23:21:57 -08:00
parent b710f81d94
commit 4129a43103
1 changed files with 26 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,15 +13,11 @@
// Use direct summons if provided, otherwise get from party // Use direct summons if provided, otherwise get from party
const summons = $derived(directSummons || party?.summons || []) const summons = $derived(directSummons || party?.summons || [])
const main = $derived(summons.find((s: GridSummon) => s?.main || s?.position === -1)) const main = $derived(summons.find((s: GridSummon) => s?.main || s?.position === -1))
const friend = $derived( const friend = $derived(summons.find((s: GridSummon) => s?.friend || s?.position === -2))
extendedView ? summons.find((s: GridSummon) => s?.friend || s?.position === -2) : undefined
)
// In standard view: show positions 0-3 (4 summons) // Always show positions 0-5 (6 summons including subauras)
// In extended view: show positions 0-5 (6 summons including subauras)
const gridLength = $derived(extendedView ? 6 : 4)
const grid = $derived( const grid = $derived(
Array.from({ length: gridLength }, (_, i) => summons.find((s: GridSummon) => s?.position === i)) Array.from({ length: 6 }, (_, i) => summons.find((s: GridSummon) => s?.position === i))
) )
function summonImageUrl(s?: GridSummon, isMain = false): string { function summonImageUrl(s?: GridSummon, isMain = false): string {
@ -48,16 +44,14 @@
</li> </li>
{/each} {/each}
</ul> </ul>
{#if extendedView} <div class="friendSummon" class:empty={!friend}>
<div class="friendSummon" class:empty={!friend}> {#if friend}<img
{#if friend}<img alt="Friend Summon"
alt="Friend Summon" src={summonImageUrl(friend, true)}
src={summonImageUrl(friend, true)} loading="lazy"
loading="lazy" decoding="async"
decoding="async" />{/if}
/>{/if} </div>
</div>
{/if}
</div> </div>
<style lang="scss"> <style lang="scss">
@ -71,37 +65,8 @@
display: grid; display: grid;
gap: $unit-half; gap: $unit-half;
// Standard view layout: main summon | 4 grid summons // Layout: main summon | 6 grid summons (3x2) | friend summon
grid-template-columns: 0.96fr 2.2fr; grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr;
// Extended view layout: main summon | 6 grid summons | friend summon
&.extended {
gap: calc($unit-half + 1px);
grid-template-columns: auto 1fr auto;
.mainSummon {
min-width: 69px;
}
.mainSummon,
.friendSummon {
@include rep.aspect(56, 97);
display: grid;
flex: 0 0 auto;
min-width: 70px;
height: 100%;
}
.summons {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(2, 1fr);
column-gap: calc($unit-half + 1px);
row-gap: calc($unit * 1.5 - 2px);
min-width: 0; /* allow grid to shrink without overflowing */
}
}
.summon, .summon,
.mainSummon, .mainSummon,
@ -122,19 +87,25 @@
} }
} }
.mainSummon { .mainSummon,
@include rep.aspect(56, 97); .friendSummon {
@include rep.aspect(rep.$summon-main-w, rep.$summon-main-h);
display: grid; display: grid;
max-width: 70px; height: calc(100% - 6px);
height: auto; align-self: center;
} }
.summons { .summons {
@include rep.grid(2, 2, $unit-half); display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
align-content: space-between;
column-gap: $unit-half;
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
align-content: center; // Center the grid vertically height: calc(100% - 6px);
align-self: center;
} }
.summon { .summon {
@ -143,7 +114,7 @@
overflow: hidden; overflow: hidden;
min-width: 43px; min-width: 43px;
display: grid; display: grid;
@include rep.aspect(184, 138); @include rep.aspect(rep.$summon-cell-w, rep.$summon-cell-h);
} }
} }
</style> </style>