KonamiCode & MiduCode

Ahora quedaron ambos, el konami code y el miducode
midudev · Mar 13, 2024 · a1a40b9 · a1a40b9
1 parent 12b89ef
commit a1a40b9
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 116 deletions.
diff --git a/src/components/KonamiCode.astro b/src/components/KonamiCode.astro
@@ -1,121 +1,49 @@
-<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 konamiCode = [
-		"ArrowUp",
-		"ArrowUp",
-		"ArrowDown",
-		"ArrowDown",
-		"ArrowLeft",
-		"ArrowRight",
-		"ArrowLeft",
-		"ArrowRight",
-		"b",
-		"a",
-	]
-	// const konamiCode = ["ArrowUp"];
-	let konamiCodePosition = 0
-
-	document.addEventListener("keydown", async ({ key }) => {
-		const requiredKey = konamiCode[konamiCodePosition]
-
-		if (key !== requiredKey) {
-			konamiCodePosition = 0
-			return
-		}
-
-		konamiCodePosition++
-
-		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"
-
-		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 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)
+<script>
+	import { konamiCodes } from "@/consts/konami-codes"
+	import { Konami } from "@/function/konami"
+	import { $ } from "@/consts/dom-selector"
+
+	const { rotateY, gloveCursor, amongUsCursor, lolCursor } = konamiCodes
+
+	const $container = $("#main-content")
+
+	document.addEventListener("keydown", ({ key }) => {
+		Konami({
+			code: rotateY,
+			keyPressed: key,
+			onFinishTime: 1500,
+			onSuccess: () => {
+				$container.style.transform = "rotateY(360deg)"
+				$container.style.transition = "transform 2s ease"
+			},
+			onFinish: () => {
+				$container.style.transition = "none"
+				$container.style.transform = "none"
+			},
 		})
-		newContainer.appendChild(img)
-	}
 
-	function generateRandomNumber() {
-		return Math.floor(Math.random() * 91) + 5
-	}
+		Konami({
+			code: lolCursor,
+			keyPressed: key,
+			onSuccess: () => {
+				$("body").style.cursor = "url('/img/cursor/lol.cur'), auto"
+			},
+		})
 
-	function checkAndRemoveContainer() {
-		if (newContainer.childElementCount === 0) {
-			newContainer.remove()
-		}
+		Konami({
+			code: gloveCursor,
+			keyPressed: key,
+			onSuccess: () => {
+				$("body").style.cursor = "url('/img/cursor/boxing-glove.cur'), auto"
+			},
+		})
 
-		setTimeout(() => {
-			checkAndRemoveContainer()
-		}, 1000)
-	}
+		Konami({
+			code: amongUsCursor,
+			keyPressed: key,
+			onSuccess: () => {
+				$("body").style.cursor = "url('/img/cursor/among-us.cur'), auto"
+			},
+		})
+	})
 </script>
diff --git a/src/components/MiduCode.astro b/src/components/MiduCode.astro
@@ -0,0 +1,105 @@
+<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/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 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"
@@ -38,6 +39,7 @@ const { title, description, preloadImgLCP } = Astro.props
 			<slot />
 			<Footer />
 			<KonamiCode />
+			<MiduCode />
 		</div>
 		<ButtonUp />
 		<style is:global>