ShrimpDelightSite/shrimple-functions.js
2026-03-13 00:45:37 -06:00

60 lines
2.0 KiB
JavaScript

import { projects } from "./shrimpjects.js";
export function getProjectData(project){
const leftImage = document.getElementById("image-left");
const rightImage = document.getElementById("image-right");
const centralImage = document.getElementById("image-central");
const projectContent = document.getElementById("project-content");
const projectData = projects[project];
projectContent.innerHTML = projectData.content;
const assetPath = "assets/"
leftImage.src = assetPath + projectData.images.left.src;
leftImage.alt = "altleft";
rightImage.src = assetPath + projectData.images.right.src;
centralImage.src = assetPath + projectData.images.central.src;
return;
}
export function clearSelectedProjectClass() {
document.getElementById("biotama").classList.remove("selected-project");
document.getElementById("htp").classList.remove("selected-project");
}
export function createShrimpFooter() {
const footer = document.getElementById("shrimp-gif");
footer.innerHTML = "<img src='./assets/dance-shrimp-dance.gif' alt='a shrimp dancing'>".repeat(10);
}
export function itsRainingShrimp() {
const shrimpyRain = document.getElementById("shrimply-the-rain");
// push shrimp rain to the front. It's basically an overlay
shrimpyRain.style.zIndex = 2;
var increment = 0;
var drops = "";
// maxWidthToShrimp is set based on image size so not to overflow
const maxWidthToShrimp = 83;
while (increment < maxWidthToShrimp) {
// how much you want shrimp to cover
var randomTwoHundo = (Math.floor(Math.random() * 200));
drops += '<img src="assets/shrimp.png" style="'
+ 'left: ' + increment
+ '%; bottom: ' + (randomTwoHundo) + '%;" />'
increment++;
}
shrimpyRain.innerHTML = drops;
// wait until after the animation plays to make the shrimp disappear 🪄
setTimeout(() => {
shrimpyRain.style.zIndex = -1;
shrimpyRain.innerHTML = "";
}, 2950);
}