84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<template>
|
|
<div class="game-wrapper">
|
|
<!-- UI Vue: scores et infos -->
|
|
<div class="hud">
|
|
<div class="scores">
|
|
<div v-for="(player, i) in gameStore.players" :key="i" class="score-card">
|
|
<span class="pname">{{ player.name }}</span>
|
|
<span class="pts">{{ player.score }} pts</span>
|
|
</div>
|
|
</div>
|
|
<div class="turn-info">
|
|
Tour <strong>{{ gameStore.currentTurn }}</strong> / {{ gameStore.maxTurns }}
|
|
</div>
|
|
<div v-if="gameStore.phase === 'waiting'" class="phase-label">
|
|
En attente des autres joueurs...
|
|
</div>
|
|
<div v-else-if="gameStore.phase === 'resolve'" class="phase-label">
|
|
Résolution du tour...
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Canvas Phaser -->
|
|
<div id="phaser-container" ref="phaserContainer"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useGameStore } from '@/stores/game'
|
|
import { useSocket } from '@/services/socket'
|
|
import { createGame } from '@/game/GameFactory'
|
|
|
|
const route = useRoute()
|
|
const gameStore = useGameStore()
|
|
const socket = useSocket()
|
|
const phaserContainer = ref(null)
|
|
let phaserGame = null
|
|
|
|
onMounted(() => {
|
|
phaserGame = createGame('phaser-container', socket, gameStore, route.params.roomId)
|
|
|
|
socket.on('game-state', (state) => {
|
|
gameStore.updateState(state)
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
socket.off('game-state')
|
|
if (phaserGame) phaserGame.destroy(true)
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.game-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background: #0d0500;
|
|
}
|
|
.hud {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2rem;
|
|
padding: 0.75rem 1.5rem;
|
|
background: #1a0a00;
|
|
border-bottom: 1px solid #d4a73240;
|
|
}
|
|
.scores { display: flex; gap: 1rem; }
|
|
.score-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.25rem 1rem;
|
|
border: 1px solid #d4a73250;
|
|
border-radius: 4px;
|
|
}
|
|
.pname { font-size: 0.75rem; color: #a08060; }
|
|
.pts { font-size: 1.1rem; font-weight: bold; color: #d4a732; }
|
|
.turn-info { margin-left: auto; color: #f5e6c8; }
|
|
.phase-label { color: #d4a732; font-style: italic; }
|
|
#phaser-container { flex: 1; }
|
|
</style>
|