src/views/Draft.vue

@@ -4,6 +4,19 @@
       <header>
         <h2>Players</h2>
       </header>
+      <section class="players">
+        <article
+          v-for="player in playerStatus"
+          :key="player.name"
+          :class="playerClass(player)"
+        >
+          <div class="icon">
+            <b-icon v-if="player.isBot" icon="robot" size="is-small" />
+            <b-icon v-else icon="account-box" size="is-small" />
+          </div>
+          <div class="name">{{ player.name }}</div>
+        </article>
+      </section>
     </section>
     <section class="pool">
       <header>
@@ -42,12 +55,34 @@
   header > h2 {
     font-family: $fantasy;
     font-weight: 600;
-    text-align: center;
     font-size: 2.5vh;
     padding: 1vh;
   }
 }
 
+.playerlist {
+  .players {
+    display: flex;
+    flex-flow: column wrap;
+    max-height: 100%;
+  }
+  .player {
+    display: flex;
+    color: $red;
+    align-items: center;
+    &.picked,
+    &.bot {
+      color: $green;
+    }
+    &.me::after {
+      content: " (me)";
+      font-size: 10pt;
+      margin-left: 5px;
+      color: $purple;
+    }
+  }
+}
+
 .pool {
   display: flex;
   flex-direction: column;
@@ -93,6 +128,13 @@ import { Component, Vue } from "vue-property-decorator";
 import { getCards, CardSlot } from "@/mlpccg";
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
 
+interface PlayerStatus {
+  name: string;
+  isBot: boolean;
+  isMe: boolean;
+  picked: boolean;
+}
+
 @Component({
   components: {
     CardPicker
@@ -128,5 +170,32 @@ export default class DraftView extends Vue {
   }
 
   private cardPicked() {}
+
+  private get playerStatus(): PlayerStatus[] {
+    return [
+      "Player1",
+      "bot",
+      "bot",
+      "Player2",
+      "bot",
+      "bot",
+      "Hamcha",
+      "bot"
+    ].map(s => ({
+      name: s,
+      isBot: s == "bot",
+      isMe: s == "Hamcha",
+      picked: s == "b" || s == "Player2"
+    }));
+  }
+
+  private playerClass(player: PlayerStatus) {
+    return {
+      player: true,
+      me: player.isMe,
+      bot: player.isBot,
+      picked: player.picked
+    };
+  }
 }
 </script>