Add filtering and sorting cards

src/mlpccg/database.ts

@@ -1,5 +1,6 @@
 import Dexie from "dexie";
 import { Card, CardFilter } from "./types";
+import { cardFullName } from "./card";
 
 class CardDatabase extends Dexie {
   public cards: Dexie.Table<Card, string>;
@@ -43,11 +44,10 @@ export async function getCards(filter: CardFilter) {
     }
   }
 
-  return await query
-    .filter(x => {
+  const results = query.filter(x => {
     if (filter.Name) {
       if (
-          !`${x.Name}, ${x.Subname}`
+        !cardFullName(x)
           .toLowerCase()
           .includes(filter.Name.toLowerCase())
       ) {
@@ -114,10 +114,7 @@ export async function getCards(filter: CardFilter) {
       }
     }
     if (filter.Powers && filter.Powers.length > 0) {
-        if (
-          typeof x.Power === "undefined" ||
-          !filter.Powers.includes(x.Power)
-        ) {
+      if (typeof x.Power === "undefined" || !filter.Powers.includes(x.Power)) {
         return false;
       }
     }
@@ -132,6 +129,6 @@ export async function getCards(filter: CardFilter) {
       }
     }
     return true;
-    })
-    .toArray();
+  });
+  return await results.toArray();
 }

src/mlpccg/set.ts

@@ -2,7 +2,7 @@ import { SetFile } from "./types";
 import { Database } from "./database";
 
 const baseURL = "https://mcg.zyg.ovh/setdata/";
-const allSets = [
+export const allSets = [
   "PR",
   "CN",
   "RR",

src/views/DeckBuilder.vue

@@ -1,7 +1,31 @@
 <template>
   <section class="deckbuilder">
     <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">
         <CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
       </section>
@@ -24,14 +48,49 @@
   .cardlist {
     display: grid;
     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 {
     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>
 
@@ -39,7 +98,123 @@
 import { Component, Vue } from "vue-property-decorator";
 import DeckList from "@/components/DeckBuilder/DeckList.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({
   components: {
@@ -48,21 +223,38 @@ import { Card, CardFilter, getCards } from "@/mlpccg";
   }
 })
 export default class DeckBuilder extends Vue {
+  // Picked/filtered cards
   private decklist!: Card[];
-  private filter!: CardFilter;
   private filtered!: Card[];
-  private offset!: number;
+
+  // Names
+  private colors!: string[];
+  private sets!: string[];
+
+  // Card picker size
   private rows!: number;
   private columns!: number;
 
+  // User Filters
+  private nameFilter!: string;
+  private setFilters!: string[];
+  private elementFilters!: string[];
+
+  // Navigation
+  private offset!: number;
+
   private data() {
     return {
       decklist: [],
-      filter: {},
       filtered: [],
       offset: 0,
       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() {
-    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() {
@@ -81,5 +284,49 @@ export default class DeckBuilder extends Vue {
   private get currentPage() {
     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>