fix: mobile layout — 30% fight view / 70% battle log split
- Canvas takes 30% top, battle log + human input takes 70% bottom on mobile - Battle log now visible on mobile for both live fights and replays (was hidden) - Compact single-row health bar on mobile to maximize canvas space - Desktop layout unchanged (62/38 split) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
4307a02d25
commit
5520e0760e
@@ -401,12 +401,12 @@ async function replay() {
|
|||||||
<template>
|
<template>
|
||||||
<div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2">
|
<div class="h-full flex flex-col lg:flex-row gap-1 sm:gap-2">
|
||||||
|
|
||||||
<!-- LEFT: Battle Log (hidden on mobile, shown on desktop) -->
|
<!-- LEFT: Battle Log — mobile: bottom 70%, desktop: left 38% -->
|
||||||
<div class="hidden lg:flex lg:w-[38%] flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden order-2 lg:order-1">
|
<div class="flex h-[70%] lg:h-auto lg:w-[38%] flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden order-2 lg:order-1">
|
||||||
<div class="bg-surface-raised border-b border-border px-3 py-1.5 flex items-center gap-2 flex-shrink-0">
|
<div class="bg-surface-raised border-b border-border px-3 py-1 lg:py-1.5 flex items-center gap-2 flex-shrink-0">
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-ko" />
|
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-ko" />
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-neon-yellow" />
|
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-yellow" />
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-neon-green" />
|
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-green" />
|
||||||
<span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
|
<span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -439,8 +439,8 @@ async function replay() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- RIGHT: Game Canvas -->
|
<!-- RIGHT: Game Canvas — mobile: top 30%, desktop: right 62% -->
|
||||||
<div class="flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
|
<div class="h-[30%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
|
||||||
|
|
||||||
<!-- Health bars — mobile: two-row (names then bars), desktop: single row -->
|
<!-- Health bars — mobile: two-row (names then bars), desktop: single row -->
|
||||||
<div class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
|
<div class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
|
||||||
|
|||||||
@@ -657,16 +657,16 @@ function stopAutoBattle() {
|
|||||||
<!-- LIVE HUMAN FIGHT: full arena view with input -->
|
<!-- LIVE HUMAN FIGHT: full arena view with input -->
|
||||||
<div v-else-if="isLive && isHumanFight" class="flex-1 flex flex-col lg:flex-row gap-1 sm:gap-2 min-h-0">
|
<div v-else-if="isLive && isHumanFight" class="flex-1 flex flex-col lg:flex-row gap-1 sm:gap-2 min-h-0">
|
||||||
|
|
||||||
<!-- Battle Log + Human Input — mobile: bottom 40%, desktop: left 38% -->
|
<!-- Battle Log + Human Input — mobile: bottom 70%, desktop: left 38% -->
|
||||||
<div class="flex flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden
|
<div class="flex flex-col min-h-0 border border-border rounded-lg bg-black/90 overflow-hidden
|
||||||
h-[40%] lg:h-auto lg:w-[38%] order-2 lg:order-1">
|
h-[70%] lg:h-auto lg:w-[38%] order-2 lg:order-1">
|
||||||
<div class="bg-surface-raised border-b border-border px-3 py-1.5 hidden lg:flex items-center gap-2 flex-shrink-0">
|
<div class="bg-surface-raised border-b border-border px-3 py-1 lg:py-1.5 flex items-center gap-2 flex-shrink-0">
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-ko" />
|
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-ko" />
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-neon-yellow" />
|
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-yellow" />
|
||||||
<span class="w-2.5 h-2.5 rounded-full bg-neon-green" />
|
<span class="w-2 h-2 lg:w-2.5 lg:h-2.5 rounded-full bg-neon-green" />
|
||||||
<span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
|
<span class="font-pixel text-[10px] text-text-muted ml-2 tracking-wider">BATTLE LOG</span>
|
||||||
</div>
|
</div>
|
||||||
<div ref="liveLogEl" class="flex-1 overflow-y-auto p-2 sm:p-4 font-mono text-xs sm:text-sm space-y-1.5 leading-relaxed hidden lg:block">
|
<div ref="liveLogEl" class="flex-1 overflow-y-auto p-2 sm:p-4 font-mono text-xs sm:text-sm space-y-1.5 leading-relaxed">
|
||||||
<div v-for="(item, idx) in liveLogItems" :key="idx">
|
<div v-for="(item, idx) in liveLogItems" :key="idx">
|
||||||
<div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
|
<div v-if="item.type === 'divider'" class="py-1.5"><div class="border-t border-white/5" /></div>
|
||||||
<p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
|
<p v-else-if="item.type === 'header'" class="text-neon-purple font-bold text-base tracking-wide pt-3 pb-1 uppercase">{{ item.text }}</p>
|
||||||
@@ -777,32 +777,25 @@ function stopAutoBattle() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Game Canvas — mobile: top 60%, desktop: right 62% -->
|
<!-- Game Canvas — mobile: top 30%, desktop: right 62% -->
|
||||||
<div class="h-[60%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
|
<div class="h-[30%] lg:h-auto lg:flex-1 lg:w-[62%] flex flex-col min-h-0 border border-border rounded-lg bg-black overflow-hidden order-1 lg:order-2">
|
||||||
|
|
||||||
<!-- Health bars -->
|
<!-- Health bars -->
|
||||||
<div v-if="liveFightData?.botA" class="px-2 sm:px-3 py-1.5 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
|
<div v-if="liveFightData?.botA" class="px-2 sm:px-3 py-1 sm:py-2 bg-surface-raised/80 border-b border-border flex-shrink-0">
|
||||||
<!-- Mobile: two-row layout (names row + HP bars row) -->
|
<!-- Mobile: compact single-row names + HP -->
|
||||||
<div class="sm:hidden">
|
<div class="sm:hidden">
|
||||||
<div class="flex items-center justify-between mb-1">
|
|
||||||
<p class="font-marker text-xs tracking-wider truncate text-neon-cyan flex-1 min-w-0">{{ liveFightData.botA.name }}</p>
|
|
||||||
<span class="font-funky text-neon-purple text-sm px-2 flex-shrink-0">VS</span>
|
|
||||||
<p class="font-marker text-xs tracking-wider truncate text-right text-neon-pink flex-1 min-w-0">{{ liveFightData.botB.name }}</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-1">
|
<div class="flex items-center gap-1">
|
||||||
<div class="flex-1 h-3.5 bg-black/50 rounded-sm overflow-hidden border border-neon-cyan/30">
|
<p class="font-marker text-[10px] tracking-wider truncate text-neon-cyan flex-1 min-w-0">{{ liveFightData.botA.name }}</p>
|
||||||
<div class="h-full bg-gradient-to-r from-neon-cyan to-neon-purple transition-all duration-500" :style="{ width: `${liveHpA}%` }" />
|
<span class="font-mono font-bold text-[10px] w-5 text-right tabular-nums" :class="liveHpA > 50 ? 'text-neon-cyan' : liveHpA > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpA }}</span>
|
||||||
|
<div class="w-6 h-2.5 bg-black/50 rounded-sm overflow-hidden border border-neon-cyan/30">
|
||||||
|
<div class="h-full bg-neon-cyan transition-all duration-500" :style="{ width: `${liveHpA}%` }" />
|
||||||
</div>
|
</div>
|
||||||
<span class="font-mono font-bold text-[10px] w-6 text-right tabular-nums" :class="liveHpA > 50 ? 'text-neon-cyan' : liveHpA > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpA }}</span>
|
<span class="font-funky text-neon-purple text-[10px] px-0.5 flex-shrink-0">VS</span>
|
||||||
<span class="font-mono font-bold text-[10px] w-6 text-left tabular-nums" :class="liveHpB > 50 ? 'text-neon-pink' : liveHpB > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpB }}</span>
|
<div class="w-6 h-2.5 bg-black/50 rounded-sm overflow-hidden border border-neon-pink/30">
|
||||||
<div class="flex-1 h-3.5 bg-black/50 rounded-sm overflow-hidden border border-neon-pink/30">
|
<div class="h-full bg-neon-pink transition-all duration-500 ml-auto" :style="{ width: `${liveHpB}%` }" />
|
||||||
<div class="h-full bg-gradient-to-l from-neon-pink to-neon-purple transition-all duration-500 ml-auto" :style="{ width: `${liveHpB}%` }" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<span class="font-mono font-bold text-[10px] w-5 text-left tabular-nums" :class="liveHpB > 50 ? 'text-neon-pink' : liveHpB > 20 ? 'text-neon-yellow' : 'text-ko'">{{ liveHpB }}</span>
|
||||||
<div class="flex items-center justify-between mt-0.5">
|
<p class="font-marker text-[10px] tracking-wider truncate text-right text-neon-pink flex-1 min-w-0">{{ liveFightData.botB.name }}</p>
|
||||||
<span class="font-pixel text-[8px]" :class="tierClass(liveFightData.botA.tier || 0)">{{ Math.round(liveFightData.botA.eloRating || 0) }}</span>
|
|
||||||
<span class="font-pixel text-[8px] text-text-muted">{{ liveFightData.arenaInfo?.name }} | R{{ liveCurrentRound }}</span>
|
|
||||||
<span class="font-pixel text-[8px]" :class="tierClass(liveFightData.botB.tier || 0)">{{ Math.round(liveFightData.botB.eloRating || 0) }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Desktop: single-row layout -->
|
<!-- Desktop: single-row layout -->
|
||||||
|
|||||||
Reference in New Issue
Block a user