// Cube Cracker - Tweaks panel (React) bridging into the vanilla Three.js game
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hammerPower": "standard",
  "fractureDetail": 150
}/*EDITMODE-END*/;

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent('cube-tweaks', { detail: t }));
  }, [t.hammerPower, t.fractureDetail]);

  return (
    <TweaksPanel>
      <TweakSection label="Hammer" />
      <TweakRadio
        label="Power"
        value={t.hammerPower}
        options={['light', 'standard', 'heavy']}
        onChange={(v) => setTweak('hammerPower', v)}
      />
      <TweakSection label="Stone" />
      <TweakSlider
        label="Fracture detail"
        value={t.fractureDetail}
        min={80}
        max={260}
        step={10}
        onChange={(v) => setTweak('fractureDetail', v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const host = document.getElementById('tweaks-root');
  ReactDOM.createRoot(host).render(<TweaksApp />);
})();