@puzzmo/cli 1.0.37 → 1.0.39

package/templates/minesweeper/src/appBundle.ts

@@ -0,0 +1,122 @@
+import type { AppBundle, ThumbnailConfig } from "@puzzmo/sdk"
+import { svgFontFaceCSSRaw } from "@puzzmo/sdk/fonts"
+import { createEncoder, defineSchema } from "@puzzmo/sdk/inputs"
+
+type Puzzle = { rows: number; cols: number; mines: [number, number][] }
+type State = { revealed: boolean[]; flagged: boolean[] }
+
+/** Mirrors the schema in src/main.ts so a saved input string round-trips here too. */
+const stateSchema = defineSchema<State>({
+  version: 1,
+  fields: {
+    revealed: { type: "bitArray" },
+    flagged: { type: "bitArray" },
+  },
+})
+
+const escapeXml = (s: string) => s.replace(/[<>&"']/g, (c) => `&#${c.charCodeAt(0)};`)
+
+/**
+ * Renders a small SVG preview of the puzzle. When an `inputStr` is supplied the
+ * preview reflects the player's progress; otherwise it shows a blank board.
+ *
+ * The host renders this in lists/share cards/completion screens — there's no DOM,
+ * no animation, no theme variables. We bake colors from `config.theme` directly.
+ */
+export const renderThumbnail: AppBundle["renderThumbnail"] = (puzzleStr: string, inputStr?: string, config?: ThumbnailConfig): string => {
+  const puzzle = JSON.parse(puzzleStr) as Puzzle
+  const { rows, cols } = puzzle
+  const cells = rows * cols
+  const mineSet = new Set(puzzle.mines.map(([r, c]) => r * cols + c))
+
+  let revealed: boolean[] = new Array(cells).fill(false)
+  let flagged: boolean[] = new Array(cells).fill(false)
+
+  if (inputStr) {
+    try {
+      const codec = createEncoder(stateSchema, { revealed: { length: cells }, flagged: { length: cells } })
+      const decoded = codec.decode(codec.migrate(inputStr))
+      revealed = decoded.revealed
+      flagged = decoded.flagged
+    } catch {
+      // Bad/old state: fall back to a blank thumbnail.
+    }
+  }
+
+  const theme = config?.theme
+  const bg = theme?.a_bg ?? "#1a1a1a"
+  const cellHidden = theme?.g_unsolved ?? "#3a3a3a"
+  const cellShown = theme?.g_bg ?? "#1f1f1f"
+  const border = theme?.g_outline ?? "#4a4a4a"
+  const mineColor = theme?.error ?? "#ff5555"
+  const flagColor = theme?.subBrand ?? "#ffaa55"
+  const numberColor = theme?.g_textDark ?? "#1b1b28"
+
+  const size = 200
+  const pad = 4
+  const gap = 1
+  const cellW = (size - pad * 2 - gap * (cols - 1)) / cols
+  const cellH = (size - pad * 2 - gap * (rows - 1)) / rows
+
+  const parts: string[] = []
+  parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">`)
+  // Embed the @font-face rule so the SVG renders with Puzzmo's bundled font
+  // even outside the game (host previews, share cards, opengraph).
+  parts.push(`<style>${svgFontFaceCSSRaw(["RedHatMono-Bold"])}</style>`)
+  parts.push(`<rect width="${size}" height="${size}" fill="${escapeXml(bg)}"/>`)
+
+  for (let i = 0; i < cells; i++) {
+    const r = Math.floor(i / cols)
+    const c = i % cols
+    const x = pad + c * (cellW + gap)
+    const y = pad + r * (cellH + gap)
+    const isRevealed = revealed[i]
+    const fill = isRevealed ? cellShown : cellHidden
+    parts.push(
+      `<rect x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${cellW.toFixed(2)}" height="${cellH.toFixed(2)}" fill="${escapeXml(fill)}" stroke="${escapeXml(border)}" stroke-width="0.5"/>`,
+    )
+
+    if (isRevealed && mineSet.has(i)) {
+      const cx = x + cellW / 2
+      const cy = y + cellH / 2
+      const rad = Math.min(cellW, cellH) * 0.25
+      parts.push(`<circle cx="${cx.toFixed(2)}" cy="${cy.toFixed(2)}" r="${rad.toFixed(2)}" fill="${escapeXml(mineColor)}"/>`)
+    } else if (isRevealed && !mineSet.has(i)) {
+      const n = countAdjacent(mineSet, i, rows, cols)
+      if (n > 0) {
+        const cx = x + cellW / 2
+        const cy = y + cellH / 2 + cellH * 0.32
+        const fontSize = Math.min(cellW, cellH) * 0.7
+        parts.push(
+          `<text x="${cx.toFixed(2)}" y="${cy.toFixed(2)}" text-anchor="middle" font-family="RedHatMono-Bold, ui-monospace, monospace" font-size="${fontSize.toFixed(1)}" font-weight="700" fill="${escapeXml(numberColor)}">${n}</text>`,
+        )
+      }
+    } else if (flagged[i]) {
+      const cx = x + cellW / 2
+      const cy = y + cellH / 2 + cellH * 0.32
+      const fontSize = Math.min(cellW, cellH) * 0.7
+      parts.push(
+        `<text x="${cx.toFixed(2)}" y="${cy.toFixed(2)}" text-anchor="middle" font-family="RedHatMono-Bold, ui-monospace, monospace" font-size="${fontSize.toFixed(1)}" fill="${escapeXml(flagColor)}">⚑</text>`,
+      )
+    }
+  }
+
+  parts.push(`</svg>`)
+  return parts.join("")
+}
+
+const countAdjacent = (mineSet: Set<number>, i: number, rows: number, cols: number): number => {
+  const r = Math.floor(i / cols)
+  const c = i % cols
+  let n = 0
+  for (let dr = -1; dr <= 1; dr++) {
+    for (let dc = -1; dc <= 1; dc++) {
+      if (dr === 0 && dc === 0) continue
+      const nr = r + dr
+      const nc = c + dc
+      if (nr < 0 || nr >= rows || nc < 0 || nc >= cols) continue
+      if (mineSet.has(nr * cols + nc)) n++
+    }
+  }
+  return n
+}

package/templates/minesweeper/src/main.ts

@@ -0,0 +1,236 @@
+import { createPuzzmoSDK, type Theme } from "@puzzmo/sdk"
+import { createEncoder, defineSchema, type EncoderResult } from "@puzzmo/sdk/inputs"
+
+/** Decoded puzzle definition shipped from the host. The host serializes this as JSON. */
+type Puzzle = { rows: number; cols: number; mines: [number, number][] }
+
+/** Persisted player progress. `won` is derived, not stored. */
+type State = { revealed: boolean[]; flagged: boolean[] }
+
+const MINE_PENALTY_MS = 60_000
+
+/**
+ * Schema for serializing per-cell boolean state. `bitArray` packs 4 cells per hex char,
+ * so a 16x16 board ≈ 64 chars instead of a multi-kilobyte JSON blob.
+ */
+const stateSchema = defineSchema<State>({
+  version: 1,
+  fields: {
+    revealed: { type: "bitArray" },
+    flagged: { type: "bitArray" },
+  },
+})
+
+/**
+ * Construct the host SDK. Resolves messaging with the embed, manages the timer, and
+ * surfaces lifecycle events ("start", "settingsUpdate", etc.).
+ */
+const sdk = createPuzzmoSDK()
+
+const boardEl = document.getElementById("board")!
+const hudLeftEl = document.getElementById("hudLeft")!
+const hudRightEl = document.getElementById("hudRight")!
+
+let puzzle: Puzzle = { rows: 9, cols: 9, mines: [] }
+let state: State = { revealed: [], flagged: [] }
+let mineSet = new Set<number>()
+let stateCodec: EncoderResult<State> | null = null
+let won = false
+
+/** Maps the Puzzmo Theme onto the CSS custom properties consumed by style.css. */
+const applyTheme = (theme: Theme) => {
+  const r = document.documentElement.style
+  r.setProperty("--bg", theme.a_bg)
+  r.setProperty("--panel", theme.a_infoBG)
+  r.setProperty("--cell", theme.g_unsolved)
+  r.setProperty("--cell-revealed", theme.g_bg)
+  r.setProperty("--border", theme.g_outline)
+  r.setProperty("--text", theme.fg)
+  r.setProperty("--text-on-cell", theme.g_textDark)
+  r.setProperty("--accent", theme.key)
+  r.setProperty("--mine", theme.error)
+  r.setProperty("--flag", theme.subBrand)
+  r.setProperty("--n1", theme.player)
+  r.setProperty("--n2", theme.alt1)
+  r.setProperty("--n3", theme.alt2)
+  r.setProperty("--n4", theme.alt3)
+  r.setProperty("--n5", theme.error)
+  r.setProperty("--n6", theme.keyStrong)
+  r.setProperty("--n7", theme.playerLight)
+  r.setProperty("--n8", theme.alwaysDark)
+}
+
+const idx = (r: number, c: number) => r * puzzle.cols + c
+
+const neighbours = (i: number): number[] => {
+  const r = Math.floor(i / puzzle.cols)
+  const c = i % puzzle.cols
+  const out: number[] = []
+  for (let dr = -1; dr <= 1; dr++) {
+    for (let dc = -1; dc <= 1; dc++) {
+      if (dr === 0 && dc === 0) continue
+      const nr = r + dr
+      const nc = c + dc
+      if (nr < 0 || nr >= puzzle.rows || nc < 0 || nc >= puzzle.cols) continue
+      out.push(idx(nr, nc))
+    }
+  }
+  return out
+}
+
+const countAdjacentMines = (i: number) => neighbours(i).filter((n) => mineSet.has(n)).length
+
+const reveal = (i: number, isUserClick: boolean) => {
+  if (state.revealed[i] || state.flagged[i]) return
+  state.revealed[i] = true
+  if (mineSet.has(i)) {
+    /**
+     * `addPenalty(ms)` adds to the timer's tracked "added time", surfaced separately
+     * in `display()` and reported via `gameCompleted({ additionalTimeAddedSecs })`.
+     */
+    if (isUserClick) sdk.timer.addPenalty(MINE_PENALTY_MS)
+    return
+  }
+  if (countAdjacentMines(i) === 0) for (const n of neighbours(i)) reveal(n, false)
+}
+
+const checkWin = () => {
+  const safe = puzzle.rows * puzzle.cols - mineSet.size
+  let revealedSafe = 0
+  for (let i = 0; i < state.revealed.length; i++) if (state.revealed[i] && !mineSet.has(i)) revealedSafe++
+  if (revealedSafe === safe) won = true
+}
+
+const flaggedCount = () => state.flagged.reduce((acc, v) => acc + (v ? 1 : 0), 0)
+
+const render = () => {
+  boardEl.innerHTML = ""
+  for (let i = 0; i < puzzle.rows * puzzle.cols; i++) {
+    const cell = document.createElement("button")
+    cell.className = "cell"
+    cell.dataset.i = String(i)
+    if (state.revealed[i]) {
+      cell.classList.add("revealed")
+      if (mineSet.has(i)) {
+        cell.classList.add("mine")
+        cell.textContent = "✸"
+      } else {
+        const n = countAdjacentMines(i)
+        if (n > 0) {
+          cell.dataset.n = String(n)
+          cell.textContent = String(n)
+        }
+      }
+    } else if (state.flagged[i]) {
+      cell.classList.add("flagged")
+      cell.textContent = "⚑"
+    }
+    boardEl.appendChild(cell)
+  }
+  if (won) {
+    hudLeftEl.textContent = "completed"
+    hudRightEl.textContent = ""
+  } else {
+    hudLeftEl.textContent = `${mineSet.size} mines`
+    hudRightEl.textContent = `${flaggedCount()} flags`
+  }
+}
+
+/**
+ * Called once on win. Reports gameplay metrics back to the host via:
+ * - `sdk.gameCompleted(gameplay, augmentations)` — durable record + deeds
+ * - `sdk.showCompletionScreen(content, gameplay, completed)` — the host's win UI
+ */
+const onComplete = () => {
+  const elapsed = Math.round(sdk.timer.timeSecs())
+  const penalty = Math.round(sdk.timer.addedTimeSecs())
+  const data = { elapsedTimeSecs: elapsed, additionalTimeAddedSecs: penalty, pointsAwarded: 0, completed: true }
+  sdk.gameCompleted(data, { deeds: [] })
+  sdk.showCompletionScreen([{ type: "md", text: penalty > 0 ? `**Cleared!** With ${penalty}s in penalties.` : "**Cleared!**" }], data, true)
+}
+
+const persistState = () => {
+  if (!stateCodec) return
+  /**
+   * `sdk.updateGameState(string)` ships an opaque string back to the host so progress
+   * survives a reload. We use the SDK's input encoder for compactness over JSON.
+   */
+  sdk.updateGameState(stateCodec.encode(state))
+}
+
+const handleClick = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+  if (!target.classList.contains("cell")) return
+  if (won) return
+  const i = Number(target.dataset.i)
+  if (e.shiftKey || e.button === 2) {
+    if (!state.revealed[i]) state.flagged[i] = !state.flagged[i]
+  } else {
+    reveal(i, true)
+    checkWin()
+  }
+  persistState()
+  render()
+  if (won) onComplete()
+}
+
+const blankState = (cells: number): State => ({ revealed: new Array(cells).fill(false), flagged: new Array(cells).fill(false) })
+
+const setupBoard = (data: Puzzle, savedState?: State) => {
+  puzzle = data
+  mineSet = new Set(data.mines.map(([r, c]) => idx(r, c)))
+  const cells = data.rows * data.cols
+  state = savedState ?? blankState(cells)
+  /**
+   * `bitArray` requires each field's length in the encoder context to round-trip
+   * correctly. We rebuild the codec whenever the board dimensions change.
+   */
+  stateCodec = createEncoder(stateSchema, {
+    revealed: { length: cells },
+    flagged: { length: cells },
+  })
+  won = false
+  // Publish board dimensions to CSS so grid tracks + cell font-size scale purely from the stylesheet.
+  boardEl.style.setProperty("--cols", String(data.cols))
+  boardEl.style.setProperty("--rows", String(data.rows))
+  checkWin()
+  render()
+}
+
+/**
+ * Lifecycle entrypoint:
+ * - `sdk.gameReady()` blocks until the host sends puzzle/state/theme.
+ * - `sdk.gameLoaded()` tells the host we're done bootstrapping; the host will
+ * then dispatch `start` (or restore a paused session).
+ */
+const init = async () => {
+  const { puzzleString, inputString, theme } = await sdk.gameReady()
+  if (theme) applyTheme(theme)
+  const parsed = puzzleString ? (JSON.parse(puzzleString) as Puzzle) : puzzle
+  const cells = parsed.rows * parsed.cols
+  /**
+   * Decode prior progress with the encoder so older save formats can be migrated
+   * via the schema's `migrations` map (none yet, but wired up for free).
+   */
+  const tempCodec = createEncoder(stateSchema, { revealed: { length: cells }, flagged: { length: cells } })
+  const saved = inputString ? (tempCodec.decode(tempCodec.migrate(inputString)) as State) : undefined
+  setupBoard(parsed, saved)
+  sdk.gameLoaded()
+}
+
+sdk.on("start", () => {
+  render()
+})
+
+/** The host re-emits its theme (and other settings) when the player toggles light/dark. */
+sdk.on("settingsUpdate", (data: { theme?: Theme }) => {
+  if (data?.theme) applyTheme(data.theme)
+})
+
+boardEl.addEventListener("click", handleClick)
+boardEl.addEventListener("contextmenu", (e) => {
+  e.preventDefault()
+  handleClick(e)
+})
+
+init()

package/templates/minesweeper/src/style.css

@@ -0,0 +1,160 @@
+/* Puzzmo subset fonts. ASCII-only — always pair with a system fallback. */
+@font-face {
+  font-family: "Poppins-SemiBold";
+  src: url("https://www.puzzmo.com/assets/fonts-subset/Poppins-SemiBold-subset.ttf");
+  font-display: swap;
+}
+@font-face {
+  font-family: "RedHatMono-Bold";
+  src: url("https://www.puzzmo.com/assets/fonts-subset/RedHatMono-Bold-subset.ttf");
+  font-display: swap;
+}
+
+/* Defaults are fallbacks for the simulator before the host sends a theme.
+   Real values are set on :root from the Puzzmo Theme object in applyTheme(). */
+:root {
+  --bg: #1a1a1a;
+  --panel: #2a2a2a;
+  --cell: #3a3a3a;
+  --cell-revealed: #1f1f1f;
+  --border: #4a4a4a;
+  --text: #f0f0f0;
+  --text-on-cell: #1b1b28;
+  --accent: #f0c040;
+  --mine: #ff5555;
+  --flag: #ffaa55;
+  --n1: #6cf;
+  --n2: #6f9;
+  --n3: #fc6;
+  --n4: #f96;
+  --n5: #f66;
+  --n6: #c6f;
+  --n7: #fcf;
+  --n8: #fff;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  font-family: "Poppins-SemiBold", system-ui, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  width: 100%;
+}
+
+h1 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.hud {
+  display: flex;
+  gap: 16px;
+  font-size: 14px;
+  background: var(--panel);
+  padding: 6px 12px;
+  border-radius: 6px;
+  min-width: 200px;
+  justify-content: space-between;
+}
+
+.board {
+  /* Square board: prefer the smaller of (viewport width minus body padding) and
+     (viewport height minus header allowance), clamped to a sane range so the
+     board never disappears on tiny screens nor overwhelms huge ones.
+     Stored as a custom property so `.cell` can reuse the same length expression
+     to size its font without measuring anything in JS. */
+  --board-size: clamp(280px, min(100vw - 32px, 100vh - 200px), 900px);
+  display: grid;
+  grid-template-columns: repeat(var(--cols, 9), 1fr);
+  grid-template-rows: repeat(var(--rows, 9), 1fr);
+  gap: 2px;
+  background: var(--panel);
+  padding: 6px;
+  border-radius: 6px;
+  user-select: none;
+  touch-action: manipulation;
+  width: var(--board-size);
+  aspect-ratio: 1;
+}
+
+.cell {
+  background: var(--cell);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "RedHatMono-Bold", ui-monospace, monospace;
+  font-weight: 700;
+  cursor: pointer;
+  color: var(--text-on-cell);
+  /* Cell width ≈ board-size / cols. Glyph at ~55% of cell width. CSS variables
+     inherit from `.board`, so no JS measurement needed. */
+  font-size: calc(var(--board-size) * 0.55 / var(--cols, 9));
+  padding: 0;
+  line-height: 1;
+  overflow: hidden;
+}
+
+.cell.revealed {
+  background: var(--cell-revealed);
+  cursor: default;
+}
+
+.cell.flagged {
+  color: var(--flag);
+}
+
+.cell.mine {
+  color: var(--mine);
+}
+
+.cell[data-n="1"] {
+  color: var(--n1);
+}
+.cell[data-n="2"] {
+  color: var(--n2);
+}
+.cell[data-n="3"] {
+  color: var(--n3);
+}
+.cell[data-n="4"] {
+  color: var(--n4);
+}
+.cell[data-n="5"] {
+  color: var(--n5);
+}
+.cell[data-n="6"] {
+  color: var(--n6);
+}
+.cell[data-n="7"] {
+  color: var(--n7);
+}
+.cell[data-n="8"] {
+  color: var(--n8);
+}

package/templates/minesweeper/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}

package/templates/minesweeper/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "vite"
+import { puzzmoSimulator, appBundlePlugin } from "@puzzmo/sdk/vite"
+
+export default defineConfig({
+  plugins: [puzzmoSimulator({ fixturesGlob: "/fixtures/puzzles/**/*.json" }), appBundlePlugin()],
+  build: {
+    outDir: "dist",
+    assetsDir: "assets",
+  },
+})