Add card picker to draft screen

src/components/DeckBuilder/CardPicker.vue

@@ -15,17 +15,22 @@
 $padding: 10px;
 
 .cardpicker {
-  height: 100%;
+  max-height: 100%;
   display: grid;
   gap: $padding;
   padding: ($padding * 4) $padding;
   row-gap: $padding * 4;
+  place-items: stretch;
 }
 
 .ccgcard {
   display: flex;
   align-items: center;
   transition: 100ms all;
+  img {
+    max-width: 100%;
+    max-height: 100%;
+  }
   &.available:hover img {
     box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
   }

src/views/Draft.vue

@@ -4,7 +4,13 @@
       <b>Players</b>
     </section>
     <section class="pool">
-      <b>Card pool</b>
+      <CardPicker
+        @picked="cardPicked"
+        :columns="columns"
+        :rows="rows"
+        :cards="currentPicks"
+        class="picker"
+      />
     </section>
     <section class="cardlist">
       <b>Cards</b>
@@ -13,14 +19,23 @@
 </template>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/_variables.scss";
+
 .draftview {
+  background: url("../assets/images/backgrounds/draftbg.webp") center;
   display: grid;
   height: 100vh;
   gap: 10px;
   grid-template-columns: minmax(200px, 1fr) 3fr minmax(250px, 1fr);
-  section {
+  & > section {
+    padding: 10px 20px;
     grid-row: 1;
-    border: 1px solid #555;
+  }
+}
+
+.pool {
+  .picker {
+    height: 100%;
   }
 }
 
@@ -58,9 +73,43 @@
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
+import { getCards, CardSlot } from "@/mlpccg";
+import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
 
 @Component({
-  components: {}
+  components: {
+    CardPicker
+  }
 })
-export default class DraftView extends Vue {}
+export default class DraftView extends Vue {
+  // Card picker size
+  private rows!: number;
+  private columns!: number;
+
+  // Draft data
+  private currentPicks!: CardSlot[];
+
+  private data() {
+    return {
+      rows: 3,
+      columns: 4,
+      currentPicks: []
+    };
+  }
+
+  private mounted() {
+    this.fillcards();
+  }
+
+  private async fillcards() {
+    const cards = await getCards({ Sets: ["FF"] });
+    this.currentPicks = cards.slice(0, 12).map(c => ({
+      data: c,
+      howmany: 1,
+      limit: 0
+    }));
+  }
+
+  private cardPicked() {}
+}
 </script>