feat: store game state in Pinia

client/src/components/TopBar.vue

@@ -1,11 +1,19 @@
 <template>
-  <div v-if="userInfo" class="topbar__container">
+  <div v-if="user.name" class="topbar__container">
     <div class="topbar__username">
-      {{ userInfo.name }}
+      {{ user.name }}
     </div>
     <div class="topbar__separator" />
     <div class="topbar__actionbar">
-      {{ userInfo.role }}
+      <div v-if="user.isAdmin" class="topbar__actionbar__admin">
+        Admin
+      </div>
+      <div v-if="user.isGamemaster" class="topbar__actionbar__gamemaster">
+        Collect Quotes | Start | Continue | Idle | Finish
+      </div>
+      <div v-else class="topbar__actionbar__user">
+        {{ game.name }}
+      </div>
     </div>
     <div class="topbar__separator" />
     <div class="topbar__logout-button-container">
@@ -18,8 +26,10 @@
 import { useRouter } from '#app'
 import useAuth from '@/composables/useAuth';
 import { useUserinfoStore } from "@/stores/UserinfoStore"
+import { useGameinfoStore } from "@/stores/GameinfoStore"
 
-const { userInfo } = useUserinfoStore()
+const user = useUserinfoStore()
+const game = useGameinfoStore()
 
 const actionLogout = async () => {
   await useAuth().logout()

client/src/composables/engine/fetchUpdate.ts

@@ -1,4 +1,5 @@
 import { useUserinfoStore } from "@/stores/UserinfoStore"
+import { useGameinfoStore } from "@/stores/GameinfoStore"
 
 export async function fetchUpdate() {
     if (this.shouldStop || !this.isActive) {
@@ -21,11 +22,13 @@ export async function fetchUpdate() {
             throw Error('unexpected response from /api/sync')
         }
 
-        // TODO: parse answer
         this.version = parseInt(response.version)
         this.isConnected.value = true
         this.retry.value = 0
         
+        const gameInfoStore = useGameinfoStore()
+        gameInfoStore.setGameinfo(response.game)
+
         // apply rate limit
         const now = new Date()
         const last = this.lastFetched.splice(0, 1)

client/src/pages/play.vue

@@ -5,7 +5,13 @@
       connection to server broken
       <div v-if="retry >= 0">retrying {{'...'.slice(0, retry % 4)}}</div>
     </AlertBox>
-    wohoo!
+    <p>wohoo!</p>
+    <p>
+      {{game.id}}<br />
+      {{game.name}}<br />
+      {{game.state}}<br />
+      {{game.phase}}<br />
+    </p>
   </div>
 </template>
 
@@ -14,7 +20,9 @@ import { navigateTo } from '#app'
 import useAuth from '@/composables/useAuth';
 import useEngine from '@/composables/useEngine';
 import { onMounted, onBeforeUnmount } from 'vue';
+import { useGameinfoStore } from "@/stores/GameinfoStore"
 
+// ensure user is authenticated
 const { authenticateAndLoadUserInfo } = useAuth()
 try {
   await authenticateAndLoadUserInfo()
@@ -25,6 +33,8 @@ try {
 const { start: startEngine, stop: stopEngine, isConnected, retry } = useEngine()
 onMounted(() => startEngine())
 onBeforeUnmount(() => stopEngine())
+
+const game = useGameinfoStore()
 </script>
 
 <style lang="scss">

client/src/stores/GameinfoStore.ts

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+
+export type Gameinfo = {
+    id: string
+    name: string
+    state: string
+    phase: string
+}
+
+export const useGameinfoStore = defineStore('GameinfoStore', {
+  state: () => {
+    return {
+      gameInfo: {
+            id: '',
+            name: '',
+            state: '',
+            phase: '',
+      } as Gameinfo,
+    }
+  },
+  getters: {
+    id: (state): string => state.gameInfo.id,
+    name: (state): string => state.gameInfo.name,
+    state: (state): string => state.gameInfo.state,
+    phase: (state): string => state.gameInfo.phase,
+  },
+  actions: {
+    setGameinfo(gameInfo: unknown): void {
+     this.gameInfo = gameInfo 
+    },
+  },
+})

client/src/stores/UserinfoStore.ts

@@ -1,21 +1,34 @@
 import { defineStore } from 'pinia'
 
+export type Userinfo = {
+  id: string
+  name: string
+  role: '' | 'player' | 'gamemaster' | 'admin'
+  game: string
+  lang: 'de' | 'en'
+  isCameo: string 
+}
+
 export const useUserinfoStore = defineStore('UserinfoStore', {
   state: () => {
     return {
-      userInfo: null,
+      userInfo: {
+        id: '',
+        name: '',
+        role: '',
+        game: '',
+        lang: 'en',
+        isCameo: '',
+      } as Userinfo,
     }
   },
   getters: {
-    isAdmin(): boolean {
-      return this.userInfo && this.userInfo.role === 'admin'
-    },
-    isGamemaster(): boolean {
-      return this.userInfo && ( this.userInfo.role === 'gamemaster' || this.userInfo.role === 'admin' )
-    },
-    gameId(): string | null {
-      return this.userInfo?.game
-    },
+    id: (state): string => state.userInfo.id,
+    name: (state): string => state.userInfo.name,
+    lang: (state): string => state.userInfo.lang,
+    isAdmin: (state): boolean => state.userInfo.role === 'admin',
+    isGamemaster: (state): boolean => state.userInfo.role === 'gamemaster',
+    gameId: (state): string => state.userInfo.game,
   },
   actions: {
     setUserInfo(userInfo: unknown): void {