33 lines
993 B
Vue
33 lines
993 B
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted } from 'vue'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
import FightViewer from '../components/FightViewer.vue'
|
||
|
|
|
||
|
|
const route = useRoute()
|
||
|
|
const fightId = route.params.fightId as string
|
||
|
|
const fight = ref<any>(null)
|
||
|
|
const isLoading = ref(true)
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
try {
|
||
|
|
const res = await fetch(`/api/fights/${fightId}`)
|
||
|
|
if (res.ok) fight.value = await res.json()
|
||
|
|
} catch { /* */ }
|
||
|
|
isLoading.value = false
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="h-[calc(100vh-4rem)] flex flex-col px-3 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="!fight" class="flex-1 flex items-center justify-center">
|
||
|
|
<p class="font-display text-text-muted">Fight not found.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<FightViewer v-else :fight="fight" class="flex-1 min-h-0" />
|
||
|
|
</div>
|
||
|
|
</template>
|