- Added better support for tracking caught pokemon and calculating the catch numbers

origin-dex-api/src/server.ts

@@ -254,7 +254,7 @@ app.get('/api/pokemon/:pfic/details', async (req, res) => {
   }
 });
 
-app.get('/api/plan', async (req: Request, res: Response) => {
+app.get('/api/plan', authenticateToken, async (req: AuthRequest, res: Response) => {
   try {
     // Read the efficiency plan file
     const planData = await fs.readFile(
@@ -269,6 +269,14 @@ app.get('/api/plan', async (req: Request, res: Response) => {
       driver: sqlite3.Database
     });
 
+    // Get user's caught Pokemon
+    const userDb = await userDbPromise;
+    const caughtPokemon = await userDb.all(
+      'SELECT pfic FROM caught_pokemon WHERE user_id = ?',
+      [req.user.id]
+    );
+    const caughtPfics = new Set(caughtPokemon.map(p => p.pfic));
+
     // Helper function to get evolution methods
     async function getEvolutionMethods(fromPfic: string, toPfic: string) {
       // Try direct evolution first
@@ -309,15 +317,49 @@ app.get('/api/plan', async (req: Request, res: Response) => {
       return ['Evolution'];
     }
 
-    // Enhance the plan with evolution methods
+    const debug_pfic = "0010-01-000-0";
+    // Enhance the plan with evolution methods and account for caught Pokemon
     for (const game of efficiencyPlan) {
       for (const pokemon of game.pokemon) {
+        // Set initial catch count
+        pokemon.catch_count = 1;
+        if (pokemon.pfic === debug_pfic) {
+          console.log(`pokemon: ${pokemon.name} - ${pokemon.catch_count}`);
+        }
+        
+        // Add evolution targets to catch count
         if (pokemon.evolve_to) {
+          pokemon.catch_count += pokemon.evolve_to.length;
+          if (pokemon.pfic === debug_pfic) {
+            console.log(`pokemon: ${pokemon.name} - ${pokemon.catch_count}`);
+          }
+          
+          // Add evolution methods
           for (const evolution of pokemon.evolve_to) {
             const methods = await getEvolutionMethods(pokemon.pfic, evolution.pfic);
             evolution.method = methods.join(' → ');
           }
         }
+
+        // Reduce catch count for already caught Pokemon
+        if (caughtPfics.has(pokemon.pfic)) {
+          pokemon.catch_count = Math.max(0, pokemon.catch_count - 1);
+          if (pokemon.pfic === debug_pfic) {
+            console.log(`B pokemon: ${pokemon.name} - ${pokemon.catch_count}`);
+          }
+        }
+
+        // Check evolution targets
+        if (pokemon.evolve_to) {
+          for (const evolution of pokemon.evolve_to) {
+            if (caughtPfics.has(evolution.pfic)) {
+              pokemon.catch_count = Math.max(0, pokemon.catch_count - 1);
+              if (pokemon.pfic === debug_pfic) {
+                console.log(`C pokemon: ${pokemon.name} - ${pokemon.catch_count} (${evolution.pfic})`);
+              }
+            }
+          }
+        }
       }
     }
 
@@ -368,6 +410,7 @@ app.post('/api/pokemon/caught/:pfic', authenticateToken, (req: AuthRequest, res:
         );
         res.json({ status: 'caught' });
       }
+      console.log(`Caught ${pfic}`);
     } catch (err) {
       console.error('Error updating caught status:', err);
       res.status(500).json({ error: 'Internal server error' });

origin-dex/src/app/app.component.ts

@@ -7,6 +7,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { AuthService } from './core/services/auth.service';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatListModule } from '@angular/material/list';
+import { PokemonService } from './core/services/pokemon.service';
 
 @Component({
   selector: 'app-root',
@@ -39,9 +40,6 @@ import { MatListModule } from '@angular/material/list';
     <mat-sidenav-container class="content-container">
       <mat-sidenav mode="side" opened>
         <mat-nav-list>
-          <a mat-list-item routerLink="/storage" routerLinkActive="active">
-            Storage
-          </a>
           <a mat-list-item routerLink="/storage-carousel" routerLinkActive="active">
             Storage Carousel
           </a>
@@ -96,5 +94,10 @@ import { MatListModule } from '@angular/material/list';
   `]
 })
 export class AppComponent {
-  constructor(public auth: AuthService) {}
+  constructor(
+    public auth: AuthService,
+    public pokemonService: PokemonService
+  ) {
+    this.pokemonService.initializeCaughtPokemon();
+  }
 }

origin-dex/src/app/app.routes.ts

@@ -4,8 +4,8 @@ import { AuthGuard } from './core/guards/auth.guard';
 export const routes: Routes = [
   {
     path: 'storage',
-    loadComponent: () => import('./features/pokemon/pokemon-grid/pokemon-grid.component')
-      .then(m => m.PokemonGridComponent)
+    loadComponent: () => import('./features/pokemon/pokemon-carousel/pokemon-carousel.component')
+      .then(m => m.PokemonCarouselComponent)
   },
   {
     path: 'storage-carousel',  // Add new route

origin-dex/src/app/core/services/pokemon.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { map, Observable, shareReplay } from 'rxjs';
+import { map, Observable, shareReplay, tap } from 'rxjs';
 import { Pokemon, PokemonEncounter } from '../models/pokemon.model';
 import { environment } from '../../../environments/environment.development';
 import { comparePfics } from '../utils/pfic-utils';
@@ -11,6 +11,7 @@ import { comparePfics } from '../utils/pfic-utils';
 export class PokemonService {
   private apiUrl = environment.apiUrl;
   private pokemonCache: Observable<(Pokemon | null)[][]> | null = null;
+  private pokemonGroups: (Pokemon | null)[][] = [];
 
   constructor(private http: HttpClient) { }
 
@@ -34,9 +35,12 @@ export class PokemonService {
           MarkName: pokemon.mark_name,
           Image: this.getPokemonImageUrl(pokemon.PFIC),
           IsDefault: pokemon.is_default || false,
-          IsCaught: false
+          IsCaught: this.caughtPokemon.has(pokemon.PFIC)
         } as Pokemon : null)
       )),
+      tap(groups => {
+        this.pokemonGroups = groups; // Store the groups for later updates
+      }),
       shareReplay(1)
     );
 
@@ -49,13 +53,29 @@ export class PokemonService {
 
   toggleCatch(pfic: string): Observable<{status: string, pfic: string}> {
     return this.http.post<{status: string, pfic: string}>(
-      `${this.apiUrl}/toggle_catch/${pfic}`, 
+      `${this.apiUrl}/pokemon/caught/${pfic}`, 
       {}
+    ).pipe(
+      tap(response => {
+        // Update both the Set and the cached Pokemon objects
+        this.updateCaughtStatus(pfic, response.status === 'caught');
+        this.updatePokemonCaughtStatus(pfic, response.status === 'caught');
+      })
     );
   }
 
+  private updatePokemonCaughtStatus(pfic: string, isCaught: boolean) {
+    this.pokemonGroups.forEach(group => {
+      group.forEach(pokemon => {
+        if (pokemon && pokemon.PFIC === pfic) {
+          pokemon.IsCaught = isCaught;
+        }
+      });
+    });
+  }
+
   getCaughtPokemon(): Observable<string[]> {
-    return this.http.get<string[]>(`${this.apiUrl}/get_caught_pokemon`);
+    return this.http.get<string[]>(`${this.apiUrl}/pokemon/caught`);
   }
 
   private caughtPokemon = new Set<string>();
@@ -79,4 +99,16 @@ export class PokemonService {
   getMarkImageUrl(markName: string): string {
     return `/assets/images/marks/${markName}.png`;
   }
+
+  initializeCaughtPokemon() {
+    this.getCaughtPokemon().subscribe(
+      pfics => {
+        pfics.forEach(pfic => this.updateCaughtStatus(pfic, true));
+        // If pokemon are already loaded, update their status
+        if (this.pokemonGroups.length > 0) {
+          pfics.forEach(pfic => this.updatePokemonCaughtStatus(pfic, true));
+        }
+      }
+    );
+  }
 }

origin-dex/src/app/features/plan/plan-game/plan-game.component.ts

@@ -1,150 +1,87 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { FormsModule } from '@angular/forms';
-import { PlanPokemonComponent } from '../plan-pokemon/plan-pokemon.component';
-import { GamePlan, PlanPokemon } from '../../../core/models/plan.model';
-
-interface StatusUpdateEvent {
-  pfic?: string;
-  caught?: boolean;
-  gameId?: number;
-  total?: number;
-}
+import { MatCardModule } from '@angular/material/card';
+import { GamePlan } from '../../../core/models/plan.model';
 
 @Component({
   selector: 'app-plan-game',
   standalone: true,
   imports: [
     CommonModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    PlanPokemonComponent
+    MatCardModule
   ],
   template: `
-    <mat-expansion-panel>
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          {{ game.game_name }}
-        </mat-panel-title>
-        <mat-panel-description>
-          Catch: {{ getTotalCatchCount() }}
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-
-      <div class="search-container">
-        <mat-form-field appearance="outline" class="search-field">
-          <mat-label>Search Pokémon</mat-label>
-          <input matInput [(ngModel)]="searchTerm" (input)="filterPokemon()">
-        </mat-form-field>
-      </div>
-
-      <div class="game-sections">
-        <div class="active-section">
-          <app-plan-pokemon
-            *ngFor="let pokemon of filteredPokemon"
-            [pokemon]="pokemon"
-            (statusUpdate)="onPokemonStatusUpdate($event)"
-          ></app-plan-pokemon>
-        </div>
-
-        <div class="completed-section" *ngIf="completedPokemon.length > 0">
-          <h3 class="section-title">Completed</h3>
-          <app-plan-pokemon
-            *ngFor="let pokemon of completedPokemon"
-            [pokemon]="pokemon"
-            (statusUpdate)="onPokemonStatusUpdate($event)"
-          ></app-plan-pokemon>
-        </div>
-      </div>
-    </mat-expansion-panel>
+    <mat-card 
+      class="game-card" 
+      [class.selected]="isSelected"
+      (click)="onSelect()">
+      <img 
+        [src]="getGameBoxArt()" 
+        [alt]="game.game_name"
+        class="game-image"
+      >
+      <mat-card-content>
+        <h3>{{ game.game_name }}</h3>
+        <p class="catch-count">
+          Pokémon to catch: {{ getTotalCatchCount() }}
+        </p>
+      </mat-card-content>
+    </mat-card>
   `,
   styles: [`
-    .search-container {
-      margin-bottom: 16px;
+    .game-card {
+      width: 200px;
+      cursor: pointer;
+      transition: transform 0.2s, box-shadow 0.2s;
     }
 
-    .search-field {
-      width: 100%;
+    .game-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
     }
 
-    .game-sections {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
+    .game-card.selected {
+      border: 2px solid #4CAF50;
+      transform: translateY(-4px);
     }
 
-    .completed-section {
-      border-top: 2px solid #eee;
-      padding-top: 16px;
+    .game-image {
+      width: 100%;
+      height: 160px;
+      object-fit: cover;
     }
 
-    .section-title {
-      color: #4CAF50;
-      margin: 0 0 16px 0;
+    mat-card-content {
+      padding: 16px;
+    }
+
+    h3 {
+      margin: 0;
       font-size: 1.2em;
+      color: #333;
+    }
+
+    .catch-count {
+      margin: 8px 0 0;
+      color: #666;
     }
   `]
 })
 export class PlanGameComponent {
   @Input() game!: GamePlan;
-  @Output() statusUpdate = new EventEmitter<StatusUpdateEvent>();
-
-  searchTerm = '';
-  filteredPokemon: typeof this.game.pokemon = [];
-  completedPokemon: typeof this.game.pokemon = [];
-
-  ngOnInit() {
-    this.filterPokemon();
-  }
-
-  filterPokemon() {
-    const term = this.searchTerm.toLowerCase();
-    const filtered = this.game.pokemon.filter(pokemon => {
-      const nameMatch = pokemon.name.toLowerCase().includes(term);
-      const formMatch = pokemon.form_name?.toLowerCase().includes(term);
-      return nameMatch || formMatch;
-    });
-
-    this.completedPokemon = filtered.filter(p => p.catch_count === 0);
-    this.filteredPokemon = filtered.filter(p => p.catch_count > 0);
-  }
+  @Input() isSelected = false;
+  @Output() gameSelect = new EventEmitter<GamePlan>();
 
   getTotalCatchCount(): number {
     return this.game.pokemon.reduce((sum, pokemon) => sum + pokemon.catch_count, 0);
   }
 
-  onPokemonStatusUpdate(event: {pfic: string, caught: boolean}) {
-    this.statusUpdate.emit(event);
-    this.filterPokemon(); // Refresh the lists
+  getGameBoxArt(): string {
+    // You'll need to implement this to return the correct box art URL
+    return `/assets/images/games/${this.game.game_name.toLowerCase().replace(' ', '-')}.png`;
   }
 
-  updateGameTotal(change: number) {
-    const currentTotal = this.getTotalCatchCount();
-    // Emit the new total to update the header
-    this.statusUpdate.emit({
-      gameId: this.game.game_id,
-      total: currentTotal + change
-    });
-  }
-
-  moveToCompletedSection(pokemon: PlanPokemon) {
-    const index = this.filteredPokemon.findIndex(p => p.pfic === pokemon.pfic);
-    if (index > -1) {
-      const [movedPokemon] = this.filteredPokemon.splice(index, 1);
-      this.completedPokemon.push(movedPokemon);
-    }
-  }
-
-  moveToActiveSection(pokemon: PlanPokemon) {
-    const index = this.completedPokemon.findIndex(p => p.pfic === pokemon.pfic);
-    if (index > -1) {
-      const [movedPokemon] = this.completedPokemon.splice(index, 1);
-      this.filteredPokemon.push(movedPokemon);
-    }
+  onSelect() {
+    this.gameSelect.emit(this.game);
   }
 }

origin-dex/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts

@@ -29,7 +29,6 @@ interface PokemonStatusEvent {
   template: `
     <mat-expansion-panel 
       class="pokemon-panel"
-      [expanded]="hasTargets"
       [disabled]="!hasTargets"
     >
       <mat-expansion-panel-header>
@@ -55,7 +54,6 @@ interface PokemonStatusEvent {
                 src="/assets/images/pokeball_color.png"
                 [class.grayscale]="pokemon.catch_count === 0"
                 class="pokeball-icon"
-                (click)="toggleCatch($event)"
                 [matTooltip]="'Need: ' + pokemon.catch_count"
               >
               <span class="catch-count">{{ pokemon.catch_count }}</span>
@@ -169,6 +167,7 @@ interface PokemonStatusEvent {
       display: flex;
       align-items: center;
       gap: 8px;
+      min-width: 80px;
     }
 
     .pokeball-icon {
@@ -263,16 +262,7 @@ export class PlanPokemonComponent {
   }
 
   isTargetCompleted(pfic: string): boolean {
-    // This should be connected to your caught Pokemon service/state
-    return false; // Placeholder
-  }
-
-  toggleCatch(event: MouseEvent) {
-    event.stopPropagation();
-    this.statusUpdate.emit({
-      pfic: this.pokemon.pfic,
-      caught: this.pokemon.catch_count > 0
-    });
+    return this.pokemonService.isTargetCompleted(pfic);
   }
 
   calculateTotalNeeded(): number {

origin-dex/src/app/features/plan/plan.component.ts

@@ -1,50 +1,100 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
+import { MatCardModule } from '@angular/material/card';
 import { FormsModule } from '@angular/forms';
 import { PlanGameComponent } from './plan-game/plan-game.component';
 import { PlanService } from '../../core/services/plan.service';
 import { GamePlan } from '../../core/models/plan.model';
+import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
 
 @Component({
   selector: 'app-plan',
   standalone: true,
   imports: [
     CommonModule,
-    MatExpansionModule,
-    MatFormFieldModule,
-    MatInputModule,
+    MatCardModule,
     FormsModule,
-    PlanGameComponent
-  ],
+    PlanGameComponent,
+    PlanPokemonComponent
+],
   template: `
     <div class="plan-container">
-      <div class="games-accordion">
-        <app-plan-game
-          *ngFor="let game of gamePlans"
-          [game]="game"
-        ></app-plan-game>
+      <div class="games-section">
+        <div class="games-scroll">
+          <div class="games-list">
+            <app-plan-game
+              *ngFor="let game of gamePlans"
+              [game]="game"
+              [isSelected]="selectedGame?.game_name === game.game_name"
+              (gameSelect)="selectGame($event)"
+            ></app-plan-game>
+          </div>
+        </div>
+      </div>
+
+      <div class="pokemon-section" *ngIf="selectedGame">
+        <h2>{{ selectedGame.game_name }} - Pokémon to Catch</h2>
+        <div class="pokemon-list">
+          <app-plan-pokemon
+            *ngFor="let pokemon of selectedGame.pokemon"
+            [pokemon]="pokemon"
+            (statusUpdate)="onPokemonStatusUpdate($event)"
+          ></app-plan-pokemon>
+        </div>
       </div>
     </div>
   `,
   styles: [`
     .plan-container {
-      padding: 20px;
-      max-width: 1200px;
-      margin: 0 auto;
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - 64px); /* Adjust based on your header height */
+      overflow: hidden;
+    }
+
+    .games-section {
+      padding: 20px 20px 0 20px;
+    }
+
+    .games-scroll {
+      width: 100%;
+      overflow-x: auto;
+      padding: 8px 0;
     }
 
-    .games-accordion {
+    .games-list {
       display: flex;
-      flex-direction: column;
       gap: 16px;
+      padding: 0 8px;
+      min-width: min-content;
+    }
+
+    .pokemon-section {
+      padding: 0 20px;
+      flex: 1;
+      min-height: 0; /* Important for Firefox */
+      display: flex;
+      flex-direction: column;
+    }
+
+    .pokemon-section h2 {
+      margin: 16px 0;
+      color: #333;
+    }
+
+    .pokemon-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      margin-bottom: 20px;
     }
   `]
 })
 export class PlanComponent implements OnInit {
   gamePlans: GamePlan[] = [];
+  selectedGame: GamePlan | null = null;
 
   constructor(private planService: PlanService) {}
 
@@ -54,12 +104,20 @@ export class PlanComponent implements OnInit {
 
   private loadPlan() {
     this.planService.getPlan().subscribe(
-      plan => this.gamePlans = plan
+      plan => {
+        this.gamePlans = plan;
+        if (!this.selectedGame && plan.length > 0) {
+          this.selectedGame = plan[0];
+        }
+      }
     );
   }
 
+  selectGame(game: GamePlan) {
+    this.selectedGame = game;
+  }
+
   onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) {
-    // Handle status updates that might affect other games' plans
-    this.loadPlan(); // Reload the full plan to ensure consistency
+    this.loadPlan();
   }
 }

origin-dex/src/app/features/pokemon/pokemon-carousel/pokemon-carousel.component.ts

@@ -223,12 +223,8 @@ export class PokemonCarouselComponent implements OnInit {
 
   onPokemonCaught(pfic: string) {
     this.pokemonService.toggleCatch(pfic).subscribe(
-      response => {
-        if (response.status === 'caught') {
-          this.caughtPokemon.add(pfic);
-        } else {
-          this.caughtPokemon.delete(pfic);
-        }
+      () => {
+        // The service handles the update now
         this.cdr.markForCheck();
       }
     );

origin-dex/src/app/features/pokemon/pokemon-cell/pokemon-cell.component.ts

@@ -167,7 +167,6 @@ export class PokemonCellComponent {
     event.stopPropagation();
     if (this.pokemon) {
       this.caught.emit(this.pokemon.PFIC);
-      this.pokemon.IsCaught = !this.pokemon.IsCaught;
     }
   }
 }