feat: admin: display game controls for role admin

client/src/components/GameControls.vue

@@ -1,18 +1,24 @@
 <template>
-  <nav v-if="isGamemaster" class="gamecontrols">
-    <div v-if="$route.path != '/gamemaster'">
+  <nav v-if="isGamemaster || isAdmin" class="gamecontrols">
+    <template v-if="isGamemaster">
+      <template v-if="$route.path != '/gamemaster'">
         <button @click="go('/gamemaster')">admin interface</button>
         <button :disabled="buttonsDisabled.collect" @click="collectQuotes">Collect Quotes</button>
         <button :disabled="buttonsDisabled.start" @click="startGame">Start</button>
         <button :disabled="buttonsDisabled.continue" @click="continueGame">Continue</button>
         <button :disabled="buttonsDisabled.idle" @click="resetGame">Idle</button>
         <button :disabled="buttonsDisabled.finish" @click="finishGame">Finish Game</button>
-      <button class="button-logout" @click="logout">logout</button>
-    </div>
-    <div v-if="$route.path != '/play'">
+      </template>
+      <template v-if="$route.path != '/play'">
         <button @click="go('/play')">back to game</button>
+      </template>
+    </template>
+    <template v-if="isAdmin">
+      <template v-if="$route.path != '/admin'">
+        <button @click="go('/admin')">admin interface</button>
+      </template>
+    </template>
     <button class="button-logout" @click="logout">logout</button>
-    </div>
   </nav>
 </template>
 
@@ -26,6 +32,10 @@ export default {
       const user = this.$store.state.engine.user
       return user && user.role === 'gamemaster'
     },
+    isAdmin() {
+      const user = this.$store.state.engine.user
+      return user && user.role === 'admin'
+    },
     buttonsDisabled() {
       const { state, phase } = this.$store.state.game
       return {
@@ -69,17 +79,21 @@ export default {
 @import '~/assets/css/components';
 
 .gamecontrols {
+  display: flex;
+  flex-direction: row;
+
   padding: 8px 1em;
   border-bottom: 1px solid $primary-box-border-color;
 
   button {
     font-family: Dosis;
+    margin: 0 2px;
     padding: 0 1rem;
     font-size: 18px;
   }
 
   .button-logout {
-    float: right;
+    margin-left: auto;
   }
 }
 </style>

client/src/pages/admin.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-admin">
     <template v-if="user.role === 'admin'">
+      <GameControls />
       <div class="page-admin__body">
         <div class="page-admin__tiles">
           <AdminTileMyself :user="user" />
@@ -42,10 +43,6 @@ export default {
   width: 100%;
   height: 100%;
 
-  &__body {
-    position: relative;
-  }
-
   &__tiles {
     display: flex;
     flex-wrap: wrap;