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

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
backend/

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

224
frontend/src/app/components/breakroom-scene/breakroom-scene.component.html Normal file
View File

@@ -0,0 +1,224 @@
<!-- ============================================================================
Breakroom Scene — 16-bit Office Layout
Per CUB-61: Left=Dev, Right=Business, Center=Divider
============================================================================ -->
<div class="scene">
<!-- Background SVG layer -->
<div class="scene__background">
<img
src="scene/breakroom.svg"
alt="Breakroom background"
class="scene__bg-image"
aria-hidden="true"
/>
</div>
<!-- Center divider line (drawn over the SVG for precise control) -->
<div class="scene__divider" aria-hidden="true">
<div class="scene__divider-glow"></div>
<div class="scene__divider-line"></div>
</div>
<!-- ===== DEV SIDE (Left) ===== -->
<section class="scene__side scene__side--dev" aria-label="Dev minion area">
<!-- Side header -->
<header class="scene__side-header">
<h2 class="scene__side-title scene__side-title--dev">DEVELOPMENT</h2>
<span class="scene__side-subtitle">Dev Minions</span>
</header>
<!-- Desks area (3 desks in grid) -->
<div class="scene__desks">
@for (deskIndex of [0, 1, 2]; track deskIndex) {
<div
class="scene__desk"
[class.scene__desk--occupied]="!!getDeskOccupant('dev', deskIndex)"
[class.scene__desk--empty]="!getDeskOccupant('dev', deskIndex)"
>
<!-- Desk label -->
<span class="scene__desk-label">Desk {{ deskIndex + 1 }}</span>
<!-- Empty desk indicator -->
@if (!getDeskOccupant('dev', deskIndex)) {
<div class="scene__desk-empty">
<span class="scene__desk-empty-icon">💻</span>
<span class="scene__desk-empty-text">Empty</span>
</div>
}
<!-- Minion at desk (working or walking) -->
@if (getDeskOccupant('dev', deskIndex); as occupant) {
<app-minion
[agentName]="occupant.agentName"
[side]="occupant.side"
[deskIndex]="occupant.deskIndex"
[state]="occupant.state"
[progress]="occupant.progress"
[displayName]="occupant.displayName"
[currentTask]="occupant.currentTask ?? ''"
/>
}
</div>
}
</div>
<!-- Dev Breakroom area (idle + returning minions) -->
<div class="scene__breakroom scene__breakroom--dev">
<header class="scene__breakroom-header">
<span class="scene__breakroom-icon">🛋️</span>
<span class="scene__breakroom-label">Dev Breakroom</span>
</header>
<!-- Breakroom furniture indicators -->
<div class="scene__breakroom-furniture">
<div class="scene__furniture-item scene__furniture-item--couch">
<span class="scene__furniture-emoji">🛋️</span>
<span class="scene__furniture-label">Couch</span>
</div>
<div class="scene__furniture-item scene__furniture-item--tv">
<span class="scene__furniture-emoji">📺</span>
<span class="scene__furniture-label">TV</span>
</div>
<div class="scene__furniture-item scene__furniture-item--bananas">
<span class="scene__furniture-emoji">🍌</span>
<span class="scene__furniture-label">Bananas</span>
</div>
</div>
<!-- Idle minions in breakroom -->
<div class="scene__breakroom-minions">
@for (minion of devBreakroomMinions(); track minion.agentName) {
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
/>
}
<!-- Returning minions (walking back to breakroom) -->
@for (minion of devReturningMinions(); track minion.agentName) {
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
/>
}
@if (devBreakroomMinions().length === 0 && devReturningMinions().length === 0) {
<div class="scene__breakroom-empty">
<span>No minions on break 🍌</span>
</div>
}
</div>
</div>
</section>
<!-- ===== BUSINESS SIDE (Right) ===== -->
<section class="scene__side scene__side--business" aria-label="Business minion area">
<!-- Side header -->
<header class="scene__side-header">
<h2 class="scene__side-title scene__side-title--business">BUSINESS</h2>
<span class="scene__side-subtitle">Business Minions</span>
</header>
<!-- Desks area (3 desks in grid) -->
<div class="scene__desks">
@for (deskIndex of [0, 1, 2]; track deskIndex) {
<div
class="scene__desk"
[class.scene__desk--occupied]="!!getDeskOccupant('business', deskIndex)"
[class.scene__desk--empty]="!getDeskOccupant('business', deskIndex)"
>
<!-- Desk label -->
<span class="scene__desk-label">Desk {{ deskIndex + 1 }}</span>
<!-- Empty desk indicator -->
@if (!getDeskOccupant('business', deskIndex)) {
<div class="scene__desk-empty">
<span class="scene__desk-empty-icon">💻</span>
<span class="scene__desk-empty-text">Empty</span>
</div>
}
<!-- Minion at desk (working or walking) -->
@if (getDeskOccupant('business', deskIndex); as occupant) {
<app-minion
[agentName]="occupant.agentName"
[side]="occupant.side"
[deskIndex]="occupant.deskIndex"
[state]="occupant.state"
[progress]="occupant.progress"
[displayName]="occupant.displayName"
[currentTask]="occupant.currentTask ?? ''"
/>
}
</div>
}
</div>
<!-- Business Breakroom area -->
<div class="scene__breakroom scene__breakroom--business">
<header class="scene__breakroom-header">
<span class="scene__breakroom-icon">🛋️</span>
<span class="scene__breakroom-label">Business Breakroom</span>
</header>
<!-- Breakroom furniture indicators -->
<div class="scene__breakroom-furniture">
<div class="scene__furniture-item scene__furniture-item--couch">
<span class="scene__furniture-emoji">🛋️</span>
<span class="scene__furniture-label">Couch</span>
</div>
<div class="scene__furniture-item scene__furniture-item--tv">
<span class="scene__furniture-emoji">📺</span>
<span class="scene__furniture-label">TV</span>
</div>
<div class="scene__furniture-item scene__furniture-item--bananas">
<span class="scene__furniture-emoji">🍌</span>
<span class="scene__furniture-label">Bananas</span>
</div>
</div>
<!-- Idle minions in breakroom -->
<div class="scene__breakroom-minions">
@for (minion of businessBreakroomMinions(); track minion.agentName) {
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
/>
}
<!-- Returning minions -->
@for (minion of businessReturningMinions(); track minion.agentName) {
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
/>
}
@if (businessBreakroomMinions().length === 0 && businessReturningMinions().length === 0) {
<div class="scene__breakroom-empty">
<span>No minions on break 🍌</span>
</div>
}
</div>
</div>
</section>
</div>

536
frontend/src/app/components/breakroom-scene/breakroom-scene.component.scss Normal file
View File

@@ -0,0 +1,536 @@
// ============================================================================
// Breakroom Scene Styles — 16-bit Office Scene Layout
// Per CUB-61: CSS Grid layout, 1920×1080 viewport, touch-optimized
// ============================================================================
// ---------------------------------------------------------------------------
// Layout Constants
// ---------------------------------------------------------------------------
$scene-width: 1920px;
$scene-height: 1080px;
$divider-width: 4px;
$desk-count: 3;
$pixel: 4px;
// ---------------------------------------------------------------------------
// Colors — Tactical Dark + Retro Accents
// ---------------------------------------------------------------------------
$scene-bg: #0D0F12;
$scene-surface: #13161A;
$scene-container: #1C2027;
$scene-container-high: #252B33;
$scene-outline: #2D3748;
$scene-on-surface: #E2E8F0;
$scene-on-surface-variant: #8A9BB0;
$dev-accent: #38BDF8;
$dev-accent-dim: rgba(56, 189, 248, 0.15);
$business-accent: #2DD4BF;
$business-accent-dim: rgba(45, 212, 191, 0.15);
$desk-surface: #1E2430;
$desk-border: #2D3748;
$desk-hover: #252B33;
$breakroom-bg: rgba(45, 212, 191, 0.04);
// ---------------------------------------------------------------------------
// Animations
// ---------------------------------------------------------------------------
@keyframes dividerPulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@keyframes emptyDeskPulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.7; }
}
@keyframes slideInFromBottom {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
// ---------------------------------------------------------------------------
// Scene Root — Full viewport container
// ---------------------------------------------------------------------------
.scene {
position: relative;
width: 100%;
max-width: $scene-width;
height: 100%;
min-height: 600px;
aspect-ratio: 16 / 9;
display: grid;
grid-template-columns: 1fr $divider-width 1fr;
grid-template-rows: 1fr;
overflow: hidden;
background-color: $scene-bg;
border-radius: var(--cc-card-border-radius, 16px);
image-rendering: pixelated;
}
// ---------------------------------------------------------------------------
// Background Image Layer
// ---------------------------------------------------------------------------
.scene__background {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.scene__bg-image {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.35;
}
// ---------------------------------------------------------------------------
// Center Divider — Glowing neon line
// ---------------------------------------------------------------------------
.scene__divider {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: $divider-width;
height: 100%;
z-index: 10;
pointer-events: none;
}
.scene__divider-glow {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 100%;
background: linear-gradient(
180deg,
rgba(56, 189, 248, 0.08) 0%,
rgba(56, 189, 248, 0.25) 20%,
rgba(56, 189, 248, 0.25) 80%,
rgba(56, 189, 248, 0.08) 100%
);
filter: blur(6px);
animation: dividerPulse 4s ease-in-out infinite;
}
.scene__divider-line {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: $divider-width;
height: 100%;
background: linear-gradient(
180deg,
rgba(56, 189, 248, 0.3) 0%,
rgba(56, 189, 248, 0.8) 15%,
rgba(56, 189, 248, 0.8) 85%,
rgba(56, 189, 248, 0.3) 100%
);
box-shadow:
0 0 8px rgba(56, 189, 248, 0.6),
0 0 16px rgba(56, 189, 248, 0.3);
}
// ---------------------------------------------------------------------------
// Side Sections — Left (Dev) & Right (Business)
// ---------------------------------------------------------------------------
.scene__side {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
padding: 24px;
gap: 20px;
overflow-y: auto;
&--dev {
grid-column: 1;
background: linear-gradient(
135deg,
rgba(56, 189, 248, 0.03) 0%,
transparent 60%
);
}
&--business {
grid-column: 3;
background: linear-gradient(
135deg,
rgba(45, 212, 191, 0.03) 0%,
transparent 60%
);
}
}
// ---------------------------------------------------------------------------
// Side Header
// ---------------------------------------------------------------------------
.scene__side-header {
display: flex;
flex-direction: column;
gap: 2px;
padding-bottom: 12px;
border-bottom: 1px solid $scene-outline;
}
.scene__side-title {
font-family: 'Inter', 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
&--dev {
color: $dev-accent;
text-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
&--business {
color: $business-accent;
text-shadow: 0 0 12px rgba(45, 212, 191, 0.4);
}
}
.scene__side-subtitle {
font-size: 12px;
color: $scene-on-surface-variant;
letter-spacing: 0.05em;
text-transform: uppercase;
}
// ---------------------------------------------------------------------------
// Desks Area — 3-column grid
// ---------------------------------------------------------------------------
.scene__desks {
display: grid;
grid-template-columns: repeat($desk-count, 1fr);
gap: 16px;
flex-shrink: 0;
}
// ---------------------------------------------------------------------------
// Individual Desk
// ---------------------------------------------------------------------------
.scene__desk {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 180px;
background-color: $desk-surface;
border: 2px solid $desk-border;
border-radius: 12px;
padding: 12px;
transition: border-color 0.2s ease, background-color 0.2s ease;
&--occupied {
border-color: $dev-accent;
background-color: rgba(56, 189, 248, 0.06);
box-shadow: 0 0 12px rgba(56, 189, 248, 0.1);
}
&--empty {
border-style: dashed;
}
}
// Business side desk accent
.scene__side--business .scene__desk--occupied {
border-color: $business-accent;
background-color: rgba(45, 212, 191, 0.06);
box-shadow: 0 0 12px rgba(45, 212, 191, 0.1);
}
.scene__desk-label {
position: absolute;
top: 6px;
left: 8px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: $scene-on-surface-variant;
opacity: 0.6;
}
// Empty desk placeholder
.scene__desk-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0.4;
animation: emptyDeskPulse 3s ease-in-out infinite;
}
.scene__desk-empty-icon {
font-size: 32px;
}
.scene__desk-empty-text {
font-size: 12px;
color: $scene-on-surface-variant;
text-transform: uppercase;
letter-spacing: 0.05em;
}
// ---------------------------------------------------------------------------
// Breakroom Area (bottom of each side)
// ---------------------------------------------------------------------------
.scene__breakroom {
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
background-color: $breakroom-bg;
border: 1px solid $scene-outline;
border-radius: 12px;
min-height: 200px;
&--dev {
border-top: 2px solid rgba(56, 189, 248, 0.2);
}
&--business {
border-top: 2px solid rgba(45, 212, 191, 0.2);
}
}
.scene__breakroom-header {
display: flex;
align-items: center;
gap: 8px;
}
.scene__breakroom-icon {
font-size: 20px;
}
.scene__breakroom-label {
font-size: 14px;
font-weight: 600;
color: $scene-on-surface;
text-transform: uppercase;
letter-spacing: 0.05em;
}
// ---------------------------------------------------------------------------
// Breakroom Furniture (emoji placeholders)
// ---------------------------------------------------------------------------
.scene__breakroom-furniture {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.scene__furniture-item {
display: flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
.scene__furniture-emoji {
font-size: 16px;
}
.scene__furniture-label {
font-size: 11px;
color: $scene-on-surface-variant;
text-transform: uppercase;
letter-spacing: 0.04em;
}
// ---------------------------------------------------------------------------
// Breakroom Minions Container
// ---------------------------------------------------------------------------
.scene__breakroom-minions {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
justify-content: center;
flex: 1;
min-height: 100px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
border: 1px dashed rgba(255, 255, 255, 0.06);
}
.scene__breakroom-empty {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 24px;
color: $scene-on-surface-variant;
font-size: 14px;
font-style: italic;
opacity: 0.6;
}
// ---------------------------------------------------------------------------
// Minion slide-in animation
// ---------------------------------------------------------------------------
.scene__breakroom-minions app-minion {
animation: slideInFromBottom 0.3s ease-out;
}
.scene__desks app-minion {
animation: slideInFromBottom 0.3s ease-out;
}
// ---------------------------------------------------------------------------
// Touch optimization
// ---------------------------------------------------------------------------
.scene__desk {
min-width: 48px;
min-height: 48px;
// Ensure the desk area is touch-friendly
&:active {
transform: scale(0.98);
}
}
// ---------------------------------------------------------------------------
// Responsive — Scale down on smaller viewports
// ---------------------------------------------------------------------------
@media (max-width: 1200px) {
.scene {
aspect-ratio: auto;
min-height: 800px;
}
.scene__side {
padding: 16px;
gap: 12px;
}
.scene__side-title {
font-size: 20px;
}
.scene__desks {
gap: 12px;
}
.scene__desk {
min-height: 140px;
padding: 8px;
}
}
@media (max-width: 900px) {
.scene {
// Switch to single column on mobile
grid-template-columns: 1fr;
grid-template-rows: auto;
aspect-ratio: auto;
}
.scene__divider {
display: none;
}
.scene__side {
&--dev {
grid-column: 1;
}
&--business {
grid-column: 1;
}
}
.scene__desks {
grid-template-columns: repeat($desk-count, 1fr);
gap: 8px;
}
.scene__desk {
min-height: 120px;
}
}
@media (max-width: 599px) {
.scene {
border-radius: 0;
}
.scene__side {
padding: 12px;
gap: 8px;
}
.scene__side-title {
font-size: 16px;
}
.scene__desk {
min-height: 100px;
padding: 6px;
}
.scene__breakroom {
padding: 12px;
min-height: 140px;
}
}
// ---------------------------------------------------------------------------
// Accessibility: Reduced Motion
// ---------------------------------------------------------------------------
@media (prefers-reduced-motion: reduce) {
.scene__divider-glow {
animation: none;
}
.scene__desk-empty {
animation: none;
}
.scene__breakroom-minions app-minion,
.scene__desks app-minion {
animation: none;
}
}
// ---------------------------------------------------------------------------
// High contrast mode
// ---------------------------------------------------------------------------
@media (prefers-contrast: high) {
.scene__desk {
border-width: 3px;
}
.scene__divider-line {
background: $dev-accent;
box-shadow: 0 0 16px $dev-accent;
}
.scene__desk-label {
opacity: 1;
}
}

115
frontend/src/app/components/breakroom-scene/breakroom-scene.component.ts Normal file
View File

@@ -0,0 +1,115 @@
// ============================================================================
// Breakroom Scene Component — 16-bit Office Scene Layout
// Per CUB-61: Breakroom & Desk Scene Layout
// ============================================================================
import {
ChangeDetectionStrategy,
Component,
computed,
inject,
signal,
} from '@angular/core';
import { CommonModule } from '@angular/common';
import { MinionComponent } from '../minion/minion.component';
import { MinionStateService } from '../../services/minion-state.service';
import { MinionData, MinionSide } from '../../models/minion.model';
/**
* Configuration for a desk slot in the scene.
* Each desk has a fixed position index and assigned side.
*/
interface DeskSlot {
side: MinionSide;
index: number;
/** Grid area identifier for CSS Grid placement */
gridArea: string;
}
/**
* BreakroomSceneComponent renders the full 16-bit office layout:
*
* ┌─────────────────┬─────────────────┐
* │ DEV SIDE │ BUSINESS SIDE │
* │ │ │
* │ [Desk 0] [Desk 2]│[Desk 0] [Desk 2]│
* │ [Desk 1] │[Desk 1] │
* │ │ │
* │ 🛋️ Breakroom │ 🛋️ Breakroom │
* │ 📺 TV 🍌 Bowl │ 📺 TV 🍌 Bowl │
* └─────────────────┴─────────────────┘
*
* Minions are positioned at their assigned desk or in the breakroom
* area based on their current state (idle → breakroom, working → desk).
*/
@Component({
selector: 'app-breakroom-scene',
standalone: true,
imports: [CommonModule, MinionComponent],
templateUrl: './breakroom-scene.component.html',
styleUrl: './breakroom-scene.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BreakroomSceneComponent {
private readonly minionStateService = inject(MinionStateService);
/** All minion data from the state service */
readonly minions = this.minionStateService.minionList;
/** Dev-side minions (idle or in breakroom) */
readonly devBreakroomMinions = computed(() =>
this.minions().filter((m) => m.side === 'dev' && m.state === 'idle'),
);
/** Business-side minions (idle or in breakroom) */
readonly businessBreakroomMinions = computed(() =>
this.minions().filter((m) => m.side === 'business' && m.state === 'idle'),
);
/** Dev-side minions currently at desks (working or walking to desk) */
readonly devDeskMinions = computed(() =>
this.minions().filter(
(m) => m.side === 'dev' && (m.state === 'working' || m.state === 'walking'),
),
);
/** Business-side minions currently at desks (working or walking to desk) */
readonly businessDeskMinions = computed(() =>
this.minions().filter(
(m) =>
m.side === 'business' &&
(m.state === 'working' || m.state === 'walking'),
),
);
/** Dev-side minions returning to breakroom */
readonly devReturningMinions = computed(() =>
this.minions().filter((m) => m.side === 'dev' && m.state === 'returning'),
);
/** Business-side minions returning to breakroom */
readonly businessReturningMinions = computed(() =>
this.minions().filter(
(m) => m.side === 'business' && m.state === 'returning',
),
);
/**
* Check if a desk slot is occupied.
* Returns the minion data if occupied, undefined if empty.
*/
getDeskOccupant(side: MinionSide, deskIndex: number): MinionData | undefined {
return this.minions().find(
(m) =>
m.side === side &&
m.deskIndex === deskIndex &&
(m.state === 'working' || m.state === 'walking'),
);
}
/**
* Track minions by agent name for efficient @for rendering.
*/
trackByAgentName(_index: number, minion: MinionData): string {
return minion.agentName;
}
}

194
frontend/src/app/pages/breakroom/breakroom-page.component.html
View File

@@ -1,136 +1,76 @@
<!-- ============================================================================
Breakroom Page — Demo/Test for Minion State & Animation
Per CUB-60: Validation page with spawn/transition/reset controls
Breakroom Page — Scene layout with demo controls
Per CUB-61: Uses BreakroomSceneComponent for the visual layout
============================================================================ -->
<div class="breakroom">
<!-- Breakroom area (idle minions) -->
<section class="breakroom__zone breakroom__zone--breakroom">
<h2 class="breakroom__zone-title">
<mat-icon>weekend</mat-icon>
Breakroom
</h2>
<div class="breakroom__minions breakroom__minions--idle">
@for (minion of minions(); track minion.agentName) {
@if (minion.state === 'idle') {
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
/>
}
}
</div>
</section>
<!-- Office area (working desks) -->
<section class="breakroom__zone breakroom__zone--office">
<div class="breakroom__office-header">
<h2 class="breakroom__zone-title">
<mat-icon>computer</mat-icon>
Office
<div class="breakroom-page">
<!-- Scene layout (full width) -->
<app-breakroom-scene class="breakroom-page__scene" />
<!-- Control panel for testing (collapsible) -->
<section class="breakroom-page__controls">
<header class="breakroom-page__controls-header" (click)="controlsExpanded.set(!controlsExpanded())">
<h2 class="breakroom-page__controls-title">
<mat-icon>gamepad</mat-icon>
Controls
</h2>
</div>
<mat-icon>{{ controlsExpanded() ? 'expand_less' : 'expand_more' }}</mat-icon>
</header>
<!-- Dev side -->
<div class="breakroom__desk-row">
<h3 class="breakroom__desk-label">Dev Desks</h3>
<div class="breakroom__desks">
@for (minion of minions(); track minion.agentName) {
@if (minion.side === 'dev' && (minion.state === 'working' || minion.state === 'walking')) {
<div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
[currentTask]="minion.currentTask ?? ''"
/>
</div>
}
@if (controlsExpanded()) {
<p class="breakroom-page__controls-hint">
Spawn minions and control their state transitions
</p>
<div class="breakroom-page__button-grid">
@for (demo of demoMinions; track demo.agentName) {
<div class="breakroom-page__control-row">
<span class="breakroom-page__agent-name">{{ demo.displayName }}</span>
<span class="breakroom-page__agent-side" [class]="'breakroom-page__agent-side--' + demo.side">
{{ demo.side }}
</span>
@if (!isSpawned(demo.agentName)) {
<button mat-raised-button color="primary" (click)="spawnMinion(demo)">
<mat-icon>play_arrow</mat-icon>
Spawn
</button>
} @else {
<span class="breakroom-page__state-chip">{{ getStateLabel(demo.agentName) }}</span>
<button mat-stroked-button
[disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
(click)="completeTask(demo.agentName)">
<mat-icon>check_circle</mat-icon>
Complete
</button>
<button mat-stroked-button
[disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
(click)="taskError(demo.agentName)">
<mat-icon>error</mat-icon>
Error
</button>
<button mat-stroked-button
[disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
(click)="bumpProgress(demo.agentName)">
<mat-icon>trending_up</mat-icon>
+15%
</button>
<button mat-stroked-button color="warn" (click)="resetMinion(demo.agentName)">
<mat-icon>replay</mat-icon>
Reset
</button>
<button mat-icon-button color="warn" (click)="removeMinion(demo.agentName)">
<mat-icon>close</mat-icon>
</button>
}
</div>
}
</div>
</div>
<!-- Business side -->
<div class="breakroom__desk-row">
<h3 class="breakroom__desk-label">Business Desks</h3>
<div class="breakroom__desks">
@for (minion of minions(); track minion.agentName) {
@if (minion.side === 'business' && (minion.state === 'working' || minion.state === 'walking')) {
<div class="breakroom__desk" [style.--desk-index]="minion.deskIndex">
<app-minion
[agentName]="minion.agentName"
[side]="minion.side"
[deskIndex]="minion.deskIndex"
[state]="minion.state"
[progress]="minion.progress"
[displayName]="minion.displayName"
/>
</div>
}
}
</div>
</div>
</section>
<!-- Control panel for testing -->
<section class="breakroom__controls">
<h2 class="breakroom__zone-title">
<mat-icon>gamepad</mat-icon>
Controls
</h2>
<p class="breakroom__controls-hint">Spawn minions and control their state transitions</p>
<div class="breakroom__button-grid">
@for (demo of demoMinions; track demo.agentName) {
<div class="breakroom__control-row">
<span class="breakroom__agent-name">{{ demo.displayName }}</span>
@if (!isSpawned(demo.agentName)) {
<button mat-raised-button color="primary" (click)="spawnMinion(demo)">
<mat-icon>play_arrow</mat-icon>
Spawn
</button>
} @else {
<span class="breakroom__state-chip">{{ getStateLabel(demo.agentName) }}</span>
<button mat-stroked-button
[disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
(click)="completeTask(demo.agentName)">
<mat-icon>check_circle</mat-icon>
Complete
</button>
<button mat-stroked-button
[disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
(click)="taskError(demo.agentName)">
<mat-icon>error</mat-icon>
Error
</button>
<button mat-stroked-button
[disabled]="!minionStateService.getMinion(demo.agentName) || minionStateService.getMinion(demo.agentName)!.state !== 'working'"
(click)="bumpProgress(demo.agentName)">
<mat-icon>trending_up</mat-icon>
+15%
</button>
<button mat-stroked-button color="warn" (click)="resetMinion(demo.agentName)">
<mat-icon>replay</mat-icon>
Reset
</button>
<button mat-icon-button color="warn" (click)="removeMinion(demo.agentName)">
<mat-icon>close</mat-icon>
</button>
}
</div>
}
</div>
}
</section>
</div>

184
frontend/src/app/pages/breakroom/breakroom-page.component.scss
View File

@@ -1,30 +1,55 @@
// ============================================================================
// Breakroom Page Styles
// Per CUB-60: Demo/test page for minion state & animation
// Per CUB-61: Updated for scene-based layout with collapsible controls
// ============================================================================
.breakroom {
.breakroom-page {
display: flex;
flex-direction: column;
gap: 24px;
gap: 20px;
padding: var(--cc-section-padding, 24px);
min-height: 100%;
}
// ---------------------------------------------------------------------------
// Zone (breakroom or office area)
// Scene container
// ---------------------------------------------------------------------------
.breakroom__zone {
.breakroom-page__scene {
width: 100%;
border-radius: var(--cc-card-border-radius, 16px);
overflow: hidden;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 4px 16px rgba(0, 0, 0, 0.2);
}
// ---------------------------------------------------------------------------
// Controls section (collapsible)
// ---------------------------------------------------------------------------
.breakroom-page__controls {
background-color: var(--cc-surface-container);
border-radius: var(--cc-card-border-radius, 16px);
padding: var(--cc-card-padding, 20px);
}
.breakroom__zone-title {
.breakroom-page__controls-header {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
padding: 4px 0;
&:hover {
opacity: 0.9;
}
}
.breakroom-page__controls-title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 16px;
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--cc-on-surface);
@@ -36,117 +61,22 @@
}
}
// ---------------------------------------------------------------------------
// Breakroom zone (idle minions)
// ---------------------------------------------------------------------------
.breakroom__zone--breakroom {
background: linear-gradient(
135deg,
var(--cc-surface-container) 0%,
rgba(45, 212, 191, 0.06) 100%
);
min-height: 120px;
}
.breakroom__minions--idle {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
min-height: 80px;
align-items: flex-end;
&:empty::after {
content: 'No minions on break 🍌';
color: var(--cc-on-surface-variant);
font-size: 14px;
text-align: center;
padding: 20px;
display: block;
}
}
// ---------------------------------------------------------------------------
// Office zone (working minions)
// ---------------------------------------------------------------------------
.breakroom__zone--office {
background: linear-gradient(
135deg,
var(--cc-surface-container) 0%,
rgba(56, 189, 248, 0.06) 100%
);
}
.breakroom__desk-row {
margin-bottom: 16px;
}
.breakroom__desk-label {
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cc-on-surface-variant);
margin: 0 0 8px;
}
.breakroom__desks {
display: flex;
flex-wrap: wrap;
gap: 20px;
min-height: 100px;
padding: 12px;
border: 2px dashed var(--cc-outline);
border-radius: 12px;
background-color: rgba(0, 0, 0, 0.1);
align-items: flex-end;
&:empty::after {
content: 'No minions at their desks 💻';
color: var(--cc-on-surface-variant);
font-size: 14px;
text-align: center;
padding: 20px;
display: block;
width: 100%;
}
}
.breakroom__desk {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
min-width: 90px;
min-height: 110px;
background-color: var(--cc-surface-container-high);
border-radius: 8px;
padding: 8px 4px 4px;
border: 1px solid var(--cc-outline);
}
// ---------------------------------------------------------------------------
// Controls section
// ---------------------------------------------------------------------------
.breakroom__controls {
background-color: var(--cc-surface-container);
border-radius: var(--cc-card-border-radius, 16px);
padding: var(--cc-card-padding, 20px);
}
.breakroom__controls-hint {
.breakroom-page__controls-hint {
font-size: 13px;
color: var(--cc-on-surface-variant);
margin: 0 0 16px;
}
.breakroom__button-grid {
// ---------------------------------------------------------------------------
// Button Grid
// ---------------------------------------------------------------------------
.breakroom-page__button-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.breakroom__control-row {
.breakroom-page__control-row {
display: flex;
align-items: center;
gap: 8px;
@@ -157,14 +87,34 @@
min-height: 48px;
}
.breakroom__agent-name {
.breakroom-page__agent-name {
font-weight: 600;
font-size: 14px;
min-width: 60px;
color: var(--cc-on-surface);
}
.breakroom__state-chip {
.breakroom-page__agent-side {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 2px 8px;
border-radius: 10px;
color: #fff;
&--dev {
background-color: rgba(56, 189, 248, 0.25);
color: #38BDF8;
}
&--business {
background-color: rgba(45, 212, 191, 0.25);
color: #2DD4BF;
}
}
.breakroom-page__state-chip {
font-size: 12px;
font-family: var(--cc-font-mono);
padding: 4px 10px;
@@ -175,8 +125,8 @@
}
// Button sizing for touch
.breakroom__control-row .mat-mdc-raised-button,
.breakroom__control-row .mat-mdc-outlined-button {
.breakroom-page__control-row .mat-mdc-raised-button,
.breakroom-page__control-row .mat-mdc-outlined-button {
min-height: 40px;
min-width: 48px;
font-size: 13px;
@@ -193,17 +143,17 @@
// Responsive
// ---------------------------------------------------------------------------
@media (max-width: 599px) {
.breakroom {
padding: 16px;
gap: 16px;
.breakroom-page {
padding: 12px;
gap: 12px;
}
.breakroom__control-row {
.breakroom-page__control-row {
flex-wrap: wrap;
gap: 6px;
}
.breakroom__agent-name {
.breakroom-page__agent-name {
min-width: 50px;
}
}

23
frontend/src/app/pages/breakroom/breakroom-page.component.ts
View File

@@ -1,15 +1,14 @@
// ============================================================================
// Breakroom Page — Demo/Test Page for Minion State & Animation
// Per CUB-60: Validation page with spawn/transition/reset controls
// Breakroom Page — Hosts the BreakroomSceneComponent with demo controls
// Per CUB-61: Updated to use scene layout with integrated controls
// ============================================================================
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatChipsModule } from '@angular/material/chips';
import { MinionComponent } from '../../components/minion/minion.component';
import { BreakroomSceneComponent } from '../../components/breakroom-scene/breakroom-scene.component';
import { MinionStateService } from '../../services/minion-state.service';
import { MinionData } from '../../models/minion.model';
interface DemoMinion {
agentName: string;
@@ -26,7 +25,7 @@ interface DemoMinion {
MatButtonModule,
MatIconModule,
MatChipsModule,
MinionComponent,
BreakroomSceneComponent,
],
templateUrl: './breakroom-page.component.html',
styleUrl: './breakroom-page.component.scss',
@@ -35,15 +34,19 @@ interface DemoMinion {
export class BreakroomPageComponent {
protected readonly minionStateService = inject(MinionStateService);
/** Whether the controls panel is expanded */
readonly controlsExpanded = signal(true);
/** Predefined demo minions */
readonly demoMinions: DemoMinion[] = [
{ agentName: 'otto', displayName: 'Otto', side: 'dev', deskIndex: 0 },
{ agentName: 'rex', displayName: 'Rex', side: 'dev', deskIndex: 1 },
{ agentName: 'dex', displayName: 'Dex', side: 'dev', deskIndex: 2 },
{ agentName: 'hex', displayName: 'Hex', side: 'dev', deskIndex: 3 },
{ agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 0 },
{ agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 1 },
{ agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 2 },
{ agentName: 'hex', displayName: 'Hex', side: 'business', deskIndex: 0 },
{ agentName: 'pip', displayName: 'Pip', side: 'business', deskIndex: 1 },
{ agentName: 'nano', displayName: 'Nano', side: 'business', deskIndex: 2 },
{ agentName: 'sketch', displayName: 'Sketch', side: 'dev', deskIndex: 3 },
{ agentName: 'flip', displayName: 'Flip', side: 'business', deskIndex: 3 },
];
/** All minions currently in the state service */