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

src/app/account/change-password/page.tsx

@@ -1,15 +1,16 @@
 'use client'
 
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { DiscordButton } from '@/components/DiscordButton'
 import axios from 'axios'
-import { BackButton } from '@/app/components/BackButton'
-import { useEffect, useState } from 'react'
+import { BackButton } from '@/components/BackButton'
+import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { getCookie, setCookie } from '@/util/cookie'
 
 export default function AccountChangePasswordPage () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [newPassword, setNewPassword] = useState<string>('')
   const [retypeNewPassword, setRetypeNewPassword] = useState<string>('')
@@ -20,12 +21,21 @@ export default function AccountChangePasswordPage () {
     const token = getCookie('accountToken', '-1')
     if (token === '-1') {
       router.push('/account/login')
-    } 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='/account' />
+      <BackButton href='/account' refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading ? 'Loading...' : 'Change Lncvrt Games Account Password'}

src/app/account/change-username/page.tsx

@@ -1,15 +1,16 @@
 'use client'
 
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { DiscordButton } from '@/components/DiscordButton'
 import axios from 'axios'
-import { BackButton } from '@/app/components/BackButton'
-import { useEffect, useState } from 'react'
+import { BackButton } from '@/components/BackButton'
+import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { getCookie, setCookie } from '@/util/cookie'
 
 export default function AccountChangeUsernamePage () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [newUsername, setNewUsername] = useState<string>('')
 
@@ -19,12 +20,21 @@ export default function AccountChangeUsernamePage () {
     const token = getCookie('accountToken', '-1')
     if (token === '-1') {
       router.push('/account/login')
-    } 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='/account' />
+      <BackButton href='/account' refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading ? 'Loading...' : 'Change Lncvrt Games Account Username'}

src/app/account/forgot-password/page.tsx

@@ -1,16 +1,17 @@
 'use client'
 
 import { Turnstile } from '@marsidev/react-turnstile'
-import { DiscordButton } from '../../components/DiscordButton'
+import { DiscordButton } from '../../../components/DiscordButton'
 import axios from 'axios'
-import { useEffect, useState } from 'react'
-import { BackButton } from '@/app/components/BackButton'
+import { useEffect, useRef, useState } from 'react'
+import { BackButton } from '@/components/BackButton'
 import { getCookie } from '@/util/cookie'
 import { useRouter } from 'next/navigation'
 
 export default function AccountForgotPasswordPage () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
@@ -23,12 +24,21 @@ export default function AccountForgotPasswordPage () {
     const token = getCookie('accountToken', '-1')
     if (token !== '-1') {
       router.push('/account')
-    } 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='/account/login' />
+      <BackButton href='/account/login' refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/account/forgot-username/page.tsx

@@ -1,16 +1,17 @@
 'use client'
 
 import { Turnstile } from '@marsidev/react-turnstile'
-import { DiscordButton } from '../../components/DiscordButton'
+import { DiscordButton } from '../../../components/DiscordButton'
 import axios from 'axios'
-import { useEffect, useState } from 'react'
-import { BackButton } from '@/app/components/BackButton'
+import { useEffect, useRef, useState } from 'react'
+import { BackButton } from '@/components/BackButton'
 import { getCookie } from '@/util/cookie'
 import { useRouter } from 'next/navigation'
 
 export default function AccountForgotUsernamePage () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
@@ -23,12 +24,21 @@ export default function AccountForgotUsernamePage () {
     const token = getCookie('accountToken', '-1')
     if (token !== '-1') {
       router.push('/account')
-    } 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='/account/login' />
+      <BackButton href='/account/login' refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/account/login/page.tsx

@@ -2,17 +2,18 @@
 
 import { useRouter, useSearchParams } from 'next/navigation'
 import { getCookie, setCookie } from '@/util/cookie'
-import { Suspense, useEffect, useState } from 'react'
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { Suspense, useEffect, useRef, useState } from 'react'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 import axios from 'axios'
 import Link from 'next/link'
-import { BackButton } from '@/app/components/BackButton'
+import { BackButton } from '@/components/BackButton'
 
 function AccountLoginForm ({ redirect }: { redirect: string | null }) {
   const [loading, setLoading] = useState<boolean>(true)
   const [alreadyLoggedIn, setAlreadyLoggedIn] = useState<boolean>(false)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [username, setUsername] = useState<string>('')
   const [password, setPassword] = useState<string>('')
@@ -23,14 +24,27 @@ function AccountLoginForm ({ redirect }: { redirect: string | null }) {
     const token = getCookie('accountToken', '-1')
     if (token !== '-1') {
       document.title = 'Lncvrt Games - Account Login'
-      setAlreadyLoggedIn(true)
+      setTimeout(() => setAlreadyLoggedIn(true), 0)
     }
-    setLoading(false)
+    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'>
-      {alreadyLoggedIn ? <BackButton href='/account' /> : <HomeButton />}
+      {alreadyLoggedIn ? (
+        <BackButton href='/account' refLink={backButtonRef} />
+      ) : (
+        <HomeButton refLink={backButtonRef} />
+      )}
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/account/page.tsx

@@ -1,15 +1,16 @@
 'use client'
 
-import { HomeButton } from '@/app/components/HomeButton'
-import { DiscordButton } from '@/app/components/DiscordButton'
+import { HomeButton } from '@/components/HomeButton'
+import { DiscordButton } from '@/components/DiscordButton'
 import { getCookie, unsetCookie } from '@/util/cookie'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 
 export default function AccountPage () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Account'
@@ -17,12 +18,21 @@ export default function AccountPage () {
     const token = getCookie('accountToken', '-1')
     if (token === '-1') {
       router.push('/account/login')
-    } 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'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 -my-2 text-center`}>
         {loading ? 'Loading...' : 'Account'}

src/app/account/register/page.tsx

@@ -1,17 +1,18 @@
 'use client'
 
 import { Turnstile } from '@marsidev/react-turnstile'
-import { DiscordButton } from '../../components/DiscordButton'
+import { DiscordButton } from '../../../components/DiscordButton'
 import axios from 'axios'
 import { getCookie } from '@/util/cookie'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
-import { BackButton } from '@/app/components/BackButton'
+import { BackButton } from '@/components/BackButton'
 
 export default function AccountRegisterPage () {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
@@ -28,12 +29,21 @@ export default function AccountRegisterPage () {
     const token = getCookie('accountToken', '-1')
     if (token !== '-1') {
       router.push('/account')
-    } 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='/account/login' />
+      <BackButton href='/account/login' refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/account/reset-password/page.tsx

@@ -1,16 +1,17 @@
 'use client'
 
 import { Turnstile } from '@marsidev/react-turnstile'
-import { DiscordButton } from '../../components/DiscordButton'
-import { HomeButton } from '../../components/HomeButton'
+import { DiscordButton } from '../../../components/DiscordButton'
+import { HomeButton } from '../../../components/HomeButton'
 import axios from 'axios'
-import { Suspense, useEffect, useState } from 'react'
+import { Suspense, useEffect, useRef, useState } from 'react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { getCookie } from '@/util/cookie'
 
 function AccountResetPasswordForm ({ codeParam }: { codeParam: string }) {
   const [loading, setLoading] = useState<boolean>(true)
   const router = useRouter()
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   const [token, setToken] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
@@ -24,12 +25,21 @@ function AccountResetPasswordForm ({ codeParam }: { codeParam: string }) {
     const token = getCookie('accountToken', '-1')
     if (token !== '-1') {
       router.push('/account')
-    } 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'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
         {loading

src/app/components/BackButton.tsx

@@ -1,31 +0,0 @@
-import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
-
-export function BackButton ({
-  href,
-  onClick
-}: {
-  href?: string
-  onClick?: () => void
-}) {
-  return (
-    <>
-      <div className='relative'>
-        {href && (
-          <Link href={href} className='top-button absolute -top-4 -left-4'>
-            <FontAwesomeIcon icon={faArrowLeft} />
-          </Link>
-        )}
-        {onClick && (
-          <button
-            onClick={onClick}
-            className='top-button absolute -top-4 -left-4'
-          >
-            <FontAwesomeIcon icon={faArrowLeft} />
-          </button>
-        )}
-      </div>
-    </>
-  )
-}

src/app/download/page.tsx

@@ -1,15 +1,16 @@
 'use client'
 
 import Link from 'next/link'
-import { HomeButton } from '../components/HomeButton'
-import { DiscordButton } from '../components/DiscordButton'
-import { useEffect, useState } from 'react'
+import { HomeButton } from '../../components/HomeButton'
+import { DiscordButton } from '../../components/DiscordButton'
+import { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
 import { UAParser } from 'ua-parser-js'
 
 export default function DownloadPage () {
   const [platform, setPlatform] = useState<string>('')
   const [version, setVersion] = useState<string | number | null>(null)
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
 
   useEffect(() => {
     document.title = 'Lncvrt Games - Download'
@@ -21,6 +22,15 @@ export default function DownloadPage () {
         setVersion(-1)
       }
     })()
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
   }, [])
 
   useEffect(() => {
@@ -50,7 +60,7 @@ export default function DownloadPage () {
 
   return (
     <div className='box'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='text-center text-4xl'>Downloads</p>
       <p className='text-center text-[18px] mb-2'>

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>

src/app/page.tsx

@@ -1,8 +1,8 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { Metadata } from 'next'
-import { DiscordButton } from './components/DiscordButton'
-import { AccountButton } from './components/AccountButton'
+import { DiscordButton } from '../components/DiscordButton'
+import { AccountButton } from '../components/AccountButton'
 
 export const metadata: Metadata = {
   title: 'Lncvrt Games - Home',

src/app/verify-code/page.tsx

@@ -2,19 +2,31 @@
 
 import { Turnstile } from '@marsidev/react-turnstile'
 import axios from 'axios'
-import { useState } from 'react'
-import { DiscordButton } from '../components/DiscordButton'
-import { HomeButton } from '../components/HomeButton'
+import { useEffect, useRef, useState } from 'react'
+import { DiscordButton } from '../../components/DiscordButton'
+import { HomeButton } from '../../components/HomeButton'
 
 export default function CaptchaCodePage () {
   const [code, setCode] = useState<string | null>(null)
   const [result, setResult] = useState<number>(-1)
   const [resultMsg, setResultMsg] = useState<string | null>(null)
   const [showCopied, setShowCopied] = useState<boolean>(false)
+  const backButtonRef = useRef<HTMLAnchorElement>(null)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        backButtonRef.current?.click()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
 
   return (
     <div className='box'>
-      <HomeButton />
+      <HomeButton refLink={backButtonRef} />
       <DiscordButton />
       <p className='mb-4 px-8 -mt-2 text-center'>
         Verify you are human to get a code

src/components/BackButton.tsx

@@ -0,0 +1,39 @@
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
+import { RefObject } from 'react'
+
+export function BackButton ({
+  href,
+  onClick,
+  refLink,
+  refButton
+}: {
+  href?: string
+  onClick?: () => void
+  refLink?: RefObject<HTMLAnchorElement | null>
+  refButton?: RefObject<HTMLButtonElement | null>
+}) {
+  return (
+    <div className='relative'>
+      {href && (
+        <Link
+          href={href}
+          className='top-button absolute -top-4 -left-4'
+          ref={refLink}
+        >
+          <FontAwesomeIcon icon={faArrowLeft} />
+        </Link>
+      )}
+      {onClick && (
+        <button
+          onClick={onClick}
+          className='top-button absolute -top-4 -left-4'
+          ref={refButton}
+        >
+          <FontAwesomeIcon icon={faArrowLeft} />
+        </button>
+      )}
+    </div>
+  )
+}

src/components/HomeButton.tsx

@@ -1,12 +1,21 @@
 import { faHome } from '@fortawesome/free-regular-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
+import { RefObject } from 'react'
 
-export function HomeButton () {
+export function HomeButton ({
+  refLink
+}: {
+  refLink?: RefObject<HTMLAnchorElement | null>
+}) {
   return (
     <>
       <div className='relative'>
-        <Link href='/' className='top-button absolute -top-4 -left-4'>
+        <Link
+          href='/'
+          className='top-button absolute -top-4 -left-4'
+          ref={refLink}
+        >
           <FontAwesomeIcon icon={faHome} />
         </Link>
       </div>