src/components/DeckBuilder/DeckList.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="decklist">
-    <article v-for="(card, i) in cards" :key="i">
+    <article @click="_drop(card)" v-for="(card, i) in cards" :key="i">
       <div class="amt">{{ card.howmany }}</div>
       <div class="fullname">
         <div class="name">{{ card.data.Name }}</div>
@@ -26,6 +26,7 @@
     border: 1px solid $grey;
     border-radius: 10px;
     padding: 5px 3px;
+    cursor: pointer;
   }
 }
 
@@ -70,5 +71,9 @@ export default class DeckList extends Vue {
   private fullName(card: Card): string {
     return cardFullName(card);
   }
+
+  private _drop(slot: CardSlot) {
+    this.$emit("removed", slot);
+  }
 }
 </script>

src/views/DeckBuilder.vue

@@ -58,7 +58,7 @@
       <header>
         <h1>{{ deckname }}</h1>
       </header>
-      <DeckList :cards="decklist" />
+      <DeckList :cards="decklist" @removed="cardRemoved" />
     </section>
   </section>
 </template>
@@ -512,5 +512,19 @@ export default class DeckBuilder extends Vue {
     const url = createPonyheadURL(this.decklist.map(c => c.data));
     window.open(url, "_blank");
   }
+
+  private cardRemoved(card: CardSlot) {
+    const idx = this.decklist.findIndex(c => c.data.ID == card.data.ID);
+    if (idx < 0) {
+      throw new Error("Removing card that isn't in the deck?");
+    }
+    const deckitem = this.decklist[idx];
+    deckitem.howmany -= 1;
+    if (deckitem.howmany <= 0) {
+      this.decklist.splice(idx, 1);
+    } else {
+      Vue.set(this.decklist, idx, deckitem);
+    }
+  }
 }
 </script>