castle-web-sdk 0.1.0 → 0.2.0

package/AGENTS.md

@@ -1,24 +1,25 @@
 # Castle Web SDK
 
-Import from `./castle.js` in your project.
+Import from `castle-web-sdk` (or `./castle.js` directly).
 
 ## API
 
-### `initCard()` -> HTMLElement
+### `setup()`
 
-Creates a card-sized container (5:7 aspect ratio) that fills the viewport. Mount your game inside the returned element.
+Connects to the CLI dev server for console log forwarding, screenshot capture, and live reload. Call once at startup.
 
 ```js
-const card = initCard();
-card.appendChild(myGameElement);
+import { setup } from 'castle-web-sdk';
+setup();
 ```
 
-### `enableHotReload()`
+### `initCard()` -> HTMLElement
 
-Polls the CLI dev server for file changes and reloads automatically. Call once at startup.
+Creates a card-sized container (5:7 aspect ratio) that fills the viewport. Mount your game inside the returned element.
 
 ```js
-enableHotReload();
+const card = initCard();
+card.appendChild(myGameElement);
 ```
 
 ### Constants

package/castle.js

@@ -2,35 +2,27 @@
 
 export const CARD_RATIO = 5 / 7;
 
-/**
- * Initialize card-sized rendering.
- * Creates a container div sized to 5:7 ratio that fills the viewport.
- * Returns the container element — mount your game inside it.
- *
- * Usage:
- *   const container = castle.initCard();
- *   container.innerHTML = '<h1>My Game</h1>';
- */
+let _ws = null;
+let _logBuffer = [];
+
+export function setup() {
+  _interceptConsole();
+  _connectLocal();
+}
+
+// --- Card shell ---
+
 export function initCard() {
-  // Reset page styles
   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;
-    }
+    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;
-      border-radius: 4% / calc(4% * (5 / 7));
     }
   `;
   document.head.appendChild(style);
@@ -40,45 +32,85 @@ export function initCard() {
   document.body.appendChild(card);
 
   function resize() {
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-
-    let w, h;
-    if (vw / vh < CARD_RATIO) {
-      // Width-limited
-      w = vw;
-      h = vw / CARD_RATIO;
-    } else {
-      // Height-limited
-      h = vh;
-      w = vh * CARD_RATIO;
+    if (window.CastleEmbed) {
+      card.style.width = '100vw';
+      card.style.height = '100vh';
+      return;
     }
-
-    card.style.width = `${w}px`;
-    card.style.height = `${h}px`;
+    const maxW = 450, maxH = 630, pad = 20;
+    const aw = window.innerWidth - pad * 2;
+    const ah = window.innerHeight - pad * 2;
+    let w, h;
+    if (aw / ah < 5 / 7) { w = Math.min(aw, maxW); h = w * 7 / 5; }
+    else { h = Math.min(ah, maxH); w = h * 5 / 7; }
+    card.style.width = w + 'px';
+    card.style.height = h + 'px';
   }
-
   resize();
   window.addEventListener('resize', resize);
 
   return card;
 }
 
-/**
- * Enable hot reload. Polls the CLI dev server for file changes.
- */
-export function enableHotReload() {
-  let version = 0;
-  async function poll() {
-    try {
-      const res = await fetch(`/__version?v=${version}`);
-      const data = await res.json();
-      if (version > 0 && data.version > version) {
-        location.reload();
-      }
-      version = data.version;
-    } catch {}
-    setTimeout(poll, 100);
+// --- Console log forwarding ---
+
+const _origLog = console.log;
+const _origWarn = console.warn;
+const _origError = console.error;
+
+function _sendMsg(msg) {
+  if (_ws && _ws.readyState === WebSocket.OPEN) {
+    _ws.send(JSON.stringify(msg));
+  } else {
+    _logBuffer.push(msg);
   }
-  poll();
+}
+
+function _interceptConsole() {
+  console.log = (...args) => { _origLog(...args); _sendMsg({ type: 'log', level: 'log', msg: args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' ') }); };
+  console.warn = (...args) => { _origWarn(...args); _sendMsg({ type: 'log', level: 'warn', msg: args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' ') }); };
+  console.error = (...args) => { _origError(...args); _sendMsg({ type: 'log', level: 'error', msg: args.map(a => typeof a === 'string' ? a : JSON.stringify(a)).join(' ') }); };
+}
+
+// --- Screenshot ---
+
+async function _captureScreenshot() {
+  const canvas = document.querySelector('canvas');
+  if (canvas) return canvas.toDataURL('image/png');
+  try {
+    const { default: html2canvas } = await import('https://esm.sh/html2canvas');
+    const c = await html2canvas(document.body);
+    return c.toDataURL('image/png');
+  } catch { return null; }
+}
+
+// --- Local WebSocket ---
+
+function _connectLocal() {
+  fetch('/__castle/ws-port')
+    .then(r => r.json())
+    .then(({ port }) => {
+      if (!port) return;
+      const ws = new WebSocket(`ws://localhost:${port}`);
+      ws.onopen = () => {
+        _ws = ws;
+        for (const msg of _logBuffer) _ws.send(JSON.stringify(msg));
+        _logBuffer = [];
+      };
+      ws.onmessage = (evt) => {
+        try {
+          const msg = JSON.parse(evt.data);
+          if (msg.type === 'screenshot_request') {
+            _captureScreenshot().then(data => {
+              if (data) _sendMsg({ type: 'screenshot_response', requestId: msg.requestId, data });
+            });
+          } else if (msg.type === 'restart') {
+            location.reload();
+          }
+        } catch {}
+      };
+      ws.onclose = () => { _ws = null; setTimeout(_connectLocal, 2000); };
+      ws.onerror = () => ws.close();
+    })
+    .catch(() => {});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-sdk",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "castle.js",
   "exports": {