/* global React */ /* ============================================================ WV Smokehouse — Hero Three lit vignettes you swipe between. [Stage] [Tap*] [Pit] *center, shown first ============================================================ */ const { useState, useEffect, useRef, useCallback } = React; /* ---------- Scene 1: STAGE (left) ---------- */ function StageScene(){ return ( ); } /* ---------- Scene 2: TAP (center) ---------- */ function TapScene(){ return ( ); } /* ---------- Scene 3: PIT (right) ---------- */ function PitScene(){ return ( ); } /* small smoke-wisp glyph for menu smoke-time chips */ function SmokeWisp(){ return ( ); } /* ---------- Per-scene ambient life (gated to the active scene) ---------- */ function SceneFX({ kind }){ const bits = React.useMemo(() => { const rnd = (a, b) => a + Math.random() * (b - a); if (kind === 'motes'){ // dust catching the bar light + the Edison bulbs flickering return { glows: [ { left: 4, top: 30, w: 90, color: 'rgba(255,196,110,.9)', dur: 5.5, delay: 0, flicker: true }, { left: 17, top: 35, w: 70, color: 'rgba(255,188,104,.85)',dur: 4.2, delay: -1.5, flicker: true }, { left: 35, top: 41, w: 60, color: 'rgba(255,184,100,.8)', dur: 6, delay: -2.5, flicker: true }, { left: 78, top: 45, w: 110, color: 'rgba(255,190,108,.85)',dur: 6.5, delay: -0.8, flicker: true }, { left: 63, top: 53, w: 64, color: 'rgba(255,182,98,.8)', dur: 5, delay: -3, flicker: true }, { left: 92, top: 56, w: 70, color: 'rgba(255,186,102,.75)',dur: 7, delay: -1.2, flicker: true }, ], motes: Array.from({ length: 40 }).map(() => ({ left: rnd(2, 78), top: rnd(26, 92), size: rnd(2, 6.5), dur: rnd(7, 14), delay: rnd(-14, 0), drift: rnd(-40, 34), rise: rnd(90, 200), op: rnd(.5, 1), })), }; } if (kind === 'lights'){ // strong stage wash + heavy beam dust + glints + the spotlight + lanterns return { glows: [ { left: 22, top: 13, w: 150, color: 'rgba(255,200,120,.85)', dur: 5, delay: 0, flicker: false }, { left: 86, top: 40, w: 70, color: 'rgba(255,180,96,.8)', dur: 3.6, delay: -1, flicker: true }, { left: 78, top: 62, w: 56, color: 'rgba(255,176,92,.8)', dur: 4.4, delay: -2, flicker: true }, { left: 77, top: 84, w: 48, color: 'rgba(255,182,98,.85)', dur: 3, delay: -0.7, flicker: true }, ], beam: Array.from({ length: 30 }).map(() => ({ left: rnd(14, 52), top: rnd(6, 80), size: rnd(2, 5.5), dur: rnd(6, 12), delay: rnd(-12, 0), drift: rnd(-22, 26), rise: rnd(-70, 90), op: rnd(.55, 1), })), glints: Array.from({ length: 5 }).map(() => ({ left: rnd(20, 46), top: rnd(20, 64), size: rnd(3, 6), dur: rnd(2.4, 4.5), delay: rnd(-4, 0), })), }; } if (kind === 'embers'){ // flickering firebox + string lights + fireflies + rising embers + smoke wisps return { glows: [ { left: 73, top: 90.5, w: 120, color: 'rgba(255,128,44,.95)', dur: 2.4, delay: 0, flicker: true }, { left: 84, top: 40, w: 80, color: 'rgba(255,186,104,.8)', dur: 5, delay: -1, flicker: false }, { left: 40, top: 62, w: 30, color: 'rgba(255,200,120,.9)', dur: 3, delay: -0.5, flicker: true }, { left: 47, top: 60, w: 26, color: 'rgba(255,200,120,.9)', dur: 2.6, delay: -1.4, flicker: true }, { left: 54, top: 62, w: 30, color: 'rgba(255,200,120,.9)', dur: 3.4, delay: -2, flicker: true }, { left: 33, top: 63, w: 24, color: 'rgba(255,200,120,.85)',dur: 2.8, delay: -0.9, flicker: true }, { left: 60, top: 61, w: 24, color: 'rgba(255,200,120,.85)',dur: 3.2, delay: -2.6, flicker: true }, ], // fireflies drift across the whole scene, not just by the fire flies: Array.from({ length: 30 }).map(() => ({ left: rnd(5, 95), top: rnd(18, 92), size: rnd(2.5, 5.5), fly: rnd(4, 9), flick: rnd(1.8, 4), delay: rnd(-9, 0), dx: rnd(-50, 50), dy: rnd(-44, 18), })), // rising embers off the (now lower, smaller) firebox sparks: Array.from({ length: 18 }).map(() => ({ left: rnd(69, 79), top: rnd(85, 94), size: rnd(2, 4.5), dur: rnd(3.2, 6), delay: rnd(-6, 0), drift: rnd(-22, 26), rise: rnd(110, 220), })), // smoke only rises from the chimney mouth, straight up wisps: Array.from({ length: 6 }).map((_, i) => ({ left: rnd(64, 69), top: rnd(36, 42), w: rnd(40, 64), dur: rnd(7, 12), delay: rnd(-10, 0) - i * 1.6, })), }; } return {}; }, [kind]); const renderGlows = (glows) => (glows || []).map((g, i) => ( )); if (kind === 'motes'){ return ( ); } if (kind === 'lights'){ return ( ); } if (kind === 'embers'){ return ( ); } return null; } /* ---------- The Hero proper ---------- */ function Hero(){ const SCENES = [ { key:'stage', label:"Who's on the Stage", Scene: StageScene, photo: 'assets/scene-stage.png', pos: '50% 42%', fx: 'lights', line:"Live music, paint nights, car meets, bike nights, and more.", kind:'lineup', placeholder:true, rows:[ { a:'Fri', b:'Live Music' }, { a:'Sat', b:'Paint Night' }, { a:'Sun', b:'Car Meet & Bike Night' }, ], foot:'A sample week — the owner keeps the calendar current.', }, { key:'tap', label:"What's on Tap", Scene: TapScene, photo: 'assets/scene-tap.png', pos: '50% 60%', fx: 'motes', line:"12 taps of Oregon craft beer and cider, plus local wines.", kind:'taps', rows:[ { a:'Featured', b:'Two Towns — Raspberry Cosmic Crisp', hot:true }, { a:'On the board', b:'Oregon IPAs, cream ales & ciders' }, { a:'For the table', b:'A popular pour of local wines' }, ], foot:'12 taps · rotating · full board posted in-house.', }, { key:'pit', label:"What's on the Menu", Scene: PitScene, photo: 'assets/scene-pit.png', pos: '50% 58%', fx: 'embers', line:"Smoked low and slow over locally sourced White Oak.", kind:'menu', rows:[ { a:'Smoked Brisket', smoke:'17 hrs', b:'$22', hot:true }, { a:'Pulled Pork', smoke:'14 hrs', b:'$18' }, { a:'Pork Rib Platter', smoke:'8 hrs', b:'$24' }, { a:'Smoked Tri-Tip', smoke:'6 hrs', b:'$22' }, ], foot:'All of it over locally sourced White Oak.', }, ]; const [active, setActive] = useState(1); // center scene first const [drag, setDrag] = useState(0); const dragging = useRef(false); const startX = useRef(0); const startActive = useRef(1); const stageRef = useRef(null); const [vw, setVw] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200); useEffect(() => { const onResize = () => setVw(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); const goTo = useCallback((i) => { const n = SCENES.length; setActive(((i % n) + n) % n); // wrap-around: no dead-end / un-swipable direction }, []); useEffect(() => { const onKey = (e) => { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; if (e.key === 'ArrowLeft') goTo(active - 1); if (e.key === 'ArrowRight') goTo(active + 1); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [active, goTo]); const onPointerDown = (e) => { if (e.target.closest('button, a, input, textarea, select')) return; dragging.current = true; startX.current = e.clientX; startActive.current = active; e.currentTarget.setPointerCapture?.(e.pointerId); }; const onPointerMove = (e) => { if (!dragging.current) return; const dx = e.clientX - startX.current; setDrag(dx); }; const onPointerUp = (e) => { if (!dragging.current) return; dragging.current = false; const w = stageRef.current?.offsetWidth || vw; const threshold = Math.max(30, Math.min(55, w * 0.08)); // easier to trigger let next = startActive.current; if (drag <= -threshold) next = startActive.current + 1; else if (drag >= threshold) next = startActive.current - 1; setDrag(0); goTo(next); }; const w = stageRef.current?.offsetWidth || vw; const trackX = -active * w + drag; const scene = SCENES[active]; return (
); } window.Hero = Hero;