Merge pull request #5 from MiquelRForgeFlow/main-imp-all-descriptions

[IMP] Be able to change dex descriptions
JoanSForgeFlow · May 16, 2023 · af8d5fc · af8d5fc
2 parents cbbc584 + 07aa997
commit af8d5fc
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -69,7 +69,8 @@ flex-wrap: wrap;
 }
 
 .search-input,
-.type-select {
+.type-select,
+.version-select {
 padding: 8px;
 font-size: 14px;
 border-radius: 4px;

diff --git a/main.ts b/main.ts
@@ -157,14 +157,25 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
         </tr>`)
       .join('\n');
 
+   const descriptionsSelect = pokemon.pokedexDescriptions[]
+      .map(description => `
+        <option value="${description.version}" class="tag">${description.version.charAt(0).toUpperCase() + description.version.slice(1)}</option>`)
+      .join('\n');
+
+   const descriptionsRows = pokemon.pokedexDescriptions[]
+      .map(description => `
+        <p class="description" data-version='${description.version}'>${description.flavor_text}</p>`)
+      .join('\n');
 
     return `
   <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>
       <h2 class="section-title">Pokédex Description</h2>
-      <p class="description">${pokemon.pokedexDescription}</p>
+      <select id="version-select" class="version-select">
+      ${descriptionsSelect}
+      </select> ${descriptionsRows}
       <div class="pokemon-container">
         <img src="${pokemon.officialArtworkUrl}" alt="${pokemon.name}" />
         <table>
@@ -194,6 +205,23 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
         </table>
       </div>
       <a href="index.html" class="back-button">Back to Menu</a>
+      <script>
+        function filterVersions() {
+          const selectedVersion = document.getElementById("version-select").value;
+          const dexDescriptions = document.querySelectorAll(".description");
+          for (const dexDescription of dexDescriptions) {
+            const version = JSON.parse(dexDescription.dataset.version);
+            const first_version = JSON.parse(dexDescriptions[0].dataset.version);
+            const versionMatch = (selectedVersion === "" && first_version === version) || (selectedVersion === version);
+            if (versionMatch) {
+              dexDescription.parentElement.style.display = "inline-block";
+            } else {
+              dexDescription.parentElement.style.display = "none";
+            }
+          }
+        }
+        document.getElementById("version-select").addEventListener("input", filterVersions);
+      </script>
     </body>
   </html>`;
   }

diff --git a/pokemon-detail.ts b/pokemon-detail.ts
@@ -15,6 +15,11 @@ interface Stat {
   value: number;
 }
 
+interface DexDescription {
+  version: string;
+  flavor_text: string;
+}
+
 export class PokemonDetails {
     constructor(
       public id: number,
@@ -31,7 +36,7 @@ export class PokemonDetails {
       public resistantTo: string[],
       public superResistantTo: string[],
       public immuneTo: string[],
-      public pokedexDescription: string,
+      public pokedexDescriptions: DexDescription[],
       public stats: Stat[]
     ) {}
   }
@@ -61,7 +66,7 @@ export class PokemonDetails {
         };
       });
       const damageRelations = await getPokemonDamageRelations(id);
-      const { pokedexDescription } = await getPokemonSpeciesData(id);
+      const pokedexDescriptions = await getPokemonDescriptions(id);
       return new PokemonDetails(
         id,
         data.species.name,
@@ -77,7 +82,7 @@ export class PokemonDetails {
         damageRelations.resistantTo,
         damageRelations.superResistantTo,
         damageRelations.immuneTo,
-        pokedexDescription,
+        pokedexDescriptions,
         stats
       );
     } catch (error) {
@@ -102,16 +107,18 @@ export class PokemonDetails {
     return descriptions;
   }
 
-  async function getPokemonSpeciesData(pokemonId: number): Promise<{ pokedexDescription: string }> {
+  async function getPokemonDescriptions(pokemonId: number): Promise<pokedexDescriptions: DexDescription[]> {
     const response = await fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`);
     const data = await response.json();
-    const englishFlavorTextEntry = data.flavor_text_entries.find((entry: { language: { name: string } }) => entry.language.name === 'en');
-    if (englishFlavorTextEntry) {
-      const pokedexDescription = cleanText(englishFlavorTextEntry.flavor_text);
-      return { pokedexDescription };
+    const englishFlavorTextEntries = data.flavor_text_entries.filter((entry: { language: { name: string } }) => entry.language.name === 'en');
+    if (englishFlavorTextEntries) {
+      const pokedexDescriptions: DexDescription[] = englishFlavorTextEntries.map((entry: { flavor_text: string; version: { name: string } }) => {
+        return { 'version': entry.version.name; 'flavor_text': cleanText(entry.flavor_text) };
+      });
+      return pokedexDescriptions;
     } else {
       console.error(`No English flavor text entry found for Pokémon ID ${pokemonId}`);
-      return { pokedexDescription: 'No description available' };
+      return [{ 'version': 'no version'; 'flavor_text': 'No description available' }];
     }
   }