diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3c8cd69..6c4da67 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,6 +1,6 @@ import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; +import { Router, RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatButtonModule } from '@angular/material/button'; import { MatTabsModule } from '@angular/material/tabs'; @@ -24,42 +24,88 @@ import { PokemonService } from './core/services/pokemon.service'; MatListModule ], template: ` - - OriginDex - - + +
+ OriginDex +
+ +
+ + +
+ +
Welcome, {{ auth.currentUser?.username }}! - +
+ - - +
+ + +
- - - - - Storage Carousel - - - Efficiency Plan - - - - -
- -
- - + +
+ +
`, styles: [` - .spacer { - flex: 1 1 auto; + .top-bar { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } + + .toolbar-left { + display: flex; + align-items: center; + flex: 1; + } + + .image-container { + display: flex; + align-items: center; + gap: 16px; /* Space between images */ + flex: 0; /* Do not grow or shrink */ } + .toolbar-right { + display: flex; + align-items: center; + gap: 8px; /* Space between the welcome message and buttons */ + flex: 1; + justify-content: flex-end; + } + + .top-bar-icon { + cursor: pointer; + height: 48px; /* Adjust as needed */ + width: auto; /* Maintain aspect ratio */ + transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition effect */ + } + + .top-bar-icon:hover { + transform: scale(1.1); /* Slightly enlarge the image on hover */ + } + + + mat-toolbar { margin-bottom: 0; } @@ -75,7 +121,7 @@ import { PokemonService } from './core/services/pokemon.service'; } .content { - height: 100%; + //height: 100%; overflow: auto; } @@ -94,10 +140,16 @@ import { PokemonService } from './core/services/pokemon.service'; `] }) export class AppComponent { + hoveredRoute: string = ''; constructor( public auth: AuthService, - public pokemonService: PokemonService + public pokemonService: PokemonService, + private router: Router ) { this.pokemonService.initializeCaughtPokemon(); } + + isRouteSelected(route: string): boolean { + return this.router.url === route || this.hoveredRoute === route; + } } \ No newline at end of file diff --git a/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts b/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts index ad0ec91..ed8fb9f 100644 --- a/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts +++ b/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; +import { Component, Input, Output, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatExpansionModule } from '@angular/material/expansion'; import { MatIconModule } from '@angular/material/icon'; @@ -45,8 +45,16 @@ interface PokemonStatusEvent {
{{ this.representative_pokemon?.Name }} - - ({{ this.representative_pokemon?.Form }}) + + + : {{ this.pokemon_family.Male }} + + + : {{ this.pokemon_family.Female }} + + + : {{ this.pokemon_family.Any }} +
@@ -87,7 +95,6 @@ interface PokemonStatusEvent {
Method _PLACEDHOLDER_ - Need: {{ 1 }} @@ -118,7 +125,6 @@ interface PokemonStatusEvent { Breed - Need: {{ 1 }} @@ -266,6 +272,11 @@ export class PlanPokemonComponent { ) {} ngOnInit() { + this.representative_pokemon = null; + this.evolve_to = [] + this.breed_for = [] + this.cdr.detectChanges(); + this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({ next: (pokemon) => { this.representative_pokemon = pokemon @@ -303,7 +314,68 @@ export class PlanPokemonComponent { } }); } + } + + ngOnChanges(changes: SimpleChanges) { + if (changes['pokemon_family']) { + const currentFamily = changes['pokemon_family'].currentValue; + const previousFamily = changes['pokemon_family'].previousValue; + + // Check if there's a meaningful change + if (currentFamily && currentFamily !== previousFamily) { + // Your logic here, e.g., re-fetch data or reset states + this.handlePokemonFamilyChange(currentFamily); + } + } + } + + private handlePokemonFamilyChange(newFamily: PokemonFamilyEntry) { + // This function contains logic to handle the input change. + // For example, resetting component states or fetching additional data. + console.log('Pokemon family has changed:', newFamily); + + this.representative_pokemon = null; + this.evolve_to = [] + this.breed_for = [] + this.cdr.detectChanges(); + + this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({ + next: (pokemon) => { + this.representative_pokemon = pokemon + }, + error: (error) => { + console.error('Error loading Pokemon:', error); + this.cdr.markForCheck(); + } + }); + + for(const target of this.pokemon_family.evolve_to) { + this.pokemonService.getPokemonFromPFIC(target).subscribe({ + next: (pokemon) => { + if(pokemon) { + this.evolve_to.push(pokemon) + } + }, + error: (error) => { + console.error('Error loading Pokemon:', error); + this.cdr.markForCheck(); + } + }); + } + for(const target of this.pokemon_family.breed_for) { + this.pokemonService.getPokemonFromPFIC(target).subscribe({ + next: (pokemon) => { + if(pokemon) { + this.breed_for.push(pokemon) + } + }, + error: (error) => { + console.error('Error loading Pokemon:', error); + this.cdr.markForCheck(); + } + }); + } } get hasTargets(): boolean { diff --git a/src/app/features/plan/plan.component.ts b/src/app/features/plan/plan.component.ts index b95ade9..4c39dec 100644 --- a/src/app/features/plan/plan.component.ts +++ b/src/app/features/plan/plan.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { FormsModule } from '@angular/forms'; @@ -6,6 +6,7 @@ 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"; +import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; @Component({ selector: 'app-plan', @@ -15,7 +16,8 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component"; MatCardModule, FormsModule, PlanGameComponent, - PlanPokemonComponent + PlanPokemonComponent, + ScrollingModule ], template: `
@@ -34,13 +36,14 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";

{{ selectedGame.game_name }} - Pokémon to Catch

-
- -
+ +
+ +
+
`, @@ -90,13 +93,23 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component"; border-radius: 8px; margin-bottom: 20px; } + .pokemon-viewport { + flex: 1; + overflow-y: auto; + padding: 16px; + background: #f5f5f5; + border-radius: 8px; + margin-bottom: 20px; + } `] }) export class PlanComponent implements OnInit { + @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport; + gamePlans: GamePlan[] = []; selectedGame: GamePlan | null = null; - constructor(private planService: PlanService) {} + constructor(private planService: PlanService, private cdr: ChangeDetectorRef) {} ngOnInit() { this.loadPlan(); @@ -114,10 +127,20 @@ export class PlanComponent implements OnInit { } selectGame(game: GamePlan) { + if (this.viewport) { + this.viewport.scrollToIndex(0); // Reset scroll to top when switching games + } + this.selectedGame = null; // Clear the selected game first to avoid stale data + this.cdr.detectChanges(); this.selectedGame = game; + this.cdr.detectChanges(); } onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) { this.loadPlan(); } + + trackByPfic(index: number, item: any): string { + return item.key; // Assuming PFIC or another unique identifier is available + } } \ No newline at end of file diff --git a/src/assets/images/Male_and_female_sign.svg b/src/assets/images/Male_and_female_sign.svg new file mode 100644 index 0000000..6620709 --- /dev/null +++ b/src/assets/images/Male_and_female_sign.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/Male_symbol_(fixed_width).svg b/src/assets/images/Male_symbol_(fixed_width).svg new file mode 100644 index 0000000..7f03b15 --- /dev/null +++ b/src/assets/images/Male_symbol_(fixed_width).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/Venus_symbol_(fixed_width).svg b/src/assets/images/Venus_symbol_(fixed_width).svg new file mode 100644 index 0000000..90d638b --- /dev/null +++ b/src/assets/images/Venus_symbol_(fixed_width).svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/map.png b/src/assets/images/map.png new file mode 100644 index 0000000..99f04e1 Binary files /dev/null and b/src/assets/images/map.png differ diff --git a/src/assets/images/map_selected.png b/src/assets/images/map_selected.png new file mode 100644 index 0000000..87c0922 Binary files /dev/null and b/src/assets/images/map_selected.png differ diff --git a/src/assets/images/poke_box.png b/src/assets/images/poke_box.png new file mode 100644 index 0000000..bede18e Binary files /dev/null and b/src/assets/images/poke_box.png differ diff --git a/src/assets/images/poke_box_selected.png b/src/assets/images/poke_box_selected.png new file mode 100644 index 0000000..6a8fa6f Binary files /dev/null and b/src/assets/images/poke_box_selected.png differ