Displaying Mega and Gigamax evolutions

cristofima · Sep 20, 2021 · b949724 · b949724
1 parent 17f708d
commit b949724
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 23 deletions.
diff --git a/src/app/models/other-evolution.model.ts b/src/app/models/other-evolution.model.ts
@@ -0,0 +1,5 @@
+export class OtherEvolution {
+    pokemonId: number;
+    name: string;
+    types?: string[];
+}
diff --git 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 }
 }
diff --git a/src/app/pages/pokemon-details/pokemon-details.page.html b/src/app/pages/pokemon-details/pokemon-details.page.html
@@ -10,7 +10,8 @@
 <ion-content>
   <ng-container *ngIf="details">
     <div class="ion-text-center">
-      <img style="max-height: 250px;" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/{{details.id | number:'3.0-0'}}.png"/>
+      <img style="max-height: 250px;"
+        src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/{{details.id | number:'3.0-0'}}.png" />
     </div>
 
     <ion-card>
@@ -23,7 +24,8 @@
           <p><b>Generation</b>: {{pokemonSpecie?.generation?.numeral}}</p>
           <p><b>Height</b>: {{ (details.height / 10) | number:'1.2-2' }} m</p>
           <p><b>Weight</b>: {{ (details.weight / 10) | number:'1.2-2' }} kg</p>
-          <p *ngIf="pokemonSpecie?.habitat" class="ion-text-capitalize"><b>Habitat</b>: {{ pokemonSpecie.habitat.name }}</p>
+          <p *ngIf="pokemonSpecie?.habitat" class="ion-text-capitalize"><b>Habitat</b>: {{ pokemonSpecie.habitat.name }}
+          </p>
           <p><b>Base Experience</b>: {{ details.base_experience }}</p>
           <p class="ion-text-capitalize"><b>Shape</b>: {{pokemonSpecie?.shape?.name}}</p>
           <p><b>Is Baby</b>: {{ pokemonSpecie?.is_baby | booleanToString }}</p>
@@ -62,20 +64,29 @@ <h4>Evolution Chart</h4>
 
       <ng-container *ngIf="(evolutionChainDetailsList.length > 1); else noEvolution">
         <ion-grid>
-          <ion-row (click)="goToPokemon(ecd.pokemonIndex)" *ngFor="let ecd of evolutionChainDetailsList" [ngSwitch]="ecd.triggerName">
+          <ion-row (click)="goToPokemon(ecd.pokemonIndex)" *ngFor="let ecd of evolutionChainDetailsList"
+            [ngSwitch]="ecd.triggerName">
             <ion-col class="ion-text-center" *ngIf="ecd.triggerName" size="12">
-              <h1><ion-icon name="arrow-down-outline"></ion-icon></h1>
+              <h1>
+                <ion-icon name="arrow-down-outline"></ion-icon>
+              </h1>
             </ion-col>
-            
+
             <ng-container *ngSwitchCase="'level-up'">
               <ng-container *ngIf="ecd.minLevel">
                 <ion-col class="ion-text-center" size="12">
-                  <span>(Level {{ecd.minLevel}}<ng-container *ngIf="ecd.timeOfDay || ecd.needsOverworldRain"> during <span class="ion-text-capitalize"><b>{{ecd.timeOfDay ? ecd.timeOfDay : 'Rain'}}</b></span></ng-container><ng-container *ngIf="ecd.relativePhysicalStats != null">, <b>{{ecd.relativePhysicalStats | relativePhysicalStats}}</b></ng-container>)</span>
+                  <span>(Level {{ecd.minLevel}}<ng-container *ngIf="ecd.timeOfDay || ecd.needsOverworldRain"> during
+                      <span class="ion-text-capitalize"><b>{{ecd.timeOfDay ? ecd.timeOfDay : 'Rain'}}</b></span>
+                    </ng-container>
+                    <ng-container *ngIf="ecd.relativePhysicalStats != null">, <b>{{ecd.relativePhysicalStats |
+                        relativePhysicalStats}}</b></ng-container>)
+                  </span>
                 </ion-col>
               </ng-container>
               <ng-container *ngIf="ecd.minHappiness">
                 <ion-col class="ion-text-center" size="12">
-                  <span>(Level Up with <b>Min Happiness</b> {{ecd.minHappiness}}<ng-container *ngIf="ecd.timeOfDay">, during <span class="ion-text-capitalize"><b>{{ecd.timeOfDay}}</b></span></ng-container>)</span>
+                  <span>(Level Up with <b>Min Happiness</b> {{ecd.minHappiness}}<ng-container *ngIf="ecd.timeOfDay">,
+                      during <span class="ion-text-capitalize"><b>{{ecd.timeOfDay}}</b></span></ng-container>)</span>
                 </ion-col>
               </ng-container>
               <ng-container *ngIf="ecd.minAffection">
@@ -100,28 +111,35 @@ <h1><ion-icon name="arrow-down-outline"></ion-icon></h1>
               </ng-container>
               <ng-container *ngIf="ecd.timeOfDay && ecd.heldItem">
                 <ion-col class="ion-text-center" size="12">
-                  <span>(Level Up during <span class="ion-text-capitalize"><b>{{ecd.timeOfDay}}</b></span> holding <span class="ion-text-capitalize"><b>{{ecd.heldItem}}</b></span>)</span>
+                  <span>(Level Up during <span class="ion-text-capitalize"><b>{{ecd.timeOfDay}}</b></span> holding <span
+                      class="ion-text-capitalize"><b>{{ecd.heldItem}}</b></span>)</span>
                 </ion-col>
               </ng-container>
             </ng-container>
 
             <ng-container *ngSwitchCase="'use-item'">
               <ng-container *ngIf="ecd.item">
                 <ion-col class="ion-text-center" size="12">
-                  <p class="ion-text-capitalize">(Use <b>{{ecd.item.name}}</b><ng-container *ngIf="ecd.gender">, <span class="ion-text-capitalize">{{ecd.gender}}</span></ng-container>)</p>
-                  <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/{{ecd.item.name}}.png"/>
+                  <p class="ion-text-capitalize">(Use <b>{{ecd.item.name}}</b>
+                    <ng-container *ngIf="ecd.gender">, <span class="ion-text-capitalize">{{ecd.gender}}</span>
+                    </ng-container>)
+                  </p>
+                  <img
+                    src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/{{ecd.item.name}}.png" />
                 </ion-col>
               </ng-container>
             </ng-container>
 
             <ng-container *ngSwitchCase="'trade'">
               <ion-col class="ion-text-center" size="12">
-                <p>(Trade<ng-container *ngIf="ecd.heldItem"> holding <span class="ion-text-capitalize"><b>{{ecd.heldItem}}</b></span></ng-container>)</p>
+                <p>(Trade<ng-container *ngIf="ecd.heldItem"> holding <span
+                      class="ion-text-capitalize"><b>{{ecd.heldItem}}</b></span></ng-container>)</p>
               </ion-col>
             </ng-container>
-  
+
             <ion-col size="6">
-              <img style="max-height: 150px;" src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/{{ecd.pokemonIndex | number:'3.0-0'}}.png" />
+              <img style="max-height: 150px;"
+                src="https://assets.pokemon.com/assets/cms2/img/pokedex/detail/{{ecd.pokemonIndex | number:'3.0-0'}}.png" />
             </ion-col>
             <ion-col size="6">
               <p><b>#{{ecd.pokemonIndex}}</b></p>
@@ -138,5 +156,25 @@ <h1><ion-icon name="arrow-down-outline"></ion-icon></h1>
         <p><span class="ion-text-capitalize">{{ details.name }}</span> doesn't evolve.</p>
       </ng-template>
     </ng-container>
+
+    <ng-container *ngIf="otherEvolutionList && otherEvolutionList.length">
+      <h4>Other Evolutions</h4>
+
+      <ion-grid>
+        <ion-row *ngFor="let ev of otherEvolutionList; let i = index">
+          <ion-col size="6">
+            <img style="max-height: 150px;"
+              src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/0{{details.id | number:'2.0-0'}}_f{{i + 2}}.png" />
+          </ion-col>
+          <ion-col size="6">
+            <p><b>#{{details.id}}</b></p>
+            <p class="ion-text-capitalize">{{ev.name}}</p>
+            <ion-chip [ngClass]="type" *ngFor="let type of ev.types">
+              <ion-label class="ion-text-capitalize">{{ type }}</ion-label>
+            </ion-chip>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </ng-container>
   </ng-container>
-</ion-content>
+</ion-content>
diff --git 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]);