Add type filtering

This commit is contained in:
Hamcha 2019-09-10 10:17:55 +02:00
parent 06d0b5ded0
commit 4977abe4c5
Signed by: hamcha
GPG key ID: 44AD3571EB09A39E

View file

@ -15,6 +15,14 @@
:src="elementIconURL(color)" :src="elementIconURL(color)"
/> />
</div> </div>
<div class="divider" />
<div class="typefilter" v-for="type in types" :key="type">
<img
@click="toggleTypeFilter(type)"
:class="typeIconClass(type)"
:src="typeIconURL(type)"
/>
</div>
</div> </div>
<div class="row"> <div class="row">
<b-input <b-input
@ -91,7 +99,8 @@
} }
.colorfilter, .colorfilter,
.setfilter { .setfilter,
.typefilter {
cursor: pointer; cursor: pointer;
img { img {
opacity: 0.4; opacity: 0.4;
@ -114,6 +123,11 @@
height: 32px; height: 32px;
} }
.typefilter {
width: 42px;
height: 42px;
}
.prev, .prev,
.next { .next {
opacity: 0.5; opacity: 0.5;
@ -131,6 +145,11 @@
.next img { .next img {
transform: scaleX(-1); transform: scaleX(-1);
} }
.divider {
width: 10px;
height: 10px;
}
</style> </style>
<script lang="ts"> <script lang="ts">
@ -281,6 +300,7 @@ export default class DeckBuilder extends Vue {
// Names // Names
private colors!: string[]; private colors!: string[];
private sets!: string[]; private sets!: string[];
private types!: string[];
// Card picker size // Card picker size
private rows!: number; private rows!: number;
@ -291,6 +311,7 @@ export default class DeckBuilder extends Vue {
private ruleFilter!: string; private ruleFilter!: string;
private setFilters!: string[]; private setFilters!: string[];
private elementFilters!: string[]; private elementFilters!: string[];
private typeFilters!: string[];
// Navigation // Navigation
private offset!: number; private offset!: number;
@ -306,8 +327,10 @@ export default class DeckBuilder extends Vue {
ruleFilter: "", ruleFilter: "",
setFilters: [], setFilters: [],
elementFilters: [], elementFilters: [],
typeFilters: [],
colors: colorNames, colors: colorNames,
sets: allSets.slice(0, -1) sets: allSets.slice(0, -1),
types: typeNames
}; };
} }
@ -323,6 +346,9 @@ export default class DeckBuilder extends Vue {
if (this.elementFilters.length > 0) { if (this.elementFilters.length > 0) {
filters.Elements = this.elementFilters; filters.Elements = this.elementFilters;
} }
if (this.typeFilters.length > 0) {
filters.Types = this.typeFilters;
}
if (this.nameFilter.length > 0) { if (this.nameFilter.length > 0) {
filters.Name = this.nameFilter; filters.Name = this.nameFilter;
} }
@ -356,6 +382,14 @@ export default class DeckBuilder extends Vue {
return `/images/sets/${set.toUpperCase()}.webp`; return `/images/sets/${set.toUpperCase()}.webp`;
} }
private typeIconURL(type: string): string {
let urltype = type.toLowerCase();
if (urltype == "mane character") {
urltype = "mane-char";
}
return `/images/cardtypes/${urltype}.webp`;
}
private elementIconClass(element: string) { private elementIconClass(element: string) {
return { return {
selected: this.elementFilters.includes(element) selected: this.elementFilters.includes(element)
@ -368,6 +402,12 @@ export default class DeckBuilder extends Vue {
}; };
} }
private typeIconClass(type: string) {
return {
selected: this.typeFilters.includes(type)
};
}
private toggleElementFilter(element: string) { private toggleElementFilter(element: string) {
const idx = this.elementFilters.indexOf(element); const idx = this.elementFilters.indexOf(element);
if (idx >= 0) { if (idx >= 0) {
@ -388,6 +428,16 @@ export default class DeckBuilder extends Vue {
this.applyFilters(); 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() { private nameChanged() {
this.applyFilters(); this.applyFilters();
} }