Merge pull request #154 from fedeperin/fix-konami-errors

Fix konami errors

src/components/KonamiCode.astro

@@ -1,40 +1,40 @@
 <script defer>
-  const container = document.querySelector("body")
-
-  const konamiCode = [
-    "ArrowUp",
-    "ArrowUp",
-    "ArrowDown",
-    "ArrowDown",
-    "ArrowLeft",
-    "ArrowRight",
-    "ArrowLeft",
-    "ArrowRight",
-    "b",
-    "a",
-  ]
-  let konamiCodePosition = 0
-
-  document.addEventListener("keydown", ({ key }) => {
-    const requiredKey = konamiCode[konamiCodePosition]
-
-    if (key != requiredKey) {
-      konamiCodePosition = 0
-      return
-    }
-
-    konamiCodePosition++
-
-    if (konamiCodePosition != konamiCode.length) return
-
-    container.style.transform = "rotateY(360deg)"
-    container.style.transition = "transform 3s ease"
-
-    container.addEventListener("transitionend", () => {
-      container.style.transition = "none"
-      container.style.transform = "rotateY(0deg)"
-    })
-
-    konamiCodePosition = 0
-  })
+	const container = document.querySelector("#main-content")
+
+	const konamiCode = [
+		"ArrowUp",
+		"ArrowUp",
+		"ArrowDown",
+		"ArrowDown",
+		"ArrowLeft",
+		"ArrowRight",
+		"ArrowLeft",
+		"ArrowRight",
+		"b",
+		"a",
+	]
+	let konamiCodePosition = 0
+
+	document.addEventListener("keydown", ({ key }) => {
+		const requiredKey = konamiCode[konamiCodePosition]
+
+		if (key !== requiredKey) {
+			konamiCodePosition = 0
+			return
+		}
+
+		konamiCodePosition++
+
+		if (konamiCodePosition !== konamiCode.length) return
+
+		container.style.transform = "rotateY(360deg)"
+		container.style.transition = "transform 2s ease"
+
+		container.addEventListener("transitionend", () => {
+			container.style.transition = ""
+			container.style.transform = ""
+		})
+
+		konamiCodePosition = 0
+	})
 </script>

src/layouts/Layout.astro

@@ -58,7 +58,7 @@ const { title, description } = Astro.props
 		class="[&_:focus-visible]:outline-none [&_:focus-visible]:ring-2 [&_:focus-visible]:ring-primary"
 	>
 		<SmokeBackground />
-		<div class="mx-auto max-w-6xl px-2 pt-16 md:pt-20 lg:px-10">
+		<div class="mx-auto max-w-6xl px-2 pt-16 md:pt-20 lg:px-10" id="main-content">
 			<slot />
 		</div>
 	</body>