diff --git a/pokedex/get_pokemon.php b/pokedex/get_pokemon.php new file mode 100644 index 0000000..a7edb56 --- /dev/null +++ b/pokedex/get_pokemon.php @@ -0,0 +1,47 @@ +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(); +?> diff --git a/pokedex/get_pokemons.php b/pokedex/get_pokemons.php new file mode 100644 index 0000000..f9560ba --- /dev/null +++ b/pokedex/get_pokemons.php @@ -0,0 +1,38 @@ +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(); +?> diff --git a/pokedex/script.js b/pokedex/script.js index bd46ca9..d5fe7f0 100644 --- a/pokedex/script.js +++ b/pokedex/script.js @@ -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) => { #${id}

${name}

- ${poke_types - .map( - (type) => ` -
- Type -
- ` - ) - .join("")} + ${poke_types.map(type => ` +
+ Type +
+ `).join("")}
- ${name} + ${name} pokeball
#${id} @@ -175,15 +135,8 @@ const createPokemonCard = (pokemon) => {
`; - //
- //
${moves[0]}
- //
${moves[1]}
- //
- 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(); diff --git a/pokedex/script2.js b/pokedex/script2.js index da2e0d6..c9be91f 100644 --- a/pokedex/script2.js +++ b/pokedex/script2.js @@ -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 = ` -
-
-
-
- `; - - 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 `test images` - })] - - // var weakTypesString=''; - for(let i in weakTypes){ - weakTypesString += weakTypes[i]; - } - - let strongTypes=[res.damage_relations.double_damage_to.map((type)=>{ - return `test images` - })] - - // var strongTypesString=''; - for(let i in strongTypes){ - strongTypesString += strongTypes[i]; - } - - let tab2 = document.getElementById("tab_2"); - tab2.innerHTML = ` -
-
+ let tab2 = document.getElementById("tab_2"); + tab2.innerHTML = ` +
+
- Health: - ${hp} + Health: + ${hp}
- - + +
+
+
+ Attack: + ${attack}
- - -
-
- Attack: - ${attack} + +
+
+
+ Defense: + ${defense}
- - + +
+
+
+ Sp. Atk: + ${spAttack}
- - - -
-
- Defense: - ${defense} + +
+
+
+ Sp. Def: + ${spDefense}
- - + +
+
+
+ Speed: + ${speed}
- - - -
-
- Sp. Atk: - ${spAttack} + +
+
+
+ Total: + ${speed + hp + attack + defense + spAttack + spDefense}
- - -
- - -
-
- Sp. Def: - ${spDefense} -
- - -
- - - -
-
- Speed: - ${speed} -
- - -
- - -
-
- Total: - ${speed + hp + attack + defense + spAttack + spDefense} -
- - -
-
-
-
- Weak Against -
- -
- -
- ${weakTypesString==""?'None':weakTypesString} - -
-
-
-
- - Strong Against - -
- -
- ${strongTypesString==""?'None':strongTypesString} -
-
- `; - - }) - - }) - - - // let weakTypes=[...pokemon[2].damage_relations.no_damage_to.map((type)=>{ - // return `test images` - // })] - - // var weakTypesString=''; - // for(let i in weakTypes){ - // weakTypesString=weakTypesString+weakTypes[i]; - - // } - - // let strongTypes=[...pokemon[2].damage_relations.double_damage_to.map((type)=>{ - // return `test images` - // })] - - // var strongTypesString=''; - // for(let i in strongTypes){ - // strongTypesString=strongTypesString+strongTypes[i]; - // } - - // let tab2 = document.getElementById("tab_2"); - // tab2.innerHTML = ` - //
- //
- //
- // Health: - // ${hp} - //
- // - // - //
- - - //
- //
- // Attack: - // ${attack} - //
- // - // - //
- - - - //
- //
- // Defense: - // ${defense} - //
- // - // - //
- - - - //
- //
- // Sp. Atk: - // ${spAttack} - //
- // - // - //
- - - //
- //
- // Sp. Def: - // ${spDefense} - //
- // - // - //
- - - - //
- //
- // Speed: - // ${speed} - //
- // - // - //
- - - //
- //
- // Total: - // ${speed + hp + attack + defense + spAttack + spDefense} - //
- // - // - //
- //
- //
- //
- // Weak Against - //
- - //
- - //
- // ${weakTypesString==""?'None':weakTypesString} - - //
- //
- //
- //
- // - // Strong Against - // - //
- - //
- // ${strongTypesString==""?'None':strongTypesString} - //
- //
- // `; - - - - - } - else{ - console.log(pokemon[2]) - } - - - + +
+
+ `; let pokemonDetailsEl = document.getElementById("pokemon-details"); pokemonDetailsEl.innerHTML = ` -
- - -
-
-
${japaneseName}
-
${name}
- -
-
-
- ${name} +
+ + +
+
+
${japaneseName}
+
${name}
+
+
+
+ ${name} pokeball -
- -
- +
+
`; - 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 = ` -
-
-

${genus}
${overview}

-
- Height:
${height} - Weight:
${weight} -
- -
- ${poke_types - .map( - (type) => ` -
- Type +
+
+

${pokemon.genus}
${pokemon.flavor_text}

+
+ Height:
${height} + Weight:
${weight} +
+
+ ${poke_types.map(type => ` +
+ Type +
+ `).join("")} +
+
+
+
Id: #${id}
+
Gender: ${male} ${female}
+ Abilities: ${abilities.join(", ")} + Catch Rate: ${catchRate} (${((catchRate / 255) * 100).toFixed(2)}% chance) + Base Friendship: ${friendship} (${friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"}) + Base Exp: ${pokemon.base_experience} + Growth Rate: ${pokemon.growth_rate} + Egg Groups: ${eggGroups.join(", ")} +
- ` - ) - .join("")} -
-
- -
-
Id: #${id}
-
Gender: ${male} ${female}
- Abilities: ${abilities.join(", ")} - Catch Rate: ${catchRate} (${((catchRate / 255) * 100).toFixed( - 2 - )}% chance) - Base Friendship: ${friendship} (${ - friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher" - }) - Base Exp: ${pokemon[0].base_experience} - Growth Rate: ${pokemon[1].growth_rate.name} - Egg Groups: ${eggGroups.join(", ")} - -
- - -`; + `; }; const tabs = document.querySelectorAll("[data-tab-value]"); diff --git a/pokedex/style.css b/pokedex/style.css index 9ec4623..f4dbb03 100644 --- a/pokedex/style.css +++ b/pokedex/style.css @@ -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;