Merge pull request #492 from Facug03/codes

Añadir MiduCode al componente KonamiCode

src/components/KonamiCode.astro

@@ -1,11 +1,48 @@
+<style is:global>
+	.bubbles {
+		border-radius: 50%;
+		object-fit: cover;
+		object-position: center;
+		position: absolute;
+		width: 60px;
+		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;
+			bottom: -50px;
+		}
+
+		to {
+			opacity: 0;
+			bottom: 80vh;
+			transform: rotate(0deg);
+		}
+	}
+</style>
+
 <script>
 	import { konamiCodes } from "@/consts/konami-codes"
 	import { Konami } from "@/function/konami"
+	import { checkAndRemoveContainer, showContributors } from "@/function/miduCode"
 	import { $ } from "@/consts/dom-selector"
 
-	const { rotateY, gloveCursor, amongUsCursor, lolCursor } = konamiCodes
+	const { rotateY, gloveCursor, amongUsCursor, lolCursor, midu } = konamiCodes
 
 	const $container = $("#main-content")
+	const $miduContainer = document.createElement("div")
 
 	document.addEventListener("keydown", ({ key }) => {
 		Konami({
@@ -45,5 +82,20 @@
 				$("body").style.cursor = "url('/img/cursor/among-us.cur'), auto"
 			},
 		})
+
+		Konami({
+			code: midu,
+			keyPressed: key,
+			onFinishTime: 1500,
+			onSuccess: () => {
+				$miduContainer.style.cssText =
+					"position: fixed; width: 100dvw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 10; inset: 0"
+				document.body.appendChild($miduContainer)
+				showContributors($miduContainer)
+			},
+			onFinish: () => {
+				checkAndRemoveContainer($miduContainer)
+			},
+		})
 	})
 </script>

src/consts/konami-codes.ts

@@ -14,4 +14,5 @@ export const konamiCodes = {
 	gloveCursor: ["g", "l", "o", "v", "e"],
 	amongUsCursor: ["a", "m", "o", "n", "g", "u", "s"],
 	lolCursor: ["l", "o", "l"],
+	midu: ["m", "i", "d", "u"],
 }

src/function/miduCode.ts

@@ -0,0 +1,48 @@
+interface Contributor {
+	avatar_url: string
+	login: string
+}
+
+export async function showContributors($miduContainer: HTMLDivElement) {
+	const url = "https://api.github.com/repos/midudev/la-velada-web-oficial/contributors"
+
+	const response = await fetch(url)
+	const contributors = (await response.json()) as Contributor[]
+
+	for (let i = 0; i < contributors.length; i++) {
+		setTimeout(() => {
+			const { avatar_url, login } = contributors[i]
+			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", () => {
+				$miduContainer.removeChild(img)
+			})
+			$miduContainer.appendChild(img)
+		}, i * 300)
+	}
+}
+
+export function checkAndRemoveContainer($miduContainer: HTMLDivElement) {
+	if ($miduContainer.childElementCount === 0) {
+		$miduContainer.remove()
+		return
+	}
+
+	setTimeout(() => {
+		checkAndRemoveContainer($miduContainer)
+	}, 1000)
+}
+
+function generateRandomNumber() {
+	return Math.floor(Math.random() * 91) + 5
+}

src/layouts/Layout.astro

@@ -39,7 +39,6 @@ const { title, description, preloadImgLCP } = Astro.props
 			<slot />
 			<Footer />
 			<KonamiCode />
-			<MiduCode />
 		</div>
 		<ButtonUp />
 		<style is:global>