Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
css/styles.css
View File

@ -51,7 +51,7 @@ body {
}
#landing {
width: 100vw;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
@ -87,6 +87,7 @@ h1 {
font-weight: 600;
text-align: center;
user-select: none;
white-space: nowrap;
}
#titleBanner {
@ -138,7 +139,7 @@ h1 {
background-color: #101010;
overflow: auto;
color: white;
padding: 50px;
padding: 10px;
}
p {
@ -191,10 +192,118 @@ h3 {
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 {
max-width: 1300px;
max-width: 1440px;
margin: auto;
margin-bottom: 50px;
}
@ -348,147 +457,147 @@ h3 {
background-color: var(--fairy) !important;
}
#pokemon-container .normal-primary-type {
.normal-primary-type {
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;
}
#pokemon-container .fighting-primary-type {
.fighting-primary-type {
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;
}
#pokemon-container .flying-primary-type {
.flying-primary-type {
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;
}
#pokemon-container .poison-primary-type {
.poison-primary-type {
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;
}
#pokemon-container .ground-primary-type {
.ground-primary-type {
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;
}
#pokemon-container .rock-primary-type {
.rock-primary-type {
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;
}
#pokemon-container .bug-primary-type {
.bug-primary-type {
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;
}
#pokemon-container .ghost-primary-type {
.ghost-primary-type {
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;
}
#pokemon-container .steel-primary-type {
.steel-primary-type {
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;
}
#pokemon-container .fire-primary-type {
.fire-primary-type {
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;
}
#pokemon-container .water-primary-type {
.water-primary-type {
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;
}
#pokemon-container .grass-primary-type {
.grass-primary-type {
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;
}
#pokemon-container .electric-primary-type {
.electric-primary-type {
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;
}
#pokemon-container .psychic-primary-type {
.psychic-primary-type {
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;
}
#pokemon-container .ice-primary-type {
.ice-primary-type {
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;
}
#pokemon-container .dragon-primary-type {
.dragon-primary-type {
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;
}
#pokemon-container .dark-primary-type {
.dark-primary-type {
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;
}
#pokemon-container .fairy-primary-type {
.fairy-primary-type {
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;
}
@ -498,7 +607,7 @@ h3 {
overflow-x: auto;
overflow-y: hidden;
width: 100%;
height: 220px;
height: 230px;
}
.pokemon-card {
@ -518,6 +627,7 @@ h3 {
width: 192px;
margin: 10px;
image-rendering: pixelated;
color: black;
}
.pokemon-card .pokemon-name {
@ -648,11 +758,10 @@ h3 {
}
.carousel-item {
min-width: 200px;
height: 800px;
width: 150px;
min-width: 150px;
border-radius: 74px;
width: 146px;
min-width: 146px;
border-radius: 75px;
}
.carousel-item .carousel-id {
@ -674,12 +783,36 @@ h3 {
}
.content-column {
max-width: 1300px;
max-width: 1440px;
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 {
padding: 50px;
}
.feature-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
@ -720,3 +853,11 @@ h3 {
}
}
h1 {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

2
index.html
View File

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

129
js/scripts.js
View File

@ -375,6 +375,11 @@ function addPokemon(pokemonData) {
pokemonImg.alt = pokemonData.name;
pokemon.appendChild(pokemonImg);
pokemon.addEventListener("click", () => {
const id = pokemonData.id;
createPokemonDisplay(id);
});
container.appendChild(pokemon);
}
@ -397,6 +402,115 @@ function restartPokedexUpdate() {
}, 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
function carouselExpand(i) {
@ -439,3 +553,18 @@ initCarousel();
carouselExpand(1);
// Initialize pokedex
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`;
}