Prettier boxes

src/components/DeckBuilder/CardPicker.vue

@@ -69,7 +69,7 @@ export default class CardPicker extends Vue {
 
   private _picked(card: CardSlot) {
     if (this.isAvailable(card)) {
-      this.$emit("picked", card);
+      this.$emit("picked", card.data);
     }
   }
 

src/components/DeckBuilder/DeckList.vue

@@ -6,6 +6,7 @@
       v-for="(card, i) in cards"
       :key="i"
     >
+      <img :src="imageURL(card.data.ID)" class="cardbg" />
       <div class="amt">{{ card.howmany }}</div>
       <div class="fullname">
         <div class="name">{{ card.data.Name }}</div>
@@ -32,7 +33,22 @@
   border: 1px solid $grey;
   border-radius: 10px;
   padding: 5px 3px;
+  margin: 2px 0;
   cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  div {
+    z-index: 2;
+  }
+}
+
+.cardbg {
+  position: absolute;
+  margin-top: 30%;
+  max-width: 330px;
+  left: -20px;
+  filter: brightness(20%);
+  z-index: 1;
 }
 
 .fullname {
@@ -43,6 +59,8 @@
 .amt {
   margin: 0 10pt;
   font-weight: bold;
+  font-size: 13pt;
+  padding-bottom: 5px;
   &:after {
     content: " x";
     font-weight: 300;
@@ -64,7 +82,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { cardFullName, CardSlot, Card } from "@/mlpccg";
+import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
 
 @Component({
   components: {}
@@ -80,5 +98,9 @@ export default class DeckList extends Vue {
   private _drop(slot: CardSlot) {
     this.$emit("removed", slot);
   }
+
+  private imageURL(id: string) {
+    return cardImageURL(id);
+  }
 }
 </script>