0.1.12

src/views/GameView.vue

@@ -9,7 +9,7 @@ import { useRouter } from 'vue-router'
 
 const { toClipboard } = useClipboard()
 const gameStore = useGameStore()
-const { moveToMake, canMakeMove, sessionState, gameState, playerState } = storeToRefs(gameStore)
+const { moveToMake, canMakeMove, sessionState, playerState } = storeToRefs(gameStore)
 
 onMounted(async () => {
   // startMatch()
@@ -39,7 +39,7 @@ function copySeed() {
 
 <template>
   <div class="block">
-    <section class="block info">
+    <!-- <section class="block info">
       <p>Running: {{ sessionState?.sessionInProgress }}</p>
       <p>Seed: {{ sessionState?.seed }}</p>
       <p>
@@ -50,7 +50,7 @@ function copySeed() {
       <p>Score: {{ sessionState?.scoreboard }}</p>
       <p v-if="sessionState?.id">SessionID: {{ sessionState.id }}</p>
       <p>PlayerID: {{ playerState?.id }}</p>
-    </section>
+    </section> -->
     <section class="block">
       <div class="game-container">
         <GameComponent :playerId="playerState?.id" :canMakeMove="canMakeMove" @move="makeMove" />

src/views/HomeView.vue

@@ -8,7 +8,7 @@ import type { GameService } from '@/services/GameService'
 import type { MatchSessionOptions, MatchSessionDto } from '@/common/interfaces'
 import { useEventBusStore } from '@/stores/eventBus'
 import { useAuthStore } from '@/stores/auth'
-import { copyToclipboard } from '@/common/helpers'
+import { copyToclipboard, wait } from '@/common/helpers'
 import { useGameOptionsStore } from '@/stores/gameOptions'
 import MatchConfiguration from '@/components/MatchConfiguration.vue'
 import { useI18n } from 'vue-i18n'
@@ -127,14 +127,20 @@ const canStart = computed(() => {
   return (!options?.teamed && allReady) || (options?.teamed && !!teamedWith.value && allReady)
 })
 
+const isMultiplayer = computed(
+  () => (sessionState?.value?.options?.numPlayers || gameOptions.value?.numPlayers || 0) > 1,
+)
+
 async function loadData() {
+  loadingSessions.value = true
   const listResponse = await gameService.listMatchSessions()
+  loadingSessions.value = false
   matchSessions.value = listResponse.data
 }
 
 onMounted(() => {
-  // loadData()
-  // dataInterval = setInterval(loadData, 5000)
+  loadData()
+  dataInterval = setInterval(loadData, 5000)
 })
 
 onUnmounted(() => {
@@ -145,31 +151,34 @@ function copy(sessionSeed: string) {
   copyToclipboard(sessionSeed)
 }
 
-let tabs = ref<any[]>([
-  { label: t('create-session'), id: 'create-tab', active: true, disabled: false },
-  { label: t('join-a-multiplayer-session'), id: 'join-tab', active: false, disabled: false },
-  { label: t('tournaments'), id: 'torunaments-tab', active: false, disabled: true },
-])
-
-const selectedTab = computed(() => tabs.value.find((t) => t.active)?.id)
+let selectedTab = ref('create-tab')
 const isCreateTab = computed(() => selectedTab.value === 'create-tab')
 const isJoinTab = computed(() => selectedTab.value === 'join-tab')
 const isTournamentTab = computed(() => selectedTab.value === 'torunaments-tab')
+
+const tabs = computed<any[]>((): any => [
+  { label: t('create-session'), id: 'create-tab', disabled: false },
+  {
+    label: t('join-a-multiplayer-session', matchSessions.value.length),
+    id: 'join-tab',
+    disabled: matchSessions.value.length <= 0,
+  },
+  { label: t('tournaments'), id: 'torunaments-tab', disabled: true },
+])
+
 async function tabClick(tab: any) {
-  tabs.value.forEach((t) => (t.active = t === tab))
-  if (tab.id === 'join-tab') {
-    loadingSessions.value = true
-    await loadData()
-    dataInterval = setInterval(loadData, 5000)
-  } else {
-    clearInterval(dataInterval)
-  }
+  selectedTab.value = tab.id
 }
 
 function onCreateMatch(options: MatchSessionOptions) {
-  console.log('Creating match', options)
   createMatch(options)
 }
+
+async function onStartSingleMatch(options: MatchSessionOptions) {
+  await createMatch(options)
+  await wait(1000)
+  startMatch()
+}
 </script>
 
 <template>
@@ -185,7 +194,7 @@ function onCreateMatch(options: MatchSessionOptions) {
             <li
               v-bind:key="tab.label"
               v-for="tab in tabs"
-              :class="{ 'is-active': tab.active, 'is-disabled': tab.disabled }"
+              :class="{ 'is-active': selectedTab === tab.id, 'is-disabled': tab.disabled }"
             >
               <a @click="() => tabClick(tab)">{{ tab.label }}</a>
             </li>
@@ -194,7 +203,10 @@ function onCreateMatch(options: MatchSessionOptions) {
         <!-- Tabs End -->
         <!-- Match Configuration -->
         <section class="section" v-if="isCreateTab">
-          <MatchConfiguration @create-match="onCreateMatch" />
+          <MatchConfiguration
+            @create-match="onCreateMatch"
+            @start-single-match="onStartSingleMatch"
+          />
         </section>
         <!-- Match Configuration End -->
         <!-- Join a Multiplayer Session -->
@@ -244,8 +256,7 @@ function onCreateMatch(options: MatchSessionOptions) {
         <section class="section" v-if="isTournamentTab"></section>
         <!-- Tournaments End -->
       </div>
-
-      <div class="block" v-if="isSessionStarted">
+      <div class="block" v-if="isSessionStarted && isMultiplayer">
         <h2 class="title is-4">{{ sessionState?.name }}</h2>
         <h6 class="title is-size-5">Players</h6>
         <div v-for="player in sessionState?.players" :key="player.id">

src/views/LandingView.vue

@@ -3,11 +3,14 @@ import { AuthenticationService } from '@/services/AuthenticationService'
 import { inject, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { emit, listen } from '@tauri-apps/api/event'
 
 const router = useRouter()
 const username = ref('')
 const password = ref('')
+const errorLogin = ref(false)
 const { t } = useI18n()
+const isTauri = window.__TAURI_METADATA__ ? true : false
 
 const authService = inject<AuthenticationService>('auth')
 
@@ -16,7 +19,7 @@ async function login() {
     await authService?.login(username.value, password.value)
     router.push({ name: 'home' })
   } catch (error) {
-    alert(t('invalid-username-or-password'))
+    errorLogin.value = true
   }
   // if (username.value === 'admin' && password.value === 'password') {
   // localStorage.setItem('token', 'true')
@@ -25,11 +28,43 @@ async function login() {
   //   alert('Invalid username or password')
   // }
 }
+
+// // Listen for update available event
+// listen('tauri://update-available', () => {
+//   console.log('Update is available!')
+//   // You can show a dialog or notify the user here
+// })
+
+// // Listen for update not available event
+// listen('tauri://update-not-available', () => {
+//   console.log('No update available.')
+// })
+
+// // Listen for update download progress
+// listen('tauri://update-download-progress', (event) => {
+//   console.log('Update download progress:', event.payload)
+//   // You can update a progress bar here
+// })
+
+// // Listen for update download finished
+// listen('tauri://update-download-finished', () => {
+//   console.log('Update download finished.')
+//   // You can notify the user to restart the app
+// })
+
+function checkForUpdates() {
+  emit('tauri://update')
+}
 </script>
 
 <template>
   <div class="login">
     <h1 class="title">{{ $t('login') }}</h1>
+    <div class="message is-danger">
+      <div class="message-body" v-if="errorLogin">
+        {{ $t('invalid-username-or-password') }}
+      </div>
+    </div>
     <form class="form" @submit.prevent="login">
       <div class="field">
         <label class="label">{{ $t('username') }}</label>
@@ -63,5 +98,6 @@ async function login() {
         </div> -->
       </div>
     </form>
+    <a href="#" @click="checkForUpdates" v-if="isTauri">Update</a>
   </div>
 </template>

src/views/MatchView.vue

@@ -2,14 +2,17 @@
 import type { MatchSessionDto } from '@/common/interfaces'
 import type { GameService } from '@/services/GameService'
 import type { LoggingService } from '@/services/LoggingService'
+import ScoreboardTableComponent from '@/components/ScoreboardTableComponent.vue'
 import { inject, onBeforeMount, ref, toRaw } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useGameStore } from '@/stores/game'
 
 const route = useRoute()
 const router = useRouter()
+const gameStore = useGameStore()
 const gameService: GameService = inject<GameService>('game') as GameService
 const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
-
+const { updateSessionState } = gameStore
 let sessionId: string
 let matchSession = ref<MatchSessionDto | undefined>(undefined)
 
@@ -28,57 +31,45 @@ onBeforeMount(() => {
     router.push({ name: 'home' })
   }
 })
+
+function gotoHome() {
+  updateSessionState(undefined)
+  router.push({ name: 'home' })
+}
 </script>
 
 <template>
   <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('win-type') }}</span>
-        <span class="is-size-5 ml-4">{{ matchSession?.options.winType }}</span>
-      </p>
-      <p class="mb-4">
-        <span class="title is-5">{{ $t('points-to-win') }}</span>
-        <span class="is-size-5 ml-4">{{ matchSession?.options.winTarget }}</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 class="level">
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="heading">{{ $t('winner') }}</p>
+          <p class="title is-size-3">{{ matchSession?.matchWinner?.name }}</p>
+        </div>
       </div>
-    </div>
-    <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 class="level-item has-text-centered">
+        <div>
+          <p class="heading">{{ $t('win-type') }}</p>
+          <p class="title">{{ matchSession?.options.winType }}</p>
+        </div>
+      </div>
+      <div class="level-item has-text-centered">
+        <div>
+          <p class="heading">{{ $t('points-to-win') }}</p>
+          <p class="title">{{ matchSession?.options.winTarget }}</p>
         </div>
       </div>
     </div>
+    <ScoreboardTableComponent
+      :games="matchSession?.gameSummaries"
+      :final-score="matchSession?.scoreboard"
+      :winner="matchSession?.matchWinner"
+    />
     <div class="buttons">
-      <button class="button is-primary" @click="router.push({ name: 'home' })">
+      <button class="button is-primary" @click="gotoHome">
         {{ $t('back') }}
       </button>
     </div>