progress

2024-07-16 02:14:50 +02:00
parent 3755f2857a
commit 5392dce264
31 changed files with 883 additions and 183 deletions
--- a/src/views/GameView.vue
+++ b/src/views/GameView.vue
@ -40,20 +40,16 @@ function copySeed() {
 <template>
  <div class="block">
    <section class="block info">
-      <p>
-        Running: {{ sessionState?.sessionInProgress }} Seed: {{ sessionState?.seed }}
-        <button @click="copySeed">Copy!</button>
-      </p>
+      <p>Running: {{ sessionState?.sessionInProgress }}</p>
+      <p>Seed: {{ sessionState?.seed }}</p>
      <p>
        FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
          gameState?.currentPlayer?.name
        }}
-        - Score: {{ sessionState?.scoreboard }}
-      </p>
-      <p v-if="sessionState?.id">
-        SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }} - canMakeMove
-        {{ canMakeMove }}
      </p>
+      <p>Score: {{ sessionState?.scoreboard }}</p>
+      <p v-if="sessionState?.id">SessionID: {{ sessionState.id }}</p>
+      <p>PlayerID: {{ playerState?.id }}</p>
    </section>
    <section class="block">
      <div class="game-container">
@ -107,9 +103,12 @@ function copySeed() {
  justify-content: center;
 }
 .info {
-  position: absolute;
-  top: 0;
-  left: 0;
+  color: white;
+  opacity: 0.1;
+  position: fixed;
+  top: 200px;
+  left: 10px;
  z-index: 20;
+  pointer-events: none;
 }
 </style>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -9,25 +9,27 @@ import type { MatchSessionDto } from '@/common/interfaces'
 import { useEventBusStore } from '@/stores/eventBus'
 import { useAuthStore } from '@/stores/auth'
 import { copyToclipboard } from '@/common/helpers'
+import { useGameOptionsStore } from '@/stores/gameOptions'

+let background = ref<string>('green')
+let teamed = ref<boolean>(false)
 let seed = ref<string>('')
 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 gameOptionsStore = useGameOptionsStore()

 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, amIHost } =
-  storeToRefs(gameStore)
-const { updateSessionState, updatePlayerState, updateGameState } = gameStore
+const { sessionState, isSessionStarted, playerState, amIHost } = storeToRefs(gameStore)
 const { user } = storeToRefs(auth)
+const { gameOptions } = storeToRefs(gameOptionsStore)

 // function setPlayerReady() {
 //   logger.debug('Starting game')
@ -53,26 +55,12 @@ eventBus.subscribe('window-before-unload', () => {
 async function createMatch() {
  logger.debug('Creating match')
  await socketService.connect()
+  gameOptions.value = { background: background.value }
  const id = await gameService.createMatchSession(sessionName.value, seed.value)
  logger.debug('Match created successfully')
  router.push({ name: 'match', params: { id } })
 }

-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()
@ -90,19 +78,16 @@ async function deleteMatch(id: string) {

 async function loadData() {
  const listResponse = await gameService.listMatchSessions()
-  console.log('listResponse :>> ', listResponse)
  matchSessions.value = listResponse.data
  sessionName.value = `Test #${listResponse.pagination.total + 1}`
 }

 onMounted(() => {
-  logger.debug('Home view mounted')
  loadData()
  dataInterval = setInterval(loadData, 5000)
 })

 onUnmounted(() => {
-  logger.debug('Home view unmounted')
  clearInterval(dataInterval)
 })

@ -117,32 +102,58 @@ function copy(sessionSeed: string) {
    <section class="section">
      <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>
-        <p>{{ playerState || 'No player state' }}</p>
-        <p>Session started: {{ isSessionStarted }}</p>
-        <p>Host: {{ amIHost }}</p>
-      </div>
-      <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 class="field">
+          <label class="label">Name</label>
+          <div class="control">
+            <input type="text" class="input" v-model="sessionName" placeholder="Session Name" />
          </div>
        </div>
+        <div class="field">
+          <label class="label">Seed</label>
+          <div class="control">
+            <input
+              type="text"
+              class="input"
+              style="margin-bottom: 0"
+              v-model="seed"
+              placeholder="Type the session seed here!"
+            />
+          </div>
+        </div>
+
+        <div class="grid">
+          <div class="cell">
+            <div class="field">
+              <label for="background" class="label">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>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <div class="field">
+              <div class="control">
+                <label for="teamed" class="checkbox">
+                  <input v-model="teamed" name="teamed" type="checkbox" />
+                  Crossed game ({{ teamed }})
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="cell"></div>
+        </div>
      </div>
-      <button class="button" @click="createMatch" v-if="!isSessionStarted">
-        Create Match Session
-      </button>
+      <div class="block" v-if="!isSessionStarted"></div>
+
+      <button class="button is-primary" @click.once="createMatch">Create Match Session</button>
    </section>
-    <section class="section available-sessions" v-if="!isSessionStarted">
+    <section class="section available-sessions">
      <h2 class="title is-4">Available Sessions</h2>
      <div class="block">
        <div v-if="matchSessions.length === 0">
@ -150,16 +161,27 @@ function copy(sessionSeed: string) {
        </div>
        <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 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>
+                  Seed: {{ session.seed }}
+                  <button class="button is-small" @click="() => copy(session.seed)">Copy</button>
+                </p>
+                <p>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>
+                </p>
+                <p class="card-footer-item">
+                  <a href="#" @click.once.prevent="() => deleteMatch(session._id)"> Delete </a>
+                </p>
+              </div>
+            </div>
          </div>
        </div>
      </div>
--- a/src/views/MatchView.vue
+++ b/src/views/MatchView.vue
@ -4,6 +4,7 @@ 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 { useRoute, useRouter } from 'vue-router'
@ -12,6 +13,7 @@ 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
@ -22,6 +24,7 @@ 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')
@ -35,7 +38,7 @@ async function setPlayerReady() {
  }
  await socketService.sendMessage('client:set-player-ready', {
    userId: playerState.value.id,
-    sessionId: sessionState.value.id
+    sessionId: sessionState.value.id,
  })
 }

@ -45,7 +48,7 @@ async function startMatch() {
  if (sessionId) {
    await socketService.sendMessageWithAck('client:start-session', {
      sessionId: sessionId,
-      playerId: playerId
+      playerId: playerId,
    })
  }
 }
@ -89,7 +92,7 @@ onBeforeMount(() => {

 <template>
  <div>
-    <h1 class="title is-2">Match Page</h1>
+    <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>