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)"
|
: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();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue