onelobby 0.0.0-stage → 0.2.0

package/dist/ui/element.js

@@ -0,0 +1,284 @@
+/**
+ * `<one-lobby>`: a drop-in lobby (host, join by code or invite link, player list, start) for people who paste
+ * HTML rather than write code. Zero dependencies; shadow DOM; themed with CSS custom properties.
+ *
+ *   <one-lobby server="https://your-name.onrender.com" game="my-game" max-players="4">fallback text</one-lobby>
+ *
+ * Game API: el.send(data), el.shared.set/add/get, el.isHost, el.players, events message / player-joined /
+ * player-left / start / error / shared-change (all bubble, `event.detail` carries the data).
+ */
+import { formatCode } from "../crockford.js";
+import { OneLobby } from "../onelobby.js";
+import { OneLobbyError } from "../signaling.js";
+import { LobbyController } from "./controller.js";
+import { codeFromUrl, shareUrl } from "../friendly.js";
+import { LOBBY_CSS } from "./styles.js";
+import { lobbyServerUrl } from "./server-url.js";
+export const LOBBY_TAG = "one-lobby";
+const NAME_KEY = "onelobby-name";
+const TEMPLATE = `
+<div class="card" part="card">
+  <p class="status" id="status" role="status" aria-live="polite"></p>
+  <p class="hint" id="hint" hidden></p>
+
+  <div id="v-idle" class="view">
+    <div class="row">
+      <label id="nameLabel">Your name
+        <input id="name" maxlength="24" autocomplete="nickname" placeholder="e.g. Sam">
+      </label>
+    </div>
+    <div class="row" style="margin-top:.75rem">
+      <button id="host" class="primary" type="button">Host a game</button>
+    </div>
+    <p class="or">or join a friend</p>
+    <form id="joinForm" class="row">
+      <label>Game code
+        <input id="code" maxlength="9" autocomplete="off" autocapitalize="characters" spellcheck="false" placeholder="ABC 123">
+      </label>
+      <button id="join" type="submit">Join</button>
+    </form>
+  </div>
+
+  <div id="v-busy" class="view" hidden>
+    <button id="cancel" type="button">Cancel</button>
+  </div>
+
+  <div id="v-lobby" class="view" hidden>
+    <div class="codebox">
+      <h3>Game code</h3>
+      <span class="code" id="codeText"></span>
+      <div class="row">
+        <button id="copyCode" type="button">Copy code</button>
+        <button id="copyLink" type="button">Copy invite link</button>
+      </div>
+      <span class="sr" id="copied" aria-live="polite"></span>
+    </div>
+    <h3 id="playersTitle" style="margin-top:.75rem">Players</h3>
+    <ul id="players" aria-labelledby="playersTitle"></ul>
+    <div class="bar" style="margin-top:.75rem">
+      <button id="start" class="primary" type="button">Start</button>
+      <button id="leave" type="button">Leave</button>
+    </div>
+  </div>
+
+  <div id="v-error" class="view" hidden>
+    <div class="row">
+      <button id="retry" class="primary" type="button">Try again</button>
+      <button id="back" type="button">Back</button>
+    </div>
+  </div>
+</div>
+`;
+function readStored() {
+    try {
+        return localStorage.getItem(NAME_KEY) ?? "";
+    }
+    catch {
+        return "";
+    }
+}
+function store(name) {
+    try {
+        localStorage.setItem(NAME_KEY, name);
+    }
+    catch {
+        /* private window */
+    }
+}
+async function copyText(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch {
+        const ta = document.createElement("textarea");
+        ta.value = text;
+        ta.style.position = "fixed";
+        ta.style.opacity = "0";
+        document.body.appendChild(ta);
+        ta.select();
+        let ok = false;
+        try {
+            ok = document.execCommand("copy");
+        }
+        catch {
+            ok = false;
+        }
+        ta.remove();
+        return ok;
+    }
+}
+function makeClass() {
+    class OneLobbyBox extends HTMLElement {
+        static observedAttributes = ["name", "theme"];
+        /** @internal exposed for debugging and tests */
+        _controller;
+        root;
+        $ = (id) => this.root.getElementById(id);
+        autoJoined = false;
+        copiedTimer;
+        constructor() {
+            super();
+            this.root = this.attachShadow({ mode: "open" });
+            this.root.innerHTML = `<style>${LOBBY_CSS}</style>${TEMPLATE}`;
+            this._controller = new LobbyController({ makeKit: (name) => this.makeKit(name), maxPlayers: () => this.maxPlayers });
+            this._controller.onChange = () => this.render();
+            this._controller.onEvent = (type, detail) => this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+            this.wire();
+        }
+        // ---- public API ----------------------------------------------------------------------------------------------
+        get isHost() { return this._controller.isHost; }
+        get players() { return this._controller.players; }
+        get code() { return this._controller.code; }
+        get state() { return this._controller.state; }
+        get shared() { return this._controller.shared; }
+        send(data) { this._controller.send(data); }
+        host() { return this._controller.host(this.playerName()); }
+        join(code) { return this._controller.join(code, this.playerName()); }
+        start() { return this._controller.start(); }
+        leave() { return this._controller.leave(); }
+        // ---- lifecycle -----------------------------------------------------------------------------------------------
+        connectedCallback() {
+            const name = this.getAttribute("name");
+            const input = this.$("name");
+            if (!input.value)
+                input.value = name ?? readStored();
+            this.$("nameLabel").hidden = !!name;
+            this.render();
+            if (!this.autoJoined) {
+                this.autoJoined = true;
+                const code = codeFromUrl();
+                if (code && this._controller.state === "idle") {
+                    this.$("code").value = formatCode(code);
+                    if (input.value.trim())
+                        void this.join(code);
+                    else {
+                        this.$("status").textContent = "You're invited! Type your name, then press Join.";
+                        input.focus();
+                    }
+                }
+                else if (!code && this._controller.state === "idle" && lobbyServerUrl(this.getAttribute("server"))) {
+                    // A reload in the middle of a game: quietly take this tab's seat back (OneLobby rememberSeat).
+                    void this._controller.resume(input.value.trim());
+                }
+            }
+        }
+        disconnectedCallback() {
+            // Leaving the page section (or the page) ends this player's session.
+            if (this._controller.lobby)
+                void this._controller.leave();
+        }
+        attributeChangedCallback(attr) {
+            if (attr === "name" && this.isConnected) {
+                const v = this.getAttribute("name");
+                if (v)
+                    this.$("name").value = v;
+                this.$("nameLabel").hidden = !!v;
+            }
+        }
+        // ---- internals -----------------------------------------------------------------------------------------------
+        get maxPlayers() {
+            const n = parseInt(this.getAttribute("max-players") ?? "", 10);
+            return Number.isFinite(n) && n >= 2 ? Math.min(n, 250) : 8;
+        }
+        playerName() {
+            // empty is fine: other players then see "Player 2" and so on
+            const v = this.$("name").value.trim() || this.getAttribute("name") || "";
+            if (!this.getAttribute("name") && v)
+                store(v);
+            return v;
+        }
+        makeKit(name) {
+            // missing, still the guide's placeholder, or not an address: say so instead of "couldn't reach the server"
+            const server = lobbyServerUrl(this.getAttribute("server"));
+            if (!server)
+                throw new OneLobbyError("no_server", "the <one-lobby> tag has no usable server address");
+            return new OneLobby({
+                gameId: this.getAttribute("game") || "onelobby-drop-in",
+                netVersion: this.getAttribute("version") || "1",
+                lobbyServer: server,
+                mode: "raw",
+                displayName: name,
+                // joiners give up (with a friendly "couldn't connect" and a retry button) after this long
+                readyTimeoutMs: 15_000,
+                advanced: { createMic: null, createSink: null, voiceCodec: null },
+            });
+        }
+        wire() {
+            const on = (id, ev, fn) => this.$(id).addEventListener(ev, fn);
+            on("host", "click", () => void this.host());
+            on("joinForm", "submit", (e) => {
+                e.preventDefault();
+                void this.join(this.$("code").value);
+            });
+            on("cancel", "click", () => this._controller.reset());
+            on("start", "click", () => void this.start());
+            on("leave", "click", () => void this.leave());
+            on("retry", "click", () => void this._controller.retry());
+            on("back", "click", () => this._controller.reset());
+            on("copyCode", "click", () => void this.copy(this.code ?? "", "copyCode", "Copied!"));
+            on("copyLink", "click", () => void this.copy(this.code ? shareUrl(this.code) : "", "copyLink", "Link copied!"));
+        }
+        async copy(text, id, done) {
+            if (!text)
+                return;
+            const ok = await copyText(text);
+            const btn = this.$(id);
+            const label = id === "copyCode" ? "Copy code" : "Copy invite link";
+            btn.textContent = ok ? done : "Couldn't copy, select it by hand";
+            this.$("copied").textContent = ok ? done : "";
+            clearTimeout(this.copiedTimer);
+            this.copiedTimer = setTimeout(() => {
+                btn.textContent = label;
+                this.$("copied").textContent = "";
+            }, 2000);
+        }
+        render() {
+            const c = this._controller;
+            const s = c.state;
+            const status = this.$("status");
+            status.textContent = s === "error" && c.error?.code === "no_server"
+                ? "This page is missing its lobby server address."
+                : c.statusText;
+            status.classList.toggle("error", s === "error");
+            const hint = this.$("hint");
+            const hintText = s === "error"
+                ? (c.error?.code === "no_server" ? 'Put your lobby server address in server="…" on the <one-lobby> tag (it looks like https://your-name.onrender.com). The guide shows how to get one.' : c.error?.hint ?? "")
+                : "";
+            hint.textContent = hintText;
+            hint.hidden = !hintText;
+            this.$("v-idle").hidden = s !== "idle";
+            this.$("v-busy").hidden = s !== "connecting";
+            this.$("v-lobby").hidden = s !== "lobby" && s !== "playing";
+            this.$("v-error").hidden = s !== "error";
+            this.setAttribute("state", s);
+            if (s === "lobby" || s === "playing") {
+                this.$("codeText").textContent = formatCode(c.code ?? "");
+                const ul = this.$("players");
+                ul.replaceChildren(...c.players.map((p) => {
+                    const li = document.createElement("li");
+                    const nm = document.createElement("span");
+                    nm.textContent = p.name;
+                    li.append(nm);
+                    if (p.isHost)
+                        li.append(Object.assign(document.createElement("span"), { className: "tag", textContent: "host" }));
+                    if (p.isMe)
+                        li.append(Object.assign(document.createElement("span"), { className: "tag", textContent: "you" }));
+                    return li;
+                }));
+                const start = this.$("start");
+                start.hidden = !c.isHost || s === "playing";
+                start.disabled = c.players.length < 2;
+                start.title = start.disabled ? "Wait for at least one more player" : "";
+            }
+        }
+    }
+    return OneLobbyBox;
+}
+/** Register `<one-lobby>` (safe to call more than once; a no-op outside a browser). */
+export function defineLobbyElement(tag = LOBBY_TAG) {
+    if (typeof customElements === "undefined" || customElements.get(tag))
+        return;
+    customElements.define(tag, makeClass());
+}
+//# sourceMappingURL=element.js.map

package/dist/ui/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/ui/element.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * `<one-lobby>`: a drop-in lobby (host, join by code or invite link, player list, start) for people who paste\n * HTML rather than write code. Zero dependencies; shadow DOM; themed with CSS custom properties.\n *\n *   <one-lobby server=\"https://your-name.onrender.com\" game=\"my-game\" max-players=\"4\">fallback text</one-lobby>\n *\n * Game API: el.send(data), el.shared.set/add/get, el.isHost, el.players, events message / player-joined /\n * player-left / start / error / shared-change (all bubble, `event.detail` carries the data).\n */\nimport { formatCode } from \"../crockford.js\";\nimport { OneLobby } from \"../onelobby.js\";\nimport { OneLobbyError } from \"../signaling.js\";\nimport { LobbyController, type Player, type SharedState, type UiState } from \"./controller.js\";\nimport { codeFromUrl, shareUrl } from \"../friendly.js\";\nimport { LOBBY_CSS } from \"./styles.js\";\nimport { lobbyServerUrl } from \"./server-url.js\";\n\nexport const LOBBY_TAG = \"one-lobby\";\nconst NAME_KEY = \"onelobby-name\";\n\nconst TEMPLATE = `\n<div class=\"card\" part=\"card\">\n  <p class=\"status\" id=\"status\" role=\"status\" aria-live=\"polite\"></p>\n  <p class=\"hint\" id=\"hint\" hidden></p>\n\n  <div id=\"v-idle\" class=\"view\">\n    <div class=\"row\">\n      <label id=\"nameLabel\">Your name\n        <input id=\"name\" maxlength=\"24\" autocomplete=\"nickname\" placeholder=\"e.g. Sam\">\n      </label>\n    </div>\n    <div class=\"row\" style=\"margin-top:.75rem\">\n      <button id=\"host\" class=\"primary\" type=\"button\">Host a game</button>\n    </div>\n    <p class=\"or\">or join a friend</p>\n    <form id=\"joinForm\" class=\"row\">\n      <label>Game code\n        <input id=\"code\" maxlength=\"9\" autocomplete=\"off\" autocapitalize=\"characters\" spellcheck=\"false\" placeholder=\"ABC 123\">\n      </label>\n      <button id=\"join\" type=\"submit\">Join</button>\n    </form>\n  </div>\n\n  <div id=\"v-busy\" class=\"view\" hidden>\n    <button id=\"cancel\" type=\"button\">Cancel</button>\n  </div>\n\n  <div id=\"v-lobby\" class=\"view\" hidden>\n    <div class=\"codebox\">\n      <h3>Game code</h3>\n      <span class=\"code\" id=\"codeText\"></span>\n      <div class=\"row\">\n        <button id=\"copyCode\" type=\"button\">Copy code</button>\n        <button id=\"copyLink\" type=\"button\">Copy invite link</button>\n      </div>\n      <span class=\"sr\" id=\"copied\" aria-live=\"polite\"></span>\n    </div>\n    <h3 id=\"playersTitle\" style=\"margin-top:.75rem\">Players</h3>\n    <ul id=\"players\" aria-labelledby=\"playersTitle\"></ul>\n    <div class=\"bar\" style=\"margin-top:.75rem\">\n      <button id=\"start\" class=\"primary\" type=\"button\">Start</button>\n      <button id=\"leave\" type=\"button\">Leave</button>\n    </div>\n  </div>\n\n  <div id=\"v-error\" class=\"view\" hidden>\n    <div class=\"row\">\n      <button id=\"retry\" class=\"primary\" type=\"button\">Try again</button>\n      <button id=\"back\" type=\"button\">Back</button>\n    </div>\n  </div>\n</div>\n`;\n// No <slot>: text placed inside <one-lobby> is a fallback that shows only while the script has not loaded.\n\n/** The element's public surface (for TypeScript users). */\nexport interface OneLobbyElement extends HTMLElement {\n  readonly isHost: boolean;\n  readonly players: Player[];\n  readonly code: string | null;\n  readonly state: UiState;\n  readonly shared: SharedState;\n  send(data: unknown): void;\n  host(): Promise<void>;\n  join(code: string): Promise<void>;\n  start(): Promise<void>;\n  leave(): Promise<void>;\n}\n\n\nfunction readStored(): string {\n  try {\n    return localStorage.getItem(NAME_KEY) ?? \"\";\n  } catch {\n    return \"\";\n  }\n}\nfunction store(name: string): void {\n  try {\n    localStorage.setItem(NAME_KEY, name);\n  } catch {\n    /* private window */\n  }\n}\n\nasync function copyText(text: string): Promise<boolean> {\n  try {\n    await navigator.clipboard.writeText(text);\n    return true;\n  } catch {\n    const ta = document.createElement(\"textarea\");\n    ta.value = text;\n    ta.style.position = \"fixed\";\n    ta.style.opacity = \"0\";\n    document.body.appendChild(ta);\n    ta.select();\n    let ok = false;\n    try {\n      ok = document.execCommand(\"copy\");\n    } catch {\n      ok = false;\n    }\n    ta.remove();\n    return ok;\n  }\n}\n\nfunction makeClass(): CustomElementConstructor {\n  class OneLobbyBox extends HTMLElement implements OneLobbyElement {\n    static observedAttributes = [\"name\", \"theme\"];\n    /** @internal exposed for debugging and tests */\n    readonly _controller: LobbyController;\n    private root: ShadowRoot;\n    private $ = (id: string) => this.root.getElementById(id) as HTMLElement;\n    private autoJoined = false;\n    private copiedTimer: ReturnType<typeof setTimeout> | undefined;\n\n    constructor() {\n      super();\n      this.root = this.attachShadow({ mode: \"open\" });\n      this.root.innerHTML = `<style>${LOBBY_CSS}</style>${TEMPLATE}`;\n      this._controller = new LobbyController({ makeKit: (name) => this.makeKit(name), maxPlayers: () => this.maxPlayers });\n      this._controller.onChange = () => this.render();\n      this._controller.onEvent = (type, detail) => this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));\n      this.wire();\n    }\n\n    // ---- public API ----------------------------------------------------------------------------------------------\n\n    get isHost(): boolean { return this._controller.isHost; }\n    get players(): Player[] { return this._controller.players; }\n    get code(): string | null { return this._controller.code; }\n    get state(): UiState { return this._controller.state; }\n    get shared(): SharedState { return this._controller.shared; }\n    send(data: unknown): void { this._controller.send(data); }\n    host(): Promise<void> { return this._controller.host(this.playerName()); }\n    join(code: string): Promise<void> { return this._controller.join(code, this.playerName()); }\n    start(): Promise<void> { return this._controller.start(); }\n    leave(): Promise<void> { return this._controller.leave(); }\n\n    // ---- lifecycle -----------------------------------------------------------------------------------------------\n\n    connectedCallback(): void {\n      const name = this.getAttribute(\"name\");\n      const input = this.$(\"name\") as HTMLInputElement;\n      if (!input.value) input.value = name ?? readStored();\n      this.$(\"nameLabel\").hidden = !!name;\n      this.render();\n      if (!this.autoJoined) {\n        this.autoJoined = true;\n        const code = codeFromUrl();\n        if (code && this._controller.state === \"idle\") {\n          (this.$(\"code\") as HTMLInputElement).value = formatCode(code);\n          if (input.value.trim()) void this.join(code);\n          else {\n            this.$(\"status\").textContent = \"You're invited! Type your name, then press Join.\";\n            input.focus();\n          }\n        } else if (!code && this._controller.state === \"idle\" && lobbyServerUrl(this.getAttribute(\"server\"))) {\n          // A reload in the middle of a game: quietly take this tab's seat back (OneLobby rememberSeat).\n          void this._controller.resume(input.value.trim());\n        }\n      }\n    }\n\n    disconnectedCallback(): void {\n      // Leaving the page section (or the page) ends this player's session.\n      if (this._controller.lobby) void this._controller.leave();\n    }\n\n    attributeChangedCallback(attr: string): void {\n      if (attr === \"name\" && this.isConnected) {\n        const v = this.getAttribute(\"name\");\n        if (v) (this.$(\"name\") as HTMLInputElement).value = v;\n        this.$(\"nameLabel\").hidden = !!v;\n      }\n    }\n\n    // ---- internals -----------------------------------------------------------------------------------------------\n\n    private get maxPlayers(): number {\n      const n = parseInt(this.getAttribute(\"max-players\") ?? \"\", 10);\n      return Number.isFinite(n) && n >= 2 ? Math.min(n, 250) : 8;\n    }\n\n    private playerName(): string {\n      // empty is fine: other players then see \"Player 2\" and so on\n      const v = (this.$(\"name\") as HTMLInputElement).value.trim() || this.getAttribute(\"name\") || \"\";\n      if (!this.getAttribute(\"name\") && v) store(v);\n      return v;\n    }\n\n    private makeKit(name: string): OneLobby {\n      // missing, still the guide's placeholder, or not an address: say so instead of \"couldn't reach the server\"\n      const server = lobbyServerUrl(this.getAttribute(\"server\"));\n      if (!server) throw new OneLobbyError(\"no_server\", \"the <one-lobby> tag has no usable server address\");\n      return new OneLobby({\n        gameId: this.getAttribute(\"game\") || \"onelobby-drop-in\",\n        netVersion: this.getAttribute(\"version\") || \"1\",\n        lobbyServer: server,\n        mode: \"raw\",\n        displayName: name,\n        // joiners give up (with a friendly \"couldn't connect\" and a retry button) after this long\n        readyTimeoutMs: 15_000,\n        advanced: { createMic: null, createSink: null, voiceCodec: null },\n      });\n    }\n\n    private wire(): void {\n      const on = (id: string, ev: string, fn: (e: Event) => void) => this.$(id).addEventListener(ev, fn);\n      on(\"host\", \"click\", () => void this.host());\n      on(\"joinForm\", \"submit\", (e) => {\n        e.preventDefault();\n        void this.join((this.$(\"code\") as HTMLInputElement).value);\n      });\n      on(\"cancel\", \"click\", () => this._controller.reset());\n      on(\"start\", \"click\", () => void this.start());\n      on(\"leave\", \"click\", () => void this.leave());\n      on(\"retry\", \"click\", () => void this._controller.retry());\n      on(\"back\", \"click\", () => this._controller.reset());\n      on(\"copyCode\", \"click\", () => void this.copy(this.code ?? \"\", \"copyCode\", \"Copied!\"));\n      on(\"copyLink\", \"click\", () => void this.copy(this.code ? shareUrl(this.code) : \"\", \"copyLink\", \"Link copied!\"));\n    }\n\n    private async copy(text: string, id: string, done: string): Promise<void> {\n      if (!text) return;\n      const ok = await copyText(text);\n      const btn = this.$(id);\n      const label = id === \"copyCode\" ? \"Copy code\" : \"Copy invite link\";\n      btn.textContent = ok ? done : \"Couldn't copy, select it by hand\";\n      this.$(\"copied\").textContent = ok ? done : \"\";\n      clearTimeout(this.copiedTimer);\n      this.copiedTimer = setTimeout(() => {\n        btn.textContent = label;\n        this.$(\"copied\").textContent = \"\";\n      }, 2000);\n    }\n\n    private render(): void {\n      const c = this._controller;\n      const s = c.state;\n      const status = this.$(\"status\");\n      status.textContent = s === \"error\" && c.error?.code === \"no_server\"\n        ? \"This page is missing its lobby server address.\"\n        : c.statusText;\n      status.classList.toggle(\"error\", s === \"error\");\n      const hint = this.$(\"hint\");\n      const hintText = s === \"error\"\n        ? (c.error?.code === \"no_server\" ? 'Put your lobby server address in server=\"…\" on the <one-lobby> tag (it looks like https://your-name.onrender.com). The guide shows how to get one.' : c.error?.hint ?? \"\")\n        : \"\";\n      hint.textContent = hintText;\n      hint.hidden = !hintText;\n\n      this.$(\"v-idle\").hidden = s !== \"idle\";\n      this.$(\"v-busy\").hidden = s !== \"connecting\";\n      this.$(\"v-lobby\").hidden = s !== \"lobby\" && s !== \"playing\";\n      this.$(\"v-error\").hidden = s !== \"error\";\n      this.setAttribute(\"state\", s);\n\n      if (s === \"lobby\" || s === \"playing\") {\n        this.$(\"codeText\").textContent = formatCode(c.code ?? \"\");\n        const ul = this.$(\"players\");\n        ul.replaceChildren(\n          ...c.players.map((p) => {\n            const li = document.createElement(\"li\");\n            const nm = document.createElement(\"span\");\n            nm.textContent = p.name;\n            li.append(nm);\n            if (p.isHost) li.append(Object.assign(document.createElement(\"span\"), { className: \"tag\", textContent: \"host\" }));\n            if (p.isMe) li.append(Object.assign(document.createElement(\"span\"), { className: \"tag\", textContent: \"you\" }));\n            return li;\n          }),\n        );\n        const start = this.$(\"start\") as HTMLButtonElement;\n        start.hidden = !c.isHost || s === \"playing\";\n        start.disabled = c.players.length < 2;\n        start.title = start.disabled ? \"Wait for at least one more player\" : \"\";\n      }\n    }\n  }\n  return OneLobbyBox;\n}\n\n/** Register `<one-lobby>` (safe to call more than once; a no-op outside a browser). */\nexport function defineLobbyElement(tag = LOBBY_TAG): void {\n  if (typeof customElements === \"undefined\" || customElements.get(tag)) return;\n  customElements.define(tag, makeClass());\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"one-lobby\": OneLobbyElement;\n  }\n}\n"]}

package/dist/ui/index.d.ts

@@ -0,0 +1,5 @@
+export { defineLobbyElement, LOBBY_TAG } from "./element.js";
+export type { OneLobbyElement } from "./element.js";
+export { LobbyController, SharedState } from "./controller.js";
+export { lobbyServerUrl } from "./server-url.js";
+export type { Player, UiState, ControllerEvents, ControllerOptions, KitLike } from "./controller.js";

package/dist/ui/index.js

@@ -0,0 +1,9 @@
+/**
+ * `onelobby/ui`: the `<one-lobby>` drop-in element. Loading this module registers the tag.
+ */
+import { defineLobbyElement } from "./element.js";
+export { defineLobbyElement, LOBBY_TAG } from "./element.js";
+export { LobbyController, SharedState } from "./controller.js";
+export { lobbyServerUrl } from "./server-url.js";
+defineLobbyElement();
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGjD,kBAAkB,EAAE,CAAC","sourcesContent":["/**\n * `onelobby/ui`: the `<one-lobby>` drop-in element. Loading this module registers the tag.\n */\nimport { defineLobbyElement } from \"./element.js\";\n\nexport { defineLobbyElement, LOBBY_TAG } from \"./element.js\";\nexport type { OneLobbyElement } from \"./element.js\";\nexport { LobbyController, SharedState } from \"./controller.js\";\nexport { lobbyServerUrl } from \"./server-url.js\";\nexport type { Player, UiState, ControllerEvents, ControllerOptions, KitLike } from \"./controller.js\";\n\ndefineLobbyElement();\n"]}

package/dist/ui/server-url.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The `server="..."` attribute of `<one-lobby>` as a WebSocket URL, or null when it is missing, still the placeholder
+ * from the guide, or not an address at all. Null makes the element say "This page is missing its lobby server
+ * address" instead of the less helpful "Couldn't reach the game server".
+ *
+ * Accepts what people paste: `https://name.onrender.com` (the address Render shows), `wss://host/ws`, or a bare host.
+ * http(s) becomes ws(s); the server answers on `/` and `/ws`, so no path is needed.
+ */
+export declare function lobbyServerUrl(raw: string | null | undefined): string | null;

package/dist/ui/server-url.js

@@ -0,0 +1,39 @@
+/**
+ * The `server="..."` attribute of `<one-lobby>` as a WebSocket URL, or null when it is missing, still the placeholder
+ * from the guide, or not an address at all. Null makes the element say "This page is missing its lobby server
+ * address" instead of the less helpful "Couldn't reach the game server".
+ *
+ * Accepts what people paste: `https://name.onrender.com` (the address Render shows), `wss://host/ws`, or a bare host.
+ * http(s) becomes ws(s); the server answers on `/` and `/ws`, so no path is needed.
+ */
+export function lobbyServerUrl(raw) {
+    const s = (raw ?? "").trim();
+    if (!s || /\s/.test(s))
+        return null;
+    // the guide's and example's placeholders: YOUR-LOBBY-SERVER, YOUR-SERVER, REPLACE-ME ...
+    if (/your[-_ ]?(lobby[-_ ]?)?server|replace[-_ ]?me|<|>/i.test(s))
+        return null;
+    let url = s;
+    if (/^https?:\/\//i.test(url))
+        url = url.replace(/^http/i, "ws");
+    else if (!/^wss?:\/\//i.test(url))
+        url = "wss://" + url;
+    let u;
+    try {
+        u = new URL(url);
+    }
+    catch {
+        return null;
+    }
+    const host = u.hostname.toLowerCase();
+    if (!host)
+        return null;
+    // documentation-only names (RFC 2606): example.com/.net/.org and *.example never reach a real server
+    if (/(^|\.)example\.(com|net|org)$/.test(host) || /\.example$/.test(host) || host === "example")
+        return null;
+    // a single word that is not localhost is a typo, not a server (e.g. server="lobby")
+    if (!host.includes(".") && !host.includes(":") && host !== "localhost")
+        return null;
+    return url;
+}
+//# sourceMappingURL=server-url.js.map

package/dist/ui/server-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-url.js","sourceRoot":"","sources":["../../src/ui/server-url.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,cAAc,CAAC,GAA8B;IAC3D,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7B,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IACpC,yFAAyF;IACzF,IAAI,qDAAqD,CAAC,IAAI,CAAC,CAAC,CAAC;QAAE,OAAO,IAAI,CAAC;IAC/E,IAAI,GAAG,GAAG,CAAC,CAAC;IACZ,IAAI,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,GAAG,GAAG,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;SAC5D,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;QAAE,GAAG,GAAG,QAAQ,GAAG,GAAG,CAAC;IACxD,IAAI,CAAM,CAAC;IACX,IAAI,CAAC;QACH,CAAC,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;IACnB,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC;IACtC,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,qGAAqG;IACrG,IAAI,+BAA+B,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAC7G,oFAAoF;IACpF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI,KAAK,WAAW;QAAE,OAAO,IAAI,CAAC;IACpF,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["/**\n * The `server=\"...\"` attribute of `<one-lobby>` as a WebSocket URL, or null when it is missing, still the placeholder\n * from the guide, or not an address at all. Null makes the element say \"This page is missing its lobby server\n * address\" instead of the less helpful \"Couldn't reach the game server\".\n *\n * Accepts what people paste: `https://name.onrender.com` (the address Render shows), `wss://host/ws`, or a bare host.\n * http(s) becomes ws(s); the server answers on `/` and `/ws`, so no path is needed.\n */\nexport function lobbyServerUrl(raw: string | null | undefined): string | null {\n  const s = (raw ?? \"\").trim();\n  if (!s || /\\s/.test(s)) return null;\n  // the guide's and example's placeholders: YOUR-LOBBY-SERVER, YOUR-SERVER, REPLACE-ME ...\n  if (/your[-_ ]?(lobby[-_ ]?)?server|replace[-_ ]?me|<|>/i.test(s)) return null;\n  let url = s;\n  if (/^https?:\\/\\//i.test(url)) url = url.replace(/^http/i, \"ws\");\n  else if (!/^wss?:\\/\\//i.test(url)) url = \"wss://\" + url;\n  let u: URL;\n  try {\n    u = new URL(url);\n  } catch {\n    return null;\n  }\n  const host = u.hostname.toLowerCase();\n  if (!host) return null;\n  // documentation-only names (RFC 2606): example.com/.net/.org and *.example never reach a real server\n  if (/(^|\\.)example\\.(com|net|org)$/.test(host) || /\\.example$/.test(host) || host === \"example\") return null;\n  // a single word that is not localhost is a typo, not a server (e.g. server=\"lobby\")\n  if (!host.includes(\".\") && !host.includes(\":\") && host !== \"localhost\") return null;\n  return url;\n}\n"]}

package/dist/ui/styles.d.ts

@@ -0,0 +1,2 @@
+/** Shadow-DOM styles for `<one-lobby>`. Theme with CSS custom properties on the element (see docs/no-code.md). */
+export declare const LOBBY_CSS = "\n:host {\n  --onelobby-bg: #ffffff;\n  --onelobby-fg: #1b1f24;\n  --onelobby-muted: #57606a;\n  --onelobby-border: #d0d7de;\n  --onelobby-accent: #0b5cad;\n  --onelobby-accent-fg: #ffffff;\n  --onelobby-danger: #b42318;\n  --onelobby-field: #f6f8fa;\n  --onelobby-radius: 12px;\n  --onelobby-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  display: block;\n  max-width: 28rem;\n  font-family: var(--onelobby-font);\n  color: var(--onelobby-fg);\n  line-height: 1.4;\n}\n:host([theme=\"dark\"]) {\n  --onelobby-bg: #161b22; --onelobby-fg: #e6edf3; --onelobby-muted: #9da7b3; --onelobby-border: #30363d;\n  --onelobby-accent: #4c9be8; --onelobby-accent-fg: #0d1117; --onelobby-danger: #ff7b72; --onelobby-field: #0d1117;\n}\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]), :host(:not([theme])) {\n    --onelobby-bg: #161b22; --onelobby-fg: #e6edf3; --onelobby-muted: #9da7b3; --onelobby-border: #30363d;\n    --onelobby-accent: #4c9be8; --onelobby-accent-fg: #0d1117; --onelobby-danger: #ff7b72; --onelobby-field: #0d1117;\n  }\n}\n[hidden] { display: none !important; }\n.card {\n  background: var(--onelobby-bg);\n  border: 1px solid var(--onelobby-border);\n  border-radius: var(--onelobby-radius);\n  padding: 1rem;\n  display: grid;\n  gap: 0.75rem;\n}\n.status { font-size: 1rem; margin: 0; }\n.status.error { color: var(--onelobby-danger); font-weight: 600; }\n.hint { margin: 0; color: var(--onelobby-muted); }\nlabel { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--onelobby-muted); }\ninput {\n  font: inherit; font-size: 1rem; color: var(--onelobby-fg); background: var(--onelobby-field);\n  border: 1px solid var(--onelobby-border); border-radius: 8px; padding: 0.6rem 0.7rem; min-height: 44px; box-sizing: border-box; width: 100%;\n}\n#code { text-transform: uppercase; letter-spacing: 0.15em; font-family: ui-monospace, Consolas, monospace; }\nbutton {\n  font: inherit; font-size: 1rem; min-height: 44px; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer;\n  border: 1px solid var(--onelobby-border); background: var(--onelobby-field); color: var(--onelobby-fg);\n}\nbutton.primary { background: var(--onelobby-accent); color: var(--onelobby-accent-fg); border-color: var(--onelobby-accent); font-weight: 600; }\nbutton:disabled { opacity: 0.55; cursor: not-allowed; }\nbutton:focus-visible, input:focus-visible { outline: 3px solid var(--onelobby-accent); outline-offset: 2px; }\n.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }\n.row > label { flex: 1 1 10rem; }\n.or { text-align: center; color: var(--onelobby-muted); font-size: 0.9rem; }\n.codebox { display: grid; gap: 0.5rem; justify-items: start; }\n.code {\n  font-family: ui-monospace, Consolas, monospace; font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 700;\n  letter-spacing: 0.12em; user-select: all;\n}\nh3 { margin: 0; font-size: 0.9rem; color: var(--onelobby-muted); font-weight: 600; }\nul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }\nli { display: flex; gap: 0.5rem; align-items: center; }\n.tag { font-size: 0.75rem; border: 1px solid var(--onelobby-border); border-radius: 999px; padding: 0 0.5rem; color: var(--onelobby-muted); }\n.bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }\n.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n";

package/dist/ui/styles.js

@@ -0,0 +1,70 @@
+/** Shadow-DOM styles for `<one-lobby>`. Theme with CSS custom properties on the element (see docs/no-code.md). */
+export const LOBBY_CSS = `
+:host {
+  --onelobby-bg: #ffffff;
+  --onelobby-fg: #1b1f24;
+  --onelobby-muted: #57606a;
+  --onelobby-border: #d0d7de;
+  --onelobby-accent: #0b5cad;
+  --onelobby-accent-fg: #ffffff;
+  --onelobby-danger: #b42318;
+  --onelobby-field: #f6f8fa;
+  --onelobby-radius: 12px;
+  --onelobby-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  display: block;
+  max-width: 28rem;
+  font-family: var(--onelobby-font);
+  color: var(--onelobby-fg);
+  line-height: 1.4;
+}
+:host([theme="dark"]) {
+  --onelobby-bg: #161b22; --onelobby-fg: #e6edf3; --onelobby-muted: #9da7b3; --onelobby-border: #30363d;
+  --onelobby-accent: #4c9be8; --onelobby-accent-fg: #0d1117; --onelobby-danger: #ff7b72; --onelobby-field: #0d1117;
+}
+@media (prefers-color-scheme: dark) {
+  :host([theme="auto"]), :host(:not([theme])) {
+    --onelobby-bg: #161b22; --onelobby-fg: #e6edf3; --onelobby-muted: #9da7b3; --onelobby-border: #30363d;
+    --onelobby-accent: #4c9be8; --onelobby-accent-fg: #0d1117; --onelobby-danger: #ff7b72; --onelobby-field: #0d1117;
+  }
+}
+[hidden] { display: none !important; }
+.card {
+  background: var(--onelobby-bg);
+  border: 1px solid var(--onelobby-border);
+  border-radius: var(--onelobby-radius);
+  padding: 1rem;
+  display: grid;
+  gap: 0.75rem;
+}
+.status { font-size: 1rem; margin: 0; }
+.status.error { color: var(--onelobby-danger); font-weight: 600; }
+.hint { margin: 0; color: var(--onelobby-muted); }
+label { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--onelobby-muted); }
+input {
+  font: inherit; font-size: 1rem; color: var(--onelobby-fg); background: var(--onelobby-field);
+  border: 1px solid var(--onelobby-border); border-radius: 8px; padding: 0.6rem 0.7rem; min-height: 44px; box-sizing: border-box; width: 100%;
+}
+#code { text-transform: uppercase; letter-spacing: 0.15em; font-family: ui-monospace, Consolas, monospace; }
+button {
+  font: inherit; font-size: 1rem; min-height: 44px; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer;
+  border: 1px solid var(--onelobby-border); background: var(--onelobby-field); color: var(--onelobby-fg);
+}
+button.primary { background: var(--onelobby-accent); color: var(--onelobby-accent-fg); border-color: var(--onelobby-accent); font-weight: 600; }
+button:disabled { opacity: 0.55; cursor: not-allowed; }
+button:focus-visible, input:focus-visible { outline: 3px solid var(--onelobby-accent); outline-offset: 2px; }
+.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }
+.row > label { flex: 1 1 10rem; }
+.or { text-align: center; color: var(--onelobby-muted); font-size: 0.9rem; }
+.codebox { display: grid; gap: 0.5rem; justify-items: start; }
+.code {
+  font-family: ui-monospace, Consolas, monospace; font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 700;
+  letter-spacing: 0.12em; user-select: all;
+}
+h3 { margin: 0; font-size: 0.9rem; color: var(--onelobby-muted); font-weight: 600; }
+ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
+li { display: flex; gap: 0.5rem; align-items: center; }
+.tag { font-size: 0.75rem; border: 1px solid var(--onelobby-border); border-radius: 999px; padding: 0 0.5rem; color: var(--onelobby-muted); }
+.bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }
+.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/ui/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,kHAAkH;AAClH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmExB,CAAC","sourcesContent":["/** Shadow-DOM styles for `<one-lobby>`. Theme with CSS custom properties on the element (see docs/no-code.md). */\nexport const LOBBY_CSS = `\n:host {\n  --onelobby-bg: #ffffff;\n  --onelobby-fg: #1b1f24;\n  --onelobby-muted: #57606a;\n  --onelobby-border: #d0d7de;\n  --onelobby-accent: #0b5cad;\n  --onelobby-accent-fg: #ffffff;\n  --onelobby-danger: #b42318;\n  --onelobby-field: #f6f8fa;\n  --onelobby-radius: 12px;\n  --onelobby-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n  display: block;\n  max-width: 28rem;\n  font-family: var(--onelobby-font);\n  color: var(--onelobby-fg);\n  line-height: 1.4;\n}\n:host([theme=\"dark\"]) {\n  --onelobby-bg: #161b22; --onelobby-fg: #e6edf3; --onelobby-muted: #9da7b3; --onelobby-border: #30363d;\n  --onelobby-accent: #4c9be8; --onelobby-accent-fg: #0d1117; --onelobby-danger: #ff7b72; --onelobby-field: #0d1117;\n}\n@media (prefers-color-scheme: dark) {\n  :host([theme=\"auto\"]), :host(:not([theme])) {\n    --onelobby-bg: #161b22; --onelobby-fg: #e6edf3; --onelobby-muted: #9da7b3; --onelobby-border: #30363d;\n    --onelobby-accent: #4c9be8; --onelobby-accent-fg: #0d1117; --onelobby-danger: #ff7b72; --onelobby-field: #0d1117;\n  }\n}\n[hidden] { display: none !important; }\n.card {\n  background: var(--onelobby-bg);\n  border: 1px solid var(--onelobby-border);\n  border-radius: var(--onelobby-radius);\n  padding: 1rem;\n  display: grid;\n  gap: 0.75rem;\n}\n.status { font-size: 1rem; margin: 0; }\n.status.error { color: var(--onelobby-danger); font-weight: 600; }\n.hint { margin: 0; color: var(--onelobby-muted); }\nlabel { display: grid; gap: 0.25rem; font-size: 0.9rem; color: var(--onelobby-muted); }\ninput {\n  font: inherit; font-size: 1rem; color: var(--onelobby-fg); background: var(--onelobby-field);\n  border: 1px solid var(--onelobby-border); border-radius: 8px; padding: 0.6rem 0.7rem; min-height: 44px; box-sizing: border-box; width: 100%;\n}\n#code { text-transform: uppercase; letter-spacing: 0.15em; font-family: ui-monospace, Consolas, monospace; }\nbutton {\n  font: inherit; font-size: 1rem; min-height: 44px; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer;\n  border: 1px solid var(--onelobby-border); background: var(--onelobby-field); color: var(--onelobby-fg);\n}\nbutton.primary { background: var(--onelobby-accent); color: var(--onelobby-accent-fg); border-color: var(--onelobby-accent); font-weight: 600; }\nbutton:disabled { opacity: 0.55; cursor: not-allowed; }\nbutton:focus-visible, input:focus-visible { outline: 3px solid var(--onelobby-accent); outline-offset: 2px; }\n.row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: end; }\n.row > label { flex: 1 1 10rem; }\n.or { text-align: center; color: var(--onelobby-muted); font-size: 0.9rem; }\n.codebox { display: grid; gap: 0.5rem; justify-items: start; }\n.code {\n  font-family: ui-monospace, Consolas, monospace; font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 700;\n  letter-spacing: 0.12em; user-select: all;\n}\nh3 { margin: 0; font-size: 0.9rem; color: var(--onelobby-muted); font-weight: 600; }\nul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }\nli { display: flex; gap: 0.5rem; align-items: center; }\n.tag { font-size: 0.75rem; border: 1px solid var(--onelobby-border); border-radius: 999px; padding: 0 0.5rem; color: var(--onelobby-muted); }\n.bar { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; }\n.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n`;\n"]}

package/dist/voice-browser.d.ts

@@ -0,0 +1,19 @@
+import type { AudioSink, FrameSource, VoiceCodec } from "./voice-types.js";
+export declare function webCodecsOpusAvailable(): boolean;
+/** Opus through WebCodecs (not Baseline: Chromium/Edge/Safari; check `webCodecsOpusAvailable()`). */
+export declare const webCodecsOpus: VoiceCodec;
+/** getUserMedia + AudioWorklet producing 960-sample frames at 48 kHz. Must be started from a user gesture. */
+export declare class WorkletMic implements FrameSource {
+    private ctx;
+    private stream;
+    start(onFrame: (pcm: Float32Array) => void): Promise<void>;
+    stop(): void;
+}
+/** Plays decoded PCM per speaker, scheduled back to back on an AudioContext. */
+export declare class WebAudioSink implements AudioSink {
+    private ctx;
+    private next;
+    constructor();
+    play(peerId: number, pcm: Float32Array, gain: number): void;
+    close(): void;
+}