Pokemon Popup w/ statblock

This commit is contained in:
Notoric 2024-04-15 17:21:08 +01:00
parent 636b43a261
commit caf9ec9187
3 changed files with 317 additions and 47 deletions

View File

@ -51,7 +51,7 @@ body {
} }
#landing { #landing {
width: 100vw; width: 100%;
height: 100vh; height: 100vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -87,6 +87,7 @@ h1 {
font-weight: 600; font-weight: 600;
text-align: center; text-align: center;
user-select: none; user-select: none;
white-space: nowrap;
} }
#titleBanner { #titleBanner {
@ -138,7 +139,7 @@ h1 {
background-color: #101010; background-color: #101010;
overflow: auto; overflow: auto;
color: white; color: white;
padding: 50px; padding: 10px;
} }
p { p {
@ -191,10 +192,118 @@ h3 {
border-bottom: none; border-bottom: none;
} }
/* FULLSCREEN STYLES */
#fullscreen {
position: fixed;
height: 100vh;
width: 100%;
background: #1118;
z-index: 100;
backdrop-filter: blur(10px);
top: 0px;
left: 0px;
display: none;
}
#fullscreen.visible {
display: block;
}
#pokemon-display {
height: calc(100% - 70px);
width: calc(100% - 70px);
background: white;
margin: 35px;
display: flex;
border-radius: 25px;
}
#fullscreen #close-button {
position: absolute;
top: 2px;
right: 0px;
height: 40px;
width: 40px;
border: 0;
background: #fff0;
font-size: 1.5em;
cursor: pointer;
color: white;
text-shadow: black 1px 1px 3px;
}
#pokemon-display img {
max-height: 475px;
max-width: 475px;
}
#statblock .stat-empty {
color: #bbb;
}
#statblock #hp .stat-filled {
color: #90d060;
}
#statblock #attack .stat-filled {
color: #ffd060;
}
#statblock #defense .stat-filled {
color: #f09040;
}
#statblock #special-attack .stat-filled {
color: #40a0f0;
}
#statblock #special-defense .stat-filled {
color: #a030ff;
}
#statblock #speed .stat-filled {
color: #ff40ff;
}
#statblock {
background-color: #222;
color: white;
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
height: fit-content;
}
.stat-bar {
display: grid;
margin-bottom: 8px;
}
#statblock .stat-name {
grid-column: 1;
grid-row: 1;
}
#statblock .stat-value {
grid-column: 2;
grid-row: 1;
text-align: right;
}
#statblock .stat-graphic {
grid-column: 1 / span 2;
grid-row: 2;
}
#statblock p {
margin: 0;
}
/* POKEDEX STYLES */ /* POKEDEX STYLES */
#pokedex { #pokedex {
max-width: 1300px; max-width: 1440px;
margin: auto; margin: auto;
margin-bottom: 50px; margin-bottom: 50px;
} }
@ -348,147 +457,147 @@ h3 {
background-color: var(--fairy) !important; background-color: var(--fairy) !important;
} }
#pokemon-container .normal-primary-type { .normal-primary-type {
background-color: var(--normal) !important; background-color: var(--normal) !important;
} }
#pokemon-container .normal-secondary-type { .normal-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--normal) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--normal) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .fighting-primary-type { .fighting-primary-type {
background-color: var(--fighting) !important; background-color: var(--fighting) !important;
} }
#pokemon-container .fighting-secondary-type { .fighting-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--fighting) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--fighting) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .flying-primary-type { .flying-primary-type {
background-color: var(--flying) !important; background-color: var(--flying) !important;
} }
#pokemon-container .flying-secondary-type { .flying-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--flying) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--flying) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .poison-primary-type { .poison-primary-type {
background-color: var(--poison) !important; background-color: var(--poison) !important;
} }
#pokemon-container .poison-secondary-type { .poison-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--poison) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--poison) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .ground-primary-type { .ground-primary-type {
background-color: var(--ground) !important; background-color: var(--ground) !important;
} }
#pokemon-container .ground-secondary-type { .ground-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--ground) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--ground) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .rock-primary-type { .rock-primary-type {
background-color: var(--rock) !important; background-color: var(--rock) !important;
} }
#pokemon-container .rock-secondary-type { .rock-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--rock) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--rock) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .bug-primary-type { .bug-primary-type {
background-color: var(--bug) !important; background-color: var(--bug) !important;
} }
#pokemon-container .bug-secondary-type { .bug-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--bug) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--bug) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .ghost-primary-type { .ghost-primary-type {
background-color: var(--ghost) !important; background-color: var(--ghost) !important;
} }
#pokemon-container .ghost-secondary-type { .ghost-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--ghost) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--ghost) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .steel-primary-type { .steel-primary-type {
background-color: var(--steel) !important; background-color: var(--steel) !important;
} }
#pokemon-container .steel-secondary-type { .steel-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--steel) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--steel) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .fire-primary-type { .fire-primary-type {
background-color: var(--fire) !important; background-color: var(--fire) !important;
} }
#pokemon-container .fire-secondary-type { .fire-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--fire) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--fire) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .water-primary-type { .water-primary-type {
background-color: var(--water) !important; background-color: var(--water) !important;
} }
#pokemon-container .water-secondary-type { .water-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--water) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--water) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .grass-primary-type { .grass-primary-type {
background-color: var(--grass) !important; background-color: var(--grass) !important;
} }
#pokemon-container .grass-secondary-type { .grass-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--grass) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--grass) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .electric-primary-type { .electric-primary-type {
background-color: var(--electric) !important; background-color: var(--electric) !important;
} }
#pokemon-container .electric-secondary-type { .electric-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--electric) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--electric) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .psychic-primary-type { .psychic-primary-type {
background-color: var(--psychic) !important; background-color: var(--psychic) !important;
} }
#pokemon-container .psychic-secondary-type { .psychic-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--psychic) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--psychic) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .ice-primary-type { .ice-primary-type {
background-color: var(--ice) !important; background-color: var(--ice) !important;
} }
#pokemon-container .ice-secondary-type { .ice-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--ice) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--ice) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .dragon-primary-type { .dragon-primary-type {
background-color: var(--dragon) !important; background-color: var(--dragon) !important;
} }
#pokemon-container .dragon-secondary-type { .dragon-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--dragon) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--dragon) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .dark-primary-type { .dark-primary-type {
background-color: var(--dark) !important; background-color: var(--dark) !important;
} }
#pokemon-container .dark-secondary-type { .dark-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--dark) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--dark) , 0px 0px 0px 0px transparent !important;
} }
#pokemon-container .fairy-primary-type { .fairy-primary-type {
background-color: var(--fairy) !important; background-color: var(--fairy) !important;
} }
#pokemon-container .fairy-secondary-type { .fairy-secondary-type {
box-shadow: inset 0px -150px 100px -100px var(--fairy) , 0px 0px 0px 0px transparent !important; box-shadow: inset 0px -150px 100px -100px var(--fairy) , 0px 0px 0px 0px transparent !important;
} }
@ -498,7 +607,7 @@ h3 {
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
width: 100%; width: 100%;
height: 220px; height: 230px;
} }
.pokemon-card { .pokemon-card {
@ -518,6 +627,7 @@ h3 {
width: 192px; width: 192px;
margin: 10px; margin: 10px;
image-rendering: pixelated; image-rendering: pixelated;
color: black;
} }
.pokemon-card .pokemon-name { .pokemon-card .pokemon-name {
@ -648,11 +758,10 @@ h3 {
} }
.carousel-item { .carousel-item {
min-width: 200px;
height: 800px; height: 800px;
width: 150px; width: 146px;
min-width: 150px; min-width: 146px;
border-radius: 74px; border-radius: 75px;
} }
.carousel-item .carousel-id { .carousel-item .carousel-id {
@ -674,12 +783,36 @@ h3 {
} }
.content-column { .content-column {
max-width: 1300px; max-width: 1440px;
margin: auto; margin: auto;
} }
/* FULLSCREEN STYLES */
#pokemon-display {
height: calc(100% - 200px);
width: calc(100% - 200px);
margin: 100px;
border-radius: 60px;
}
#fullscreen #close-button {
top: 20px;
right: 20px;
height: 60px;
width: 60px;
border-radius: 60px;
font-size: 2em;
}
/* BELOW LANDING STYLES */ /* BELOW LANDING STYLES */
#below-landing {
padding: 50px;
}
.feature-showcase { .feature-showcase {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -720,3 +853,11 @@ h3 {
} }
} }
h1 {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

View File

@ -17,7 +17,7 @@
<input id="bgColour" type="color" value="#ffffff"> <input id="bgColour" type="color" value="#ffffff">
</div> </div>
</div> </div>
<div id="fullscreen"></div>
<div id="below-landing"> <div id="below-landing">
<section id="pokedex"> <section id="pokedex">
<h2>Pokedex</h2> <h2>Pokedex</h2>

View File

@ -375,6 +375,11 @@ function addPokemon(pokemonData) {
pokemonImg.alt = pokemonData.name; pokemonImg.alt = pokemonData.name;
pokemon.appendChild(pokemonImg); pokemon.appendChild(pokemonImg);
pokemon.addEventListener("click", () => {
const id = pokemonData.id;
createPokemonDisplay(id);
});
container.appendChild(pokemon); container.appendChild(pokemon);
} }
@ -397,6 +402,115 @@ function restartPokedexUpdate() {
}, 250); }, 250);
} }
async function createPokemonDisplay(id) {
const fullscreenContainer = document.getElementById("fullscreen");
fullscreenContainer.className = "visible";
const pokemonDisplay = document.createElement("div");
pokemonDisplay.id = "pokemon-display";
const closeButton = document.createElement("button");
closeButton.id = "close-button";
closeButton.innerHTML = "X";
closeButton.addEventListener("click", () => {
closePokemonDisplay();
});
fullscreenContainer.addEventListener("click", (event) => {
if (event.target.id === "fullscreen") {
closePokemonDisplay();
}
});
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
const response = await fetch(url);
const data = await response.json();
pokemonDisplay.className = data.types[0].type.name + "-primary-type"
const pokemonName = document.createElement("p");
pokemonName.className = "pokemon-name";
let formatedName = "";
data.name.split("-").forEach((word) => {
formatedName += word.charAt(0).toUpperCase() + word.slice(1) + " ";
});
formatedName = formatedName.slice(0, formatedName.length - 1);
pokemonName.innerHTML = formatedName;
const pokemonId = document.createElement("p");
pokemonId.className = "pokemon-id";
pokemonId.innerHTML = `#${data.id}`;
const pokemonImg = document.createElement("img");
pokemonImg.src = data.sprites.other["official-artwork"].front_default;
pokemonImg.alt = data.name;
const pokemonStatblock = document.createElement("div");
pokemonStatblock.id = "statblock";
data.stats.forEach((stat) => {
const statBar = document.createElement("div");
statBar.className = "stat-bar";
statBar.id = stat.stat.name;
const statName = document.createElement("p");
statName.className = "stat-name";
let formatedStatName = "";
stat.stat.name.split("-").forEach((word) => {
formatedStatName += word.charAt(0).toUpperCase() + word.slice(1) + " ";
});
formatedStatName = formatedStatName.slice(0, formatedStatName.length - 1);
statName.innerHTML = formatedStatName;
const statValue = document.createElement("p");
statValue.className = "stat-value";
statValue.innerHTML = stat.base_stat;
const statGraphic = document.createElement("p");
statGraphic.className = "stat-graphic";
let stringFilled = document.createElement("span");
let stringEmpty = document.createElement("span");
const barSize = 25;
const baseStat = (stat.base_stat / 255) * barSize;
const emptyStat = barSize - baseStat;
stringFilled.innerHTML = "❚".repeat(baseStat);
stringEmpty.innerHTML = "❚".repeat(emptyStat);
stringFilled.className = "stat-filled";
stringEmpty.className = "stat-empty";
statGraphic.appendChild(stringFilled);
statGraphic.appendChild(stringEmpty);
statBar.appendChild(statGraphic);
statBar.appendChild(statName);
statBar.appendChild(statValue);
pokemonStatblock.appendChild(statBar);
});
pokemonDisplay.appendChild(pokemonName);
pokemonDisplay.appendChild(pokemonId);
pokemonDisplay.appendChild(pokemonImg);
pokemonDisplay.appendChild(pokemonStatblock);
fullscreenContainer.appendChild(pokemonDisplay);
fullscreenContainer.appendChild(closeButton);
}
function closePokemonDisplay() {
const fullscreenContainer = document.getElementById("fullscreen");
fullscreenContainer.className = "";
const children = Array.from(fullscreenContainer.children);
children.forEach((child) => {
fullscreenContainer.removeChild(child);
});
}
// ACCORDIAN IMAGES // ACCORDIAN IMAGES
function carouselExpand(i) { function carouselExpand(i) {
@ -439,3 +553,18 @@ initCarousel();
carouselExpand(1); carouselExpand(1);
// Initialize pokedex // Initialize pokedex
initPokedex(); initPokedex();
function handleMouseMove(event) {
const width = document.body.clientWidth;
const height = document.body.clientHeight;
const xAbsolute = event.clientX / width;
const yAbsolute = event.clientY / height;
const maxOffset = 40;
const xOffset = (xAbsolute * (2 * maxOffset)) - maxOffset;
const yOffset = (yAbsolute * (2 * maxOffset)) - maxOffset;
document.body.style.backgroundPosition = `${xOffset}px ${yOffset}px`;
}