feat: add cameo feature

client/src/assets/css/colors.scss

@@ -50,6 +50,7 @@ $button-caution-hover-text-color: $button-caution-text-color;
 // Topbar
 $topbar-background-color: #006898;
 $topbar-separator-color: #ffffff;
+$topbar-cameo-background-color: #602838;
 
 // Alert
 $alert-background-color: #A06060;

client/src/components/TopBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="user.name" class="topbar__container">
+  <div v-if="user.name" class="topbar__container" :class="{ 'topbar__container__cameo': user.userInfo.isCameo }">
     <div class="topbar__username">
       {{ user.name }}
     </div>
@@ -23,9 +23,10 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter } from '#app'
+import { navigateTo } from '#app'
 import useAuth from '@/composables/useAuth';
 import useI18n from '@/composables/useI18n';
+import useEngine from '@/composables/useEngine';
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { useGameinfoStore } from "@/stores/GameinfoStore"
 
@@ -36,9 +37,16 @@ const { $t } = useI18n({
 const user = useUserinfoStore()
 const game = useGameinfoStore()
 
+const { logout } = useAuth()
+const { logoutCameo } = useEngine()
 const actionLogout = async () => {
-  await useAuth().logout()
+  if (user.userInfo.isCameo) {
-  useRouter().push('/')
+    await logoutCameo()
+    navigateTo('/admin')
+  } else {
+    await logout()
+    navigateTo('/')
+  }
 }
 </script>
 
@@ -56,6 +64,10 @@ const actionLogout = async () => {
     font-family: $font-primary;
     font-weight: bold;
     cursor: default;
+
+    &__cameo {
+      background-color: $topbar-cameo-background-color;
+    }
   }
 
   &__username,

client/src/components/admin/GameInfosTile.vue

@@ -8,7 +8,7 @@
         <th class="gameinfos-tile__table-head">{{ $t('num-players')}}</th>
         <th class="gameinfos-tile__table-head">{{ $t('gamemasters')}}</th>
       </tr>
-      <tr class="gameinfos-tile__row" v-for="game in games" :key="game.id">
+      <tr class="gameinfos-tile__row" v-for="game in games" :key="game.id" @click="selectGame(game)">
         <td class="gameinfos-tile__cell">{{ game.name }}</td>
         <td class="gameinfos-tile__cell">{{ game.lang }}</td>
         <td class="gameinfos-tile__cell">{{ game.state }}</td>
@@ -20,10 +20,11 @@
 </template>
 
 <script setup lang="ts">
+import { navigateTo } from "#app"
 import { ref } from 'vue'
 import useI18n from '@/composables/useI18n'
 import useEngine from '@/composables/useEngine'
-import { GameInfo } from '@/composables/engine.d'
+import type { GameInfo } from '@/composables/engine.d'
 
 const { $t } = useI18n({
   'team-name': { en: 'Team name', de: 'Teamname' },
@@ -33,8 +34,20 @@ const { $t } = useI18n({
   gamemasters: { en: 'Gamemaster(s)', de: 'Gamemaster(s)' },
 })
 
-const games = ref(await useEngine().fetchGameInfos())
+const { fetchGameInfos, cameo } = useEngine()
+
+const games = ref(await fetchGameInfos())
 const getGamemastersFromGame = (game: GameInfo) => game.players.filter((player) => player.role === 'gamemaster').map((player) => player.name)
+
+const selectGame = async (game: GameInfo): Promise<void> => {
+  for (const player of game.players) {
+    if (player.role === 'gamemaster') {
+      await cameo(player.authcode)
+      break
+    }
+  }
+  navigateTo('/gamemaster')
+}
 </script>
 
 <style lang="scss">

client/src/composables/engine/gameManagement.ts

@@ -56,3 +56,13 @@ export async function fetchGameInfos(this: EngineContext): Promise<GameInfos> {
   const resp = await this.callApi('/api/games') as { games: GameInfos }
   return resp.games
 }
+
+export async function cameo(this: EngineContext, authcode: string): Promise<void> {
+  await this.callApi('/api/cameo', {
+    code: authcode,
+  })
+}
+
+export async function logoutCameo(this: EngineContext): Promise<void> {
+  await this.callApi('/api/cameo')
+}

client/src/composables/useEngine.ts

@@ -3,7 +3,7 @@ import { callApi, QueryParams } from '@/composables/engine/callApi'
 import { start, stop } from '@/composables/engine/startStop'
 import { fetchUpdate } from '@/composables/engine/fetchUpdate'
 import { loadQuotes, getQuotesRef, deleteQuote, saveQuote } from '@/composables/engine/quotes'
-import { fetchGameInfo, fetchGameInfos, setGameLang, setGameName, savePlayer, deletePlayer, createGame } from '@/composables/engine/gameManagement'
+import { fetchGameInfo, fetchGameInfos, setGameLang, setGameName, savePlayer, deletePlayer, createGame, cameo, logoutCameo } from '@/composables/engine/gameManagement'
 import { collectQuotes, startGame, continueGame, resetGame, finishGame } from '@/composables/engine/gameState'
 import { saveSelection } from '@/composables/engine/play'
 import type { Quotes, GameInfo, GameInfos, PlayerEdit, Lang, CreateGameStatus } from '@/composables/engine.d'
@@ -44,6 +44,8 @@ export interface useEngine {
     savePlayer: (player: PlayerEdit) => Promise<void>
     deletePlayer: (id: string) => Promise<void>
     createGame: (name: string, teamname: string, lang: Lang) => Promise<CreateGameStatus>
+    cameo: (authcode: string) => Promise<void>
+    logoutCameo: () => Promise<void>
 }
 
 export default (): useEngine => {
@@ -84,5 +86,7 @@ export default (): useEngine => {
         savePlayer: (player: PlayerEdit) => savePlayer.apply(context, [player]),
         deletePlayer: (id: string) => deletePlayer.apply(context, [id]),
         createGame: (name: string, teamname: string, lang: Lang) => createGame.apply(context, [name, teamname, lang]),
+        cameo: (authcode: string) => cameo.apply(context,[authcode]),
+        logoutCameo: () => logoutCameo.apply(context),
     }
 }