---
import Layout from '../layouts/Layout.astro';
import PokemonCard from '../components/PokemonCard.astro';
import { getPokemons } from '../lib/controllers/pokemonController';
import type { PokemonSmall } from '../lib/models/pokemonModels';
const pokemons: PokemonSmall[] | undefined = await getPokemons(0, 12);
---
<Layout title="Pokedex">
<main class="m-auto">
<section id="pokemon-grid">
<div class="grid grid-cols-2 gap-7 p-2 mt-32
md:grid-cols-4">
{
pokemons?.map((pokemon : PokemonSmall) => (
<PokemonCard {pokemon}/>
))
}
</div>
</section>
<section class="flex justify-center items-center">
<button id="load-more-pkmn"
class="p-4 bg-slate-400/20 border-gray-500 border rounded-2xl my-4
transition-transform transform hover:scale-105">Cargar más pokémons</button>
</section>
</main>
</Layout>
<script>
import { getPokemons } from "../lib/controllers/pokemonController";
import { TypeColors, type PokemonSmall, type PokemonType } from "../lib/models/pokemonModels";
import { capitalizeFirstLetter, mapId } from "../lib/utils/utils";
let offset = 12;
const limit = 12;
const loadMorePkmn = document.getElementById('load-more-pkmn');
if(loadMorePkmn) {
loadMorePkmn.addEventListener('click', async () => {
const pokemons : PokemonSmall [] | undefined = await getPokemons(offset, limit);
offset += 12;
const pokemonGrid = document.getElementById('pokemon-grid');
const divPokemons = document.createElement('div');
divPokemons.className = 'grid grid-cols-2 gap-7 p-2 md:grid-cols-4';
pokemons?.map((pokemon : PokemonSmall) => {
console.log(pokemon)
const a = document.createElement('a');
a.className = 'w-60 h-60 p-1 flex flex-col items-center bg-slate-400/10 border-gray-500 border rounded-2xl hover:bg-gray-200 cursor-pointer';
const image = document.createElement('img');
image.className = 'w-28';
const h3 = document.createElement('h3');
h3.className = 'text-2xl font-bold tracking-wide mt-1';
const p = document.createElement('p');
p.className = 'text-xs tracking-wide p-1';
const divTypes = document.createElement('div');
divTypes.className = 'flex flex-row space-x-1 mt-2 p-1 gap-2';
a.href = `pokemon/${pokemon.id}`;
image.src = pokemon.image; image.alt = `Una foto de ${pokemon.name}`;
a.appendChild(image);
h3.innerText = capitalizeFirstLetter(pokemon.name);
a.appendChild(h3);
p.innerText = `No. ${mapId(pokemon.id)}`;
a.appendChild(p);
pokemon.types.map((types : PokemonType) => {
const pType = document.createElement('p');
pType.className = ` ${TypeColors[types.type.name]} opacity-80 rounded text-white text-center font-medium tracking-wide py-1 px-2`;
pType.innerText = types.type.name;
divTypes.appendChild(pType);
});
a.appendChild(divTypes);
divPokemons.appendChild(a);
});
pokemonGrid?.appendChild(divPokemons);
});
}
</script>
我考虑使用诸如react或vue之类的前端框架,但如果可能的话,我想坚持使用。
hatml是HTML
DialogElement
(在所有现代浏览器中)和popoverAttribute(在Firefox,Chrome和Safari中> = 17)。 或者,您可以在Astro组件中通常为口袋妖怪创建HTML,但请使用CSS隐藏。然后,您只需添加几行JavaScript即可:
<button id="showMoreBtn">Show more</button>
<div id="pokemon" style="display: hidden;">
{pokemons.map(pokemon =>
<PokemonCard pokemon={pokemon}/>}
</div>
<script>
document.getElementById('showMoreBtn')?.addEventListener('click', () => {
document.getElementById('pokemon').style.display = 'block';
})
</script>