rework character rep layout: 3 portraits + 2 stacked squares
This commit is contained in:
parent
db39b07414
commit
59f79262d5
1 changed files with 103 additions and 47 deletions
|
|
@ -20,7 +20,11 @@
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
|
|
||||||
function characterImageUrl(c?: GridCharacter): string {
|
// For standard mode: first 3 are portraits, last 2 are squares
|
||||||
|
const portraits = $derived(unlimited ? [] : grid.slice(0, 3))
|
||||||
|
const squares = $derived(unlimited ? [] : grid.slice(3, 5))
|
||||||
|
|
||||||
|
function characterImageUrl(c: GridCharacter | undefined, position: number): string {
|
||||||
const id = c?.character?.granblueId
|
const id = c?.character?.granblueId
|
||||||
if (!id) return ''
|
if (!id) return ''
|
||||||
|
|
||||||
|
|
@ -33,9 +37,12 @@
|
||||||
mainWeaponElement = main?.element ?? main?.weapon?.element
|
mainWeaponElement = main?.element ?? main?.weapon?.element
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Use 'square' variant for unlimited mode or positions 3-4 in standard mode
|
||||||
|
const variant = unlimited || position >= 3 ? 'square' : 'main'
|
||||||
|
|
||||||
return getCharacterImageWithPose(
|
return getCharacterImageWithPose(
|
||||||
id,
|
id,
|
||||||
unlimited ? 'square' : 'main',
|
variant,
|
||||||
c?.uncapLevel ?? 0,
|
c?.uncapLevel ?? 0,
|
||||||
c?.transcendenceStep ?? 0,
|
c?.transcendenceStep ?? 0,
|
||||||
mainWeaponElement,
|
mainWeaponElement,
|
||||||
|
|
@ -45,18 +52,47 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="rep">
|
<div class="rep">
|
||||||
<ul class="characters" class:unlimited>
|
{#if unlimited}
|
||||||
{#each grid as c, i}
|
<!-- Unlimited mode: 8 square slots in 4x2 grid -->
|
||||||
<li class="character" class:empty={!c}>
|
<ul class="characters unlimited">
|
||||||
{#if c}<img
|
{#each grid as c, i}
|
||||||
alt="Character"
|
<li class="character" class:empty={!c}>
|
||||||
src={characterImageUrl(c)}
|
{#if c}<img
|
||||||
loading="lazy"
|
alt="Character"
|
||||||
decoding="async"
|
src={characterImageUrl(c, i)}
|
||||||
/>{/if}
|
loading="lazy"
|
||||||
</li>
|
decoding="async"
|
||||||
{/each}
|
/>{/if}
|
||||||
</ul>
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{:else}
|
||||||
|
<!-- Standard mode: 3 portraits + 2 stacked squares -->
|
||||||
|
<div class="portraits">
|
||||||
|
{#each portraits as c, i}
|
||||||
|
<div class="character portrait" class:empty={!c}>
|
||||||
|
{#if c}<img
|
||||||
|
alt="Character"
|
||||||
|
src={characterImageUrl(c, i)}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="squares">
|
||||||
|
{#each squares as c, i}
|
||||||
|
<div class="character square" class:empty={!c}>
|
||||||
|
{#if c}<img
|
||||||
|
alt="Character"
|
||||||
|
src={characterImageUrl(c, i + 3)}
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
@ -66,45 +102,65 @@
|
||||||
.rep {
|
.rep {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
border-radius: $item-corner-small;
|
display: flex;
|
||||||
grid-gap: $unit-half;
|
gap: $unit-half;
|
||||||
|
}
|
||||||
|
|
||||||
.characters {
|
// Standard mode: 3 portraits taking full height
|
||||||
display: grid;
|
.portraits {
|
||||||
grid-template-columns: repeat(5, 1fr);
|
display: flex;
|
||||||
gap: $unit-half;
|
gap: $unit-half;
|
||||||
margin: 0;
|
height: 100%;
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
&.unlimited {
|
.character {
|
||||||
grid-template-columns: repeat(4, 1fr);
|
height: 100%;
|
||||||
|
aspect-ratio: 16/33;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.character {
|
// Standard mode: 2 stacked squares with gap filling remaining height
|
||||||
aspect-ratio: 1/1;
|
.squares {
|
||||||
}
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
.character {
|
.character {
|
||||||
aspect-ratio: 16/33;
|
aspect-ratio: 1/1;
|
||||||
background: var(--placeholder-bg);
|
}
|
||||||
border-radius: 4px;
|
}
|
||||||
box-sizing: border-box;
|
|
||||||
display: grid;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
&.empty {
|
// Unlimited mode: 8 square slots in 4x2 grid
|
||||||
background: var(--placeholder-bg);
|
.characters.unlimited {
|
||||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
display: grid;
|
||||||
}
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: $unit-half;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
img {
|
.character {
|
||||||
display: block;
|
aspect-ratio: 1/1;
|
||||||
width: 100%;
|
}
|
||||||
height: 100%;
|
}
|
||||||
object-fit: cover;
|
|
||||||
}
|
// Shared character slot styles
|
||||||
}
|
.character {
|
||||||
|
background: var(--placeholder-bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&.empty {
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue