import React, { useState, useEffect } from "react" import { useFireproof } from "use-fireproof" const SEATS = ["E", "S", "W", "N"] const WIND_NAMES = { E: "East", S: "South", W: "West", N: "North" } const c = { page: "min-h-screen bg-[oklch(0.96_0.01_90)] p-4 font-['Space_Grotesk',sans-serif] text-[oklch(0.15_0.02_280)]", wrap: "max-w-3xl mx-auto", card: "bg-white border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] shadow-[4px_4px_0px_oklch(0.15_0.02_280)] p-4 mb-4", h1: "text-3xl font-bold uppercase tracking-tight mb-1", label: "text-[0.65rem] uppercase tracking-[0.15em] text-[oklch(0.50_0.02_280)] font-semibold", btn: "px-3 py-2 border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] font-semibold uppercase text-[0.75rem] tracking-[0.05em] bg-white shadow-[3px_3px_0px_oklch(0.15_0.02_280)] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all", btnRed: "bg-[oklch(0.55_0.24_28)] text-white", btnYel: "bg-[oklch(0.85_0.18_85)]", btnGrn: "bg-[oklch(0.62_0.19_145)]", btnBlu: "bg-[oklch(0.52_0.18_255)] text-white", input: "w-full px-2 py-1.5 border-[3px] border-[oklch(0.15_0.02_280)] rounded-[4px] bg-white font-semibold focus:outline-none focus:translate-x-[-2px] focus:translate-y-[-2px] focus:shadow-[3px_3px_0px_oklch(0.15_0.02_280)] transition-all", mono: "font-['JetBrains_Mono',monospace]", } const SEAT_COLORS = { E: "bg-[oklch(0.55_0.24_28)] text-white", S: "bg-[oklch(0.85_0.18_85)]", W: "bg-[oklch(0.52_0.18_255)] text-white", N: "bg-[oklch(0.62_0.19_145)]", } // Faan -> base points (simple doubling table, capped) function faanToBase(faan) { const f = Math.max(0, Math.min(13, parseInt(faan) || 0)) if (f < 3) return f + 1 return Math.min(96, Math.pow(2, f - 2) * 2) } function computeDeltas(hand, eastSeat, eastDouble) { const { winner, loser, faan, selfDraw } = hand const deltas = { E: 0, S: 0, W: 0, N: 0 } if (winner === "draw") return deltas const base = faanToBase(faan) const mult = (s) => (eastDouble && s === eastSeat ? 2 : 1) if (selfDraw) { // each of 3 losers pays base * their-mult (or winner-mult if winner is east) let winTotal = 0 SEATS.forEach((s) => { if (s === winner) return const pay = base * Math.max(mult(winner), mult(s)) deltas[s] -= pay winTotal += pay }) deltas[winner] = winTotal } else { // discarder pays full (tripled) const pay = base * 3 * Math.max(mult(winner), mult(loser)) deltas[loser] -= pay deltas[winner] = pay } return deltas } // Dealer rotation: East stays on East win; otherwise rotates E->S->W->N function computeSessionState(hands) { let eastIdx = 0 // index into SEATS for current east let roundWind = 0 // 0=E,1=S,2=W,3=N let handInRound = 0 for (const h of hands) { const eastSeat = SEATS[eastIdx] if (h.winner !== eastSeat) { eastIdx = (eastIdx + 1) % 4 handInRound++ if (handInRound >= 4) { handInRound = 0 roundWind = (roundWind + 1) % 4 } } } return { eastSeat: SEATS[eastIdx], prevailingWind: SEATS[roundWind] } } function loadLocal(key, fallback) { try { const v = localStorage.getItem(key) return v ? JSON.parse(v) : fallback } catch { return fallback } } function Scoreboard({ names, totals, eastSeat, prevailingWind }) { return (

Prevailing Wind

{WIND_NAMES[prevailingWind]}

Dealer (East)

{names[eastSeat] || WIND_NAMES[eastSeat]}

{SEATS.map((s) => { const isEast = s === eastSeat return (

{WIND_NAMES[s]}

{isEast &&

Dealer

}

{names[s] || "—"}

{totals[s] >= 0 ? "+" : ""}{totals[s]}

) })}

) } function NameSetup({ names, setNames, eastDouble, setEastDouble }) { const [open, setOpen] = useState(false) return (

{open && (

{SEATS.map((s) => (

{s}

setNames({ ...names, [s]: e.target.value })} placeholder={WIND_NAMES[s]} />

))} setEastDouble(e.target.checked)} className="w-5 h-5 accent-[oklch(0.62_0.19_145)]" /> East doubled (wins/pays 2×)

)}

) } function HandEntry({ names, eastSeat, onSubmit }) { const [winner, setWinner] = useState("E") const [faan, setFaan] = useState(3) const [selfDraw, setSelfDraw] = useState(false) const [loser, setLoser] = useState("S") function submit() { if (winner !== "draw") { if (!selfDraw && loser === winner) { alert("Discarder can't be the winner") return } } onSubmit({ winner, loser: winner === "draw" ? null : (selfDraw ? null : loser), selfDraw: winner !== "draw" && selfDraw, faan: winner === "draw" ? 0 : faan, ts: Date.now(), eastSeat, }) } return (

New Hand

Winner

{SEATS.map((s) => ( ))}

{winner !== "draw" && ( <>

Faan / Han

{faan}

= {faanToBase(faan)} base

Settlement

{!selfDraw && ( <>

Discarder

{SEATS.filter((s) => s !== winner).map((s) => ( ))}

)} )}

) } function HandLog({ hands, names, eastDouble, onDelete }) { if (hands.length === 0) return null return (

Hand Log

{[...hands].reverse().map((h, idx) => { const deltas = computeDeltas(h, h.eastSeat, eastDouble) const when = new Date(h.ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) return (

#{hands.length - idx} {when} {h.winner === "draw" ? "Draw" : `${names[h.winner] || h.winner} wins ${h.faan}faan ${h.selfDraw ? "(self)" : `off ${names[h.loser] || h.loser}`}`}

{SEATS.map((s) => (

0 ? "bg-[oklch(0.62_0.19_145)]" : deltas[s] < 0 ? "bg-[oklch(0.55_0.24_28)] text-white" : "bg-[oklch(0.96_0.01_90)]"}`}> {s}:{deltas[s] >= 0 ? "+" : ""}{deltas[s]}

))}

) })}

) } export default function App() { const { database, useLiveQuery } = useFireproof("mahjong-session-v1") const { docs: hands } = useLiveQuery("ts", { descending: false }) const [names, setNames] = useState(() => loadLocal("mj-names", { E: "", S: "", W: "", N: "" })) const [eastDouble, setEastDouble] = useState(() => loadLocal("mj-eastDouble", true)) useEffect(() => { localStorage.setItem("mj-names", JSON.stringify(names)) }, [names]) useEffect(() => { localStorage.setItem("mj-eastDouble", JSON.stringify(eastDouble)) }, [eastDouble]) const handDocs = hands.filter((d) => d.type === "hand") const { eastSeat, prevailingWind } = computeSessionState(handDocs) const totals = { E: 0, S: 0, W: 0, N: 0 } handDocs.forEach((h) => { const d = computeDeltas(h, h.eastSeat, eastDouble) SEATS.forEach((s) => { totals[s] += d[s] }) }) async function addHand(h) { await database.put({ type: "hand", ...h }) } async function delHand(id) { await database.del(id) } async function resetSession() { if (!confirm("Clear all hands?")) return for (const h of handDocs) await database.del(h._id) } return (

Mahjong Scoresheet

{handDocs.length} hand{handDocs.length === 1 ? "" : "s"} played · live sync

{handDocs.length > 0 && ( )}

) }