Skip to content

Commit 9ea93c1

Browse files
JoanSForgeFlowJoanSForgeFlow
committed
[FIX] typescript errors and improve pokedex version description filter
1 parent af8d5fc commit 9ea93c1

File tree

3 files changed

+66
-24
lines changed

3 files changed

+66
-24
lines changed

‎css/pokemon_styles.css‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,46 @@ width: 80%;
5555
max-width: 1000px;
5656
margin-top: 16px;
5757
}
58+
.pokedex-container {
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
width: 80%;
63+
max-width: 1000px;
64+
}
65+
.version-container {
66+
width: 25%;
67+
}
68+
.description-container {
69+
width: 75%;
70+
}
71+
.version-select {
72+
font-size: 16px;
73+
padding: 8px;
74+
border: 1px solid #ccc;
75+
border-radius: 4px;
76+
background-color: #ffd6d6;
77+
color: #000;
78+
width: 80%;
79+
max-width: 970px;
80+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
81+
}
82+
.version-select:focus {
83+
outline: none;
84+
border-color: #ff0000;
85+
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
86+
}
87+
#version-select {
88+
width: 100%;
89+
}
90+
@media screen and (max-width: 768px) {
91+
.pokedex-container {
92+
flex-direction: column;
93+
}
94+
.version-container, .description-container {
95+
width: 100%;
96+
}
97+
}
5898
img {
5999
width: 70%;
60100
max-width: 500px;
@@ -185,13 +225,10 @@ background-color: #f8f8f8;
185225
padding: 16px;
186226
border-radius: 8px;
187227
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
188-
margin-top: 16px;
189228
font-size: 14px;
190-
line-height: 1.4;
229+
line-height: 1.2;
191230
text-align: justify;
192-
width: 80%;
193231
max-width: 970px;
194-
margin-bottom: 16px;
195232
}
196233
.section-title-cell {
197234
background-color: #ff0000;

‎main.ts‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -157,25 +157,21 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
157157
</tr>`)
158158
.join('\n');
159159

160-
const descriptionsSelect = pokemon.pokedexDescriptions[]
160+
const descriptionsSelect = pokemon.pokedexDescriptions
161161
.map(description => `
162162
<option value="${description.version}" class="tag">${description.version.charAt(0).toUpperCase() + description.version.slice(1)}</option>`)
163163
.join('\n');
164164

165-
const descriptionsRows = pokemon.pokedexDescriptions[]
166-
.map(description => `
167-
<p class="description" data-version='${description.version}'>${description.flavor_text}</p>`)
165+
const descriptionsRows = pokemon.pokedexDescriptions
166+
.map((description, index) => `
167+
<p class="description" data-version='${description.version}' style="${index !== 0 ? 'display: none;' : ''}">${description.flavor_text}</p>`)
168168
.join('\n');
169169

170170
return `
171171
<html>
172172
${head(pokemon.name)}
173173
<body>
174174
<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>
175-
<h2 class="section-title">Pokédex Description</h2>
176-
<select id="version-select" class="version-select">
177-
${descriptionsSelect}
178-
</select> ${descriptionsRows}
179175
<div class="pokemon-container">
180176
<img src="${pokemon.officialArtworkUrl}" alt="${pokemon.name}" />
181177
<table>
@@ -204,23 +200,32 @@ function renderPokemonIndex(pokemons: Array<Pokemon>): string {
204200
${statsTableRows}
205201
</table>
206202
</div>
203+
<h2 class="section-title">Pokédex Description</h2>
204+
<div class="pokedex-container">
205+
<div class="version-container">
206+
<select id="version-select" class="version-select">
207+
${descriptionsSelect}
208+
</select>
209+
</div>
210+
<div class="description-container">
211+
${descriptionsRows}
212+
</div>
213+
</div>
207214
<a href="index.html" class="back-button">Back to Menu</a>
208215
<script>
209216
function filterVersions() {
210217
const selectedVersion = document.getElementById("version-select").value;
211218
const dexDescriptions = document.querySelectorAll(".description");
212219
for (const dexDescription of dexDescriptions) {
213-
const version = JSON.parse(dexDescription.dataset.version);
214-
const first_version = JSON.parse(dexDescriptions[0].dataset.version);
215-
const versionMatch = (selectedVersion === "" && first_version === version) || (selectedVersion === version);
216-
if (versionMatch) {
217-
dexDescription.parentElement.style.display = "inline-block";
220+
const version = dexDescription.dataset.version;
221+
if (selectedVersion === version) {
222+
dexDescription.style.display = "block";
218223
} else {
219-
dexDescription.parentElement.style.display = "none";
224+
dexDescription.style.display = "none";
220225
}
221226
}
222227
}
223-
document.getElementById("version-select").addEventListener("input", filterVersions);
228+
document.getElementById("version-select").addEventListener("change", filterVersions);
224229
</script>
225230
</body>
226231
</html>`;
@@ -284,7 +289,7 @@ function head(title: string): string {
284289
}
285290

286291
(async () => {
287-
const pokemons = await loadPokemons(1010);
292+
const pokemons = await loadPokemons(20);
288293
const indexHtml = renderPokemonIndex(pokemons);
289294
await writeFile("index.html", indexHtml);
290295

‎pokemon-detail.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -107,18 +107,18 @@ export class PokemonDetails {
107107
return descriptions;
108108
}
109109

110-
async function getPokemonDescriptions(pokemonId: number): Promise<pokedexDescriptions: DexDescription[]> {
110+
async function getPokemonDescriptions(pokemonId: number): Promise<DexDescription[]> {
111111
const response = await fetch(`https://pokeapi.co/api/v2/pokemon-species/${pokemonId}`);
112112
const data = await response.json();
113113
const englishFlavorTextEntries = data.flavor_text_entries.filter((entry: { language: { name: string } }) => entry.language.name === 'en');
114-
if (englishFlavorTextEntries) {
114+
if (englishFlavorTextEntries.length > 0) {
115115
const pokedexDescriptions: DexDescription[] = englishFlavorTextEntries.map((entry: { flavor_text: string; version: { name: string } }) => {
116-
return { 'version': entry.version.name; 'flavor_text': cleanText(entry.flavor_text) };
116+
return { 'version': entry.version.name, 'flavor_text': cleanText(entry.flavor_text) };
117117
});
118118
return pokedexDescriptions;
119119
} else {
120120
console.error(`No English flavor text entry found for Pokémon ID ${pokemonId}`);
121-
return [{ 'version': 'no version'; 'flavor_text': 'No description available' }];
121+
return [{ 'version': 'no version', 'flavor_text': 'No description available' }];
122122
}
123123
}
124124

0 commit comments

Comments
 (0)