fix(diamond): make sure the effects apply to the right diamond

RangerRick · Sep 18, 2020 · 18cd37e · 18cd37e
1 parent f9d875d
commit 18cd37e
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/src/app/diamond/diamond.component.html b/src/app/diamond/diamond.component.html
@@ -1,12 +1,12 @@
-<ion-card class="green-card ion-no-padding ion-no-margin" [id]="'diamond-' + game.id" (click)="watchGame(game && game.id, allowOpenGame, $event)">
+<ion-card class="green-card ion-no-padding ion-no-margin" [id]="prefix + '-' + game.id" (click)="watchGame(game && game.id, allowOpenGame, $event)">
   <ion-card-content class="ion-no-padding">
     <div class="team-header">
       <app-team team="away" [teamColor]="game.awayTeamColor" [emoji]="game.awayTeamEmoji" [name]="game.awayTeamNickname" (click)="openTeam(game.awayTeam, $event)"></app-team>
       at
       <app-team team="home" [teamColor]="game.homeTeamColor" [emoji]="game.homeTeamEmoji" [name]="game.homeTeamNickname" (click)="openTeam(game.homeTeam, $event)"></app-team>
     </div>
 
-    <div [id]="'diamond-main-' + game.id" style="position: relative">
+    <div [id]="prefix + '-main-' + game.id" style="position: relative">
     <!-- viewbox="0 0 650 500" -->
     <svg *ngIf="inProgress()" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.0" preserveAspectRatio="xMinYMin meet" viewBox="10 120 635 400">
       <filter id="dropShadow">

diff --git a/src/app/diamond/diamond.component.ts b/src/app/diamond/diamond.component.ts
@@ -23,6 +23,7 @@ import { GameDetailPage } from '../game-detail/game-detail.page';
 export class DiamondComponent implements DoCheck, OnInit {
   @Input() public game: Game;
   @Input() public allowOpenGame = true;
+  @Input() public prefix = 'diamond';
   @Output() public refresh: EventEmitter<any> = new EventEmitter();
 
   public font = {
@@ -91,8 +92,8 @@ export class DiamondComponent implements DoCheck, OnInit {
       reduceMotion: this.settings.reduceMotion()
     } as MessageOptions;
 
-    const diamondId = `diamond-${this.game.id}`;
-    const svgWrapperId = `diamond-main-${this.game.id}`;
+    const diamondId = `${this.prefix}-${this.game.id}`;
+    const svgWrapperId = `${this.prefix}-main-${this.game.id}`;
     const update = this.game?.lastUpdate?.toLowerCase() || '';
     if (
       update.indexOf('home run') >= 0

diff --git a/src/app/game-detail/game-detail.page.html b/src/app/game-detail/game-detail.page.html
@@ -8,7 +8,7 @@
     <ion-title *ngIf="game">{{game.awayTeamNickname}} at {{game.homeTeamNickname}}</ion-title>
   </ion-toolbar>
 </ion-header>
-<app-diamond *ngIf="game" [allowOpenGame]="false" [game]="game"></app-diamond>
+<app-diamond *ngIf="game" prefix="game-detail" [allowOpenGame]="false" [game]="game"></app-diamond>
 <ion-content *ngIf="game" style="--background: black" class="ion-no-margin ion-no-border">
   <span class="log-entry" *ngFor="let update of updateLog.slice(1)">
     <ion-item class="ion-no-padding ion-no-margin">

diff --git a/src/app/live-feed/live-feed.page.html b/src/app/live-feed/live-feed.page.html
@@ -93,7 +93,7 @@ <h4 *ngIf="streamData && streamData.games" class="ion-no-margin">Season {{stream
         <ion-row>
           <!-- size-xs="12" size-sm="12" size-md="12" size-lg="6" size-xl="6" -->
           <ion-col size="12" *ngFor="let game of games; trackBy: gameId">
-            <app-diamond [game]="game" (refresh)="refreshUI()"></app-diamond>
+            <app-diamond [game]="game" prefix="live-diamond" (refresh)="refreshUI()"></app-diamond>
           </ion-col>
         </ion-row>
       </ion-grid>