From 6a2330949cbfa3ab480371866739006814f38c4f Mon Sep 17 00:00:00 2001
From: Facu <facundo.gonzalez@farmaloop.fc>
Date: Wed, 13 Mar 2024 15:48:43 -0300
Subject: [PATCH 1/2] =?UTF-8?q?A=C3=B1adir=20MiduCode=20al=20componente=20?=
 =?UTF-8?q?KonamiCode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/KonamiCode.astro |  54 +++++++++++++++-
 src/components/MiduCode.astro   | 105 --------------------------------
 src/consts/konami-codes.ts      |   1 +
 src/function/miduCode.ts        |  48 +++++++++++++++
 src/layouts/Layout.astro        |   2 -
 5 files changed, 102 insertions(+), 108 deletions(-)
 delete mode 100644 src/components/MiduCode.astro
 create mode 100644 src/function/miduCode.ts

diff --git a/src/components/KonamiCode.astro b/src/components/KonamiCode.astro
index dbad28310..1d3b30b5c 100644
--- a/src/components/KonamiCode.astro
+++ b/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: 800,
+			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>
diff --git a/src/components/MiduCode.astro b/src/components/MiduCode.astro
deleted file mode 100644
index 1e9593d29..000000000
--- a/src/components/MiduCode.astro
+++ /dev/null
@@ -1,105 +0,0 @@
-<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 defer>
-	const newContainer = document.createElement("div")
-
-	const miduCode = ["m", "i", "d", "u"]
-	let miduCodePosition = 0
-
-	document.addEventListener("keydown", async ({ key }) => {
-		if (key === miduCode[miduCodePosition]) {
-			miduCodePosition++
-			if (miduCodePosition === miduCode.length) {
-				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)
-				await showContributors()
-				await setTimeout(() => {
-					checkAndRemoveContainer()
-				}, 1000)
-			}
-		} else {
-			miduCodePosition = 0
-		}
-	})
-
-	async function showContributors() {
-		const url = "https://api.github.com/repos/midudev/la-velada-web-oficial/contributors"
-
-		const response = await fetch(url)
-		const contributors = await response.json()
-
-		for (let i = 0; i < contributors.length; i++) {
-			setTimeout(() => {
-				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")
-		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
-	}
-
-	function checkAndRemoveContainer() {
-		if (newContainer.childElementCount === 0) {
-			newContainer.remove()
-		}
-
-		setTimeout(() => {
-			checkAndRemoveContainer()
-		}, 1000)
-	}
-</script>
diff --git a/src/consts/konami-codes.ts b/src/consts/konami-codes.ts
index 12c436e62..cdb62bc65 100644
--- a/src/consts/konami-codes.ts
+++ b/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"],
 }
diff --git a/src/function/miduCode.ts b/src/function/miduCode.ts
new file mode 100644
index 000000000..413c7eb23
--- /dev/null
+++ b/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
+}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b78bdb9f1..047d6afa0 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,7 +1,6 @@
 ---
 import { ViewTransitions } from "astro:transitions"
 
-import MiduCode from "@/components/MiduCode.astro"
 import ButtonUp from "@/components/ButtonUp.astro"
 import KonamiCode from "@/components/KonamiCode.astro"
 import LightsBackground from "@/components/LightsBackground.astro"
@@ -39,7 +38,6 @@ const { title, description, preloadImgLCP } = Astro.props
 			<slot />
 			<Footer />
 			<KonamiCode />
-			<MiduCode />
 		</div>
 		<ButtonUp />
 		<style is:global>

From a493aa81c83668e275b53a5e98beaab54b06dae8 Mon Sep 17 00:00:00 2001
From: Facu <facundo.gonzalez@farmaloop.fc>
Date: Wed, 13 Mar 2024 16:00:02 -0300
Subject: [PATCH 2/2] Incrementar onFinishTime

---
 src/components/KonamiCode.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/KonamiCode.astro b/src/components/KonamiCode.astro
index 1d3b30b5c..fc7641968 100644
--- a/src/components/KonamiCode.astro
+++ b/src/components/KonamiCode.astro
@@ -86,7 +86,7 @@
 		Konami({
 			code: midu,
 			keyPressed: key,
-			onFinishTime: 800,
+			onFinishTime: 1500,
 			onSuccess: () => {
 				$miduContainer.style.cssText =
 					"position: fixed; width: 100dvw; height: 100vh; background: rgba(0,0,0,0.3); z-index: 10; inset: 0"