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