115 lines
3.3 KiB
Vue
115 lines
3.3 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 { useEventBusStore } from '@/stores/eventBus'
|
|
import { useGameStore } from '@/stores/game'
|
|
import { storeToRefs } from 'pinia'
|
|
import { inject, onBeforeMount, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const gameStore = useGameStore()
|
|
const eventBus = useEventBusStore()
|
|
const socketService: any = inject('socket')
|
|
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)
|
|
|
|
const { readyForStart, sessionState, isSessionStarted, playerState, amIHost } =
|
|
storeToRefs(gameStore)
|
|
const { updateSessionState, updatePlayerState, updateGameState } = gameStore
|
|
|
|
async function setPlayerReady() {
|
|
logger.debug('Starting game')
|
|
if (!sessionState.value) {
|
|
logger.error('No session found')
|
|
return
|
|
}
|
|
if (!playerState.value) {
|
|
logger.error('No player found')
|
|
return
|
|
}
|
|
await socketService.sendMessage('client:set-player-ready', {
|
|
userId: playerState.value.id,
|
|
sessionId: sessionState.value.id
|
|
})
|
|
}
|
|
|
|
async function startMatch() {
|
|
const sessionId = sessionState?.value?.id
|
|
const playerId = playerState?.value?.id
|
|
if (sessionId) {
|
|
await socketService.sendMessageWithAck('client:start-session', {
|
|
sessionId: sessionId,
|
|
playerId: playerId
|
|
})
|
|
}
|
|
}
|
|
|
|
async function cancelMatch() {
|
|
logger.debug('Cancelling match')
|
|
await gameService.cancelMatchSession(sessionId)
|
|
updateSessionState(undefined)
|
|
updatePlayerState(undefined)
|
|
updateGameState(undefined)
|
|
|
|
logger.debug('Match cancelled successfully')
|
|
router.push({ name: 'home' })
|
|
}
|
|
|
|
async function loadData() {
|
|
await gameService.getMatchSession(sessionId)
|
|
}
|
|
|
|
eventBus.subscribe('window-before-unload', async () => {
|
|
logger.debug('Window before unload')
|
|
await cancelMatch()
|
|
})
|
|
|
|
eventBus.subscribe('server:match-starting', () => {
|
|
logger.debug('Match starting')
|
|
router.push({ name: 'game' })
|
|
})
|
|
|
|
onBeforeMount(() => {
|
|
sessionId = route.params.id as string
|
|
if (sessionId) {
|
|
setInterval(loadData, 5000)
|
|
} else {
|
|
router.push({ name: 'home' })
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1 class="title is-2">Match Page</h1>
|
|
<div class="block" v-if="matchSession">
|
|
<p>Session ID: {{ matchSession._id }}</p>
|
|
<p>Session Name: {{ matchSession.name }}</p>
|
|
<p>Session started: {{ isSessionStarted }}</p>
|
|
<p>Host: {{ amIHost }}</p>
|
|
<p>{{ sessionState || 'No session' }}</p>
|
|
</div>
|
|
<div class="block">
|
|
<p v-if="!amIHost && !readyForStart">Waiting for host to start session</p>
|
|
<button class="button" @click="setPlayerReady" v-if="isSessionStarted">
|
|
<span v-if="!readyForStart">Ready</span><span v-else>Unready</span>
|
|
</button>
|
|
<button class="button" @click="startMatch" v-if="amIHost && readyForStart">
|
|
<span>Start</span>
|
|
</button>
|
|
|
|
<button class="button" @click="cancelMatch" v-if="isSessionStarted">
|
|
<span>Cancel</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss"></style>
|