Add overlay & custom bird color rendering to chatroom & leaderboards

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

@@ -8,6 +8,7 @@ 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 Image from 'next/image'
 import { useEffect, useRef, useState } from 'react'
 
 interface WSMessage {
@@ -50,8 +51,8 @@ export default function BerryDashChatroom () {
 
     const token = getCookie('accountToken', '-1')
     if (token !== '-1') {
-      setLoggedIn(true)
-      setToken(token)
+      setTimeout(() => setLoggedIn(true), 0)
+      setTimeout(() => setToken(token), 0)
     }
 
     const socket = new WebSocket('/api/ws')
@@ -101,7 +102,7 @@ export default function BerryDashChatroom () {
       setMessages([])
     }
 
-    setWs(socket)
+    setTimeout(() => setWs(socket), 0)
 
     return () => {
       socket.close()
@@ -130,14 +131,20 @@ export default function BerryDashChatroom () {
             {messages.map(item => {
               return (
                 <div key={item.id} className='sub-box2 flex flex-row gap-1'>
-                  <img
+                  <Image
                     src={
                       !item.customIcon
-                        ? `https://games-r2.lncvrt.xyz/game-assets/berrydash/icons/bird_${
-                            item.icon == 1
+                        ? `/api/berrydash/render-icon?icon=${
+                            item.icon === 1
                               ? GetIconForUser(item.userId)
                               : item.icon
-                          }.png`
+                          }&overlay=${item.overlay}&birdR=${
+                            item.birdColor[0]
+                          }&birdG=${item.birdColor[1]}&birdB=${
+                            item.birdColor[2]
+                          }&overlayR=${item.overlayColor[0]}&overlayG=${
+                            item.overlayColor[1]
+                          }&overlayB=${item.overlayColor[2]}`
                         : '/api/berrydash/icon-marketplace/icon?id=' +
                           item.customIcon +
                           '&raw=true'
@@ -145,7 +152,9 @@ export default function BerryDashChatroom () {
                     className='pointer-events-none'
                     width={48}
                     height={48}
-                  ></img>
+                    alt=''
+                    unoptimized={true}
+                  />
                   <div>
                     {item.userId == Number(getCookie('accountId', '-1')) && (
                       <div className='relative'>

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

@@ -192,18 +192,24 @@ export default function BerryDashLeaderboards () {
                     <Image
                       src={
                         !item.customIcon
-                          ? `https://games-r2.lncvrt.xyz/game-assets/berrydash/icons/bird_${
+                          ? `/api/berrydash/render-icon?icon=${
                               item.icon === 1
                                 ? GetIconForUser(item.id)
                                 : item.icon
-                            }.png`
+                            }&overlay=${item.overlay}&birdR=${
+                              item.birdColor[0]
+                            }&birdG=${item.birdColor[1]}&birdB=${
+                              item.birdColor[2]
+                            }&overlayR=${item.overlayColor[0]}&overlayG=${
+                              item.overlayColor[1]
+                            }&overlayB=${item.overlayColor[2]}`
                           : `/api/berrydash/icon-marketplace/icon?id=${item.customIcon}&raw=true`
                       }
                       className='pointer-events-none'
                       width={48}
                       height={48}
                       alt=''
-                      unoptimized
+                      unoptimized={true}
                     />
                     <p>
                       {item.username} (#{index + 1})