Spaces:
Sleeping
Sleeping
File size: 3,803 Bytes
1bb18a0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | import React from 'react';
const TASK_OPTIONS = [
{ value: 'easy', label: 'Easy — Monday Morning', color: '#22c55e' },
{ value: 'medium', label: 'Medium — Demo Day Prep', color: '#f59e0b' },
{ value: 'hard', label: 'Hard — Series B Crisis', color: '#ef4444' },
];
export default function SimulationControls({
taskId, currentTime, currentStep, maxSteps, totalReward,
done, onReset, onTaskChange, loading,
isAutoRunning, onAutoRun,
}) {
const progressPct = maxSteps > 0 ? (currentStep / maxSteps) * 100 : 0;
const task = TASK_OPTIONS.find(t => t.value === taskId) || TASK_OPTIONS[0];
return (
<div className="sim-controls">
{/* ── Left: brand + task ── */}
<div className="sim-controls-left">
<div className="brand">
<span className="brand-icon">⚡</span>
<div className="brand-text">
<span className="brand-name">ExecOps AI</span>
<span className="brand-sub">CEO Simulation</span>
</div>
</div>
<div className="divider-v" />
<select
className="task-select"
value={taskId}
onChange={e => onTaskChange(e.target.value)}
disabled={isAutoRunning || loading}
style={{ borderColor: `${task.color}55` }}
>
{TASK_OPTIONS.map(t => (
<option key={t.value} value={t.value}>{t.label}</option>
))}
</select>
<button
className="btn btn-reset"
onClick={onReset}
disabled={isAutoRunning || loading}
title="Reset to initial state"
>
↺ Reset
</button>
</div>
{/* ── Center: time + steps ── */}
<div className="sim-controls-center">
<div className="time-display">
<span className="stat-label">CEO TIME</span>
<span className="time-value">{currentTime}</span>
</div>
<div className="step-display">
<span className="stat-label">STEPS</span>
<span className="step-value">
{currentStep} <span className="step-sep">/</span> {maxSteps}
</span>
<div className="step-bar">
<div
className="step-bar-fill"
style={{
width: `${progressPct}%`,
background: progressPct >= 100
? '#22c55e'
: `linear-gradient(90deg, #3b82f6, #8b5cf6)`,
}}
/>
</div>
</div>
<div className="reward-display">
<span className="stat-label">REWARD</span>
<span
className="reward-value"
style={{ color: totalReward >= 0 ? '#22c55e' : '#ef4444' }}
>
{totalReward >= 0 ? '+' : ''}{totalReward.toFixed(3)}
</span>
</div>
</div>
{/* ── Right: auto-run + status ── */}
<div className="sim-controls-right">
{/* Auto-run button */}
<button
className={`btn-autorun ${isAutoRunning ? 'running' : ''}`}
onClick={onAutoRun}
disabled={loading && !isAutoRunning}
title={isAutoRunning ? 'Stop simulation' : 'Watch AI play through this scenario'}
>
{isAutoRunning ? (
<>
<span className="autorun-icon">■</span>
<span>Stop</span>
</>
) : (
<>
<span className="autorun-icon">▶</span>
<span>Watch AI Play</span>
</>
)}
</button>
<div className={`status-badge ${done ? 'done' : isAutoRunning ? 'auto' : 'active'}`}>
{done ? '✓ COMPLETE' : isAutoRunning ? '◈ AI RUNNING' : '● READY'}
</div>
</div>
</div>
);
}
|