Pokedex

Proyecto web de Pokédex con datos de la PokéAPI, construido con HTML/CSS + TypeScript compilado a JavaScript para ejecutarse en navegador.

Tecnologías

• Frontend: HTML, CSS, TypeScript
• Datos: PokéAPI
• Gráficas: Chart.js (radar de estadísticas)
• Servidor de desarrollo: live-server
• Persistencia local: localStorage (Dream Team)

Estructura principal

Pagina/
	estructura/
		pokedex.html
		pokemon.html
		dreamteam.html
	funcionalidad/
		cartas.ts
		createPokemon.ts
		dreamTeamStore.ts
		dramTeam.ts
	Diseño/estilo/
		pokeCard.css
		pokeinfo.css
		pokeDream.css
		...
dist/
	Pagina/funcionalidad/
		cartas.js
		createPokemon.js
		dreamTeamStore.js
		dramTeam.js

---

Flujo TypeScript (detalle)

1) Compilación TS -> JS

El código fuente está en Pagina/funcionalidad/*.ts y se compila a dist/ para ser cargado desde HTML.

Configuración clave en tsconfig.json:

• "noEmit": false para generar archivos JS
• "outDir": "./dist" para separar código compilado
• "strict": true y chequeos estrictos para mayor seguridad de tipos
• "moduleResolution": "bundler" y "module": "Preserve" para módulos ES

2) Scripts de trabajo

En package.json:

• npm run dev -> levanta live-server en puerto 3000
• npm run build -> compila TypeScript con tsc
• npm run watch -> compila en modo observación

Flujo recomendado:

1. npm install
2. npm run build
3. npm run dev

Si estás editando .ts, usa en paralelo:

• npm run watch
• npm run dev

3) Módulos principales TS

cartas.ts

• Carga Pokémon por generación usando PokéAPI (/generation/{id} + /pokemon/{name})
• Renderiza tarjetas en la Pokédex
• Gestiona búsqueda en vivo
• Controla la estrella de favorito para añadir/quitar del Dream Team
• Navega al detalle con query param: pokemon.html?name={pokemon}

createPokemon.ts

• Carga datos del Pokémon seleccionado por query param name
• Renderiza header, tipos, info física, línea evolutiva, habilidades y movimientos
• Genera tabla completa de movimientos con método/nivel/fuente
• Dibuja gráfico radar de stats con Chart.js

dramTeam.ts

• Hidrata datos persistidos
• Renderiza la vista del Dream Team
• Muestra estado vacío si no hay Pokémon guardados

---

Persistencia con localStorage (Dream Team)

La persistencia se centraliza en dreamTeamStore.ts para que distintas páginas compartan el mismo estado.

Diseño del store

Interfaz base:

export interface DreamTeamPokemon {
  id: number;
  name: string;
  sprite: string;
}

Estado compartido:

• dreamTeam: DreamTeamPokemon[] (array exportado)

Clave de almacenamiento:

• STORAGE_KEY = "dreamTeam"

API del store

• hydrateDreamTeam()

  • Lee localStorage
  • Parsea JSON
  • Rellena dreamTeam en memoria
  • Si hay error de parseo, limpia el array para evitar estado corrupto

• addDreamTeamPokemon(pokemon)

  • Evita duplicados por name
  • Límite máximo: 10 Pokémon
  • Si añade correctamente, persiste con saveDreamTeam()

• removeDreamTeamPokemon(name)

  • Elimina por nombre
  • Persiste el nuevo estado

• hasDreamTeamPokemon(name)

  • Devuelve si ese Pokémon ya está en el equipo

Cómo se usa entre páginas

1. En cartas.ts:

   • Al cargar, llama hydrateDreamTeam()
   • La estrella de cada card refleja hasDreamTeamPokemon(name)
   • Click en estrella: alterna entre addDreamTeamPokemon / removeDreamTeamPokemon

2. En dramTeam.ts:

   • Al cargar, llama hydrateDreamTeam()
   • Renderiza las miniaturas e imágenes principales a partir del mismo dreamTeam

Resultado: el Dream Team se mantiene aunque recargues la página o cambies entre vistas.

---

Notas de HTML/CSS (resumen)

• pokemon.html y pokedex.html apuntan a scripts compilados en dist/.../*.js
• Se añadieron ajustes visuales de detalle en pokeinfo.css:
  • mejor jerarquía visual
  • sección evolutiva más clara
  • control de overflow horizontal
  • scroll en listas de movimientos
• pokeDream.css define el layout central de Dream Team
• Se integró navbar compartida entre páginas

---

Comandos rápidos

npm install
npm run build
npm run dev

Modo desarrollo continuo:

# terminal 1
npm run watch

# terminal 2
npm run dev

Problemas comunes

• 404 en scripts: revisa que el src del <script type="module"> apunte a dist/... y que npm run build haya generado el archivo.
• Cambios TS no se reflejan: faltó compilar (build) o ejecutar watch.
• Dream Team no persiste: verifica en DevTools que exista la clave dreamTeam en localStorage del mismo origen (host/puerto).