Add pack count and make player list prettier

src/components/DeckBuilder/DeckList.vue

@@ -78,7 +78,7 @@
   font-weight: bold;
   font-size: 13pt;
   &:after {
-    content: " ×";
+    content: "×";
     font-weight: 300;
   }
 }

src/views/Draft.vue

@@ -6,8 +6,8 @@
       </header>
       <section class="players">
         <article
-          v-for="player in playerStatus"
-          :key="player.name"
+          v-for="(player, i) in playerStatus"
+          :key="player.name + i"
           :class="playerClass(player)"
         >
           <div class="icon">
@@ -20,7 +20,12 @@
     </section>
     <section class="pool">
       <header>
-        <h2>Available picks</h2>
+        <h2>
+          Available picks (Pack
+          <span class="pack-number">{{ packNumber }}</span> of
+          <span class="pack-count">{{ packCount }}</span
+          >)
+        </h2>
       </header>
       <CardPicker
         @picked="cardPicked"
@@ -34,6 +39,7 @@
       <header>
         <h2>Cards</h2>
       </header>
+      <DeckList :cards="pickedCards" />
     </section>
   </section>
 </template>
@@ -41,6 +47,11 @@
 <style lang="scss" scoped>
 @import "@/assets/scss/_variables.scss";
 
+$player-not-picked: $red;
+$player-picked: $green;
+$player-me: $purple;
+$border-opacity: 0.6;
+
 .draftview {
   background: url("../assets/images/backgrounds/draftbg.webp") center;
   display: grid;
@@ -67,18 +78,27 @@
     max-height: 100%;
   }
   .player {
+    border-radius: 3px;
+    margin: 2px;
+    padding: 2px;
+    border: 2px solid rgba($player-not-picked, $border-opacity);
     display: flex;
     color: $red;
     align-items: center;
+    user-select: all;
     &.picked,
     &.bot {
-      color: $green;
+      color: $player-picked;
+      border-color: rgba($player-picked, $border-opacity);
+    }
+    &.me {
+      border-color: rgba($player-me, $border-opacity);
     }
     &.me::after {
       content: " (me)";
       font-size: 10pt;
       margin-left: 5px;
-      color: $purple;
+      color: $player-me;
     }
   }
 }
@@ -91,6 +111,10 @@
   }
 }
 
+.pack-number {
+  color: $primary;
+}
+
 @media (max-width: 800px) {
   .draftview {
     grid-template-columns: 2fr 250px;
@@ -125,8 +149,9 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { getCards, CardSlot } from "@/mlpccg";
+import { getCards, CardSlot, cardLimit, Card } from "@/mlpccg";
 import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
+import DeckList from "@/components/DeckBuilder/DeckList.vue";
 
 interface PlayerStatus {
   name: string;
@@ -137,7 +162,8 @@ interface PlayerStatus {
 
 @Component({
   components: {
-    CardPicker
+    CardPicker,
+    DeckList
   }
 })
 export default class DraftView extends Vue {
@@ -146,13 +172,19 @@ export default class DraftView extends Vue {
   private columns!: number;
 
   // Draft data
+  private packNumber!: number;
+  private packCount!: number;
   private currentPicks!: CardSlot[];
+  private pickedCards!: CardSlot[];
 
   private data() {
     return {
+      packNumber: 1,
+      packCount: 4,
       rows: 3,
       columns: 4,
-      currentPicks: []
+      currentPicks: [],
+      pickedCards: []
     };
   }
 
@@ -169,7 +201,23 @@ export default class DraftView extends Vue {
     }));
   }
 
-  private cardPicked() {}
+  private cardPicked(card: Card) {
+    // Check if card is already in
+    const idx = this.pickedCards.findIndex(c => c.data.ID == card.ID);
+    if (idx >= 0) {
+      const deckitem = this.pickedCards[idx];
+      deckitem.howmany += 1;
+      Vue.set(this.pickedCards, idx, deckitem);
+    } else {
+      this.pickedCards.push({
+        data: card,
+        limit: cardLimit(card.Type),
+        howmany: 1
+      });
+    }
+    const origIdx = this.currentPicks.findIndex(c => c.data.ID == card.ID);
+    this.currentPicks.splice(origIdx, 1);
+  }
 
   private get playerStatus(): PlayerStatus[] {
     return [