src/views/DeckBuilder.vue

@@ -17,6 +17,11 @@
           </div>
         </div>
         <div class="row">
+          <b-input
+            @input="ruleChanged"
+            v-model="ruleFilter"
+            placeholder="Search rule text"
+          ></b-input>
           <div class="setfilter" v-for="set in sets" :key="set">
             <img
               @click="toggleSetFilter(set)"
@@ -283,6 +288,7 @@ export default class DeckBuilder extends Vue {
 
   // User Filters
   private nameFilter!: string;
+  private ruleFilter!: string;
   private setFilters!: string[];
   private elementFilters!: string[];
 
@@ -297,6 +303,7 @@ export default class DeckBuilder extends Vue {
       rows: 2,
       columns: 5,
       nameFilter: "",
+      ruleFilter: "",
       setFilters: [],
       elementFilters: [],
       colors: colorNames,
@@ -319,6 +326,9 @@ export default class DeckBuilder extends Vue {
     if (this.nameFilter.length > 0) {
       filters.Name = this.nameFilter;
     }
+    if (this.ruleFilter.length > 0) {
+      filters.Rules = this.ruleFilter;
+    }
     const filtered = await getCards(filters);
     this.filtered = filtered.sort(sortByColor);
     this.offset = 0;
@@ -382,6 +392,10 @@ export default class DeckBuilder extends Vue {
     this.applyFilters();
   }
 
+  private ruleChanged() {
+    this.applyFilters();
+  }
+
   private get canGoPrev(): boolean {
     return this.offset > 0;
   }