Add filtering and sorting cards
This commit is contained in:
parent
123e00b657
commit
94f4db2c68
3 changed files with 331 additions and 87 deletions
|
@ -1,5 +1,6 @@
|
||||||
import Dexie from "dexie";
|
import Dexie from "dexie";
|
||||||
import { Card, CardFilter } from "./types";
|
import { Card, CardFilter } from "./types";
|
||||||
|
import { cardFullName } from "./card";
|
||||||
|
|
||||||
class CardDatabase extends Dexie {
|
class CardDatabase extends Dexie {
|
||||||
public cards: Dexie.Table<Card, string>;
|
public cards: Dexie.Table<Card, string>;
|
||||||
|
@ -43,11 +44,10 @@ export async function getCards(filter: CardFilter) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return await query
|
const results = query.filter(x => {
|
||||||
.filter(x => {
|
|
||||||
if (filter.Name) {
|
if (filter.Name) {
|
||||||
if (
|
if (
|
||||||
!`${x.Name}, ${x.Subname}`
|
!cardFullName(x)
|
||||||
.toLowerCase()
|
.toLowerCase()
|
||||||
.includes(filter.Name.toLowerCase())
|
.includes(filter.Name.toLowerCase())
|
||||||
) {
|
) {
|
||||||
|
@ -114,10 +114,7 @@ export async function getCards(filter: CardFilter) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (filter.Powers && filter.Powers.length > 0) {
|
if (filter.Powers && filter.Powers.length > 0) {
|
||||||
if (
|
if (typeof x.Power === "undefined" || !filter.Powers.includes(x.Power)) {
|
||||||
typeof x.Power === "undefined" ||
|
|
||||||
!filter.Powers.includes(x.Power)
|
|
||||||
) {
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -132,6 +129,6 @@ export async function getCards(filter: CardFilter) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
})
|
});
|
||||||
.toArray();
|
return await results.toArray();
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { SetFile } from "./types";
|
||||||
import { Database } from "./database";
|
import { Database } from "./database";
|
||||||
|
|
||||||
const baseURL = "https://mcg.zyg.ovh/setdata/";
|
const baseURL = "https://mcg.zyg.ovh/setdata/";
|
||||||
const allSets = [
|
export const allSets = [
|
||||||
"PR",
|
"PR",
|
||||||
"CN",
|
"CN",
|
||||||
"RR",
|
"RR",
|
||||||
|
|
|
@ -1,7 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<section class="deckbuilder">
|
<section class="deckbuilder">
|
||||||
<section class="cardlist">
|
<section class="cardlist">
|
||||||
<section class="filters"></section>
|
<section class="filters">
|
||||||
|
<div class="row">
|
||||||
|
<b-input
|
||||||
|
@input="nameChanged"
|
||||||
|
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)"
|
||||||
|
:src="elementIconURL(color)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="setfilter" v-for="set in sets" :key="set">
|
||||||
|
<img
|
||||||
|
@click="toggleSetFilter(set)"
|
||||||
|
:class="setIconClass(set)"
|
||||||
|
:src="setIconURL(set)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<section class="cards">
|
<section class="cards">
|
||||||
<CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
|
<CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
|
||||||
</section>
|
</section>
|
||||||
|
@ -24,14 +48,49 @@
|
||||||
.cardlist {
|
.cardlist {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-column: 1;
|
grid-column: 1;
|
||||||
grid-template-rows: 100px 1fr;
|
grid-template-rows: 110px 1fr;
|
||||||
|
|
||||||
|
.filters {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5px;
|
||||||
|
.row {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
* {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.decklist {
|
.decklist {
|
||||||
grid-column: 2;
|
grid-column: 2;
|
||||||
}
|
}
|
||||||
section {
|
}
|
||||||
border: 1px solid red;
|
|
||||||
|
.colorfilter,
|
||||||
|
.setfilter {
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
opacity: 0.4;
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
&.selected {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.colorfilter {
|
||||||
|
width: 42px;
|
||||||
|
height: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setfilter {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -39,7 +98,123 @@
|
||||||
import { Component, Vue } from "vue-property-decorator";
|
import { Component, Vue } from "vue-property-decorator";
|
||||||
import DeckList from "@/components/DeckBuilder/DeckList.vue";
|
import DeckList from "@/components/DeckBuilder/DeckList.vue";
|
||||||
import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
|
import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
|
||||||
import { Card, CardFilter, getCards } from "@/mlpccg";
|
import { Card, CardFilter, getCards, allSets, cardFullName } from "@/mlpccg";
|
||||||
|
|
||||||
|
const colorNames = [
|
||||||
|
"Loyalty",
|
||||||
|
"Honesty",
|
||||||
|
"Laughter",
|
||||||
|
"Magic",
|
||||||
|
"Generosity",
|
||||||
|
"Kindness",
|
||||||
|
"None"
|
||||||
|
];
|
||||||
|
|
||||||
|
const typeNames = [
|
||||||
|
"Mane Character",
|
||||||
|
"Friend",
|
||||||
|
"Event",
|
||||||
|
"Resource",
|
||||||
|
"Troublemaker",
|
||||||
|
"Problem"
|
||||||
|
];
|
||||||
|
|
||||||
|
const rarityNames = ["C", "U", "R", "SR", "UR", "RR", "F"];
|
||||||
|
|
||||||
|
// Trasform string from list to a number that can be used for comparison/sorting
|
||||||
|
function arrIndex(arr: string[]) {
|
||||||
|
return function(comp: string) {
|
||||||
|
const idx = arr.indexOf(comp);
|
||||||
|
if (idx < 0) {
|
||||||
|
return arr.length;
|
||||||
|
}
|
||||||
|
return idx;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const elemIndex = arrIndex(colorNames);
|
||||||
|
const typeIndex = arrIndex(typeNames);
|
||||||
|
const rarityIndex = arrIndex(rarityNames);
|
||||||
|
|
||||||
|
// Convert Element[] to number by scaling elements for fair comparisons
|
||||||
|
// Example: ["Loyalty", "Kindness"] -> [0, 5] -> [1, 6] -> 16
|
||||||
|
function multiElemStr(elems: string[]): number {
|
||||||
|
return elems
|
||||||
|
.map(elemIndex)
|
||||||
|
.reduce(
|
||||||
|
(acc, elem, idx, arr) => acc + (elem + 1) * 10 ** (arr.length - idx - 1),
|
||||||
|
0
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort function for sorting cards
|
||||||
|
function sortByColor(a: Card, b: Card) {
|
||||||
|
const typeA = typeIndex(a.Type);
|
||||||
|
const typeB = typeIndex(b.Type);
|
||||||
|
if (typeA != typeB) {
|
||||||
|
return typeA - typeB;
|
||||||
|
}
|
||||||
|
// Same types, filter by primary element
|
||||||
|
switch (a.Type) {
|
||||||
|
case "Friend":
|
||||||
|
case "Mane Character":
|
||||||
|
const elemA = multiElemStr(a.Element);
|
||||||
|
const elemB = multiElemStr(b.Element);
|
||||||
|
if (elemA > elemB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (elemB > elemA) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "Problem":
|
||||||
|
const preqA = multiElemStr(Object.keys(a.ProblemRequirement!));
|
||||||
|
const preqB = multiElemStr(Object.keys(b.ProblemRequirement!));
|
||||||
|
if (preqA > preqB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (preqB > preqA) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "Event":
|
||||||
|
case "Resource":
|
||||||
|
if (a.Requirement && b.Requirement) {
|
||||||
|
const reqA = multiElemStr(Object.keys(a.Requirement));
|
||||||
|
const reqB = multiElemStr(Object.keys(b.Requirement));
|
||||||
|
if (reqA > reqB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (reqB > reqA) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// Filter by power
|
||||||
|
if (a.Power && b.Power) {
|
||||||
|
if (a.Power != b.Power) {
|
||||||
|
return a.Power - b.Power;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by Rarity (not the pony)
|
||||||
|
const rarityA = rarityIndex(a.Rarity);
|
||||||
|
const rarityB = rarityIndex(b.Rarity);
|
||||||
|
if (rarityA != rarityB) {
|
||||||
|
return rarityA - rarityB;
|
||||||
|
}
|
||||||
|
|
||||||
|
const nameA = cardFullName(a);
|
||||||
|
const nameB = cardFullName(b);
|
||||||
|
if (nameA > nameB) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (nameB > nameA) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {
|
components: {
|
||||||
|
@ -48,21 +223,38 @@ import { Card, CardFilter, getCards } from "@/mlpccg";
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export default class DeckBuilder extends Vue {
|
export default class DeckBuilder extends Vue {
|
||||||
|
// Picked/filtered cards
|
||||||
private decklist!: Card[];
|
private decklist!: Card[];
|
||||||
private filter!: CardFilter;
|
|
||||||
private filtered!: Card[];
|
private filtered!: Card[];
|
||||||
private offset!: number;
|
|
||||||
|
// Names
|
||||||
|
private colors!: string[];
|
||||||
|
private sets!: string[];
|
||||||
|
|
||||||
|
// Card picker size
|
||||||
private rows!: number;
|
private rows!: number;
|
||||||
private columns!: number;
|
private columns!: number;
|
||||||
|
|
||||||
|
// User Filters
|
||||||
|
private nameFilter!: string;
|
||||||
|
private setFilters!: string[];
|
||||||
|
private elementFilters!: string[];
|
||||||
|
|
||||||
|
// Navigation
|
||||||
|
private offset!: number;
|
||||||
|
|
||||||
private data() {
|
private data() {
|
||||||
return {
|
return {
|
||||||
decklist: [],
|
decklist: [],
|
||||||
filter: {},
|
|
||||||
filtered: [],
|
filtered: [],
|
||||||
offset: 0,
|
offset: 0,
|
||||||
rows: 2,
|
rows: 2,
|
||||||
columns: 5
|
columns: 5,
|
||||||
|
nameFilter: "",
|
||||||
|
setFilters: [],
|
||||||
|
elementFilters: [],
|
||||||
|
colors: colorNames,
|
||||||
|
sets: allSets.slice(0, -1)
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -71,7 +263,18 @@ export default class DeckBuilder extends Vue {
|
||||||
}
|
}
|
||||||
|
|
||||||
private async applyFilters() {
|
private async applyFilters() {
|
||||||
this.filtered = await getCards(this.filter);
|
let filters: CardFilter = {};
|
||||||
|
if (this.setFilters.length > 0) {
|
||||||
|
filters.Sets = this.setFilters;
|
||||||
|
}
|
||||||
|
if (this.elementFilters.length > 0) {
|
||||||
|
filters.Elements = this.elementFilters;
|
||||||
|
}
|
||||||
|
if (this.nameFilter.length > 0) {
|
||||||
|
filters.Name = this.nameFilter;
|
||||||
|
}
|
||||||
|
const filtered = await getCards(filters);
|
||||||
|
this.filtered = filtered.sort(sortByColor);
|
||||||
}
|
}
|
||||||
|
|
||||||
private get itemsPerPage() {
|
private get itemsPerPage() {
|
||||||
|
@ -81,5 +284,49 @@ export default class DeckBuilder extends Vue {
|
||||||
private get currentPage() {
|
private get currentPage() {
|
||||||
return this.filtered.slice(this.offset, this.itemsPerPage);
|
return this.filtered.slice(this.offset, this.itemsPerPage);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private elementIconURL(element: string): string {
|
||||||
|
return `/images/elements/${element.toLowerCase()}.webp`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private setIconURL(set: string): string {
|
||||||
|
return `/images/sets/${set.toUpperCase()}.webp`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private elementIconClass(element: string) {
|
||||||
|
return {
|
||||||
|
selected: this.elementFilters.includes(element)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private setIconClass(set: string) {
|
||||||
|
return {
|
||||||
|
selected: this.setFilters.includes(set)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private toggleElementFilter(element: string) {
|
||||||
|
const idx = this.elementFilters.indexOf(element);
|
||||||
|
if (idx >= 0) {
|
||||||
|
this.elementFilters.splice(idx, 1);
|
||||||
|
} else {
|
||||||
|
this.elementFilters.push(element);
|
||||||
|
}
|
||||||
|
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 nameChanged() {
|
||||||
|
this.applyFilters();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue