closes #67

LederCards · Jun 16, 2024 · 1ec7279 · 1ec7279
1 parent 8c0ac78
commit 1ec7279
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 21 deletions.
diff --git a/interfaces/carddata.ts b/interfaces/carddata.ts
@@ -9,6 +9,8 @@ export interface ICard {
   product: string;
   locale: string;
 
+  flipSide?: string;
+
   imageClass?: string;
   meta: Record<string, number>;
 }
diff --git a/src/app/_shared/components/card-display/card-display.component.ts b/src/app/_shared/components/card-display/card-display.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, input, type OnInit } from '@angular/core';
+import { Component, effect, inject, input } from '@angular/core';
 import { type ICard } from '../../../../../interfaces';
 import { CardsService } from '../../../cards.service';
 
@@ -10,7 +10,7 @@ type CardDisplay = 'images' | 'text';
   templateUrl: './card-display.component.html',
   styleUrls: ['./card-display.component.scss'],
 })
-export class CardDisplayComponent implements OnInit {
+export class CardDisplayComponent {
   private cardsService = inject(CardsService);
 
   public size = input<CardSize>('normal');
@@ -20,7 +20,9 @@ export class CardDisplayComponent implements OnInit {
   public card: ICard | undefined;
   public soulArray = [];
 
-  ngOnInit() {
-    this.card = this.cardsService.getCardById(this.cardCode());
+  constructor() {
+    effect(() => {
+      this.card = this.cardsService.getCardById(this.cardCode());
+    });
   }
 }
diff --git a/src/app/card/card.page.html b/src/app/card/card.page.html
@@ -7,8 +7,20 @@
     @if(cardData(); as cardData) {
     <ion-grid>
       <ion-row>
-        <ion-col class="card-col" [sizeXs]="12" [sizeMd]="6" [sizeLg]="6">
-          <app-card-display class="card" [cardCode]="cardData.id" [size]="'large'"></app-card-display>
+        <ion-col [sizeXs]="12" [sizeMd]="6" [sizeLg]="6">
+          <ion-row>
+            <ion-col class="card-col">
+              <app-card-display class="card" [cardCode]="cardData.id" [size]="'large'"></app-card-display>
+            </ion-col>
+          </ion-row>
+
+          @if(cardData.flipSide) {
+          <ion-row>
+            <ion-col class="flip-col">
+              <ion-button color="secondary" (click)="loadCardData(cardData.flipSide)">Flip Card</ion-button>
+            </ion-col>
+          </ion-row>
+          }
         </ion-col>
 
         <ion-col [sizeXs]="12" [sizeMd]="6" [sizeLg]="4">

diff --git a/src/app/card/card.page.scss b/src/app/card/card.page.scss
@@ -6,7 +6,8 @@
   float: right;
 }
 
-.card-col {
+.card-col,
+.flip-col {
   display: flex;
   justify-content: center;
 }

diff --git a/src/app/card/card.page.ts b/src/app/card/card.page.ts
@@ -15,6 +15,7 @@ import { type ICard, type ICardFAQEntry } from '../../../interfaces';
 import { CardsService } from '../cards.service';
 import { MetaService } from '../meta.service';
 
+import { Location } from '@angular/common';
 import { NavController } from '@ionic/angular';
 import Handlebars from 'handlebars';
 import { FAQService } from '../faq.service';
@@ -31,6 +32,7 @@ export class CardPage implements OnInit, OnDestroy {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private nav = inject(NavController);
+  private location = inject(Location);
 
   private cardsService = inject(CardsService);
   private faqService = inject(FAQService);
@@ -62,18 +64,7 @@ export class CardPage implements OnInit, OnDestroy {
 
   ngOnInit() {
     const cardId = this.route.snapshot.paramMap.get('id');
-    const cardData = this.cardsService.getCardById(cardId ?? '');
-
-    if (!cardData) {
-      this.router.navigate(['/']);
-      return;
-    }
-
-    const template = this.metaService.getTemplateByProductId(cardData.game);
-    const compiledTemplate = Handlebars.compile(template ?? '');
-    this.template = compiledTemplate(cardData);
-
-    this.cardData.set(cardData);
+    this.loadCardData(cardId ?? '');
 
     this.clickListener = this.cardPage()?.nativeElement.addEventListener(
       'click',
@@ -106,6 +97,36 @@ export class CardPage implements OnInit, OnDestroy {
     }
   }
 
+  loadCardData(id: string) {
+    const cardData = this.cardsService.getCardById(id);
+
+    if (!cardData) {
+      this.router.navigate(['/']);
+      return;
+    }
+
+    const template = this.metaService.getTemplateByProductId(cardData.game);
+    const compiledTemplate = Handlebars.compile(template ?? '');
+    this.template = compiledTemplate(cardData);
+
+    this.cardData.set(cardData);
+
+    /*
+    I might like to do something like one of these, but I want to replace the url without doing a nav.
+    But, they don't currently work right. Either it does a navigation event (latter), or it won't load you load into the page directly (former).
+
+    this.location.replaceState(
+      `/card/${id}`,
+      `q=${this.route.snapshot.queryParamMap.get('q') ?? ''}`
+    );
+
+    this.router.navigate(['/card', id], {
+      queryParams: { q: this.route.snapshot.queryParamMap.get('q') ?? '' },
+      replaceUrl: true,
+    });
+    */
+  }
+
   search(query: string) {
     this.router.navigate(['/search'], { queryParams: { q: query } });
   }

diff --git a/src/colors.scss b/src/colors.scss
@@ -1,8 +1,8 @@
 body {
   --ion-color-primary: #ed1b2f;
   --ion-color-primary-rgb: 237, 27, 47;
-  --ion-color-primary-contrast: #000000;
-  --ion-color-primary-contrast-rgb: 0, 0, 0;
+  --ion-color-primary-contrast: #ffffff;
+  --ion-color-primary-contrast-rgb: 255, 255, 255;
   --ion-color-primary-shade: #d11829;
   --ion-color-primary-tint: #ef3244;