reworked event communication

src/views/GameView.vue

@@ -2,19 +2,17 @@
 import GameComponent from '@/components/GameComponent.vue'
 import { useGameStore } from '@/stores/game'
 import { storeToRefs } from 'pinia'
-import { inject, onBeforeUnmount, ref } from 'vue'
+import { onBeforeUnmount } from 'vue'
 import { onMounted } from 'vue'
 import useClipboard from 'vue-clipboard3'
 import { useRouter } from 'vue-router'
 
-const socketService: any = inject('socket')
-
 const { toClipboard } = useClipboard()
 const gameStore = useGameStore()
 const { moveToMake, canMakeMove, sessionState, gameState, playerState } = storeToRefs(gameStore)
 
 onMounted(async () => {
-  startMatch()
+  // startMatch()
 })
 
 if (!playerState?.value) {
@@ -25,25 +23,13 @@ if (!playerState?.value) {
 function makeMove(move: any) {
   moveToMake.value = move
   canMakeMove.value = false
+  console.log('makemove :>> ', move)
 }
 
 onBeforeUnmount(() => {
   // socketService.disconnect()
 })
 
-async function startMatch() {
-  const sessionId = sessionState?.value?.id
-  const seed = sessionState?.value?.seed
-  const playerId = playerState?.value?.id
-  if (sessionId) {
-    await socketService.sendMessageWithAck('startSession', {
-      sessionId: sessionId,
-      playerId: playerId,
-      seed: seed?.trim()
-    })
-  }
-}
-
 function copySeed() {
   if (sessionState?.value?.seed) toClipboard(sessionState.value.seed)
 }
@@ -63,7 +49,8 @@ function copySeed() {
         - Score: {{ sessionState?.scoreboard }}
       </p>
       <p v-if="sessionState?.id">
-        SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }}
+        SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }} - canMakeMove
+        {{ canMakeMove }}
       </p>
     </section>
     <section class="block">

src/views/HomeView.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { inject, ref } from 'vue'
+import { inject, onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useGameStore } from '@/stores/game'
 import { storeToRefs } from 'pinia'
-import { LoggingService } from '@/services/LoggingService'
+import type { LoggingService } from '@/services/LoggingService'
 import type { GameService } from '@/services/GameService'
+import type { MatchSessionDto } from '@/common/interfaces'
+import { useEventBusStore } from '@/stores/eventBus'
+import { useAuthStore } from '@/stores/auth'
 
 let seed = ref('')
 let sessionName = ref('Test Value')
 let sessionId = ref('')
+let matchSessions = ref<MatchSessionDto[]>([])
+let dataInterval: any
 
 const router = useRouter()
 const gameStore = useGameStore()
+const auth = useAuthStore()
 
 const socketService: any = inject('socket')
 const gameService: GameService = inject<GameService>('game') as GameService
@@ -19,41 +25,58 @@ const logger: LoggingService = inject<LoggingService>('logger') as LoggingServic
 
 const { readyForStart, sessionState, isSessionStarted, playerState, amIHost } =
   storeToRefs(gameStore)
+const { updateSessionState, updatePlayerState, updateGameState } = gameStore
+const { user } = storeToRefs(auth)
 
-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.sendMessageWithAck('playerReady', {
-    userId: playerState.value.id,
-    sessionId: sessionState.value.id
-  })
-  readyForStart.value = true
-}
+// function setPlayerReady() {
+//   logger.debug('Starting game')
+//   if (!sessionState.value) {
+//     logger.error('No session found')
+//     return
+//   }
+//   if (!playerState.value) {
+//     logger.error('No player found')
+//     return
+//   }
+//   socketService.sendMessage('client:set-player-ready', {
+//     userId: playerState.value.id,
+//     sessionId: sessionState.value.id
+//   })
+// }
+
+const eventBus = useEventBusStore()
+eventBus.subscribe('window-before-unload', () => {
+  logger.debug('Window before unload')
+})
 
 async function createMatch() {
   logger.debug('Creating match')
   await socketService.connect()
-  sessionId.value = await gameService.createMatch(sessionName.value, seed.value)
-  logger.debug('Match reated successfully')
+  const id = await gameService.createMatchSession(sessionName.value, seed.value)
+  logger.debug('Match created successfully')
+  router.push({ name: 'match', params: { id } })
 }
 
-async function joinMatch() {
-  const sessionId = sessionState?.value?.id
-  const playerId = playerState?.value?.id
-  if (sessionId && playerId) {
-    await socketService.sendMessageWithAck('joinSession', {
-      user: 'pepe',
-      sessionId: sessionId
-    })
-    // sessionId.value = response.sessionId
-    // playerId.value = response.playerId
+async function cancelMatch() {
+  logger.debug('Cancelling match')
+  await gameService.cancelMatchSession(sessionId.value)
+  await socketService.disconnect()
+  sessionId.value = ''
+  seed.value = ''
+  sessionName.value = ''
+  updateSessionState(undefined)
+  updatePlayerState(undefined)
+  updateGameState(undefined)
+
+  logger.debug('Match cancelled successfully')
+  loadData()
+}
+
+async function joinMatch(id: string) {
+  if (id) {
+    await socketService.connect()
+    await gameService.joinMatchSession(id)
+    router.push({ name: 'match', params: { id } })
   }
 }
 
@@ -62,12 +85,28 @@ async function startMatch() {
     router.push({ name: 'game' })
   }
 }
+
+async function loadData() {
+  matchSessions.value = await gameService.listMatchSessions()
+  sessionName.value = `Test #${matchSessions.value.length + 1}`
+}
+
+onMounted(() => {
+  logger.debug('Home view mounted')
+  loadData()
+  dataInterval = setInterval(loadData, 5000)
+})
+
+onUnmounted(() => {
+  logger.debug('Home view unmounted')
+  clearInterval(dataInterval)
+})
 </script>
 
 <template>
   <div class="block home">
     <section class="section">
-      <h1 class="title is-2">Welcome to the Player's Home Page</h1>
+      <h1 class="title is-2">Welcome to the {{ user.username }}'s Home Page</h1>
       <div class="block">
         <p>This is a protected route.</p>
         <p>{{ sessionState || 'No session' }}</p>
@@ -93,17 +132,30 @@ async function startMatch() {
       <button class="button" @click="createMatch" v-if="!isSessionStarted">
         Create Match Session
       </button>
-      <button class="button" @click="setPlayerReady" v-if="isSessionStarted">
+      <!-- <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="readyForStart">
+      </button> -->
+      <!-- <button class="button" @click="startMatch" v-if="readyForStart">
         <span>Start</span>
       </button>
+
+      <button class="button" @click="cancelMatch" v-if="isSessionStarted">
+        <span>Cancel</span>
+      </button> -->
     </section>
-    <section class="section available-sessions">
+    <section class="section available-sessions" v-if="!isSessionStarted">
       <h2 class="title is-4">Available Sessions</h2>
-      <div class="bloc">
-        <p>There are no available sessions at the moment.</p>
+      <div class="block">
+        <div v-if="matchSessions.length === 0">
+          <p>No sessions available</p>
+        </div>
+        <div v-else v-for="session in matchSessions" :key="session.id">
+          <p>{{ session.name }}</p>
+          <p>{{ session }}</p>
+          <button class="button" @click="() => joinMatch(session._id)">
+            Join ({{ session._id }})
+          </button>
+        </div>
       </div>
     </section>
   </div>

src/views/MatchView.vue

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