(() => generateSeed());
+
+ const filledNames = useMemo(
+ () => names.map((n) => n.trim()).filter((n) => n.length > 0),
+ [names],
+ );
+ const canStart = filledNames.length >= MIN_PLAYERS;
+
+ const validationId = useId();
+
+ const updateName = (index: number, value: string) => {
+ setNames((prev) => {
+ const next = prev.slice();
+ next[index] = value;
+ return next;
+ });
+ };
+
+ const handleRemovePlayer4 = () => updateName(3, "");
+
+ const handleRandomize = () => {
+ setSeed(generateSeed());
+ };
+
+ const handleStart = () => {
+ if (!canStart) return;
+ onStart({ players: filledNames.slice(0, MAX_PLAYERS), seed });
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ Who's playing?
+
+
+
+ {names.map((value, idx) => (
+
updateName(idx, v)}
+ onRemove={idx === 3 ? handleRemovePlayer4 : undefined}
+ />
+ ))}
+
+
+ Enter at least 3 names to start
+
+
+
+
+
+
+ onChange(e.target.value)}
+ placeholder="Enter name"
+ className="w-full max-w-[480px] h-14 px-4 outline-none"
+ style={{
+ background: "var(--color-surface-low)",
+ border: "1px solid var(--color-outline-variant)",
+ borderRadius: "var(--radius-md)",
+ color: "var(--color-ink)",
+ fontFamily: "var(--font-body)",
+ fontSize: "16px",
+ }}
+ onFocus={(e) => {
+ e.currentTarget.style.borderColor = "var(--color-legal)";
+ e.currentTarget.style.boxShadow = "0 0 0 1px var(--color-legal)";
+ }}
+ onBlur={(e) => {
+ e.currentTarget.style.borderColor = "var(--color-outline-variant)";
+ e.currentTarget.style.boxShadow = "none";
+ }}
+ />
+ {onRemove ? (
+
+ ) : null}
+
+ );
+}
+
+interface AdvancedDisclosureProps {
+ open: boolean;
+ onToggle: () => void;
+ seed: number;
+ onRandomize: () => void;
+}
+
+function AdvancedDisclosure({
+ open,
+ onToggle,
+ seed,
+ onRandomize,
+}: AdvancedDisclosureProps) {
+ const seedHex = `0x${seed.toString(16).padStart(8, "0")}`;
+ const panelId = useId();
+ return (
+
+
+ {open ? (
+
+
+ RNG Seed
+
+
+ {seedHex}
+
+
+
+ ) : null}
+