Refactor some code on card picker
This commit is contained in:
parent
6ccb3ea566
commit
6dd2c4196e
5 changed files with 29 additions and 58 deletions
|
@ -2,7 +2,7 @@
|
|||
<section class="cardpicker" :style="grid">
|
||||
<article
|
||||
@click="() => _picked(card.data)"
|
||||
class="ccgcard"
|
||||
:class="cardClass(card)"
|
||||
v-for="(card, i) in cards"
|
||||
:key="i + card.data.ID"
|
||||
>
|
||||
|
@ -17,9 +17,9 @@ $padding: 10px;
|
|||
.cardpicker {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-gap: $padding;
|
||||
gap: $padding;
|
||||
padding: ($padding * 4) $padding;
|
||||
grid-row-gap: $padding * 4;
|
||||
row-gap: $padding * 4;
|
||||
.ccgcard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -61,5 +61,12 @@ export default class CardPicker extends Vue {
|
|||
private _picked(card: Card) {
|
||||
this.$emit("picked", card);
|
||||
}
|
||||
|
||||
private cardClass(card: CardSlot) {
|
||||
return {
|
||||
ccgcard: true,
|
||||
disabled: card.howmany >= card.limit
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<section class="decklist">
|
||||
<article
|
||||
class="card"
|
||||
class="ccgcard"
|
||||
@click="() => _drop(card)"
|
||||
v-for="(card, i) in cards"
|
||||
:key="i"
|
||||
|
@ -25,7 +25,7 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card {
|
||||
.ccgcard {
|
||||
display: flex;
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
|
|
|
@ -16,7 +16,7 @@ describe("components/DeckBuilder/CardPicker", () => {
|
|||
cards: testSlots
|
||||
}
|
||||
});
|
||||
const cards = wrapper.findAll(".card");
|
||||
const cards = wrapper.findAll(".ccgcard");
|
||||
expect(cards.contains(".fullname")).toBe(true);
|
||||
for (let index = 0; index < testSlots.length; index++) {
|
||||
const item = cards.at(index);
|
||||
|
|
|
@ -4,36 +4,36 @@
|
|||
<section class="filters">
|
||||
<div class="row">
|
||||
<b-input
|
||||
@input="nameChanged"
|
||||
@input="textChanged"
|
||||
v-model="nameFilter"
|
||||
placeholder="Search name"
|
||||
></b-input>
|
||||
<div class="colorfilter" v-for="color in colors" :key="color">
|
||||
<img
|
||||
@click="toggleElementFilter(color)"
|
||||
:class="elementIconClass(color)"
|
||||
@click="toggleFilter(elementFilters, color)"
|
||||
:class="filterIconClass(elementFilters, color)"
|
||||
:src="elementIconURL(color)"
|
||||
/>
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<div class="typefilter" v-for="type in types" :key="type">
|
||||
<img
|
||||
@click="toggleTypeFilter(type)"
|
||||
:class="typeIconClass(type)"
|
||||
@click="toggleFilter(typeFilters, type)"
|
||||
:class="filterIconClass(typeFilters, type)"
|
||||
:src="typeIconURL(type)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<b-input
|
||||
@input="ruleChanged"
|
||||
@input="textChanged"
|
||||
v-model="ruleFilter"
|
||||
placeholder="Search rule text"
|
||||
></b-input>
|
||||
<div class="setfilter" v-for="set in sets" :key="set">
|
||||
<img
|
||||
@click="toggleSetFilter(set)"
|
||||
:class="setIconClass(set)"
|
||||
@click="toggleFilter(setFilters, set)"
|
||||
:class="filterIconClass(setFilters, set)"
|
||||
:src="setIconURL(set)"
|
||||
/>
|
||||
</div>
|
||||
|
@ -411,59 +411,23 @@ export default class DeckBuilder extends Vue {
|
|||
return require(`../assets/images/cardtypes/${urltype}.webp`);
|
||||
}
|
||||
|
||||
private elementIconClass(element: string) {
|
||||
private filterIconClass(filter: string[], key: string) {
|
||||
return {
|
||||
selected: this.elementFilters.includes(element)
|
||||
selected: filter.includes(key)
|
||||
};
|
||||
}
|
||||
|
||||
private setIconClass(set: string) {
|
||||
return {
|
||||
selected: this.setFilters.includes(set)
|
||||
};
|
||||
}
|
||||
|
||||
private typeIconClass(type: string) {
|
||||
return {
|
||||
selected: this.typeFilters.includes(type)
|
||||
};
|
||||
}
|
||||
|
||||
private toggleElementFilter(element: string) {
|
||||
const idx = this.elementFilters.indexOf(element);
|
||||
private toggleFilter(filter: string[], key: string) {
|
||||
const idx = filter.indexOf(key);
|
||||
if (idx >= 0) {
|
||||
this.elementFilters.splice(idx, 1);
|
||||
filter.splice(idx, 1);
|
||||
} else {
|
||||
this.elementFilters.push(element);
|
||||
filter.push(key);
|
||||
}
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
private toggleSetFilter(set: string) {
|
||||
const idx = this.setFilters.indexOf(set);
|
||||
if (idx >= 0) {
|
||||
this.setFilters.splice(idx, 1);
|
||||
} else {
|
||||
this.setFilters.push(set);
|
||||
}
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
private toggleTypeFilter(set: string) {
|
||||
const idx = this.typeFilters.indexOf(set);
|
||||
if (idx >= 0) {
|
||||
this.typeFilters.splice(idx, 1);
|
||||
} else {
|
||||
this.typeFilters.push(set);
|
||||
}
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
private nameChanged() {
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
private ruleChanged() {
|
||||
private textChanged() {
|
||||
this.applyFilters();
|
||||
}
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
.draftview {
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-gap: 10px;
|
||||
gap: 10px;
|
||||
grid-template-columns: minmax(200px, 1fr) 3fr minmax(250px, 1fr);
|
||||
section {
|
||||
grid-row: 1;
|
||||
|
|
Loading…
Reference in a new issue