/* ============================================================ SNAFU T CO — Tweaks Applies design direction to + mirrors to localStorage so the choice follows the user across pages. ============================================================ */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "olive", "headfont": "classic", "texture": true, "copy": "edgy", "brand": "SNAFU T CO" }/*EDITMODE-END*/; const LS_KEY = 'cf_tweaks_v2'; // merge persisted values so the direction carries across page loads function initialTweaks() { let saved = {}; try { saved = JSON.parse(localStorage.getItem(LS_KEY) || '{}'); } catch (e) {} return { ...TWEAK_DEFAULTS, ...saved }; } const THEME_SWATCHES = { olive: ['#58622f', '#c7b27a', '#15170f'], coyote: ['#6e4b2c', '#8a9a5b', '#17140f'], blackops: ['#1d1d1f', '#ff6a1a', '#0d0d0e'], patriot: ['#1b2748', '#c0263a', '#eef1f7'], }; const THEME_LABELS = { olive: 'Olive Drab', coyote: 'Coyote / Ranger', blackops: 'Black Ops', patriot: 'Patriotic', }; function applyTweaks(t) { const r = document.documentElement; r.setAttribute('data-theme', t.theme); r.setAttribute('data-headfont', t.headfont); r.setAttribute('data-texture', t.texture ? 'on' : 'off'); r.setAttribute('data-copy', t.copy); document.querySelectorAll('[data-brand]').forEach((el) => { // keep any tagline child intact const small = el.querySelector('small'); el.childNodes.forEach((n) => { if (n.nodeType === 3) n.textContent = ''; }); el.insertBefore(document.createTextNode(t.brand), el.firstChild); if (small) el.appendChild(small); }); try { localStorage.setItem(LS_KEY, JSON.stringify(t)); } catch (e) {} } // apply immediately on load (before React mounts) to avoid a flash applyTweaks(initialTweaks()); function ThemePicker({ value, onChange }) { return (

Color direction {THEME_LABELS[value]}

{Object.keys(THEME_SWATCHES).map((k) => { const sw = THEME_SWATCHES[k]; const on = k === value; return ( ); })}

); } function App() { const [t, setTweak] = useTweaks(initialTweaks()); React.useEffect(() => { applyTweaks(t); }, [t]); return ( setTweak('theme', v)} /> setTweak('headfont', v)} /> setTweak('texture', v)} /> setTweak('copy', v)} /> setTweak('brand', v)} /> ); } (function mount() { let root = document.getElementById('tweak-root'); if (!root) { root = document.createElement('div'); root.id = 'tweak-root'; document.body.appendChild(root); } ReactDOM.createRoot(root).render(); })();