Compare commits
2 Commits
agent/hex/
...
agent/rex/
| Author | SHA1 | Date | |
|---|---|---|---|
|
e177cc7758 | ||
|
|
a02ab6b75f |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
backend/
|
||||
273
frontend/public/scene/breakroom.svg
Normal file
273
frontend/public/scene/breakroom.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 15 KiB |
@@ -5,6 +5,7 @@ import { ProjectsPageComponent } from './pages/projects/projects-page.component'
|
||||
import { SessionsPageComponent } from './pages/sessions/sessions-page.component';
|
||||
import { LogsPageComponent } from './pages/logs/logs-page.component';
|
||||
import { SettingsPageComponent } from './pages/settings/settings-page.component';
|
||||
import { BreakroomPageComponent } from './pages/breakroom/breakroom-page.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{
|
||||
@@ -17,6 +18,7 @@ export const routes: Routes = [
|
||||
{ path: 'sessions', component: SessionsPageComponent },
|
||||
{ path: 'logs', component: LogsPageComponent },
|
||||
{ path: 'settings', component: SettingsPageComponent },
|
||||
{ path: 'breakroom', component: BreakroomPageComponent },
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -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>
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
120
frontend/src/app/components/minion/minion.component.html
Normal file
120
frontend/src/app/components/minion/minion.component.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<!-- ============================================================================
|
||||
Minion Component Template — 16-bit Breakroom Minion
|
||||
Per CUB-60: Minion State & Animation System
|
||||
============================================================================ -->
|
||||
|
||||
<div
|
||||
class="minion"
|
||||
[ngClass]="[stateClass(), sideClass()]"
|
||||
[style.--desk-index]="deskPosition()"
|
||||
[attr.aria-label]="displayLabel() + ' — ' + stateLabel()"
|
||||
role="img"
|
||||
>
|
||||
<!-- Progress bar (only shown when working) -->
|
||||
@if (showProgress()) {
|
||||
<div class="minion__progress-bar">
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="currentProgress()"
|
||||
[attr.aria-label]="'Task progress: ' + currentProgress() + '%'"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Name label above the minion -->
|
||||
<div class="minion__label">{{ displayLabel() }}</div>
|
||||
|
||||
<!-- Minion sprite container -->
|
||||
<div
|
||||
class="minion__sprite"
|
||||
(animationend)="onAnimationEnd($event)"
|
||||
>
|
||||
<!-- Idle state: banana-eating / TV-watching minion -->
|
||||
@if (currentState() === 'idle') {
|
||||
<div class="minion__character minion__character--idle">
|
||||
<div class="minion__body">
|
||||
<div class="minion__head">
|
||||
<div class="minion__eye minion__eye--left"></div>
|
||||
<div class="minion__eye minion__eye--right"></div>
|
||||
<div class="minion__mouth minion__mouth--smile"></div>
|
||||
</div>
|
||||
<div class="minion__torso"></div>
|
||||
<div class="minion__arm minion__arm--left minion__arm--eating"></div>
|
||||
<div class="minion__arm minion__arm--right"></div>
|
||||
<div class="minion__leg minion__leg--left"></div>
|
||||
<div class="minion__leg minion__leg--right"></div>
|
||||
</div>
|
||||
<!-- Banana in hand -->
|
||||
<div class="minion__banana minion__banana--idle"></div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Walking state: minion walking to desk -->
|
||||
@if (currentState() === 'walking') {
|
||||
<div class="minion__character minion__character--walking">
|
||||
<div class="minion__body">
|
||||
<div class="minion__head">
|
||||
<div class="minion__eye minion__eye--left"></div>
|
||||
<div class="minion__eye minion__eye--right"></div>
|
||||
<div class="minion__mouth minion__mouth--determined"></div>
|
||||
</div>
|
||||
<div class="minion__torso"></div>
|
||||
<div class="minion__arm minion__arm--left minion__arm--swing"></div>
|
||||
<div class="minion__arm minion__arm--right minion__arm--swing minion__arm--swing-alt"></div>
|
||||
<div class="minion__leg minion__leg--left minion__leg--walk"></div>
|
||||
<div class="minion__leg minion__leg--right minion__leg--walk minion__leg--walk-alt"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Working state: minion at desk typing -->
|
||||
@if (currentState() === 'working') {
|
||||
<div class="minion__character minion__character--working">
|
||||
<div class="minion__body">
|
||||
<div class="minion__head">
|
||||
<div class="minion__eye minion__eye--left minion__eye--focused"></div>
|
||||
<div class="minion__eye minion__eye--right minion__eye--focused"></div>
|
||||
<div class="minion__mouth minion__mouth--focused"></div>
|
||||
</div>
|
||||
<div class="minion__torso"></div>
|
||||
<div class="minion__arm minion__arm--left minion__arm--typing"></div>
|
||||
<div class="minion__arm minion__arm--right minion__arm--typing minion__arm--typing-alt"></div>
|
||||
</div>
|
||||
<!-- Laptop -->
|
||||
<div class="minion__laptop">
|
||||
<div class="minion__laptop-screen">
|
||||
<div class="minion__laptop-code minion__laptop-code--1"></div>
|
||||
<div class="minion__laptop-code minion__laptop-code--2"></div>
|
||||
<div class="minion__laptop-code minion__laptop-code--3"></div>
|
||||
</div>
|
||||
<div class="minion__laptop-base"></div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Returning state: minion walking back to breakroom -->
|
||||
@if (currentState() === 'returning') {
|
||||
<div class="minion__character minion__character--returning">
|
||||
<div class="minion__body">
|
||||
<div class="minion__head">
|
||||
<div class="minion__eye minion__eye--left"></div>
|
||||
<div class="minion__eye minion__eye--right"></div>
|
||||
<div class="minion__mouth minion__mouth--happy"></div>
|
||||
</div>
|
||||
<div class="minion__torso"></div>
|
||||
<div class="minion__arm minion__arm--left minion__arm--swing minion__arm--swing-alt"></div>
|
||||
<div class="minion__arm minion__arm--right minion__arm--swing"></div>
|
||||
<div class="minion__leg minion__leg--left minion__leg--walk minion__leg--walk-alt"></div>
|
||||
<div class="minion__leg minion__leg--right minion__leg--walk"></div>
|
||||
</div>
|
||||
<!-- Banana (excited to be back!) -->
|
||||
<div class="minion__banana minion__banana--carried"></div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Task description (shown when working) -->
|
||||
@if (currentState() === 'working' && currentTaskLabel()) {
|
||||
<div class="minion__task-label">{{ currentTaskLabel() }}</div>
|
||||
}
|
||||
</div>
|
||||
747
frontend/src/app/components/minion/minion.component.scss
Normal file
747
frontend/src/app/components/minion/minion.component.scss
Normal file
@@ -0,0 +1,747 @@
|
||||
// ============================================================================
|
||||
// Minion Component Styles — 16-bit Breakroom Animation System
|
||||
// Per CUB-60: Minion State & Animation System
|
||||
// ============================================================================
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Pixel Art Scale & Dimensions
|
||||
// ---------------------------------------------------------------------------
|
||||
$pixel: 4px; // Base pixel unit for 16-bit aesthetic
|
||||
$minion-width: 48px;
|
||||
$minion-height: 64px;
|
||||
$head-size: 24px;
|
||||
$body-width: 32px;
|
||||
$body-height: 24px;
|
||||
$leg-width: 8px;
|
||||
$leg-height: 16px;
|
||||
$arm-width: 6px;
|
||||
$arm-height: 16px;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Colors — Retro Palette
|
||||
// ---------------------------------------------------------------------------
|
||||
$minion-skin: #FFD93D;
|
||||
$minion-skin-shadow: #E6B800;
|
||||
$minion-overalls: #4169E1;
|
||||
$minion-overalls-shadow: #2E4FA0;
|
||||
$minion-goggle: #C0C0C0;
|
||||
$minion-goggle-strap: #333333;
|
||||
$minion-eye: #FFFFFF;
|
||||
$minion-pupil: #1A1A1A;
|
||||
$minion-mouth: #8B0000;
|
||||
$minion-banana: #FFE135;
|
||||
$minion-banana-shadow: #DAA520;
|
||||
$minion-laptop: #2D2D2D;
|
||||
$minion-laptop-screen: #0A1628;
|
||||
$minion-laptop-code: #38BDF8;
|
||||
|
||||
$walk-duration: 2s;
|
||||
$type-duration: 0.4s;
|
||||
$eat-duration: 1.2s;
|
||||
$return-duration: 2s;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Keyframe Animations
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Walking animation — bounce + translate right
|
||||
@keyframes minionWalkRight {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
12.5% {
|
||||
transform: translateX(12.5%) translateY(-3px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(25%) translateY(0);
|
||||
}
|
||||
37.5% {
|
||||
transform: translateX(37.5%) translateY(-3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(50%) translateY(0);
|
||||
}
|
||||
62.5% {
|
||||
transform: translateX(62.5%) translateY(-3px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(75%) translateY(0);
|
||||
}
|
||||
87.5% {
|
||||
transform: translateX(87.5%) translateY(-3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Returning animation — bounce + translate left
|
||||
@keyframes minionWalkLeft {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
12.5% {
|
||||
transform: translateX(-12.5%) translateY(-3px);
|
||||
}
|
||||
25% {
|
||||
transform: translateX(-25%) translateY(0);
|
||||
}
|
||||
37.5% {
|
||||
transform: translateX(-37.5%) translateY(-3px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
62.5% {
|
||||
transform: translateX(-62.5%) translateY(-3px);
|
||||
}
|
||||
75% {
|
||||
transform: translateX(-75%) translateY(0);
|
||||
}
|
||||
87.5% {
|
||||
transform: translateX(-87.5%) translateY(-3px);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Typing animation — alternate arm bob
|
||||
@keyframes minionType {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
// Arm swing during walking
|
||||
@keyframes armSwing {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate arm swing (opposite phase)
|
||||
@keyframes armSwingAlt {
|
||||
0%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotate(25deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Leg walk cycle
|
||||
@keyframes legWalk {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate leg walk cycle
|
||||
@keyframes legWalkAlt {
|
||||
0%, 100% {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Banana eating — arm to mouth bob
|
||||
@keyframes bananaEat {
|
||||
0%, 100% {
|
||||
transform: rotate(-15deg) translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(-15deg) translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
// Mouth chewing
|
||||
@keyframes mouthChew {
|
||||
0%, 40%, 100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
20% {
|
||||
transform: scaleY(0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// Happy mouth (returning)
|
||||
@keyframes mouthHappy {
|
||||
0%, 100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
50% {
|
||||
transform: scaleY(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Laptop code blink
|
||||
@keyframes codeBlink {
|
||||
0%, 40%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
// Determined face blink
|
||||
@keyframes eyeBlink {
|
||||
0%, 90%, 100% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
95% {
|
||||
transform: scaleY(0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Idle float (subtle bounce)
|
||||
@keyframes idleFloat {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Minion Root Container
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 80px;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Progress Bar (above head)
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__progress-bar {
|
||||
width: 60px;
|
||||
margin-bottom: 4px;
|
||||
|
||||
.mat-mdc-progress-bar {
|
||||
--mdc-linear-progress-active-indicator-color: var(--status-active);
|
||||
--mdc-linear-progress-track-color: var(--cc-surface-container-high);
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Name Label
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 2px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sprite Container
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__sprite {
|
||||
position: relative;
|
||||
width: $minion-width;
|
||||
height: $minion-height;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Character Base
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__character {
|
||||
position: absolute;
|
||||
width: $minion-width;
|
||||
height: $minion-height;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Idle State — Banana eating, gentle bounce
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__character--idle {
|
||||
animation: idleFloat 3s ease-in-out infinite;
|
||||
|
||||
.minion__body {
|
||||
animation: idleFloat 3s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Walking State — Move right to desk
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__character--walking {
|
||||
animation: minionWalkRight $walk-duration ease-in-out forwards;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Working State — At desk, typing
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__character--working {
|
||||
// No movement animation — static at desk
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Returning State — Move left back to breakroom
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__character--returning {
|
||||
animation: minionWalkLeft $return-duration ease-in-out forwards;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Body Parts — 16-bit Pixel Art
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__body {
|
||||
position: relative;
|
||||
width: $minion-width;
|
||||
height: $minion-height;
|
||||
}
|
||||
|
||||
// Head — yellow capsule with goggles
|
||||
.minion__head {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: $head-size;
|
||||
height: $head-size;
|
||||
background-color: $minion-skin;
|
||||
border-radius: 50% 50% 40% 40%;
|
||||
border: 2px solid $minion-skin-shadow;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
|
||||
// Goggle strap
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
height: 10px;
|
||||
background-color: $minion-goggle-strap;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Eyes (inside goggle area)
|
||||
.minion__eye {
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $minion-eye;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #666;
|
||||
z-index: 3;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: $minion-pupil;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&--left {
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
// Focused eyes (squint) for working state
|
||||
&--focused {
|
||||
height: 6px;
|
||||
animation: eyeBlink 4s step-end infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Mouth expressions
|
||||
.minion__mouth {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 8px;
|
||||
height: 4px;
|
||||
border-radius: 0 0 4px 4px;
|
||||
z-index: 3;
|
||||
|
||||
&--smile {
|
||||
background-color: $minion-mouth;
|
||||
border-radius: 0 0 50% 50%;
|
||||
animation: mouthChew $eat-duration ease-in-out infinite;
|
||||
}
|
||||
|
||||
&--determined {
|
||||
background-color: $minion-mouth;
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--focused {
|
||||
background-color: $minion-mouth;
|
||||
width: 6px;
|
||||
height: 3px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&--happy {
|
||||
background-color: $minion-mouth;
|
||||
width: 10px;
|
||||
height: 5px;
|
||||
border-radius: 0 0 50% 50%;
|
||||
animation: mouthHappy 1.5s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
// Torso / Overalls
|
||||
.minion__torso {
|
||||
position: absolute;
|
||||
top: $head-size - 4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: $body-width;
|
||||
height: $body-height;
|
||||
background-color: $minion-overalls;
|
||||
border: 2px solid $minion-overalls-shadow;
|
||||
border-radius: 4px 4px 2px 2px;
|
||||
z-index: 1;
|
||||
|
||||
// Overall strap left
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 6px;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background-color: $minion-overalls;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
// Overall strap right
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 6px;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
background-color: $minion-overalls;
|
||||
border-radius: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Arms
|
||||
.minion__arm {
|
||||
position: absolute;
|
||||
top: $head-size;
|
||||
width: $arm-width;
|
||||
height: $arm-height;
|
||||
background-color: $minion-skin;
|
||||
border: 1px solid $minion-skin-shadow;
|
||||
border-radius: 3px;
|
||||
z-index: 0;
|
||||
transform-origin: top center;
|
||||
|
||||
&--left {
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: 2px;
|
||||
}
|
||||
|
||||
// Arm swing during walking
|
||||
&--swing {
|
||||
animation: armSwing $walk-duration * 0.5 ease-in-out infinite;
|
||||
}
|
||||
|
||||
&--swing-alt {
|
||||
animation: armSwingAlt $walk-duration * 0.5 ease-in-out infinite;
|
||||
}
|
||||
|
||||
// Arm raised for eating banana
|
||||
&--eating {
|
||||
transform: rotate(-15deg);
|
||||
animation: bananaEat $eat-duration ease-in-out infinite;
|
||||
}
|
||||
|
||||
// Arms typing on laptop
|
||||
&--typing {
|
||||
transform: rotate(10deg) translateY(2px);
|
||||
|
||||
&.minion__arm--typing-alt {
|
||||
transform: rotate(-10deg) translateY(2px);
|
||||
animation: minionType $type-duration ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Legs
|
||||
.minion__leg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: $leg-width;
|
||||
height: $leg-height;
|
||||
background-color: $minion-overalls;
|
||||
border: 1px solid $minion-overalls-shadow;
|
||||
border-radius: 2px 2px 3px 3px;
|
||||
z-index: 0;
|
||||
|
||||
&--left {
|
||||
left: calc(50% - #{$leg-width} - 2px);
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: calc(50% - #{$leg-width} - 2px);
|
||||
}
|
||||
|
||||
// Walking cycle
|
||||
&--walk {
|
||||
animation: legWalk $walk-duration * 0.25 ease-in-out infinite;
|
||||
|
||||
&.minion__leg--walk-alt {
|
||||
animation: legWalkAlt $walk-duration * 0.25 ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Banana
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__banana {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
z-index: 4;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 5px;
|
||||
background-color: $minion-banana;
|
||||
border: 1px solid $minion-banana-shadow;
|
||||
border-radius: 50% 50% 20% 20%;
|
||||
}
|
||||
|
||||
// Banana in hand during idle
|
||||
&--idle {
|
||||
top: $head-size - 2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Banana carried while returning
|
||||
&--carried {
|
||||
top: 8px;
|
||||
left: -2px;
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Laptop (working state)
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__laptop {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.minion__laptop-screen {
|
||||
width: 36px;
|
||||
height: 20px;
|
||||
background-color: $minion-laptop-screen;
|
||||
border: 2px solid $minion-laptop;
|
||||
border-radius: 3px 3px 0 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.minion__laptop-code {
|
||||
height: 2px;
|
||||
background-color: $minion-laptop-code;
|
||||
border-radius: 1px;
|
||||
opacity: 0.8;
|
||||
|
||||
&--1 {
|
||||
width: 80%;
|
||||
animation: codeBlink 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&--2 {
|
||||
width: 60%;
|
||||
animation: codeBlink 2s ease-in-out infinite 0.3s;
|
||||
}
|
||||
|
||||
&--3 {
|
||||
width: 70%;
|
||||
animation: codeBlink 2s ease-in-out infinite 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
.minion__laptop-base {
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background-color: $minion-laptop;
|
||||
border-radius: 0 0 2px 2px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Task Label (below minion)
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion__task-label {
|
||||
font-size: 9px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
text-align: center;
|
||||
max-width: 80px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 2px;
|
||||
font-family: var(--cc-font-mono);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Side-specific adjustments
|
||||
// ---------------------------------------------------------------------------
|
||||
// Dev minions face right (walk right to desk)
|
||||
.minion--dev .minion__character--walking {
|
||||
animation-name: minionWalkRight;
|
||||
}
|
||||
|
||||
// Business minions face left (walk left to desk)
|
||||
.minion--business .minion__character--walking {
|
||||
animation-name: minionWalkRight;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
// Returning always walks back toward breakroom
|
||||
.minion--dev .minion__character--returning {
|
||||
animation-name: minionWalkLeft;
|
||||
}
|
||||
|
||||
.minion--business .minion__character--returning {
|
||||
animation-name: minionWalkLeft;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Walking sprite shows walking animation
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion--walking .minion__sprite {
|
||||
animation: minionWalkRight $walk-duration ease-in-out forwards;
|
||||
}
|
||||
|
||||
.minion--returning .minion__sprite {
|
||||
animation: minionWalkLeft $return-duration ease-in-out forwards;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Accessibility: Reduced Motion
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.minion__character--idle,
|
||||
.minion__character--walking,
|
||||
.minion__character--returning,
|
||||
.minion--walking .minion__sprite,
|
||||
.minion--returning .minion__sprite {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.minion__arm--swing,
|
||||
.minion__arm--swing-alt,
|
||||
.minion__arm--eating,
|
||||
.minion__arm--typing.minion__arm--typing-alt,
|
||||
.minion__leg--walk,
|
||||
.minion__leg--walk-alt,
|
||||
.minion__mouth--smile,
|
||||
.minion__mouth--happy,
|
||||
.minion__eye--focused,
|
||||
.minion__laptop-code--1,
|
||||
.minion__laptop-code--2,
|
||||
.minion__laptop-code--3 {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Touch-friendly sizing
|
||||
// ---------------------------------------------------------------------------
|
||||
.minion {
|
||||
min-width: 80px;
|
||||
min-height: 100px;
|
||||
|
||||
// Ensure touch targets are at least 48px
|
||||
.minion__sprite {
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Responsive: Smaller on mobile
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 599px) {
|
||||
$mobile-scale: 0.85;
|
||||
|
||||
.minion {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.minion__sprite {
|
||||
transform: scale($mobile-scale);
|
||||
transform-origin: top center;
|
||||
}
|
||||
|
||||
.minion__label {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
182
frontend/src/app/components/minion/minion.component.ts
Normal file
182
frontend/src/app/components/minion/minion.component.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
// ============================================================================
|
||||
// Minion Component — 16-bit Breakroom Minion with State Animations
|
||||
// Per CUB-60: Minion State & Animation System
|
||||
// ============================================================================
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
Component,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
input,
|
||||
output,
|
||||
signal,
|
||||
computed,
|
||||
effect,
|
||||
inject,
|
||||
} from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MinionState, MinionSide } from '../../models/minion.model';
|
||||
import { MinionStateService } from '../../services/minion-state.service';
|
||||
|
||||
/**
|
||||
* MinionComponent renders a single 16-bit minion character with four visual states:
|
||||
* - idle: In breakroom — eating bananas, watching TV
|
||||
* - walking: Moving from breakroom to desk (2s animation, then auto → working)
|
||||
* - working: At desk — typing on laptop, progress bar overhead
|
||||
* - returning: Walking back to breakroom (2s animation, then auto → idle)
|
||||
*
|
||||
* The component reads its state from MinionStateService and emits events
|
||||
* when animations complete so the service can advance the state machine.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-minion',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatIconModule,
|
||||
MatProgressBarModule,
|
||||
MatTooltipModule,
|
||||
],
|
||||
templateUrl: './minion.component.html',
|
||||
styleUrl: './minion.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class MinionComponent implements OnInit, OnDestroy {
|
||||
/** Agent name — used to look up state from MinionStateService */
|
||||
readonly agentName = input.required<string>();
|
||||
|
||||
/** Which side of the office: dev or business */
|
||||
readonly side = input<MinionSide>('dev');
|
||||
|
||||
/** Desk index on the assigned side (0-based) */
|
||||
readonly deskIndex = input<number>(0);
|
||||
|
||||
/** Override state (for standalone demo use, otherwise read from service) */
|
||||
readonly state = input<MinionState>('idle');
|
||||
|
||||
/** Override progress (for standalone demo use) */
|
||||
readonly progress = input<number>(0);
|
||||
|
||||
/** Override display name (for standalone demo use) */
|
||||
readonly displayName = input<string>('');
|
||||
|
||||
/** Override task description (for standalone demo use) */
|
||||
readonly currentTask = input<string>('');
|
||||
|
||||
/** Emits when the walking animation completes */
|
||||
readonly walkingComplete = output<string>();
|
||||
|
||||
/** Emits when the returning animation completes */
|
||||
readonly returningComplete = output<string>();
|
||||
|
||||
private readonly minionStateService = inject(MinionStateService);
|
||||
|
||||
/** Track whether to use service data or input data */
|
||||
private readonly useServiceData = signal(false);
|
||||
|
||||
/** Animation state — tracks which animation is active */
|
||||
readonly animationState = signal<MinionState | 'none'>('none');
|
||||
|
||||
/** Computed: current state (from service if available, otherwise input) */
|
||||
readonly currentState = computed<MinionState>(() => {
|
||||
if (this.useServiceData()) {
|
||||
const minion = this.minionStateService.getMinion(this.agentName());
|
||||
return minion?.state ?? this.state();
|
||||
}
|
||||
return this.state();
|
||||
});
|
||||
|
||||
/** Computed: current progress */
|
||||
readonly currentProgress = computed(() => {
|
||||
if (this.useServiceData()) {
|
||||
const minion = this.minionStateService.getMinion(this.agentName());
|
||||
return minion?.progress ?? this.progress();
|
||||
}
|
||||
return this.progress();
|
||||
});
|
||||
|
||||
/** Computed: display name */
|
||||
readonly displayLabel = computed(() => {
|
||||
if (this.useServiceData()) {
|
||||
const minion = this.minionStateService.getMinion(this.agentName());
|
||||
return minion?.displayName ?? this.displayName() ?? this.agentName();
|
||||
}
|
||||
return this.displayName() || this.agentName();
|
||||
});
|
||||
|
||||
/** Computed: current task */
|
||||
readonly currentTaskLabel = computed(() => {
|
||||
if (this.useServiceData()) {
|
||||
const minion = this.minionStateService.getMinion(this.agentName());
|
||||
return minion?.currentTask ?? this.currentTask() ?? '';
|
||||
}
|
||||
return this.currentTask();
|
||||
});
|
||||
|
||||
/** Computed: CSS class based on current state */
|
||||
readonly stateClass = computed(() => `minion--${this.currentState()}`);
|
||||
|
||||
/** Computed: whether to show the progress bar */
|
||||
readonly showProgress = computed(() => this.currentState() === 'working' && this.currentProgress() > 0);
|
||||
|
||||
/** Computed: side class */
|
||||
readonly sideClass = computed(() => `minion--${this.side()}`);
|
||||
|
||||
/** Computed: position style for desk assignment */
|
||||
readonly deskPosition = computed(() => this.deskIndex());
|
||||
|
||||
/** Computed: human-readable state label */
|
||||
readonly stateLabel = computed(() => {
|
||||
const labels: Record<MinionState, string> = {
|
||||
idle: 'On Break',
|
||||
walking: 'Heading to Desk',
|
||||
working: 'Working',
|
||||
returning: 'Returning to Breakroom',
|
||||
};
|
||||
return labels[this.currentState()];
|
||||
});
|
||||
|
||||
ngOnInit(): void {
|
||||
// If the service has data for this agent, use it
|
||||
const minion = this.minionStateService.getMinion(this.agentName());
|
||||
if (minion) {
|
||||
this.useServiceData.set(true);
|
||||
}
|
||||
|
||||
// Sync animation state with current state
|
||||
this.animationState.set(this.currentState());
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle animation end events from CSS animations.
|
||||
* Only fires for walking/returning which have finite durations.
|
||||
*/
|
||||
onAnimationEnd(event: AnimationEvent): void {
|
||||
const state = this.currentState();
|
||||
|
||||
if (state === 'walking' && event.animationName === 'minionWalkRight') {
|
||||
this.walkingComplete.emit(this.agentName());
|
||||
// Auto-transition walking → working via service
|
||||
if (this.useServiceData()) {
|
||||
this.minionStateService.onWalkingComplete(this.agentName());
|
||||
}
|
||||
this.animationState.set('working');
|
||||
}
|
||||
|
||||
if (state === 'returning' && event.animationName === 'minionWalkLeft') {
|
||||
this.returningComplete.emit(this.agentName());
|
||||
// Auto-transition returning → idle via service
|
||||
if (this.useServiceData()) {
|
||||
this.minionStateService.onReturningComplete(this.agentName());
|
||||
}
|
||||
this.animationState.set('idle');
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
// Cleanup handled by service if needed
|
||||
}
|
||||
}
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from './agent.model';
|
||||
export * from './minion.model';
|
||||
export * from './nav.model';
|
||||
81
frontend/src/app/models/minion.model.ts
Normal file
81
frontend/src/app/models/minion.model.ts
Normal file
@@ -0,0 +1,81 @@
|
||||
// ============================================================================
|
||||
// Minion State & Animation Types
|
||||
// Per CUB-60: Minion State & Animation System
|
||||
// ============================================================================
|
||||
|
||||
/**
|
||||
* The four minion states in the breakroom UI state machine.
|
||||
*
|
||||
* State transitions:
|
||||
* idle → walking → working → returning → idle
|
||||
*
|
||||
* idle: In breakroom — eating bananas, watching TV
|
||||
* walking: Moving from breakroom to desk
|
||||
* working: At desk — typing on laptop, progress bar overhead
|
||||
* returning: Walking back to breakroom after task completion
|
||||
*/
|
||||
export type MinionState = 'idle' | 'walking' | 'working' | 'returning';
|
||||
|
||||
/**
|
||||
* Which side of the office the minion belongs to.
|
||||
* Dev minions walk to dev desks, Business minions to business desks.
|
||||
*/
|
||||
export type MinionSide = 'dev' | 'business';
|
||||
|
||||
/**
|
||||
* Event types that trigger state transitions in the MinionStateService.
|
||||
*/
|
||||
export type MinionEvent = 'spawn' | 'task_complete' | 'task_error' | 'reset';
|
||||
|
||||
/**
|
||||
* Represents the full state of a single minion in the breakroom.
|
||||
*/
|
||||
export interface MinionData {
|
||||
/** Unique agent name, e.g., "otto", "rex" */
|
||||
agentName: string;
|
||||
|
||||
/** Current minion state */
|
||||
state: MinionState;
|
||||
|
||||
/** Task progress percentage (0–100), only meaningful when state === 'working' */
|
||||
progress: number;
|
||||
|
||||
/** Which side of the office: dev or business */
|
||||
side: MinionSide;
|
||||
|
||||
/** Desk index on the assigned side (0-based) */
|
||||
deskIndex: number;
|
||||
|
||||
/** Display name for the minion, e.g., "Otto" */
|
||||
displayName: string;
|
||||
|
||||
/** Current task description */
|
||||
currentTask?: string;
|
||||
|
||||
/** Timestamp of last state transition */
|
||||
lastTransition: Date;
|
||||
}
|
||||
|
||||
/**
|
||||
* State machine transition map.
|
||||
* Defines valid transitions: current state → event → next state.
|
||||
*/
|
||||
export const MINION_TRANSITIONS: Record<MinionState, Partial<Record<MinionEvent, MinionState>>> = {
|
||||
idle: {
|
||||
spawn: 'walking',
|
||||
},
|
||||
walking: {
|
||||
// walking → working happens automatically via animation end
|
||||
task_error: 'idle',
|
||||
reset: 'idle',
|
||||
},
|
||||
working: {
|
||||
task_complete: 'returning',
|
||||
task_error: 'returning',
|
||||
reset: 'idle',
|
||||
},
|
||||
returning: {
|
||||
// returning → idle happens automatically via animation end
|
||||
reset: 'idle',
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- ============================================================================
|
||||
Breakroom Page — Scene layout with demo controls
|
||||
Per CUB-61: Uses BreakroomSceneComponent for the visual layout
|
||||
============================================================================ -->
|
||||
|
||||
<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>
|
||||
<mat-icon>{{ controlsExpanded() ? 'expand_less' : 'expand_more' }}</mat-icon>
|
||||
</header>
|
||||
|
||||
@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>
|
||||
}
|
||||
</section>
|
||||
</div>
|
||||
159
frontend/src/app/pages/breakroom/breakroom-page.component.scss
Normal file
159
frontend/src/app/pages/breakroom/breakroom-page.component.scss
Normal file
@@ -0,0 +1,159 @@
|
||||
// ============================================================================
|
||||
// Breakroom Page Styles
|
||||
// Per CUB-61: Updated for scene-based layout with collapsible controls
|
||||
// ============================================================================
|
||||
|
||||
.breakroom-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: var(--cc-section-padding, 24px);
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Scene container
|
||||
// ---------------------------------------------------------------------------
|
||||
.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-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;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--cc-on-surface);
|
||||
|
||||
.mat-icon {
|
||||
font-size: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.breakroom-page__controls-hint {
|
||||
font-size: 13px;
|
||||
color: var(--cc-on-surface-variant);
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Button Grid
|
||||
// ---------------------------------------------------------------------------
|
||||
.breakroom-page__button-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.breakroom-page__control-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 8px 12px;
|
||||
background-color: var(--cc-surface);
|
||||
border-radius: 8px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.breakroom-page__agent-name {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
min-width: 60px;
|
||||
color: var(--cc-on-surface);
|
||||
}
|
||||
|
||||
.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;
|
||||
border-radius: 12px;
|
||||
background-color: var(--cc-surface-container-high);
|
||||
color: var(--cc-on-surface-variant);
|
||||
border: 1px solid var(--cc-outline);
|
||||
}
|
||||
|
||||
// Button sizing for touch
|
||||
.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;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Responsive
|
||||
// ---------------------------------------------------------------------------
|
||||
@media (max-width: 599px) {
|
||||
.breakroom-page {
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.breakroom-page__control-row {
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.breakroom-page__agent-name {
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
105
frontend/src/app/pages/breakroom/breakroom-page.component.ts
Normal file
105
frontend/src/app/pages/breakroom/breakroom-page.component.ts
Normal file
@@ -0,0 +1,105 @@
|
||||
// ============================================================================
|
||||
// Breakroom Page — Hosts the BreakroomSceneComponent with demo controls
|
||||
// Per CUB-61: Updated to use scene layout with integrated controls
|
||||
// ============================================================================
|
||||
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 { BreakroomSceneComponent } from '../../components/breakroom-scene/breakroom-scene.component';
|
||||
import { MinionStateService } from '../../services/minion-state.service';
|
||||
|
||||
interface DemoMinion {
|
||||
agentName: string;
|
||||
displayName: string;
|
||||
side: 'dev' | 'business';
|
||||
deskIndex: number;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-breakroom-page',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
MatButtonModule,
|
||||
MatIconModule,
|
||||
MatChipsModule,
|
||||
BreakroomSceneComponent,
|
||||
],
|
||||
templateUrl: './breakroom-page.component.html',
|
||||
styleUrl: './breakroom-page.component.scss',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
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: '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 */
|
||||
readonly minions = this.minionStateService.minionList;
|
||||
|
||||
/** Spawn a demo minion (idle → walking → working) */
|
||||
spawnMinion(demo: DemoMinion): void {
|
||||
this.minionStateService.spawn(demo.agentName, demo.displayName, demo.side, demo.deskIndex);
|
||||
}
|
||||
|
||||
/** Complete a minion's task (working → returning → idle) */
|
||||
completeTask(agentName: string): void {
|
||||
this.minionStateService.completeTask(agentName);
|
||||
}
|
||||
|
||||
/** Simulate a task error (working → returning → idle) */
|
||||
taskError(agentName: string): void {
|
||||
this.minionStateService.taskError(agentName);
|
||||
}
|
||||
|
||||
/** Reset a minion to idle */
|
||||
resetMinion(agentName: string): void {
|
||||
this.minionStateService.resetMinion(agentName);
|
||||
}
|
||||
|
||||
/** Remove a minion entirely */
|
||||
removeMinion(agentName: string): void {
|
||||
this.minionStateService.removeMinion(agentName);
|
||||
}
|
||||
|
||||
/** Update progress (simulate for testing) */
|
||||
bumpProgress(agentName: string): void {
|
||||
const minion = this.minionStateService.getMinion(agentName);
|
||||
if (minion) {
|
||||
this.minionStateService.updateProgress(agentName, Math.min(100, minion.progress + 15));
|
||||
}
|
||||
}
|
||||
|
||||
/** Get state label for a minion */
|
||||
getStateLabel(agentName: string): string {
|
||||
const minion = this.minionStateService.getMinion(agentName);
|
||||
if (!minion) return '—';
|
||||
const labels: Record<string, string> = {
|
||||
idle: '🍌 Idle',
|
||||
walking: '🚶 Walking',
|
||||
working: '💻 Working',
|
||||
returning: '🔙 Returning',
|
||||
};
|
||||
return labels[minion.state] ?? minion.state;
|
||||
}
|
||||
|
||||
/** Check if a minion is spawned */
|
||||
isSpawned(agentName: string): boolean {
|
||||
return !!this.minionStateService.getMinion(agentName);
|
||||
}
|
||||
}
|
||||
213
frontend/src/app/services/minion-state.service.ts
Normal file
213
frontend/src/app/services/minion-state.service.ts
Normal file
@@ -0,0 +1,213 @@
|
||||
// ============================================================================
|
||||
// Minion State Service
|
||||
// Per CUB-60: State machine managing minion transitions
|
||||
// idle → walking → working → returning → idle
|
||||
// ============================================================================
|
||||
import { Injectable, signal, computed } from '@angular/core';
|
||||
import {
|
||||
MinionData,
|
||||
MinionEvent,
|
||||
MinionState,
|
||||
MINION_TRANSITIONS,
|
||||
} from '../models/minion.model';
|
||||
|
||||
/**
|
||||
* Manages the state machine for all minions in the breakroom.
|
||||
*
|
||||
* Each minion follows: idle → walking → working → returning → idle
|
||||
* Transitions are triggered by events (spawn, task_complete, task_error, reset)
|
||||
* or automatically when walking/returning animations complete.
|
||||
*
|
||||
* Usage:
|
||||
* service.spawn('otto', 'Otto', 'dev', 0); // idle → walking → working
|
||||
* service.completeTask('otto'); // working → returning → idle
|
||||
* service.dispatch('otto', 'reset'); // any → idle
|
||||
*/
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class MinionStateService {
|
||||
/** Internal map of agent name → minion data */
|
||||
private readonly _minions = signal<Map<string, MinionData>>(new Map());
|
||||
|
||||
/** Readonly map of all minions */
|
||||
readonly minions = this._minions.asReadonly();
|
||||
|
||||
/** Computed array of minions sorted by desk position */
|
||||
readonly minionList = computed(() => {
|
||||
const map = this._minions();
|
||||
return Array.from(map.values()).sort((a, b) => {
|
||||
if (a.side !== b.side) return a.side.localeCompare(b.side);
|
||||
return a.deskIndex - b.deskIndex;
|
||||
});
|
||||
});
|
||||
|
||||
/** Get a single minion by agent name */
|
||||
getMinion(agentName: string): MinionData | undefined {
|
||||
return this._minions().get(agentName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Spawn a minion: creates entry in 'idle' state, then immediately
|
||||
* transitions to 'walking' (which auto-transitions to 'working').
|
||||
*/
|
||||
spawn(agentName: string, displayName: string, side: 'dev' | 'business', deskIndex: number): void {
|
||||
const minion: MinionData = {
|
||||
agentName,
|
||||
displayName,
|
||||
state: 'idle',
|
||||
progress: 0,
|
||||
side,
|
||||
deskIndex,
|
||||
lastTransition: new Date(),
|
||||
};
|
||||
this._minions.update(map => {
|
||||
const next = new Map(map);
|
||||
next.set(agentName, minion);
|
||||
return next;
|
||||
});
|
||||
// Immediately transition idle → walking
|
||||
this.dispatch(agentName, 'spawn');
|
||||
}
|
||||
|
||||
/**
|
||||
* Dispatch an event to transition a minion's state.
|
||||
* Follows the MINION_TRANSITIONS map. Invalid transitions are ignored.
|
||||
*/
|
||||
dispatch(agentName: string, event: MinionEvent): void {
|
||||
this._minions.update(map => {
|
||||
const minion = map.get(agentName);
|
||||
if (!minion) return map;
|
||||
|
||||
const validTransitions = MINION_TRANSITIONS[minion.state];
|
||||
const nextState = validTransitions[event];
|
||||
if (!nextState) return map; // Invalid transition — ignore
|
||||
|
||||
const updated: MinionData = {
|
||||
...minion,
|
||||
state: nextState,
|
||||
lastTransition: new Date(),
|
||||
};
|
||||
|
||||
const next = new Map(map);
|
||||
next.set(agentName, updated);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Complete a task: transitions working → returning.
|
||||
* After returning animation, the minion auto-transitions to idle.
|
||||
*/
|
||||
completeTask(agentName: string): void {
|
||||
this.dispatch(agentName, 'task_complete');
|
||||
}
|
||||
|
||||
/**
|
||||
* Report a task error: transitions working → returning (same visual, different reason).
|
||||
* After returning animation, the minion auto-transitions to idle.
|
||||
*/
|
||||
taskError(agentName: string): void {
|
||||
this.dispatch(agentName, 'task_error');
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by the MinionComponent when the walking animation completes.
|
||||
* Transitions walking → working and sets initial progress to 0.
|
||||
*/
|
||||
onWalkingComplete(agentName: string): void {
|
||||
this._minions.update(map => {
|
||||
const minion = map.get(agentName);
|
||||
if (!minion || minion.state !== 'walking') return map;
|
||||
|
||||
const updated: MinionData = {
|
||||
...minion,
|
||||
state: 'working',
|
||||
progress: 0,
|
||||
lastTransition: new Date(),
|
||||
};
|
||||
|
||||
const next = new Map(map);
|
||||
next.set(agentName, updated);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by the MinionComponent when the returning animation completes.
|
||||
* Transitions returning → idle.
|
||||
*/
|
||||
onReturningComplete(agentName: string): void {
|
||||
this._minions.update(map => {
|
||||
const minion = map.get(agentName);
|
||||
if (!minion || minion.state !== 'returning') return map;
|
||||
|
||||
const updated: MinionData = {
|
||||
...minion,
|
||||
state: 'idle',
|
||||
progress: 0,
|
||||
currentTask: undefined,
|
||||
lastTransition: new Date(),
|
||||
};
|
||||
|
||||
const next = new Map(map);
|
||||
next.set(agentName, updated);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update task progress for a working minion.
|
||||
*/
|
||||
updateProgress(agentName: string, progress: number): void {
|
||||
this._minions.update(map => {
|
||||
const minion = map.get(agentName);
|
||||
if (!minion || minion.state !== 'working') return map;
|
||||
|
||||
const updated: MinionData = {
|
||||
...minion,
|
||||
progress: Math.min(100, Math.max(0, progress)),
|
||||
lastTransition: new Date(),
|
||||
};
|
||||
|
||||
const next = new Map(map);
|
||||
next.set(agentName, updated);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the current task description for a minion.
|
||||
*/
|
||||
updateTask(agentName: string, taskDescription: string): void {
|
||||
this._minions.update(map => {
|
||||
const minion = map.get(agentName);
|
||||
if (!minion) return map;
|
||||
|
||||
const updated: MinionData = {
|
||||
...minion,
|
||||
currentTask: taskDescription,
|
||||
};
|
||||
|
||||
const next = new Map(map);
|
||||
next.set(agentName, updated);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove a minion entirely from the state map.
|
||||
*/
|
||||
removeMinion(agentName: string): void {
|
||||
this._minions.update(map => {
|
||||
const next = new Map(map);
|
||||
next.delete(agentName);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset a minion back to idle state.
|
||||
*/
|
||||
resetMinion(agentName: string): void {
|
||||
this.dispatch(agentName, 'reset');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user