{/* Floating decorative bows */} {['🎀', '🌸', '✨', '🎀', '🦋'].map((e, i) => (

{e}

))} {/* Header */}

🎀 {room?.roomName ?? 'My Coquette Boudoir'} 🎀

{isMultiplayer && (memberList || []).length > 1 && (

✨ {(memberList || []).length} dreamers designing together ✨

)}

{/* HERO: Room Canvas */}

{ if (!dragItem) return; const rect = canvasRef.current?.getBoundingClientRect(); if (!rect) return; const newX = ((e.clientX - rect.left - dragOffset.x) / rect.width) * 100; const newY = ((e.clientY - rect.top - dragOffset.y) / rect.height) * 100; const updatedItems = (items || []).map(i => i?.id === dragItem ? { ...i, x: Math.max(5, Math.min(95, newX)), y: Math.max(5, Math.min(95, newY)) } : i); saveData({ ...room, items: updatedItems }); }} onMouseUp={handleTouchEnd} onClick={() => setSelectedItem(null)} style={{ flex: 1, margin: '8px 16px', borderRadius: 24, position: 'relative', overflow: 'hidden', background: `linear-gradient(180deg, ${room?.wallColor ?? '#FFF0F5'} 0%, ${room?.wallColor ?? '#FFF0F5'} 55%, ${room?.floorColor ?? '#FADADD'} 55%, ${room?.floorColor ?? '#FADADD'} 100%)`, boxShadow: '0 8px 32px rgba(199,125,154,0.2), inset 0 1px 0 rgba(255,255,255,0.6)', border: '2px solid rgba(199,125,154,0.2)', animation: 'fadeSlideUp 0.8s ease-out 0.2s both', touchAction: 'none', minHeight: 300 }} > {/* Lace overlay top */}

{/* Floor line accent */}

{/* Window */}

{/* Room items */} {(items || []).map((item, idx) => { if (!item) return null; const isSelected = selectedItem === item.id; const isDragging = dragItem === item.id; const justPlaced = showPlaced === item.id; return (

handleTouchStart(e, item)} onMouseDown={(e) => { e.stopPropagation(); const rect = canvasRef.current?.getBoundingClientRect(); if (!rect) return; setDragItem(item.id); setDragOffset({ x: e.clientX - rect.left - (item.x / 100) * rect.width, y: e.clientY - rect.top - (item.y / 100) * rect.height }); }} onClick={(e) => { e.stopPropagation(); setSelectedItem(isSelected ? null : item.id); const rect = canvasRef.current?.getBoundingClientRect(); if (rect) addSparkle((item.x / 100) * rect.width, (item.y / 100) * rect.height); }} style={{ position: 'absolute', left: `${item.x ?? 50}%`, top: `${item.y ?? 50}%`, transform: `translate(-50%, -50%) scale(${(item.scale ?? 1) * (isDragging ? 1.15 : isSelected ? 1.1 : 1)})`, fontSize: 36, cursor: 'grab', zIndex: isDragging ? 100 : isSelected ? 50 : 10 + idx, transition: isDragging ? 'none' : 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)', animation: justPlaced ? 'placeIn 0.6s ease-out' : `gentleFloat ${3 + (idx % 3)}s ease-in-out infinite`, filter: isSelected ? 'drop-shadow(0 0 12px rgba(199,125,154,0.6))' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))', userSelect: 'none', WebkitUserSelect: 'none' }} > {item.emoji} {isSelected && (

{item.label} { e.stopPropagation(); removeItem(item.id); }} style={{ marginLeft: 8, cursor: 'pointer', fontSize: 13 }} >🗑️

)}

); })} {/* Sparkles */} {(sparkles || []).map(s => (

✨

))} {(items || []).length === 0 && (

🎀 Tap items below to furnish your dream room ✨

)}

{/* Tab Bar */}

{[ { key: 'room', label: '🎀 Decor', icon: '' }, { key: 'walls', label: '🏠 Walls', icon: '' }, { key: 'style', label: '✨ Style', icon: '' } ].map(tab => ( ))}

{/* Bottom Panel */}

{activeTab === 'room' && (

{(catalog || []).map(item => ( ))}

)} {activeTab === 'walls' && (

🎀 Wall Color

{(wallOptions || []).map(c => (

🌸 Floor Color

{(floorOptions || []).map(c => (

)} {activeTab === 'style' && (

✨ Quick Style Presets

{[ { name: 'Ballerina Dreams', wall: '#FFF0F5', floor: '#FADADD', items: [ { id: 'p1_'+Date.now(), emoji: '🩰', label: 'Ballet Slippers', x: 30, y: 60, scale: 1.3, cat: 'accent' }, { id: 'p2_'+Date.now(), emoji: '🪞', label: 'Mirror', x: 70, y: 35, scale: 1.4, cat: 'decor' }, { id: 'p3_'+Date.now(), emoji: '🌸', label: 'Blossoms', x: 50, y: 20, scale: 1.2, cat: 'nature' }, { id: 'p4_'+Date.now(), emoji: '🎀', label: 'Bow', x: 20, y: 25, scale: 1.5, cat: 'accent' }, { id: 'p5_'+Date.now(), emoji: '🕯️', label: 'Candle', x: 80, y: 55, scale: 1.1, cat: 'decor' } ]}, { name: 'Parisian Boudoir', wall: '#FFF8F0', floor: '#F7E7CE', items: [ { id: 'q1_'+Date.now(), emoji: '🛏️', label: 'Bed', x: 50, y: 60, scale: 1.8, cat: 'furniture' }, { id: 'q2_'+Date.now(), emoji: '🫖', label: 'Tea', x: 25, y: 40, scale: 1.1, cat: 'decor' }, { id: 'q3_'+Date.now(), emoji: '🌹', label: 'Rose', x: 75, y: 30, scale: 1.2, cat: 'nature' }, { id: 'q4_'+Date.now(), emoji: '🖼️', label: 'Frame', x: 40, y: 20, scale: 1.1, cat: 'decor' }, { id: 'q5_'+Date.now(), emoji: '💖', label: 'Heart', x: 60, y: 18, scale: 1.3, cat: 'accent' } ]}, { name: 'Rose Garden', wall: '#F5E6F0', floor: '#E8D0C8', items: [ { id: 'r1_'+Date.now(), emoji: '🌹', label: 'Rose', x: 20, y: 35, scale: 1.3, cat: 'nature' }, { id: 'r2_'+Date.now(), emoji: '🌷', label: 'Tulip', x: 45, y: 30, scale: 1.2, cat: 'nature' }, { id: 'r3_'+Date.now(), emoji: '🦋', label: 'Butterfly', x: 70, y: 25, scale: 1.1, cat: 'nature' }, { id: 'r4_'+Date.now(), emoji: '🌸', label: 'Blossom', x: 55, y: 50, scale: 1.4, cat: 'nature' }, { id: 'r5_'+Date.now(), emoji: '✨', label: 'Sparkle', x: 35, y: 18, scale: 1.0, cat: 'accent' } ]} ].map(preset => ( ))}

)}

); }