diff --git a/src/app/models/other-evolution.model.ts b/src/app/models/other-evolution.model.ts new file mode 100644 index 0000000..2ef3df2 --- /dev/null +++ b/src/app/models/other-evolution.model.ts @@ -0,0 +1,5 @@ +export class OtherEvolution { + pokemonId: number; + name: string; + types?: string[]; +} \ No newline at end of file diff --git a/src/app/models/pokemon-specie.model.ts b/src/app/models/pokemon-specie.model.ts index 59deb14..d5ed019 100644 --- a/src/app/models/pokemon-specie.model.ts +++ b/src/app/models/pokemon-specie.model.ts @@ -6,10 +6,16 @@ export interface PokemonSpecie { is_legendary: boolean; is_mythical: boolean; habitat: { name: string }; + varieties: Variety[]; } export interface Generation { name: string; url: string; numeral: number; +} + +export interface Variety { + is_default: boolean; + pokemon: { name: string, url: string } } \ No newline at end of file diff --git a/src/app/pages/pokemon-details/pokemon-details.page.html b/src/app/pages/pokemon-details/pokemon-details.page.html index 6b0844d..58b0c21 100644 --- a/src/app/pages/pokemon-details/pokemon-details.page.html +++ b/src/app/pages/pokemon-details/pokemon-details.page.html @@ -10,7 +10,8 @@
- +
@@ -23,7 +24,8 @@

Generation: {{pokemonSpecie?.generation?.numeral}}

Height: {{ (details.height / 10) | number:'1.2-2' }} m

Weight: {{ (details.weight / 10) | number:'1.2-2' }} kg

-

Habitat: {{ pokemonSpecie.habitat.name }}

+

Habitat: {{ pokemonSpecie.habitat.name }} +

Base Experience: {{ details.base_experience }}

Shape: {{pokemonSpecie?.shape?.name}}

Is Baby: {{ pokemonSpecie?.is_baby | booleanToString }}

@@ -62,20 +64,29 @@

Evolution Chart

- + -

+

+ +

- + - (Level {{ecd.minLevel}} during {{ecd.timeOfDay ? ecd.timeOfDay : 'Rain'}}, {{ecd.relativePhysicalStats | relativePhysicalStats}}) + (Level {{ecd.minLevel}} during + {{ecd.timeOfDay ? ecd.timeOfDay : 'Rain'}} + + , {{ecd.relativePhysicalStats | + relativePhysicalStats}}) + - (Level Up with Min Happiness {{ecd.minHappiness}}, during {{ecd.timeOfDay}}) + (Level Up with Min Happiness {{ecd.minHappiness}}, + during {{ecd.timeOfDay}}) @@ -100,7 +111,8 @@

- (Level Up during {{ecd.timeOfDay}} holding {{ecd.heldItem}}) + (Level Up during {{ecd.timeOfDay}} holding {{ecd.heldItem}}) @@ -108,20 +120,26 @@

-

(Use {{ecd.item.name}}, {{ecd.gender}})

- +

(Use {{ecd.item.name}} + , {{ecd.gender}} + ) +

+ -

(Trade holding {{ecd.heldItem}})

+

(Trade holding {{ecd.heldItem}})

 - + - +

#{{ecd.pokemonIndex}}

@@ -138,5 +156,25 @@

{{ details.name }} doesn't evolve.

 + + +

Other Evolutions

+ + + + + + + +

#{{details.id}}

+

{{ev.name}}

+ + {{ type }} + + + + + - + \ No newline at end of file diff --git a/src/app/pages/pokemon-details/pokemon-details.page.ts b/src/app/pages/pokemon-details/pokemon-details.page.ts index 0ab1e91..2a50692 100644 --- a/src/app/pages/pokemon-details/pokemon-details.page.ts +++ b/src/app/pages/pokemon-details/pokemon-details.page.ts @@ -1,6 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { EvolutionChain, EvolutionChainDetails } from 'src/app/models/evolution-chain.model'; +import { OtherEvolution } from 'src/app/models/other-evolution.model'; import { PokemonSpecie } from 'src/app/models/pokemon-specie.model'; import { PokemonService } from 'src/app/services/pokemon.service'; @@ -12,11 +13,12 @@ import { PokemonService } from 'src/app/services/pokemon.service'; export class PokemonDetailsPage implements OnInit { details: any; - statsSum = 0; + statsSum = 0; pokemonSpecie: PokemonSpecie; evolutionChain: EvolutionChain; evolutionChainDetailsList: EvolutionChainDetails[]; + otherEvolutionList: OtherEvolution[]; constructor(private router: Router,private route: ActivatedRoute, private pokeService: PokemonService) { } @@ -34,19 +36,56 @@ export class PokemonDetailsPage implements OnInit { stats.forEach(stat =>{ this.statsSum+= stat.base_stat; }); + + this.pokeService.getSpecies(params.index).subscribe((specie: any)=>{ + this.pokemonSpecie = specie; + if(this.pokemonSpecie && this.pokemonSpecie.evolution_chain?.url){ + this.pokeService.getEvolutionChain(this.pokemonSpecie.evolution_chain.url).subscribe(res =>{ + this.evolutionChain = res; + this.processEvolutionChain(); + }); + } + + if(this.pokemonSpecie.varieties?.length){ + this.processOtherEvolutions(); + } + }); }); + } + } + + private processOtherEvolutions(){ + this.otherEvolutionList = this.pokemonSpecie.varieties.filter(x => !x.is_default).map(v => { + let pokemonId = Number(v.pokemon.url.replace("https://pokeapi.co/api/v2/pokemon/", "").replace("/", "")); + let name: string; + if(v.pokemon.name.includes("-mega")){ + name = `Mega ${this.details.name}`; + + if(v.pokemon.name.includes("mega-x")){ + name += " X"; + }else if(v.pokemon.name.includes("mega-y")){ + name += " Y"; + } + }else if(v.pokemon.name.includes("-gmax")){ + name = `${this.details.name} Gigamax`; + } + + return { + pokemonId: pokemonId, + name: name + } + }); - this.pokeService.getSpecies(params.index).subscribe((specie: any)=>{ - this.pokemonSpecie = specie; - if(this.pokemonSpecie && this.pokemonSpecie.evolution_chain?.url){ - this.pokeService.getEvolutionChain(this.pokemonSpecie.evolution_chain.url).subscribe(res =>{ - this.evolutionChain = res; - this.processEvolutionChain(); + this.otherEvolutionList.forEach(v => { + this.pokeService.getPokeDetails(v.pokemonId).subscribe((res: any) => { + if(res && res.types){ + v.types = (res.types as any[]).map(x => { + return x.type.name; }); } }); - } - } + }) + } goToPokemon(index: number){ this.router.navigate(["/pokemon-details/"+index]);