feat: admin interface: open player edit overlay

client/src/components/CollectQuotesExplain.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="collect-quotes-explain">
-    <div class="collect-quotes-explain__container">
+    <Infobox>
       <div class="collect-quotes-explain__open-close-toggle" @click="toggleOpenClose">
         <span v-if="explainOpen">X</span>
         <span v-else>&gt;</span>
@@ -34,7 +34,7 @@
           </transition>
         </div>
       </div>
-    </div>
+    </Infobox>
   </div>
 </template>
 
@@ -84,14 +84,6 @@ export default {
 @import '~/assets/css/components';
 
 .collect-quotes-explain {
-  &__container {
-    margin: 20px 80px;
-    padding: 0 40px;
-    border: 1px solid white;
-    border-radius: 20px;
-    background-color: $primary-box-background-color;
-  }
-
   &__open-close-toggle {
     float: right;
     margin: 16px -16px 16px 16px;

client/src/components/Infobox.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="infobox">
+    <div class="infobox__container">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.infobox {
+  &__container {
+    margin: 20px 80px;
+    padding: 0 40px;
+    border: 1px solid white;
+    border-radius: 20px;
+    background-color: $primary-box-background-color;
+  }
+}
+</style>

client/src/components/admin/AdminEditPlayer.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="admin-edit-player">
+    <Infobox>
+      <div class="admin-edit-player__close" @click="$emit('close')" />
+      <h1>ooookay!</h1>
+      <table>
+        <tr>
+          <td>Name: </td>
+          <td>{{ player.name }}</td>
+        </tr>
+        <tr>
+          <td>Score: </td>
+          <td>{{ player.score }}</td>
+        </tr>
+        <tr>
+          <td>Authcode: </td>
+          <td>{{ player.authcode }}</td>
+        </tr>
+      </table>
+    </Infobox>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['player'],
+}
+</script>
+
+<style lang="scss">
+@import '~/assets/css/components';
+
+.admin-edit-player {
+  &__close {
+    float: right;
+    margin: 16px -16px 16px 16px;
+    padding: 12px;
+    border: 1px solid #ffffff;
+    border-radius: 8px;
+    background-color: $primary-background-color;
+    font-family: "Wendy One";
+    color: #ffffff;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $primary-box-background-color;
+    }
+    &::after {
+      content: 'x';
+    }
+  }
+}
+</style>

client/src/components/admin/AdminTilePlayers.vue

@@ -7,7 +7,7 @@
         <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">
+      <tr class="admin-tile-players__player" @click="editPlayer(player)" v-for="player in players" :key="player.id">
         <td>{{ player.name }}</td>
         <td>{{ player.numQuotes }}</td>
         <td>{{ player.score }}</td>
@@ -26,11 +26,11 @@
 export default {
   props: ['gameinfo', 'players'],
   methods: {
-    editPlayer(id) {
-      alert(id)
+    editPlayer(player) {
+      this.$emit('edit', player)
     },
     newPlayer() {
-      alert('new')
+      this.$emit('edit', {})
     },
   },
 }

client/src/pages/admin.vue

@@ -5,10 +5,15 @@
     </template>
     <template v-if="isGamemasterOrAdmin">
       <GameControls />
-      <div class="page-admin__tiles">
-        <AdminTileMyself :user="user" />
-        <AdminTileGameinfo :gameinfo="gameinfo" :players="players" />
-        <AdminTilePlayers :gameinfo="gameinfo" :players="players" />
+      <div class="page-admin__body">
+        <div v-if="overlay.open" class="page-admin__player-overlay">
+          <AdminEditPlayer :player="overlay.player" @close="overlay.open=false"/>
+        </div>
+        <div class="page-admin__tiles">
+          <AdminTileMyself :user="user" />
+          <AdminTileGameinfo :gameinfo="gameinfo" :players="players" />
+          <AdminTilePlayers :gameinfo="gameinfo" :players="players" @edit="editPlayer" />
+        </div>
       </div>
     </template>
   </div>
@@ -20,6 +25,13 @@ export default {
     await this.$engine.fetchUserInfo()
     await this.$engine.fetchGameInfo({ g: this.$store.state.engine.user.game })
   },
+  data() {
+    return {
+      overlay: {
+        open: false,
+      },
+    }
+  },
   computed: {
     isGamemasterOrAdmin() {
       const user = this.$store.state.engine.user
@@ -37,16 +49,55 @@ export default {
       return players.sort((a, b) => { return a.name.localeCompare(b.name) })
     },
   },
+  methods: {
+    editPlayer(player) {
+      this.overlay.open = true
+      this.overlay.player = player
+    },
+  },
 }
 </script>
 
 <style lang="scss">
+@import '~/assets/css/components';
+
 .page-admin {
   color: #ffffff;
+  width: 100%;
+  height: 100%;
+
+  &__body {
+    position: relative;
+  }
 
   &__tiles {
     display: flex;
-    margin: 24px;
+    padding: 24px;
+  }
+
+  &__player-overlay {
+    position: absolute;
+    left: 10%;
+    top: 10%;
+    width: 80%;
+  }
+  &__player-overlay-close {
+    float: right;
+    margin: 16px -16px 16px 16px;
+    padding: 12px;
+    border: 1px solid #ffffff;
+    border-radius: 8px;
+    background-color: $primary-background-color;
+    font-family: "Wendy One";
+    color: #ffffff;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $primary-box-background-color;
+    }
+    &::after {
+      content: 'x';
+    }
   }
 }
 </style>