/* ============================================================
Island City VR — Tweaks
Three expressive controls that reshape the whole feel:
• Accent palette • Headline typeface • Atmosphere (warmth)
Applied by overriding the CSS custom properties on .
============================================================ */
const { useEffect } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"accent": "#2a9d8f",
"headline": "Cormorant",
"atmosphere": "Airy"
}/*EDITMODE-END*/;
// accent palettes keyed by their representative swatch
const ACCENTS = {
"#2a9d8f": { teal: "#2a9d8f", tealDeep: "#218377", gold: "#e9c46a" }, // Aqua (default)
"#e76f51": { teal: "#e76f51", tealDeep: "#cf5a3d", gold: "#f4a259" }, // Sunset coral
"#2a6f97": { teal: "#2a6f97", tealDeep: "#1d5476", gold: "#6aa9cf" } // Deep Sea
};
const HEADLINES = {
"Cormorant": '"Cormorant Garamond", "Noto Serif JP", Georgia, serif',
"Playfair": '"Playfair Display", "Noto Serif JP", Georgia, serif',
"DM Serif": '"DM Serif Display", "Noto Serif JP", Georgia, serif'
};
// atmosphere shifts the dominant whites/sands (warmth of the whole page)
const ATMOS = {
"Airy": { white: "#ffffff", sand: "#f7f5f0", sandDeep: "#efe9de", ink: "#16222e" },
"Sun-Soaked": { white: "#fdf8f0", sand: "#f4ead7", sandDeep: "#ead9bd", ink: "#2a2117" },
"Breezy": { white: "#f6fafb", sand: "#e9f1f2", sandDeep: "#d8e7e8", ink: "#15252b" }
};
function applyTweaks(t) {
const r = document.documentElement.style;
const a = ACCENTS[t.accent] || ACCENTS["#2a9d8f"];
r.setProperty("--teal", a.teal);
r.setProperty("--teal-deep", a.tealDeep);
r.setProperty("--gold", a.gold);
r.setProperty("--serif", HEADLINES[t.headline] || HEADLINES["Cormorant"]);
const m = ATMOS[t.atmosphere] || ATMOS["Airy"];
r.setProperty("--white", m.white);
r.setProperty("--sand", m.sand);
r.setProperty("--sand-deep", m.sandDeep);
r.setProperty("--ink", m.ink);
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useEffect(() => { applyTweaks(t); }, [t]);
return (
setTweak("accent", v)}
/>
setTweak("headline", v)}
/>
setTweak("atmosphere", v)}
/>
);
}
// apply persisted tweaks immediately (before the panel is ever opened)
try {
const saved = JSON.parse(localStorage.getItem("__tweaks") || "null");
applyTweaks(Object.assign({}, TWEAK_DEFAULTS, saved || {}));
} catch (e) { applyTweaks(TWEAK_DEFAULTS); }
ReactDOM.createRoot(document.getElementById("tweaks-root")).render();