@irtio/lobby 0.7.0 → 0.9.0

package/dist/index.d.ts

@@ -40,6 +40,35 @@ interface AttachableRoom {
         connected: boolean;
     }[]) => void): () => void;
     on(event: 'rtt', cb: (rtt: number) => void): () => void;
+    /**
+     * D75: the room's lobby, when it has one. Absent lobby, absent UI — every consumer that existed
+     * before this renders exactly as it did, and the package still imports nothing.
+     *
+     * Structural, like the rest of this type. `@irtio/client`'s `lobbyOf(room)` answers this shape,
+     * and so does a hand-rolled object in a framework app that would rather drive the panel itself.
+     */
+    readonly lobby?: AttachableLobby;
+}
+/** D75: the lobby half of an attachable room. See `AttachableRoom.lobby`. */
+interface AttachableLobby {
+    readonly phase: 'lobby' | 'started';
+    readonly players: readonly {
+        ready: boolean;
+        connected: boolean;
+    }[];
+    /** Whether the room is currently findable by strangers. The ROOM's state, never the click. */
+    readonly public?: boolean;
+    /** True only under a `'when-ready'` start policy; the only thing that draws readiness. */
+    readonly readyUi?: boolean;
+    /** How many players the room starts at, when it starts on a count. */
+    readonly capacity?: number;
+    ready(value: boolean): void;
+    /**
+     * Present only when the app wired one. The platform takes no public toggle from a client — that
+     * would be a built-in RPC — so a game that wants this offers its own and passes it through.
+     */
+    setPublic?(value: boolean): void;
+    on(event: 'change', cb: () => void): () => void;
 }
 /**
  * The custom element class. Registered as `irt-lobby` by `defineLobby()`, which this package
@@ -70,6 +99,55 @@ declare class IrtLobbyElement extends HTMLElement {
     /** The room's capacity, if known. `0` or the attribute absent both mean "unknown". */
     get maxPlayers(): number;
     set maxPlayers(value: number);
+    /**
+     * D75: the panel is the game's front door. Mirrors the `quick-match` boolean attribute.
+     *
+     * With it, and before a room is attached, the panel renders the chooser: **Start a private
+     * lobby** and **Join a game**. It also unlocks the searching state and the public toggle. Without
+     * it the panel is exactly what it has always been.
+     */
+    get quickMatch(): boolean;
+    set quickMatch(value: boolean);
+    /**
+     * D75: this game has no private games. Mirrors the `no-private` boolean attribute.
+     *
+     * Only meaningful alongside `quick-match`: the chooser drops to **Join a game** alone and the
+     * code, link and QR never render, because there is nothing to share. On its own it is invalid —
+     * the panel renders as it always did and says so once on the console — because a panel with no
+     * private games and no quick match is a panel with no way in at all.
+     */
+    get noPrivate(): boolean;
+    set noPrivate(value: boolean);
+    /** D75: a quick match is in flight. Mirrors `searching`; `attachLobby` sets and clears it. */
+    get searching(): boolean;
+    set searching(value: boolean);
+    /**
+     * D75: how many players are waiting in the queue, from `GET /match/status`.
+     *
+     * Rendered under "finding a game…" as `n of m waiting`, and only when both are set. Absent, the
+     * searching state is an honest spinner rather than a made-up count.
+     */
+    get waiting(): number | undefined;
+    set waiting(value: number | undefined);
+    /** D75: how many the queue takes. Mirrors `waiting-of`. */
+    get waitingOf(): number | undefined;
+    set waitingOf(value: number | undefined);
+    /**
+     * D75: the queue name the **Join a game** event carries. Mirrors the `queue` attribute.
+     *
+     * Empty means "the project's default queue", which is what a game with one queue wants and what
+     * omitting it has always meant everywhere else in the platform.
+     */
+    get queue(): string;
+    set queue(value: string);
+    /**
+     * D75: draw the roster but not the ready button, for a game that draws its own.
+     *
+     * Mirrors `hide-ready`, and only bites under a `'when-ready'` room — the other two policies have
+     * no ready button to hide.
+     */
+    get hideReady(): boolean;
+    set hideReady(value: boolean);
     /** Whether the panel renders inside a fixed full-viewport backdrop. Mirrors `modal`. */
     get modal(): boolean;
     set modal(value: boolean);
@@ -239,4 +317,4 @@ interface QrMatrix {
  */
 declare function encodeQr(text: string): QrMatrix;
 
-export { type AttachableRoom, IrtLobbyElement, IrtProfileElement, IrtStatusElement, LOBBY_TAG, PROFILE_TAG, type ProfilableRoom, type ProfileReading, type QrMatrix, STATUS_TAG, defineLobby, defineProfile, defineStatus, encodeQr };
+export { type AttachableLobby, type AttachableRoom, IrtLobbyElement, IrtProfileElement, IrtStatusElement, LOBBY_TAG, PROFILE_TAG, type ProfilableRoom, type ProfileReading, type QrMatrix, STATUS_TAG, defineLobby, defineProfile, defineStatus, encodeQr };

package/dist/index.js

@@ -438,6 +438,8 @@ var STATUS_COLORS = {
 var UNKNOWN_STATUS_COLOR = "#9aa1ad";
 
 // src/element.ts
+var warnedNoPrivate = /* @__PURE__ */ new WeakSet();
+var PUBLIC_SETTLE_MS = 600;
 function countConnected(clients) {
   return clients.filter((c) => c.connected !== false).length;
 }
@@ -449,7 +451,15 @@ var OBSERVED = [
   "players",
   "max-players",
   "modal",
-  "open"
+  "open",
+  // ---- M6 lane H: lobby front door ----
+  "quick-match",
+  "no-private",
+  "searching",
+  "waiting",
+  "waiting-of",
+  "hide-ready",
+  "queue"
 ];
 var STYLE = `
   :host {
@@ -520,6 +530,34 @@ var STYLE = `
     cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
   }
   .close:hover { background: #1e2129; }
+  /* ---- M6 lane H: lobby front door ---- */
+  .choose { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
+  .choose button {
+    padding: 10px 12px; border-radius: 8px; border: 1px solid #2a2e37; cursor: pointer;
+    background: #1e2129; color: inherit; font: inherit; font-size: 14px; font-weight: 600;
+    text-align: center;
+  }
+  .choose button:hover { background: #262a33; }
+  .choose button.primary { background: #f2f3f5; color: #16181d; border-color: #f2f3f5; }
+  .choose button.primary:hover { background: #ffffff; }
+  .searching { text-align: center; font-size: 13px; color: #9aa1ad; padding: 18px 0 6px; }
+  .searching .count { display: block; margin-top: 6px; font-size: 12px; color: #6c7280; }
+  .roster { list-style: none; margin: 12px 0 0; padding: 0; display: flex;
+    flex-direction: column; gap: 4px; }
+  .roster li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cdd2da; }
+  .roster .flag { width: 8px; height: 8px; border-radius: 50%; background: #3a3f4a; flex: none; }
+  .roster li[data-ready='true'] .flag { background: #3ac177; }
+  .roster li[data-me='true'] { color: #f2f3f5; font-weight: 600; }
+  .lobby-note { margin-top: 10px; font-size: 12px; color: #9aa1ad; text-align: center; }
+  .ready {
+    margin-top: 10px; width: 100%; padding: 9px 12px; border-radius: 8px; border: 0;
+    cursor: pointer; background: #3ac177; color: #08130c; font: inherit; font-size: 13px;
+    font-weight: 700;
+  }
+  .ready[aria-pressed='true'] { background: #1e2129; color: #9aa1ad; }
+  .toggle { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px;
+    color: #9aa1ad; }
+  .toggle input { margin: 0; }
 `;
 var IrtLobbyElement = class extends HTMLElement {
   static get observedAttributes() {
@@ -586,6 +624,95 @@ var IrtLobbyElement = class extends HTMLElement {
   set maxPlayers(value) {
     this.setAttribute("max-players", String(value));
   }
+  // ---- M6 lane H: lobby front door ----
+  /**
+   * D75: the panel is the game's front door. Mirrors the `quick-match` boolean attribute.
+   *
+   * With it, and before a room is attached, the panel renders the chooser: **Start a private
+   * lobby** and **Join a game**. It also unlocks the searching state and the public toggle. Without
+   * it the panel is exactly what it has always been.
+   */
+  get quickMatch() {
+    return this.hasAttribute("quick-match");
+  }
+  set quickMatch(value) {
+    if (value) this.setAttribute("quick-match", "");
+    else this.removeAttribute("quick-match");
+  }
+  /**
+   * D75: this game has no private games. Mirrors the `no-private` boolean attribute.
+   *
+   * Only meaningful alongside `quick-match`: the chooser drops to **Join a game** alone and the
+   * code, link and QR never render, because there is nothing to share. On its own it is invalid —
+   * the panel renders as it always did and says so once on the console — because a panel with no
+   * private games and no quick match is a panel with no way in at all.
+   */
+  get noPrivate() {
+    return this.hasAttribute("no-private");
+  }
+  set noPrivate(value) {
+    if (value) this.setAttribute("no-private", "");
+    else this.removeAttribute("no-private");
+  }
+  /** D75: a quick match is in flight. Mirrors `searching`; `attachLobby` sets and clears it. */
+  get searching() {
+    return this.hasAttribute("searching");
+  }
+  set searching(value) {
+    if (value) this.setAttribute("searching", "");
+    else this.removeAttribute("searching");
+  }
+  /**
+   * D75: how many players are waiting in the queue, from `GET /match/status`.
+   *
+   * Rendered under "finding a game…" as `n of m waiting`, and only when both are set. Absent, the
+   * searching state is an honest spinner rather than a made-up count.
+   */
+  get waiting() {
+    if (!this.hasAttribute("waiting")) return void 0;
+    const value = Number(this.getAttribute("waiting"));
+    return Number.isFinite(value) ? value : void 0;
+  }
+  set waiting(value) {
+    if (value === void 0) this.removeAttribute("waiting");
+    else this.setAttribute("waiting", String(value));
+  }
+  /** D75: how many the queue takes. Mirrors `waiting-of`. */
+  get waitingOf() {
+    if (!this.hasAttribute("waiting-of")) return void 0;
+    const value = Number(this.getAttribute("waiting-of"));
+    return Number.isFinite(value) ? value : void 0;
+  }
+  set waitingOf(value) {
+    if (value === void 0) this.removeAttribute("waiting-of");
+    else this.setAttribute("waiting-of", String(value));
+  }
+  /**
+   * D75: the queue name the **Join a game** event carries. Mirrors the `queue` attribute.
+   *
+   * Empty means "the project's default queue", which is what a game with one queue wants and what
+   * omitting it has always meant everywhere else in the platform.
+   */
+  get queue() {
+    return this.getAttribute("queue") ?? "";
+  }
+  set queue(value) {
+    if (value === "") this.removeAttribute("queue");
+    else this.setAttribute("queue", value);
+  }
+  /**
+   * D75: draw the roster but not the ready button, for a game that draws its own.
+   *
+   * Mirrors `hide-ready`, and only bites under a `'when-ready'` room — the other two policies have
+   * no ready button to hide.
+   */
+  get hideReady() {
+    return this.hasAttribute("hide-ready");
+  }
+  set hideReady(value) {
+    if (value) this.setAttribute("hide-ready", "");
+    else this.removeAttribute("hide-ready");
+  }
   /** Whether the panel renders inside a fixed full-viewport backdrop. Mirrors `modal`. */
   get modal() {
     return this.hasAttribute("modal");
@@ -671,6 +798,8 @@ var IrtLobbyElement = class extends HTMLElement {
         this.players = countConnected(clients);
       })
     );
+    const lobby = room.lobby;
+    if (lobby) offs.push(lobby.on("change", () => this.render()));
     const detach = () => {
       for (const off of offs) off();
       if (this.#detach === detach) {
@@ -721,6 +850,12 @@ var IrtLobbyElement = class extends HTMLElement {
     } else {
       host = this.#root;
     }
+    const mode = this.#mode();
+    if (mode !== "panel" && this.roomCode === "") {
+      host.append(this.searching ? this.#searchingState(doc) : this.#chooser(doc, mode));
+      host.append(this.#badge(doc));
+      return;
+    }
     const status = this.status;
     const statusRow = doc.createElement("div");
     statusRow.className = "status";
@@ -742,6 +877,7 @@ var IrtLobbyElement = class extends HTMLElement {
       statusRow.append(playersSpan);
     }
     host.append(statusRow);
+    const sharing = mode !== "quick-match-only";
     const code = doc.createElement("button");
     code.type = "button";
     code.className = "code";
@@ -751,7 +887,7 @@ var IrtLobbyElement = class extends HTMLElement {
     code.addEventListener("click", () => {
       void this.#copy(this.roomCode, "room code copied");
     });
-    host.append(code);
+    if (sharing) host.append(code);
     const link = doc.createElement("button");
     link.type = "button";
     link.className = "link";
@@ -761,16 +897,156 @@ var IrtLobbyElement = class extends HTMLElement {
     link.addEventListener("click", () => {
       void this.#copy(this.link, "link copied");
     });
-    host.append(link);
+    if (sharing) host.append(link);
     const toast = doc.createElement("div");
     toast.className = "toast";
     host.append(toast);
-    const canvas = doc.createElement("canvas");
-    canvas.setAttribute("part", "qr");
-    host.append(canvas);
-    if (this.link) this.#drawQr(canvas, this.link);
-    else canvas.hidden = true;
+    if (sharing) {
+      const canvas = doc.createElement("canvas");
+      canvas.setAttribute("part", "qr");
+      host.append(canvas);
+      if (this.link) this.#drawQr(canvas, this.link);
+      else canvas.hidden = true;
+    }
     if (this.nameEntry) host.append(this.#nameForm(doc));
+    this.#renderLobby(doc, host, mode);
+    host.append(this.#badge(doc));
+  }
+  // ---- M6 lane H: lobby front door ----
+  /**
+   * Which of the design's three attribute states this element is in.
+   *
+   * `no-private` alone is the invalid one, and the answer is deliberately today's panel plus one
+   * console warning rather than a throw or a silent reinterpretation: the element is a share panel
+   * a game already has on screen, and breaking it over an attribute pair would take a working
+   * feature away to punish a typo.
+   */
+  #mode() {
+    if (this.quickMatch) return this.noPrivate ? "quick-match-only" : "quick-match";
+    if (this.noPrivate && !warnedNoPrivate.has(this.ownerDocument)) {
+      warnedNoPrivate.add(this.ownerDocument);
+      console.warn(
+        "<irt-lobby>: no-private does nothing without quick-match \u2014 a panel with no private games and no quick match has no way into a game at all. Rendering the ordinary panel."
+      );
+    }
+    return "panel";
+  }
+  /** The pre-room chooser. It emits; it never joins. See the package header for why. */
+  #chooser(doc, mode) {
+    const wrap = doc.createElement("div");
+    wrap.className = "choose";
+    wrap.setAttribute("part", "choose");
+    const join = doc.createElement("button");
+    join.type = "button";
+    join.className = "primary";
+    join.setAttribute("part", "join");
+    join.textContent = "Join a game";
+    join.addEventListener("click", () => {
+      const queue = this.queue;
+      this.dispatchEvent(
+        new CustomEvent("quickmatch", {
+          detail: queue ? { queue } : {},
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    if (mode === "quick-match") {
+      const priv = doc.createElement("button");
+      priv.type = "button";
+      priv.setAttribute("part", "private");
+      priv.textContent = "Start a private lobby";
+      priv.addEventListener("click", () => {
+        this.dispatchEvent(new CustomEvent("private", { bubbles: true, composed: true }));
+      });
+      wrap.append(priv);
+    }
+    wrap.append(join);
+    return wrap;
+  }
+  /** The searching state, with the queue's own numbers when the app has them. */
+  #searchingState(doc) {
+    const wrap = doc.createElement("div");
+    wrap.className = "searching";
+    wrap.setAttribute("part", "searching");
+    wrap.textContent = "finding a game\u2026";
+    const waiting = this.waiting;
+    const of = this.waitingOf;
+    if (waiting !== void 0 && of !== void 0) {
+      const count = doc.createElement("span");
+      count.className = "count";
+      count.setAttribute("part", "waiting");
+      count.textContent = `${waiting} of ${of} waiting`;
+      wrap.append(count);
+    }
+    return wrap;
+  }
+  /**
+   * The roster, the ready button and the public toggle, for a room that exposes a lobby.
+   *
+   * Three renderings, and which one appears is the ROOM's decision rather than an attribute's.
+   * `readyUi` is true only under a `'when-ready'` policy, and only then is readiness drawn at all;
+   * a room that starts when it is full says so and shows who has arrived; a `'manual'` room shows
+   * the roster alone, because only its own code knows what it is waiting for.
+   */
+  #renderLobby(doc, host, mode) {
+    const lobby = this.#room?.lobby;
+    if (!lobby) return;
+    if (lobby.phase === "started") return;
+    const players = lobby.players;
+    const list = doc.createElement("ul");
+    list.className = "roster";
+    list.setAttribute("part", "roster");
+    for (const [index, player] of players.entries()) {
+      const row = doc.createElement("li");
+      row.dataset.ready = String(lobby.readyUi === true && player.ready === true);
+      row.dataset.me = String(player.me === true);
+      const flag = doc.createElement("span");
+      flag.className = "flag";
+      const label = doc.createElement("span");
+      label.textContent = `player ${index + 1}${player.connected === false ? " (away)" : ""}`;
+      row.append(flag, label);
+      list.append(row);
+    }
+    host.append(list);
+    const note = doc.createElement("div");
+    note.className = "lobby-note";
+    note.setAttribute("part", "lobby-note");
+    const capacity = lobby.capacity ?? 0;
+    note.textContent = lobby.readyUi === true ? `${players.filter((p) => p.ready).length} of ${players.length} ready` : capacity > 0 ? `${players.length}/${capacity} players, starting when full` : `${players.length} ${players.length === 1 ? "player" : "players"}`;
+    host.append(note);
+    if (lobby.readyUi === true && !this.hideReady) {
+      const mine = players.find((p) => p.me === true);
+      const isReady = mine?.ready === true;
+      const button = doc.createElement("button");
+      button.type = "button";
+      button.className = "ready";
+      button.setAttribute("part", "ready");
+      button.setAttribute("aria-pressed", String(isReady));
+      button.textContent = isReady ? "not ready" : "ready";
+      button.addEventListener("click", () => lobby.ready(!isReady));
+      host.append(button);
+    }
+    if (mode === "quick-match" && lobby.setPublic) {
+      const wrap = doc.createElement("label");
+      wrap.className = "toggle";
+      wrap.setAttribute("part", "public-toggle");
+      const box = doc.createElement("input");
+      box.type = "checkbox";
+      box.checked = lobby.public === true;
+      box.addEventListener("change", () => {
+        box.disabled = true;
+        lobby.setPublic?.(box.checked);
+        setTimeout(() => this.render(), PUBLIC_SETTLE_MS);
+      });
+      const text = doc.createElement("span");
+      text.textContent = "anyone can join";
+      wrap.append(box, text);
+      host.append(wrap);
+    }
+  }
+  /** The badge, unchanged; extracted so the chooser can render it too. */
+  #badge(doc) {
     const badge = doc.createElement("div");
     badge.className = "badge";
     badge.setAttribute("part", "badge");
@@ -780,7 +1056,7 @@ var IrtLobbyElement = class extends HTMLElement {
     anchor.rel = "noreferrer";
     anchor.textContent = "multiplayer by irt.io";
     badge.append(anchor);
-    host.append(badge);
+    return badge;
   }
   /** The optional name box. Submitting emits `name` **before** the app joins, which is the point. */
   #nameForm(doc) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irtio/lobby",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "<irt-lobby>: room code, share link, QR, connection status, name entry",
   "license": "MIT",
   "publishConfig": {