129 lines
3.3 KiB
Vue
129 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import type { GameDto, PlayerDto } from '@/common/interfaces'
|
|
import { onMounted, onUnmounted, ref, inject } from 'vue'
|
|
import { Game } from '@/game/Game'
|
|
import { useGameStore } from '@/stores/game'
|
|
import { useEventBusStore } from '@/stores/eventBus'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useGameOptionsStore } from '@/stores/gameOptions'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
let sessionId: string
|
|
const socketService: any = inject('socket')
|
|
|
|
const gameStore = useGameStore()
|
|
const gameOptionsStore = useGameOptionsStore()
|
|
const eventBus = useEventBusStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const { playerState, sessionState } = storeToRefs(gameStore)
|
|
const { updateGameState } = gameStore
|
|
const { gameOptions } = storeToRefs(gameOptionsStore)
|
|
|
|
const minScreenWidth = 800
|
|
const minScreenHeight = 700
|
|
|
|
let screenWidth = window.innerWidth - 10
|
|
let screenHeight = window.innerHeight - 10
|
|
|
|
if (screenWidth < minScreenWidth) screenWidth = minScreenWidth
|
|
if (screenHeight < minScreenHeight) screenHeight = minScreenHeight
|
|
|
|
const boardScale = screenWidth > 1200 ? 0.8 : screenWidth > 1200 ? 0.7 : 0.6
|
|
|
|
let appEl = ref<HTMLElement | null>(null)
|
|
|
|
const game = new Game(
|
|
{
|
|
width: screenWidth,
|
|
height: screenHeight,
|
|
boardScale,
|
|
handScale: 1,
|
|
background: gameOptions.value?.background || 'green',
|
|
},
|
|
socketService,
|
|
playerState.value?.id || '',
|
|
sessionState.value?.id || '',
|
|
)
|
|
|
|
// watch(
|
|
// () => gameStore.gameState,
|
|
// async (value: GameDto | undefined) => {
|
|
// if (value === undefined) return
|
|
// await game.board?.setState(value)
|
|
// }
|
|
// )
|
|
|
|
// watch(
|
|
// () => gameStore.sessionState,
|
|
// (value: MatchSessionDto | undefined) => {
|
|
// if (value === undefined) return
|
|
|
|
// // logger.debug('gameSessionState-------------------------------------- :>> ', value)
|
|
// }
|
|
// )
|
|
|
|
// watch(
|
|
// () => gameStore.playerState,
|
|
// (value: PlayerDto | undefined) => {
|
|
// if (value === undefined) return
|
|
// game.hand.update(value as PlayerDto)
|
|
// }
|
|
// )
|
|
|
|
onMounted(async () => {
|
|
sessionId = route.params.id as string
|
|
if (appEl.value === null) return
|
|
const canvas = await game.setup()
|
|
appEl.value.appendChild(canvas)
|
|
await game.preload()
|
|
await game.start(sessionState?.value?.players)
|
|
|
|
game.on('game:finish-click', () => {
|
|
game.destroy()
|
|
router.push({ name: 'match', params: { id: sessionId } })
|
|
})
|
|
|
|
eventBus.subscribe('server:game-finished', (data) => {
|
|
game.gameFinished(data)
|
|
})
|
|
|
|
eventBus.subscribe('server:server-player-move', (data) => {
|
|
game.serverPlayerMove(data, playerState.value?.id ?? '')
|
|
})
|
|
|
|
eventBus.subscribe('game:player-turn-started', (data: any) => {
|
|
// game.setCanMakeMove(true)
|
|
})
|
|
|
|
eventBus.subscribe('server:hand-dealt', (data: { player: PlayerDto; gameState: GameDto }) => {
|
|
game.hand.update(data.player)
|
|
game.updateOtherHands(data.gameState.players)
|
|
})
|
|
|
|
eventBus.subscribe('server:next-turn', (gameState: GameDto) => {
|
|
updateGameState(gameState)
|
|
game.setNextPlayer(gameState)
|
|
})
|
|
|
|
eventBus.subscribe('server:match-finished', (data) => {
|
|
game.matchFinished(data)
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
//game.destroy()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div ref="appEl" class="game-app"></div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.game-app {
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
</style>
|