Add overlay & custom bird color rendering to chatroom & leaderboards

This commit is contained in:
2026-02-16 23:49:22 -07:00
parent 432bba91a2
commit 85af4ba18d
2 changed files with 26 additions and 11 deletions

View File

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

View File

@@ -192,18 +192,24 @@ export default function BerryDashLeaderboards () {
<Image <Image
src={ src={
!item.customIcon !item.customIcon
? `https://games-r2.lncvrt.xyz/game-assets/berrydash/icons/bird_${ ? `/api/berrydash/render-icon?icon=${
item.icon === 1 item.icon === 1
? GetIconForUser(item.id) ? GetIconForUser(item.id)
: item.icon : 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` : `/api/berrydash/icon-marketplace/icon?id=${item.customIcon}&raw=true`
} }
className='pointer-events-none' className='pointer-events-none'
width={48} width={48}
height={48} height={48}
alt='' alt=''
unoptimized unoptimized={true}
/> />
<p> <p>
{item.username} (#{index + 1}) {item.username} (#{index + 1})