// Shared components for the Wolfpack site // Exports via window.* at the end so all page scripts can use them. const { useState, useEffect, useRef, useMemo } = React; // ============================================================ // HOOKS // ============================================================ function useRoute() { const [route, setRoute] = useState(() => (window.location.hash || '#home').slice(1)); useEffect(() => { const onHash = () => { setRoute((window.location.hash || '#home').slice(1)); window.scrollTo({ top: 0, behavior: 'instant' }); }; window.addEventListener('hashchange', onHash); return () => window.removeEventListener('hashchange', onHash); }, []); return route; } function useTick(intervalMs = 1000) { const [n, setN] = useState(0); useEffect(() => { const id = setInterval(() => setN(x => x + 1), intervalMs); return () => clearInterval(id); }, [intervalMs]); return n; } function useInView(ref, opts = { threshold: 0.15 }) { const [seen, setSeen] = useState(false); useEffect(() => { if (!ref.current) return; const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) setSeen(true); }); }, opts); io.observe(ref.current); return () => io.disconnect(); }, [ref]); return seen; } // ============================================================ // NAV // ============================================================ const NAV_ITEMS = [ { href: '#home', label: 'Home', num: '01' }, { href: '#about', label: 'Who Are We?', num: '02' }, { href: '#roster', label: 'Roster', num: '03' }, { href: '#coaches', label: 'Coaches', num: '04' }, { href: '#schedule', label: 'Schedule', num: '05' }, { href: '#recruit', label: 'Tryouts', num: '06' }, { href: '#contact', label: 'Contact', num: '07' }, ]; function Nav({ route }) { const [open, setOpen] = useState(false); useEffect(() => { setOpen(false); }, [route]); useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]); return ( <>
{NAV_ITEMS.map((it, i) => ( {it.num}{it.label} ))}
◆ GRIT · FAMILY · COMMITMENT
Bartow County · Georgia
); } // ============================================================ // FOOTER // ============================================================ function Footer() { return ( ); } // ============================================================ // Ambient pieces // ============================================================ function ScanLines({ count = 2 }) { return ( <> {Array.from({ length: count }).map((_, i) => (
))} ); } function Marquee({ items, speed = 30 }) { const content = items.concat(items); return (
{content.map((it, i) => ( ◆ {it} ))}
); } // Numeric ticker function Ticker({ value, prefix = '', suffix = '', duration = 1400 }) { const [display, setDisplay] = useState(0); const ref = useRef(); const seen = useInView(ref); useEffect(() => { if (!seen) return; const start = performance.now(); let raf; const tick = (t) => { const k = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - k, 3); setDisplay(Math.round(value * eased)); if (k < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [seen, value, duration]); return {prefix}{display.toLocaleString()}{suffix}; } // Corner brackets wrapper function Frame({ children, style, className = '' }) { return (
{children}
); } // ============================================================ // PLACEHOLDER for player portraits // ============================================================ function PlayerPlaceholder({ num, pos, name = 'ROSTER TBD', nickname, photo, photoPos }) { const hasPhoto = !!photo; const overlayShadow = hasPhoto ? '0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.7)' : undefined; return (
{hasPhoto && ( <> {name}
)}
#{String(num).padStart(2, '0')}
{pos}
{!hasPhoto && (
{String(num).padStart(2,'0')}
[PLAYER PHOTO]
)}
{name} {nickname && (
{nickname}
)}
); } // ============================================================ // PASSWORD GATE — dev-only, client-side. Password: pack. // Not real security; obfuscates site from casual visitors while under dev. // ============================================================ const GATE_KEY = 'wp-gate-v1'; const GATE_PW = 'pack'; function isGateOpen() { try { return sessionStorage.getItem(GATE_KEY) === 'ok' || localStorage.getItem(GATE_KEY) === 'ok'; } catch { return false; } } function PasswordGate({ onPass }) { const [value, setValue] = useState(''); const [error, setError] = useState(false); const [shake, setShake] = useState(false); function submit(e) { e.preventDefault(); if (value.trim().toLowerCase() === GATE_PW) { try { localStorage.setItem(GATE_KEY, 'ok'); } catch {} setError(false); onPass(); } else { setError(true); setShake(true); setTimeout(() => setShake(false), 500); setValue(''); } } return (
{/* Dotted grid bg */}
{/* Scan lines */}
{/* Scan line sweep */}
{/* HUD corners */} {['tl','tr','bl','br'].map(pos => { const s = { tl: { top: -1, left: -1, borderTop: '2px solid var(--wolf-red)', borderLeft: '2px solid var(--wolf-red)' }, tr: { top: -1, right: -1, borderTop: '2px solid var(--wolf-red)', borderRight: '2px solid var(--wolf-red)' }, bl: { bottom: -1, left: -1, borderBottom: '2px solid var(--wolf-red)', borderLeft: '2px solid var(--wolf-red)' }, br: { bottom: -1, right: -1, borderBottom: '2px solid var(--wolf-red)', borderRight: '2px solid var(--wolf-red)' }, }[pos]; return ; })}
RESTRICTED · UNDER DEVELOPMENT

THE PACK IS
NOT OPEN.

◆ Enter credentials to proceed.

{error && (
◆ ACCESS DENIED · TRY AGAIN
)}
NG WOLFPACK · CHASTAIN · 2012
); } // Export to window Object.assign(window, { useRoute, useTick, useInView, Nav, Footer, ScanLines, Marquee, Ticker, Frame, PlayerPlaceholder, PasswordGate, isGateOpen, NAV_ITEMS, });