feat(journal): implement session management UI components

Add a suite of dialogs and header components to manage journal sessions, including: - ConnectDialog for joining sessions with name and role selection - CreateSessionDialog for starting new sessions - InviteDialog for generating and copying player invite links - SessionDropdown for switching between sessions (GM only) - JournalHeader for displaying connection status and user info
2026-07-08 00:31:35 +08:00
parent 3d957706e9
commit 2c2b7b781d
7 changed files with 456 additions and 398 deletions
@@ -0,0 +1,118 @@
+/**
+ * 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;
+
+    const brokerUrl = `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>
+  );
+};