working flow

src/views/GameView.vue

@@ -31,13 +31,15 @@ onBeforeUnmount(() => {
 })
 
 function copySeed() {
-  if (sessionState?.value?.seed) toClipboard(sessionState.value.seed)
+  if (sessionState?.value?.seed) {
+    toClipboard(sessionState.value.seed)
+  }
 }
 </script>
 
 <template>
   <div class="block">
-    <section class="block">
+    <section class="block info">
       <p>
         Running: {{ sessionState?.sessionInProgress }} Seed: {{ sessionState?.seed }}
         <button @click="copySeed">Copy!</button>
@@ -99,56 +101,15 @@ function copySeed() {
 * {
   box-sizing: border-box;
 }
-
-.action-select {
-  display: flex;
-  gap: 16px;
-  align-items: start;
-  justify-items: center;
-}
-
 .game-container {
   display: flex;
   align-items: start;
   justify-content: center;
 }
-
-.control {
-  padding: 8px;
-  margin-right: 4px;
-}
-
-textarea {
-  width: 100%;
-  height: 110px;
-  resize: none;
-}
-#response,
-#status {
-  height: 180px;
-}
-
-.tiles-container {
-  display: flex;
-  gap: 4px;
-  flex-flow: row wrap;
-  align-content: flex-start;
-}
-
-.board-container {
+.info {
   position: absolute;
-  height: 600px;
-  padding: 10px;
-  width: calc(50% - 50px);
-  background-color: var(--pico-form-element-background-color);
-}
-
-.hand-container {
-  position: fixed;
-  bottom: 0;
-  height: 200px;
-  padding: 10px;
-  width: calc(50% - 50px);
-  background-color: var(--pico-form-element-background-color);
+  top: 0;
+  left: 0;
+  z-index: 20;
 }
 </style>

src/views/HomeView.vue

@@ -8,8 +8,9 @@ import type { GameService } from '@/services/GameService'
 import type { MatchSessionDto } from '@/common/interfaces'
 import { useEventBusStore } from '@/stores/eventBus'
 import { useAuthStore } from '@/stores/auth'
+import { copyToclipboard } from '@/common/helpers'
 
-let seed = ref('')
+let seed = ref<string>('')
 let sessionName = ref('Test Value')
 let sessionId = ref('')
 let matchSessions = ref<MatchSessionDto[]>([])
@@ -79,16 +80,19 @@ async function joinMatch(id: string) {
     router.push({ name: 'match', params: { id } })
   }
 }
-
-async function startMatch() {
-  if (sessionState.value && sessionState.value.id) {
-    router.push({ name: 'game' })
+async function deleteMatch(id: string) {
+  if (id) {
+    await socketService.connect()
+    await gameService.cancelMatchSession(id)
+    loadData()
   }
 }
 
 async function loadData() {
-  matchSessions.value = await gameService.listMatchSessions()
-  sessionName.value = `Test #${matchSessions.value.length + 1}`
+  const listResponse = await gameService.listMatchSessions()
+  console.log('listResponse :>> ', listResponse)
+  matchSessions.value = listResponse.data
+  sessionName.value = `Test #${listResponse.pagination.total + 1}`
 }
 
 onMounted(() => {
@@ -101,6 +105,11 @@ onUnmounted(() => {
   logger.debug('Home view unmounted')
   clearInterval(dataInterval)
 })
+
+function copy(sessionSeed: string) {
+  seed.value = sessionSeed
+  copyToclipboard(sessionSeed)
+}
 </script>
 
 <template>
@@ -132,16 +141,6 @@ onUnmounted(() => {
       <button class="button" @click="createMatch" v-if="!isSessionStarted">
         Create Match Session
       </button>
-      <!-- <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">
-        <span>Start</span>
-      </button>
-
-      <button class="button" @click="cancelMatch" v-if="isSessionStarted">
-        <span>Cancel</span>
-      </button> -->
     </section>
     <section class="section available-sessions" v-if="!isSessionStarted">
       <h2 class="title is-4">Available Sessions</h2>
@@ -149,12 +148,19 @@ onUnmounted(() => {
         <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 v-else class="grid is-col-min-12">
+          <div class="cell" v-for="session in matchSessions" :key="session.id">
+            <p class="title is-6">{{ session.name }}</p>
+            <p>ID: {{ session._id }}</p>
+            <p>Players: {{ session.players.length }}</p>
+            <p>
+              Seed: {{ session.seed }}
+              <button @click="() => copy(session.seed)">Copy</button>
+            </p>
+            <p>Status: {{ session.status }}</p>
+            <button class="button" @click="() => joinMatch(session._id)">Join</button>
+            <button class="button" @click="() => deleteMatch(session._id)">Delete</button>
+          </div>
         </div>
       </div>
     </section>

src/views/MatchView.vue

@@ -70,7 +70,9 @@ eventBus.subscribe('window-before-unload', async () => {
   await cancelMatch()
 })
 
-eventBus.subscribe('server:match-starting', () => {
+eventBus.subscribe('server:match-starting', (data) => {
+  const session = data.sessionState as MatchSessionDto
+  updateSessionState(session)
   logger.debug('Match starting')
   router.push({ name: 'game' })
 })