nicer deck template

frontend/src/components/Deck.vue

@@ -1,32 +1,37 @@
 <template>
   <v-expansion-panel-content>
     <template v-slot:header>
-      <div>{{ deck.name }}</div>
+      <span class="subheading">{{ deck.name }}</span>
     </template>
 
+    <v-alert :value="deck.note" type="info">
+      {{ deck.note }}
+    </v-alert>
+
+    <v-container grid-list-md fluid>
+      <v-layout row wrap>
+        <v-flex v-for="part in deck_parts" :key="part.heading" xs12 sm4>
           <v-card>
-      <v-card-text>
+            <v-card-title>{{ part.count }} {{ part.heading }}</v-card-title>
-        {{ deck.note }} <br />
+            <v-list dense subheader>
-        Forwards:
+              <v-list-tile v-for="card in part.cards" :key="card.serial" avatar>
-        <ul>
+                <v-list-tile-avatar color="yellow">
-          <li v-for="card in forwards" :key="card.ffdecks.serial_number">
+                  <span>{{ card.dbentry.cost }}</span>
-            {{ card.ffdecks.serial_number }}: {{ card.ffdecks.name }}
+                </v-list-tile-avatar>
-          </li>
+
-        </ul>
+                <v-list-tile-content>
-        Backups:
+                  <v-list-tile-title>{{ card.dbentry.name }}</v-list-tile-title>
-        <ul>
+                </v-list-tile-content>
-          <li v-for="card in backups" :key="card.ffdecks.serial_number">
+
-            {{ card.ffdecks.serial_number }}: {{ card.ffdecks.name }}
+                <v-list-tile-avatar>
-          </li>
+                  <span>{{ card.count }}</span>
-        </ul>
+                </v-list-tile-avatar>
-        Summons/Monsters:
+              </v-list-tile>
-        <ul>
+            </v-list>
-          <li v-for="card in rest" :key="card.ffdecks.serial_number">
-            {{ card.ffdecks.serial_number }}: {{ card.ffdecks.name }}
-          </li>
-        </ul>
-      </v-card-text>
           </v-card>
+        </v-flex>
+      </v-layout>
+    </v-container>
   </v-expansion-panel-content>
 </template>
 
@@ -39,17 +44,38 @@ export default {
   },
 
   computed: {
-    forwards() {
+    deck_parts() {
-      return this.deck.cards.filter(card => card.ffdecks.type === 'Forward')
+      let retval = {
+        forwards: {
+          heading: 'Forwards',
+          cards: this.deck.cards.filter(card => card.dbentry.type === 'Forward')
         },
-    backups() {
+        backups: {
-      return this.deck.cards.filter(card => card.ffdecks.type === 'Backup')
+          heading: 'Backups',
+          cards: this.deck.cards.filter(card => card.dbentry.type === 'Backup')
         },
-    rest() {
+        rest: {
-      return this.deck.cards.filter(
+          heading: 'Summons, Monsters & more',
-        card => card.ffdecks.type != 'Forward' && card.ffdecks.type != 'Backup'
+          cards: this.deck.cards.filter(
+            card =>
+              card.dbentry.type != 'Forward' && card.dbentry.type != 'Backup'
           )
         }
       }
+
+      for (let i = 0; i < Object.keys(retval).length; i++) {
+        let key = Object.keys(retval)[i]
+        retval[key].count = retval[key].cards.reduce(
+          (result, card) => result + card.count,
+          0
+        )
+        retval[key].cards.sort(
+          (card_l, card_r) => card_l.dbentry.cost - card_r.dbentry.cost
+        )
+      }
+
+      return retval
+    }
+  }
 }
 </script>

frontend/src/components/DeckList.vue

@@ -33,7 +33,8 @@ export default {
 
           cards.push({
             count: card.count,
-            ffdecks: CardsDB[card.serial]
+            serial: card.serial,
+            dbentry: CardsDB[card.serial]
           })
         }