feat: admin page: display game state and gamemaster

client/src/components/admin/AdminTileGames.vue

@@ -1,13 +1,17 @@
 <template>
   <AdminTile class="admin-tile-games" title="Games">
-    <table>
+    <table class="admin-tile-games__table">
       <tr>
         <th class="admin-tile-games__table-head">Game name</th>
+        <th class="admin-tile-games__table-head">State</th>
         <th class="admin-tile-games__table-head">#&nbsp;players</th>
+        <th class="admin-tile-games__table-head">Gamemaster(s)</th>
       </tr>
-      <tr v-for="id in Object.keys(games)" :key="id">
+      <tr v-for="id in Object.keys(games || {})" :key="id">
         <td>{{ games[id].name }}</td>
+        <td>{{ games[id].state }}</td>
         <td>{{ games[id].players.length }}</td>
+        <td>{{ gamemasters[id] }}</td>
       </tr>
     </table>
   </AdminTile>
@@ -16,11 +20,35 @@
 <script>
 export default {
   props: ['games'],
+  computed: {
+    gamemasters() {
+      const masters = {}
+      for (const gameId of Object.keys(this.games || {})) {
+        const game = this.games[gameId]
+        for (const player of game.players) {
+          if (player.role === 'gamemaster') {
+            if (masters[gameId]) {
+              masters[gameId] += ', '
+              masters[gameId] += player.name
+            } else {
+              masters[gameId] = player.name
+            }
+          }
+        }
+      }
+      return masters
+    },
+  },
 }
 </script>
 
 <style lang="scss">
 .admin-tile-games {
+  &__table {
+    margin-left: -12px;
+    border-collapse: separate;
+    border-spacing: 12px 0;
+  }
   &__table-head {
     text-align: left;
   }

client/src/components/admin/AdminTilePlayers.vue

@@ -1,6 +1,6 @@
 <template>
   <AdminTile class="admin-tile-players" title="Players">
-    <table>
+    <table class="admin-tile-players__table">
       <tr v-if="players.length">
         <th class="admin-tile-players__table-head">Name</th>
         <th class="admin-tile-players__table-head">#&nbsp;Quotes</th>
@@ -38,6 +38,11 @@ export default {
 
 <style lang="scss">
 .admin-tile-players {
+  &__table {
+    margin-left: -12px;
+    border-collapse: separate;
+    border-spacing: 12px 0;
+  }
   &__table-head {
     text-align: left;
   }

server/src/game/getGameInfo.go

@@ -16,6 +16,7 @@ func (gm *Game) initGameInfoJson() *GameInfoJson {
 
 	gameInfo := GameInfoJson{
 		Name:    gm.name,
+		State:   gm.state,
 		Players: make([]PlayerInfoJson, 0),
 	}
 

server/src/game/struct.go

@@ -88,12 +88,13 @@ type PlayerInfoJson struct {
 	IsPlaying      bool   `json:"isPlaying"`
 	IsIdle         bool   `json:"isIdle"`
 	NumberOfQuotes int    `json:"numQuotes"`
-	AuthCode       string `json:"authcode"`
+	AuthCode       string `json:"authcode,omitempty"`
 	Role           string `json:"role"`
 }
 
 type GameInfoJson struct {
 	Name    string           `json:"name"`
+	State   string           `json:"state"`
 	Players []PlayerInfoJson `json:"players"`
 }