Midu

src/components/KonamiCode.astro

@@ -8,9 +8,17 @@
 		height: 60px;
 		opacity: 1;
 		bottom: -50px;
+		display: block;
 		animation: bubble linear forwards 3s;
 	}
 
+	#midu {
+		width: 150px;
+		height: 150px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+
 	@keyframes bubble {
 		from {
 			opacity: 1;
@@ -25,7 +33,7 @@
 	}
 </style>
 <script defer>
-	const newContainer = document.createElement('div');
+	const newContainer = document.createElement("div")
 
 	const konamiCode = [
 		"ArrowUp",
@@ -40,70 +48,74 @@
 		"a",
 	]
 	// const konamiCode = ["ArrowUp"];
-	let konamiCodePosition = 0;
+	let konamiCodePosition = 0
 
 	document.addEventListener("keydown", async ({ key }) => {
-		const requiredKey = konamiCode[konamiCodePosition];
+		const requiredKey = konamiCode[konamiCodePosition]
 
 		if (key !== requiredKey) {
-			konamiCodePosition = 0;
-			return;
+			konamiCodePosition = 0
+			return
 		}
 
-		konamiCodePosition++;
+		konamiCodePosition++
 
-		if (konamiCodePosition !== konamiCode.length) return;
+		if (konamiCodePosition !== konamiCode.length) return
 
-		newContainer.style.cssText = 'position: fixed; width: 100dvw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 10; inset: 0';
+		newContainer.style.cssText =
+			"position: fixed; width: 100dvw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 10; inset: 0"
 
-		document.body.appendChild(newContainer);
-		console.log('Konamy code');
-		await showContributors();
-		setTimeout(() => {
-			checkAndRemoveContainer();
-		},1000)
-	});
+		document.body.appendChild(newContainer)
+		await showContributors()
+		await setTimeout(() => {
+			checkAndRemoveContainer()
+		}, 1000)
+	})
 
 	async function showContributors() {
-		const url = 'https://api.github.com/repos/midudev/la-velada-web-oficial/contributors';
+		const url = "https://api.github.com/repos/midudev/la-velada-web-oficial/contributors"
 
-		const response = await fetch(url);
-		const contributors = await response.json();
+		const response = await fetch(url)
+		const contributors = await response.json()
 
 		for (let i = 0; i < contributors.length; i++) {
 			setTimeout(() => {
-				createBubbles(contributors[i]);
-			}, i * 300);
+				createBubbles(contributors[i])
+			}, i * 300)
 		}
 	}
 
 	function createBubbles(contributor) {
-		const { avatar_url, login } = contributor;
-		const img = document.createElement('img');
-		img.src = avatar_url;
-		img.alt = login;
-		img.title = login;
-		img.classList.add('bubbles');
-		img.style.left = `${generateRandomNumber()}vw`;
-		const startRotation = Math.floor(Math.random() * (90 - (-90) + 1)) + (-45);
-		img.style.transform = `rotate(${startRotation}deg)`;
-		img.addEventListener('animationend', () => {
-			newContainer.removeChild(img);
-		});
-		newContainer.appendChild(img);
+		const { avatar_url, login } = contributor
+		const img = document.createElement("img")
+		img.src = avatar_url
+		img.alt = login
+		img.title = login
+		img.classList.add("bubbles")
+		if (login === "midudev") {
+			img.setAttribute("id", "midu")
+		} else {
+			img.style.left = `${generateRandomNumber()}vw`
+			const startRotation = Math.floor(Math.random() * (90 - -90 + 1)) + -45
+			img.style.transform = `rotate(${startRotation}deg)`
+		}
+		img.addEventListener("animationend", () => {
+			newContainer.removeChild(img)
+		})
+		newContainer.appendChild(img)
 	}
 
 	function generateRandomNumber() {
-		return Math.floor(Math.random() * 91) + 5;
+		return Math.floor(Math.random() * 91) + 5
 	}
 
 	function checkAndRemoveContainer() {
 		if (newContainer.childElementCount === 0) {
-			newContainer.remove();
+			newContainer.remove()
 		}
 
 		setTimeout(() => {
-			checkAndRemoveContainer();
-		},1000)
+			checkAndRemoveContainer()
+		}, 1000)
 	}
 </script>