castle-web-sdk 0.1.0

package/AGENTS.md

@@ -0,0 +1,26 @@
+# Castle Web SDK
+
+Import from `./castle.js` in your project.
+
+## API
+
+### `initCard()` -> HTMLElement
+
+Creates a card-sized container (5:7 aspect ratio) that fills the viewport. Mount your game inside the returned element.
+
+```js
+const card = initCard();
+card.appendChild(myGameElement);
+```
+
+### `enableHotReload()`
+
+Polls the CLI dev server for file changes and reloads automatically. Call once at startup.
+
+```js
+enableHotReload();
+```
+
+### Constants
+
+- `CARD_RATIO` — `5 / 7`

package/castle.js

@@ -0,0 +1,84 @@
+// Castle Web SDK
+
+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>';
+ */
+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;
+    }
+    #castle-card {
+      position: relative;
+      overflow: hidden;
+      background: #121213;
+      border-radius: 4% / calc(4% * (5 / 7));
+    }
+  `;
+  document.head.appendChild(style);
+
+  const card = document.createElement('div');
+  card.id = 'castle-card';
+  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;
+    }
+
+    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);
+  }
+  poll();
+}

package/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "castle-web-sdk",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "castle.js",
+  "exports": {
+    ".": "./castle.js"
+  }
+}