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>
|
<template>
|
||||||
<section class="cardpicker" :style="grid">
|
<section class="cardpicker" :style="grid">
|
||||||
<article
|
<article
|
||||||
@click="() => _picked(card.data)"
|
@click="() => _picked(card)"
|
||||||
:class="cardClass(card)"
|
:class="cardClass(card)"
|
||||||
v-for="(card, i) in cards"
|
v-for="(card, i) in cards"
|
||||||
:key="i + card.data.ID"
|
:key="i + card.data.ID"
|
||||||
|
@ -20,12 +20,18 @@ $padding: 10px;
|
||||||
gap: $padding;
|
gap: $padding;
|
||||||
padding: ($padding * 4) $padding;
|
padding: ($padding * 4) $padding;
|
||||||
row-gap: $padding * 4;
|
row-gap: $padding * 4;
|
||||||
.ccgcard {
|
}
|
||||||
|
|
||||||
|
.ccgcard {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
&:hover img {
|
transition: 100ms all;
|
||||||
|
&.available:hover img {
|
||||||
box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
|
box-shadow: 0 0 15px 5px rgba(200, 210, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
&.disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -47,6 +53,9 @@ export default class CardPicker extends Vue {
|
||||||
@Prop({ default: 5 })
|
@Prop({ default: 5 })
|
||||||
public columns!: number;
|
public columns!: number;
|
||||||
|
|
||||||
|
@Prop({ default: false })
|
||||||
|
public ignoreLimit!: boolean;
|
||||||
|
|
||||||
private get grid() {
|
private get grid() {
|
||||||
return {
|
return {
|
||||||
gridTemplateRows: "1fr ".repeat(this.rows).trim(),
|
gridTemplateRows: "1fr ".repeat(this.rows).trim(),
|
||||||
|
@ -58,15 +67,23 @@ export default class CardPicker extends Vue {
|
||||||
return cardImageURL(id);
|
return cardImageURL(id);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _picked(card: Card) {
|
private _picked(card: CardSlot) {
|
||||||
|
if (this.isAvailable(card)) {
|
||||||
this.$emit("picked", card);
|
this.$emit("picked", card);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
private cardClass(card: CardSlot) {
|
private cardClass(card: CardSlot) {
|
||||||
|
const available = this.isAvailable(card);
|
||||||
return {
|
return {
|
||||||
ccgcard: true,
|
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>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue