Add icon marketplace

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

@@ -0,0 +1,66 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { HomeButton } from '@/app/components/HomeButton'
+import { DiscordButton } from '@/app/components/DiscordButton'
+import axios from 'axios'
+
+interface MarketplaceIcon {
+  username: string
+  userId: number
+  data: string
+  hash: string
+  id: string
+  price: number
+  buyable: boolean
+  name: string
+}
+
+export default function BerryDashGameInfo () {
+  const [response, setResponse] = useState<MarketplaceIcon[] | null | -1>(null)
+
+  useEffect(() => {
+    document.title = 'Lncvrt Games - Berry Dash Icon Marketplace'
+    ;(async () => {
+      try {
+        const request = await axios.get('/api/berrydash/icon-marketplace')
+        setResponse(request.data.success ? request.data.data : -1)
+      } catch {
+        setResponse(-1)
+      }
+    })()
+  }, [])
+
+  return (
+    <div className='box text-center'>
+      <HomeButton />
+      <DiscordButton />
+      <p className='px-8 -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 ? (
+          <p className='text-2xl'>
+            {response != -1 ? 'Loading...' : 'Failed to get marketplace icons'}
+          </p>
+        ) : (
+          response.map(icon => (
+            <div className='sub-box2'>
+              <div className='bg-(--col8) rounded-md w-fit h-fit p-2 mx-auto'>
+                <img
+                  src={`data:image/png;base64,${icon.data}`}
+                  width={96}
+                  height={96}
+                  draggable={false}
+                  className='pointer-events-none'
+                />
+              </div>
+              <p>Bird Name: {icon.name}</p>
+              <p>Price: {icon.price}</p>
+              <p>Designer Name: {icon.username}</p>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}

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

@@ -102,7 +102,15 @@ export default function BerryDashGameInfo () {
           />
         </SwiperSlide>
       </Swiper>
-      <p className='text-2xl mt-4 mb-1'>Downloads</p>
+      <p className='text-2xl mt-4 mb-1'>Stuff you can do in the browser</p>
+      <Link
+        href='/game/berry-dash/icon-marketplace'
+        draggable={false}
+        className='button'
+      >
+        View the Icon Marketplace!
+      </Link>
+      <p className='text-2xl my-1'>Downloads</p>
       <div className='downloads'>
         <Link
           href='https://games-r2.lncvrt.xyz/berry-dash/Berry-Dash-1.8.2-android.apk'

src/app/globals.css

@@ -19,8 +19,15 @@ body {
 }
 
 .box {
-  @apply bg-(--col2) border border-(--col4) rounded-lg shadow-[rgba(0,0,0,0.5)];
-  @apply w-auto p-6 m-2;
+  @apply bg-(--col2) border border-(--col4) rounded-lg w-auto p-6 my-10;
+}
+
+.sub-box {
+  @apply bg-(--col3) border border-(--col5) rounded-lg w-auto p-2;
+}
+
+.sub-box2 {
+  @apply bg-(--col4) border border-(--col6) rounded-lg w-auto p-2;
 }
 
 .games-grid {
@@ -29,7 +36,7 @@ body {
 
 .games-grid a {
   @apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-(--col4) border border-(--col6) rounded-lg transition-all duration-200;
-  @apply hover:bg-(--col5) hover:border-(--col7) hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
+  @apply hover:bg-(--col5) hover:border-(--col7) hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow;
 }
 
 .games-grid a img {