// tweaks.jsx — Tweaks UI for Pahala Kencana deck.
// Reads TWEAK_DEFAULTS from window (set inline in index.html for EDITMODE persist).
const { useEffect } = React;
function PKTweaks() {
const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
// Apply mode + accent live by writing CSS variables on
useEffect(() => {
const root = document.documentElement;
root.setAttribute('data-mode', t.mode);
root.style.setProperty('--accent', t.accent);
// Update accent-soft (12% alpha)
const hex = t.accent.replace('#', '');
const r = parseInt(hex.slice(0,2), 16);
const g = parseInt(hex.slice(2,4), 16);
const b = parseInt(hex.slice(4,6), 16);
root.style.setProperty('--accent-soft', `rgba(${r},${g},${b},0.14)`);
}, [t.mode, t.accent]);
// Apply scenario numbers to DOM
useEffect(() => {
['A','B','C','D'].forEach((k) => {
const inv = t[`s${k}_invest`];
const bus = t[`s${k}_bus`];
const rev = t[`s${k}_rev`];
const margin = t[`s${k}_margin`];
document.querySelectorAll(`[data-scen="${k}"] [data-field="invest"]`).forEach(el => el.textContent = inv);
document.querySelectorAll(`[data-scen="${k}"] [data-field="bus"]`).forEach(el => el.textContent = `+ ${bus} bus`);
document.querySelectorAll(`[data-scen="${k}"] [data-field="rev"]`).forEach(el => el.textContent = `Rp ${rev} M`);
document.querySelectorAll(`[data-scen="${k}"] [data-field="margin"]`).forEach(el => el.textContent = `Rp ${margin} M`);
});
}, [t.sA_invest, t.sA_bus, t.sA_rev, t.sA_margin,
t.sB_invest, t.sB_bus, t.sB_rev, t.sB_margin,
t.sC_invest, t.sC_bus, t.sC_rev, t.sC_margin,
t.sD_invest, t.sD_bus, t.sD_rev, t.sD_margin]);
return (
setTweak('mode', v)}
/>
setTweak('accent', v)}
/>
setTweak('sA_invest', v)} />
setTweak('sA_bus', v)} />
setTweak('sA_rev', v)} />
setTweak('sA_margin', v)} />
setTweak('sB_invest', v)} />
setTweak('sB_bus', v)} />
setTweak('sB_rev', v)} />
setTweak('sB_margin', v)} />
setTweak('sC_invest', v)} />
setTweak('sC_bus', v)} />
setTweak('sC_rev', v)} />
setTweak('sC_margin', v)} />
setTweak('sD_invest', v)} />
setTweak('sD_bus', v)} />
setTweak('sD_rev', v)} />
setTweak('sD_margin', v)} />
);
}
// Mount
const mount = document.getElementById('tweaks-mount');
ReactDOM.createRoot(mount).render();