[FIX] typescript errors and improve pokedex version description filter

JoanSForgeFlow · May 16, 2023 · 9ea93c1 · 9ea93c1
1 parent af8d5fc
commit 9ea93c1
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 24 deletions.
diff --git a/css/pokemon_styles.css b/css/pokemon_styles.css
@@ -55,6 +55,46 @@ width: 80%;
 max-width: 1000px;
 margin-top: 16px;
 }
+.pokedex-container {
+display: flex;
+justify-content: center;
+align-items: center;
+width: 80%;
+max-width: 1000px;
+}
+.version-container {
+width: 25%;
+}
+.description-container {
+width: 75%;
+}
+.version-select {
+font-size: 16px;
+padding: 8px;
+border: 1px solid #ccc;
+border-radius: 4px;
+background-color: #ffd6d6;
+color: #000;
+width: 80%;
+max-width: 970px;
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.version-select:focus {
+outline: none;
+border-color: #ff0000;
+box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
+}
+#version-select {
+width: 100%;
+}
+@media screen and (max-width: 768px) {
+    .pokedex-container {
+      flex-direction: column;
+    }
+    .version-container, .description-container {
+      width: 100%;
+    }
+  }
 img {
 width: 70%;
 max-width: 500px;
@@ -185,13 +225,10 @@ background-color: #f8f8f8;
 padding: 16px;
 border-radius: 8px;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-margin-top: 16px;
 font-size: 14px;
-line-height: 1.4;
+line-height: 1.2;
 text-align: justify;
-width: 80%;
 max-width: 970px;
-margin-bottom: 16px;
 }
 .section-title-cell {
 background-color: #ff0000;

diff --git a/main.ts b/main.ts
@@ -157,25 +157,21 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
         </tr>`)
       .join('\n');
 
-   const descriptionsSelect = pokemon.pokedexDescriptions[]
+   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>`)
+    const descriptionsRows = pokemon.pokedexDescriptions
+      .map((description, index) => `
+        <p class="description" data-version='${description.version}' style="${index !== 0 ? 'display: none;' : ''}">${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>
-      <select id="version-select" class="version-select">
-      ${descriptionsSelect}
-      </select> ${descriptionsRows}
       <div class="pokemon-container">
         <img src="${pokemon.officialArtworkUrl}" alt="${pokemon.name}" />
         <table>
@@ -204,23 +200,32 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
           ${statsTableRows}
         </table>
       </div>
+      <h2 class="section-title">Pokédex Description</h2>
+      <div class="pokedex-container">
+        <div class="version-container">
+          <select id="version-select" class="version-select">
+            ${descriptionsSelect}
+          </select>
+        </div>
+        <div class="description-container">
+          ${descriptionsRows}
+        </div>
+      </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";
+            const version = dexDescription.dataset.version;
+            if (selectedVersion === version) {
+              dexDescription.style.display = "block";
             } else {
-              dexDescription.parentElement.style.display = "none";
+              dexDescription.style.display = "none";
             }
           }
         }
-        document.getElementById("version-select").addEventListener("input", filterVersions);
+        document.getElementById("version-select").addEventListener("change", filterVersions);
       </script>
     </body>
   </html>`;
@@ -284,7 +289,7 @@ function head(title: string): string {
 }
 
 (async () => {
-  const pokemons = await loadPokemons(1010);
+  const pokemons = await loadPokemons(20);
   const indexHtml = renderPokemonIndex(pokemons);
   await writeFile("index.html", indexHtml);
 

diff --git a/pokemon-detail.ts b/pokemon-detail.ts
@@ -107,18 +107,18 @@ export class PokemonDetails {
     return descriptions;
   }
 
-  async function getPokemonDescriptions(pokemonId: number): Promise<pokedexDescriptions: DexDescription[]> {
+  async function getPokemonDescriptions(pokemonId: number): Promise<DexDescription[]> {
     const response = await fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`);
     const data = await response.json();
     const englishFlavorTextEntries = data.flavor_text_entries.filter((entry: { language: { name: string } }) => entry.language.name === 'en');
-    if (englishFlavorTextEntries) {
+    if (englishFlavorTextEntries.length > 0) {
       const pokedexDescriptions: DexDescription[] = englishFlavorTextEntries.map((entry: { flavor_text: string; version: { name: string } }) => {
-        return { 'version': entry.version.name; 'flavor_text': cleanText(entry.flavor_text) };
+        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 [{ 'version': 'no version'; 'flavor_text': 'No description available' }];
+      return [{ 'version': 'no version', 'flavor_text': 'No description available' }];
     }
   }