feat: redesign room info as compact inline badge with click-to-copy
Replace large card-style room display with compact single-line badge showing room name, join code, and player count. Add click-to-copy functionality for join code with visual feedback. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
@@ -1,4 +1,4 @@
|
||||
import * as Tooltip from '@radix-ui/react-tooltip'
|
||||
import { useState } from 'react'
|
||||
|
||||
interface RoomInfoProps {
|
||||
roomName?: string
|
||||
@@ -9,8 +9,7 @@ interface RoomInfoProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays current arcade room/session information in a minimal format
|
||||
* Shows join code in a tooltip on hover
|
||||
* Displays current arcade room/session information in a compact inline format
|
||||
*/
|
||||
export function RoomInfo({
|
||||
roomName,
|
||||
@@ -19,121 +18,79 @@ export function RoomInfo({
|
||||
joinCode,
|
||||
shouldEmphasize,
|
||||
}: RoomInfoProps) {
|
||||
const displayName = roomName || gameName
|
||||
const [copied, setCopied] = useState(false)
|
||||
|
||||
const handleCodeClick = () => {
|
||||
if (!joinCode) return
|
||||
navigator.clipboard.writeText(joinCode)
|
||||
setCopied(true)
|
||||
setTimeout(() => setCopied(false), 2000)
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>
|
||||
<div
|
||||
style={{
|
||||
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',
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
</Tooltip.Root>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '4px 10px',
|
||||
background: 'rgba(59, 130, 246, 0.15)',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid rgba(59, 130, 246, 0.3)',
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
color: 'rgba(255, 255, 255, 0.9)',
|
||||
transition: 'all 0.2s ease',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
title="Active Arcade Room"
|
||||
>
|
||||
{/* Room icon and name */}
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
<span style={{ fontSize: '14px' }}>🎮</span>
|
||||
<span style={{ fontWeight: '600' }}>{roomName || gameName}</span>
|
||||
</span>
|
||||
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@keyframes tooltipFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</Tooltip.Provider>
|
||||
{/* Join code with click-to-copy */}
|
||||
{joinCode && (
|
||||
<>
|
||||
<span style={{ opacity: 0.5 }}>•</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCodeClick}
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.15)',
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: '4px',
|
||||
padding: '2px 6px',
|
||||
fontFamily: 'monospace',
|
||||
fontSize: '12px',
|
||||
color: 'rgba(255, 255, 255, 0.95)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.25)'
|
||||
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.4)'
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.15)'
|
||||
e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.2)'
|
||||
}}
|
||||
title={copied ? 'Copied!' : 'Click to copy join code'}
|
||||
>
|
||||
{copied ? '✓ Copied' : joinCode}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Player count */}
|
||||
<span style={{ opacity: 0.5 }}>•</span>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
|
||||
<span style={{ fontSize: '12px' }}>👥</span>
|
||||
<span>{playerCount}</span>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user