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>
|
<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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue