feat: admin interface

client/src/components/GameControls.vue

@@ -5,7 +5,8 @@
     <button @click="continueGame">Continue</button>
     <button @click="resetGame">Idle</button>
     <button @click="finishGame">Finish Game</button>
-    <button @click="admin">Admin Interface</button>
+    <button v-if="$route.path != '/play'" @click="go('/play')">switch to game</button>
+    <button v-if="$route.path != '/admin'" @click="go('/admin')">admin interface</button>
   </nav>
 </template>
 
@@ -36,8 +37,8 @@ export default {
     finishGame() {
       this.$engine.finishGame()
     },
-    admin() {
+    go(path) {
-      this.$router.push({ path: '/admin' })
+      this.$router.push({ path })
     },
   },
 }

client/src/components/admin/AdminTileGameinfo.vue

@@ -0,0 +1,20 @@
+<template>
+  <AdminTile title="Game">
+    <table>
+      <tr>
+        <td>Name:</td>
+        <td>{{ gameinfo.name }}</td>
+      </tr>
+      <tr>
+        <td># Players:</td>
+        <td>{{ players.length }}</td>
+      </tr>
+    </table>
+  </AdminTile>
+</template>
+
+<script>
+export default {
+  props: ['gameinfo', 'players'],
+}
+</script>

client/src/components/admin/AdminTileMyself.vue

@@ -0,0 +1,20 @@
+<template>
+  <AdminTile title="Myself">
+    <table>
+      <tr>
+        <td>Name:</td>
+        <td>{{ user.name }}</td>
+      </tr>
+      <tr>
+        <td>Role:</td>
+        <td>{{ user.role }}</td>
+      </tr>
+    </table>
+  </AdminTile>
+</template>
+
+<script>
+export default {
+  props: ['user'],
+}
+</script>

client/src/components/admin/AdminTilePlayers.vue

@@ -0,0 +1,55 @@
+<template>
+  <AdminTile class="admin-tile-players" title="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>
+        <th class="admin-tile-players__table-head">Score</th>
+        <th class="admin-tile-players__table-head">Status</th>
+      </tr>
+      <tr class="admin-tile-players__player" @click="editPlayer(player.id)" v-for="player in players" :key="player.id">
+        <td>{{ player.name }}</td>
+        <td>{{ player.quotes.length }}</td>
+        <td>{{ player.score }}</td>
+        <td>{{ player.isPlaying ? (player.isIdle ? 'idle' : 'active') : '-'}}</td>
+      </tr>
+      <tr>
+        <td colspan="4">
+          <button class="admin-tile-players__add-player" @click="newPlayer()">+</button>
+        </td>
+      </tr>
+    </table>
+  </AdminTile>
+</template>
+
+<script>
+export default {
+  props: ['gameinfo', 'players'],
+  methods: {
+    editPlayer(id) {
+      alert(id)
+    },
+    newPlayer() {
+      alert('new')
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.admin-tile-players {
+  &__table-head {
+    text-align: left;
+  }
+  &__player {
+    cursor: pointer;
+    &:hover {
+      color: #a0a0a0;
+    }
+  }
+  &__add-player {
+    padding: 0 3em;
+    cursor: pointer;
+  }
+}
+</style>

client/src/pages/admin.vue

@@ -6,48 +6,10 @@
     </template>
     <template v-if="isGamemasterOrAdmin">
       <GameControls />
-      <button class="page-admin__back-button" @click="login">Go to login page</button>
       <div class="page-admin__tiles">
-        <AdminTile title="Myself">
+        <AdminTileMyself :user="user" />
-          <table>
+        <AdminTileGameinfo :gameinfo="gameinfo" :players="players" />
-            <tr>
+        <AdminTilePlayers :gameinfo="gameinfo" :players="players" />
-              <td>Name:</td>
-              <td>{{ user.name }}</td>
-            </tr>
-            <tr>
-              <td>Role:</td>
-              <td>{{ user.role }}</td>
-            </tr>
-          </table>
-        </AdminTile>
-        <AdminTile title="Game">
-          <table>
-            <tr>
-              <td>Name:</td>
-              <td>{{ gameinfo.name }}</td>
-            </tr>
-            <tr>
-              <td># Players:</td>
-              <td>{{ players.length }}</td>
-            </tr>
-          </table>
-        </AdminTile>
-        <AdminTile title="Players">
-          <table>
-            <tr>
-              <th>Name</th>
-              <th>#&nbsp;Quotes</th>
-              <th>Score</th>
-              <th>Status</th>
-            </tr>
-            <tr class="page-admin__player" @click="editPlayer(player.id)" v-for="player in players" :key="player.id">
-              <td>{{ player.name }}</td>
-              <td>{{ player.quotes.length }}</td>
-              <td>{{ player.score }}</td>
-              <td>{{ player.isPlaying ? (player.isIdle ? 'idle' : 'active') : '-'}}</td>
-            </tr>
-          </table>
-        </AdminTile>
       </div>
     </template>
   </div>
@@ -76,14 +38,6 @@ export default {
       return players.sort((a, b) => { return a.name.localeCompare(b.name) })
     },
   },
-  methods: {
-    login() {
-      this.$router.push({ path: '/' })
-    },
-    editPlayer(id) {
-      alert(id)
-    },
-  },
 }
 </script>
 
@@ -99,12 +53,5 @@ export default {
   &__back-button {
     margin: 16px;
   }
-
-  &__player {
-    cursor: pointer;
-    &:hover {
-      color: #a0a0a0;
-    }
-  }
 }
 </style>