From cab1a91cc2cd6d80989ed0a876de2a452e50c179 Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sat, 3 Sep 2022 21:41:30 +0200
Subject: [PATCH] feat: add gamemaster page (WIP)

---
 client/src/components/AlertBox.vue            |  4 +-
 .../src/components/{ => admin}/AdminTile.vue  |  2 +-
 client/src/components/admin/GameInfoTile.vue  | 45 +++++++++++++++++++
 client/src/components/admin/PlayersTile.vue   | 33 ++++++++++++++
 client/src/composables/engine/fetchUpdate.ts  | 13 ++++++
 client/src/composables/engine/startStop.ts    |  5 ++-
 client/src/composables/useAlert.ts            | 23 ++++++++++
 client/src/layouts/default.vue                |  6 +++
 client/src/pages/gamemaster.vue               | 15 ++++---
 client/src/pages/play.vue                     | 16 ++-----
 10 files changed, 138 insertions(+), 24 deletions(-)
 rename client/src/components/{ => admin}/AdminTile.vue (97%)
 create mode 100644 client/src/components/admin/GameInfoTile.vue
 create mode 100644 client/src/components/admin/PlayersTile.vue
 create mode 100644 client/src/composables/useAlert.ts

diff --git a/client/src/components/AlertBox.vue b/client/src/components/AlertBox.vue
index 98a2a46..16044da 100644
--- a/client/src/components/AlertBox.vue
+++ b/client/src/components/AlertBox.vue
@@ -6,9 +6,6 @@
     </div>
 </template>
 
-<script setup>
-</script>
-
 <style lang="scss">
 @import '~/assets/css/components';
 
@@ -31,6 +28,7 @@
         border-radius: 10px;
         background-color: $alert-background-color;
         font-size: 24px;
+        color: $text-primary-color;
     }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/components/AdminTile.vue b/client/src/components/admin/AdminTile.vue
similarity index 97%
rename from client/src/components/AdminTile.vue
rename to client/src/components/admin/AdminTile.vue
index 94bb4bb..27f5357 100644
--- a/client/src/components/AdminTile.vue
+++ b/client/src/components/admin/AdminTile.vue
@@ -18,7 +18,7 @@ defineProps<{
 
 .admin-tile {
   &__container {
-    width: 360px;
+    width: 300px;
     margin: 40px;
     padding: 16px 30px;
     background-color: $admin-tile-background-color;
diff --git a/client/src/components/admin/GameInfoTile.vue b/client/src/components/admin/GameInfoTile.vue
new file mode 100644
index 0000000..20920c6
--- /dev/null
+++ b/client/src/components/admin/GameInfoTile.vue
@@ -0,0 +1,45 @@
+<template>
+  <AdminTile title="Game">
+    <table>
+      <tr>
+        <td>{{ $t('name') }}:</td>
+        <td>{{ game.name }}</td>
+        <td>
+          <div class="gameinfo-tile__edit-game-name" @click="editName"></div>
+        </td>
+      </tr>
+      <tr>
+        <td>{{ $t('language') }}:</td>
+        <td>{{ user.lang }}</td>
+        <td>
+          <div class="gameinfo-tile__edit-lang" @click="editLang"></div>
+        </td>
+      </tr>
+    </table>
+  </AdminTile>
+</template>
+
+<script setup lang="ts">
+import useI18n from '@/composables/useI18n'
+import { useUserinfoStore } from "@/stores/UserinfoStore"
+import { useGameinfoStore } from "@/stores/GameinfoStore"
+
+const { $t } = useI18n({
+  name: { en: 'Name', de: 'Name' },
+  language: { en: 'Language', de: 'Sprache' },
+})
+
+const game = useGameinfoStore()
+const user = useUserinfoStore()
+const editName = () => { alert('not yet implemented') }
+const editLang = () => { alert('not yet implemented') }
+</script>
+
+<style lang="scss">
+.gameinfo-tile {
+  &__container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/src/components/admin/PlayersTile.vue b/client/src/components/admin/PlayersTile.vue
new file mode 100644
index 0000000..a51904a
--- /dev/null
+++ b/client/src/components/admin/PlayersTile.vue
@@ -0,0 +1,33 @@
+<template>
+  <AdminTile title="Players">
+    <table>
+      <tr>
+        <th>{{ $t('name') }}:</th>
+        <th>{{ $t('num-quotes') }}</th>
+        <th>{{ $t('score') }}</th>
+        <th>{{ $t('last-logged-in') }}</th>
+      </tr>
+    </table>
+  </AdminTile>
+</template>
+
+<script setup lang="ts">
+import useI18n from '@/composables/useI18n'
+
+const { $t } = useI18n({
+  name: { en: 'Name', de: 'Name' },
+  'num-quotes': { en: '# quotes', de: '# Quotes' },
+  'score': { en: 'Score', de: 'Score' },
+  'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' },
+})
+
+</script>
+
+<style lang="scss">
+.gameinfo-tile {
+  &__container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/client/src/composables/engine/fetchUpdate.ts b/client/src/composables/engine/fetchUpdate.ts
index cc84886..bd8f9fc 100644
--- a/client/src/composables/engine/fetchUpdate.ts
+++ b/client/src/composables/engine/fetchUpdate.ts
@@ -4,6 +4,8 @@ import { useGameinfoStore } from "@/stores/GameinfoStore"
 import { useRoundStore } from "@/stores/RoundStore"
 import { usePlayersStore } from "@/stores/PlayersStore"
 import { EngineContext } from '@/composables/useEngine'
+import useAlert from '@/composables/useAlert'
+import useI18n from '@/composables/useI18n'
 
 type EngineResponse = {
     version: string,
@@ -17,8 +19,14 @@ type EngineResponse = {
     },
 }
 
+const { $t } = useI18n({
+    'connection-broken': { en: 'connection to server broken.', de: 'Verbindung zum Server ist unterbrochen.' },
+    'retrying': { en: 'retrying', de: 'verbinde erneut'},
+  })
+  
 export async function fetchUpdate(this: EngineContext) {
     if (this.shouldStop || !this.isActive) {
+        useAlert().clearAlert()
         this.isActive = false
         this.shouldStop = false
         console.debug('engine stopped')
@@ -41,6 +49,7 @@ export async function fetchUpdate(this: EngineContext) {
         this.isConnected.value = true
         this.retry.value = 0
         
+        useAlert().clearAlert()
         useEngineStore().setJson(response)
         useGameinfoStore().setGameinfo(response.game)
         useRoundStore().setRound(response.game.round)
@@ -57,6 +66,10 @@ export async function fetchUpdate(this: EngineContext) {
     } catch (e: any) {
         this.isConnected.value = false
         this.retry.value++
+        useAlert().setAlert([
+            $t('connection-broken'), 
+            this.retry.value > 0 ? $t('retrying') + '...'.slice(0, this.retry.value % 4) : ''
+        ])
 
         if (e.response) {
             // callApi() threw an exception
diff --git a/client/src/composables/engine/startStop.ts b/client/src/composables/engine/startStop.ts
index d4d02ba..b3f7e1b 100644
--- a/client/src/composables/engine/startStop.ts
+++ b/client/src/composables/engine/startStop.ts
@@ -1,5 +1,6 @@
 import { useUserinfoStore } from "@/stores/UserinfoStore"
 import { EngineContext } from '@/composables/useEngine'
+import useAlert from '@/composables/useAlert'
 
 export function start(this: EngineContext): void {
     if (this.isActive && !this.shouldStop) {
@@ -11,16 +12,18 @@ export function start(this: EngineContext): void {
         return
     }
 
+    useAlert().clearAlert()
     this.isActive = true
     this.shouldStop = false
     this.isConnected.value = true
-    
+
     this.fetchUpdate()
     console.log('start engine')
 }
 
 export function stop(this: EngineContext): void {
     if (this.isActive) {
+        useAlert().clearAlert()
         this.shouldStop = true
         this.isConnected.value = true
         console.log('shut down engine')
diff --git a/client/src/composables/useAlert.ts b/client/src/composables/useAlert.ts
new file mode 100644
index 0000000..d0b9b7b
--- /dev/null
+++ b/client/src/composables/useAlert.ts
@@ -0,0 +1,23 @@
+import { Ref, ref } from 'vue'
+
+export type AlertMessages = Array<string>
+
+export interface useAlert {
+  setAlert(message: AlertMessages): void
+  clearAlert(): void
+  getAlertMessagesRef(): Ref<AlertMessages>
+}
+
+const alertMessages = ref([] as AlertMessages)
+
+export default (): useAlert => {
+  return {
+    setAlert: (message: AlertMessages): void => {
+      alertMessages.value = message
+    },
+    clearAlert: ():void => {
+      alertMessages.value = []
+    },
+    getAlertMessagesRef: (): Ref<AlertMessages> => alertMessages
+  }
+}
diff --git a/client/src/layouts/default.vue b/client/src/layouts/default.vue
index 1fa568f..b057c27 100644
--- a/client/src/layouts/default.vue
+++ b/client/src/layouts/default.vue
@@ -1,16 +1,22 @@
 <template>
   <div class="layout-default">
+    <AlertBox v-if="alertMessages.length > 0">
+      <div v-for="msg in alertMessages" :key="msg">{{ msg }}</div>
+    </AlertBox>
     <slot />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useHead } from '#app'
+import useAlert from '@/composables/useAlert'
 
 useHead({
   title: 'Know Your Teammates!',
   charset: 'utf-8',
 })
+
+const alertMessages = useAlert().getAlertMessagesRef()
 </script>
 
 <style lang="scss">
diff --git a/client/src/pages/gamemaster.vue b/client/src/pages/gamemaster.vue
index e4d606c..59113c2 100644
--- a/client/src/pages/gamemaster.vue
+++ b/client/src/pages/gamemaster.vue
@@ -1,16 +1,15 @@
 <template>
   <div class="gamemaster__container">
     <TopBar />
-    <AdminTile title="Info">
-      <div class="gamemaster__info">... info ...</div>
-    </AdminTile>
-  </div>
+    <AdminGameInfoTile />
+</div>
 </template>
 
 <script setup lang="ts">
 import { navigateTo } from '#app'
-import useAuth from '@/composables/useAuth';
-import TopBar from '../components/TopBar.vue';
+import { onMounted, onBeforeUnmount } from 'vue'
+import useAuth from '@/composables/useAuth'
+import useEngine from '@/composables/useEngine'
 
 // ensure user is authenticated
 const { authenticateAndLoadUserInfo } = useAuth()
@@ -19,6 +18,10 @@ try {
 } catch (e) {
   navigateTo('/', { replace: true })
 }
+
+const { start: startEngine, stop: stopEngine } = useEngine()
+onMounted(() => startEngine())
+onBeforeUnmount(() => stopEngine())
 </script>
 
 <style lang="scss">
diff --git a/client/src/pages/play.vue b/client/src/pages/play.vue
index 10097b1..d94be79 100644
--- a/client/src/pages/play.vue
+++ b/client/src/pages/play.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="page-play__container">
     <TopBar />
-    <AlertBox v-if="!isConnected" mode="alert">
-      {{ $t('connection-broken') }}
-      <div v-if="retry >= 0">{{ $t('retrying') }} {{ '...'.slice(0, retry % 4) }}</div>
-    </AlertBox>
     <div class="page-play__playfield-container">
       <div class="page-play__playfield-content">
         <Lobby v-if="game.state === 'idle'" />
@@ -20,17 +16,11 @@
 
 <script setup lang="ts">
 import { navigateTo, useRoute } from '#app'
-import { computed, onMounted, onBeforeUnmount } from 'vue';
+import { computed, onMounted, onBeforeUnmount, watch } from 'vue';
 import useAuth from '@/composables/useAuth';
 import useEngine from '@/composables/useEngine';
-import { useGameinfoStore } from "@/stores/GameinfoStore"
 import useI18n from '@/composables/useI18n'
-
-const { $t } = useI18n({
-  'connection-broken': { en: 'connection to server broken.', de: 'Verbindung zum Server ist unterbrochen.' },
-  'retrying': { en: 'retrying', de: 'verbinde erneut'},
-})
-
+import { useGameinfoStore } from "@/stores/GameinfoStore"
 
 // ensure user is authenticated
 const { authenticateAndLoadUserInfo } = useAuth()
@@ -40,7 +30,7 @@ try {
   navigateTo('/', { replace: true })
 }
 
-const { start: startEngine, stop: stopEngine, isConnected, retry } = useEngine()
+const { start: startEngine, stop: stopEngine } = useEngine()
 onMounted(() => startEngine())
 onBeforeUnmount(() => stopEngine())