src/components/DeckBuilder/DeckList.vue

@@ -1,9 +1,13 @@
 <template>
   <section class="decklist">
+    <section class="card-section" v-for="section in sections" :key="section">
+      <header>
+        <h1>{{ section }}</h1>
+      </header>
       <article
         class="ccgcard"
         @click="() => _drop(card)"
-      v-for="(card, i) in cards"
+        v-for="(card, i) in getCards(section, true)"
         :key="i"
       >
         <img :src="imageURL(card.data.ID)" class="cardbg" />
@@ -16,6 +20,7 @@
         </div>
       </article>
     </section>
+  </section>
 </template>
 
 <style lang="scss" scoped>
@@ -26,6 +31,16 @@
   flex-direction: column;
 }
 
+.card-section {
+  header {
+    h1 {
+      padding: 5px 10px;
+      font-family: $fantasy;
+      font-size: 10pt;
+    }
+  }
+}
+
 .ccgcard {
   display: flex;
   align-content: space-between;
@@ -59,12 +74,11 @@
 }
 
 .amt {
-  margin: 0 10pt;
+  margin: 0 6pt 0 10pt;
   font-weight: bold;
   font-size: 13pt;
-  padding-bottom: 5px;
   &:after {
-    content: " x";
+    content: " ×";
     font-weight: 300;
   }
 }
@@ -84,7 +98,102 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { cardFullName, CardSlot, Card, cardImageURL } from "@/mlpccg";
+import {
+  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: {}
@@ -104,5 +213,17 @@ 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>