diff --git a/src/pages/MeetingRoom.tsx b/src/pages/MeetingRoom.tsx index ff85766..9d307ae 100644 --- a/src/pages/MeetingRoom.tsx +++ b/src/pages/MeetingRoom.tsx @@ -115,27 +115,27 @@ const CHAIRS = [ const AVATAR_PRESETS: AvatarPreset[] = [ // Masculinos (1 a 10) - { id: 1, name: 'Leo', desc: 'Negro, cabelo curto preto', url: '/avatars/avatar_1.png', color: '#ef4444' }, - { id: 2, name: 'Marcus', desc: 'Loiro, cabelo curto', url: '/avatars/avatar_2.png', color: '#b45309' }, - { id: 3, name: 'Arthur', desc: 'Ruivo com barba', url: '/avatars/avatar_3.png', color: '#eab308' }, - { id: 4, name: 'Jin', desc: 'Asiático, cabelo preto liso', url: '/avatars/avatar_4.png', color: '#3b82f6' }, - { id: 5, name: 'Mateo', desc: 'Castanho, cabelo cacheado', url: '/avatars/avatar_5.png', color: '#f97316' }, - { id: 6, name: 'Malik', desc: 'Negro, careca com barba', url: '/avatars/avatar_6.png', color: '#84cc16' }, - { id: 7, name: 'Oliver', desc: 'Cabelo grisalho com óculos', url: '/avatars/avatar_7.png', color: '#06b6d4' }, - { id: 8, name: 'Carlos', desc: 'Latino com bigode', url: '/avatars/avatar_8.png', color: '#6366f1' }, - { id: 9, name: 'Yuki', desc: 'Cabelo espetado azul escuro', url: '/avatars/avatar_9.png', color: '#a855f7' }, - { id: 10, name: 'Elijah', desc: 'Negro com dreadlocks', url: '/avatars/avatar_10.png', color: '#ec4899' }, + { id: 1, name: 'Av. 01', desc: 'Avatar de Reunião', url: '/avatars/avatar_1.png', color: '#ef4444' }, + { id: 2, name: 'Av. 02', desc: 'Avatar de Reunião', url: '/avatars/avatar_2.png', color: '#b45309' }, + { id: 3, name: 'Av. 03', desc: 'Avatar de Reunião', url: '/avatars/avatar_3.png', color: '#eab308' }, + { id: 4, name: 'Av. 04', desc: 'Avatar de Reunião', url: '/avatars/avatar_4.png', color: '#3b82f6' }, + { id: 5, name: 'Av. 05', desc: 'Avatar de Reunião', url: '/avatars/avatar_5.png', color: '#f97316' }, + { id: 6, name: 'Av. 06', desc: 'Avatar de Reunião', url: '/avatars/avatar_6.png', color: '#84cc16' }, + { id: 7, name: 'Av. 07', desc: 'Avatar de Reunião', url: '/avatars/avatar_7.png', color: '#06b6d4' }, + { id: 8, name: 'Av. 08', desc: 'Avatar de Reunião', url: '/avatars/avatar_8.png', color: '#6366f1' }, + { id: 9, name: 'Av. 09', desc: 'Avatar de Reunião', url: '/avatars/avatar_9.png', color: '#a855f7' }, + { id: 10, name: 'Av. 10', desc: 'Avatar de Reunião', url: '/avatars/avatar_10.png', color: '#ec4899' }, // Femininos (11 a 20) - { id: 11, name: 'Sophia', desc: 'Morena, cabelo longo castanho', url: '/avatars/avatar_11.png', color: '#10b981' }, - { id: 12, name: 'Aisha', desc: 'Negra com turbante/lenço', url: '/avatars/avatar_12.png', color: '#78350f' }, - { id: 13, name: 'Isabella', desc: 'Loira, cabelo longo ondulado', url: '/avatars/avatar_13.png', color: '#1e293b' }, - { id: 14, name: 'Chloe', desc: 'Ruiva, corte canal/bob', url: '/avatars/avatar_14.png', color: '#ca8a04' }, - { id: 15, name: 'Mei', desc: 'Asiática, cabelo com franja', url: '/avatars/avatar_15.png', color: '#f43f5e' }, - { id: 16, name: 'Elena', desc: 'Castanha, cabelo afro volumoso', url: '/avatars/avatar_16.png', color: '#14b8a6' }, - { id: 17, name: 'Zara', desc: 'Cabelo roxo moderno', url: '/avatars/avatar_17.png', color: '#0ea5e9' }, - { id: 18, name: 'Naomi', desc: 'Negra de óculos e rabo de cavalo', url: '/avatars/avatar_18.png', color: '#4f46e5' }, - { id: 19, name: 'Harper', desc: 'Corte pixie rosa', url: '/avatars/avatar_19.png', color: '#d946ef' }, - { id: 20, name: 'Amara', desc: 'Negra com tranças', url: '/avatars/avatar_20.png', color: '#f59e0b' } + { id: 11, name: 'Av. 11', desc: 'Avatar de Reunião', url: '/avatars/avatar_11.png', color: '#10b981' }, + { id: 12, name: 'Av. 12', desc: 'Avatar de Reunião', url: '/avatars/avatar_12.png', color: '#78350f' }, + { id: 13, name: 'Av. 13', desc: 'Avatar de Reunião', url: '/avatars/avatar_13.png', color: '#1e293b' }, + { id: 14, name: 'Av. 14', desc: 'Avatar de Reunião', url: '/avatars/avatar_14.png', color: '#ca8a04' }, + { id: 15, name: 'Av. 15', desc: 'Avatar de Reunião', url: '/avatars/avatar_15.png', color: '#f43f5e' }, + { id: 16, name: 'Av. 16', desc: 'Avatar de Reunião', url: '/avatars/avatar_16.png', color: '#14b8a6' }, + { id: 17, name: 'Av. 17', desc: 'Avatar de Reunião', url: '/avatars/avatar_17.png', color: '#0ea5e9' }, + { id: 18, name: 'Av. 18', desc: 'Avatar de Reunião', url: '/avatars/avatar_18.png', color: '#4f46e5' }, + { id: 19, name: 'Av. 19', desc: 'Avatar de Reunião', url: '/avatars/avatar_19.png', color: '#d946ef' }, + { id: 20, name: 'Av. 20', desc: 'Avatar de Reunião', url: '/avatars/avatar_20.png', color: '#f59e0b' } ]; const SKIN_COLORS = ['#fed7aa', '#fdba74', '#f59e0b', '#d97706', '#9a3412', '#ffedd5']; @@ -178,6 +178,7 @@ function MiiAvatarBackup({ isTalking, scale = 1, isLastChatSender = false, + inLobby = false, ...props }: { avatarId: number; @@ -185,6 +186,7 @@ function MiiAvatarBackup({ isTalking?: boolean; scale?: number; isLastChatSender?: boolean; + inLobby?: boolean; } & Record) { const groupRef = useRef(null); const ringRef = useRef(null); @@ -258,15 +260,17 @@ function MiiAvatarBackup({ return ( - - - - - - - {username} - - + {!inLobby && ( + + + + + + + {username} + + + )} {(isTalking || isLastChatSender) && ( @@ -277,18 +281,33 @@ function MiiAvatarBackup({ {/* Cabeça do Avatar: Toon Head do Dicebear em HTML Transformado em 3D Plano (olhando para a mesa) */} - -
- {username} { - (e.currentTarget as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(username || 'U')}&background=475569&color=fff&size=128&rounded=true`; - }} - /> -
- + {inLobby ? ( + +
+ {username} { + (e.currentTarget as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(username || 'U')}&background=475569&color=fff&size=128&rounded=true`; + }} + /> +
+ + ) : ( + +
+ {username} { + (e.currentTarget as HTMLImageElement).src = `https://ui-avatars.com/api/?name=${encodeURIComponent(username || 'U')}&background=475569&color=fff&size=128&rounded=true`; + }} + /> +
+ + )}
{/* Base cônica para dar uma sustentação 3D estilizada */} @@ -332,6 +351,7 @@ function MiiAvatar(props: { isTalking?: boolean; scale?: number; isLastChatSender?: boolean; + inLobby?: boolean; } & Record) { const preset = AVATAR_PRESETS.find((p) => p.id === props.avatarId); const isPng = preset?.url.endsWith('.png'); @@ -477,12 +497,12 @@ function RealMiiAvatar({ return ( {/* Balão de Nome acima da cabeça */} - + - + - + {username} @@ -1157,16 +1177,20 @@ export default function MeetingRoom() { // Escuta mensagens do Chat via Broadcast channel.on('broadcast', { event: 'chat_msg' }, (payload) => { + const sender = payload.payload.sender; + // Se a mensagem veio do próprio usuário local, ignora para não duplicar + if (sender === name.substring(0, 10)) return; + setChatMessages((prev) => [ ...prev, { id: Math.random().toString(), - sender: payload.payload.sender, + sender: sender, text: payload.payload.text, time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), }, ]); - setLastChatSender(payload.payload.sender); + setLastChatSender(sender); }); // Escuta atualizações de Apresentação da Maquete via Broadcast (apenas para convidados) @@ -1351,7 +1375,7 @@ export default function MeetingRoom() { - + ) : (
@@ -1654,7 +1678,7 @@ export default function MeetingRoom() { rotation={chairConf.rot} isTalking={isLocalUser ? isTalking : (isTalking && Math.random() > 0.5)} isLastChatSender={peer.username === lastChatSender} - scale={4.8} + scale={3.84} /> ); })}