348 lines
13 KiB
Vue
348 lines
13 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, watch, onMounted } from 'vue'
|
|
import { archetypes } from '../game/sprites'
|
|
import { generateSpriteSheet, getBotColors, FRAME_SIZE } from '../game/sprites'
|
|
import { ARENA_THEMES } from '../game/fight/constants'
|
|
import { COMBOS } from '../game/arcade/moves'
|
|
|
|
const emit = defineEmits<{
|
|
'start': [config: {
|
|
p1: { seed: string; tier: number; archetype: string; name: string }
|
|
p2: { seed: string; tier: number; archetype: string; name: string }
|
|
arena: string
|
|
rounds: 1 | 3 | 5
|
|
roundTime: 30 | 60 | 99
|
|
cpuBotId?: string
|
|
}]
|
|
}>()
|
|
|
|
// Filter out weight-0 archetypes (like the_creator)
|
|
const selectableArchetypes = computed(() =>
|
|
archetypes.filter(a => a.weight > 0).map(a => a.name)
|
|
)
|
|
|
|
const arenaNames = Object.keys(ARENA_THEMES)
|
|
|
|
// Mode: VS HUMAN or VS CPU
|
|
const mode = ref<'human' | 'cpu'>('human')
|
|
|
|
// CPU bot list (fetched from server)
|
|
const cpuBots = ref<{ id: string; name: string; eloRating: number }[]>([])
|
|
const selectedBotId = ref('')
|
|
const loadingBots = ref(false)
|
|
|
|
async function fetchBots(): Promise<void> {
|
|
loadingBots.value = true
|
|
try {
|
|
const res = await fetch('/api/bots/leaderboard')
|
|
if (res.ok) {
|
|
const data = await res.json() as {
|
|
entries: { botId: string; botName: string; eloRating: number }[]
|
|
}
|
|
const entries = (data.entries || []).slice(0, 50)
|
|
cpuBots.value = entries.map(e => ({ id: e.botId, name: e.botName, eloRating: e.eloRating }))
|
|
if (cpuBots.value.length > 0 && !selectedBotId.value) {
|
|
// Pick a random bot as default
|
|
selectedBotId.value = cpuBots.value[Math.floor(Math.random() * cpuBots.value.length)].id
|
|
}
|
|
}
|
|
} catch {
|
|
// Offline — CPU mode won't be available
|
|
} finally {
|
|
loadingBots.value = false
|
|
}
|
|
}
|
|
|
|
watch(mode, (m) => {
|
|
if (m === 'cpu' && cpuBots.value.length === 0) {
|
|
fetchBots()
|
|
}
|
|
})
|
|
|
|
// Player selections
|
|
const p1Archetype = ref(selectableArchetypes.value[0])
|
|
const p2Archetype = ref(selectableArchetypes.value[1])
|
|
const p1Seed = ref(String(Math.random()))
|
|
const p2Seed = ref(String(Math.random()))
|
|
const selectedArena = ref(arenaNames[Math.floor(Math.random() * arenaNames.length)])
|
|
const rounds = ref<1 | 3 | 5>(3)
|
|
const roundTime = ref<30 | 60 | 99>(99)
|
|
|
|
// Active player for selection (1 or 2)
|
|
const activePlayer = ref<1 | 2>(1)
|
|
|
|
// Sprite preview
|
|
const p1Preview = ref('')
|
|
const p2Preview = ref('')
|
|
|
|
function generatePreview(seed: string, archetype: string): string {
|
|
const colors = getBotColors(seed)
|
|
return generateSpriteSheet(seed, 3, colors.primary, colors.secondary, archetype)
|
|
}
|
|
|
|
watch([p1Seed, p1Archetype], () => {
|
|
p1Preview.value = generatePreview(p1Seed.value, p1Archetype.value)
|
|
}, { immediate: true })
|
|
|
|
watch([p2Seed, p2Archetype], () => {
|
|
p2Preview.value = generatePreview(p2Seed.value, p2Archetype.value)
|
|
}, { immediate: true })
|
|
|
|
function selectArchetype(name: string): void {
|
|
if (activePlayer.value === 1) {
|
|
p1Archetype.value = name
|
|
p1Seed.value = String(Math.random())
|
|
} else {
|
|
p2Archetype.value = name
|
|
p2Seed.value = String(Math.random())
|
|
}
|
|
}
|
|
|
|
function randomize(player: 1 | 2): void {
|
|
const list = selectableArchetypes.value
|
|
const arch = list[Math.floor(Math.random() * list.length)]
|
|
if (player === 1) {
|
|
p1Archetype.value = arch
|
|
p1Seed.value = String(Math.random())
|
|
} else {
|
|
p2Archetype.value = arch
|
|
p2Seed.value = String(Math.random())
|
|
}
|
|
}
|
|
|
|
function startFight(): void {
|
|
const cpuBotId = mode.value === 'cpu' ? selectedBotId.value : undefined
|
|
const p2Name = mode.value === 'cpu'
|
|
? cpuBots.value.find(b => b.id === selectedBotId.value)?.name || `CPU ${p2Archetype.value}`
|
|
: `P2 ${p2Archetype.value}`
|
|
|
|
emit('start', {
|
|
p1: { seed: p1Seed.value, tier: 3, archetype: p1Archetype.value, name: `P1 ${p1Archetype.value}` },
|
|
p2: { seed: p2Seed.value, tier: 3, archetype: p2Archetype.value, name: p2Name },
|
|
arena: selectedArena.value,
|
|
rounds: rounds.value,
|
|
roundTime: roundTime.value,
|
|
cpuBotId,
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-4 p-4 max-w-4xl mx-auto">
|
|
<!-- Title -->
|
|
<h1 class="text-center font-display font-black text-2xl tracking-[0.2em] text-neon-cyan glow-cyan">
|
|
ARCADE MODE
|
|
</h1>
|
|
|
|
<!-- Mode toggle -->
|
|
<div class="flex justify-center gap-2">
|
|
<button
|
|
class="px-4 py-1.5 text-xs font-display font-bold tracking-widest rounded-l-lg border transition-all"
|
|
:class="mode === 'human' ? 'border-neon-cyan bg-neon-cyan/20 text-neon-cyan' : 'border-border text-text-muted hover:border-text-muted'"
|
|
@click="mode = 'human'"
|
|
>
|
|
VS HUMAN
|
|
</button>
|
|
<button
|
|
class="px-4 py-1.5 text-xs font-display font-bold tracking-widest rounded-r-lg border transition-all"
|
|
:class="mode === 'cpu' ? 'border-neon-pink bg-neon-pink/20 text-neon-pink' : 'border-border text-text-muted hover:border-text-muted'"
|
|
@click="mode = 'cpu'"
|
|
>
|
|
VS CPU
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Fighter previews -->
|
|
<div class="flex items-center justify-between gap-4">
|
|
<!-- P1 preview -->
|
|
<div
|
|
class="flex-1 border rounded-lg p-3 cursor-pointer transition-all"
|
|
:class="activePlayer === 1 ? 'border-neon-cyan bg-neon-cyan/5' : 'border-border'"
|
|
@click="activePlayer = 1"
|
|
>
|
|
<div class="text-center mb-2">
|
|
<span class="text-xs font-display font-bold tracking-wider text-neon-cyan">PLAYER 1</span>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div
|
|
v-if="p1Preview"
|
|
class="w-24 h-24 bg-contain bg-no-repeat bg-center pixelated"
|
|
:style="{ backgroundImage: `url(${p1Preview})`, backgroundPosition: '0 0', backgroundSize: `${FRAME_SIZE * 6}px auto` }"
|
|
/>
|
|
</div>
|
|
<div class="text-center mt-1">
|
|
<span class="text-[10px] font-display text-text-secondary tracking-wider">{{ p1Archetype.toUpperCase() }}</span>
|
|
</div>
|
|
<button
|
|
class="mt-1 w-full text-[9px] font-display text-text-muted hover:text-neon-cyan transition-colors tracking-wider"
|
|
@click.stop="randomize(1)"
|
|
>
|
|
RANDOM
|
|
</button>
|
|
</div>
|
|
|
|
<span class="font-display font-black text-2xl text-text-muted">VS</span>
|
|
|
|
<!-- P2 preview -->
|
|
<div
|
|
class="flex-1 border rounded-lg p-3 cursor-pointer transition-all"
|
|
:class="activePlayer === 2 ? 'border-neon-pink bg-neon-pink/5' : 'border-border'"
|
|
@click="activePlayer = 2"
|
|
>
|
|
<div class="text-center mb-2">
|
|
<span class="text-xs font-display font-bold tracking-wider text-neon-pink">
|
|
{{ mode === 'cpu' ? 'CPU' : 'PLAYER 2' }}
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div
|
|
v-if="p2Preview"
|
|
class="w-24 h-24 bg-contain bg-no-repeat bg-center pixelated"
|
|
:style="{ backgroundImage: `url(${p2Preview})`, backgroundPosition: '0 0', backgroundSize: `${FRAME_SIZE * 6}px auto` }"
|
|
/>
|
|
</div>
|
|
<div class="text-center mt-1">
|
|
<span class="text-[10px] font-display text-text-secondary tracking-wider">{{ p2Archetype.toUpperCase() }}</span>
|
|
</div>
|
|
<button
|
|
class="mt-1 w-full text-[9px] font-display text-text-muted hover:text-neon-pink transition-colors tracking-wider"
|
|
@click.stop="randomize(2)"
|
|
>
|
|
RANDOM
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CPU bot selector (only in CPU mode) -->
|
|
<div v-if="mode === 'cpu'" class="border border-neon-pink/30 rounded-lg p-3 bg-neon-pink/5">
|
|
<div class="text-[9px] font-display text-text-muted tracking-widest mb-2">CPU OPPONENT</div>
|
|
<select
|
|
v-if="cpuBots.length > 0"
|
|
v-model="selectedBotId"
|
|
class="w-full text-xs font-display bg-surface border border-border rounded px-2 py-1.5 text-text-secondary"
|
|
>
|
|
<option v-for="bot in cpuBots" :key="bot.id" :value="bot.id">
|
|
{{ bot.name.toUpperCase() }} (ELO {{ bot.eloRating }})
|
|
</option>
|
|
</select>
|
|
<div v-else-if="loadingBots" class="text-[10px] font-display text-text-muted">
|
|
Loading bots...
|
|
</div>
|
|
<div v-else class="text-[10px] font-display text-text-muted">
|
|
No bots available — start in VS HUMAN mode
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archetype grid -->
|
|
<div class="border border-border rounded-lg p-3 bg-surface/50">
|
|
<div class="text-[9px] font-display text-text-muted tracking-widest mb-2">
|
|
SELECT FIGHTER FOR
|
|
<span :class="activePlayer === 1 ? 'text-neon-cyan' : 'text-neon-pink'">
|
|
{{ activePlayer === 1 ? 'PLAYER 1' : (mode === 'cpu' ? 'CPU' : 'PLAYER 2') }}
|
|
</span>
|
|
</div>
|
|
<div class="grid grid-cols-8 sm:grid-cols-10 md:grid-cols-12 gap-1">
|
|
<button
|
|
v-for="arch in selectableArchetypes"
|
|
:key="arch"
|
|
class="aspect-square rounded border text-[7px] font-display tracking-wider truncate px-0.5 transition-all hover:border-neon-cyan hover:bg-neon-cyan/10"
|
|
:class="{
|
|
'border-neon-cyan bg-neon-cyan/20': activePlayer === 1 && p1Archetype === arch,
|
|
'border-neon-pink bg-neon-pink/20': activePlayer === 2 && p2Archetype === arch,
|
|
'border-border/50': (activePlayer === 1 ? p1Archetype : p2Archetype) !== arch,
|
|
}"
|
|
:title="arch"
|
|
@click="selectArchetype(arch)"
|
|
>
|
|
{{ arch.slice(0, 4).toUpperCase() }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Match config -->
|
|
<div class="flex flex-wrap gap-4 items-center justify-center">
|
|
<!-- Rounds -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[9px] font-display text-text-muted tracking-widest">ROUNDS</span>
|
|
<div class="flex gap-1">
|
|
<button
|
|
v-for="r in [1, 3, 5] as const"
|
|
:key="r"
|
|
class="px-2 py-0.5 text-xs font-display font-bold rounded border transition-all"
|
|
:class="rounds === r ? 'border-neon-cyan bg-neon-cyan/20 text-neon-cyan' : 'border-border text-text-muted hover:border-text-muted'"
|
|
@click="rounds = r"
|
|
>
|
|
{{ r }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Timer -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[9px] font-display text-text-muted tracking-widest">TIMER</span>
|
|
<div class="flex gap-1">
|
|
<button
|
|
v-for="t in [30, 60, 99] as const"
|
|
:key="t"
|
|
class="px-2 py-0.5 text-xs font-display font-bold rounded border transition-all"
|
|
:class="roundTime === t ? 'border-neon-cyan bg-neon-cyan/20 text-neon-cyan' : 'border-border text-text-muted hover:border-text-muted'"
|
|
@click="roundTime = t"
|
|
>
|
|
{{ t }}s
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Arena -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-[9px] font-display text-text-muted tracking-widest">ARENA</span>
|
|
<select
|
|
v-model="selectedArena"
|
|
class="text-xs font-display bg-surface border border-border rounded px-2 py-0.5 text-text-secondary"
|
|
>
|
|
<option v-for="a in arenaNames" :key="a" :value="a">
|
|
{{ a.replace(/_/g, ' ').toUpperCase() }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Combo reference -->
|
|
<div class="border border-border/50 rounded-lg p-3 bg-surface/30">
|
|
<div class="text-[9px] font-display text-text-muted tracking-widest mb-2">COMBO MOVES</div>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-1">
|
|
<div v-for="combo in COMBOS" :key="combo.name" class="flex items-center gap-2">
|
|
<span class="text-[10px] font-mono text-neon-cyan/70">
|
|
{{ combo.inputs.map(i => ({ down: '\u2193', up: '\u2191', forward: '\u2192', back: '\u2190', A: 'A', B: 'B' }[i] || i)).join('') }}
|
|
</span>
|
|
<span class="text-[9px] font-display text-text-secondary">{{ combo.name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-2 text-[8px] text-text-muted">
|
|
P1: WASD + G(punch) H(kick){{ mode === 'human' ? ' | P2: Arrows + K(punch) L(kick)' : '' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Start button -->
|
|
<button
|
|
class="w-full py-3 font-display font-black text-xl tracking-[0.3em] rounded-lg
|
|
bg-gradient-to-r from-neon-cyan/20 to-neon-pink/20 border border-neon-cyan/50
|
|
text-white hover:from-neon-cyan/30 hover:to-neon-pink/30 hover:border-neon-cyan
|
|
transition-all active:scale-95"
|
|
:disabled="mode === 'cpu' && !selectedBotId"
|
|
:class="{ 'opacity-50 cursor-not-allowed': mode === 'cpu' && !selectedBotId }"
|
|
@click="startFight"
|
|
>
|
|
FIGHT!
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.pixelated {
|
|
image-rendering: pixelated;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
.glow-cyan { text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.2); }
|
|
</style>
|