src/components/DeckBuilder/CardPicker.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="cardpicker" :style="grid">
     <article
-      @click="() => _picked(card.data)"
+      @click="() => _picked(card)"
       :class="cardClass(card)"
       v-for="(card, i) in cards"
       :key="i + card.data.ID"
@@ -20,12 +20,18 @@ $padding: 10px;
   gap: $padding;
   padding: ($padding * 4) $padding;
   row-gap: $padding * 4;
-  .ccgcard {
+}
+
+.ccgcard {
   display: flex;
   align-items: center;
-    &:hover img {
+  transition: 100ms all;
+  &.available:hover img {
     box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
   }
+  &.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
   }
 }
 </style>
@@ -47,6 +53,9 @@ export default class CardPicker extends Vue {
   @Prop({ default: 5 })
   public columns!: number;
 
+  @Prop({ default: false })
+  public ignoreLimit!: boolean;
+
   private get grid() {
     return {
       gridTemplateRows: "1fr ".repeat(this.rows).trim(),
@@ -58,15 +67,23 @@ export default class CardPicker extends Vue {
     return cardImageURL(id);
   }
 
-  private _picked(card: Card) {
+  private _picked(card: CardSlot) {
+    if (this.isAvailable(card)) {
       this.$emit("picked", card);
     }
+  }
 
   private cardClass(card: CardSlot) {
+    const available = this.isAvailable(card);
     return {
       ccgcard: true,
-      disabled: card.howmany >= card.limit
+      available,
+      disabled: !available
     };
   }
+
+  private isAvailable(card: CardSlot) {
+    return card.limit == 0 || card.howmany < card.limit || this.ignoreLimit;
+  }
 }
 </script>