Refactor some code on card picker

src/components/DeckBuilder/CardPicker.vue

@@ -2,7 +2,7 @@
   <section class="cardpicker" :style="grid">
     <article
       @click="() => _picked(card.data)"
-      class="ccgcard"
+      :class="cardClass(card)"
       v-for="(card, i) in cards"
       :key="i + card.data.ID"
     >
@@ -17,9 +17,9 @@ $padding: 10px;
 .cardpicker {
   height: 100%;
   display: grid;
-  grid-gap: $padding;
+  gap: $padding;
   padding: ($padding * 4) $padding;
-  grid-row-gap: $padding * 4;
+  row-gap: $padding * 4;
   .ccgcard {
     display: flex;
     align-items: center;
@@ -61,5 +61,12 @@ export default class CardPicker extends Vue {
   private _picked(card: Card) {
     this.$emit("picked", card);
   }
+
+  private cardClass(card: CardSlot) {
+    return {
+      ccgcard: true,
+      disabled: card.howmany >= card.limit
+    };
+  }
 }
 </script>

src/components/DeckBuilder/DeckList.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="decklist">
     <article
-      class="card"
+      class="ccgcard"
       @click="() => _drop(card)"
       v-for="(card, i) in cards"
       :key="i"
@@ -25,7 +25,7 @@
   flex-direction: column;
 }
 
-.card {
+.ccgcard {
   display: flex;
   align-content: space-between;
   align-items: center;

src/tests/unit/components/DeckList.spec.ts

@@ -16,7 +16,7 @@ describe("components/DeckBuilder/CardPicker", () => {
         cards: testSlots
       }
     });
-    const cards = wrapper.findAll(".card");
+    const cards = wrapper.findAll(".ccgcard");
     expect(cards.contains(".fullname")).toBe(true);
     for (let index = 0; index < testSlots.length; index++) {
       const item = cards.at(index);

src/views/DeckBuilder.vue

@@ -4,36 +4,36 @@
       <section class="filters">
         <div class="row">
           <b-input
-            @input="nameChanged"
+            @input="textChanged"
             v-model="nameFilter"
             placeholder="Search name"
           ></b-input>
           <div class="colorfilter" v-for="color in colors" :key="color">
             <img
-              @click="toggleElementFilter(color)"
+              @click="toggleFilter(elementFilters, color)"
-              :class="elementIconClass(color)"
+              :class="filterIconClass(elementFilters, color)"
               :src="elementIconURL(color)"
             />
           </div>
           <div class="divider" />
           <div class="typefilter" v-for="type in types" :key="type">
             <img
-              @click="toggleTypeFilter(type)"
+              @click="toggleFilter(typeFilters, type)"
-              :class="typeIconClass(type)"
+              :class="filterIconClass(typeFilters, type)"
               :src="typeIconURL(type)"
             />
           </div>
         </div>
         <div class="row">
           <b-input
-            @input="ruleChanged"
+            @input="textChanged"
             v-model="ruleFilter"
             placeholder="Search rule text"
           ></b-input>
           <div class="setfilter" v-for="set in sets" :key="set">
             <img
-              @click="toggleSetFilter(set)"
+              @click="toggleFilter(setFilters, set)"
-              :class="setIconClass(set)"
+              :class="filterIconClass(setFilters, set)"
               :src="setIconURL(set)"
             />
           </div>
@@ -411,59 +411,23 @@ export default class DeckBuilder extends Vue {
     return require(`../assets/images/cardtypes/${urltype}.webp`);
   }
 
-  private elementIconClass(element: string) {
+  private filterIconClass(filter: string[], key: string) {
     return {
-      selected: this.elementFilters.includes(element)
+      selected: filter.includes(key)
     };
   }
 
-  private setIconClass(set: string) {
+  private toggleFilter(filter: string[], key: string) {
-    return {
+    const idx = filter.indexOf(key);
-      selected: this.setFilters.includes(set)
-    };
-  }
-
-  private typeIconClass(type: string) {
-    return {
-      selected: this.typeFilters.includes(type)
-    };
-  }
-
-  private toggleElementFilter(element: string) {
-    const idx = this.elementFilters.indexOf(element);
     if (idx >= 0) {
-      this.elementFilters.splice(idx, 1);
+      filter.splice(idx, 1);
     } else {
-      this.elementFilters.push(element);
+      filter.push(key);
     }
     this.applyFilters();
   }
 
-  private toggleSetFilter(set: string) {
+  private textChanged() {
-    const idx = this.setFilters.indexOf(set);
-    if (idx >= 0) {
-      this.setFilters.splice(idx, 1);
-    } else {
-      this.setFilters.push(set);
-    }
-    this.applyFilters();
-  }
-
-  private toggleTypeFilter(set: string) {
-    const idx = this.typeFilters.indexOf(set);
-    if (idx >= 0) {
-      this.typeFilters.splice(idx, 1);
-    } else {
-      this.typeFilters.push(set);
-    }
-    this.applyFilters();
-  }
-
-  private nameChanged() {
-    this.applyFilters();
-  }
-
-  private ruleChanged() {
     this.applyFilters();
   }
 

src/views/Draft.vue

@@ -16,7 +16,7 @@
 .draftview {
   display: grid;
   height: 100vh;
-  grid-gap: 10px;
+  gap: 10px;
   grid-template-columns: minmax(200px, 1fr) 3fr minmax(250px, 1fr);
   section {
     grid-row: 1;