Add type filtering
This commit is contained in:
parent
06d0b5ded0
commit
4977abe4c5
1 changed files with 52 additions and 2 deletions
|
@ -15,6 +15,14 @@
|
|||
:src="elementIconURL(color)"
|
||||
/>
|
||||
</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 class="row">
|
||||
<b-input
|
||||
|
@ -91,7 +99,8 @@
|
|||
}
|
||||
|
||||
.colorfilter,
|
||||
.setfilter {
|
||||
.setfilter,
|
||||
.typefilter {
|
||||
cursor: pointer;
|
||||
img {
|
||||
opacity: 0.4;
|
||||
|
@ -114,6 +123,11 @@
|
|||
height: 32px;
|
||||
}
|
||||
|
||||
.typefilter {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.prev,
|
||||
.next {
|
||||
opacity: 0.5;
|
||||
|
@ -131,6 +145,11 @@
|
|||
.next img {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -281,6 +300,7 @@ export default class DeckBuilder extends Vue {
|
|||
// Names
|
||||
private colors!: string[];
|
||||
private sets!: string[];
|
||||
private types!: string[];
|
||||
|
||||
// Card picker size
|
||||
private rows!: number;
|
||||
|
@ -291,6 +311,7 @@ export default class DeckBuilder extends Vue {
|
|||
private ruleFilter!: string;
|
||||
private setFilters!: string[];
|
||||
private elementFilters!: string[];
|
||||
private typeFilters!: string[];
|
||||
|
||||
// Navigation
|
||||
private offset!: number;
|
||||
|
@ -306,8 +327,10 @@ export default class DeckBuilder extends Vue {
|
|||
ruleFilter: "",
|
||||
setFilters: [],
|
||||
elementFilters: [],
|
||||
typeFilters: [],
|
||||
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) {
|
||||
filters.Elements = this.elementFilters;
|
||||
}
|
||||
if (this.typeFilters.length > 0) {
|
||||
filters.Types = this.typeFilters;
|
||||
}
|
||||
if (this.nameFilter.length > 0) {
|
||||
filters.Name = this.nameFilter;
|
||||
}
|
||||
|
@ -356,6 +382,14 @@ export default class DeckBuilder extends Vue {
|
|||
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) {
|
||||
return {
|
||||
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) {
|
||||
const idx = this.elementFilters.indexOf(element);
|
||||
if (idx >= 0) {
|
||||
|
@ -388,6 +428,16 @@ export default class DeckBuilder extends Vue {
|
|||
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();
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue