[IMP] Add old abilities

main.ts

@@ -124,7 +124,18 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
           <td class="value abilities-text">${ability.description}</td>
         </tr>`;
     })
-    .join('\n'); 
+    .join('\n');
+    const pastAbilitiesTableRows = pokemon.pastAbilities
+    .map(ability => {
+      const hiddenTag = ability.is_hidden ? `<span class="hidden-ability">hidden</span>` : '';
+      const generationTag = ability.generation ? `<span class="generation-ability">until ${ability.generation}</span>` : '';
+      return `
+        <tr>
+          <td class="attribute abilities-text">${ability.name.charAt(0).toUpperCase() + ability.name.slice(1)}: ${hiddenTag} ${generationTag}</td>
+          <td class="value abilities-text">${ability.description}</td>
+        </tr>`;
+    })
+    .join('\n');
     const getStatBar = (value: number, maxValue: number) => {
       const percentage = Math.round((value / maxValue) * 100);
       const greenThreshold = 35;
@@ -192,6 +203,10 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
             <th colspan="2" class="section-title-cell">Pokémon Abilities</th>
           </tr>
           ${abilitiesTableRows}
+          <tr style="${pokemon.pastAbilities ? '' : 'display: none;'}>
+            <th colspan="2" class="section-title-cell">Pokémon Old Abilities</th>
+          </tr>
+          ${pokemon.pastAbilities ? pastAbilitiesTableRows : ''}
         </table>
         <table>
           <tr>

pokemon-detail.ts

@@ -8,6 +8,7 @@ interface Ability {
   name: string;
   description: string;
   is_hidden: boolean;
+  generation?: string;
 }
 
 interface Stat {
@@ -31,6 +32,7 @@ export class PokemonDetails {
       public weight: number,
       public types: string[],
       public abilities: Ability[],
+      public pastAbilities: Ability[],
       public superWeakTo: string[],
       public weakTo: string[],
       public normal: string[],
@@ -62,6 +64,26 @@ export class PokemonDetails {
           is_hidden: abilityData.is_hidden,
         };
       });
+      const pastAbilitiesData = Ability[]
+      data.past_abilities.forEach((pastAbilityData: any) => {
+        const generationName = await getGenerationName(pastAbilityData.generation);
+        pastAbilityData.abilities.forEach((abilityData: any) => {
+          pastAbilitiesData.push({
+            ability: abilityData.ability,
+            is_hidden: abilityData.is_hidden,
+            generation: generationName,
+          });
+        });
+      });
+      const pastAbilitiesDescriptions = await getAbilitiesDescriptions(pastAbilitiesData);
+      const pastAbilities = pastAbilitiesData.map((abilityData: any, index: number) => {
+        return {
+          name: abilityData.ability.name,
+          description: pastAbilitiesDescriptions[index],
+          is_hidden: abilityData.is_hidden,
+          generation: abilityData.generation,
+        };
+      });
       const stats = data.stats.map((stat: any) => {
         return {
           name: stat.stat.name,
@@ -83,6 +105,7 @@ export class PokemonDetails {
         weight,
         types,
         abilities,
+        pastAbilities,
         damageRelations.superWeakTo,
         damageRelations.weakTo,
         damageRelations.normal,
@@ -114,6 +137,13 @@ export class PokemonDetails {
     return descriptions;
   }
 
+  sync function getGenerationName(generationData: { url: string }): Promise<string> {
+    const response = await fetch(generationData.url);
+    const data = await response.json();
+    const englishName = data.names.find((entry: { language: { name: string } }) => entry.language.name === 'en').name;
+    return englishName;
+  }
+
   async function getPokemonDescriptions(pokemonId: number): Promise<DexDescription[]> {
     const response = await fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`);
     const data = await response.json();