// components.jsx — Shared brand pieces (v2) const { useState: useStateC, useEffect: useEffectC, useRef: useRefC } = React; /* ============================================= LOGO — wraps the real PNG crest ============================================= */ function Logo({ size = 40, alt = "WRÖK", className = "", style = {} }) { return ( {alt} ); } /* ============================================= ARROW ============================================= */ function Arrow({ size = 14 }) { return ( ); } /* ============================================= TICKER — stadium-style scrolling text ============================================= */ function Ticker({ items, dark = false }) { const doubled = [...items, ...items]; return (
{doubled.map((item, i) => ( {item} ))}
); } /* ============================================= NAVBAR ============================================= */ function NavBar() { const isActive = useIsActive(); const [open, setOpen] = useStateC(false); const [supportOpen, setSupportOpen] = useStateC(false); const [aboutOpen, setAboutOpen] = useStateC(false); const [rugbyOpen, setRugbyOpen] = useStateC(false); useEffectC(() => { const close = () => { setOpen(false); setSupportOpen(false); setAboutOpen(false); setRugbyOpen(false); }; window.addEventListener("popstate", close); return () => window.removeEventListener("popstate", close); }, []); useEffectC(() => { const handler = (e) => { if (!e.target.closest(".nav__dropdown")) { setSupportOpen(false); setAboutOpen(false); setRugbyOpen(false); } }; document.addEventListener("click", handler); return () => document.removeEventListener("click", handler); }, []); return (
WRÖK WRÖK
Stötta touren
); } /* ============================================= FOOTER ============================================= */ function Footer() { const { data: sponsors } = useSponsors(); const activeSponsors = sponsors ? sponsors.filter((s) => s.active) : []; return ( ); } /* ============================================= PHOTO SLIDER — actionbilder och match-foton ============================================= */ function PhotoSlider({ photos, speed, limit }) { const spd = speed || 35; const cap = limit || 20; // Shuffle once when photos load, pick `cap` random ones const shown = React.useMemo(() => { if (!photos || photos.length === 0) return []; const arr = [...photos]; for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr.slice(0, cap); }, [photos && photos.length]); const trackRef = React.useRef(null); const pausedRef = React.useRef(false); const posRef = React.useRef(0); const halfRef = React.useRef(0); React.useEffect(() => { if (shown.length === 0) return; const track = trackRef.current; if (!track) return; posRef.current = 0; halfRef.current = 0; let rafId, lastTs = null; const loop = (ts) => { if (!halfRef.current && track.children[shown.length]) { halfRef.current = track.children[shown.length].offsetLeft; } if (halfRef.current && lastTs !== null && !pausedRef.current) { posRef.current += spd * (ts - lastTs) / 1000; if (posRef.current >= halfRef.current) posRef.current -= halfRef.current; track.style.transform = `translateX(-${posRef.current}px)`; } lastTs = ts; rafId = requestAnimationFrame(loop); }; let touchStartX = 0, touchStartY = 0, touchStartPos = 0, isHoriz = null; const onTouchStart = (e) => { pausedRef.current = true; touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; touchStartPos = posRef.current; isHoriz = null; }; const onTouchMove = (e) => { if (!halfRef.current) return; const dx = e.touches[0].clientX - touchStartX; const dy = e.touches[0].clientY - touchStartY; if (isHoriz === null) isHoriz = Math.abs(dx) > Math.abs(dy); if (!isHoriz) return; e.preventDefault(); posRef.current = ((touchStartPos - dx) % halfRef.current + halfRef.current) % halfRef.current; track.style.transform = `translateX(-${posRef.current}px)`; }; const onTouchEnd = () => { setTimeout(() => { pausedRef.current = false; }, 1500); }; track.addEventListener("touchstart", onTouchStart, { passive: true }); track.addEventListener("touchmove", onTouchMove, { passive: false }); track.addEventListener("touchend", onTouchEnd, { passive: true }); rafId = requestAnimationFrame(loop); return () => { cancelAnimationFrame(rafId); track.removeEventListener("touchstart", onTouchStart); track.removeEventListener("touchmove", onTouchMove); track.removeEventListener("touchend", onTouchEnd); }; }, [shown.length]); const scrollByPhoto = (dir) => { const track = trackRef.current; if (!track || !halfRef.current) return; pausedRef.current = true; const step = (track.children[0]?.offsetWidth ?? 400) + 16; posRef.current = ((posRef.current + dir * step) % halfRef.current + halfRef.current) % halfRef.current; track.style.transform = `translateX(-${posRef.current}px)`; setTimeout(() => { pausedRef.current = false; }, 2000); }; if (shown.length === 0) return null; return (
{[...shown, ...shown].map((photo, i) => (
{photo.alt} {photo.caption && (
{photo.caption}
)}
))}
); } Object.assign(window, { Logo, Arrow, Ticker, NavBar, Footer, PhotoSlider });