From 6a1072c81c28ea5cf901b8bf78b51ebe00c85558 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Nov 2024 14:19:09 +0000 Subject: [PATCH] - Move the 2 features over to the top of the page --- src/app/app.component.ts | 108 +++++++++++++----- .../plan-pokemon/plan-pokemon.component.ts | 6 +- src/assets/images/map.png | Bin 0 -> 1508 bytes src/assets/images/map_selected.png | Bin 0 -> 2379 bytes src/assets/images/poke_box.png | Bin 0 -> 1684 bytes src/assets/images/poke_box_selected.png | Bin 0 -> 1088 bytes 6 files changed, 83 insertions(+), 31 deletions(-) create mode 100644 src/assets/images/map.png create mode 100644 src/assets/images/map_selected.png create mode 100644 src/assets/images/poke_box.png create mode 100644 src/assets/images/poke_box_selected.png diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3c8cd69..f0b9900 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; } @@ -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 347d5ff..ed8fb9f 100644 --- a/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts +++ b/src/app/features/plan/plan-pokemon/plan-pokemon.component.ts @@ -95,7 +95,6 @@ interface PokemonStatusEvent { Method _PLACEDHOLDER_ - Need: {{ 1 }} @@ -126,7 +125,6 @@ interface PokemonStatusEvent { Breed - Need: {{ 1 }} @@ -277,7 +275,8 @@ export class PlanPokemonComponent { 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 @@ -338,6 +337,7 @@ export class PlanPokemonComponent { this.representative_pokemon = null; this.evolve_to = [] this.breed_for = [] + this.cdr.detectChanges(); this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({ next: (pokemon) => { diff --git a/src/assets/images/map.png b/src/assets/images/map.png new file mode 100644 index 0000000000000000000000000000000000000000..99f04e111e9e899a95392e3be3ceee3e5886ee59 GIT binary patch literal 1508 zcmV{E~_QWhpyqz3&Vh(e;Li0Y-D zq>?l$gUE`aG!m?2MeV7mR6^{b2O%@e{+QOxIp_X**m0S?duR8~%$>P2+kT#w-#x$I z`Q9(*oH={v+@Xjdg+Axp-6U6#yh%i6k^C9JlUnPK(-I~VOq$}H+eq?R0GFk-|Hl|} z4S*Bv5LXnc>hH)o_ZG>mNH+ukriBm|wn0~+jF=Kac!lJB8FHc)>gfm!FfwH}WX$OU zaB=G-6@~|J1{hvb`n~r*V(gR=04G!8lbOSD9IsK%xz!kZ<1xv5NbV{^S%J(~N^Mgl zS0=BJ+@iJqpa@kRz+y#meli+Dc)18Q9fC0;GAj`*MNxEYoTQT^&$d!kI}wp9F?wqP z17KRB-B|!}ts*2J)>?m*ySjq#-v0*RlIobM(e{6hDOy0240!J!7m>M2sZX`mJMt*n z&8EZWT=X(eqj z#W}aoIk&@mzcYl8%MfoR?O13BNPdaR&=!&9-uqjPG5g!lcSE#%q=XP|#^||D0JpWe z-)3mX^y$wS>lmgM+7zZtNny&A6!QG^nHfSDjN^EEbx&c&2+xqO3CY9D|ZBu8DV@nzc}$-zAOPH-K`*UtCry+0K~SlZLm zGv4!|G2}9RNNxf!Bad1+GgE8*NWDpUttq`Z)yW-_b!*FOq-+7;@~D+Fr8th?s5dE> zHN_Y+R4$hnDWz7R@r~Is0810GF93YgV76uU0nbHo%TT=!^8tuY7eW}acH-rOYq?&_HL{)tAlq}_Bs$#vu8)I1N@4A$E3z4x~R zcnHH!@izDN_Wsn0z9ypHksu+2qgw0Mh%sglfITfKUI+Cov;yF{D2k4@N=&CP(MUNc zBJYqqW{mj(jlJjdXU14FZ1&zKYhK@IvGGjVWQ=*S(Zc7^S|9Y@{|aEB67nLlv)Q`U zh{&~h)=M=-MBcU5Hf>0S-$Mw?j4_V^xIjeSw$^^#M7?Gf`jDj&opWRUfe?{J*4jqD zT4*VikJ^_SNIh+gxfH|i^;Fl(bmF>ft^KxvPTPVp=2ZZn)tUAO$@`Hoq!x6}ox|w! z`DcwW9evWM!pu^sG~uHI5s}{B-s7lYNZLp-Bu|LQ)m5=R0CNExZ$fZ8IMvhBQ};28 zEGQ8A_C{! zdXle?)9xIAQoBU8ndull+dIO@YyBaFts=6q2vwcN$Ua4D{V2&dixkr#xa!SYS!?}3 z1V*D@o25kvSOq0_J4H0od=o-|!zFrPYSI>A(K~0000< KMNUMnLSTZMbK=GT literal 0 HcmV?d00001 diff --git a/src/assets/images/map_selected.png b/src/assets/images/map_selected.png new file mode 100644 index 0000000000000000000000000000000000000000..87c092251bf1852510d8e782058c838f1ef16eb8 GIT binary patch literal 2379 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