feat: add gamemaster page (WIP)

client/src/assets/css/colors.scss

@@ -92,6 +92,11 @@ $highscores-border-color: #00a0e0;
 $highscores-background-color: $background-primary-color;
 $highscores-text-color: #ffffff;
 
+// Admin Tile
+$admin-tile-background-color: #384048;
+$admin-tile-border: none;
+$admin-tile-text-color: #ffffff;
+
 // Engine Debug
 $debug-background-color: lighten($background-primary-color, 10%);
 $debug-border: none;

client/src/components/AdminTile.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="admin-tile__container">
+    <div class="admin-tile__title">{{ title }}</div>
+    <div class="admin-tile__body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string,
+}>()
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.admin-tile {
+  &__container {
+    width: 360px;
+    margin: 40px;
+    padding: 16px 30px;
+    background-color: $admin-tile-background-color;
+    border: $admin-tile-border;
+    color: $admin-tile-text-color;
+  }
+
+  &__title {
+    margin-bottom: 16px;
+    font-size: 24px;
+    font-family: $font-primary;
+  }
+
+  &__body {
+    font-size: 16px;
+    font-family: $font-secondary;
+  }
+}
+</style>

client/src/components/GameControls.vue

@@ -1,20 +1,29 @@
 <template>
   <div class="game-controls__container">
-    <Button class="game-controls__control" :border="!disabled.collect" :disabled="disabled.collect" @click="collect">{{ $t('collect-quotes') }}</Button>
+    <template v-if="gamemasterMode">
-    <Button class="game-controls__control" :border="!disabled.start" :disabled="disabled.start" @click="start">{{ $t('start') }}</Button>
+      <Button class="game-controls__control game-controls__control__end" :border="false" :disabled="false" @click="backToPlay">{{ $t('back') }}</Button>
-    <Button class="game-controls__control" :border="!disabled.cont" :disabled="disabled.cont" @click="cont">{{ $t('continue') }}</Button>
+    </template>
-    <Button class="game-controls__control" :border="!disabled.idle" :disabled="disabled.idle" @click="idle">{{ $t('idle') }}</Button>
+    <template v-else>
-    <Button class="game-controls__control" :border="!disabled.finish" :disabled="disabled.finish" @click="finish">{{ $t('finish') }}</Button>
+      <Button class="game-controls__control" :border="!disabled.collect" :disabled="disabled.collect" @click="collect">{{ $t('collect-quotes') }}</Button>
+      <Button class="game-controls__control" :border="!disabled.start" :disabled="disabled.start" @click="start">{{ $t('start') }}</Button>
+      <Button class="game-controls__control" :border="!disabled.cont" :disabled="disabled.cont" @click="cont">{{ $t('continue') }}</Button>
+      <Button class="game-controls__control" :border="!disabled.idle" :disabled="disabled.idle" @click="idle">{{ $t('idle') }}</Button>
+      <Button class="game-controls__control" :border="!disabled.finish" :disabled="disabled.finish" @click="finish">{{ $t('finish') }}</Button>
+      <Button class="game-controls__control game-controls__control__end" :border="false" :disabled="false" @click="goToAdmin">{{ $t('admin') }}</Button>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useRouter, useRoute } from '#app'
 import { computed } from 'vue'
 import useEngine from '@/composables/useEngine'
 import useI18n from '@/composables/useI18n'
-import { useGameinfoStore } from "@/stores/GameinfoStore"
+import { useGameinfoStore } from '@/stores/GameinfoStore'
 
 const { $t } = useI18n({
+  'back': { en: 'back', de: 'zurück' },
+  'admin': { en: 'Admin interface', de: 'Admin interface' },
   'collect-quotes': { en: 'Collect Quotes', de: 'Aussagen sammeln' },
   'start': { en: 'Start', de: 'Start' },
   'continue': { en: 'Continue', de: 'Weiter' },
@@ -22,6 +31,8 @@ const { $t } = useI18n({
   'finish': { en: 'Highscores', de: 'Highscores' },
 })
 
+const gamemasterMode = computed(() => useRoute().path === '/gamemaster')
+
 const game = useGameinfoStore()
 const engine = useEngine()
 const disabled = computed(() => {
@@ -39,9 +50,13 @@ const start = async () => await engine.startGame()
 const cont = async () => await engine.continueGame()
 const idle = async () => await engine.resetGame()
 const finish = async () => await engine.finishGame()
+const goToAdmin = () => { useRouter().push('/gamemaster') }
+const backToPlay = () => { useRouter().push('/play') }
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .game-controls {
   &__container {
     display: flex;
@@ -50,6 +65,17 @@ const finish = async () => await engine.finishGame()
 
   &__control {
     font-size: 18px;
+
+    &__end {
+      margin-left: auto;
+      color: $text-primary-color;
+      font-size: 16px;
+      font-family: $font-primary;
+
+      &:hover {
+        color: $text-primary-hover-color;
+      }
+    }
   }
 }
 </style>

client/src/components/Lobby.vue

@@ -33,6 +33,7 @@ const { $t } = useI18n({
     font-family: $font-secondary;
     font-size: 24px;
     text-align: center;
+    color: $text-primary-color;
   }
 
   &__players-list {

client/src/layouts/default.vue

@@ -4,6 +4,15 @@
   </div>
 </template>
 
+<script setup lang="ts">
+import { useHead } from '#app'
+
+useHead({
+  title: 'Know Your Teammates!',
+  charset: 'utf-8',
+})
+</script>
+
 <style lang="scss">
 @import '@/assets/css/colors.scss';
 @import '@/assets/css/fonts.scss';
@@ -22,11 +31,13 @@ body,
 body {
   background-color: $background-primary-color;
   font-family: $font-primary;
+
+  // override Firefox DownloadStatusBar's setting
+  margin-bottom: 0 !important;
 }
 
 a {
   text-decoration: none;
   color: inherit;
 }
-
 </style>

client/src/pages/gamemaster.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="gamemaster__container">
+    <TopBar />
+    <AdminTile title="Info">
+      <div class="gamemaster__info">... info ...</div>
+    </AdminTile>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { navigateTo } from '#app'
+import useAuth from '@/composables/useAuth';
+import TopBar from '../components/TopBar.vue';
+
+// ensure user is authenticated
+const { authenticateAndLoadUserInfo } = useAuth()
+try {
+  await authenticateAndLoadUserInfo()
+} catch (e) {
+  navigateTo('/', { replace: true })
+}
+</script>
+
+<style lang="scss">
+.gamemaster {
+  &__container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>