Merge pull request #9 from MiquelRForgeFlow/main-truly-get-correct-name

JoanSForgeFlow · web-flow · commit e8e7ead142ab · 2023-10-26T10:18:32.000+02:00
[FIX] Truly get correct pokemon name
diff --git a/main.ts b/main.ts
@@ -11,10 +11,10 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
   const pokemonLinks = pokemons.map(
       (pokemon) => `
       <li>
-      <a class="pokemon-card" href="${String(pokemon.id).padStart(4, '0')}_${pokemon.name}.html" data-types='${JSON.stringify(pokemon.types)}' data-baby='${pokemon.is_baby}' data-legendary='${pokemon.is_legendary}' data-mythical='${pokemon.is_mythical}' style="background-image: linear-gradient(135deg, ${getTypeColor(toPokemonType(pokemon.types[0]))} 0%, ${getTypeColor(toPokemonType(pokemon.types[0]))} 50%, ${pokemon.types[1] ? getTypeColor(toPokemonType(pokemon.types[1])) : getTypeColor(toPokemonType(pokemon.types[0]))} 50%, ${pokemon.types[1] ? getTypeColor(toPokemonType(pokemon.types[1])) : getTypeColor(toPokemonType(pokemon.types[0]))} 100%);">
+      <a class="pokemon-card" href="${String(pokemon.id).padStart(4, '0')}_${pokemon.codename}.html" data-types='${JSON.stringify(pokemon.types)}' data-baby='${pokemon.is_baby}' data-legendary='${pokemon.is_legendary}' data-mythical='${pokemon.is_mythical}' style="background-image: linear-gradient(135deg, ${getTypeColor(toPokemonType(pokemon.types[0]))} 0%, ${getTypeColor(toPokemonType(pokemon.types[0]))} 50%, ${pokemon.types[1] ? getTypeColor(toPokemonType(pokemon.types[1])) : getTypeColor(toPokemonType(pokemon.types[0]))} 50%, ${pokemon.types[1] ? getTypeColor(toPokemonType(pokemon.types[1])) : getTypeColor(toPokemonType(pokemon.types[0]))} 100%);">
           <div class="pokemon-id">#${String(pokemon.id).padStart(4, '0')}</div>
           <img src="${pokemon.imageUrl}" alt="${pokemon.name}" />
-          <h2>${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)}</h2>
+          <h2>${pokemon.name}</h2>
         </a>
       </li>`
     ).join('\n');
@@ -83,7 +83,7 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
             const isBaby = JSON.parse(pokemonCard.dataset.baby);
             const isLegendary = JSON.parse(pokemonCard.dataset.legendary);
             const isMythical = JSON.parse(pokemonCard.dataset.mythical);
-            const nameMatch = searchText === "" || pokemonName.includes(searchText);
+            const nameMatch = searchText === "" || pokemonName.includes(searchText.toLowerCase());
             const typeMatch = selectedType === "" || pokemonTypes.includes(selectedType);
             const babyMatch = !babyFilter || isBaby;
             const legendaryMatch = !legendaryFilter || isLegendary;
@@ -171,7 +171,7 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
   <html>
     ${head(pokemon.name)}
     <body>
-    <h1><a href="index.html" class="back-to-menu"><i class="fas fa-arrow-left"></i></a> ${pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1)} <span class="pokemon-id">#${String(pokemon.id).padStart(4, '0')}</span></h1>
+    <h1><a href="index.html" class="back-to-menu"><i class="fas fa-arrow-left"></i></a> ${pokemon.name} <span class="pokemon-id">#${String(pokemon.id).padStart(4, '0')}</span></h1>
       <div class="pokemon-container">
         <img src="${pokemon.officialArtworkUrl}" alt="${pokemon.name}" />
         <table>
@@ -300,6 +300,6 @@ function head(title: string): string {
       continue;
     }
     const detailHtml = renderPokemonDetail(pokemonDetail);
-    await writeFile(`${String(pokemonDetail.id).padStart(4, '0')}_${pokemonDetail.name}.html`, detailHtml);
+    await writeFile(`${String(pokemonDetail.id).padStart(4, '0')}_${pokemonDetail.codename}.html`, detailHtml);
   }
 })();
diff --git a/pokemon-detail.ts b/pokemon-detail.ts
@@ -24,6 +24,7 @@ export class PokemonDetails {
     constructor(
       public id: number,
       public name: string,
+      public codename: string,
       public imageUrl: string,
       public officialArtworkUrl: string,
       public height: number,
@@ -69,10 +70,13 @@ export class PokemonDetails {
       });
       const damageRelations = await getPokemonDamageRelations(id);
       const pokedexDescriptions = await getPokemonDescriptions(id);
-      const name = data2.names.find((entry: { language: { name: string } }) => entry.language.name === 'en');
+      const codename = data.species.name;
+      const nameEntry = data2.names.find((entry: { language: { name: string } }) => entry.language.name === 'en');
+      const name = nameEntry ? nameEntry.name : codename.charAt(0).toUpperCase() + codename.slice(1);
       return new PokemonDetails(
         id,
-        name ? name.name : data.species.name,
+        name,
+        codename,
         imageUrl,
         officialArtworkUrl,
         height,
diff --git a/pokemon.ts b/pokemon.ts
@@ -4,6 +4,7 @@ export class Pokemon {
     constructor(
       public id: number,
       public name: string,
+      public codename: string,
       public imageUrl: string,
       public types: string[],
       public is_baby: boolean,
@@ -33,8 +34,11 @@ export class Pokemon {
             const is_baby = speciesData.is_baby;
             const is_legendary = speciesData.is_legendary;
             const is_mythical = speciesData.is_mythical;
+            const codename = data.species.name;
+            const nameEntry = data2.names.find((entry: { language: { name: string } }) => entry.language.name === 'en');
+            const name = nameEntry ? nameEntry.name : codename.charAt(0).toUpperCase() + codename.slice(1);
 
-            pokemons.push(new Pokemon(i, data.species.name, imageUrl, types, is_baby, is_legendary, is_mythical));
+            pokemons.push(new Pokemon(i, name, codename, imageUrl, types, is_baby, is_legendary, is_mythical));
         } else {
             console.error(`Error fetching data for Pokémon ID ${i}: ${response.statusText}`);
         }
