// app.jsx — root component, ties together all sections and the Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"lang": "zh",
"accent": "#B5612C",
"paperTone": "warm",
"snap": true
}/*EDITMODE-END*/;
function App() {
// Static config — Tweaks panel removed, so the runtime knobs collapse to the defaults.
const t = TWEAK_DEFAULTS;
// Apply tweaks to via attributes so CSS can react.
React.useEffect(() => {
const root = document.documentElement;
root.dataset.lang = t.lang;
root.dataset.tone = t.paperTone;
root.style.setProperty("--brick", t.accent);
// hover & soft shades derived from accent (simple darker)
root.style.setProperty("--brick-hover", shade(t.accent, -.12));
// tone swaps the paper bg
const toneMap = {
warm: { paper: "#F4ECDD", warm: "#EEE3CE", card: "#FBF6EA", deep: "#E5D8BD" },
ivory: { paper: "#F7F1E4", warm: "#F0E8D3", card: "#FDF8EC", deep: "#E8DDC1" },
stone: { paper: "#E8DFCB", warm: "#DBCFB4", card: "#F4EDDA", deep: "#CFC0A1" },
dusk: { paper: "#1F1A12", warm: "#27201A", card: "#2C2519", deep: "#3A2F1F" },
};
const m = toneMap[t.paperTone] || toneMap.warm;
root.style.setProperty("--paper", m.paper);
root.style.setProperty("--paper-warm", m.warm);
root.style.setProperty("--paper-card", m.card);
root.style.setProperty("--paper-deep", m.deep);
document.body.style.background = m.paper;
document.body.style.color = (t.paperTone === "dusk") ? "#E5DABF" : "#1F1A12";
// Scroll snap toggle — written as data-snap on , CSS does the rest.
root.dataset.snap = t.snap ? "1" : "0";
}, [t.lang, t.accent, t.paperTone, t.snap]);
const copy = (window.COPY || {})[t.lang] || (window.COPY || {}).zh;
if (!copy) return Loading…
;
return (
{/* ════════ Narrative landing scroll (《雨中客》) ════════ */}
);
}
// Small helper to darken a hex
function shade(hex, amt) {
const h = hex.replace("#", "");
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const f = (c) => Math.max(0, Math.min(255, Math.round(c + c * amt)));
return "#" + [f(r), f(g), f(b)].map(x => x.toString(16).padStart(2, "0")).join("");
}
ReactDOM.createRoot(document.getElementById("root")).render();