import React from "react" import { useFireproof } from "use-fireproof" import { useViewer, ImgGen } 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 } const TIER_COLOR = { S: "bg-[#c1502e] text-[#f4ede0]", A: "bg-[#e8b23a] text-[#2b2118]", B: "bg-[#2a9d8f] text-[#f4ede0]", C: "bg-[#7a8b6f] text-[#2b2118]", D: "bg-[#8a7a66] text-[#f4ede0]", F: "bg-[#2b2118] text-[#f4ede0]", } const BUILD_TYPES = ["Minivan", "Three-Row SUV", "Convertible", "Economy Compact", "Full-Size Pickup", "EV Hatchback", "Sporty Sedan", "Cargo Van", "Jeep"] const BUILD_BRANDS = ["Toyota", "Honda", "Ford", "Chevrolet", "Jeep", "Tesla", "Kia", "Dodge", "Subaru"] const BUILD_COLORS = ["White", "Black", "Silver", "Red", "Blue", "Teal", "Mustard Yellow", "Forest Green"] function promptFor(color, brand, vtype) { return `a ${color} ${brand} ${vtype}, three-quarter front view, clean studio product photo, plain background` } function RideThumb({ ride, size }) { const px = size || 112 const [errored, setErrored] = React.useState(false) const [attempt, setAttempt] = React.useState(0) if (!ride.prompt) return const retry = (e) => { if (e) { e.preventDefault(); e.stopPropagation() } setErrored(false) setAttempt(a => a + 1) } return (

setErrored(true)} onComplete={() => setErrored(false)} /> {errored && ( )}

) } function Badge({ label, size }) { const px = size || 112 return (

) } function DeskSelect({ label, value, onChange, options }) { return ( {label}

) } function MadlibCarBuilder({ database, can }) { const [vtype, setVtype] = React.useState(BUILD_TYPES[0]) const [brand, setBrand] = React.useState(BUILD_BRANDS[0]) const [color, setColor] = React.useState(BUILD_COLORS[0]) const [building, setBuilding] = React.useState(false) const [last, setLast] = React.useState(null) const label = `${color} ${brand} ${vtype}` const prompt = promptFor(color, brand, vtype) async function handleBuild() { setBuilding(true) try { await database.put({ type: "ride", name: label, vtype, brand, color, prompt, createdAt: Date.now() }) setLast({ name: label, prompt }) } finally { setBuilding(false) } } if (!can("write")) return null return (

+ Madlib car builder — spec a ride, generate it onto the lot

Building: {label}

{last && (

{last.name}

On the lot — rate it on your ballot.

)}

) } export default function App() { const { viewer, can } = useViewer() const { database, useLiveQuery, useDocument } = useFireproof("rental-car-v2") const { docs: rides } = useLiveQuery("type", { key: "ride" }) const { docs: ballots } = useLiveQuery("type", { key: "ballot" }) React.useEffect(() => { if (rides.length === 0) { const seeds = [ { name: "Minivan", capacity: "7 seats + bags", description: "The ride nobody admits they want, until the third gas-station snack run.", prompt: promptFor("Silver", "Honda", "Minivan") }, { name: "Three-Row SUV", capacity: "7 seats, tight 3rd row", description: "Looks tough, third-row legroom is a cruel prank.", prompt: promptFor("Black", "Toyota", "Three-Row SUV") }, { name: "Convertible", capacity: "2 seats, zero luggage", description: "Great hair, no room for anyone's bag. Or anyone.", prompt: promptFor("Red", "Ford", "Convertible") }, { name: "Economy Compact", capacity: "4 seats, 2 small bags", description: "Cheap, cramped, four friends knee-to-knee for 300 miles.", prompt: promptFor("White", "Kia", "Economy Compact") }, { name: "Full-Size Pickup", capacity: "5 seats + open bed", description: "Toss everything in back, pray it doesn't rain.", prompt: promptFor("Blue", "Chevrolet", "Full-Size Pickup") }, { name: "EV (Electric)", capacity: "5 seats + frunk", description: "You'll spend the whole trip planning the next charging stop.", prompt: promptFor("White", "Tesla", "EV Hatchback") }, { name: "Sporty Sedan", capacity: "4 seats, smallish trunk", description: "Fun to drive, terrible at being five people deep.", prompt: promptFor("Forest Green", "Subaru", "Sporty Sedan") }, ] seeds.forEach(s => { database.put({ _id: `ride:${s.name}`, type: "ride", createdAt: Date.now(), ...s }) }) } }, [rides.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 = [...rides].sort((a, b) => (avgFor(a._id) ?? 99) - (avgFor(b._id) ?? 99)) const totalBallots = ballots.length const placedCount = Object.keys(tiers).length const setTier = (id, t) => { setTiers(prev => ({ ...prev, [id]: t })); setActiveId(null) } const benchIt = (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 onDropBench = (e) => { e.preventDefault(); const id = e.dataTransfer.getData("text/plain"); if (id) benchIt(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 (

MILES
000000

Group Trip Rental Desk · Agreement No. 1

Best Rental Car
For a Friends Trip

Six of you, one lot, a lot of opinions. Everyone files a ballot, the counter crowns the group’s pick. Settle it before you get to the counter.

{totalBallots} {totalBallots === 1 ? "ballot" : "ballots"} {rides.length} rides on the lot

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

{!can("write") ? (

Read-only lot — ask the agent for write access to file a ballot. The crew’s verdict is below.

) : (

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

{submitted && (

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

)} {activeId && (

Rate the {rides.find(a => a._id === activeId)?.name}:

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

)}

On the lot — tap or drag a ride into a tier

e.preventDefault()} onDrop={onDropBench}> {rides.filter(a => !tiers[a._id]).map(a => ( ))} {rides.filter(a => !tiers[a._id]).length === 0 && All rated — sign it off.}

{TIERS.map(tier => (

{tier}

e.preventDefault()} onDrop={e => onDropTier(e, tier)}> {rides.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 Crew’s Verdict {totalBallots > 0 && · {totalBallots} {totalBallots === 1 ? "ballot" : "ballots"}}

{i + 1}
{avgTier}

{al.name}

{al.capacity}{al.description ? ` · ${al.description}` : ""}

{mine && you: {mine}}
{votes.length} {votes.length === 1 ? "vote" : "votes"}
No rides on the lot yet — build one above.

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

No ballots filed yet. File yours, then pass the link — the counter moves as the crew votes.

)}

) }