feat: show players in gamemaster view

client/src/assets/css/colors.scss

@@ -96,6 +96,10 @@ $highscores-text-color: #ffffff;
 $admin-tile-background-color: #384048;
 $admin-tile-border: none;
 $admin-tile-text-color: #ffffff;
+$admin-tile-bottom-icon-background-color: $admin-tile-background-color;
+$admin-tile-bottom-icon-border: 1px solid #ffffff;
+$admin-tile-bottom-icon-hover-background-color: #485058;
+$admin-tile-bottom-icon-hover-border: $admin-tile-bottom-icon-border;
 
 // Engine Debug
 $debug-background-color: lighten($background-primary-color, 10%);

client/src/assets/icons/add.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
+<polygon points="42,19 23,19 23,0 19,0 19,19 0,19 0,23 19,23 19,42 23,42 23,23 42,23 " style="stroke:#ffffff;fill:#ffffff;"/>
+</svg>

client/src/assets/icons/crown.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 359.615 359.615" style="enable-background:new 0 0 359.615 359.615;" xml:space="preserve">
+<g>
+	<polygon style="fill:#F4CA60;" points="296.117,10.685 256.147,359.615 103.467,359.615 63.497,10.685 89.667,88.325 
+		121.647,183.185 179.807,10.685 237.967,183.185 269.947,88.325 	"/>
+	<polygon style="fill:#F4C647;" points="256.525,30.438 230.161,359.615 129.454,359.615 103.089,30.438 152.264,183.185 
+		179.807,10.685 207.351,183.185 	"/>
+	<polygon style="fill:#FCD983;" points="269.947,88.325 228.327,359.615 131.288,359.615 89.667,88.325 121.647,183.185 
+		179.807,10.685 237.967,183.185 	"/>
+	<circle style="fill:#EA535E;" cx="63.497" cy="17.638" r="17.638"/>
+	<circle style="fill:#EA6C7C;" cx="103.089" cy="33.538" r="14.638"/>
+	<circle style="fill:#EA6C7C;" cx="256.525" cy="33.538" r="14.638"/>
+	<circle style="fill:#EA535E;" cx="296.118" cy="17.638" r="17.638"/>
+	<g>
+		<ellipse style="fill:#EA535E;" cx="106.645" cy="285.615" rx="6.319" ry="12.638"/>
+		<ellipse style="fill:#EA535E;" cx="252.97" cy="285.615" rx="6.319" ry="12.638"/>
+		<circle style="fill:#EA535E;" cx="140.067" cy="285.615" r="12.638"/>
+		<circle style="fill:#EA535E;" cx="179.807" cy="285.615" r="12.638"/>
+		<circle style="fill:#EA535E;" cx="219.548" cy="285.615" r="12.638"/>
+	</g>
+	<circle style="fill:#EA535E;" cx="179.807" cy="17.638" r="17.638"/>
+	<path style="fill:#F4C647;" d="M262.25,342.615H97.365c-4.694,0-8.5,3.806-8.5,8.5v0c0,4.694,3.806,8.5,8.5,8.5H262.25
+		c4.694,0,8.5-3.806,8.5-8.5v0C270.75,346.42,266.944,342.615,262.25,342.615z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

client/src/components/admin/AdminTile.vue

@@ -4,13 +4,21 @@
     <div class="admin-tile__body">
       <slot />
     </div>
+    <div v-if="iconBottom" class="admin-tile__icon-bottom-container">
+      <div class="admin-tile__icon-bottom" @click="emit('icon-click')">
+        <Icon :name="iconBottom" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 defineProps<{
   title?: string,
+  iconBottom?: string,
 }>()
+
+const emit = defineEmits(['icon-click'])
 </script>
 
 <style lang="scss">
@@ -18,6 +26,7 @@ defineProps<{
 
 .admin-tile {
   &__container {
+    position: relative;
     min-width: 300px;
     margin: 40px;
     padding: 16px 30px;
@@ -36,5 +45,29 @@ defineProps<{
     font-size: 16px;
     font-family: $font-secondary;
   }
+
+  &__icon-bottom-container {
+    display: flex;
+    position: absolute;
+    left: 0;
+    bottom: -24px;
+    width: 100%;
+  }
+
+  &__icon-bottom {
+    width: 12px;
+    height: 12px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: $admin-tile-bottom-icon-background-color;
+    border-bottom: $admin-tile-bottom-icon-border;
+    border-radius: 64px;
+    cursor: pointer;
+    
+    &:hover{
+      background-color: $admin-tile-bottom-icon-hover-background-color;
+      border-bottom: $admin-tile-bottom-icon-hover-border;
+    }
+  }
 }
 </style>

client/src/components/admin/GameInfoTile.vue

@@ -1,6 +1,6 @@
 <template>
   <AdminTile title="Game">
-    <table>
+    <table class="gameinfo-tile__table">
       <tr class="gameinfo-tile__row">
         <td>{{ $t('name') }}:</td>
         <td>{{ gameinfo.name }}</td>
@@ -98,12 +98,17 @@ const editLangChange = async (): Promise<void> => {
     height: 100%;
   }
 
+  &__table {
+    margin-left: -12px;
+    border-collapse: separate;
+    border-spacing: 12px 0;
+  }
+
   &__row {
     height: 24px;
   }
 
   &__edit {
-    margin-left: 24px;
     width: 16px;
     height: 16px;
     cursor: pointer;

client/src/components/admin/PlayersTile.vue

@@ -1,23 +1,35 @@
 <template>
-  <AdminTile title="Players">
+  <AdminTile title="Players" icon-bottom="add" @icon-click="addPlayer">
-    <table>
+    <table class="players-tile__table">
       <tr>
-        <th>{{ $t('name') }}:</th>
+        <th class="players-tile__table-head">{{ $t('name') }}:</th>
-        <th>{{ $t('num-quotes') }}</th>
+        <th class="players-tile__table-head">{{ $t('num-quotes') }}</th>
-        <th>{{ $t('score') }}</th>
+        <th class="players-tile__table-head">{{ $t('score') }}</th>
-        <th>{{ $t('last-logged-in') }}</th>
+        <th class="players-tile__table-head">{{ $t('last-logged-in') }}</th>
+      </tr>
+      <tr v-for="player in players" class="players-tile__row" :key="player.id">
+        <td>
+          {{ player.name }}
+          <div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster"><Icon name="crown" /></div>
+        </td>
+        <td>{{ player.numQuotes }}</td>
+        <td>{{ player.score }}</td>
+        <td>{{ player.lastLoggedIn === 0 ? '-' : datetime(player.lastLoggedIn) }}</td>
       </tr>
     </table>
   </AdminTile>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import useI18n from '@/composables/useI18n'
+import useDateFormatter from '@/composables/useDateFormatter';
 import type { GameInfo } from '@/composables/engine.d'
 
-defineProps<{
+const props = defineProps<{
   gameinfo: GameInfo
 }>()
+// const emit = defineEmits(['update'])
 
 const { $t } = useI18n({
   name: { en: 'Name', de: 'Name' },
@@ -25,14 +37,44 @@ const { $t } = useI18n({
   'score': { en: 'Score', de: 'Score' },
   'last-logged-in': { en: 'last logged in', de: 'zuletzt eingeloggt' },
 })
+const { datetime } = useDateFormatter()
 
+const players = computed(() => {
+  return props.gameinfo.players.sort((a, b) => a.name.localeCompare(b.name))
+})
+
+const addPlayer = () => {
+  alert('not yet implemented')
+}
 </script>
 
 <style lang="scss">
-.gameinfo-tile {
+.players-tile {
   &__container {
     width: 100%;
     height: 100%;
   }
+
+  &__table {
+    margin: 0 0 16px -12px;
+    border-collapse: separate;
+    border-spacing: 12px 0;
+  }
+
+  &__table-head {
+    text-align: left;
+    margin: 8px;
+  }
+
+  &__row {
+    height: 24px;
+  }
+
+  &__is-gamemaster {
+    display: inline-block;
+    margin-left: 4px;
+    width: 16px;
+    height: 14px;
+  }
 }
 </style>

client/src/pages/gamemaster.vue

@@ -3,6 +3,7 @@
     <TopBar />
     <div class="gamemaster__tiles">
       <AdminGameInfoTile :gameinfo="gameinfo" @update="updateGameinfo" />
+      <AdminPlayersTile :gameinfo="gameinfo" @update="updateGameinfo" />
       <div class="gamemaster__tiles-spacer" />
     </div>
 </div>