82 lines
2.8 KiB
JavaScript
82 lines
2.8 KiB
JavaScript
async function render(pokemon) {
|
|
pokemon.forEach((poke) => {
|
|
let card = document.getElementById("card-template").content.cloneNode(true);
|
|
card.querySelector(".front_face").src = poke.sprites.other['official-artwork'].front_default;
|
|
if (pokemon.length == 12) {
|
|
card.querySelector(".card").style.width = "25%";
|
|
document.getElementById("cards").style.width = "800px";
|
|
document.getElementById("cards").style.height = "600px";
|
|
} else if (pokemon.length == 24) {
|
|
card.querySelector(".card").style.width = "16.66%";
|
|
document.getElementById("cards").style.width = "800px";
|
|
document.getElementById("cards").style.height = "600px";
|
|
}
|
|
document.getElementById("cards").appendChild(card);
|
|
});
|
|
}
|
|
|
|
async function loadPokemon(difficulty) {
|
|
let response = await fetch(`https://pokeapi.co/api/v2/pokemon?offset=0&limit=${difficulty}`);
|
|
let data = await response.json();
|
|
// console.log(data.results);
|
|
|
|
let pokemon = [];
|
|
|
|
for (let i = 0; i < data.results.length; i++) {
|
|
let poke = data.results[i];
|
|
|
|
let pokeResponse = await fetch(`https://pokeapi.co/api/v2/pokemon/${poke.name}`);
|
|
let pokeObj = await pokeResponse.json();
|
|
|
|
pokemon.push(pokeObj);
|
|
pokemon.push(pokeObj);
|
|
}
|
|
|
|
return pokemon;
|
|
}
|
|
|
|
function shuffle(array) {
|
|
for (let i = array.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[array[i], array[j]] = [array[j], array[i]];
|
|
}
|
|
}
|
|
|
|
function start() {
|
|
let first;
|
|
|
|
document.querySelectorAll(".card").forEach((card) => {
|
|
card.addEventListener("click", (event) => {
|
|
if (card.querySelector("status").value == "locked") return;
|
|
card.classList.toggle('flip');
|
|
|
|
if (!first) {
|
|
first = card;
|
|
} else {
|
|
if (first.querySelector(".front_face").src === card.querySelector(".front_face").src) {
|
|
console.log("right");
|
|
first.querySelector("status").value = "locked";
|
|
card.querySelector("status").value = "locked";
|
|
} else {
|
|
console.log("wrong");
|
|
setTimeout(() => {
|
|
first.classList.toggle("flip");
|
|
card.classList.toggle("flip");
|
|
first = undefined;
|
|
}, 1000);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
async function select(difficulty) {
|
|
let pokemon = await loadPokemon(difficulty).then((pokemon) => (pokemon));
|
|
shuffle(pokemon);
|
|
render(pokemon).then(() => {
|
|
document.getElementById("difficulty-select").style.display = "none";
|
|
document.getElementById("game").style.display = "block";
|
|
start();
|
|
});
|
|
}
|