Spaces:
Running
Running
File size: 4,664 Bytes
c03d895 | 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 | import { useEffect, useRef } from 'react';
import { formatAutoPlayDelay } from '../hooks/useExplorer.js';
import Button from './ui/Button.jsx';
const SHORTCUTS = [['Enter', 'Apply'], ['F', 'Flip'], ['C', 'Clear'], ['←', 'Back'], ['→', 'Forward']];
const DELAY_MIN = 0;
const DELAY_MAX = 2500;
export default function SettingsPanel({ explorer }) {
const { settingsOpen, setSettingsOpen, showRootRow, variant, autoplayDelayMs, actions } = explorer;
const panelRef = useRef(null);
const chess960 = variant === 'chess960';
useEffect(() => {
if (!settingsOpen) return;
function onDocClick(e) {
if (panelRef.current && !panelRef.current.contains(e.target) && !e.target.closest('#settings-btn')) {
setSettingsOpen(false);
}
}
function onKeydown(e) {
if (e.key === 'Escape') { e.preventDefault(); setSettingsOpen(false); }
}
document.addEventListener('click', onDocClick);
document.addEventListener('keydown', onKeydown);
return () => {
document.removeEventListener('click', onDocClick);
document.removeEventListener('keydown', onKeydown);
};
}, [settingsOpen, setSettingsOpen]);
const pct = ((autoplayDelayMs - DELAY_MIN) / (DELAY_MAX - DELAY_MIN)) * 100;
return (
<div id="settings-panel" ref={panelRef} className={`settings-panel${settingsOpen ? ' is-open' : ''}`}
role="dialog" aria-modal="false" aria-label="Board settings">
<div className="settings-panel__header">
<span className="settings-panel__title">Board Settings</span>
<Button id="settings-close-btn" compact iconOnly icon="close" aria-label="Close settings"
onClick={() => setSettingsOpen(false)} />
</div>
<div className="settings-row settings-row--toggle">
<label className="settings-toggle" htmlFor="show-root-row-toggle">
<span className="settings-toggle__label">Show Root Row</span>
<span className="toggle-switch">
<input type="checkbox" id="show-root-row-toggle" className="toggle-switch__input" role="switch"
checked={showRootRow} onChange={(e) => actions.setShowRootRowAction(e.target.checked)} />
<span className="toggle-switch__track" aria-hidden="true"></span>
</span>
</label>
</div>
<div className="settings-row settings-row--toggle">
<label className="settings-toggle" htmlFor="chess960-mode-toggle">
<span className="settings-toggle__label">Chess960 Mode</span>
<span className="toggle-switch">
<input type="checkbox" id="chess960-mode-toggle" className="toggle-switch__input" role="switch"
checked={chess960} onChange={(e) => actions.setChess960Action(e.target.checked)} />
<span className="toggle-switch__track" aria-hidden="true"></span>
</span>
</label>
</div>
<div className="settings-row settings-row--slider">
<span className="settings-slider__label">Autoplay Delay</span>
<div className="settings-slider__control">
<input type="range" id="autoplay-delay-slider" className="range-slider"
min={DELAY_MIN} max={DELAY_MAX} step={50} value={autoplayDelayMs}
style={{ '--range-fill': `${pct}%` }}
aria-label="Autoplay delay" aria-valuetext={formatAutoPlayDelay(autoplayDelayMs)}
onChange={(e) => actions.setAutoplayDelayAction(parseInt(e.target.value, 10))} />
<div className="range-slider__ticks" aria-hidden="true">
<span>0s</span><span>1.25s</span><span>2.5s</span>
</div>
</div>
<span className="settings-slider__value" id="autoplay-delay-value">{formatAutoPlayDelay(autoplayDelayMs)}</span>
</div>
<div className="settings-row settings-row--shortcuts">
<span className="settings-shortcuts__title">Keyboard Shortcuts</span>
<ul className="settings-shortcuts__list">
{SHORTCUTS.map(([key, action]) => (
<li key={key}><kbd>{key}</kbd> {action}</li>
))}
</ul>
</div>
</div>
);
}
|