Make sure cards over the current limit cannot be picked
All checks were successful
continuous-integration/drone/pr Build is passing
continuous-integration/drone/push Build is passing

This commit is contained in:
Hamcha 2019-09-11 11:02:48 +02:00
parent 6dd2c4196e
commit 483467ecfc
Signed by: hamcha
GPG key ID: 44AD3571EB09A39E

View file

@ -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>