Make frontend for uploading icons

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

@@ -4,6 +4,7 @@ import { useEffect, 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'
 
 interface MarketplaceIcon {
   username: string
@@ -36,13 +37,14 @@ export default function BerryDashIconMarketplace () {
   return (
     <div className='box text-center'>
       <BackButton href='/game/berry-dash' />
+      <UploadButton href='/game/berry-dash/icon-marketplace/upload' />
       <ReloadButton
         action={() => {
           setResponse(null)
           Refresh()
         }}
       />
-      <p className='px-8 -mt-2 mb-4 text-2xl'>Berry Dash Icon Marketplace</p>
+      <p className='px-20 -mt-2 mb-4 text-2xl'>Berry Dash Icon Marketplace</p>
       <p>A browser for the in game icon marketplace!</p>
       <div className='sub-box mt-2 -mx-4 -mb-4 flex flex-row flex-wrap justify-center gap-2 max-w-[95vw]'>
         {response == null || response == -1 ? (

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

@@ -0,0 +1,158 @@
+'use client'
+
+import { BackButton } from '@/app/components/BackButton'
+import { ReloadButton } from '@/app/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'
+
+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()
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Berry Dash Icon Submition'
+
+    const token = getCookie('accountToken', '-1')
+    if (token === '-1') {
+      router.push(
+        '/account/login?redirect=/game/berry-dash/icon-marketplace/upload'
+      )
+    } else setLoading(false)
+  }, [])
+
+  return (
+    <div className='box'>
+      <BackButton href='/game/berry-dash/icon-marketplace' />
+      <ReloadButton action={() => window.location.reload()} />
+      <p className={`px-8 ${loading ? '-my-2' : 'mb-4 -mt-2'} text-center`}>
+        {loading
+          ? 'Loading...'
+          : result == -1
+          ? 'Verify you are human to submit a icon'
+          : 'Berry Dash Icon Submission'}
+      </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('name') as string
+                const price = formData.get('price') as string
+                const file = formData.get('bird') as File
+
+                if (!file) {
+                  alert('Please select a bird image!')
+                  return
+                }
+
+                if (file.type !== 'image/png') {
+                  alert('Please select a PNG file!')
+                  return
+                }
+
+                const reader = new FileReader()
+                reader.onload = async () => {
+                  const base64Data = (reader.result as string).split(',')[1]
+
+                  try {
+                    const result = await axios.post(
+                      '/api/berrydash/icon-marketplace/upload',
+                      {
+                        token,
+                        fileContent: base64Data,
+                        name: text,
+                        price: Number(price)
+                      },
+                      {
+                        headers: {
+                          authorization: getCookie('accountToken', '-1')
+                        }
+                      }
+                    )
+
+                    if (result.data.success) {
+                      setResult(2)
+                    } else {
+                      alert(
+                        'Failed to submit icon, error: ' +
+                          (result.data.message || 'n/a')
+                      )
+                    }
+                  } catch (err: any) {
+                    if (err.response) {
+                      alert(
+                        'Failed to submit icon, error: ' +
+                          (err.response.data?.message ||
+                            JSON.stringify(err.response.data))
+                      )
+                    } else if (err.request) {
+                      alert('Failed to submit icon, no response from server.')
+                    } else {
+                      alert('Failed to submit icon, error: ' + err.message)
+                    }
+                  }
+                }
+                reader.readAsDataURL(file)
+              }}
+            >
+              <input
+                id='bird'
+                name='bird'
+                type='file'
+                accept='image/png'
+                required
+                className='cursor-pointer'
+              />
+              <input
+                id='name'
+                name='name'
+                placeholder='Bird Name'
+                type='text'
+                autoComplete='off'
+                required
+              />
+              <input
+                id='price'
+                name='price'
+                placeholder='Bird Price'
+                type='number'
+                autoComplete='off'
+                min={10}
+                required
+              />
+              <button type='submit'>Upload!</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 icon! It will be reviewed soon. Refresh to add more icon, there is no limit after all!'}
+              </p>
+            )
+          )}
+        </>
+      )}
+    </div>
+  )
+}