CubeCraft-Creations/Control-Center
9
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

CUB-61: add BreakroomSceneComponent with 16-bit office layout

Browse Source 
- Created BreakroomSceneComponent with CSS Grid layout
- Left side: dev breakroom + 3 desks
- Right side: business breakroom + 3 desks (mirrored)
- Center divider with neon glow effect
- Static background SVG with desks, couches, TVs, banana bowls
- Integration with MinionComponent from CUB-60
- Minions positioned at desks or breakroom based on state
- Updated BreakroomPageComponent to use scene layout
- Collapsible controls panel for demo/testing
- Touch-optimized with 48px minimum targets
- Responsive breakpoints for tablet and mobile
- Accessibility: reduced motion, high contrast support
This commit is contained in:
cubecraft-agents[bot]
2026-04-26 03:59:39 +00:00
parent a02ab6b75f
commit e177cc7758
8 changed files with 1296 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

273
frontend/public/scene/breakroom.svg Normal file
View File

@@ -0,0 +1,273 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080">
<defs>
<!-- Floor pattern -->
<pattern id="floor-tiles" x="0" y="0" width="64" height="64" patternUnits="userSpaceOnUse">
<rect width="64" height="64" fill="#1A1E24"/>
<rect width="32" height="32" fill="#1C2027" x="0" y="0"/>
<rect width="32" height="32" fill="#1C2027" x="32" y="32"/>
</pattern>
<!-- Desk gradient -->
<linearGradient id="desk-top" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3A4255"/>
<stop offset="100%" stop-color="#2D3748"/>
</linearGradient>
<!-- Screen glow -->
<linearGradient id="screen-glow" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#38BDF8" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#38BDF8" stop-opacity="0.02"/>
</linearGradient>
<!-- Couch gradient -->
<linearGradient id="couch-fabric" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#4A5568"/>
<stop offset="100%" stop-color="#2D3748"/>
</linearGradient>
<!-- TV screen glow -->
<radialGradient id="tv-glow" cx="50%" cy="50%" r="60%">
<stop offset="0%" stop-color="#38BDF8" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#0A1628" stop-opacity="0"/>
</radialGradient>
<!-- Banana bowl gradient -->
<linearGradient id="bowl-gradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#8B7355"/>
<stop offset="100%" stop-color="#6B5740"/>
</linearGradient>
</defs>
<!-- ===== BACKGROUND ===== -->
<rect width="1920" height="1080" fill="url(#floor-tiles)"/>
<!-- Back wall -->
<rect x="0" y="0" width="1920" height="640" fill="#13161A" opacity="0.6"/>
<!-- Wall trim line -->
<rect x="0" y="636" width="1920" height="4" fill="#2D3748"/>
<!-- ===== CENTER DIVIDER ===== -->
<rect x="956" y="0" width="8" height="1080" fill="#2D3748"/>
<rect x="958" y="0" width="4" height="1080" fill="#38BDF8" opacity="0.4"/>
<!-- Divider glow -->
<rect x="948" y="0" width="24" height="1080" fill="url(#screen-glow)" opacity="0.3"/>
<!-- ===== SIDE LABELS ===== -->
<!-- Dev label -->
<text x="480" y="52" fill="#38BDF8" font-family="'Inter','Roboto',sans-serif" font-size="28" font-weight="700" text-anchor="middle" letter-spacing="0.1em">DEVELOPMENT</text>
<text x="480" y="80" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="16" font-weight="400" text-anchor="middle" letter-spacing="0.05em">Dev Minions</text>
<!-- Business label -->
<text x="1440" y="52" fill="#2DD4BF" font-family="'Inter','Roboto',sans-serif" font-size="28" font-weight="700" text-anchor="middle" letter-spacing="0.1em">BUSINESS</text>
<text x="1440" y="80" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="16" font-weight="400" text-anchor="middle" letter-spacing="0.05em">Business Minions</text>
<!-- ===== DEV SIDE DESKS (3 desks) ===== -->
<!-- Desk 1 -->
<g transform="translate(60, 300)">
<!-- Desk shadow -->
<rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
<!-- Desk surface -->
<rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
<!-- Desk edge -->
<rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
<!-- Laptop -->
<g transform="translate(90, 30)">
<!-- Screen -->
<rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
<!-- Screen content lines -->
<rect x="8" y="10" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.6"/>
<rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
<rect x="8" y="22" width="42" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
<!-- Screen glow -->
<rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
<!-- Base -->
<rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
</g>
<!-- Chair -->
<rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
<rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
</g>
<!-- Desk 2 -->
<g transform="translate(60, 520)">
<rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
<rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
<rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
<g transform="translate(90, 30)">
<rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
<rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
<rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
<rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
<rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
<rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
</g>
<rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
<rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
</g>
<!-- Desk 3 -->
<g transform="translate(340, 300)">
<rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
<rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
<rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
<g transform="translate(90, 30)">
<rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
<rect x="8" y="10" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.6"/>
<rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
<rect x="8" y="22" width="42" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
<rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
<rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
</g>
<rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
<rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
</g>
<!-- ===== BUSINESS SIDE DESKS (3 desks, mirrored) ===== -->
<!-- Desk 1 -->
<g transform="translate(620, 300)">
<rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
<rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
<rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
<g transform="translate(90, 30)">
<rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
<rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
<rect x="8" y="16" width="35" height="2" rx="1" fill="#F87171" opacity="0.4"/>
<rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
<rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
<rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
</g>
<rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
<rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
</g>
<!-- Desk 2 -->
<g transform="translate(620, 520)">
<rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
<rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
<rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
<g transform="translate(90, 30)">
<rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
<rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
<rect x="8" y="16" width="35" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
<rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
<rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
<rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
</g>
<rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
<rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
</g>
<!-- Desk 3 -->
<g transform="translate(900, 300)">
<rect x="4" y="4" width="260" height="140" rx="4" fill="#000" opacity="0.3"/>
<rect x="0" y="0" width="260" height="140" rx="4" fill="url(#desk-top)"/>
<rect x="0" y="136" width="260" height="4" rx="0 0 4 4" fill="#2A3040"/>
<g transform="translate(90, 30)">
<rect x="0" y="0" width="80" height="50" rx="3" fill="#0A1628" stroke="#3A4255" stroke-width="2"/>
<rect x="8" y="10" width="50" height="2" rx="1" fill="#2DD4BF" opacity="0.6"/>
<rect x="8" y="16" width="35" height="2" rx="1" fill="#F87171" opacity="0.4"/>
<rect x="8" y="22" width="42" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
<rect x="0" y="0" width="80" height="50" rx="3" fill="url(#screen-glow)" opacity="0.5"/>
<rect x="-4" y="50" width="88" height="4" rx="2" fill="#2D3748"/>
</g>
<rect x="95" y="90" width="70" height="40" rx="8" fill="#252B33" stroke="#2D3748" stroke-width="1.5"/>
<rect x="105" y="85" width="50" height="10" rx="5" fill="#2D3748"/>
</g>
<!-- ===== DEV BREAKROOM (bottom-left) ===== -->
<!-- Couch -->
<g transform="translate(60, 800)">
<!-- Couch back -->
<rect x="0" y="0" width="280" height="80" rx="12" fill="url(#couch-fabric)" stroke="#4A5568" stroke-width="2"/>
<!-- Cushion -->
<rect x="10" y="10" width="260" height="60" rx="8" fill="#374151" stroke="#4A5568" stroke-width="1"/>
<!-- Cushion dividers -->
<rect x="95" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
<rect x="185" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
<!-- Armrests -->
<rect x="0" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
<rect x="260" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
<!-- Couch label -->
<text x="140" y="50" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="12" text-anchor="middle" opacity="0.6">COMFY SOFA</text>
</g>
<!-- TV -->
<g transform="translate(400, 780)">
<!-- TV frame -->
<rect x="0" y="0" width="160" height="100" rx="6" fill="#1A1E24" stroke="#3A4255" stroke-width="2"/>
<!-- TV screen -->
<rect x="8" y="8" width="144" height="76" rx="4" fill="#0A1628"/>
<!-- TV content - code lines -->
<rect x="16" y="20" width="80" height="2" rx="1" fill="#38BDF8" opacity="0.5"/>
<rect x="16" y="28" width="60" height="2" rx="1" fill="#A78BFA" opacity="0.4"/>
<rect x="16" y="36" width="90" height="2" rx="1" fill="#2DD4BF" opacity="0.5"/>
<rect x="16" y="44" width="50" height="2" rx="1" fill="#38BDF8" opacity="0.4"/>
<rect x="16" y="52" width="70" height="2" rx="1" fill="#F87171" opacity="0.3"/>
<!-- TV glow -->
<rect x="8" y="8" width="144" height="76" rx="4" fill="url(#tv-glow)" opacity="0.6"/>
<!-- TV stand -->
<rect x="70" y="100" width="20" height="16" fill="#3A4255"/>
<rect x="55" y="112" width="50" height="4" rx="2" fill="#3A4255"/>
<!-- TV label -->
<text x="80" y="138" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="11" text-anchor="middle" opacity="0.5">MONITOR</text>
</g>
<!-- Banana Bowl (Dev side) -->
<g transform="translate(200, 950)">
<!-- Bowl -->
<ellipse cx="0" cy="0" rx="36" ry="20" fill="url(#bowl-gradient)" stroke="#5A4A3A" stroke-width="2"/>
<ellipse cx="0" cy="-4" rx="30" ry="14" fill="#8B7355" opacity="0.6"/>
<!-- Bananas -->
<path d="M-12,-8 Q-8,-20 -2,-12" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
<path d="M2,-10 Q8,-22 14,-10" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
<path d="M-6,-14 Q-2,-24 4,-14" fill="#FFEC6E" stroke="#DAA520" stroke-width="1"/>
<!-- Label -->
<text x="0" y="32" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="10" text-anchor="middle" opacity="0.5">🍌 BANANA BOWL</text>
</g>
<!-- ===== BUSINESS BREAKROOM (bottom-right, mirrored) ===== -->
<!-- Couch (mirrored position) -->
<g transform="translate(1080, 800)">
<rect x="0" y="0" width="280" height="80" rx="12" fill="url(#couch-fabric)" stroke="#4A5568" stroke-width="2"/>
<rect x="10" y="10" width="260" height="60" rx="8" fill="#374151" stroke="#4A5568" stroke-width="1"/>
<rect x="95" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
<rect x="185" y="10" width="4" height="60" rx="2" fill="#4A5568"/>
<rect x="0" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
<rect x="260" y="0" width="20" height="80" rx="10" fill="#4A5568" stroke="#5A6A7E" stroke-width="1"/>
<text x="140" y="50" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="12" text-anchor="middle" opacity="0.6">COMFY SOFA</text>
</g>
<!-- TV (Business side) -->
<g transform="translate(1420, 780)">
<rect x="0" y="0" width="160" height="100" rx="6" fill="#1A1E24" stroke="#3A4255" stroke-width="2"/>
<rect x="8" y="8" width="144" height="76" rx="4" fill="#0A1628"/>
<!-- Business chart content -->
<rect x="16" y="60" width="12" height="20" fill="#2DD4BF" opacity="0.5" rx="1"/>
<rect x="32" y="45" width="12" height="35" fill="#2DD4BF" opacity="0.6" rx="1"/>
<rect x="48" y="35" width="12" height="45" fill="#2DD4BF" opacity="0.7" rx="1"/>
<rect x="64" y="50" width="12" height="30" fill="#2DD4BF" opacity="0.5" rx="1"/>
<rect x="80" y="40" width="12" height="40" fill="#2DD4BF" opacity="0.6" rx="1"/>
<rect x="96" y="55" width="12" height="25" fill="#2DD4BF" opacity="0.4" rx="1"/>
<rect x="8" y="8" width="144" height="76" rx="4" fill="url(#tv-glow)" opacity="0.6"/>
<rect x="70" y="100" width="20" height="16" fill="#3A4255"/>
<rect x="55" y="112" width="50" height="4" rx="2" fill="#3A4255"/>
<text x="80" y="138" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="11" text-anchor="middle" opacity="0.5">MONITOR</text>
</g>
<!-- Banana Bowl (Business side) -->
<g transform="translate(1220, 950)">
<ellipse cx="0" cy="0" rx="36" ry="20" fill="url(#bowl-gradient)" stroke="#5A4A3A" stroke-width="2"/>
<ellipse cx="0" cy="-4" rx="30" ry="14" fill="#8B7355" opacity="0.6"/>
<path d="M-12,-8 Q-8,-20 -2,-12" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
<path d="M2,-10 Q8,-22 14,-10" fill="#FFE135" stroke="#DAA520" stroke-width="1.5"/>
<path d="M-6,-14 Q-2,-24 4,-14" fill="#FFEC6E" stroke="#DAA520" stroke-width="1"/>
<text x="0" y="32" fill="#8A9BB0" font-family="'Inter','Roboto',sans-serif" font-size="10" text-anchor="middle" opacity="0.5">🍌 BANANA BOWL</text>
</g>
<!-- ===== AMBIENT LIGHTING ===== -->
<!-- Dev side ceiling light -->
<circle cx="480" cy="0" r="300" fill="url(#tv-glow)" opacity="0.15"/>
<!-- Business side ceiling light -->
<circle cx="1440" cy="0" r="300" fill="url(#tv-glow)" opacity="0.15"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB