Integration builder

# Nothing to install: the screen in the next step loads the SDK with one script tag.
# Prefer a bundler? npm install playmez-embed

<!-- playmez.html: your games screen. It calls only your own server (/playmez/…), never Playmez with a key. -->
<script src="https://playmez.com/sdk/playmez.js"></script>

<section id="playmez-lobby">
  <h2>Games</h2>
  <ul id="playmez-games"></ul>
</section>
<p id="playmez-message" role="status"></p>
<div id="playmez-frame"></div>

<script>
  const GAMES = [
    { id: "ludo", name: "Ludo", height: 720, modes: ["computer"] },
  ];
  const MODE_LABEL = { computer: "vs computer" };
  const $ = (id) => document.getElementById(id);
  const say = (text) => ($("playmez-message").textContent = text);
  let current = null;

  /** Calls your server, signed in as your user; a failure throws its code (INVALID_CODE, ROOM_CLOSED, …). */
  async function server(method, path, body) {
    const res = await fetch("/playmez" + path, {
      method,
      credentials: "same-origin",
      headers: { "Content-Type": "application/json" },
      body: body === undefined ? undefined : JSON.stringify(body),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.code || "FAILED");
    return data;
  }

  function button(label, onClick) {
    const b = document.createElement("button");
    b.type = "button";
    b.textContent = label;
    b.addEventListener("click", onClick);
    return b;
  }

  /** Back to the lobby: removes the frame and shows the list again. */
  function back(text = "") {
    current?.unmount();
    current = null;
    $("playmez-lobby").hidden = false;
    say(text);
  }

  /** Hides the lobby and opens a launch URL; leaving the game brings the lobby back. */
  function open(launchUrl, height = 720) {
    $("playmez-lobby").hidden = true;
    current = Playmez.mount($("playmez-frame"), {
      launchUrl,
      height,
      onEvent: (e) => {
        if (e.type === "close") back();
        if (e.type === "error") back("That did not open (" + e.code + "). Try again.");
      },
    });
  }

  async function play(game, mode) {
    say("Opening " + game.name + "…");
    try {
      const { launchUrl } = await server("POST", "/launch", { game: game.id, mode });
      open(launchUrl, game.height);
      say("");
    } catch (err) {
      say("Could not open " + game.name + " (" + err.message + ").");
    }
  }

  for (const game of GAMES) {
    const li = document.createElement("li");
    li.append(game.name, " ", ...game.modes.map((mode) => button(MODE_LABEL[mode], () => play(game, mode))));
    $("playmez-games").append(li);
  }
</script>