@puzzmo/sdk 1.0.16 → 1.0.17

package/README.md

@@ -189,6 +189,39 @@ This and the editor bundle are separate JavaScript files from your main game.
 
 There are Vite plugins to make this easy, but otherwise, they should be files in your upload named `app-bundle.js` and `editor-bundle.js` with ESM exports which match the shapes of the TypeScript types.
 
+### Thumbnail JSX
+
+We have found over time that using JSX for thumbnails makes it a lot easier to ensure correct SVG output, but React/Preact are big runtimes, so we have a smaller JSX runtime built just for non-interactive SVGs based on [understated](https://github.com/callmecavs/understated).
+
+To use it, configure your file's JSX pragma to use `h` and `render` from `@puzzmo/sdk/svgJSX`:
+
+```tsx
+/** @jsxRuntime classic @jsx h */
+import { h, render } from "@puzzmo/sdk/svgJSX"
+
+// Needed for fragments
+const React = { Fragment: "g" }
+
+export function renderThumbnail(puzzleStr: string, inputStr?: string, config?: ThumbnailConfig): string {
+  const puzzle = JSON.parse(puzzleStr)
+  const size = 200
+
+  const svg = (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${size} ${size}`}>
+      <rect width={size} height={size} fill={config?.theme?.g_bg ?? "#1a1a2e"} />
+      <text x={size / 2} y={size / 2} textAnchor="middle" fill={config?.theme?.fg ?? "#fff"} fontSize="24">
+        {puzzle.title}
+      </text>
+    </svg>
+  )
+
+  const el = render(svg)
+  return el instanceof Element ? el.outerHTML : ""
+}
+```
+
+The `h` function is a JSX factory that creates virtual DOM nodes, and `render` converts them into real DOM elements. Since thumbnails can run server-side or in a DOM-shimmed environment, the result is serialized to an SVG string via `outerHTML`.
+
 ## Editor Integration
 
 For games that support puzzle editing in Puzzmo Workshop, you will need an Editor Bundle:

package/dist/{createSimulator-IMuPxYe-.js → createSimulator-BwucCTnM.js}

@@ -993,10 +993,7 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 	return crypto.getRandomValues(e), Array.from(e, (e) => e.toString(16).padStart(2, "0")).join("");
 }, W = "puzzmo_sim_oauth_token", G = "puzzmo_sim_oauth_refresh_token", K = (e) => localStorage.setItem(W, e), ue = (e) => localStorage.setItem(G, e), q = () => {
 	let e = localStorage.getItem(W);
-	return console.log("[AuthView] getAccessToken:", {
-		TOKEN_KEY: W,
-		token: e ? `${e.substring(0, 20)}...` : null
-	}), e;
+	return e && `${e.substring(0, 20)}`, e;
 }, J = () => localStorage.getItem(G), Y = () => {
 	localStorage.removeItem(W), localStorage.removeItem(G);
 }, de = () => {
@@ -1016,7 +1013,7 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 }, pe = function() {
 	var t = e(function* () {
 		let e = J();
-		if (!e) return console.log("[AuthView] No refresh token available"), !1;
+		if (!e) return !1;
 		let t = H();
 		try {
 			let n = new URLSearchParams({
@@ -1028,14 +1025,14 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 				headers: { "Content-Type": "application/x-www-form-urlencoded" },
 				body: n.toString()
 			});
-			if (!r.ok) return console.error("[AuthView] Failed to refresh token:", r.statusText), !1;
+			if (!r.ok) return r.statusText, !1;
 			let i = yield r.json(), a = i.access_token || i.accessToken;
-			if (!a) return console.error("[AuthView] No access token in refresh response"), !1;
+			if (!a) return !1;
 			K(a);
 			let o = i.refresh_token || i.refreshToken;
-			return o && ue(o), console.log("[AuthView] Successfully refreshed access token"), !0;
+			return o && ue(o), !0;
 		} catch (e) {
-			return console.error("[AuthView] Error refreshing token:", e), !1;
+			return !1;
 		}
 	});
 	return function() {
@@ -1044,7 +1041,7 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 }(), me = function() {
 	var t = e(function* (e, t) {
 		let n = H(), r = sessionStorage.getItem("oauth_state");
-		if (!r || r !== t) return console.error("OAuth state mismatch - possible CSRF attack"), null;
+		if (!r || r !== t) return null;
 		sessionStorage.removeItem("oauth_state");
 		try {
 			let t = new URLSearchParams({
@@ -1057,9 +1054,9 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 				headers: { "Content-Type": "application/x-www-form-urlencoded" },
 				body: t.toString()
 			});
-			return r.ok ? yield r.json() : (console.error("Failed to exchange code for token:", r.statusText), null);
+			return r.ok ? yield r.json() : (r.statusText, null);
 		} catch (e) {
-			return console.error("Error exchanging code for token:", e), null;
+			return null;
 		}
 	});
 	return function(e, n) {
@@ -1069,7 +1066,7 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 	var t = e(function* (e, t = {}) {
 		let n = H(), r = q();
 		if (!r) throw Error("Not authenticated");
-		if (fe(r)) if (console.log("[AuthView] Access token expired, attempting refresh..."), yield pe()) {
+		if (fe(r)) if (yield pe()) {
 			if (r = q(), !r) throw Error("Token refresh succeeded but no token available");
 		} else throw Y(), Error("Session expired. Please log in again.");
 		let i = yield fetch(`${n.apiURL}/graphql`, {
@@ -1092,13 +1089,10 @@ var F = "puzzmo_sim_api_mode", I = "http://localhost:8911", L = "https://api.puz
 	};
 }(), ge = (e) => {
 	try {
-		console.log("[AuthView] decodeJWT input:", e);
 		let t = e.split(".");
-		if (console.log("[AuthView] JWT parts:", t.length), t.length !== 3) return null;
-		let n = JSON.parse(atob(t[1]));
-		return console.log("[AuthView] JWT payload:", n), n;
+		return t.length, t.length === 3 ? JSON.parse(atob(t[1])) : null;
 	} catch (e) {
-		return console.error("[AuthView] decodeJWT error:", e), null;
+		return null;
 	}
 };
 function _e() {
@@ -1110,7 +1104,7 @@ function _e() {
 			let e = q(), t = !!e, n = R(), r = n === "dev" ? I : L, i = `<button class="simulator-btn tiny" id="auth-dev-toggle" style="display: none;">${n === "dev" ? "Using Dev" : "Dev"}</button>`;
 			if (t) {
 				let t = ge(e), n = t != null && t.exp ? (/* @__PURE__ */ new Date(t.exp * 1e3)).toLocaleString() : "Unknown", a = !!J(), o = a ? ge(J()) : null, s = o != null && o.exp ? (/* @__PURE__ */ new Date(o.exp * 1e3)).toLocaleString() : null;
-				return console.log({ decoded: t }), `
+				return `
           <div class="simulator-section">
             <div class="simulator-section-title auth-title-row">
               <span>Puzzmo Authentication</span>
@@ -1408,12 +1402,91 @@ function Ne() {
 		}
 	};
 }
+/** Renders a single keyboard key as an HTML button string */
+var Pe = (e, t) => {
+	var n, r;
+	let i = (n = t.symbols[e]) == null ? e : n, a = t.disabled.includes(e), o = t.highlight.includes(e), s = t.xl.includes(e), c = t.l.includes(e), l = (r = t.flexGrowSymbols) == null ? void 0 : r.includes(e);
+	return `<button class="${[
+		"sim-kb-key",
+		a ? "disabled" : "",
+		o ? "highlight" : "",
+		s ? "xl" : "",
+		c ? "l" : "",
+		l ? "grow" : ""
+	].filter(Boolean).join(" ")}" data-key="${e}" ${a ? "disabled" : ""}>${i}</button>`;
+}, Fe = (e) => `<div class="sim-kb">${e.layout.filter((e) => e != null).map((t) => `<div class="sim-kb-row">${[...t].map((t) => Pe(t, e)).join("")}</div>`).join("")}</div>`;
+function Ie() {
+	let e = null, t = () => e ? Fe(e) : "<div class=\"sim-kb-empty\">No keyboard config received from game yet.<br>The game calls <code>sdk.keyboard.show(config)</code> to display a keyboard.</div>";
+	return {
+		id: "kbd",
+		label: "Kbd",
+		render() {
+			return `
+        <div class="keyboard-view-container">
+          <div id="sim-kb-content">
+            ${t()}
+          </div>
+        </div>
+      `;
+		},
+		bind(e) {
+			Le(e);
+		},
+		onMessage(n, r, i) {
+			var a;
+			if (n !== "KEYBOARD_UPDATE_CONFIG") return;
+			e = !(!(r == null || (a = r.layout) == null) && a.length) || r.layout.every((e) => !e) ? null : r;
+			let o = i.getElement("#sim-kb-content");
+			o && (o.innerHTML = t(), Le(i)), i.updateBadge("kbd", void 0);
+		}
+	};
+}
+/** Attach click handlers to all rendered keys */
+function Le(e) {
+	var t;
+	let n = (t = e.getElement("#sim-kb-content")) == null ? void 0 : t.querySelectorAll(".sim-kb-key");
+	n == null || n.forEach((t) => {
+		t.addEventListener("click", () => {
+			let n = t.getAttribute("data-key");
+			n && e.sendToGame("KEYBOARD_KEY_PRESS", { key: n });
+		});
+	});
+}
 var $ = null;
 /**
-* Creates the Simulator UI and message handling.
-* If called multiple times, updates the existing instance with new settings (e.g., fixtures).
+* Simulator - A development UI for testing games with the Puzzmo Proto SDK.
+*
+* This script simulates the Puzzmo host environment by:
+* - Listening for READY messages from the game
+* - Sending READY_DATA with puzzle data
+* - Providing UI controls for START_GAME, PAUSE_GAME, RESUME_GAME, RETRY_PUZZLE
+*
+* Usage with Vite plugin (recommended):
+*
+* ```ts
+* // vite.config.ts
+* import { puzzmoSimulator } from "@puzzmo/sdk/vite"
+* export default defineConfig({
+*   plugins: [puzzmoSimulator({})]
+* })
+* ```
+*
+* The plugin automatically reads the game slug from the nearest puzzmo.json.
+*
+* The plugin handles making sure it is removed on vite builds.
+*
+* Usage with manual imports:
+* ```html
+* <script type="module">
+*   import { createSimulator } from "@puzzmo/sdk/simulator"
+*   const fixtures = import.meta.glob("./fixtures/puzzles/**\/*.json", { eager: true })
+*   createSimulator({ fixtures })
+* <\/script>
+* ```
+* The fixtures folder structure should be: fixtures/puzzles/{category}/{puzzle}.json
+* This will show dropdowns in the Ctrl tab to select category and puzzle.
 */
-function Pe(t = {}) {
+function Re(t = {}) {
 	var n, r;
 	if (console.log("[Simulator] createSimulator called with config:", {
 		slug: t.slug,
@@ -1428,7 +1501,8 @@ function Pe(t = {}) {
 		c,
 		le(),
 		_e(),
-		Ne()
+		Ne(),
+		Ie()
 	], p = f.map((e) => e.id), m = l(t, o, p), h = {
 		pause: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><rect x=\"1\" y=\"1\" width=\"3\" height=\"8\"/><rect x=\"6\" y=\"1\" width=\"3\" height=\"8\"/></svg>",
 		play: "<svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\"><polygon points=\"2,1 9,5 2,9\"/></svg>",
@@ -1468,6 +1542,7 @@ function Pe(t = {}) {
     border-radius: 4px;
     color: var(--sim-text);
     width: 420px;
+    max-width: calc(100vw - 8px);
     box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
   }
   #simulator-panel.collapsed {
@@ -2511,6 +2586,80 @@ function Pe(t = {}) {
     color: var(--sim-text-dim);
     font-size: 9px;
   }
+  /* Keyboard view styles */
+  .keyboard-view-container {
+    padding: 4px;
+  }
+  .sim-kb-empty {
+    color: var(--sim-text-dim);
+    text-align: center;
+    padding: 16px 8px;
+    font-size: 10px;
+    line-height: 1.6;
+  }
+  .sim-kb-empty code {
+    background: var(--sim-bg);
+    padding: 1px 4px;
+    border-radius: 2px;
+    font-size: 10px;
+  }
+  .sim-kb {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .sim-kb-row {
+    display: flex;
+    justify-content: center;
+    gap: 3px;
+  }
+  .sim-kb-key {
+    min-width: 28px;
+    height: 30px;
+    padding: 0 4px;
+    border: 1px solid var(--sim-border);
+    border-radius: 3px;
+    background: var(--sim-bg);
+    color: var(--sim-text);
+    font: inherit;
+    font-size: 11px;
+    text-transform: uppercase;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .sim-kb-key:hover {
+    background: var(--sim-bg-alt);
+    border-color: var(--sim-border-light);
+  }
+  .sim-kb-key:active {
+    background: var(--sim-accent);
+    color: var(--sim-panel);
+  }
+  .sim-kb-key.highlight {
+    background: var(--sim-bg-alt);
+    border-color: var(--sim-accent);
+    color: var(--sim-accent);
+    font-size: 9px;
+  }
+  .sim-kb-key.highlight:active {
+    background: var(--sim-accent);
+    color: var(--sim-panel);
+  }
+  .sim-kb-key.l {
+    min-width: 40px;
+  }
+  .sim-kb-key.xl {
+    min-width: 52px;
+  }
+  .sim-kb-key.grow {
+    flex: 1;
+  }
+  .sim-kb-key.disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
 </style>
     <div id="simulator-panel" class="${m.isCollapsed ? "collapsed" : ""}">
       <div id="simulator-header">
@@ -2743,6 +2892,6 @@ function Pe(t = {}) {
 		loadPuzzle: I
 	}, $;
 }
-export { Pe as t };
+export { Re as t };
 
-//# sourceMappingURL=createSimulator-IMuPxYe-.js.map
+//# sourceMappingURL=createSimulator-BwucCTnM.js.map