botfights/frontend/src/pages/FightPage.vue

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import FightViewer from '../components/FightViewer.vue'
import { useNostr } from '../composables/useNostr'

const route = useRoute()
const router = useRouter()
const { bot: myBot, isLoggedIn } = useNostr()
const fightId = ref(route.params.fightId as string)
const fight = ref<any>(null)
const isLoading = ref(true)
const isRequeueing = ref(false)
const isLive = ref(false)
const liveRounds = ref(0)
const fightError = ref('')
const replayDone = ref(false)
const autoBattle = ref(false)
const autoBattleCount = ref(0)
let pollHandle: ReturnType<typeof setInterval> | null = null
let pollCount = 0

const myBotId = computed(() => {
  if (!isLoggedIn.value || !myBot.value || !fight.value) return null
  if (myBot.value.id === fight.value.botA?.id) return fight.value.botA.id
  if (myBot.value.id === fight.value.botB?.id) return fight.value.botB.id
  return null
})

const showOverlay = computed(() => replayDone.value && !isRequeueing.value && !autoBattle.value)

async function loadFight(): Promise<string | null> {
  try {
    const res = await fetch(`/api/fights/${fightId.value}`)
    if (res.ok) {
      const data = await res.json()
      liveRounds.value = data.rounds?.length || 0
      if (data.status === 'finished') {
        fight.value = data
      }
      return data.status
    }
  } catch { /* */ }
  return null
}

function startPolling() {
  pollCount = 0
  pollHandle = setInterval(async () => {
    pollCount++
    const s = await loadFight()
    if (s === 'finished') {
      isLive.value = false
      if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
    } else if (pollCount > 60) {
      isLive.value = false
      fightError.value = 'Fight took too long. It may still be running — try refreshing.'
      if (pollHandle) { clearInterval(pollHandle); pollHandle = null }
    }
  }, 1500)
}

onMounted(async () => {
  const status = await loadFight()
  isLoading.value = false

  if (status === null || status !== 'finished') {
    isLive.value = true
  }

  if (isLive.value) startPolling()
})

onUnmounted(() => {
  if (pollHandle) clearInterval(pollHandle)
  autoBattle.value = false
})

async function fightAgain(botId: string) {
  if (isRequeueing.value) return
  isRequeueing.value = true
  replayDone.value = false
  try {
    const res = await fetch(`/api/queue/join/${botId}`, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      // Load the new fight in-place (new scene)
      fightId.value = data.fightId
      fight.value = null
      isLive.value = true
      liveRounds.value = 0
      fightError.value = ''
      window.history.replaceState({}, '', `/arena/${data.fightId}`)
      startPolling()
    }
  } catch { /* */ }
  isRequeueing.value = false
}

async function matchmake(botId: string) {
  if (isRequeueing.value) return
  isRequeueing.value = true
  replayDone.value = false
  try {
    const res = await fetch(`/api/fights/matchmake/${botId}`, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      fightId.value = data.fightId
      fight.value = null
      isLive.value = true
      liveRounds.value = 0
      fightError.value = ''
      window.history.replaceState({}, '', `/arena/${data.fightId}`)
      startPolling()
    }
  } catch { /* */ }
  isRequeueing.value = false
}

function onReplayDone() {
  replayDone.value = true
  if (autoBattle.value && myBotId.value) {
    autoBattleCount.value++
    fightAgain(myBotId.value)
  }
}

function startAutoBattle() {
  if (!myBotId.value) return
  autoBattle.value = true
  autoBattleCount.value = 0
  fightAgain(myBotId.value)
}

function stopAutoBattle() {
  autoBattle.value = false
}
</script>

<template>
  <div class="h-[calc(100vh-4rem)] flex flex-col px-2 sm:px-3 py-2 sm:py-3 overflow-hidden">
    <div v-if="isLoading" class="flex-1 flex items-center justify-center">
      <p class="font-display text-text-muted animate-pulse tracking-wider">LOADING FIGHT...</p>
    </div>

    <div v-else-if="isLive && !fight" class="flex-1 flex flex-col items-center justify-center gap-4">
      <div class="w-16 h-16 border-4 border-neon-pink/30 border-t-neon-pink rounded-full animate-spin" />
      <p class="font-display text-neon-pink text-xl tracking-widest animate-pulse glow-pink">FIGHT IN PROGRESS</p>
      <p class="font-mono text-text-muted text-xs">
        Round {{ liveRounds }} — webhooks being called...
      </p>
      <p v-if="autoBattle" class="font-pixel text-[10px] text-neon-yellow tracking-wider">
        AUTO BATTLE #{{ autoBattleCount + 1 }}
        <button class="ml-2 text-ko hover:text-text-primary transition-colors" @click="stopAutoBattle">STOP</button>
      </p>
    </div>

    <div v-else-if="fightError" class="flex-1 flex flex-col items-center justify-center gap-3">
      <p class="font-display text-ko text-sm tracking-wider">{{ fightError }}</p>
      <button
        class="px-6 py-2 border border-neon-cyan/40 text-neon-cyan font-display font-bold text-xs tracking-wider
               hover:bg-neon-cyan/10 transition-all"
        @click="$router.push('/join')"
      >
        BACK TO LOBBY
      </button>
    </div>

    <div v-else-if="!fight" class="flex-1 flex items-center justify-center">
      <p class="font-display text-text-muted">Fight not found.</p>
    </div>

    <template v-else>
      <div class="flex-1 min-h-0 relative">
        <FightViewer :key="fightId" :fight="fight" :autoplay="true" class="h-full" @replay-done="onReplayDone" />

        <!-- Post-fight overlay — on top of the game canvas -->
        <Transition name="fade-up">
          <div v-if="showOverlay"
               class="absolute inset-0 z-50 flex items-end justify-center pointer-events-none pb-16 sm:pb-20">
            <div class="pointer-events-auto flex flex-col items-center gap-2 sm:gap-3
                        bg-black/80 backdrop-blur-sm border border-white/10 rounded-xl
                        px-4 sm:px-8 py-4 sm:py-6 shadow-2xl max-w-md w-full mx-4">

              <!-- Owner actions -->
              <template v-if="myBotId">
                <button
                  class="w-full py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
                         font-display font-black text-sm tracking-widest rounded-lg
                         hover:bg-neon-cyan/20 hover:border-neon-cyan transition-all neon-border-cyan"
                  @click="fightAgain(myBotId!)"
                >
                  FIGHT ANOTHER BOT
                </button>
                <button
                  class="w-full py-3 bg-neon-yellow/10 border-2 border-neon-yellow/50 text-neon-yellow
                         font-display font-black text-sm tracking-widest rounded-lg
                         hover:bg-neon-yellow/20 hover:border-neon-yellow transition-all"
                  @click="startAutoBattle"
                >
                  AUTO BATTLE
                  <span class="block font-mono text-[9px] tracking-wider text-neon-yellow/60 mt-0.5">
                    CONTINUOUS FIGHTS
                  </span>
                </button>
              </template>

              <!-- Spectator actions -->
              <template v-else-if="isLoggedIn && myBot">
                <button
                  class="w-full py-3 bg-neon-cyan/10 border-2 border-neon-cyan/50 text-neon-cyan
                         font-display font-black text-sm tracking-widest rounded-lg
                         hover:bg-neon-cyan/20 hover:border-neon-cyan transition-all neon-border-cyan"
                  @click="matchmake(myBot!.id)"
                >
                  FIGHT WITH MY BOT
                  <span class="block font-mono text-[9px] tracking-wider text-neon-cyan/60 mt-0.5">
                    {{ myBot!.name.toUpperCase() }}
                  </span>
                </button>
              </template>

              <button
                class="w-full py-2 border border-white/10 text-text-muted
                       font-display text-xs tracking-widest rounded-lg
                       hover:bg-white/5 hover:text-text-primary transition-all"
                @click="$router.push('/join')"
              >
                BACK TO LOBBY
              </button>
            </div>
          </div>
        </Transition>

        <!-- Auto-battle indicator -->
        <div v-if="autoBattle && fight"
             class="absolute top-2 right-2 z-50 flex items-center gap-2
                    bg-black/80 border border-neon-yellow/30 rounded-lg px-3 py-1.5">
          <span class="w-2 h-2 rounded-full bg-neon-yellow animate-pulse" />
          <span class="font-pixel text-[10px] text-neon-yellow tracking-wider">
            AUTO #{{ autoBattleCount }}
          </span>
          <button
            class="font-pixel text-[10px] text-ko hover:text-text-primary transition-colors ml-1"
            @click="stopAutoBattle"
          >
            STOP
          </button>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>
.fade-up-enter-active {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fade-up-leave-active {
  transition: all 0.2s ease-in;
}
.fade-up-enter-from {
  opacity: 0;
  transform: translateY(20px);
}
.fade-up-leave-to {
  opacity: 0;
  transform: translateY(10px);
}
</style>