Use a different method for getting icons

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

@@ -8,7 +8,6 @@ import { getCookie } from '@/util/cookie'
 import { formatHumanTime } from '@/util/time'
 import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import axios from 'axios'
 import { useEffect, useRef, useState } from 'react'
 
 interface WSMessage {
@@ -35,18 +34,12 @@ interface Message {
   editing: boolean
 }
 
-export interface CustomIconEntry {
-  data: string
-  id: string
-}
-
 export default function BerryDashChatroom () {
   const [connected, setConnected] = useState<boolean>(false)
   const [loggedIn, setLoggedIn] = useState<boolean>(false)
   const [editing, setEditing] = useState<boolean>(false)
   const [token, setToken] = useState<string | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
-  const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([])
   const [ws, setWs] = useState<WebSocket | null>(null)
 
   const messagesDiv = useRef<HTMLDivElement>(null)
@@ -119,42 +112,6 @@ export default function BerryDashChatroom () {
     if (messagesDiv.current) {
       messagesDiv.current.scrollTop = messagesDiv.current.scrollHeight
     }
-    const all = customIconCache.map(icon => icon.id)
-    const allFromMessages = Array.from(
-      new Set(
-        messages
-          .filter(icon => icon.customIcon != null)
-          .map(icon => icon.customIcon as string)
-      )
-    )
-    const notInAllIds = allFromMessages
-      .filter(id => !all.includes(id))
-      .map(id => `"${id}"`)
-      .join(',')
-
-    if (notInAllIds.length != 0) {
-      ;(async () => {
-        const result = await axios.get(
-          `/api/berrydash/icon-marketplace/icon?ids=[${notInAllIds}]`
-        )
-        if (result.data.success) {
-          const add: CustomIconEntry[] = []
-          for (const item of result.data.data) {
-            add.push({
-              data: item.data,
-              id: item.id
-            })
-          }
-          setCustomIconCache(prev => [
-            ...prev,
-            ...result.data.data.map((item: CustomIconEntry) => ({
-              data: item.data,
-              id: item.id
-            }))
-          ])
-        }
-      })()
-    }
   }, [messages])
 
   return (
@@ -181,11 +138,9 @@ export default function BerryDashChatroom () {
                               ? GetIconForUser(item.userId)
                               : item.icon
                           }.png`
-                        : customIconCache.find(i => i.id === item.customIcon)
-                        ? 'data:image/png;base64,' +
-                          customIconCache.find(i => i.id === item.customIcon)
-                            ?.data
-                        : 'https://games-r2.lncvrt.xyz/game-assets/berrydash/other/loading.png'
+                        : '/api/berrydash/icon-marketplace/icon?id=' +
+                          item.customIcon +
+                          '&raw=true'
                     }
                     className='pointer-events-none'
                     width={48}

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

@@ -5,7 +5,6 @@ import axios from 'axios'
 import { BackButton } from '@/app/components/BackButton'
 import { ReloadButton } from '@/app/components/ReloadButton'
 import { UploadButton } from '@/app/components/UploadButton'
-import { CustomIconEntry } from '../chatroom/page'
 
 interface MarketplaceIcon {
   username: string
@@ -20,7 +19,6 @@ interface MarketplaceIcon {
 
 export default function BerryDashIconMarketplace () {
   const [response, setResponse] = useState<MarketplaceIcon[] | null | -1>(null)
-  const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([])
 
   async function Refresh () {
     try {
@@ -36,42 +34,6 @@ export default function BerryDashIconMarketplace () {
     Refresh()
   }, [])
 
-  useEffect(() => {
-    if (response == null || response == -1) return
-    const all = customIconCache.map(icon => icon.id)
-    const allFromMessages = Array.from(
-      new Set(response.filter(icon => icon.id != null).map(icon => icon.id))
-    )
-    const notInAllIds = allFromMessages
-      .filter(id => !all.includes(id))
-      .map(id => `"${id}"`)
-      .join(',')
-
-    if (notInAllIds.length != 0) {
-      ;(async () => {
-        const result = await axios.get(
-          `/api/berrydash/icon-marketplace/icon?ids=[${notInAllIds}]`
-        )
-        if (result.data.success) {
-          const add: CustomIconEntry[] = []
-          for (const item of result.data.data) {
-            add.push({
-              data: item.data,
-              id: item.id
-            })
-          }
-          setCustomIconCache(prev => [
-            ...prev,
-            ...result.data.data.map((item: CustomIconEntry) => ({
-              data: item.data,
-              id: item.id
-            }))
-          ])
-        }
-      })()
-    }
-  }, [response])
-
   return (
     <div className='box text-center'>
       <BackButton href='/game/berry-dash' />
@@ -95,10 +57,9 @@ export default function BerryDashIconMarketplace () {
               <div className='bg-(--col8) rounded-md w-fit h-fit p-2 mx-auto'>
                 <img
                   src={
-                    customIconCache.find(i => i.id === icon.id)
-                      ? 'data:image/png;base64,' +
-                        customIconCache.find(i => i.id === icon.id)?.data
-                      : 'https://games-r2.lncvrt.xyz/game-assets/berrydash/other/loading.png'
+                    '/api/berrydash/icon-marketplace/icon?id=' +
+                    icon.id +
+                    '&raw=true'
                   }
                   width={96}
                   height={96}

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

@@ -3,7 +3,7 @@
 import { BackButton } from '@/app/components/BackButton'
 import { DiscordButton } from '@/app/components/DiscordButton'
 import { useEffect, useState } from 'react'
-import { BirdColor, CustomIconEntry } from '../chatroom/page'
+import { BirdColor } from '../chatroom/page'
 import axios from 'axios'
 import { GetIconForUser } from '@/util/bd'
 
@@ -23,7 +23,6 @@ export default function BerryDashLeaderboards () {
   const [selectedBerryOption, setSelectedBerryOption] = useState<number>(0)
   const [gettingEntries, setGettingEntries] = useState<boolean>(false)
   const [entries, setEntries] = useState<LeaderboardEntry[]>([])
-  const [customIconCache, setCustomIconCache] = useState<CustomIconEntry[]>([])
 
   const Refresh = async () => {
     setGettingEntries(true)
@@ -57,45 +56,6 @@ export default function BerryDashLeaderboards () {
     if (selected != -1) Refresh()
   }, [selected])
 
-  useEffect(() => {
-    const all = customIconCache.map(icon => icon.id)
-    const allFromMessages = Array.from(
-      new Set(
-        entries
-          .filter(icon => icon.customIcon != null)
-          .map(icon => icon.customIcon as string)
-      )
-    )
-    const notInAllIds = allFromMessages
-      .filter(id => !all.includes(id))
-      .map(id => `"${id}"`)
-      .join(',')
-
-    if (notInAllIds.length != 0) {
-      ;(async () => {
-        const result = await axios.get(
-          `/api/berrydash/icon-marketplace/icon?ids=[${notInAllIds}]`
-        )
-        if (result.data.success) {
-          const add: CustomIconEntry[] = []
-          for (const item of result.data.data) {
-            add.push({
-              data: item.data,
-              id: item.id
-            })
-          }
-          setCustomIconCache(prev => [
-            ...prev,
-            ...result.data.data.map((item: CustomIconEntry) => ({
-              data: item.data,
-              id: item.id
-            }))
-          ])
-        }
-      })()
-    }
-  }, [entries])
-
   return (
     <div className='box'>
       {selected == -1 ? (
@@ -145,11 +105,9 @@ export default function BerryDashLeaderboards () {
                                 ? GetIconForUser(item.id)
                                 : item.icon
                             }.png`
-                          : customIconCache.find(i => i.id === item.customIcon)
-                          ? 'data:image/png;base64,' +
-                            customIconCache.find(i => i.id === item.customIcon)
-                              ?.data
-                          : 'https://games-r2.lncvrt.xyz/game-assets/berrydash/other/loading.png'
+                          : '/api/berrydash/icon-marketplace/icon?id=' +
+                            item.customIcon +
+                            '&raw=true'
                       }
                       className='pointer-events-none'
                       width={48}