// sections.jsx — feature sections + footer const { useRef: useRefS, useEffect: useEffectS, useState: useStateS } = React; /* ---- section: the three gesture demos ---- */ function GestureSection() { return (
No typing — just gestures

Three ways to add a point.

Pick the gesture that fits your game. Every one keeps your hands on the screen and your eyes on the table.{" "} Try them — they're live.

↑ Tap, swipe, and spin the cards above

); } /* ---- big statement band: no number typing ---- */ function NoTypingBand() { return (
No number typing

Zero
keyboards.

Pop-up keypads slow the whole game down. Scorepad replaces every one of them with a gesture, so scoring takes a single motion — even mid-conversation.

  • Big, glanceable totals from across the table
  • Undo any change without retyping
  • Stays out of the way until you need it
); } /* ---- wheel picker (mirrors the app's AddendModal wheel pickers) ---- */ function WheelPicker({ values, initial, onSelect }) { const ref = useRefS(null); const ITEM = 46; const [sel, setSel] = useStateS(initial); useEffectS(() => { const el = ref.current; if (!el) return; const target = Math.max(0, values.indexOf(initial)) * ITEM; const set = () => { el.style.scrollSnapType = "none"; el.scrollTop = target; requestAnimationFrame(() => { el.style.scrollSnapType = "y mandatory"; }); }; const io = new IntersectionObserver( (ents) => { ents.forEach((e) => { if (e.isIntersecting) { set(); io.unobserve(el); } }); }, { threshold: 0.4 }, ); io.observe(el); return () => io.disconnect(); }, []); const onScroll = () => { const idx = Math.round(ref.current.scrollTop / ITEM); const v = values[Math.max(0, Math.min(values.length - 1, idx))]; if (v !== sel) { setSel(v); onSelect && onSelect(v); try { navigator.vibrate && navigator.vibrate(5); } catch (e) { } } }; return (
{values.map((v) => (
{v}
))}
); } /* ---- feature: point values (resembles AddendModal) ---- */ function PointValuesFeature() { const [mode, setMode] = useStateS("tap"); const labels = { tap: ["Tap", "Hold"], swipe: ["Swipe", "Hold + Swipe"], dial: ["Spin", "Hold + Spin"], }; const nums = Array.from({ length: 30 }, (_, i) => i + 1); const [base, hold] = labels[mode]; return (
Custom point values

One value to tap,
another to hold.

Every gesture carries two point values. A quick tap, swipe, or dial-turn adds the base amount; hold first to add the bigger one — so a +1 game and a +25 game use the exact same moves.

{["tap", "swipe", "dial"].map((m) => ( ))}
Point Values
{base}
{hold}
); } /* ---- feature: score history, inspired by the app's Rounds Table ---- */ function HistoryFeature() { const players = [ { name: "Summer", total: 47, color: "var(--pc-yellow)" }, { name: "Morty", total: 93, color: "var(--pc-blue)" }, { name: "Beth", total: 61, color: "var(--pc-red)" }, ]; const rounds = [ { r: 16, v: [2, 8, 5], live: true }, { r: 15, v: [11, 3, 9] }, { r: 14, v: [5, 9, 7] }, { r: 13, v: [7, 1, 12] }, { r: 12, v: [9, 14, 4] }, ]; return (
RD {players.map((p) => ( {p.name} ))}
∑ {players.map((p) => ( {p.total} ))}
{rounds.map((o) => (
{o.r} {o.v.map((n, i) => ( +{n} ))}
))}
Round-by-round history

The whole game, in one grid.

Every round for every player lands in a running table you can scroll back through — settle a dispute, spot a comeback, or jump to any round to fix a score.

); } /* ---- feature: multiple games ---- */ function GamesFeature() { const games = [ { name: "Smith Family Rummy", players: 4, rounds: 16, live: true, color: "var(--pc-yellow)", }, { name: "Friday Cribbage", players: 2, rounds: 9, color: "var(--pc-green)", }, { name: "Catan Night", players: 5, rounds: 1, color: "var(--pc-orange)" }, ]; return (
Unlimited games

Keep every game going.

Run as many games as you like, side by side. Jump back into last week's tournament or start a fresh table in seconds — nothing gets lost.

{games.map((g, i) => (
{g.name}
{g.players} players · {g.rounds}{" "} {g.rounds === 1 ? "round" : "rounds"}
{g.live ? ( In play ) : ( › )}
))}
); } /* ---- final CTA ---- */ function FinalCTA() { return (
Scorepad app icon

Score your next
game with a flick.

Free to play. No account needed. Works offline, on every device.

Scorepad is free & open source. If it's made your game nights easier, a coffee goes a long way. ☕

Buy me a coffee
); } /* ---- footer ---- */ function Footer() { return ( ); } function Wordmark() { return ( Scorepad with rounds app icon Scorepad with rounds ); } Object.assign(window, { GestureSection, NoTypingBand, PointValuesFeature, HistoryFeature, GamesFeature, FinalCTA, Footer, Wordmark, });