feat: add EngineDebug panel

This commit is contained in:
Settel 2022-08-06 14:50:20 +02:00
parent fd6cfbc910
commit 123a76702f
7 changed files with 112 additions and 26 deletions

View File

@ -35,5 +35,10 @@ $topbar-background-color: #006898;
$topbar-separator-color: #ffffff; $topbar-separator-color: #ffffff;
// Alert // Alert
$alert-border: 2px solid #F0A0A0;
$alert-background-color: #A06060; $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;

View File

@ -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>

View File

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

View File

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

View File

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

View File

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

View File

@ -23,6 +23,11 @@ export const useGameinfoStore = defineStore('GameinfoStore', {
name: (state): string => state.gameInfo.name, name: (state): string => state.gameInfo.name,
state: (state): string => state.gameInfo.state, state: (state): string => state.gameInfo.state,
phase: (state): string => state.gameInfo.phase, 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: { actions: {
setGameinfo(gameInfo: unknown): void { setGameinfo(gameInfo: unknown): void {