import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" const TIERS = ["S", "A", "B", "C", "D", "F"] const TIER_RANK = { S: 0, A: 1, B: 2, C: 3, D: 4, F: 5 } // bright price-sticker tiers — saturated fills on white, crisp black text const TIER_COLOR = { S: "bg-[#ff1e8e] text-white border-[#ff1e8e]", A: "bg-[#7ed321] text-[#0a0a0a] border-[#7ed321]", B: "bg-[#00b8d9] text-white border-[#00b8d9]", C: "bg-[#ff8a00] text-[#0a0a0a] border-[#ff8a00]", D: "bg-white text-[#ff1e8e] border-[#ff1e8e]", F: "bg-white text-[#9aa0a6] border-[#d0d3d7]", } // aisle order + display labels for grouping const AISLES = [ ["chips", "Chips"], ["candy", "Candy"], ["jerky", "Jerky & Meat"], ["hot-food", "Hot Food"], ["drink", "Drinks"], ["pastry", "Pastry & Sweet"], ["misc", "Misc"], ] const AISLE_LABEL = Object.fromEntries(AISLES.map(([k, v]) => [k, v])) const aisleColor = (cat) => { const map = { chips: "#ff8a00", candy: "#ff1e8e", jerky: "#b5651d", "hot-food": "#e23b2e", drink: "#00b8d9", pastry: "#a259ff", misc: "#7ed321", } return map[cat] || "#7ed321" } const SNACK_IMG = { "Flamin' Hot Cheetos": "flamin-hot-cheetos", "Doritos Nacho Cheese": "doritos-nacho", "Lays Classic": "lays-classic", "Funyuns": "funyuns", "Combos (Pizzeria Pretzel)": "combos", "Pringles": "pringles", "Snickers": "snickers", "Reese's Peanut Butter Cups": "reeses", "Skittles": "skittles", "Sour Patch Kids": "sour-patch-kids", "M&Ms Peanut": "mms-peanut", "Slim Jim": "slim-jim", "Beef Jerky": "beef-jerky", "Pepperoni Stick": "pepperoni-stick", "Beef & Cheese Stick": "beef-cheese-stick", "Roller-Grill Taquito": "taquito", "Hot Dog": "hot-dog", "Pizza Slice": "pizza-slice", "Fountain Icee": "icee", "Red Bull": "red-bull", "Gatorade": "gatorade", "Big Gulp": "big-gulp", "Arizona Iced Tea": "arizona", "Hostess Donettes": "donettes", "Honey Bun": "honey-bun", "Little Debbie": "little-debbie", "Sunflower Seeds": "sunflower-seeds", } function SnackImg({ snack, size }) { const [errored, setErrored] = React.useState(false) const slug = SNACK_IMG[snack.name] const px = `${size}px` if (!slug || errored) { return ( ) } return ( {snack.name}

setErrored(true)} className="object-cover shrink-0 rounded-md border border-black/10" style={{ width: px, height: px }} /> ) } function CatTag({ category }) { if (!category) return null return ( {AISLE_LABEL[category] || category} ) } function AddSnackForm({ database, can }) { const [name, setName] = React.useState("") const [adding, setAdding] = React.useState(false) const [last, setLast] = React.useState(null) async function handleAdd(e) { e.preventDefault() if (!name.trim()) return setAdding(true) try { const res = await callAI( `You are a road-trip snack expert. For this gas station snack, return a category and a one-line take, max 12 words. The category must be one of: chips, candy, jerky, hot-food, drink, pastry, misc. Snack: "${name}".`, { schema: { properties: { category: { type: "string" }, description: { type: "string" } } } } ) const { category, description } = JSON.parse(res) await database.put({ type: "snack", name: name.trim(), category, description, createdAt: Date.now() }) setLast({ name: name.trim(), category, description }) setName("") } finally { setAdding(false) } } if (!can("write")) return null return (

+ Missing a snack? Stock the shelf

) } export default function App() { const { viewer, can } = useViewer() const { database, useLiveQuery, useDocument } = useFireproof("gas-snack-v2") const { docs: snacks } = useLiveQuery("type", { key: "snack" }) const { docs: ballots } = useLiveQuery("type", { key: "ballot" }) React.useEffect(() => { if (snacks.length === 0) { const seeds = [ // Chips { name: "Flamin' Hot Cheetos", category: "chips", description: "Red dust on the steering wheel is a badge of honor." }, { name: "Doritos Nacho Cheese", category: "chips", description: "The triangle that built every road-trip backseat." }, { name: "Lays Classic", category: "chips", description: "No notes. Salt, crunch, the platonic chip." }, { name: "Funyuns", category: "chips", description: "Onion rings that gave up on being food. Iconic." }, { name: "Combos (Pizzeria Pretzel)", category: "chips", description: "Cheese that ate a pizza, stuffed in a pretzel. Genius." }, { name: "Pringles", category: "chips", description: "Stackable, hand-trapping, gone before exit 12." }, // Candy { name: "Snickers", category: "candy", description: "The only snack legally allowed to fix your mood." }, { name: "Reese's Peanut Butter Cups", category: "candy", description: "Two great tastes, one melted blob by mile 200." }, { name: "Skittles", category: "candy", description: "Taste the rainbow, find three under the seat later." }, { name: "Sour Patch Kids", category: "candy", description: "Sour, then sweet, then your tongue files a complaint." }, { name: "M&Ms Peanut", category: "candy", description: "The thinking driver's chocolate. Melts slower, lasts longer." }, // Jerky & Meat { name: "Slim Jim", category: "jerky", description: "Snap into a meat stick of mysterious, glorious origin." }, { name: "Beef Jerky", category: "jerky", description: "Protein that survives the apocalypse and the glovebox." }, { name: "Pepperoni Stick", category: "jerky", description: "A pizza topping that escaped and went solo. Respect." }, { name: "Beef & Cheese Stick", category: "jerky", description: "Surf and turf for the gas-station connoisseur." }, // Hot Food { name: "Roller-Grill Taquito", category: "hot-food", description: "Been spinning since dawn. Trust the heat lamp." }, { name: "Hot Dog", category: "hot-food", description: "Roller dog at 11pm is a lifestyle, not a meal." }, { name: "Pizza Slice", category: "hot-food", description: "Floppy, orange-greased, somehow exactly what you needed." }, // Drinks { name: "Fountain Icee", category: "drink", description: "Brain freeze in a souvenir cup. Cherry-cola swirl supremacy." }, { name: "Red Bull", category: "drink", description: "Wings, jitters, and the next 300 miles, sponsored." }, { name: "Gatorade", category: "drink", description: "Electrolytes for a workout you absolutely did not do." }, { name: "Big Gulp", category: "drink", description: "A bucket of soda with a lid. Hydration as spectacle." }, { name: "Arizona Iced Tea", category: "drink", description: "99 cents on the can, a sacred American constant." }, // Pastry & Sweet { name: "Hostess Donettes", category: "pastry", description: "Six tiny donuts, zero regret, all powdered fingerprints." }, { name: "Honey Bun", category: "pastry", description: "Glazed, warm from the rack, dangerously sticky. Worth it." }, { name: "Little Debbie", category: "pastry", description: "Lunchbox nostalgia, now fueling a 6-hour drive." }, // Misc { name: "Sunflower Seeds", category: "misc", description: "A salt-spitting endurance sport disguised as a snack." }, ] seeds.forEach(s => { database.put({ _id: `snack:${s.name}`, type: "snack", createdAt: Date.now(), ...s }) }) } }, [snacks.length]) const { doc: nameDoc, merge: mergeName } = useDocument({ _id: "my-name", name: "" }) const [tiers, setTiers] = React.useState({}) const [activeId, setActiveId] = React.useState(null) const [submitting, setSubmitting] = React.useState(false) const [submitted, setSubmitted] = React.useState(false) const resultsRef = React.useRef(null) const avgFor = (id) => { const vs = ballots.filter(b => b.tiers && b.tiers[id]) return vs.length ? vs.reduce((s, b) => s + TIER_RANK[b.tiers[id]], 0) / vs.length : null } const ranked = [...snacks].sort((a, b) => (avgFor(a._id) ?? 99) - (avgFor(b._id) ?? 99)) const totalBallots = ballots.length const placedCount = Object.keys(tiers).length // group unranked snacks by aisle for the "walk the aisles" feel const unranked = snacks.filter(a => !tiers[a._id]) const unrankedByAisle = AISLES .map(([key, label]) => [key, label, unranked.filter(a => (a.category || "misc") === key)]) .filter(([, , items]) => items.length > 0) const setTier = (id, t) => { setTiers(prev => ({ ...prev, [id]: t })); setActiveId(null) } const removeIt = (id) => setTiers(prev => { const n = { ...prev }; delete n[id]; return n }) const onDragStart = (e, id) => { e.dataTransfer.setData("text/plain", id); e.dataTransfer.effectAllowed = "move" } const onDropTier = (e, t) => { e.preventDefault(); const id = e.dataTransfer.getData("text/plain"); if (id) setTier(id, t) } const onDropPool = (e) => { e.preventDefault(); const id = e.dataTransfer.getData("text/plain"); if (id) removeIt(id) } const submit = async () => { setSubmitting(true) try { const voter = nameDoc.name.trim() || (viewer && (viewer.displayName || viewer.userSlug)) || "Anonymous" await database.put({ type: "ballot", voter, tiers, createdAt: Date.now() }) setSubmitted(true) setTimeout(() => { if (resultsRef.current) resultsRef.current.scrollIntoView({ behavior: "smooth", block: "start" }) }, 120) } finally { setSubmitting(false) } } return (

Open 24 Hours · Aisle Verdict

Best Gas
Station Snack

Slot the snacks into tiers from your own road-trip gut, lock it in. The register tallies the group’s verdict, live — settle the aisle with the whole crew.

{totalBallots} {totalBallots === 1 ? "ballot" : "ballots"} {snacks.length} snacks

{/* single-column flow: rank → add snack → results reveal right below */}

{!can("write") ? (

Read-only aisle — ask the owner for write access to cast a ballot. The group’s verdict is below.

) : (

{submitted ? "Your Ballot — edit anytime" : "Rank the snacks"}

{submitted && (

Ballot counted — change a pick and lock in again anytime.

)} {activeId && (

Slot {snacks.find(a => a._id === activeId)?.name} in:

{TIERS.map(t => ( ))}

)}

Walk the aisles — tap or drag a snack into a tier

e.preventDefault()} onDrop={onDropPool}> {unrankedByAisle.map(([key, label, items]) => (

{label}

{items.map(a => ( ))}

))} {unranked.length === 0 && All bagged — lock it in.}

{TIERS.map(tier => (

{tier}

e.preventDefault()} onDrop={e => onDropTier(e, tier)}> {snacks.filter(a => tiers[a._id] === tier).map(a => ( ))}

))}

mergeName({ name: e.target.value })} />

Rank as many or as few as you want — partial ballots count.

)} {/* results — same column, right below; auto-scrolled into view on submit */}

The Register’s Verdict {totalBallots > 0 && · {totalBallots} {totalBallots === 1 ? "ballot" : "ballots"}}

{i + 1}
{avgTier}

{al.name}

{al.description}

{mine && you: {mine}}
{votes.length} {votes.length === 1 ? "vote" : "votes"}
No snacks yet.

{totalBallots === 0 && snacks.length > 0 && (

No ballots yet. Rank a few above, lock in, then pass the link — the register moves as the crew votes.

)}

) }