match page (initial) i18n

src/views/HomeView.vue

@@ -28,9 +28,11 @@ const socketService: any = inject('socket')
 const gameService: GameService = inject<GameService>('game') as GameService
 const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
 
-const { sessionState, isSessionStarted, playerState, amIHost } = storeToRefs(gameStore)
+const { sessionState, isSessionStarted, playerState, amIHost, readyForStart } =
+  storeToRefs(gameStore)
 const { user } = storeToRefs(auth)
 const { gameOptions } = storeToRefs(gameOptionsStore)
+const { updateSessionState, updatePlayerState, updateGameState } = gameStore
 
 // function setPlayerReady() {
 //   logger.debug('Starting game')
@@ -57,11 +59,60 @@ async function createMatch() {
   logger.debug('Creating match')
   await socketService.connect()
   gameOptions.value = { background: background.value }
-  const id = await gameService.createMatchSession(sessionName.value, seed.value)
+  const sessionOptions = {
+    pointsToWin: pointsToWin.value,
+  }
+  const id = await gameService.createMatchSession(sessionName.value, seed.value, sessionOptions)
   logger.debug('Match created successfully')
-  router.push({ name: 'match', params: { id } })
+  // router.push({ name: 'match', params: { id } })
 }
 
+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')
+  if (sessionState?.value?.id) {
+    await gameService.cancelMatchSession(sessionState?.value?.id)
+    updateSessionState(undefined)
+    updatePlayerState(undefined)
+    updateGameState(undefined)
+
+    logger.debug('Match cancelled successfully')
+    router.push({ name: 'home' })
+  }
+}
+
+eventBus.subscribe('server:match-starting', (data) => {
+  const session = data.sessionState as MatchSessionDto
+  updateSessionState(session)
+  router.push({ name: 'game', params: { id: session.id } })
+})
+
 async function joinMatch(id: string) {
   if (id) {
     await socketService.connect()
@@ -80,7 +131,7 @@ async function deleteMatch(id: string) {
 async function loadData() {
   const listResponse = await gameService.listMatchSessions()
   matchSessions.value = listResponse.data
-  sessionName.value = `Test #${listResponse.pagination.total + 1}`
+  sessionName.value = `Test #${Date.now()}`
 }
 
 onMounted(() => {
@@ -99,41 +150,47 @@ function copy(sessionSeed: string) {
 </script>
 
 <template>
-  <div class="block home">
+  <div class="container home">
     <section class="section">
-      <h1 class="title is-2">Welcome to the {{ user.username }}'s Home Page</h1>
-      <div class="block">
+      <h1 class="title is-2">
+        {{ $t('welcome-to-the-user-username-s-home-page', [user.username]) }}
+      </h1>
+      <div class="block" v-if="!isSessionStarted">
         <div class="field">
-          <label class="label">Name</label>
+          <label class="label">{{ $t('name') }}</label>
           <div class="control">
-            <input type="text" class="input" v-model="sessionName" placeholder="Session Name" />
+            <input
+              type="text"
+              class="input"
+              v-model="sessionName"
+              placeholder="$t('session-name-placeholder')"
+            />
           </div>
         </div>
         <div class="field">
-          <label class="label">Seed</label>
+          <label class="label">{{ $t('seed') }}</label>
           <div class="control">
             <input
               type="text"
               class="input"
               style="margin-bottom: 0"
               v-model="seed"
-              placeholder="Type the session seed here!"
+              placeholder="$t('seed-placeholder')"
             />
           </div>
         </div>
-
         <div class="grid">
           <div class="cell">
             <div class="field">
-              <label for="background" class="label">Background color</label>
+              <label for="background" class="label">{{ $t('background-color') }}</label>
               <div class="control">
                 <div class="select">
                   <select v-model="background" name="background">
-                    <option value="green">Green Fabric</option>
-                    <option value="gray">Gray Fabric</option>
-                    <option value="blue">Blue Fabric</option>
-                    <option value="yellow">Yellow Fabric</option>
-                    <option value="red">Red Fabric</option>
+                    <option value="green">{{ $t('green-fabric') }}</option>
+                    <option value="gray">{{ $t('gray-fabric') }}</option>
+                    <option value="blue">{{ $t('blue-fabric') }}</option>
+                    <option value="yellow">{{ $t('yellow-fabric') }}</option>
+                    <option value="red">{{ $t('red-fabric') }}</option>
                   </select>
                 </div>
               </div>
@@ -142,14 +199,14 @@ function copy(sessionSeed: string) {
               <div class="control">
                 <label for="teamed" class="checkbox">
                   <input v-model="teamed" name="teamed" type="checkbox" />
-                  Crossed game ({{ teamed }})
+                  {{ $t('crossed-game-teamed', [teamed]) }}
                 </label>
               </div>
             </div>
           </div>
           <div class="cell">
             <div class="field">
-              <label for="pointsToWin" class="label">Points to win</label>
+              <label for="pointsToWin" class="label">{{ $t('points-to-win') }}</label>
               <div class="control">
                 <div class="select">
                   <select v-model="pointsToWin" name="pointsToWin">
@@ -164,37 +221,58 @@ function copy(sessionSeed: string) {
             </div>
           </div>
         </div>
+        <div class="buttons">
+          <button class="button is-primary" @click.once="createMatch">
+            {{ $t('create-match-session') }}
+          </button>
+        </div>
       </div>
-      <div class="block" v-if="!isSessionStarted"></div>
+      <div class="buttons" v-if="isSessionStarted">
+        <button class="button" @click="setPlayerReady">
+          <span v-if="!readyForStart">{{ $t('ready') }}</span
+          ><span v-else>{{ $t('unready') }}</span>
+        </button>
+        <button class="button" @click="startMatch" v-if="amIHost && readyForStart">
+          <span>{{ $t('start') }}</span>
+        </button>
 
-      <button class="button is-primary" @click.once="createMatch">Create Match Session</button>
+        <button class="button" @click="cancelMatch">
+          <span>{{ $t('cancel') }}</span>
+        </button>
+      </div>
     </section>
     <section class="section available-sessions">
-      <h2 class="title is-4">Available Sessions</h2>
+      <h2 class="title is-4">{{ $t('available-sessions') }}</h2>
       <div class="block">
         <div v-if="matchSessions.length === 0">
-          <p>No sessions available</p>
+          <p>{{ $t('no-sessions-available') }}</p>
         </div>
         <div v-else class="grid is-col-min-12">
           <div class="cell" v-for="session in matchSessions" :key="session.id">
             <div class="card">
               <div class="card-content">
                 <p class="title is-6">{{ session.name }}</p>
-                <p>ID: {{ session._id }}</p>
-                <p>Players: {{ session.players.length }}</p>
+                <p>{{ $t('id-session-_id', [session._id]) }}</p>
+                <p>{{ $t('players-session-players-length', [session.players.length]) }}</p>
                 <p>
-                  Seed: {{ session.seed }}
-                  <button class="button is-small" @click="() => copy(session.seed)">Copy</button>
+                  {{ $t('seed-session-seed', [session.seed]) }}
+                  <button class="button is-small" @click="() => copy(session.seed)">
+                    {{ $t('copy') }}
+                  </button>
                 </p>
-                <p>Status: {{ session.status }}</p>
+                <p>{{ $t('status-session-status', [session.status]) }}</p>
                 <div class="buttons is-centered mt-4"></div>
               </div>
               <div class="card-footer">
                 <p class="card-footer-item">
-                  <a href="#" @click.once.prevent="() => joinMatch(session._id)"> Join </a>
+                  <a href="#" @click.once.prevent="() => joinMatch(session._id)">
+                    {{ $t('join') }}
+                  </a>
                 </p>
                 <p class="card-footer-item">
-                  <a href="#" @click.once.prevent="() => deleteMatch(session._id)"> Delete </a>
+                  <a href="#" @click.once.prevent="() => deleteMatch(session._id)">
+                    {{ $t('delete') }}
+                  </a>
                 </p>
               </div>
             </div>

src/views/LandingView.vue

@@ -2,10 +2,12 @@
 import { AuthenticationService } from '@/services/AuthenticationService'
 import { inject, ref } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
 const username = ref('')
 const password = ref('')
+const { t } = useI18n()
 
 const authService = inject<AuthenticationService>('auth')
 
@@ -14,7 +16,7 @@ async function login() {
     await authService?.login(username.value, password.value)
     router.push({ name: 'home' })
   } catch (error) {
-    alert('Invalid username or password')
+    alert(t('invalid-username-or-password'))
   }
   // if (username.value === 'admin' && password.value === 'password') {
   // localStorage.setItem('token', 'true')
@@ -27,24 +29,34 @@ async function login() {
 
 <template>
   <div class="login">
-    <h1>Login</h1>
+    <h1 class="title">{{ $t('login') }}</h1>
     <form class="form" @submit.prevent="login">
       <div class="field">
-        <label class="label">Username</label>
+        <label class="label">{{ $t('username') }}</label>
         <div class="control">
-          <input class="input" type="text" v-model="username" placeholder="Username" />
+          <input
+            class="input"
+            type="text"
+            v-model="username"
+            :placeholder="t('username-placeholder')"
+          />
         </div>
       </div>
       <div class="field">
-        <label class="label">Username</label>
+        <label class="label">{{ $t('password') }}</label>
         <div class="control">
-          <input class="input" type="password" v-model="password" placeholder="Password" />
+          <input
+            class="input"
+            type="password"
+            v-model="password"
+            :placeholder="t('password-placeholder')"
+          />
         </div>
       </div>
 
       <div class="field is-grouped">
         <div class="control">
-          <button class="button is-primary" type="submit">Login</button>
+          <button class="button is-primary" type="submit">{{ $t('login-button') }}</button>
         </div>
         <!-- <div class="control">
           <button class="button">Cancel</button>

src/views/MatchView.vue

@@ -2,88 +2,28 @@
 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 { useGameOptionsStore } from '@/stores/gameOptions'
-import { storeToRefs } from 'pinia'
-import { inject, onBeforeMount, ref } from 'vue'
+import { inject, onBeforeMount, ref, toRaw } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 const route = useRoute()
 const router = useRouter()
-const gameStore = useGameStore()
-const eventBus = useEventBusStore()
-const gameOptionsStore = useGameOptionsStore()
-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
-const { gameOptions } = storeToRefs(gameOptionsStore)
-
-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)
+  matchSession.value = (await gameService.getMatchSession(sessionId)) as MatchSessionDto
+  console.log('matchSession.value :>> ', toRaw(matchSession.value))
 }
 
-eventBus.subscribe('window-before-unload', async () => {
-  logger.debug('Window before unload')
-  await cancelMatch()
-})
-
-eventBus.subscribe('server:match-starting', (data) => {
-  const session = data.sessionState as MatchSessionDto
-  updateSessionState(session)
-  logger.debug('Match starting')
-  router.push({ name: 'game' })
-})
-
 onBeforeMount(() => {
   sessionId = route.params.id as string
+  console.log('sessionId :>> ', sessionId)
+  loadData()
   if (sessionId) {
-    setInterval(loadData, 5000)
+    // setInterval(loadData, 5000)
   } else {
     router.push({ name: 'home' })
   }
@@ -91,27 +31,50 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div>
-    <h1 class="title is-2">Match Page {{ isSessionStarted }}</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 class="container">
+    <h1 class="title is-1">{{ $t('match-page') }}</h1>
+    <h2 class="title is-3">{{ matchSession?.name }}</h2>
+    <div class="block mt-6">
+      <p class="mb-4">
+        <span class="title is-5">{{ $t('winner') }}</span>
+        <span class="is-size-5 ml-4">{{ matchSession?.matchWinner?.name }}</span>
+      </p>
+      <p class="mb-4">
+        <span class="title is-5">{{ $t('points-to-win') }}</span>
+        <span class="is-size-5 ml-4">{{ matchSession?.pointsToWin }}</span>
+      </p>
+      <h3 class="title is-5">{{ $t('final-scoreboard') }}</h3>
+      <div v-bind:key="$index" v-for="(score, $index) in matchSession?.scoreboard">
+        <p class="">
+          <span class="title is-5">{{ score.name }}</span>
+          <span class="is-size-5 ml-4">{{ score.score }}</span>
+        </p>
+      </div>
     </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 class="grid">
+      <div
+        class="cell"
+        v-bind:key="$index"
+        v-for="(summary, $index) in matchSession?.gameSummaries"
+      >
+        <div class="block mt-6">
+          <h3 class="title is-5">{{ $t('round-index-1', [$index + 1]) }}</h3>
+          <p class="mb-4">
+            <span class="title is-5">{{ $t('winner') }}</span>
+            <span class="is-size-5 ml-4">{{ summary.winner?.name }}</span>
+          </p>
+          <h4 class="title is-6">{{ $t('scoreboard') }}</h4>
+          <div v-bind:key="$index" v-for="(gameScore, $index) in summary.score">
+            <p class="">
+              <span class="title is-5">{{ gameScore.name }}</span>
+              <span class="is-size-5 ml-4">{{ gameScore.score }}</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section">
+      <!-- <div>{{ matchSession }}</div> -->
     </div>
   </div>
 </template>