feat: add EngineDebug panel

client/src/assets/css/colors.scss

@@ -35,5 +35,10 @@ $topbar-background-color: #006898;
 $topbar-separator-color: #ffffff;
 
 // Alert
-$alert-border: 2px solid #F0A0A0;
 $alert-background-color: #A06060;
+$alert-border: 2px solid #F0A0A0;
+
+// Engine Debug
+$debug-background-color: lighten($background-primary-color, 10%);
+$debug-border: none;
+$debug-text-color: $text-primary-color;

client/src/components/EngineDebug.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="enginedebug__container">
+    <pre class="enginedebug__json">{{ userJson }}</pre>
+    <pre class="enginedebug__json">{{ engineJson }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+import { useEngineStore } from "@/stores/EngineStore"
+
+const user = useUserinfoStore()
+const engine = useEngineStore()
+const userJson = computed(() => JSON.stringify(user.userInfo, null, 2))
+const engineJson = computed(() => JSON.stringify(engine.json, null, 2))
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.enginedebug {
+  &__container {
+    width: 100%;
+    max-height: 100%;
+    border: $debug-border;
+    background-color: $debug-background-color;
+    overflow: auto;
+  }
+
+  &__json {
+    padding: 0 0 0 1em;
+    color: $debug-text-color;
+    font-size: 10px;
+  }
+}
+</style>

client/src/components/TopBar.vue

@@ -11,7 +11,7 @@
       <div v-if="user.isGamemaster" class="topbar__actionbar__gamemaster">
         Collect Quotes | Start | Continue | Idle | Finish
       </div>
-      <div v-else class="topbar__actionbar__user">
+      <div v-else class="topbar__actionbar__player">
         {{ game.name }}
       </div>
     </div>
@@ -62,6 +62,11 @@ const actionLogout = async () => {
 
   &__actionbar {
     flex-grow: 1;
+    
+    &__player {
+      font-size: 24px;
+      text-align: center;
+    }
   }
 
   &__separator {

client/src/composables/engine/fetchUpdate.ts

@@ -1,3 +1,4 @@
+import { useEngineStore } from "@/stores/EngineStore"
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { useGameinfoStore } from "@/stores/GameinfoStore"
 
@@ -26,8 +27,8 @@ export async function fetchUpdate() {
         this.isConnected.value = true
         this.retry.value = 0
         
-        const gameInfoStore = useGameinfoStore()
-        gameInfoStore.setGameinfo(response.game)
+        useEngineStore().setJson(response)
+        useGameinfoStore().setGameinfo(response.game)
 
         // apply rate limit
         const now = new Date()

client/src/pages/play.vue

@@ -3,30 +3,29 @@
     <TopBar />
     <AlertBox v-if="!isConnected" mode="alert">
       connection to server broken
-      <div v-if="retry >= 0">retrying {{'...'.slice(0, retry % 4)}}</div>
+      <div v-if="retry >= 0">retrying {{ '...'.slice(0, retry % 4) }}</div>
     </AlertBox>
+    <div class="page-play__playfield-container">
+      <div class="page-play__playfield-content">
         <p>wohoo!</p>
-    <p>
-      {{game.id}}<br />
-      {{game.name}}<br />
-      {{game.state}}<br />
-      {{game.phase}}<br />
-    </p>
+      </div>
+      <EngineDebug v-if="showEngineDebug" class="page-play__playfield-debug" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { navigateTo } from '#app'
+import { navigateTo, useRoute } from '#app'
+import { computed } from 'vue'
 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()
-} catch(e) {
+} catch (e) {
   navigateTo('/', { replace: true })
 }
 
@@ -34,14 +33,34 @@ const { start: startEngine, stop: stopEngine, isConnected, retry } = useEngine()
 onMounted(() => startEngine())
 onBeforeUnmount(() => stopEngine())
 
-const game = useGameinfoStore()
+const route = useRoute()
+const showEngineDebug = computed(() => route.hash.indexOf('debug') > -1)
 </script>
 
 <style lang="scss">
 .page-play {
   &__container {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
   }
+
+  &__playfield {
+    &-container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+    }
+
+    &-content {
+      flex-grow: 1;
+      padding: 0 2em;
+    }
+
+    &-debug {
+      max-width: 350px;
+    }
+  }
 }
 </style>

client/src/stores/EngineStore.ts

@@ -0,0 +1,14 @@
+import { defineStore } from 'pinia'
+
+export const useEngineStore = defineStore('EngineStore', {
+  state: () => {
+    return {
+      json: {},
+    }
+  },
+  actions: {
+    setJson(json: unknown): void {
+      this.json = json
+    },
+  },
+})

client/src/stores/GameinfoStore.ts

@@ -23,6 +23,11 @@ export const useGameinfoStore = defineStore('GameinfoStore', {
     name: (state): string => state.gameInfo.name,
     state: (state): string => state.gameInfo.state,
     phase: (state): string => state.gameInfo.phase,
+    isCollect: (state): boolean => state.gameInfo.state === 'collect',
+    isIdle: (state): boolean => state.gameInfo.state === 'idle',
+    isReadySet: (state): boolean => state.gameInfo.state === 'ready-set',
+    isPlay: (state): boolean => state.gameInfo.state === 'play',
+    isFinal: (state): boolean => state.gameInfo.state === 'final',
   },
   actions: {
     setGameinfo(gameInfo: unknown): void {