pike/glyph Public Public: anyone can read this; nobody can change it.

// What only a script can add to the page; without it the page still draws,

// saves and switches palettes by link.

//   - Copy: the SVG, in the palette on screen, onto the clipboard.

//   - Palettes swap in place (the address keeps the choice, so a live

//     refresh and a reload render the same one).

//   - The example prompts fill the box; a drawing in progress counts up.

const board = () => document.getElementById("board");

async function swapIn(url) {

  const response = await fetch(url, { headers: { accept: "text/html" } });

  const fresh = new DOMParser().parseFromString(await response.text(), "text/html");

  for (const id of ["board", "palettes"]) {

    const next = fresh.getElementById(id);

    const here = document.getElementById(id);

    if (next && here) here.replaceWith(next);

  }

  wake();

}

document.addEventListener("click", async (event) => {

  const swatch = event.target.closest("[data-palette]");

  if (swatch) {

    event.preventDefault();

    const url = new URL(location.href);

    url.searchParams.set("palette", swatch.dataset.palette);

    history.replaceState(null, "", url);

    try {

      localStorage.setItem("glyph.palette", swatch.dataset.palette);

    } catch {}

    await swapIn(url);

    return;

  }

  const copy = event.target.closest(".js-copy");

  if (copy) {

    const said = copy.textContent;

    try {

      const svg = fetch(copy.dataset.href).then((r) => r.text());

      // Safari keeps the click's permission only for a ClipboardItem given a promise.

      if (window.ClipboardItem)

        await navigator.clipboard.write([

          new ClipboardItem({ "text/plain": svg.then((t) => new Blob([t], { type: "text/plain" })) }),

        ]);

      else await navigator.clipboard.writeText(await svg);

      copy.textContent = "Copied";

    } catch {

      copy.textContent = "Couldn't copy";

    }

    setTimeout(() => (copy.textContent = said), 1600);

    return;

  }

  const example = event.target.closest("[data-example]");

  if (example) {

    const box = document.getElementById("prompt");

    if (box) {

      box.value = example.dataset.example;

      box.focus();

    }

  }

});

// Enter draws; shift+enter is a new line.

document.addEventListener("keydown", (event) => {

  if (event.target.id === "prompt" && event.key === "Enter" && !event.shiftKey) {

    event.preventDefault();

    event.target.form.requestSubmit();

  }

});

function wake() {

  for (const el of document.querySelectorAll(".js-copy, .examples")) el.hidden = false;

}

// A drawing in progress says how long it has been at it.

setInterval(() => {

  for (const el of document.querySelectorAll("[data-since]")) {

    const s = Math.max(0, Math.round((Date.now() - Date.parse(el.dataset.since)) / 1000));

    el.textContent = `Claude is drawing… ${s}s`;

  }

}, 1000);

// live.js swaps the board when a drawing changes: wake what it brought.

new MutationObserver(wake).observe(document.body, { childList: true, subtree: true });

// The palette last picked, when the address names none.

try {

  const kept = localStorage.getItem("glyph.palette");

  const url = new URL(location.href);

  if (kept && !url.searchParams.has("palette") && board()) {

    url.searchParams.set("palette", kept);

    history.replaceState(null, "", url);

    swapIn(url);

  }

} catch {}

wake();