92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import type { MatchSessionDto } from '@/common/interfaces'
|
|
import type { GameService } from '@/services/GameService'
|
|
import type { LoggingService } from '@/services/LoggingService'
|
|
import { inject, onBeforeMount, ref, toRaw } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const gameService: GameService = inject<GameService>('game') as GameService
|
|
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
|
|
|
|
let sessionId: string
|
|
let matchSession = ref<MatchSessionDto | undefined>(undefined)
|
|
|
|
async function loadData() {
|
|
matchSession.value = (await gameService.getMatchSession(sessionId)) as MatchSessionDto
|
|
console.log('matchSession.value :>> ', toRaw(matchSession.value))
|
|
}
|
|
|
|
onBeforeMount(() => {
|
|
sessionId = route.params.id as string
|
|
console.log('sessionId :>> ', sessionId)
|
|
loadData()
|
|
if (sessionId) {
|
|
// setInterval(loadData, 5000)
|
|
} else {
|
|
router.push({ name: 'home' })
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<h1 class="title is-1">{{ $t('match-page') }}</h1>
|
|
<h2 class="title is-3">{{ matchSession?.name }}</h2>
|
|
<div class="block mt-6">
|
|
<p class="mb-4">
|
|
<span class="title is-5">{{ $t('winner') }}</span>
|
|
<span class="is-size-5 ml-4">{{ matchSession?.matchWinner?.name }}</span>
|
|
</p>
|
|
<p class="mb-4">
|
|
<span class="title is-5">{{ $t('win-type') }}</span>
|
|
<span class="is-size-5 ml-4">{{ matchSession?.options.winType }}</span>
|
|
</p>
|
|
<p class="mb-4">
|
|
<span class="title is-5">{{ $t('points-to-win') }}</span>
|
|
<span class="is-size-5 ml-4">{{ matchSession?.options.winTarget }}</span>
|
|
</p>
|
|
<h3 class="title is-5">{{ $t('final-scoreboard') }}</h3>
|
|
<div v-bind:key="$index" v-for="(score, $index) in matchSession?.scoreboard">
|
|
<p class="">
|
|
<span class="title is-5">{{ score.name }}</span>
|
|
<span class="is-size-5 ml-4">{{ score.score }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div
|
|
class="cell"
|
|
v-bind:key="$index"
|
|
v-for="(summary, $index) in matchSession?.gameSummaries"
|
|
>
|
|
<div class="block mt-6">
|
|
<h3 class="title is-5">{{ $t('round-index-1', [$index + 1]) }}</h3>
|
|
<p class="mb-4">
|
|
<span class="title is-5">{{ $t('winner') }}</span>
|
|
<span class="is-size-5 ml-4">{{ summary.winner?.name }}</span>
|
|
</p>
|
|
<h4 class="title is-6">{{ $t('scoreboard') }}</h4>
|
|
<div v-bind:key="$index" v-for="(gameScore, $index) in summary.score">
|
|
<p class="">
|
|
<span class="title is-5">{{ gameScore.name }}</span>
|
|
<span class="is-size-5 ml-4">{{ gameScore.score }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="buttons">
|
|
<button class="button is-primary" @click="router.push({ name: 'home' })">
|
|
{{ $t('back') }}
|
|
</button>
|
|
</div>
|
|
<div class="section">
|
|
<!-- <div>{{ matchSession }}</div> -->
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|