feat: initial Regnum project structure (Vue3 + Phaser3 + Socket.io)

client/src/views/GameView.vue

@@ -0,0 +1,83 @@
+<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>