// App.jsx โ shell, router, Tweaks, shared chrome
// Tweaks state is stored on window.__wbbq so all page components can read it.
const { useState, useEffect, useRef, createContext, useContext } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "poster",
"accent": "flame",
"chaos": true,
"tagline": "We cook pig. You eat it. Everybody wins except the pig.",
"featuredMascot": "rotate"
}/*EDITMODE-END*/;
const TweaksContext = createContext(TWEAK_DEFAULTS);
window.useTweaks = () => useContext(TweaksContext);
// ---------- Router ----------
const ROUTES = [
{ path: '', label: 'Home', component: 'HomePage' },
{ path: 'team', label: 'Team', component: 'TeamPage' },
{ path: 'events', label: 'Events', component: 'EventsPage' },
{ path: 'trophies', label: 'Trophies', component: 'TrophiesPage' },
{ path: 'stats', label: 'Stats', component: 'StatsPage' },
{ path: 'merch', label: 'Merch', component: 'MerchPage', feature: 'merch' },
{ path: 'blog', label: 'Field Notes', component: 'BlogPage' },
{ path: 'app', label: 'Sausage Calc', component: 'AppPage' },
{ path: 'contact', label: 'Contact', component: 'ContactPage' },
];
// Nav visibility: excludes hidden + feature-gated-off routes. Used for header/footer lists.
const isRouteAvailable = (r) => !r.hidden && (!r.feature || (window.featureEnabled && window.featureEnabled(r.feature)));
// Route resolvability: hidden routes are still reachable by direct URL, only feature flags redirect.
const isRouteResolvable = (r) => !r.feature || (window.featureEnabled && window.featureEnabled(r.feature));
const useRoute = () => {
const [route, setRoute] = useState(() => (location.hash.replace('#/', '').replace('#', '') || ''));
useEffect(() => {
const onHash = () => {
setRoute(location.hash.replace('#/', '').replace('#', '') || '');
window.scrollTo({ top: 0, behavior: 'instant' });
};
window.addEventListener('hashchange', onHash);
return () => window.removeEventListener('hashchange', onHash);
}, []);
return route;
};
window.useRoute = useRoute;
// ---------- Scroll reveal ----------
window.useReveal = () => {
useEffect(() => {
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: 0.15 });
document.querySelectorAll('.reveal:not(.in)').forEach((el) => io.observe(el));
return () => io.disconnect();
});
};
// ---------- KCBS achievement tiers ----------
// place: "1", "1st", "Rookie Of The Year", etc. kind: 'overall' | 'meat'.
// Returns { tier, label, color, emoji } or null.
window.tierFor = (place, kind = 'overall') => {
if (place == null || place === '') return null;
const s = String(place).trim();
if (/rookie of/i.test(s)) return { tier: 'rookie', label: 'ROOKIE', color: 'var(--wbbq-flame)', emoji: '๐' };
const n = parseInt(s, 10);
if (!Number.isFinite(n) || n < 1) return null;
if (kind === 'overall') {
if (n === 1) return { tier: 'gc', label: 'GC', color: 'var(--wbbq-flame)', emoji: '๐' };
if (n === 2) return { tier: 'rgc', label: 'RGC', color: 'var(--wbbq-slime)', emoji: null };
if (n <= 10) return { tier: 'call', label: 'CALL', color: 'var(--wbbq-blue)', emoji: null };
return null;
}
if (n <= 10) return { tier: 'call', label: 'CALL', color: 'var(--wbbq-blue)', emoji: null };
return null;
};
window.TierPill = ({ tier, size = 'sm' }) => {
if (!tier) return null;
const fs = size === 'lg' ? 11 : 9;
const pad = size === 'lg' ? '3px 9px' : '2px 7px';
return (
{tier.label}
);
};
// ---------- Header ----------
const Header = ({ route }) => {
const [open, setOpen] = useState(false);
const currentPath = route;
// Close the drawer whenever the route changes (useRoute already scrolls to top).
useEffect(() => { setOpen(false); }, [route]);
const navLinks = ROUTES.filter(r => r.path !== '' && isRouteAvailable(r));
const showAdmin = window.location.hostname !== 'compteam.warpedbbq.com';
return (
@warpedbbq
{showAdmin && (
โ Admin
)}
);
};
window.Header = Header;
// ---------- UFO flyby (decorative, above content) ----------
const UfoFlyby = () => {
const tweaks = useTweaks();
if (!tweaks.chaos) return null;
return (
);
};
window.UfoFlyby = UfoFlyby;
// ---------- Footer ----------
const Footer = () => (
);
window.Footer = Footer;
// ---------- Tweaks panel ----------
const TweaksPanel = ({ tweaks, setTweaks, visible }) => {
if (!visible) return null;
const set = (k, v) => {
const next = { ...tweaks, [k]: v };
setTweaks(next);
window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
};
const toggleRow = (key, options) => (
{options.map(([v, label]) => (
))}
);
return (
โ Tweaks
{toggleRow('heroVariant', [['poster','Poster'],['marquee','Marquee'],['abduction','Abduct']])}
{toggleRow('accent', [['flame','Flame'],['slime','Slime'],['blood','Blood']])}
{toggleRow('featuredMascot', [['rotate','Rotate'],['pig','Pig'],['flame','Flame'],['ufo','UFO']])}
{toggleRow('chaos', [[true,'On'],[false,'Off']])}
set('tagline', e.target.value)} />
);
};
// ---------- App shell ----------
const App = () => {
const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
const [editMode, setEditMode] = useState(false);
const route = useRoute();
useEffect(() => {
const onMsg = (e) => {
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);
}, []);
// Apply accent as CSS variable so components can reference --accent-dynamic
useEffect(() => {
const map = { flame: '#FF7A1A', slime: '#B5EE1C', blood: '#B11D1D' };
document.documentElement.style.setProperty('--accent-dynamic', map[tweaks.accent] || map.flame);
document.documentElement.style.setProperty('--accent-dynamic-hot', tweaks.accent === 'flame' ? '#FFB21A' : tweaks.accent === 'slime' ? '#D8FF5A' : '#E84B4B');
}, [tweaks.accent]);
let PageComponent;
if (route.startsWith('blog/')) {
PageComponent = window.BlogPostPage || window.BlogPage || window.HomePage;
} else if (route.startsWith('docs/')) {
PageComponent = window.DocsPage || window.HomePage;
} else {
PageComponent = window[(ROUTES.find(r => r.path === route && isRouteResolvable(r)) || ROUTES[0]).component] || window.HomePage;
}
return (
);
};
window.WarpedApp = App;