Move componets and make it so escape clicks the back button for you

src/app/game/berry-dash-custom/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashCustomGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Custom'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash Custom</p>
       <p>

src/app/game/berry-dash-godot-remake/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashGodotRemakeGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Godot Remake'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash Godot Remake</p>
       <p>

src/app/game/berry-dash-lite/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashLiteGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Lite'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash Lite</p>
       <p>

src/app/game/berry-dash-ultimate/page.tsx

@@ -3,18 +3,29 @@
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashUltimateGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Ultimate'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash Ultimate</p>
       <p>

src/app/game/berry-dash-with-guns-custom/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashWithGunsCustomGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash with Guns Custom'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash with Guns Custom</p>
       <p>

src/app/game/berry-dash-with-guns/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashWithGunsGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash with Guns'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash with Guns</p>
       <p>

src/app/game/berry-dash/chatroom/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import './styles.css'
-import { BackButton } from '@/app/components/BackButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { BackButton } from '@/components/BackButton'
+import { DiscordButton } from '@/components/DiscordButton'
 import { GetIconForUser } from '@/util/bd'
 import { getCookie } from '@/util/cookie'
 import { formatHumanTime } from '@/util/time'
@@ -42,6 +42,7 @@ export default function BerryDashChatroom () {
   const [token, setToken] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [ws, setWs] = useState<WebSocket | null>(null)
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const messagesDiv = useRef<HTMLDivElement>(null)
   const [input, setInput] = useState<string>('')
@@ -109,6 +110,17 @@ export default function BerryDashChatroom () {
     }
   }, [])
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
   useEffect(() => {
     if (messagesDiv.current) {
       messagesDiv.current.scrollTop = messagesDiv.current.scrollHeight
@@ -117,7 +129,7 @@ export default function BerryDashChatroom () {
 
   return (
     <div className='box'>
-      <BackButton href='/game/berry-dash' />
+      <BackButton href='/game/berry-dash' refLink={backButtonRef} />
       <DiscordButton />
       <p className='px-8 mb-4 -mt-2 text-center text-2xl'>
         Berry Dash Chatroom

src/app/game/berry-dash/icon-marketplace/page.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
-import { BackButton } from '@/app/components/BackButton'
-import { ReloadButton } from '@/app/components/ReloadButton'
-import { UploadButton } from '@/app/components/UploadButton'
+import { BackButton } from '@/components/BackButton'
+import { ReloadButton } from '@/components/ReloadButton'
+import { UploadButton } from '@/components/UploadButton'
 import Image from 'next/image'
 
 interface MarketplaceIcon {
@@ -20,6 +20,7 @@ interface MarketplaceIcon {
 
 export default function BerryDashIconMarketplace () {
   const [response, setResponse] = useState<MarketplaceIcon[] | null | -1>(null)
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   async function Refresh () {
     try {
@@ -33,11 +34,20 @@ export default function BerryDashIconMarketplace () {
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Icon Marketplace'
     setTimeout(() => Refresh(), 0)
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <BackButton href='/game/berry-dash' />
+      <BackButton href='/game/berry-dash' refLink={backButtonRef} />
       <UploadButton href='/game/berry-dash/icon-marketplace/upload' />
       <ReloadButton
         action={() => {

src/app/game/berry-dash/icon-marketplace/upload/page.tsx

@@ -1,18 +1,19 @@
 'use client'
 
-import { BackButton } from '@/app/components/BackButton'
-import { ReloadButton } from '@/app/components/ReloadButton'
+import { BackButton } from '@/components/BackButton'
+import { ReloadButton } from '@/components/ReloadButton'
 import { getCookie } from '@/util/cookie'
 import { Turnstile } from '@marsidev/react-turnstile'
 import axios from 'axios'
 import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 export default function BerryDashSubmitIcon () {
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [name, setName] = useState<string>('')
   const [price, setPrice] = useState<number>(10)
@@ -27,12 +28,24 @@ export default function BerryDashSubmitIcon () {
       router.push(
         '/account/login?redirect=/game/berry-dash/icon-marketplace/upload'
       )
-    } else setLoading(false)
-  }, [])
+    } else setTimeout(() => setLoading(false), 0)
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [router])
 
   return (
     <div className='box'>
-      <BackButton href='/game/berry-dash/icon-marketplace' />
+      <BackButton
+        href='/game/berry-dash/icon-marketplace'
+        refLink={backButtonRef}
+      />
       <ReloadButton action={() => window.location.reload()} />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/game/berry-dash/leaderboards/page.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { BackButton } from '@/app/components/BackButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
-import { useCallback, useEffect, useState } from 'react'
+import { BackButton } from '@/components/BackButton'
+import { DiscordButton } from '@/components/DiscordButton'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { BirdColor } from '../chatroom/page'
 import axios from 'axios'
 import { GetIconForUser } from '@/util/bd'
@@ -84,6 +84,8 @@ export default function BerryDashLeaderboards () {
   const [selectedBerryOption, setSelectedBerryOption] = useState<number>(0)
   const [gettingEntries, setGettingEntries] = useState<boolean>(false)
   const [entries, setEntries] = useState<(LeaderboardEntry | Account)[]>([])
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+  const backButtonRef2 = useRef<HTMLButtonElement>(null)
 
   const Refresh = useCallback(async () => {
     setGettingEntries(true)
@@ -137,6 +139,16 @@ export default function BerryDashLeaderboards () {
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Leaderboards'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+        backButtonRef2.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   useEffect(() => {
@@ -146,7 +158,7 @@ export default function BerryDashLeaderboards () {
   return (
     <div className='box'>
       {selected == -1 ? (
-        <BackButton href='/game/berry-dash' />
+        <BackButton href='/game/berry-dash' refLink={backButtonRef} />
       ) : (
         <BackButton
           onClick={() => {
@@ -155,6 +167,7 @@ export default function BerryDashLeaderboards () {
             setSelectedBerryOption(0)
             setSelected(-1)
           }}
+          refButton={backButtonRef2}
         />
       )}
       <DiscordButton />

src/app/game/berry-dash/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function BerryDashGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Berry Dash</p>
       <p>

src/app/game/berry-dash/splash/page.tsx

@@ -1,13 +1,14 @@
 'use client'
 
-import { BackButton } from '@/app/components/BackButton'
-import { ReloadButton } from '@/app/components/ReloadButton'
-import { UploadButton } from '@/app/components/UploadButton'
+import { BackButton } from '@/components/BackButton'
+import { ReloadButton } from '@/components/ReloadButton'
+import { UploadButton } from '@/components/UploadButton'
 import axios from 'axios'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 export default function BerryDashSplash () {
   const [response, setResponse] = useState<string | null | -1>(null)
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   async function Refresh () {
     try {
@@ -20,12 +21,21 @@ export default function BerryDashSplash () {
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Berry Dash Splash Texts'
-    Refresh()
+    setTimeout(() => Refresh(), 0)
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box'>
-      <BackButton href='/game/berry-dash' />
+      <BackButton href='/game/berry-dash' refLink={backButtonRef} />
       <UploadButton href='/game/berry-dash/splash/submit' />
       <ReloadButton
         action={() => {

src/app/game/berry-dash/splash/submit/page.tsx

@@ -1,18 +1,19 @@
 'use client'
 
-import { BackButton } from '@/app/components/BackButton'
-import { ReloadButton } from '@/app/components/ReloadButton'
+import { BackButton } from '@/components/BackButton'
+import { ReloadButton } from '@/components/ReloadButton'
 import { getCookie } from '@/util/cookie'
 import { Turnstile } from '@marsidev/react-turnstile'
 import axios from 'axios'
 import { useRouter } from 'next/navigation'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 export default function BerryDashSubmitSplash () {
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [text, setText] = useState<string>('')
 
@@ -22,12 +23,21 @@ export default function BerryDashSubmitSplash () {
     const token = getCookie('accountToken', '-1')
     if (token === '-1') {
       router.push('/account/login?redirect=/game/berry-dash/splash/submit')
-    } else setLoading(false)
-  }, [])
+    } else setTimeout(() => setLoading(false), 0)
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [router])
 
   return (
     <div className='box'>
-      <BackButton href='/game/berry-dash/splash' />
+      <BackButton href='/game/berry-dash/splash' refLink={backButtonRef} />
       <ReloadButton action={() => window.location.reload()} />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/game/triangles/page.tsx

@@ -6,18 +6,29 @@ import { Navigation, Keyboard } from 'swiper/modules'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function TrianglesGameInfo () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = 'Lncvrt Games - Triangles'
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-4xl'>Triangles</p>
       <p>Triangles is a Geometry Dash fan game made in the Unity Game Engine</p>

src/app/game/xps/downloads/page.tsx

@@ -1,18 +1,29 @@
 'use client'
 
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { DiscordButton } from '@/app/components/DiscordButton'
-import { BackButton } from '@/app/components/BackButton'
+import { useEffect, useRef } from 'react'
+import { DiscordButton } from '@/components/DiscordButton'
+import { BackButton } from '@/components/BackButton'
 
 export default function XPSGameDownloads () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = "Lncvrt Games - Xytriza's GDPS Downloads"
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <BackButton href='/game/xps' />
+      <BackButton href='/game/xps' refLink={backButtonRef} />
       <DiscordButton href='https://discord.gg/9Yg7NX2HtG' />
       <p className='px-10 -my-2 mb-4 text-3xl'>Xytriza&apos;s GDPS Downloads</p>
       <div className='downloads lg:max-w-[60vw] md:max-w-[80vw] flex-col'>

src/app/game/xps/page.tsx

@@ -1,18 +1,29 @@
 'use client'
 
 import Link from 'next/link'
-import { useEffect } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { useEffect, useRef } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 
 export default function XPSGame () {
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
   useEffect(() => {
     document.title = "Lncvrt Games - Xytriza's GDPS"
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   return (
     <div className='box text-center'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton href='https://discord.gg/9Yg7NX2HtG' />
       <p className='text-4xl'>Xytriza&apos;s GDPS</p>
       <p>