Pass more data per card to CardPicker and DeckList

src/components/DeckBuilder/CardPicker.vue

@@ -1,7 +1,12 @@
 <template>
   <section class="cardpicker" :style="grid">
-    <article class="ccgcard" v-for="(card, i) in cards" :key="i + card.ID">
+    <article
-      <img :src="imageURL(card.ID)" />
+      @click="_picked(card.data)"
+      class="ccgcard"
+      v-for="(card, i) in cards"
+      :key="i + card.data.ID"
+    >
+      <img :src="imageURL(card.data.ID)" />
     </article>
   </section>
 </template>
@@ -23,14 +28,14 @@ $padding: 10px;
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { Card, cardImageURL } from "@/mlpccg";
+import { Card, CardSlot, cardImageURL } from "@/mlpccg";
 
 @Component({
   components: {}
 })
 export default class CardPicker extends Vue {
   @Prop()
-  public cards!: Card[];
+  public cards!: CardSlot[];
 
   @Prop({ default: 2 })
   public rows!: number;
@@ -48,5 +53,9 @@ export default class CardPicker extends Vue {
   private imageURL(id: string) {
     return cardImageURL(id);
   }
+
+  private picked(card: Card) {
+    this.$emit("picked", card);
+  }
 }
 </script>

src/components/DeckBuilder/DeckList.vue

@@ -1,7 +1,8 @@
 <template>
   <section class="decklist">
     <article v-for="(card, i) in cards" :key="i">
-      <div class="name">{{ fullName(card) }}</div>
+      <div class="amt">{{ card.howmany }}</div>
+      <div class="name">{{ fullName(card.data) }}</div>
     </article>
   </section>
 </template>
@@ -14,14 +15,14 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
-import { Card, cardFullName } from "@/mlpccg";
+import { cardFullName, CardSlot, Card } from "@/mlpccg";
 
 @Component({
   components: {}
 })
 export default class DeckList extends Vue {
   @Prop()
-  public cards!: Card[];
+  public cards!: CardSlot[];
 
   private fullName(card: Card): string {
     return cardFullName(card);

src/mlpccg/types.ts

@@ -43,3 +43,9 @@ export interface CardFilter {
   Powers?: number[];
   Rarities?: string[];
 }
+
+export interface CardSlot {
+  data: Card;
+  limit: number;
+  howmany: number;
+}

src/views/DeckBuilder.vue

@@ -30,7 +30,12 @@
         <div @click="prevPage" :class="canGoPrev ? 'prev' : 'prev unavailable'">
           <img src="/images/deckbuilder/navarrow.svg" />
         </div>
-        <CardPicker :columns="columns" :rows="rows" :cards="currentPage" />
+        <CardPicker
+          @picked="cardPicked"
+          :columns="columns"
+          :rows="rows"
+          :cards="currentPage"
+        />
         <div @click="nextPage" :class="canGoNext ? 'next' : 'next unavailable'">
           <img src="/images/deckbuilder/navarrow.svg" />
         </div>
@@ -127,7 +132,14 @@
 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, allSets, cardFullName } from "@/mlpccg";
+import {
+  Card,
+  CardFilter,
+  CardSlot,
+  getCards,
+  allSets,
+  cardFullName
+} from "@/mlpccg";
 
 const colorNames = [
   "Loyalty",
@@ -257,7 +269,7 @@ function sortByColor(a: Card, b: Card) {
 })
 export default class DeckBuilder extends Vue {
   // Picked/filtered cards
-  private decklist!: Card[];
+  private decklist!: CardSlot[];
   private filtered!: Card[];
 
   // Names
@@ -315,8 +327,14 @@ export default class DeckBuilder extends Vue {
     return this.columns * this.rows;
   }
 
-  private get currentPage() {
+  private get currentPage(): CardSlot[] {
-    return this.filtered.slice(this.offset, this.offset + this.itemsPerPage);
+    return this.filtered
+      .slice(this.offset, this.offset + this.itemsPerPage)
+      .map(card => ({
+        data: card,
+        limit: card.Type == "Problem" ? 2 : 3,
+        howmany: this.decklist.filter(c => c.data.ID == card.ID).length
+      }));
   }
 
   private elementIconURL(element: string): string {
@@ -387,5 +405,19 @@ export default class DeckBuilder extends Vue {
       this.offset + this.itemsPerPage
     );
   }
+
+  private cardPicked(card: Card) {
+    // Check if card is already in
+    const idx = this.decklist.findIndex(c => c.data.ID == card.ID);
+    if (idx >= 0) {
+      this.decklist[idx].howmany += 1;
+    } else {
+      this.decklist.push({
+        data: card,
+        limit: card.Type == "Problem" ? 2 : 3,
+        howmany: 1
+      });
+    }
+  }
 }
 </script>