castle-web-sdk 0.4.0 → 0.4.2

package/src/runtime.ts

@@ -0,0 +1,345 @@
+import { getCastleEmbed, isEdit } from "./context";
+
+export const CARD_RATIO = 5 / 7;
+
+interface PendingRequest {
+  resolve: (msg: LocalResponse) => void;
+  reject: (err: Error) => void;
+  timeout: ReturnType<typeof setTimeout>;
+}
+
+interface OutgoingMessage {
+  type: string;
+  [key: string]: unknown;
+}
+
+interface LocalResponse {
+  type: string;
+  requestId?: string;
+  ok?: boolean;
+  error?: string;
+  [key: string]: unknown;
+}
+
+interface IncomingMessage {
+  type: string;
+  requestId?: string;
+  [key: string]: unknown;
+}
+
+interface WsPortResponse {
+  port?: number;
+  path?: string;
+}
+
+let ws: WebSocket | null = null;
+let logBuffer: OutgoingMessage[] = [];
+let nextRequestId = 1;
+const pendingRequests = new Map<string, PendingRequest>();
+
+const origLog = console.log;
+const origWarn = console.warn;
+const origError = console.error;
+
+// Indirected dynamic import so deck bundlers don't statically rewrite it.
+// eslint-disable-next-line @typescript-eslint/no-implied-eval
+const dynamicImport = new Function("u", "return import(u)") as (
+  url: string,
+) => Promise<unknown>;
+
+export function setup(): void {
+  interceptConsole();
+  connectLocal();
+  initPlayCard();
+}
+
+export function writeFile(
+  path: string,
+  contents: string,
+): Promise<LocalResponse> {
+  return sendLocalRequest({
+    type: "write_file",
+    path,
+    contents,
+  });
+}
+
+export function initCard(): HTMLDivElement {
+  const style = document.createElement("style");
+  style.textContent = `
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; background: #000; overflow: hidden; }
+    body { display: flex; align-items: center; justify-content: center; }
+    #castle-card {
+      position: relative;
+      border-radius: 4% / calc(4% * (5 / 7));
+      overflow: hidden;
+      background: #121213;
+    }
+  `;
+  document.head.appendChild(style);
+
+  const card = document.createElement("div");
+  card.id = "castle-card";
+  document.body.appendChild(card);
+
+  function resize(): void {
+    if (getCastleEmbed()?.feed === true) {
+      card.style.width = "100vw";
+      card.style.height = "100vh";
+      return;
+    }
+    const { w, h } = computeCardSize();
+    card.style.width = w + "px";
+    card.style.height = h + "px";
+  }
+  resize();
+  window.addEventListener("resize", resize);
+
+  return card;
+}
+
+// Constrains whatever the deck renders into #root to a centered 5:7 card.
+// The mobile feed host card-sizes its WebView itself, and the editor needs the
+// full viewport, so the card shell applies only to standalone play.
+function initPlayCard(): void {
+  if (isEdit()) return;
+  if (getCastleEmbed()?.feed === true) return;
+
+  const style = document.createElement("style");
+  style.textContent = `
+    html, body { background: #000; }
+    #root > * {
+      position: fixed !important;
+      inset: auto !important;
+      left: 50% !important;
+      top: 50% !important;
+      transform: translate(-50%, -50%) !important;
+      width: var(--castle-card-w, 100vw) !important;
+      height: var(--castle-card-h, 100vh) !important;
+      border-radius: 4% / calc(4% * (5 / 7)) !important;
+      overflow: hidden !important;
+    }
+  `;
+  document.head.appendChild(style);
+
+  function resize(): void {
+    const { w, h } = computeCardSize();
+    document.documentElement.style.setProperty("--castle-card-w", w + "px");
+    document.documentElement.style.setProperty("--castle-card-h", h + "px");
+  }
+  resize();
+  window.addEventListener("resize", resize);
+}
+
+function computeCardSize(): { w: number; h: number } {
+  const maxW = 450;
+  const maxH = 630;
+  const pad = 20;
+  const aw = window.innerWidth - pad * 2;
+  const ah = window.innerHeight - pad * 2;
+  let w: number;
+  let h: number;
+  if (aw / ah < CARD_RATIO) {
+    w = Math.min(aw, maxW);
+    h = w / CARD_RATIO;
+  } else {
+    h = Math.min(ah, maxH);
+    w = h * CARD_RATIO;
+  }
+  return { w, h };
+}
+
+function sendMsg(msg: OutgoingMessage): void {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(msg));
+  } else {
+    logBuffer.push(msg);
+  }
+}
+
+function sendLocalRequest(msg: OutgoingMessage): Promise<LocalResponse> {
+  if (!ws || ws.readyState !== WebSocket.OPEN) {
+    return Promise.reject(new Error("Castle local CLI is not connected."));
+  }
+
+  const requestId = `req_${nextRequestId++}`;
+  const request = { ...msg, requestId };
+  return new Promise<LocalResponse>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      pendingRequests.delete(requestId);
+      reject(new Error(`Timed out waiting for ${msg.type}.`));
+    }, 10000);
+    pendingRequests.set(requestId, { resolve, reject, timeout });
+    ws!.send(JSON.stringify(request));
+  });
+}
+
+function resolveLocalRequest(msg: LocalResponse): boolean {
+  if (!msg.requestId) return false;
+  const pending = pendingRequests.get(msg.requestId);
+  if (!pending) return false;
+  clearTimeout(pending.timeout);
+  pendingRequests.delete(msg.requestId);
+  if (msg.ok) {
+    pending.resolve(msg);
+  } else {
+    pending.reject(new Error(msg.error || "Castle local request failed."));
+  }
+  return true;
+}
+
+function interceptConsole(): void {
+  console.log = (...args: unknown[]): void => {
+    origLog(...args);
+    sendMsg({ type: "log", level: "log", msg: formatConsoleArgs(args) });
+  };
+  console.warn = (...args: unknown[]): void => {
+    origWarn(...args);
+    sendMsg({ type: "log", level: "warn", msg: formatConsoleArgs(args) });
+  };
+  console.error = (...args: unknown[]): void => {
+    origError(...args);
+    sendMsg({ type: "log", level: "error", msg: formatConsoleArgs(args) });
+  };
+}
+
+function formatConsoleArgs(args: unknown[]): string {
+  return args
+    .map((arg) => {
+      if (typeof arg === "string") return arg;
+      if (arg instanceof Error) return arg.stack || arg.message;
+      try {
+        const json = JSON.stringify(arg);
+        return json ?? String(arg);
+      } catch {
+        return String(arg);
+      }
+    })
+    .join(" ");
+}
+
+async function captureWithHtml2Canvas(
+  target: HTMLElement,
+): Promise<string | null> {
+  try {
+    const mod = (await dynamicImport("https://esm.sh/html2canvas")) as {
+      default: (
+        el: HTMLElement,
+        opts: Record<string, unknown>,
+      ) => Promise<HTMLCanvasElement>;
+    };
+    const c = await mod.default(target, {
+      backgroundColor: null,
+      scale: devicePixelRatio,
+      useCORS: true,
+    });
+    return c.toDataURL("image/png");
+  } catch {
+    return null;
+  }
+}
+
+async function captureScreenshot(): Promise<string | null> {
+  const card = document.getElementById("castle-card");
+  const canvas = document.querySelector("canvas");
+  if (document.body?.dataset.castleScreenshotTarget === "viewport") {
+    const viewportCapture = await captureWithHtml2Canvas(document.body);
+    if (viewportCapture) return viewportCapture;
+  }
+  if (card && canvas) {
+    const cardRect = card.getBoundingClientRect();
+    const c = document.createElement("canvas");
+    c.width = cardRect.width * devicePixelRatio;
+    c.height = cardRect.height * devicePixelRatio;
+    const ctx = c.getContext("2d")!;
+    const canvasRect = canvas.getBoundingClientRect();
+    const dx = (canvasRect.left - cardRect.left) * devicePixelRatio;
+    const dy = (canvasRect.top - cardRect.top) * devicePixelRatio;
+    ctx.drawImage(
+      canvas,
+      dx,
+      dy,
+      canvasRect.width * devicePixelRatio,
+      canvasRect.height * devicePixelRatio,
+    );
+    return c.toDataURL("image/png");
+  }
+  if (canvas) return canvas.toDataURL("image/png");
+  return captureWithHtml2Canvas(card || document.body);
+}
+
+function connectLocal(): void {
+  fetch("/__castle/ws-port")
+    .then((r) => r.json() as Promise<WsPortResponse>)
+    .then(({ port, path }) => {
+      if (!port && !path) return;
+      const socket = new WebSocket(
+        path ? localWsUrl(path) : `ws://localhost:${port}`,
+      );
+      socket.onopen = (): void => {
+        ws = socket;
+        for (const msg of logBuffer) ws.send(JSON.stringify(msg));
+        logBuffer = [];
+      };
+      socket.onmessage = (evt: MessageEvent): void => {
+        try {
+          const msg = JSON.parse(evt.data as string) as IncomingMessage;
+          handleLocalMessage(msg);
+        } catch {
+          // ignore malformed messages
+        }
+      };
+      socket.onclose = (): void => {
+        ws = null;
+        for (const [requestId, pending] of pendingRequests) {
+          clearTimeout(pending.timeout);
+          pending.reject(new Error("Castle local CLI disconnected."));
+          pendingRequests.delete(requestId);
+        }
+        setTimeout(connectLocal, 2000);
+      };
+      socket.onerror = (): void => socket.close();
+    })
+    .catch(() => {});
+}
+
+function handleLocalMessage(msg: IncomingMessage): void {
+  if (msg.type === "screenshot_request") {
+    void captureScreenshot()
+      .then((data) => {
+        if (data) {
+          sendMsg({
+            type: "screenshot_response",
+            requestId: msg.requestId,
+            data,
+          });
+          return;
+        }
+        sendMsg({
+          type: "screenshot_response",
+          requestId: msg.requestId,
+          ok: false,
+          error: "Could not capture screenshot.",
+        });
+      })
+      .catch((error: unknown) => {
+        sendMsg({
+          type: "screenshot_response",
+          requestId: msg.requestId,
+          ok: false,
+          error: error instanceof Error ? error.message : "Could not capture screenshot.",
+        });
+      });
+  } else if (msg.type === "restart") {
+    location.reload();
+  } else if (msg.type === "write_file_response") {
+    resolveLocalRequest(msg);
+  }
+}
+
+function localWsUrl(path: string): string {
+  const url = new URL(path, location.href);
+  url.protocol = location.protocol === "https:" ? "wss:" : "ws:";
+  return url.href;
+}