mirror of
https://github.com/Alvin-Zilverstand/pokedex.git
synced 2026-03-06 02:57:25 +01:00
Add PHP scripts for fetching Pokémon data and update JavaScript to utilize new API endpoints
This commit is contained in:
vista-man
47
pokedex/get_pokemon.php
Normal file
47
pokedex/get_pokemon.php
Normal file
@@ -0,0 +1,47 @@
|
||||
<?php
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$servername = "localhost";
|
||||
$username = "root";
|
||||
$password = "";
|
||||
$dbname = "pokedex";
|
||||
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
if (isset($_GET['id'])) {
|
||||
$id = intval($_GET['id']);
|
||||
|
||||
$sql = "SELECT p.id, p.name, p.height, p.weight, p.base_experience, p.image_url, s.genus, s.flavor_text, s.growth_rate, s.base_happiness, s.capture_rate, s.gender_rate, GROUP_CONCAT(DISTINCT t.name) AS types, GROUP_CONCAT(DISTINCT a.name) AS abilities, GROUP_CONCAT(DISTINCT e.name) AS egg_groups, st.hp, st.attack, st.defense, st.sp_attack, st.sp_defense, st.speed
|
||||
FROM pokemon p
|
||||
LEFT JOIN species s ON p.id = s.pokemon_id
|
||||
LEFT JOIN pokemon_types pt ON p.id = pt.pokemon_id
|
||||
LEFT JOIN types t ON pt.type_id = t.id
|
||||
LEFT JOIN pokemon_abilities pa ON p.id = pa.pokemon_id
|
||||
LEFT JOIN abilities a ON pa.ability_id = a.id
|
||||
LEFT JOIN pokemon_egg_groups peg ON p.id = peg.pokemon_id
|
||||
LEFT JOIN egg_groups e ON peg.egg_group_id = e.id
|
||||
LEFT JOIN stats st ON p.id = st.pokemon_id
|
||||
WHERE p.id = $id
|
||||
GROUP BY p.id";
|
||||
|
||||
$result = $conn->query($sql);
|
||||
|
||||
if ($result->num_rows > 0) {
|
||||
$row = $result->fetch_assoc();
|
||||
$row['types'] = explode(',', $row['types']);
|
||||
$row['abilities'] = explode(',', $row['abilities']);
|
||||
$row['egg_groups'] = explode(',', $row['egg_groups']);
|
||||
echo json_encode($row);
|
||||
} else {
|
||||
echo json_encode([]);
|
||||
}
|
||||
} else {
|
||||
echo json_encode(["error" => "No ID provided"]);
|
||||
}
|
||||
|
||||
$conn->close();
|
||||
?>
|
||||
38
pokedex/get_pokemons.php
Normal file
38
pokedex/get_pokemons.php
Normal file
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$servername = "localhost";
|
||||
$username = "root";
|
||||
$password = "";
|
||||
$dbname = "pokedex";
|
||||
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
$start = intval($_GET['start']);
|
||||
$end = intval($_GET['end']);
|
||||
|
||||
$sql = "SELECT p.id, p.name, p.height, p.weight, p.image_url, GROUP_CONCAT(DISTINCT t.name) AS types
|
||||
FROM pokemon p
|
||||
LEFT JOIN pokemon_types pt ON p.id = pt.pokemon_id
|
||||
LEFT JOIN types t ON pt.type_id = t.id
|
||||
WHERE p.id BETWEEN $start AND $end
|
||||
GROUP BY p.id";
|
||||
|
||||
$result = $conn->query($sql);
|
||||
|
||||
$pokemons = array();
|
||||
if ($result->num_rows > 0) {
|
||||
while($row = $result->fetch_assoc()) {
|
||||
$row['types'] = explode(',', $row['types']);
|
||||
$pokemons[] = $row;
|
||||
}
|
||||
}
|
||||
|
||||
echo json_encode($pokemons);
|
||||
|
||||
$conn->close();
|
||||
?>
|
||||
@@ -1,5 +1,4 @@
|
||||
const poke_container = document.getElementById("poke-container");
|
||||
const pokemon_count = 1010;
|
||||
const colors = {
|
||||
fire: "#e03a3a",
|
||||
grass: "#50C878",
|
||||
@@ -66,40 +65,25 @@ const regions = {
|
||||
const loader = document.querySelector(".lds-ring");
|
||||
const fetchPokemons = async (region) => {
|
||||
const { start, end } = regions[region];
|
||||
|
||||
loader.classList.add("ring-active");
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
const pokemonName = i.toString();
|
||||
const url = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;
|
||||
|
||||
let res = await fetch(url);
|
||||
let data = await res.json();
|
||||
loader.classList.remove('ring-active')
|
||||
createPokemonCard(data);
|
||||
setTimeout(() => {
|
||||
}, "150");
|
||||
const url = `http://localhost/pokedex/pokedex/get_pokemons.php?start=${start}&end=${end}`;
|
||||
try {
|
||||
const res = await fetch(url);
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP error! status: ${res.status}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
loader.classList.remove('ring-active');
|
||||
data.forEach(pokemon => createPokemonCard(pokemon));
|
||||
} catch (error) {
|
||||
console.error('Error fetching Pokémon data:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const main_types = Object.keys(colors);
|
||||
|
||||
// const fetchPokemons = async () => {
|
||||
// for (let i = 1; i <= pokemon_count; i++) {
|
||||
// await getPokemon(i);
|
||||
// }
|
||||
// };
|
||||
|
||||
// const getPokemon = async (id) => {
|
||||
// const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
|
||||
// const res = await fetch(url);
|
||||
// const data = await res.json();
|
||||
// console.log(data);
|
||||
// createPokemonCard(data);
|
||||
// };
|
||||
|
||||
const createPokemonCard = (pokemon) => {
|
||||
|
||||
const pokemonEl = document.createElement("div");
|
||||
pokemonEl.classList.add("card");
|
||||
pokemonEl.id = pokemon.id;
|
||||
@@ -111,32 +95,14 @@ const createPokemonCard = (pokemon) => {
|
||||
name = name;
|
||||
}
|
||||
const id = pokemon.id.toString().padStart(3, "0");
|
||||
// const moves = [];
|
||||
// try {
|
||||
// for (let i = 0; i <= 1 ; i++) {
|
||||
// moves.push(pokemon.moves[i].move.name);
|
||||
// }
|
||||
// console.log(moves);
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
|
||||
let weight = pokemon.weight / 10 + "kg";
|
||||
let height = pokemon.height / 10 + "m";
|
||||
|
||||
const poke_types = pokemon.types.map((type) => type.type.name);
|
||||
const poke_types = pokemon.types;
|
||||
const type = main_types.find((type) => poke_types.indexOf(type) > -1);
|
||||
const color = colors[type];
|
||||
let frontImg;
|
||||
let backImg;
|
||||
try{
|
||||
frontImg = pokemon.sprites.front_default;
|
||||
backImg = pokemon.sprites.back_default;
|
||||
}
|
||||
catch(err){
|
||||
frontImg = "#";
|
||||
backImg = "#";
|
||||
}
|
||||
const frontImg = pokemon.image_url;
|
||||
|
||||
pokemonEl.style.backgroundColor = color;
|
||||
|
||||
@@ -149,22 +115,16 @@ const createPokemonCard = (pokemon) => {
|
||||
<span class="number">#${id}</span>
|
||||
<h3 class="name">${name}</h3>
|
||||
<div class="types">
|
||||
${poke_types
|
||||
.map(
|
||||
(type) => `
|
||||
<div class="poke__type__bg ${type}">
|
||||
<img src="Icons/${type}.svg" alt="Type">
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
${poke_types.map(type => `
|
||||
<div class="poke__type__bg ${type}">
|
||||
<img src="Icons/${type}.svg" alt="Type">
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="back side">
|
||||
<div class="img-container">
|
||||
<img class="image" src="${
|
||||
backImg == null ? frontImg : backImg
|
||||
}" alt="${name}" />
|
||||
<img class="image" src="${frontImg}" alt="${name}" />
|
||||
<img class="background" src="./Icons/default/pokeball.svg" alt="pokeball">
|
||||
</div>
|
||||
<span class="number">#${id}</span>
|
||||
@@ -175,15 +135,8 @@ const createPokemonCard = (pokemon) => {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// <div class="moves">
|
||||
// <div>${moves[0]}</div>
|
||||
// <div>${moves[1]}</div>
|
||||
// </div>
|
||||
|
||||
pokemonEl.innerHTML = pokemonInnerHTML;
|
||||
// Add event listener to open new page on card click
|
||||
pokemonEl.addEventListener("click", () => {
|
||||
// Open new page with specific card details
|
||||
window.open(`details.html?id=${id}`, "_self");
|
||||
});
|
||||
|
||||
@@ -219,14 +172,12 @@ window.addEventListener("scroll", function () {
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("scrollToTopBtn")
|
||||
.addEventListener("click", function () {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
document.getElementById("scrollToTopBtn").addEventListener("click", function () {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("scroll", function () {
|
||||
var scrollToDownBtn = document.getElementById("scrollToDownBtn");
|
||||
@@ -237,57 +188,45 @@ window.addEventListener("scroll", function () {
|
||||
}
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("scrollToDownBtn")
|
||||
.addEventListener("click", function () {
|
||||
window.scrollTo({
|
||||
top: 999999,
|
||||
behavior: "smooth",
|
||||
});
|
||||
document.getElementById("scrollToDownBtn").addEventListener("click", function () {
|
||||
window.scrollTo({
|
||||
top: 999999,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
|
||||
function search_pokemon() {
|
||||
let input = document.getElementById("searchbar").value;
|
||||
input = input.toLowerCase();
|
||||
input = input.replace(/\s+/g, ""); // removing all spaces from search box
|
||||
// storing all card along wiith details in variable
|
||||
let x = document.getElementsByClassName("cardContainer");
|
||||
|
||||
for (i = 0; i < x.length; i++) {
|
||||
// checking the name or type entered by user from search box if doesn't match than dont display the message
|
||||
if (!x[i].innerHTML.toLowerCase().includes(input)) {
|
||||
x[i].style.display = "none";
|
||||
}
|
||||
// checking the name or type entered by user from search box if doesn't match than dont display the pokemon card
|
||||
else {
|
||||
} else {
|
||||
x[i].style.display = "block";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// dark mode enabled
|
||||
const darkModeButton = document.getElementById("dark");
|
||||
|
||||
darkModeButton.addEventListener("click", () => {
|
||||
|
||||
let element = document.body;
|
||||
element.classList.toggle("dark-mode");
|
||||
document.body.classList.toggle("dark-mode");
|
||||
|
||||
const regions = document.querySelectorAll(".regionvalue");
|
||||
console.log(regions);
|
||||
regions.forEach(region => {
|
||||
region.classList.toggle("dark-mode");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
const darkModeIcon = document.getElementById("dark");
|
||||
darkModeButton.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark-mode");
|
||||
darkModeIcon.classList.toggle("fa-toggle-on");
|
||||
// You can add additional elements that need dark mode here
|
||||
});
|
||||
|
||||
|
||||
changeRegion();
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const id = parseInt(params.get("id"));
|
||||
|
||||
// console.log(id);
|
||||
const colors = {
|
||||
fire: "#e03a3a",
|
||||
grass: "#50C878",
|
||||
@@ -24,569 +23,109 @@ const colors = {
|
||||
};
|
||||
const main_types = Object.keys(colors);
|
||||
|
||||
|
||||
|
||||
|
||||
// const getPokeApi = async (url)=>{
|
||||
|
||||
// await fetch(url)
|
||||
// .then(
|
||||
// async response => {
|
||||
// let isJson = response.headers.get('content-type')?.includes('application/json');
|
||||
// let data = isJson ? await response.json() : null;
|
||||
|
||||
// // check for error response
|
||||
// if (!response.ok) {
|
||||
// // get error message from body or default to response status
|
||||
// const error = (data && data.message) || response.status;
|
||||
// return Promise.reject(error);
|
||||
// }
|
||||
// // element.innerHTML = JSON.stringify(data, null, 4);
|
||||
// })
|
||||
// .catch(error => {
|
||||
// // element.parentElement.innerHTML = `Error: ${error}`;
|
||||
// console.error('There was an error!', error);
|
||||
// });
|
||||
// }
|
||||
const getType_data = async(url)=>{
|
||||
let res = await fetch(url);
|
||||
let data = await res.json();
|
||||
return data;
|
||||
}
|
||||
const fetchPokemonDetails = async () => {
|
||||
|
||||
|
||||
const url = `https://pokeapi.co/api/v2/pokemon/${id}/`;
|
||||
const url2 = `https://pokeapi.co/api/v2/pokemon-species/${id}/`;
|
||||
//changing the api so that the query is pokemon specific
|
||||
// const url3 = `https://pokeapi.co/api/v2/type/${id}/`;
|
||||
|
||||
const url = `http://localhost/pokedex/pokedex/get_pokemon.php?id=${id}`;
|
||||
const res = await fetch(url);
|
||||
const res2 = await fetch(url2);
|
||||
|
||||
const data = await res.json();
|
||||
const data2 = await res2.json();
|
||||
|
||||
|
||||
// get the type of pokemon
|
||||
let type_names = data.types.map((val, index)=>val.type.name)
|
||||
// console.log(data.types);
|
||||
let data3 = type_names.map( async (val) => {
|
||||
return await getType_data(`https://pokeapi.co/api/v2/type/${val}/`)
|
||||
})
|
||||
|
||||
// console.log(type_names);
|
||||
|
||||
const arr = [data, data2, data3];
|
||||
await displayPokemonDetails(arr);
|
||||
// console.log(arr);
|
||||
displayPokemonDetails(data);
|
||||
};
|
||||
|
||||
const displayPokemonDetails = async (pokemon) => {
|
||||
const name = pokemon[0].name[0].toUpperCase() + pokemon[0].name.slice(1);
|
||||
const japaneseName = pokemon[1].names[0].name;
|
||||
const id = pokemon[0].id.toString().padStart(3, "0");
|
||||
const imageSrc = pokemon[0].sprites.other.dream_world.front_default;
|
||||
const imageSrc2 = pokemon[0].sprites.other["official-artwork"].front_default;
|
||||
const poke_types = pokemon[0].types.map((type) => type.type.name);
|
||||
const type = main_types.find((type) => poke_types.indexOf(type) > -1);
|
||||
|
||||
const displayPokemonDetails = (pokemon) => {
|
||||
const name = pokemon.name;
|
||||
const japaneseName = pokemon.japanese_name;
|
||||
const id = pokemon.id.toString().padStart(3, "0");
|
||||
const imageSrc = pokemon.image_url;
|
||||
const poke_types = pokemon.types;
|
||||
const type = poke_types[0];
|
||||
const color = colors[type];
|
||||
|
||||
const hp = pokemon[0].stats[0].base_stat;
|
||||
// const maxHp = hp * 2 + 204;
|
||||
// const minHp = hp * 2 + 110;
|
||||
const attack = pokemon[0].stats[1].base_stat;
|
||||
// const maxAttack = Math.floor((attack * 2 + 99) * 1.1);
|
||||
// const minAttack = Math.floor((attack * 2 + 5) * 0.9);
|
||||
const spAttack = Math.floor(pokemon[0].stats[3].base_stat);
|
||||
// const maxSpAttack = Math.floor((spAttack * 2 + 99) * 1.1);
|
||||
// const minSpAttack = Math.floor((spAttack * 2 + 5) * 0.9);
|
||||
const spDefense = Math.floor(pokemon[0].stats[4].base_stat);
|
||||
// const maxSpDefense = Math.floor((spDefense * 2 + 99) * 1.1);
|
||||
// const minSpDefense = Math.floor((spDefense * 2 + 5) * 0.9);
|
||||
const defense = pokemon[0].stats[2].base_stat;
|
||||
// const maxDefense = Math.floor((defense * 2 + 99) * 1.1);
|
||||
// const minDefense = Math.floor((defense * 2 + 5) * 0.9);
|
||||
const speed = pokemon[0].stats[5].base_stat;
|
||||
// const maxSpeed = Math.floor((speed * 2 + 99) * 1.1);
|
||||
// const minSpeed = Math.floor((speed * 2 + 5) * 0.9);
|
||||
const hp = pokemon.stats?.hp || 0;
|
||||
const attack = pokemon.stats?.attack || 0;
|
||||
const spAttack = pokemon.stats?.sp_attack || 0;
|
||||
const spDefense = pokemon.stats?.sp_defense || 0;
|
||||
const defense = pokemon.stats?.defense || 0;
|
||||
const speed = pokemon.stats?.speed || 0;
|
||||
|
||||
const abilities = pokemon[0].abilities.map((ability) => ability.ability.name);
|
||||
const eggGroups = pokemon[1].egg_groups.map((group) => group.name);
|
||||
// const moves = pokemon[0].moves.map((move) => move.move.name);
|
||||
const abilities = pokemon.abilities;
|
||||
const eggGroups = pokemon.egg_groups;
|
||||
document.body.style.backgroundColor = color;
|
||||
const evolutionChainUrl = pokemon[1].evolution_chain.url;
|
||||
const resEvolutionChain = await fetch(evolutionChainUrl);
|
||||
const evolutionChainData = await resEvolutionChain.json();
|
||||
// console.log(evolutionChainData);
|
||||
|
||||
const varieties = pokemon[1].varieties
|
||||
.map((variety) => {
|
||||
if (variety.is_default === true) {
|
||||
return null; // or return undefined;
|
||||
}
|
||||
return variety.pokemon;
|
||||
})
|
||||
.filter((item) => item !== null); // Remove null items from the array
|
||||
// console.log(varieties);
|
||||
const resVarieties = await Promise.all(
|
||||
varieties.map((variety) => fetch(variety.url))
|
||||
);
|
||||
const varietiesData = await Promise.all(
|
||||
resVarieties.map((res) => res.json())
|
||||
);
|
||||
// console.log(varietiesData);
|
||||
|
||||
let tab3 = document.getElementById("tab_3");
|
||||
tab3.innerHTML = `
|
||||
<div class="evolution">
|
||||
</div>
|
||||
<div class="varieties">
|
||||
</div>
|
||||
`;
|
||||
|
||||
const displayVarieties = (varietiesData) => {
|
||||
const container = document.querySelector(".varieties");
|
||||
container.innerHTML = "";
|
||||
|
||||
varietiesData.forEach((variety) => {
|
||||
const pokemonName = variety.name;
|
||||
const imgUrl = variety.sprites.other["official-artwork"].front_default;
|
||||
|
||||
const pokemonDiv = document.createElement("div");
|
||||
pokemonDiv.classList.add("varieties__pokemon");
|
||||
|
||||
const nameElement = document.createElement("h1");
|
||||
nameElement.textContent = pokemonName;
|
||||
pokemonDiv.appendChild(nameElement);
|
||||
|
||||
const imageElement = document.createElement("img");
|
||||
imageElement.src = imgUrl;
|
||||
pokemonDiv.appendChild(imageElement);
|
||||
|
||||
container.appendChild(pokemonDiv);
|
||||
});
|
||||
};
|
||||
|
||||
displayVarieties(varietiesData);
|
||||
const displayEvolutionChain = (evolutionChainData) => {
|
||||
const container = document.querySelector(".evolution");
|
||||
container.innerHTML = "";
|
||||
|
||||
const chain = evolutionChainData.chain;
|
||||
displayEvolutionRecursive(chain, container);
|
||||
};
|
||||
|
||||
const displayEvolutionRecursive = (chain, container) => {
|
||||
try{
|
||||
|
||||
const pokemonName = chain.species.name;
|
||||
const imgUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${getPokemonIdFromURL(
|
||||
chain.species.url
|
||||
)}.png`;
|
||||
|
||||
const EvolutionId = getPokemonIdFromURL(chain.species.url);
|
||||
|
||||
const pokemonDiv = document.createElement("div");
|
||||
pokemonDiv.classList.add("evolution__pokemon");
|
||||
const iconDiv = document.createElement("div");
|
||||
|
||||
const nameElement = document.createElement("h1");
|
||||
nameElement.textContent = pokemonName;
|
||||
pokemonDiv.appendChild(nameElement);
|
||||
|
||||
const imageElement = document.createElement("img");
|
||||
imageElement.src = imgUrl;
|
||||
pokemonDiv.appendChild(imageElement);
|
||||
imageElement.addEventListener("click", () => {
|
||||
window.location.href = `details.html?id=${EvolutionId}}`;
|
||||
});
|
||||
|
||||
if (chain.evolves_to.length > 0) {
|
||||
const arrowIndicator = document.createElement("i");
|
||||
arrowIndicator.classList.add(
|
||||
"fa-solid",
|
||||
"fa-caret-right",
|
||||
"fa-2x",
|
||||
"fa-beat"
|
||||
);
|
||||
iconDiv.appendChild(arrowIndicator);
|
||||
}
|
||||
|
||||
container.appendChild(pokemonDiv);
|
||||
container.appendChild(iconDiv);
|
||||
|
||||
if (chain.evolves_to.length > 0) {
|
||||
const evolutionData = chain.evolves_to[0];
|
||||
displayEvolutionRecursive(evolutionData, container);
|
||||
}
|
||||
|
||||
}
|
||||
catch(err){
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function getPokemonIdFromURL(url) {
|
||||
const parts = url.split("/");
|
||||
return parts[parts.length - 2];
|
||||
}
|
||||
displayEvolutionChain(evolutionChainData);
|
||||
|
||||
if(pokemon[2] != null){
|
||||
|
||||
var weakTypesString='';
|
||||
var strongTypesString='';
|
||||
|
||||
pokemon[2].map(async (val)=>{
|
||||
|
||||
val.then((res)=>{
|
||||
// console.log(res);
|
||||
|
||||
let weakTypes=[res.damage_relations.no_damage_to.map((type)=>{
|
||||
return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
})]
|
||||
|
||||
// var weakTypesString='';
|
||||
for(let i in weakTypes){
|
||||
weakTypesString += weakTypes[i];
|
||||
}
|
||||
|
||||
let strongTypes=[res.damage_relations.double_damage_to.map((type)=>{
|
||||
return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
})]
|
||||
|
||||
// var strongTypesString='';
|
||||
for(let i in strongTypes){
|
||||
strongTypesString += strongTypes[i];
|
||||
}
|
||||
|
||||
let tab2 = document.getElementById("tab_2");
|
||||
tab2.innerHTML = `
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
let tab2 = document.getElementById("tab_2");
|
||||
tab2.innerHTML = `
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Health:</span>
|
||||
<span>${hp}</span>
|
||||
<span> Health:</span>
|
||||
<span>${hp}</span>
|
||||
</div>
|
||||
<meter id="hp"
|
||||
style="content: 'HP';"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${hp}">
|
||||
</meter>
|
||||
<meter id="hp" min="0" max="255" low="70" high="120" optimum="150" value="${hp}"></meter>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Attack:</span>
|
||||
<span>${attack}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Attack:</span>
|
||||
<span>${attack}</span>
|
||||
<meter id="attack" min="0" max="255" low="70" high="120" optimum="150" value="${attack}"></meter>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Defense:</span>
|
||||
<span>${defense}</span>
|
||||
</div>
|
||||
<meter id="attack"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${attack}">
|
||||
</meter>
|
||||
<meter id="defense" min="0" max="255" low="70" high="120" optimum="150" value="${defense}"></meter>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Sp. Atk:</span>
|
||||
<span>${spAttack}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Defense:</span>
|
||||
<span>${defense}</span>
|
||||
<meter id="spattack" min="0" max="255" low="70" high="120" optimum="150" value="${spAttack}"></meter>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Sp. Def:</span>
|
||||
<span>${spDefense}</span>
|
||||
</div>
|
||||
<meter id="defense"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${defense}">
|
||||
</meter>
|
||||
<meter id="spdefense" min="0" max="255" low="70" high="120" optimum="150" value="${spDefense}"></meter>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span>Speed:</span>
|
||||
<span>${speed}</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Sp. Atk:</span>
|
||||
<span>${spAttack}</span>
|
||||
<meter id="speed" min="0" max="255" low="70" high="120" optimum="150" value="${speed}"></meter>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Total:</span>
|
||||
<span>${speed + hp + attack + defense + spAttack + spDefense}</span>
|
||||
</div>
|
||||
<meter id="spattack"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${spAttack}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Sp. Def:</span>
|
||||
<span>${spDefense}</span>
|
||||
</div>
|
||||
<meter id="spdefense"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${spDefense}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span>Speed:</span>
|
||||
<span>${speed}</span>
|
||||
</div>
|
||||
<meter id="speed"
|
||||
min="0" max="255"
|
||||
low="70" high="120" optimum="150"
|
||||
value="${speed}">
|
||||
</meter>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="stat">
|
||||
<div>
|
||||
<span> Total:</span>
|
||||
<span>${speed + hp + attack + defense + spAttack + spDefense}</span>
|
||||
</div>
|
||||
<meter id="total"
|
||||
min="0" max="1530"
|
||||
low="500" high="720" optimum="1000"
|
||||
value="${speed + hp + attack + defense + spAttack + spDefense}">
|
||||
</meter>
|
||||
</div>
|
||||
<div class="statTypes">
|
||||
<div class="statTypeText">
|
||||
<div>
|
||||
Weak Against
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="statIconHolder">
|
||||
${weakTypesString==""?'None':weakTypesString}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="statTypes">
|
||||
<div class="statTypeText">
|
||||
<span>
|
||||
Strong Against
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="statIconHolder">
|
||||
${strongTypesString==""?'None':strongTypesString}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
|
||||
// let weakTypes=[...pokemon[2].damage_relations.no_damage_to.map((type)=>{
|
||||
// return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
// })]
|
||||
|
||||
// var weakTypesString='';
|
||||
// for(let i in weakTypes){
|
||||
// weakTypesString=weakTypesString+weakTypes[i];
|
||||
|
||||
// }
|
||||
|
||||
// let strongTypes=[...pokemon[2].damage_relations.double_damage_to.map((type)=>{
|
||||
// return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
|
||||
// })]
|
||||
|
||||
// var strongTypesString='';
|
||||
// for(let i in strongTypes){
|
||||
// strongTypesString=strongTypesString+strongTypes[i];
|
||||
// }
|
||||
|
||||
// let tab2 = document.getElementById("tab_2");
|
||||
// tab2.innerHTML = `
|
||||
// <div class="stats">
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Health:</span>
|
||||
// <span>${hp}</span>
|
||||
// </div>
|
||||
// <meter id="hp"
|
||||
// style="content: 'HP';"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${hp}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Attack:</span>
|
||||
// <span>${attack}</span>
|
||||
// </div>
|
||||
// <meter id="attack"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${attack}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Defense:</span>
|
||||
// <span>${defense}</span>
|
||||
// </div>
|
||||
// <meter id="defense"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${defense}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Sp. Atk:</span>
|
||||
// <span>${spAttack}</span>
|
||||
// </div>
|
||||
// <meter id="spattack"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${spAttack}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Sp. Def:</span>
|
||||
// <span>${spDefense}</span>
|
||||
// </div>
|
||||
// <meter id="spdefense"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${spDefense}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span>Speed:</span>
|
||||
// <span>${speed}</span>
|
||||
// </div>
|
||||
// <meter id="speed"
|
||||
// min="0" max="255"
|
||||
// low="70" high="120" optimum="150"
|
||||
// value="${speed}">
|
||||
// </meter>
|
||||
// </div>
|
||||
|
||||
|
||||
// <div class="stat">
|
||||
// <div>
|
||||
// <span> Total:</span>
|
||||
// <span>${speed + hp + attack + defense + spAttack + spDefense}</span>
|
||||
// </div>
|
||||
// <meter id="total"
|
||||
// min="0" max="1530"
|
||||
// low="500" high="720" optimum="1000"
|
||||
// value="${speed + hp + attack + defense + spAttack + spDefense}">
|
||||
// </meter>
|
||||
// </div>
|
||||
// <div class="statTypes">
|
||||
// <div class="statTypeText">
|
||||
// <div>
|
||||
// Weak Against
|
||||
// </div>
|
||||
|
||||
// </div>
|
||||
|
||||
// <div class="statIconHolder">
|
||||
// ${weakTypesString==""?'None':weakTypesString}
|
||||
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="statTypes">
|
||||
// <div class="statTypeText">
|
||||
// <span>
|
||||
// Strong Against
|
||||
// </span>
|
||||
// </div>
|
||||
|
||||
// <div class="statIconHolder">
|
||||
// ${strongTypesString==""?'None':strongTypesString}
|
||||
// </div>
|
||||
// </div>
|
||||
// `;
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
else{
|
||||
console.log(pokemon[2])
|
||||
}
|
||||
|
||||
|
||||
|
||||
<meter id="total" min="0" max="1530" low="500" high="720" optimum="1000" value="${speed + hp + attack + defense + spAttack + spDefense}"></meter>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
let pokemonDetailsEl = document.getElementById("pokemon-details");
|
||||
pokemonDetailsEl.innerHTML = `
|
||||
<div class="btn">
|
||||
<button class="previousBtn" onclick="backButton()"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="nextBtn" onclick="nextPokemon()"><i class="fas fa-chevron-right"></i></button>
|
||||
</div>
|
||||
<div class="names">
|
||||
<div class="japaneseName">${japaneseName}</div>
|
||||
<div class="name">${name}</div>
|
||||
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="image">
|
||||
<img class="imgFront" src="${
|
||||
imageSrc == null ? imageSrc2 : imageSrc
|
||||
}" alt="${name}">
|
||||
<div class="btn">
|
||||
<button class="previousBtn" onclick="backButton()"><i class="fas fa-chevron-left"></i></button>
|
||||
<button class="nextBtn" onclick="nextPokemon()"><i class="fas fa-chevron-right"></i></button>
|
||||
</div>
|
||||
<div class="names">
|
||||
<div class="japaneseName">${japaneseName}</div>
|
||||
<div class="name">${name}</div>
|
||||
</div>
|
||||
<div class="top">
|
||||
<div class="image">
|
||||
<img class="imgFront" src="${imageSrc}" alt="${name}">
|
||||
<img class="imgBack" src="./Icons/default/pokeball.svg" alt="pokeball">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const desiredLanguage = "en";
|
||||
let overview = "Sorry, no description available.";
|
||||
let genus = "Sorry, no description available.";
|
||||
|
||||
for (const entry of pokemon[1].flavor_text_entries) {
|
||||
if (entry.language.name === desiredLanguage) {
|
||||
// Replace "\f" with a space in the flavor text
|
||||
overview = entry.flavor_text.replace("\f", " ");
|
||||
break; // Stop the loop once we find the English flavor text
|
||||
}
|
||||
}
|
||||
for (const entry of pokemon[1].genera) {
|
||||
if (entry.language.name === desiredLanguage) {
|
||||
genus = entry.genus;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
const height = pokemon[0].height / 10 + "m";
|
||||
const weight = pokemon[0].weight / 10 + "kg";
|
||||
|
||||
const genderRate = pokemon[1].gender_rate;
|
||||
const height = pokemon.height / 10 + "m";
|
||||
const weight = pokemon.weight / 10 + "kg";
|
||||
const genderRate = pokemon.gender_rate;
|
||||
let male = "";
|
||||
let female = "";
|
||||
if (genderRate === -1) {
|
||||
@@ -602,50 +141,38 @@ const displayPokemonDetails = async (pokemon) => {
|
||||
female = (genderRate / 8) * 100 + "%";
|
||||
male = 100 - (genderRate / 8) * 100 + "%";
|
||||
}
|
||||
const friendship = pokemon[1].base_happiness;
|
||||
const catchRate = pokemon[1].capture_rate;
|
||||
const friendship = pokemon.base_happiness;
|
||||
const catchRate = pokemon.capture_rate;
|
||||
|
||||
let tab1 = document.getElementById("tab_1");
|
||||
tab1.innerHTML = `
|
||||
<div>
|
||||
<div class="overview">
|
||||
<p><span class="genus">${genus}</span><br>${overview}</p>
|
||||
<div class="heightWeight">
|
||||
<span>Height:<br><b>${height}</b></span>
|
||||
<span>Weight:<br><b>${weight}</b></span>
|
||||
</div>
|
||||
|
||||
<div class="types">
|
||||
${poke_types
|
||||
.map(
|
||||
(type) => `
|
||||
<div class="poke__type__bg ${type}">
|
||||
<img src="Icons/${type}.svg" alt="Type">
|
||||
<div>
|
||||
<div class="overview">
|
||||
<p><span class="genus">${pokemon.genus}</span><br>${pokemon.flavor_text}</p>
|
||||
<div class="heightWeight">
|
||||
<span>Height:<br><b>${height}</b></span>
|
||||
<span>Weight:<br><b>${weight}</b></span>
|
||||
</div>
|
||||
<div class="types">
|
||||
${poke_types.map(type => `
|
||||
<div class="poke__type__bg ${type}">
|
||||
<img src="Icons/${type}.svg" alt="Type">
|
||||
</div>
|
||||
`).join("")}
|
||||
</div>
|
||||
</div>
|
||||
<div class="about">
|
||||
<div>Id: <b class="id">#${id}</b></div>
|
||||
<div>Gender: <b><i class="fa-solid fa-mars" style="color: #1f71ff;"></i>${male} <i class="fa-solid fa-venus" style="color: #ff5c74;"></i>${female}</b></div>
|
||||
<span>Abilities: <b>${abilities.join(", ")}</b></span>
|
||||
<span>Catch Rate: <b>${catchRate} (${((catchRate / 255) * 100).toFixed(2)}% chance)</b></span>
|
||||
<span>Base Friendship: <b>${friendship} (${friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"})</b></span>
|
||||
<span>Base Exp: <b>${pokemon.base_experience}</b></span>
|
||||
<span>Growth Rate: <b>${pokemon.growth_rate}</b></span>
|
||||
<span>Egg Groups: <b>${eggGroups.join(", ")}</b></span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="about">
|
||||
<div>Id: <b class="id">#${id}</b></div>
|
||||
<div>Gender: <b><i class="fa-solid fa-mars" style="color: #1f71ff;"></i>${male} <i class="fa-solid fa-venus" style="color: #ff5c74;"></i>${female}</b></div>
|
||||
<span>Abilities: <b>${abilities.join(", ")}</b></span>
|
||||
<span>Catch Rate: <b>${catchRate} (${((catchRate / 255) * 100).toFixed(
|
||||
2
|
||||
)}% chance)</b></span>
|
||||
<span>Base Friendship: <b>${friendship} (${
|
||||
friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"
|
||||
})</b></span>
|
||||
<span>Base Exp: <b>${pokemon[0].base_experience}</b></span>
|
||||
<span>Growth Rate: <b>${pokemon[1].growth_rate.name}</b></span>
|
||||
<span>Egg Groups: <b>${eggGroups.join(", ")}</b></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
`;
|
||||
`;
|
||||
};
|
||||
|
||||
const tabs = document.querySelectorAll("[data-tab-value]");
|
||||
|
||||
@@ -463,9 +463,6 @@ a {
|
||||
#regionSelect::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
#regionSelect::-moz-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#regionSelect span {
|
||||
background-color: rgba(46, 46, 46, 0.1);
|
||||
@@ -605,7 +602,7 @@ a {
|
||||
.dark-mode #regionSelect span {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
relative
|
||||
|
||||
.dark-mode #regionSelect span:hover{
|
||||
color: black;
|
||||
background-color: #ead51d;
|
||||
|
||||
Reference in New Issue
Block a user