Make so clicking on cards will remove them from the decklist
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

This commit is contained in:
Hamcha 2019-09-10 15:11:39 +02:00
parent 10396b24f1
commit 31efb453bc
Signed by: hamcha
GPG key ID: 44AD3571EB09A39E
2 changed files with 21 additions and 2 deletions

View file

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

View file

@ -58,7 +58,7 @@
<header> <header>
<h1>{{ deckname }}</h1> <h1>{{ deckname }}</h1>
</header> </header>
<DeckList :cards="decklist" /> <DeckList :cards="decklist" @removed="cardRemoved" />
</section> </section>
</section> </section>
</template> </template>
@ -512,5 +512,19 @@ export default class DeckBuilder extends Vue {
const url = createPonyheadURL(this.decklist.map(c => c.data)); const url = createPonyheadURL(this.decklist.map(c => c.data));
window.open(url, "_blank"); 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> </script>