Move splash text submit page and add a view page

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

@@ -107,9 +107,12 @@ export default function BerryDashGameInfo () {
         <Link href='/game/berry-dash/icon-marketplace' draggable={false}>
           View the Icon Marketplace!
         </Link>
-        <Link href='/game/berry-dash/splash' draggable={false}>
+        <Link href='/game/berry-dash/splash/submit' draggable={false}>
           Submit a new Splash Text!
         </Link>
+        <Link href='/game/berry-dash/splash' draggable={false}>
+          View the Splash Texts!
+        </Link>
       </div>
       <p className='text-2xl my-1'>Downloads</p>
       <div className='downloads'>

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

@@ -2,120 +2,48 @@
 
 import { BackButton } from '@/app/components/BackButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
-import { getCookie } from '@/util/cookie'
-import { Turnstile } from '@marsidev/react-turnstile'
 import axios from 'axios'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
 export default function BerryDashSplash () {
-  const [token, setToken] = useState<string | null>(null)
+  const [response, setResponse] = useState<string | null | -1>(null)
-  const [result, setResult] = useState<number>(-1)
-  const [loading, setLoading] = useState<boolean>(true)
-  const router = useRouter()
 
   useEffect(() => {
-    document.title = 'Lncvrt Games - Berry Dash Splash Text Submition'
+    document.title = 'Lncvrt Games - Berry Dash Splash Texts'
-
+    ;(async () => {
-    const token = getCookie('accountToken', '-1')
+      try {
-    if (token === '-1') {
+        const request = await axios.get('/api/berrydash/splash-text')
-      router.push('/account/login?redirect=/game/berry-dash/splash')
+        setResponse(request.data)
-    } else setLoading(false)
+      } catch {
+        setResponse(-1)
+      }
+    })()
   }, [])
 
   return (
     <div className='box'>
       <BackButton href='/game/berry-dash' />
       <DiscordButton />
-      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+      <p className='px-8 mb-2 -mt-2 text-center text-2xl'>
-        {loading
+        Berry Dash Splash Texts
-          ? 'Loading...'
-          : result == -1
-          ? 'Verify you are human to submit a splash text'
-          : 'Berry Dash Splash Text Submition'}
       </p>
-      {!loading && (
+      <div className='flex justify-center'>
-        <>
+        <Link
-          {result == -1 ? (
+          href='/game/berry-dash/splash/submit'
-            <Turnstile
+          draggable={false}
-              siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
+          className='button'
-              onSuccess={async token => {
-                setToken(token)
-                setResult(0)
-              }}
-              onError={() => setResult(1)}
-              className='flex justify-center'
-            />
-          ) : result == 0 ? (
-            <form
-              className='flex flex-col gap-2'
-              onSubmit={async e => {
-                e.preventDefault()
-
-                const form = e.currentTarget
-                const formData = new FormData(form)
-                const text = formData.get('text') as string
-
-                try {
-                  const result = await axios.post(
-                    '/api/berrydash/splash-text',
-                    {
-                      token,
-                      content: text
-                    },
-                    {
-                      headers: {
-                        authorization: getCookie('accountToken', '-1')
-                      }
-                    }
-                  )
-                  if (result.data.success) {
-                    setResult(2)
-                  } else {
-                    alert(
-                      'Failed to submit splash text, error: ' +
-                        (result.data.message || 'n/a')
-                    )
-                  }
-                } catch (e: any) {
-                  if (e.response) {
-                    alert(
-                      'Failed to submit splash text, error: ' +
-                        (e.response.data?.message ||
-                          JSON.stringify(e.response.data))
-                    )
-                  } else if (e.request) {
-                    alert(
-                      'Failed to submit splash text, no response from server.'
-                    )
-                  } else {
-                    alert('Failed to submit splash text, error: ' + e.message)
-                  }
-                }
-              }}
         >
-              <input
+          Want to submit a splash text?
-                id='text'
+        </Link>
-                name='text'
+      </div>
-                placeholder='Text'
+      <p className='sub-box -mx-4 -mb-4 mt-2 text-center text-sm whitespace-pre-line select-text'>
-                type='text'
+        {response == null
-                className='text-center w-120'
+          ? 'Loading...'
-                required
+          : response == -1
-                autoComplete='off'
+          ? 'Failed to get splash texts'
-              />
+          : response}
-              <button type='submit'>Submit</button>
-            </form>
-          ) : (
-            (result == 1 || result == 2) && (
-              <p className='mt-2 -mb-2 text-center text-sm'>
-                {result == 1
-                  ? 'Unable to verify captcha, please reload page.'
-                  : 'Successfully submitted splash text! It will be reviewed soon. Refresh to add more splash texts, there is no limit after all!'}
       </p>
-            )
-          )}
-        </>
-      )}
     </div>
   )
 }

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

@@ -0,0 +1,121 @@
+'use client'
+
+import { BackButton } from '@/app/components/BackButton'
+import { DiscordButton } from '@/app/components/DiscordButton'
+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'
+
+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()
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Berry Dash Splash Text Submition'
+
+    const token = getCookie('accountToken', '-1')
+    if (token === '-1') {
+      router.push('/account/login?redirect=/game/berry-dash/splash/submit')
+    } else setLoading(false)
+  }, [])
+
+  return (
+    <div className='box'>
+      <BackButton href='/game/berry-dash/splash' />
+      <DiscordButton />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading
+          ? 'Loading...'
+          : result == -1
+          ? 'Verify you are human to submit a splash text'
+          : 'Berry Dash Splash Text Submition'}
+      </p>
+      {!loading && (
+        <>
+          {result == -1 ? (
+            <Turnstile
+              siteKey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY ?? ''}
+              onSuccess={async token => {
+                setToken(token)
+                setResult(0)
+              }}
+              onError={() => setResult(1)}
+              className='flex justify-center'
+            />
+          ) : result == 0 ? (
+            <form
+              className='flex flex-col gap-2'
+              onSubmit={async e => {
+                e.preventDefault()
+
+                const form = e.currentTarget
+                const formData = new FormData(form)
+                const text = formData.get('text') as string
+
+                try {
+                  const result = await axios.post(
+                    '/api/berrydash/splash-text',
+                    {
+                      token,
+                      content: text
+                    },
+                    {
+                      headers: {
+                        authorization: getCookie('accountToken', '-1')
+                      }
+                    }
+                  )
+                  if (result.data.success) {
+                    setResult(2)
+                  } else {
+                    alert(
+                      'Failed to submit splash text, error: ' +
+                        (result.data.message || 'n/a')
+                    )
+                  }
+                } catch (e: any) {
+                  if (e.response) {
+                    alert(
+                      'Failed to submit splash text, error: ' +
+                        (e.response.data?.message ||
+                          JSON.stringify(e.response.data))
+                    )
+                  } else if (e.request) {
+                    alert(
+                      'Failed to submit splash text, no response from server.'
+                    )
+                  } else {
+                    alert('Failed to submit splash text, error: ' + e.message)
+                  }
+                }
+              }}
+            >
+              <input
+                id='text'
+                name='text'
+                placeholder='Text'
+                type='text'
+                className='text-center w-120'
+                required
+                autoComplete='off'
+              />
+              <button type='submit'>Submit</button>
+            </form>
+          ) : (
+            (result == 1 || result == 2) && (
+              <p className='mt-2 -mb-2 text-center text-sm'>
+                {result == 1
+                  ? 'Unable to verify captcha, please reload page.'
+                  : 'Successfully submitted splash text! It will be reviewed soon. Refresh to add more splash texts, there is no limit after all!'}
+              </p>
+            )
+          )}
+        </>
+      )}
+    </div>
+  )
+}