src/components/DeckBuilder/DeckList.vue

@@ -1,25 +1,20 @@
 <template>
   <section class="decklist">
-    <section class="card-section" v-for="section in sections" :key="section">
+    <article
-      <header>
+      class="ccgcard"
-        <h1>{{ section }}</h1>
+      @click="() => _drop(card)"
-      </header>
+      v-for="(card, i) in cards"
-      <article
+      :key="i"
-        class="ccgcard"
+    >
-        @click="() => _drop(card)"
+      <img :src="imageURL(card.data.ID)" class="cardbg" />
-        v-for="(card, i) in getCards(section, true)"
+      <div class="amt">{{ card.howmany }}</div>
-        :key="i"
+      <div class="fullname">
-      >
+        <div class="name">{{ card.data.Name }}</div>
-        <img :src="imageURL(card.data.ID)" class="cardbg" />
+        <div class="subname">
-        <div class="amt">{{ card.howmany }}</div>
+          {{ card.data.Subname ? card.data.Subname : "" }}
-        <div class="fullname">
-          <div class="name">{{ card.data.Name }}</div>
-          <div class="subname">
-            {{ card.data.Subname ? card.data.Subname : "" }}
-          </div>
         </div>
-      </article>
+      </div>
-    </section>
+    </article>
   </section>
 </template>
 
@@ -31,16 +26,6 @@
   flex-direction: column;
 }
 
-.card-section {
-  header {
-    h1 {
-      padding: 5px 10px;
-      font-family: $fantasy;
-      font-size: 10pt;
-    }
-  }
-}
-
 .ccgcard {
   display: flex;
   align-content: space-between;
@@ -74,11 +59,12 @@
 }
 
 .amt {
-  margin: 0 6pt 0 10pt;
+  margin: 0 10pt;
   font-weight: bold;
   font-size: 13pt;
+  padding-bottom: 5px;
   &:after {
-    content: " ×";
+    content: " x";
     font-weight: 300;
   }
 }
@@ -98,102 +84,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import {
+import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
-  cardFullName,
-  CardSlot,
-  Card,
-  cardImageURL,
-  multiElemStr,
-  typeNames
-} from "@/mlpccg";
-
-function sortCards(a: CardSlot, b: CardSlot): number {
-  // Sort by element
-  // (Cards are guaranteed to be the same type)
-  switch (a.data.Type) {
-    case "Friend":
-      {
-        // Sort by requirement
-        if (a.data.Requirement && b.data.Requirement) {
-          const reqA = multiElemStr(Object.keys(a.data.Requirement));
-          const reqB = multiElemStr(Object.keys(b.data.Requirement));
-          if (reqA > reqB) {
-            return 1;
-          }
-          if (reqB > reqA) {
-            return -1;
-          }
-        }
-
-        // Sort by cost
-        if (a.data.Cost && b.data.Cost) {
-          if (a.data.Cost > b.data.Cost) {
-            return 1;
-          }
-          if (a.data.Cost < b.data.Cost) {
-            return -1;
-          }
-        }
-
-        // Sort by element
-        const elemA = multiElemStr(a.data.Element);
-        const elemB = multiElemStr(b.data.Element);
-        if (elemA > elemB) {
-          return 1;
-        }
-        if (elemB > elemA) {
-          return -1;
-        }
-      }
-      break;
-    case "Problem":
-      if (a.data.ProblemRequirement && b.data.ProblemRequirement) {
-        const preqA = multiElemStr(Object.keys(a.data.ProblemRequirement));
-        const preqB = multiElemStr(Object.keys(b.data.ProblemRequirement));
-        if (preqA > preqB) {
-          return 1;
-        }
-        if (preqB > preqA) {
-          return -1;
-        }
-      }
-      break;
-    case "Event":
-    case "Resource":
-      if (a.data.Requirement && b.data.Requirement) {
-        const reqA = multiElemStr(Object.keys(a.data.Requirement));
-        const reqB = multiElemStr(Object.keys(b.data.Requirement));
-        if (reqA > reqB) {
-          return 1;
-        }
-        if (reqB > reqA) {
-          return -1;
-        }
-      }
-      break;
-  }
-
-  // Sort by power
-  if (a.data.Power && b.data.Power) {
-    if (a.data.Power > b.data.Power) {
-      return 1;
-    }
-    if (a.data.Power < b.data.Power) {
-      return -1;
-    }
-  }
-
-  // If all else fail, sort by name
-  const nameA = cardFullName(a.data);
-  const nameB = cardFullName(b.data);
-  if (nameA > nameB) {
-    return 1;
-  }
-  if (nameA < nameB) {
-    return -1;
-  }
-  return 0;
-}
 
 @Component({
   components: {}
@@ -213,17 +104,5 @@ export default class DeckList extends Vue {
   private imageURL(id: string) {
     return cardImageURL(id);
   }
-
-  private getCards(section: string, sort: boolean): CardSlot[] {
-    let cards = this.cards.filter(c => c.data.Type == section);
-    if (!sort) {
-      return cards;
-    }
-    return cards.sort(sortCards);
-  }
-
-  private get sections(): string[] {
-    return typeNames.filter(s => this.getCards(s, false).length > 0);
-  }
 }
 </script>

src/mlpccg/card.ts

@@ -11,61 +11,3 @@ export function createPonyheadURL(cards: Card[]): string {
   const cardlist = cards.map(c => `${c.ID}x1`);
   return "https://ponyhead.com/deckbuilder?v1code=" + cardlist.join("-");
 }
-
-export const colorNames = [
-  "Loyalty",
-  "Honesty",
-  "Laughter",
-  "Magic",
-  "Generosity",
-  "Kindness",
-  "None"
-];
-
-export const typeNames = [
-  "Mane Character",
-  "Friend",
-  "Event",
-  "Resource",
-  "Troublemaker",
-  "Problem"
-];
-
-export 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;
-  };
-}
-
-export const elemIndex = arrIndex(colorNames);
-export const typeIndex = arrIndex(typeNames);
-export const rarityIndex = arrIndex(rarityNames);
-
-// Convert Element[] to number by scaling elements for fair comparisons
-// Example: ["Loyalty", "Kindness"] -> [0, 5] -> [1, 6] -> 16
-export function multiElemStr(elems: string[]): number {
-  return elems
-    .map(elemIndex)
-    .reduce(
-      (acc, elem, idx, arr) => acc + (elem + 1) * 10 ** (arr.length - idx - 1),
-      0
-    );
-}
-
-export function cardLimit(type: string) {
-  switch (type) {
-    case "Mane Character":
-      return 1;
-    case "Problem":
-      return 2;
-    default:
-      return 3;
-  }
-}

src/views/DeckBuilder.vue

@@ -191,15 +191,56 @@ import {
   getCards,
   allSets,
   cardFullName,
-  createPonyheadURL,
+  createPonyheadURL
-  multiElemStr,
-  typeIndex,
-  rarityIndex,
-  colorNames,
-  typeNames,
-  cardLimit
 } 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);
@@ -273,6 +314,17 @@ function sortByColor(a: Card, b: Card) {
   return 0;
 }
 
+function cardLimit(type: string) {
+  switch (type) {
+    case "Mane Character":
+      return 1;
+    case "Problem":
+      return 2;
+    default:
+      return 3;
+  }
+}
+
 @Component({
   components: {
     DeckList,