add player detail

apps/fantalytic-mobile/src/app/fantasy-football/const/fantasy-football-routes.const.ts

@@ -17,6 +17,10 @@ export const fantasyFootballRoutes: Route[] = [
             )
           ]
     },
+    {
+      path: 'player-details/:id',
+      loadComponent: () => import('../player-detail/player-detail.component').then(c => c.PlayerDetailComponent)
+    },
     {
         path: '',
         pathMatch: 'full',

apps/fantalytic-mobile/src/app/fantasy-football/const/fantasy-football.const.ts

@@ -0,0 +1,33 @@
+import { PositionTypes } from '../../../../../../libs/fantalytic-shared/src/index';
+
+export const FANTASY_FOOTBALL_STAT_HEADER_MAP = {
+    [PositionTypes.QB]: {
+        passingYds: 'Yds',
+        ints: 'Ints',
+        passingYdsPerAttempt: 'Yds Per Att',
+        tds: 'TDs'
+    },
+    [PositionTypes.RB]: {
+        rushingYds: 'Yds',
+        rushAttempts: 'Attempts',
+        rushingTds: 'TDs',
+        rushing20Yds: '20+ Yd'
+    },
+    [PositionTypes.WR]: {
+        receptions: 'Rec',
+        receivingYds: ' Yds',
+        receivingTds: 'TDs',
+        receiving20Plus: '20+ Yd',
+        receiving40Plus: '40+ Yd',
+        receivingTargets: 'Targets'
+    },
+    [PositionTypes.DEF]: {
+        rushYdsAllowed: 'Rush Yds',
+        ydsPerCarry: 'Yds / Carry',
+        rushTdsAllowed: 'Rush TDs',
+        completionPctAllowed: 'Comp %',
+        passYdsAllowed: 'Pass Yds',
+        ints: 'Ints',
+        sacks: 'Sacks'
+    }
+};

apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.html

@@ -23,7 +23,7 @@
                             <span class="ion-padding">{{currentStatHeaderSub$ | async}}</span>
                         </div>
 
-                        <ion-item *ngFor="let stat of positionData.stats; trackBy: statTrackByFn;">
+                        <ion-item *ngFor="let stat of positionData.stats; trackBy: statTrackByFn;" (click)="handlePlayerSelected(stat.id)">
                             <div class="stats-container">
                                 <span class="player-container">
                                     <ion-avatar>

apps/fantalytic-mobile/src/app/fantasy-football/fantasy-football.component.ts

@@ -2,6 +2,7 @@
 /* eslint-disable max-len */
 import { CommonModule } from '@angular/common';
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { IonicModule } from '@ionic/angular';
 import { Store } from '@ngrx/store';
 import { BehaviorSubject, combineLatest, filter, map, Observable, Subject, take, takeUntil } from 'rxjs';
@@ -91,6 +92,7 @@ export class FantasyFootballComponent implements OnInit, OnDestroy {
   availableStatsSub$ = new BehaviorSubject<string[]>(['Passing Yds', 'Passing TDs', 'Interceptions', 'Passing Yds Per Attempt']);
   currentStatHeaderSub$ = new BehaviorSubject<string>('Passing Yds');
   private _store = inject(Store);
+  private _router = inject(Router);
 
   selectedYear$ = this._store.select(getSelectedYear);
   private _currentPosition$ = this._store.select(getPosition);
@@ -190,6 +192,10 @@ export class FantasyFootballComponent implements OnInit, OnDestroy {
 
   }
 
+  handlePlayerSelected(playerId: string): void {
+    this._router.navigate(['tabs', 'fantasy-football', `player-details`, playerId]);
+  }
+
   private getUpdatedPositionStats(positionData: any[], year: number, currentStatHeader: string, index: number): {label: string; ctx: {positionData: {stats: any[]}}; value: string; availableStats: {[key: string]: string}}[] {
     const currentPositionMapState = this.positionsMapSub$.getValue();
     const updatedPositionMap = {
@@ -198,6 +204,7 @@ export class FantasyFootballComponent implements OnInit, OnDestroy {
         positionData: {
           stats: positionData.filter(pos => pos.year === year).map(pos => (
             {
+              id: pos.id,
               player: pos.player,
               imgUrl: pos.imageUrl,
               stat: +pos[currentPositionMapState[index].availableStats[currentStatHeader]]

apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.html

@@ -0,0 +1,29 @@
+<ion-header>
+    <ion-toolbar>
+        <ion-buttons slot="start">
+            <ion-back-button></ion-back-button>
+        </ion-buttons>
+    </ion-toolbar>
+</ion-header>
+<ion-content *ngIf="player$ | async as player">
+
+    <ion-card>
+        <img [src]="player.imageUrl" />
+        <ion-card-header>{{player.player}}</ion-card-header>
+    </ion-card>
+
+    <ion-card-content>
+        <ion-grid>
+            <ion-row>
+                <ion-col *ngFor="let stat of player.stats">
+                    {{stat.text}}
+                </ion-col>
+            </ion-row>
+            <ion-row>
+                <ion-col *ngFor="let stat of player.stats">
+                    {{player[stat.key]}}
+                </ion-col>
+            </ion-row>
+        </ion-grid>
+    </ion-card-content>
+</ion-content>

apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlayerDetailComponent } from './player-detail.component';
+
+describe('PlayerDetailComponent', () => {
+  let component: PlayerDetailComponent;
+  let fixture: ComponentFixture<PlayerDetailComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlayerDetailComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PlayerDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/fantalytic-mobile/src/app/fantasy-football/player-detail/player-detail.component.ts

@@ -0,0 +1,65 @@
+/* eslint-disable arrow-body-style */
+import { Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute } from '@angular/router';
+import { combineLatest, EMPTY, map, shareReplay, switchMap } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { getDefenses, getPosition, getQbs, getRbs, getReceivers } from '../ngrx/selectors/fantasy-football.selectors';
+import { PositionTypes } from '../../../../../../libs/fantalytic-shared/src';
+import { IonicModule } from '@ionic/angular';
+import { FANTASY_FOOTBALL_STAT_HEADER_MAP } from '../const/fantasy-football.const';
+
+@Component({
+  selector: 'pmt-player-detail',
+  standalone: true,
+  imports: [CommonModule, IonicModule],
+  templateUrl: './player-detail.component.html',
+  styleUrls: ['./player-detail.component.scss'],
+})
+export class PlayerDetailComponent {
+
+  private _route = inject(ActivatedRoute);
+  private _store = inject(Store);
+  currentPosition$ = this._store.select(getPosition).pipe(shareReplay(1));
+  players$ = this.currentPosition$.pipe(
+    switchMap(position => {
+      switch(position) {
+        case PositionTypes.QB: {
+          return this._store.select(getQbs);
+        }
+        case PositionTypes.RB: {
+          return this._store.select(getRbs);
+        }
+        case PositionTypes.WR: {
+          return this._store.select(getReceivers);
+        }
+        case PositionTypes.DEF: {
+          return this._store.select(getDefenses);
+        }
+        default:
+          return EMPTY;
+      }
+    })
+  );
+  player$ = combineLatest([this.players$, this._route.params, this.currentPosition$]).pipe(
+    map(([players, params, currentPosition]) => {
+      const selectedPlayer = (players as any[]).find(player => player.id === params.id);
+      // we only want to show a subset of stats
+      const stats = Object.keys(selectedPlayer)
+        .filter(key => !key.includes('id')
+          && !key.includes('player')
+          && !key.includes('team')
+          && !key.includes('year')
+          && !key.includes('week') && !key.includes('imageUrl'))
+        .map(stat => {
+          const header = FANTASY_FOOTBALL_STAT_HEADER_MAP[currentPosition][stat];
+          return {key: stat, text: header};
+        });
+      return {
+        ...selectedPlayer,
+        stats
+      };
+    })
+  );
+
+}