Tweaks
Season theme
{['default','spring','summer','autumn','winter'].map(s => (
))}
Typeface
{['sans','serif'].map(f => (
))}
Hero
{['auto','static'].map(h => (
))}
);
}
// ============== APP ==============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "default",
"font": "sans",
"heroMode": "auto",
"lang": "ja"
}/*EDITMODE-END*/;
function App() {
const saved = (() => {
try { return JSON.parse(localStorage.getItem('amamizu.tweaks') || 'null'); } catch(e) { return null; }
})();
const init = { ...TWEAK_DEFAULTS, ...(saved || {}) };
const [lang, setLang] = useState(init.lang);
const [theme, setTheme] = useState(init.theme);
const [font, setFont] = useState(init.font);
const [heroMode, setHeroMode] = useState(init.heroMode);
const [editMode, setEditMode] = useState(false);
const t = useMemo(() => {
const o = window.I18N[lang] || window.I18N.ja;
return { ...o, __lang: lang };
}, [lang]);
useEffect(() => {
document.body.classList.remove('theme-default','theme-spring','theme-summer','theme-autumn','theme-winter');
document.body.classList.add(`theme-${theme}`);
document.body.classList.toggle('ff-serif', font === 'serif');
}, [theme, font]);
const dispatchEdit = (edits) => {
const merged = { ...TWEAK_DEFAULTS, theme, font, heroMode, lang, ...edits };
localStorage.setItem('amamizu.tweaks', JSON.stringify(merged));
window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
};
useEffect(() => {
dispatchEdit({ lang });
}, [lang]);
useEffect(() => {
const onMsg = (e) => {
if (!e.data) return;
if (e.data.type === '__activate_edit_mode') setEditMode(true);
if (e.data.type === '__deactivate_edit_mode') setEditMode(false);
};
window.addEventListener('message', onMsg);
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
return () => window.removeEventListener('message', onMsg);
}, []);
return (
<>