ttrpg-tools/src/components/journal/ConnectDialog.tsx

/**
 * ConnectDialog — name + role picker to join a session
 */
import { Component, createSignal, onMount, Show } from "solid-js";
import {
  connectStream,
  hydrateFromServer,
  useJournalStream,
  setMyName,
  setMyRole,
  setSessionId,
} from "../stores/journalStream";

export const ConnectDialog: Component = () => {
  const stream = useJournalStream();
  const [playerName, setPlayerName] = createSignal(stream.myName);
  const [role, setRole] = createSignal<"gm" | "player" | "observer">(
    stream.myRole,
  );
  const [connecting, setConnecting] = createSignal(false);
  const [error, setError] = createSignal<string | null>(null);
  const [autoJoined, setAutoJoined] = createSignal(false);

  // Auto-join when URL has both session and player params
  onMount(() => {
    const params = new URL(window.location.href).searchParams;
    if (
      params.has("session") &&
      params.has("player") &&
      params.has("autojoin")
    ) {
      setPlayerName(params.get("player") || "");
      setRole("player");
      setAutoJoined(true);
      handleConnect();
    }
  });

  const handleConnect = async () => {
    const name = playerName().trim() || stream.myName;
    if (!name) return;

    // In dev, the MQTT broker lives on the CLI server (port 3000), not the
    // rsbuild dev server. In production, the CLI serves everything itself.
    const brokerUrl =
      process.env.NODE_ENV === "development"
        ? `ws://localhost:3000`
        : `ws://${window.location.host}`;

    setConnecting(true);
    setError(null);

    try {
      setMyName(name);
      setMyRole(role());
      const sessionId = stream.sessionId || "default";
      setSessionId(sessionId);
      await hydrateFromServer(sessionId);
      await connectStream(sessionId, brokerUrl);
    } catch (e) {
      const msg = e instanceof Error ? e.message : "Connection failed";
      setError(msg);
    } finally {
      setConnecting(false);
    }
  };

  return (
    <Show
      when={!autoJoined() || error()}
      fallback={
        <p class="text-sm text-gray-500 text-center">
          {connecting() ? "正在加入会话…" : "已加入！"}
        </p>
      }
    >
      <div class="w-full max-w-sm space-y-3">
        <p class="text-sm text-gray-600 text-center">
          请输入你的名字和角色来加入会话。
          <br />
          <span class="text-xs text-gray-400">
            连接到 {window.location.host}
          </span>
        </p>
        <input
          type="text"
          value={playerName()}
          onInput={(e) => setPlayerName(e.currentTarget.value)}
          onKeyDown={(e) => e.key === "Enter" && handleConnect()}
          placeholder="你的名字"
          class="w-full border border-gray-300 rounded px-3 py-1.5 text-sm"
          autofocus
        />
        {/* Role selector */}
        <div class="flex gap-1">
          {(["gm", "player", "observer"] as const).map((r) => (
            <button
              onClick={() => setRole(r)}
              class={`flex-1 rounded px-2 py-1.5 text-xs font-medium border transition-colors ${
                role() === r
                  ? "bg-blue-600 text-white border-blue-600"
                  : "bg-white text-gray-600 border-gray-300 hover:border-gray-400"
              }`}
            >
              {r === "gm" ? "主持人" : r === "player" ? "玩家" : "观察者"}
            </button>
          ))}
        </div>
        <button
          onClick={handleConnect}
          disabled={connecting() || !playerName().trim()}
          class="w-full bg-blue-600 text-white rounded px-3 py-2 text-sm font-medium
               hover:bg-blue-700 disabled:opacity-50"
        >
          {connecting() ? "连接中..." : "加入"}
        </button>
        <Show when={error()}>
          <p class="text-red-500 text-sm text-center">{error()}</p>
        </Show>
      </div>
    </Show>
  );
};