stuff

2026-04-11 19:46:37 +01:00
parent 52752a92bf
commit 32e6c19f72
44 changed files with 5511 additions and 39 deletions
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ArcadeCharacterSelect from '../components/ArcadeCharacterSelect.vue'
+import ArcadeViewer from '../components/ArcadeViewer.vue'
+
+type GameState = 'select' | 'fighting' | 'result'
+
+const state = ref<GameState>('select')
+const matchWinner = ref<1 | 2 | null>(null)
+
+const fightConfig = ref<{
+  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
+} | null>(null)
+
+function onStart(config: typeof fightConfig.value): void {
+  fightConfig.value = config
+  state.value = 'fighting'
+  matchWinner.value = null
+}
+
+function onMatchEnd(winner: 1 | 2): void {
+  matchWinner.value = winner
+  state.value = 'result'
+}
+
+function rematch(): void {
+  // Restart with same config
+  state.value = 'fighting'
+  matchWinner.value = null
+  // Force re-mount by toggling through select briefly
+  const cfg = fightConfig.value
+  fightConfig.value = null
+  requestAnimationFrame(() => {
+    fightConfig.value = cfg
+  })
+}
+
+function backToSelect(): void {
+  state.value = 'select'
+  fightConfig.value = null
+  matchWinner.value = null
+}
+</script>
+
+<template>
+  <div class="p-4">
+    <!-- Character Select -->
+    <ArcadeCharacterSelect
+      v-if="state === 'select'"
+      @start="onStart"
+    />
+
+    <!-- Fighting -->
+    <ArcadeViewer
+      v-if="state === 'fighting' && fightConfig"
+      :key="fightConfig.p1.seed + fightConfig.p2.seed"
+      :config="fightConfig"
+      @match-end="onMatchEnd"
+    />
+
+    <!-- Result -->
+    <div v-if="state === 'result' && fightConfig" class="flex flex-col items-center gap-6 pt-8">
+      <h2 class="font-display font-black text-3xl tracking-[0.2em]"
+          :class="matchWinner === 1 ? 'text-neon-cyan glow-cyan' : 'text-neon-pink glow-pink'">
+        {{ matchWinner === 1 ? fightConfig.p1.name.toUpperCase() : fightConfig.p2.name.toUpperCase() }}
+        WINS!
+      </h2>
+
+      <div class="flex gap-4">
+        <button
+          class="px-6 py-2 font-display font-bold text-sm tracking-widest rounded-lg
+                 border border-neon-cyan text-neon-cyan hover:bg-neon-cyan/10 transition-all"
+          @click="rematch"
+        >
+          REMATCH
+        </button>
+        <button
+          class="px-6 py-2 font-display font-bold text-sm tracking-widest rounded-lg
+                 border border-border text-text-secondary hover:border-text-muted transition-all"
+          @click="backToSelect"
+        >
+          NEW FIGHTERS
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.glow-cyan { text-shadow: 0 0 10px rgba(0, 240, 255, 0.5), 0 0 20px rgba(0, 240, 255, 0.2); }
+.glow-pink { text-shadow: 0 0 10px rgba(255, 0, 128, 0.5), 0 0 20px rgba(255, 0, 128, 0.2); }
+</style>