From 512edbc62ba1b405437f3c82dfe9c7f18f57763d Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sun, 18 Feb 2024 13:42:59 +0100
Subject: [PATCH] feat: issue a warning on admin page when there're no teams
 yet

---
 client/src/components/admin/GameInfosTile.vue | 48 +++++++++++--------
 1 file changed, 29 insertions(+), 19 deletions(-)

diff --git a/client/src/components/admin/GameInfosTile.vue b/client/src/components/admin/GameInfosTile.vue
index 6781fa9..28b4d94 100644
--- a/client/src/components/admin/GameInfosTile.vue
+++ b/client/src/components/admin/GameInfosTile.vue
@@ -1,32 +1,37 @@
 <template>
-  <AdminInfoTile title="Games">
-    <table class="gameinfos-tile__table">
-      <tr class="gameinfos-tile__row">
-        <th class="gameinfos-tile__table-head">{{ $t('team-name')}}</th>
-        <th class="gameinfos-tile__table-head">{{ $t('lang')}}</th>
-        <th class="gameinfos-tile__table-head">{{ $t('state')}}</th>
-        <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': true, 'gameinfos-tile__row__disabled': game.state == 'disabled' }"
-        v-for="game in games"
-        :key="game.id"
-        @click="selectGame(game)"
-      >
+  <div>
+    <AdminInfoTile v-if="gamesCount > 0" title="Games">
+      <table class="gameinfos-tile__table">
+        <tr class="gameinfos-tile__row">
+          <th class="gameinfos-tile__table-head">{{ $t('team-name')}}</th>
+          <th class="gameinfos-tile__table-head">{{ $t('lang')}}</th>
+          <th class="gameinfos-tile__table-head">{{ $t('state')}}</th>
+          <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': true, 'gameinfos-tile__row__disabled': game.state == 'disabled' }"
+          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>
         <td class="gameinfos-tile__cell">{{ game.players.length }}</td>
         <td class="gameinfos-tile__cell">{{ getGamemastersFromGame(game).join(', ') }}</td>
-      </tr>
-    </table>
-  </AdminInfoTile>
+        </tr>
+      </table>
+    </AdminInfoTile>
+    <AdminInfoTile v-if="gamesCount == 0" :title="$t('no-games-1')">
+      <p>{{ $t('no-games-2') }}</p>
+    </AdminInfoTile>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { navigateTo } from "#app"
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import useI18n from '@/composables/useI18n'
 import useEngine from '@/composables/useEngine'
 import type { GameInfo } from '@/composables/engine.d'
@@ -37,11 +42,16 @@ const { $t } = useI18n({
   state: { en: 'State', de: 'Status' },
   'num-players': { en: '# Players', de: '# Spieler' },
   gamemasters: { en: 'Gamemaster(s)', de: 'Gamemaster(s)' },
+  'no-games-1': { en: 'The list of teams is empty', de: 'Die Liste der Teams ist noch leer'},
+  'no-games-2': { en: 'Log out and click the "create team" button on the start page.', de: 'Logge dich aus und klicke auf der Startseite auf "Team erstellen".'},
 })
 
 const { fetchGameInfos, cameo } = useEngine()
 
 const games = ref(await fetchGameInfos())
+const gamesCount = computed(() => {
+  return Object.keys(games.value).length
+})
 const getGamemastersFromGame = (game: GameInfo) => game.players.filter((player) => player.role === 'gamemaster').map((player) => player.name)
 
 const selectGame = async (game: GameInfo): Promise<void> => {