File size: 3,019 Bytes
4bb2117 | 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 | import React from 'react';
import type { Door } from '../types';
interface ControlPanelProps {
onAction: (action: unknown, label: string) => void;
onReset: (difficulty: string) => void;
onResetDoors: () => void;
onSetup: () => void;
doors: Door[];
isAutoWait: boolean;
toggleAutoWait: () => void;
isPolling: boolean;
togglePolling: () => void;
status: string;
isError: boolean;
}
const ControlPanel: React.FC<ControlPanelProps> = ({
onAction, onSetup, doors,
isAutoWait, toggleAutoWait,
isPolling, togglePolling,
status, isError,
}) => {
const mv = (dir: string) => onAction({ action: 'move', direction: dir.toLowerCase() }, `MOVE ${dir.toUpperCase()}`);
return (
<div className="side-sec">
<div className="sec-hd">Tactical Controls</div>
{/* D-Pad */}
<div className="ctrl-grid" style={{ maxWidth: 160, margin: '0 auto', marginBottom: 8 }}>
{/* Row 1 */}
<div />
<button className="ctrl-btn" onClick={() => mv('north')}>▲</button>
<div />
{/* Row 2 */}
<button className="ctrl-btn" onClick={() => mv('west')}>◀</button>
<button className="ctrl-btn accent" onClick={() => onAction({ action: 'wait' }, 'WAIT')} title="Wait in place">●</button>
<button className="ctrl-btn" onClick={() => mv('east')}>▶</button>
{/* Row 3 */}
<div />
<button className="ctrl-btn" onClick={() => mv('south')}>▼</button>
<div />
</div>
{/* Secondary actions */}
<div className="ctrl-row">
<button className="ctrl-btn" onClick={() => onAction({ action: 'look' }, 'LOOK')}>SCAN</button>
<button className={`ctrl-btn ${isAutoWait ? 'active' : ''}`} onClick={toggleAutoWait}>
{isAutoWait ? 'STOP AUTO' : 'AUTO'}
</button>
<button className={`ctrl-btn ${isPolling ? 'active' : ''}`} onClick={togglePolling}>
{isPolling ? 'LIVE ●' : 'LIVE ○'}
</button>
</div>
{/* Reboot */}
<div className="ctrl-row" style={{ marginTop: 6 }}>
<button className="ctrl-btn play" onClick={onSetup} style={{ flex: 'none', width: '100%' }}>
↺ REBOOT EPISODE
</button>
</div>
{/* Status line */}
<div className={`ctrl-status ${isError ? 'error' : ''}`}>
{status}
</div>
{/* Doors */}
{doors.length > 0 && (
<div style={{ marginTop: 12 }}>
<div className="sec-hd" style={{ marginBottom: 6 }}>Proximity Doors</div>
<div className="door-grid">
{doors.map(d => (
<button
key={d.id}
className={`door-btn ${d.state}`}
onClick={() => onAction({ action: 'door', target_id: d.id, door_state: d.state === 'closed' ? 'open' : 'close' }, `DOOR ${d.id}`)}
>
{d.id} [{d.state}]
</button>
))}
</div>
</div>
)}
</div>
);
};
export default ControlPanel;
|