Add a quick Filter system

src/app/components/card-display/card-display.component.ts

@@ -3,6 +3,7 @@ import { CardInfo } from '../../models/card.model';
 import { SetInfo } from '../../models/setInfo.model';
 
 import {MatBadgeModule} from '@angular/material/badge';
+import { FilterService } from '../../services/filter.service';
 
 @Component({
   selector: 'app-card-display',
@@ -17,6 +18,11 @@ export class CardDisplayComponent {
   @Input() displayHyperspace: boolean = false;
   @Input() displayShowcase: boolean = false;
 
+  constructor(
+    private filterService: FilterService
+  )
+  {}
+
   shouldShowCard()
   {
     if(this.displayShowcase)
@@ -27,7 +33,7 @@ export class CardDisplayComponent {
       }
       else
       {
-        return true;
+        return this.filterService.cardPassesFilter(this.card, this.displayHyperspace);
       }
     }
 
@@ -44,7 +50,7 @@ export class CardDisplayComponent {
       }
     }
 
-    return true;
+    return this.filterService.cardPassesFilter(this.card, this.displayHyperspace);;
   }
 
   isMissing() {

src/app/components/top-bar/top-bar.component.html

@@ -10,4 +10,13 @@
           </mat-form-field>
     }
     <span class="spacer"></span>
+    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
+        <mat-icon>filter_list</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="onShowAll();">Show all</button>
+        <button mat-menu-item (click)="onShowOnTrades();">Only Trades</button>
+        <button mat-menu-item (click)="onShowOnlyMissing();">Only Missing</button>
+        <button mat-menu-item (click)="onShowNeedMore();">Need More</button>
+    </mat-menu>
 </mat-toolbar>

src/app/components/top-bar/top-bar.component.ts

@@ -3,7 +3,13 @@ import { Component, Input, OnChanges } from '@angular/core';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatIconModule } from '@angular/material/icon';
+
 import { SetInfo } from '../../models/setInfo.model';
+import { FilterService } from '../../services/filter.service';
 
 @Component({
   selector: 'app-top-bar',
@@ -11,7 +17,11 @@ import { SetInfo } from '../../models/setInfo.model';
   imports: [
     MatToolbarModule,
     MatFormFieldModule,
-    MatSelectModule
+    MatSelectModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatSlideToggleModule,
+    MatIconModule
   ],
   templateUrl: './top-bar.component.html',
   styleUrl: './top-bar.component.scss'
@@ -20,6 +30,11 @@ export class TopBarComponent {
   selected!: SetInfo;
   @Input() sets!: Array<SetInfo>;
 
+  constructor(
+    private filterService: FilterService,
+  )
+  {}
+
   ngOnChanges()
   {
     if(this.sets)
@@ -28,4 +43,24 @@ export class TopBarComponent {
       console.log("onInit")  
     }
   }
+
+  onShowNeedMore()
+  {
+    this.filterService.setFilter(false, false, false, true);
+  }
+  
+  onShowOnlyMissing()
+  {
+    this.filterService.setFilter(false, false, true, false);
+  }
+  
+  onShowOnTrades()
+  {
+    this.filterService.setFilter(false, true, false, false);
+  }
+  
+  onShowAll()
+  {
+    this.filterService.setFilter(true, false, false, false);
+  }
 }

src/app/services/filter.service.ts

@@ -0,0 +1,114 @@
+import { Injectable } from '@angular/core';
+import { CardInfo } from '../models/card.model';
+
+const MAX_BASES = 1;
+const MAX_LEADER = 1;
+const PLAYSET_SIZE = 3;
+const MAX_HYPERSPACE = 1;
+
+@Injectable({
+    providedIn: 'root',
+  })
+
+export class FilterService {
+    showTrades: boolean = true;
+    showPlaysets: boolean = true;
+    showAtLeastOne: boolean = true;
+    includeFoilInPlayset: boolean = false;
+
+    showAll = true;
+    showOnlyTrades = false;
+    showOnlyMissing = false;
+    showNeedsMore = false;
+
+    setFilter(all: boolean, trades : boolean, missing: boolean, need : boolean)
+    {
+        this.showAll = all;
+        this.showOnlyTrades = trades;
+        this.showOnlyMissing = missing;
+        this.showNeedsMore = need;
+    }
+
+    cardPassesFilter(card: CardInfo, hyperspace: boolean) : boolean
+    {
+        if(this.showAll) 
+        {
+            return true;
+        }
+
+        if (this.showOnlyTrades) 
+        {
+            return this.hasTrades(card, hyperspace);
+        }
+
+        if(this.showOnlyMissing) 
+        {
+            return this.getCardCount(card, hyperspace) == 0;
+        }
+
+        if(this.showNeedsMore) 
+        {
+            return this.hasPlayset(card, hyperspace) == false;
+        }
+
+        return true;
+    }
+
+    hasTrades(card: CardInfo, hyperspace: boolean) : boolean {
+
+        let quantity = this.getCardCount(card, hyperspace);
+
+        if(card.isLeader && quantity > MAX_LEADER) {
+            return true;
+        }
+
+        if(card.isBase && quantity > MAX_BASES) {
+            return true;
+        }
+
+        if(hyperspace && quantity > MAX_HYPERSPACE)
+        {
+            return true;
+        }
+
+        if(quantity > PLAYSET_SIZE) {
+            return true;
+        }
+
+        return false;
+    }
+
+    hasPlayset(card: CardInfo, hyperspace: boolean) : boolean {
+
+        let quantity = this.getCardCount(card, hyperspace);
+
+        if(card.isLeader && quantity >= MAX_LEADER) {
+            return true;
+        }
+
+        if(card.isBase && quantity >= MAX_BASES) {
+            return true;
+        }
+
+        let check = hyperspace ? MAX_HYPERSPACE : PLAYSET_SIZE;
+        if(quantity >= check ) {
+            return true;
+        }
+
+        return false;
+    }
+
+    hasAtleastOne(card: CardInfo, hyperspace: boolean) : boolean {
+        let quantity = this.getCardCount(card, hyperspace);
+        return quantity >= 1;
+    }
+
+    getCardCount(card: CardInfo, hyperspace: boolean) : number {
+        let quantity = card.standardQuantity + (this.includeFoilInPlayset ? card.foilQuantity : 0);
+        if(hyperspace)
+        {
+            quantity = card.hyperspaceQuantity + (this.includeFoilInPlayset ? card.hyperspaceFoilQuantity : 0);;
+        }
+        return quantity;
+    }
+}