changes

src/views/GameView.vue

@@ -60,7 +60,7 @@ function copySeed() {
         FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
           gameState?.currentPlayer?.name
         }}
-        - Score: {{ gameState?.scoreboard }}
+        - Score: {{ sessionState?.scoreboard }}
       </p>
       <p v-if="sessionState?.id">
         SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }}

src/views/HomeView.vue

@@ -1,21 +1,24 @@
 <script setup lang="ts">
 import { inject, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import useClipboard from 'vue-clipboard3'
-
 import { useGameStore } from '@/stores/game'
 import { storeToRefs } from 'pinia'
 import { LoggingService } from '@/services/LoggingService'
+import type { GameService } from '@/services/GameService'
 
 let seed = ref('')
+let sessionName = ref('Test Value')
+let sessionId = ref('')
 
 const router = useRouter()
 const gameStore = useGameStore()
-const { toClipboard } = useClipboard()
+
 const socketService: any = inject('socket')
+const gameService: GameService = inject<GameService>('game') as GameService
 const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
 
-const { readyForStart, sessionState, isSessionStarted, playerState } = storeToRefs(gameStore)
+const { readyForStart, sessionState, isSessionStarted, playerState, amIHost } =
+  storeToRefs(gameStore)
 
 async function setPlayerReady() {
   logger.debug('Starting game')
@@ -23,8 +26,12 @@ async function setPlayerReady() {
     logger.error('No session found')
     return
   }
+  if (!playerState.value) {
+    logger.error('No player found')
+    return
+  }
   await socketService.sendMessageWithAck('playerReady', {
-    user: 'arhuako',
+    userId: playerState.value.id,
     sessionId: sessionState.value.id
   })
   readyForStart.value = true
@@ -32,7 +39,9 @@ async function setPlayerReady() {
 
 async function createMatch() {
   logger.debug('Creating match')
-  socketService.sendMessageWithAck('createSession', { user: 'arhuako' })
+  await socketService.connect()
+  sessionId.value = await gameService.createMatch(sessionName.value, seed.value)
+  logger.debug('Match reated successfully')
 }
 
 async function joinMatch() {
@@ -62,11 +71,24 @@ async function startMatch() {
       <div class="block">
         <p>This is a protected route.</p>
         <p>{{ sessionState || 'No session' }}</p>
-        <p>{{ playerState?.ready || 'No player state' }}</p>
+        <p>{{ playerState || 'No player state' }}</p>
         <p>Session started: {{ isSessionStarted }}</p>
+        <p>Host: {{ amIHost }}</p>
       </div>
-      <div class="block">
-        <input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
+      <div class="block" v-if="!isSessionStarted">
+        <div class="grid">
+          <div class="cell">
+            <input
+              class="input"
+              style="margin-bottom: 0"
+              v-model="sessionName"
+              placeholder="Session Name"
+            />
+          </div>
+          <div class="cell">
+            <input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
+          </div>
+        </div>
       </div>
       <button class="button" @click="createMatch" v-if="!isSessionStarted">
         Create Match Session