);
}
// ===== Form panel (ink-wash background, contains both input + send tile) =====
function FormPanel({
open,
onSubmitEmail,
onSubmitGoogle,
submitted,
email,
setEmail,
valid,
setValid,
submitting,
errorMsg,
googleClientId,
}) {
const inputRef = useRef(null);
const googleSlotRef = useRef(null);
useEffect(() => {
if (open && inputRef.current && !submitted) {
const t = setTimeout(() => inputRef.current && inputRef.current.focus(), 380);
return () => clearTimeout(t);
}
}, [open, submitted]);
// Render the Google Identity button when the form opens and we have a client ID.
useEffect(() => {
if (!open || submitted || !googleClientId || !googleSlotRef.current) return;
let cancelled = false;
whenGoogleReady(() => {
if (cancelled || !googleSlotRef.current) return;
try {
google.accounts.id.initialize({
client_id: googleClientId,
callback: (response) => {
if (response && response.credential) onSubmitGoogle(response.credential);
},
ux_mode: "popup",
auto_select: false,
});
googleSlotRef.current.innerHTML = "";
google.accounts.id.renderButton(googleSlotRef.current, {
theme: "filled_black",
size: "large",
shape: "pill",
text: "signin_with",
logo_alignment: "left",
width: 280,
});
} catch {
/* GIS not ready or already initialized — silently ignore */
}
});
return () => { cancelled = true; };
}, [open, submitted, googleClientId, onSubmitGoogle]);
function handle(e) {
e.preventDefault();
if (submitting || submitted) return;
const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
setValid(ok);
if (ok) onSubmitEmail(email);
}
const helperText = submitted
? null
: errorMsg
? errorMsg
: !valid
? "A working address, please."
: "One letter at the start. Quiet seasonal updates after.";
const helperColor = errorMsg || !valid ? "#d99b8a" : "rgba(240,230,207,0.5)";
return (
Address · 信
{helperText}
{!submitted && googleClientId ? (
<>
or
) : null}
);
}
// ===== Send tile (smaller companion tile, flips on submit) =====
function SubmitTile({ flipped, disabled }) {
return (
);
}
// ===== Confirmation line =====
function Confirmation({ visible, email, wallNumber }) {
const ordinal = (n) => {
const s = ["th", "st", "nd", "rd"];
const v = n % 100;
return n + (s[(v - 20) % 10] || s[v] || s[0]);
};
return (
Your name is recorded as the{" "}
{wallNumber ? ordinal(wallNumber) : "—"}
{" "}
tile in the wall.
We will write to {email ? {email} : "you"} at the next tile-making.
);
}
// ===== App =====
function App() {
const [phase, setPhase] = useState("pre");
const [formOpen, setFormOpen] = useState(false);
const [submitted, setSubmitted] = useState(false);
const [submittedEmail, setSubmittedEmail] = useState("");
const [wallNumber, setWallNumber] = useState(null);
const [email, setEmail] = useState("");
const [valid, setValid] = useState(true);
const [submitting, setSubmitting] = useState(false);
const [errorMsg, setErrorMsg] = useState("");
const [googleClientId, setGoogleClientId] = useState("");
// Load public Google client ID once on mount
useEffect(() => {
let alive = true;
fetch("/api/config")
.then((r) => r.ok ? r.json() : null)
.then((d) => { if (alive && d && d.googleClientId) setGoogleClientId(d.googleClientId); })
.catch(() => { /* offline / not deployed yet — Google button just won't render */ });
return () => { alive = false; };
}, []);
const stageWrapRef = useRef(null);
const ctaRef = useRef(null);
const [settle, setSettle] = useState({ y: 0, scale: 0.22 });
useLayoutEffect(() => {
function measure() {
if (!stageWrapRef.current || !ctaRef.current) return;
const s = stageWrapRef.current.getBoundingClientRect();
const c = ctaRef.current.getBoundingClientRect();
// CTA emblem slot center is ~ (left + width/2, top + 22 + 58)
const slotCY = c.top + 22 + 58;
const slotCX = c.left + c.width / 2;
const stageCY = s.top + s.height / 2;
const stageCX = s.left + s.width / 2;
// We want the (full-stage) logo to fit a 116px box. Stage current width ≈ s.width.
// Logo emblem occupies roughly the bottom 2/3 of the stage at y ~ 612/1274 ≈ 0.48
const stageWidthPx = s.width;
const targetWidthPx = 116;
// The full logo (with text) is wider than the bare emblem; scale so emblem at viewBox center matches slot
// Visually: target scale that maps the emblem's apparent width (~ 0.78 * stageWidth) to 116
const scale = targetWidthPx / (stageWidthPx * 0.78);
// Y offset: distance from stage center to slot center, in unscaled px
const y = slotCY - stageCY;
// Slight x offset typically 0 (centered)
void slotCX; void stageCX;
setSettle({ y, scale });
}
measure();
const t1 = setTimeout(measure, 100);
const t2 = setTimeout(measure, 400);
window.addEventListener("resize", measure);
return () => {
clearTimeout(t1); clearTimeout(t2);
window.removeEventListener("resize", measure);
};
}, []);
function runTimeline() {
const timers = [];
timers.push(setTimeout(() => setPhase("tiles"), 80));
timers.push(setTimeout(() => setPhase("stroking"), 1000));
timers.push(setTimeout(() => setPhase("inked"), 2050));
timers.push(setTimeout(() => setPhase("settled"), 2750));
return timers;
}
useEffect(() => {
const timers = runTimeline();
return () => timers.forEach(clearTimeout);
}, []);
function replay() {
setPhase("pre");
setFormOpen(false);
setSubmitted(false);
setSubmittedEmail("");
setEmail("");
setValid(true);
setSubmitting(false);
setErrorMsg("");
setWallNumber(null);
setTimeout(() => { runTimeline(); }, 60);
}
async function submitWith(body) {
if (submitting) return;
setSubmitting(true);
setErrorMsg("");
try {
const data = await postSignup(body);
setSubmittedEmail(data.email || body.email || "");
setWallNumber(data.wallNumber || null);
setSubmitted(true);
} catch (err) {
setErrorMsg(err.message || "Something went wrong. Please try again.");
} finally {
setSubmitting(false);
}
}
function handleEmailSubmit(submittedAddr) {
submitWith({ email: submittedAddr });
}
function handleGoogleSubmit(credential) {
submitWith({ credential });
}
// Map app phase -> SVG draw state for the HERO logo
const heroSvgState =
phase === "stroking" ? "stroking"
: phase === "inked" || phase === "settled" ? "inked"
: "hidden";
return (
{/* Headline */}
Every set tells a story.
Every table{" "}
builds a community
.
{/* MAHJ / knot / UNITED — the page's visual anchor; stays put after intro */}
{/* Divider rule */}
{/* Coming-soon mark */}
Coming Soon
即將開幕
{/* Hand-stamped chop seal */}
聚
{/* CTA + form */}
setFormOpen(true)} tileRef={ctaRef} />
{/* Replay link */}