refactor: compact room info display with join code in tooltip
Replace large room info card with minimal inline badge showing just room name and player count. Move join code to a Radix UI tooltip that appears on hover, making it easy to share while keeping the nav bar compact. Display: 🎮 Auto-generated Room (2) Tooltip: Shows "Join Code" with code prominently displayed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -1,3 +1,5 @@
|
||||
import * as Tooltip from '@radix-ui/react-tooltip'
|
||||
|
||||
interface RoomInfoProps {
|
||||
roomName?: string
|
||||
gameName: string
|
||||
@@ -7,7 +9,8 @@ interface RoomInfoProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays current arcade room/session information
|
||||
* Displays current arcade room/session information in a minimal format
|
||||
* Shows join code in a tooltip on hover
|
||||
*/
|
||||
export function RoomInfo({
|
||||
roomName,
|
||||
@@ -16,92 +19,121 @@ export function RoomInfo({
|
||||
joinCode,
|
||||
shouldEmphasize,
|
||||
}: RoomInfoProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: shouldEmphasize ? '8px 16px' : '4px 12px',
|
||||
background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 51, 234, 0.2))',
|
||||
borderRadius: '12px',
|
||||
border: '2px solid rgba(59, 130, 246, 0.4)',
|
||||
fontSize: shouldEmphasize ? '16px' : '14px',
|
||||
fontWeight: '600',
|
||||
color: 'rgba(255, 255, 255, 0.95)',
|
||||
transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
boxShadow: '0 4px 12px rgba(59, 130, 246, 0.2)',
|
||||
}}
|
||||
title="Active Arcade Session"
|
||||
>
|
||||
{/* Room icon */}
|
||||
<div
|
||||
style={{
|
||||
fontSize: shouldEmphasize ? '20px' : '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
🎮
|
||||
</div>
|
||||
const displayName = roomName || gameName
|
||||
|
||||
{/* Room details */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: shouldEmphasize ? '14px' : '12px',
|
||||
opacity: 0.8,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
}}
|
||||
>
|
||||
{roomName ? 'Room' : 'Arcade Session'}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: shouldEmphasize ? '16px' : '14px',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
{roomName || gameName}
|
||||
</div>
|
||||
{joinCode && (
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>
|
||||
<div
|
||||
style={{
|
||||
fontSize: shouldEmphasize ? '12px' : '11px',
|
||||
opacity: 0.7,
|
||||
fontFamily: 'monospace',
|
||||
letterSpacing: '0.5px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '6px 12px',
|
||||
background: 'rgba(59, 130, 246, 0.1)',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(59, 130, 246, 0.3)',
|
||||
fontSize: shouldEmphasize ? '14px' : '13px',
|
||||
fontWeight: '600',
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
transition: 'all 0.2s ease',
|
||||
cursor: joinCode ? 'pointer' : 'default',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
Code: {joinCode}
|
||||
<span style={{ fontSize: shouldEmphasize ? '16px' : '14px' }}>🎮</span>
|
||||
<span>{displayName}</span>
|
||||
<span
|
||||
style={{
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
fontSize: shouldEmphasize ? '13px' : '12px',
|
||||
}}
|
||||
>
|
||||
({playerCount})
|
||||
</span>
|
||||
</div>
|
||||
</Tooltip.Trigger>
|
||||
{joinCode && (
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
side="bottom"
|
||||
sideOffset={8}
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(135deg, rgba(17, 24, 39, 0.97), rgba(31, 41, 55, 0.97))',
|
||||
backdropFilter: 'blur(8px)',
|
||||
borderRadius: '12px',
|
||||
padding: '12px 16px',
|
||||
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1)',
|
||||
zIndex: 9999,
|
||||
animation: 'tooltipFadeIn 0.2s ease-out',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: 'rgba(209, 213, 219, 0.7)',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.5px',
|
||||
marginBottom: '6px',
|
||||
}}
|
||||
>
|
||||
Join Code
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: 'bold',
|
||||
color: 'white',
|
||||
fontFamily: 'monospace',
|
||||
letterSpacing: '2px',
|
||||
textAlign: 'center',
|
||||
padding: '8px 12px',
|
||||
background: 'rgba(59, 130, 246, 0.15)',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(59, 130, 246, 0.3)',
|
||||
}}
|
||||
>
|
||||
{joinCode}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: '11px',
|
||||
color: 'rgba(209, 213, 219, 0.6)',
|
||||
marginTop: '8px',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
Share this code to invite others
|
||||
</div>
|
||||
<Tooltip.Arrow
|
||||
style={{
|
||||
fill: 'rgba(17, 24, 39, 0.97)',
|
||||
}}
|
||||
/>
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip.Root>
|
||||
|
||||
{/* Player count badge */}
|
||||
<div
|
||||
style={{
|
||||
marginLeft: '8px',
|
||||
padding: '4px 8px',
|
||||
background: 'rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: '8px',
|
||||
fontSize: shouldEmphasize ? '14px' : '12px',
|
||||
fontWeight: 'bold',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px',
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@keyframes tooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
>
|
||||
<span>👥</span>
|
||||
<span>{playerCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
/>
|
||||
</Tooltip.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user