Add sorting and better styling for decklist

src/components/DeckBuilder/DeckList.vue

@@ -1,20 +1,25 @@
 <template>
   <section class="decklist">
-    <article
-      class="ccgcard"
-      @click="() => _drop(card)"
-      v-for="(card, i) in cards"
-      :key="i"
-    >
-      <img :src="imageURL(card.data.ID)" class="cardbg" />
-      <div class="amt">{{ card.howmany }}</div>
-      <div class="fullname">
-        <div class="name">{{ card.data.Name }}</div>
-        <div class="subname">
-          {{ card.data.Subname ? card.data.Subname : "" }}
+    <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 getCards(section, true)"
+        :key="i"
+      >
+        <img :src="imageURL(card.data.ID)" class="cardbg" />
+        <div class="amt">{{ card.howmany }}</div>
+        <div class="fullname">
+          <div class="name">{{ card.data.Name }}</div>
+          <div class="subname">
+            {{ card.data.Subname ? card.data.Subname : "" }}
+          </div>
         </div>
-      </div>
-    </article>
+      </article>
+    </section>
   </section>
 </template>
 
@@ -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>