@theideaguards/create-pixin 0.1.0

package/index.mjs

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+/**
+ * `create-pixin` — scaffold a Pixin game project.
+ *
+ *   npm create @theideaguards/pixin <project-name> [--template clean|demo]
+ *
+ * `clean` is the base project (a blank game + the editor wired up); `demo` overlays the
+ * "Magický polibek" demo, whose art/audio load from the hosted Pages deployment (CDN refs),
+ * so the scaffold stays tiny.
+ */
+import { cp, readFile, writeFile, rename, readdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const HERE = dirname(fileURLToPath(import.meta.url))
+const argv = process.argv.slice(2)
+const name = argv.find((a) => !a.startsWith('--'))
+const tplIdx = argv.indexOf('--template')
+const template = tplIdx !== -1 ? argv[tplIdx + 1] : 'clean'
+
+if (!name) {
+  console.error('Usage: npm create @theideaguards/pixin <project-name> [--template clean|demo]')
+  process.exit(1)
+}
+if (template !== 'clean' && template !== 'demo') {
+  console.error(`Unknown template "${template}" — use "clean" or "demo".`)
+  process.exit(1)
+}
+
+const target = resolve(process.cwd(), name)
+if (existsSync(target) && (await readdir(target)).length) {
+  console.error(`Directory "${name}" already exists and is not empty.`)
+  process.exit(1)
+}
+
+// `clean` is the base; `demo` overlays its content/game.json onto it.
+await cp(join(HERE, 'templates', 'clean'), target, { recursive: true })
+if (template === 'demo') {
+  await cp(join(HERE, 'templates', 'demo'), target, { recursive: true })
+}
+
+// `_gitignore` → `.gitignore` (npm strips a real .gitignore from published packages).
+if (existsSync(join(target, '_gitignore'))) {
+  await rename(join(target, '_gitignore'), join(target, '.gitignore'))
+}
+
+// Fill the project name into package.json + index.html.
+for (const file of ['package.json', 'index.html']) {
+  const path = join(target, file)
+  if (existsSync(path))
+    await writeFile(path, (await readFile(path, 'utf8')).replaceAll('{{name}}', name))
+}
+
+console.log(`\n✓ Created ${name} (${template} template)\n`)
+console.log('Next steps:')
+console.log(`  cd ${name}`)
+console.log('  pnpm install        # or npm install')
+console.log('  pnpm dev            # play the game; open ?edit for the visual editor')
+console.log('')

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@theideaguards/create-pixin",
+  "version": "0.1.0",
+  "description": "Scaffold a Pixin point-and-click game project (engine + no-code editor).",
+  "license": "MIT",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "bin": {
+    "create-pixin": "index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=20"
+  }
+}

package/templates/clean/README.md

@@ -0,0 +1,26 @@
+# {{name}}
+
+A [Pixin](https://github.com/Martinsafka/point-and-click-pixin) point-and-click adventure.
+
+```bash
+pnpm install
+pnpm dev          # play the game
+```
+
+## Authoring (the no-code editor)
+
+Open the dev server with **`?edit`** (e.g. `http://localhost:5173/?edit`) for the visual
+editor. It saves your work to an **IndexedDB draft**; **Test in game** reloads the page to
+play it.
+
+When you're happy, **Export** the document from the editor and ship it:
+
+```bash
+# drop the exported game.json into export/, then:
+pnpm assets       # externalize embedded art/audio → public/assets/baked + lean content/game.json
+pnpm build        # production build → dist/
+```
+
+The game is one serializable `GameDoc` (`content/game.json`); you can also hand-edit it.
+See the [Pixin docs](https://github.com/Martinsafka/point-and-click-pixin) for the schema,
+the editor guide, and the bundled Claude Code skills.

package/templates/clean/_gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+*.local
+.vite
+.DS_Store
+
+# raw editor exports (drop game.json here, then run `pnpm assets`)
+/export/*
+!/export/README.md

package/templates/clean/content/game.json

@@ -0,0 +1,16 @@
+{
+  "start": "scene1",
+  "referenceHeight": 1080,
+  "scenes": {
+    "scene1": {
+      "id": "scene1",
+      "name": "Scene 1",
+      "width": 1920,
+      "walkable": [0.08, 0.72, 0.92, 0.72, 0.92, 0.96, 0.08, 0.96],
+      "layers": [],
+      "interactables": []
+    }
+  },
+  "items": {},
+  "initialFlags": {}
+}

package/templates/clean/export/README.md

@@ -0,0 +1,10 @@
+# export/
+
+Drop your editor **Export** here as `game.json`, then run:
+
+```bash
+pnpm assets
+```
+
+It externalizes the embedded art/audio into `public/assets/baked/` and writes a lean
+`content/game.json`. Raw exports here are gitignored (they hold megabytes of inline base64).

package/templates/clean/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/clean/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "assets": "node scripts/build-assets.mjs"
+  },
+  "dependencies": {
+    "@xyflow/react": "^12.0.0",
+    "pixi.js": "^8.0.0",
+    "@theideaguards/pixin": "^0.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^6.0.0",
+    "sharp": "^0.35.0",
+    "typescript": "^6.0.0",
+    "vite": "^8.0.0"
+  }
+}

package/templates/clean/scripts/build-assets.mjs

@@ -0,0 +1,138 @@
+#!/usr/bin/env node
+/**
+ * Externalize + compress a GameDoc's embedded art/audio.
+ *
+ * The editor bakes uploaded images and sounds into `content/game.json` as base64 `data:`
+ * URLs, which bloats the JSON (and the JS bundle that inlines it) to tens of MB. This
+ * walks the document, writes every `data:` blob out to `public/assets/baked/…` (images
+ * re-encoded to downscaled WebP via sharp, audio passed through), de-duplicates by content
+ * hash, and rewrites each ref to a relative path the runtime resolves via BASE_URL
+ * (src/data/asset-url.ts). Re-run any time after re-exporting the doc; it is idempotent
+ * (a doc with no `data:` strings is left unchanged) and skips files already on disk.
+ *
+ *   pnpm assets   # export/game.json → lean content/game.json + public/assets/baked/
+ *   node scripts/build-assets.mjs --in export/game.json --max-height 1620 --quality 80
+ */
+import { readFile, writeFile, mkdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { createHash } from 'node:crypto'
+import { dirname, join } from 'node:path'
+import sharp from 'sharp'
+
+const args = parseArgs(process.argv.slice(2))
+const IN = args.in ?? 'export/game.json' // raw editor export (gitignored — see export/README.md)
+const OUT = args.out ?? 'content/game.json' // lean committed source of truth
+const ASSET_DIR = args.assets ?? 'public/assets/baked' // files written here
+const REF_BASE = args.base ?? 'assets/baked' // ref prefix stored in the doc (relative)
+const MAX_HEIGHT = Number(args['max-height'] ?? 1620)
+const QUALITY = Number(args.quality ?? 80)
+
+if (!existsSync(IN)) {
+  console.error(
+    `Input not found: ${IN}\n` +
+      `Drop your editor "Export" game.json there (or pass --in <path>), then run \`pnpm assets\`.`,
+  )
+  process.exit(1)
+}
+
+const DATA_RE = /^data:([a-z0-9.+-]+\/[a-z0-9.+-]+);base64,(.*)$/i
+const byHash = new Map() // content hash → relative ref (de-dupe identical blobs)
+const stats = { images: 0, audio: 0, other: 0, reused: 0, srcBytes: 0, outBytes: 0 }
+
+async function externalize(dataUrl) {
+  const m = DATA_RE.exec(dataUrl)
+  if (!m) return null
+  const [, mime, b64] = m
+  const input = Buffer.from(b64, 'base64')
+  const hash = createHash('sha1').update(input).digest('hex').slice(0, 16)
+  if (byHash.has(hash)) {
+    stats.reused += 1
+    return byHash.get(hash)
+  }
+  stats.srcBytes += dataUrl.length
+
+  let out = input
+  let sub = 'misc'
+  let ext = (mime.split('/')[1] || 'bin').replace(/[^a-z0-9]/gi, '')
+
+  if (mime.startsWith('image/')) {
+    sub = 'img'
+    try {
+      out = await sharp(input)
+        .resize({ height: MAX_HEIGHT, withoutEnlargement: true })
+        .webp({ quality: QUALITY })
+        .toBuffer()
+      ext = 'webp'
+      stats.images += 1
+    } catch (err) {
+      // Unsupported/corrupt image → keep the original bytes + extension.
+      console.warn(`  ! sharp failed on an image (${err.message}); keeping original`)
+      out = input
+    }
+  } else if (mime.startsWith('audio/')) {
+    sub = 'audio'
+    ext = mime === 'audio/mpeg' ? 'mp3' : ext
+    stats.audio += 1
+  } else {
+    stats.other += 1
+  }
+
+  const ref = `${REF_BASE}/${sub}/${hash}.${ext}`
+  const abs = join(ASSET_DIR, sub, `${hash}.${ext}`)
+  if (!existsSync(abs)) {
+    await mkdir(dirname(abs), { recursive: true })
+    await writeFile(abs, out)
+  }
+  stats.outBytes += out.length
+  byHash.set(hash, ref)
+  return ref
+}
+
+async function walk(node) {
+  if (typeof node === 'string') {
+    if (node.startsWith('data:')) return (await externalize(node)) ?? node
+    return node
+  }
+  if (Array.isArray(node)) {
+    for (let i = 0; i < node.length; i += 1) node[i] = await walk(node[i])
+    return node
+  }
+  if (node && typeof node === 'object') {
+    for (const k of Object.keys(node)) node[k] = await walk(node[k])
+    return node
+  }
+  return node
+}
+
+const raw = await readFile(IN, 'utf8')
+const doc = JSON.parse(raw)
+await walk(doc)
+const lean = JSON.stringify(doc, null, 2) + '\n'
+await writeFile(OUT, lean)
+
+const mb = (n) => (n / 1e6).toFixed(1)
+console.log(`✓ ${IN} → ${OUT}`)
+console.log(`  json:    ${mb(raw.length)} MB → ${mb(lean.length)} MB`)
+console.log(
+  `  art:     ${stats.images} images, ${stats.audio} audio, ${stats.other} other` +
+    ` (${stats.reused} duplicates skipped)`,
+)
+console.log(
+  `  on disk: ${mb(stats.srcBytes)} MB base64 → ${mb(stats.outBytes)} MB files in ${ASSET_DIR}/`,
+)
+
+function parseArgs(argv) {
+  const out = {}
+  for (let i = 0; i < argv.length; i += 1) {
+    if (!argv[i].startsWith('--')) continue
+    const key = argv[i].slice(2)
+    const next = argv[i + 1]
+    if (next && !next.startsWith('--')) {
+      out[key] = next
+      i += 1
+    } else {
+      out[key] = true
+    }
+  }
+  return out
+}

package/templates/clean/src/main.tsx

@@ -0,0 +1,14 @@
+import { mountGame, loadDraft, type GameDoc } from '@theideaguards/pixin'
+import '@theideaguards/pixin/styles.css'
+import gameDoc from '../content/game.json'
+
+const root = document.getElementById('root')!
+
+if (import.meta.env.DEV && new URLSearchParams(location.search).has('edit')) {
+  // Visual editor (dev only). It edits an IndexedDB draft; "Test in game" reloads to play it.
+  void import('@theideaguards/pixin/editor').then(({ mountEditor }) => mountEditor(root))
+} else {
+  // Play the editor draft (dev) over the committed game.json, else the committed game.
+  const draft = import.meta.env.DEV ? await loadDraft() : null
+  mountGame((draft ?? gameDoc) as GameDoc, root)
+}

package/templates/clean/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "content"]
+}

package/templates/clean/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// PixiJS v8 ships top-level await, which Vite's prod build rejects under the default target.
+export default defineConfig({
+  plugins: [react()],
+  build: { target: 'esnext' },
+})