Make so clicking on cards will remove them from the decklist
This commit is contained in:
parent
10396b24f1
commit
31efb453bc
2 changed files with 21 additions and 2 deletions
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue