Make sure cards over the current limit cannot be picked
This commit is contained in:
parent
6dd2c4196e
commit
483467ecfc
1 changed files with 27 additions and 10 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue