add products page, etc

interfaces/index.ts

@@ -1,3 +1,3 @@
 export * from './carddata';
 export * from './cardhelp';
-export * from './deck';
+export * from './product';

interfaces/product.ts

@@ -0,0 +1,14 @@
+export interface IProductFilter {
+  name: string;
+  prop: string;
+}
+
+export interface IProductDefinition {
+  id: string;
+  name: string;
+}
+
+export interface IProduct extends IProductDefinition {
+  filters: IProductFilter[];
+  subproducts: IProductDefinition[];
+}

ngsw-config.json

@@ -15,7 +15,8 @@
         ],
         "urls": [
           "https://fonts.googleapis.com/css2?family=Montserrat&display=swap",
-          "https://ledercards.netlify.app/cards.min.json"
+          "https://ledercards.netlify.app/cards.min.json",
+          "https://ledercards.netlify.app/meta.json"
         ]
       }
     },

src/app/_shared/components/below-the-fold/below-the-fold.component.html

@@ -24,7 +24,7 @@
             <a routerLink="/syntax">Syntax</a>
           </div>
           <div class="map-item">
-            <a routerLink="/sets">All Products</a>
+            <a routerLink="/products">All Products</a>
           </div>
         </ion-col>
 

src/app/_shared/components/topbar/topbar.component.html

@@ -39,7 +39,7 @@
                       Syntax
                     </ion-item>
 
-                    <ion-item [routerLink]="['/sets']" detail="false">
+                    <ion-item [routerLink]="['/products']" detail="false">
                       <ion-icon slot="start" name="file-tray-full-outline"></ion-icon>
                       Products
                     </ion-item>
@@ -67,7 +67,7 @@
               Syntax
             </ion-button>
 
-            <ion-button fill="clear" color="light" [routerLink]="['/sets']">
+            <ion-button fill="clear" color="light" [routerLink]="['/products']">
               <ion-icon slot="start" name="file-tray-full-outline"></ion-icon>
               Products
             </ion-button>

src/app/app-routing.module.ts

@@ -29,7 +29,7 @@ const routes: Routes = [
       import('./syntax/syntax.module').then((m) => m.SyntaxPageModule),
   },
   {
-    path: 'sets',
+    path: 'products',
     loadChildren: () =>
       import('./sets/sets.module').then((m) => m.SetsPageModule),
   },

src/app/cards.service.ts

@@ -1,10 +1,11 @@
 import { Injectable } from '@angular/core';
 
 import { decompress } from 'compress-json';
-import { sample, sortBy, sum } from 'lodash';
+import { sample, sortBy } from 'lodash';
 
-import { ICard, IDeck } from '../../interfaces';
+import { ICard } from '../../interfaces';
 import { parseQuery } from '../../search/search';
+import { environment } from '../environments/environment';
 
 @Injectable({
   providedIn: 'root',
@@ -21,9 +22,7 @@ export class CardsService {
   }
 
   public async init() {
-    const cardData = await fetch(
-      'https://ledercards.netlify.app/cards.min.json'
-    );
+    const cardData = await fetch(`${environment.baseUrl}/cards.min.json`);
     const realData = await cardData.json();
 
     const allCards = decompress(realData);
@@ -94,12 +93,4 @@ export class CardsService {
   public getQuantityOwned(cardCode: string): number {
     return this.collection[cardCode] ?? 0;
   }
-
-  public numCardsInDeck(deck: IDeck): number {
-    return sum(Object.values(deck.cards));
-  }
-
-  public getCardStatsForDeck(deck: IDeck): Record<string, number> {
-    return {};
-  }
 }

src/app/home/home.page.html

@@ -24,7 +24,7 @@
         </ion-col>
 
         <ion-col>
-          <ion-button fill="outline" expand="block" color="light" routerLink="/sets">All Products</ion-button>
+          <ion-button fill="outline" expand="block" color="light" routerLink="/products">All Products</ion-button>
         </ion-col>
       </ion-row>
     </ion-grid>

src/app/sets/sets.page.html

@@ -6,79 +6,36 @@
   <div class="page-container">
 
     <ion-grid>
-      <ion-row>
-        <ion-col [offsetXs]="0" [sizeXs]="12" [offsetSm]="2" [sizeSm]="8" [offsetMd]="2" [sizeMd]="8">
-          <ion-button [fill]="sort === 'name' ? 'outline' : 'clear'" (click)="sort = 'name'">
-            <ion-icon slot="start" icon="text-outline"></ion-icon>
-            Name
-          </ion-button>
-
-          <ion-button [fill]="sort === 'year' ? 'outline' : 'clear'" (click)="sort = 'year'">
-            <ion-icon slot="start" icon="time-outline"></ion-icon>
-            Year
-          </ion-button>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-
-    <ion-grid *ngIf="sort === 'year'">
-      <ion-row>
-        <ion-col [offsetXs]="0" [sizeXs]="12" [offsetSm]="2" [sizeSm]="8" [offsetMd]="2" [sizeMd]="8">
-          <ion-card *ngFor="let year of allYears">
-            <ion-card-header>
-              <ion-card-title>{{ year }} Releases</ion-card-title>
-            </ion-card-header>
-
-            <ion-card-content>
-              <ion-list>
-                <ion-item *ngFor="let setName of getSetsByYear(year)">
-                  <ion-label text-wrap>
-                    <ion-row>
-                      <ion-col class="set-name">
-                        <a [routerLink]="['/search']" [queryParams]="{ q: formatSetNameForSearch(setName) }">
-                          {{ setName }}
-                        </a>
-                      </ion-col>
-                    </ion-row>
-                  </ion-label>
-                </ion-item>
-              </ion-list>
-            </ion-card-content>
-          </ion-card>
-        </ion-col>
-      </ion-row>
-    </ion-grid>
-
-    <ion-grid *ngIf="sort === 'name'">
+      @for(product of allProducts; track product.id) {
       <ion-row>
         <ion-col [offsetXs]="0" [sizeXs]="12" [offsetSm]="2" [sizeSm]="8" [offsetMd]="2" [sizeMd]="8">
           <ion-card>
             <ion-card-header>
-              <ion-card-title>All Products By Name</ion-card-title>
+              <ion-card-title>{{ product.name }}</ion-card-title>
             </ion-card-header>
 
             <ion-card-content>
               <ion-list>
-                <ion-item *ngFor="let setName of allNames">
+                @for(subproduct of product.subproducts; track subproduct.id) {
+                <ion-item>
                   <ion-label text-wrap>
                     <ion-row>
                       <ion-col class="set-name">
-                        <a [routerLink]="['/search']" [queryParams]="{ q: formatSetNameForSearch(setName) }">
-                          {{ setName }}
+                        <a [routerLink]="['/search']"
+                          [queryParams]="{ q: formatSetNameForSearch(product.id, subproduct.id) }">
+                          {{ subproduct.name }}
                         </a>
                       </ion-col>
-
-                      <ion-col [sizeMd]="2" class="set-release">
-                        {{ getSetReleaseDates(setName).join(', ') }}
-                      </ion-col>
                     </ion-row>
                   </ion-label>
                 </ion-item>
+                }
               </ion-list>
             </ion-card-content>
           </ion-card>
         </ion-col>
       </ion-row>
+      }
     </ion-grid>
 
   </div>

src/app/sets/sets.page.ts

@@ -1,48 +1,31 @@
 import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
+import { sortBy } from 'lodash';
+import { IProduct } from '../../../interfaces';
+import { environment } from '../../environments/environment';
 
 @Component({
   selector: 'app-sets',
   templateUrl: './sets.page.html',
   styleUrls: ['./sets.page.scss'],
 })
 export class SetsPage implements OnInit {
-  private allExpansions: Record<string, any> = {};
+  private router = inject(Router);
+  private http = inject(HttpClient);
 
-  public sort: 'year' | 'name' = 'name';
-  public allYears: number[] = [];
-  public allNames: string[] = [];
-
-  get expansions() {
-    return this.allExpansions;
-  }
-
-  constructor(private router: Router, private http: HttpClient) {}
+  public allProducts: IProduct[] = [];
 
   async ngOnInit() {
-    /*
-    this.http.get('https://data.limelight.cards/expansions.json').subscribe(sets => {
-      this.allExpansions = sets;
-
-      this.allYears = sortBy([...new Set(Object.values(this.allExpansions).map((expansion: any) => expansion.release).flat())]).reverse();
-      this.allNames = sortBy(Object.keys(this.allExpansions), set => set.toLowerCase());
-    });
-    */
-  }
-
-  getSetReleaseDates(set: string): number[] {
-    return this.allExpansions[set].release;
-  }
-
-  getSetsByYear(year: number): string[] {
-    return Object.keys(this.allExpansions).filter((set) =>
-      this.allExpansions[set].release.includes(year)
-    );
+    this.http
+      .get(`${environment.baseUrl}/meta.json`)
+      .subscribe((products: IProduct[]) => {
+        this.allProducts = sortBy(products, (p) => p.name);
+      });
   }
 
-  formatSetNameForSearch(setName: string): string {
-    return `expansion:"${setName}"`;
+  formatSetNameForSearch(productId: string, subproductId: string): string {
+    return `game:"${productId}" expansion:"${subproductId}"`;
   }
 
   search(query: string) {

src/environments/environment.prod.ts

@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  baseUrl: 'https://ledercards.netlify.app',
 };

src/environments/environment.ts

@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  baseUrl: 'https://ledercards.netlify.app',
 };
 
 /*