feat: store game state in Pinia

This commit is contained in:
Settel 2022-08-06 13:06:51 +02:00
parent cc136c4c2c
commit fd6cfbc910
5 changed files with 84 additions and 16 deletions

View File

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

View File

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

View File

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

View File

@ -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
},
},
})

View File

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