create-cubeforge-game 0.5.0 → 0.5.2

package/bin/index.js

@@ -59,8 +59,43 @@ function copyTemplateDir(src, dest, projectName) {
     }
   }
 }
+var TEMPLATES = ["default", "puzzle", "turn-based", "editor"];
+var TEMPLATE_DESCRIPTIONS = {
+  default: "Action platformer with physics, coins, and save/load",
+  puzzle: "Grid-based sliding puzzle (onDemand loop, drag-and-snap, undo/redo)",
+  "turn-based": "Tic-tac-toe with turn manager, hover, and accessibility",
+  editor: "Scene editor with selection, transform handles, save/load"
+};
+function parseArgs() {
+  const args = process.argv.slice(2);
+  let projectName;
+  let template;
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === "--template" || a === "-t") {
+      const next = args[++i];
+      if (!next || !TEMPLATES.includes(next)) {
+        process.stderr.write(`Error: --template must be one of: ${TEMPLATES.join(", ")}
+`);
+        process.exit(1);
+      }
+      template = next;
+    } else if (a.startsWith("--template=")) {
+      const val = a.slice("--template=".length);
+      if (!TEMPLATES.includes(val)) {
+        process.stderr.write(`Error: --template must be one of: ${TEMPLATES.join(", ")}
+`);
+        process.exit(1);
+      }
+      template = val;
+    } else if (!projectName) {
+      projectName = a;
+    }
+  }
+  return { projectName, template };
+}
 async function main() {
-  let projectName = process.argv[2];
+  let { projectName, template } = parseArgs();
   if (!projectName) {
     projectName = await prompt("Project name: ");
   }
@@ -68,15 +103,35 @@ async function main() {
     process.stderr.write("Error: project name is required.\n");
     process.exit(1);
   }
+  if (!template) {
+    process.stdout.write("\nAvailable templates:\n");
+    for (const t of TEMPLATES) {
+      process.stdout.write(`  ${t.padEnd(12)} \u2014 ${TEMPLATE_DESCRIPTIONS[t]}
+`);
+    }
+    const answer = await prompt("\nTemplate (default): ");
+    const chosen = answer || "default";
+    if (!TEMPLATES.includes(chosen)) {
+      process.stderr.write(`Error: unknown template "${chosen}".
+`);
+      process.exit(1);
+    }
+    template = chosen;
+  }
   const targetDir = path.resolve(process.cwd(), projectName);
   if (fs.existsSync(targetDir)) {
     process.stderr.write(`Error: directory "${projectName}" already exists.
 `);
     process.exit(1);
   }
-  const templatesDir = path.join(import_meta.dirname, "..", "templates", "default");
+  const templatesDir = path.join(import_meta.dirname, "..", "templates", template);
+  if (!fs.existsSync(templatesDir)) {
+    process.stderr.write(`Error: template "${template}" not found at ${templatesDir}
+`);
+    process.exit(1);
+  }
   process.stdout.write(`
-Creating new Cubeforge game in ${targetDir}...
+Creating new Cubeforge game in ${targetDir} (template: ${template})...
 `);
   copyTemplateDir(templatesDir, targetDir, projectName);
   process.stdout.write(`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-cubeforge-game",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Scaffold a new Cubeforge game project",
   "bin": {
     "create-cubeforge-game": "./bin/index.js"

package/templates/__tests__/template.test.ts

@@ -1,8 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { readdirSync, readFileSync, existsSync } from 'fs'
+import { readdirSync, readFileSync, existsSync, statSync } from 'fs'
 import { join, resolve } from 'path'
 
-const TEMPLATE_DIR = resolve(__dirname, '../default')
+const TEMPLATES_ROOT = resolve(__dirname, '..')
+const TEMPLATE_NAMES = ['default', 'puzzle', 'turn-based', 'editor']
 
 function collectTemplateFiles(dir: string): string[] {
   const results: string[] = []
@@ -17,48 +18,55 @@ function collectTemplateFiles(dir: string): string[] {
   return results
 }
 
-describe('project template', () => {
-  const templateFiles = collectTemplateFiles(TEMPLATE_DIR)
+describe.each(TEMPLATE_NAMES)('%s template', (name) => {
+  const dir = join(TEMPLATES_ROOT, name)
+
+  it('template directory exists', () => {
+    expect(existsSync(dir)).toBe(true)
+    expect(statSync(dir).isDirectory()).toBe(true)
+  })
 
   it('contains at least one .template file', () => {
-    expect(templateFiles.length).toBeGreaterThan(0)
+    const files = collectTemplateFiles(dir)
+    expect(files.length).toBeGreaterThan(0)
   })
 
-  it.each(templateFiles.map((f) => [f.replace(TEMPLATE_DIR + '/', ''), f]))(
-    '%s exists and is non-empty',
-    (_name, filePath) => {
-      expect(existsSync(filePath)).toBe(true)
+  it('all .template files are non-empty', () => {
+    for (const filePath of collectTemplateFiles(dir)) {
       const content = readFileSync(filePath, 'utf-8')
-      expect(content.trim().length).toBeGreaterThan(0)
-    },
-  )
+      expect(content.trim().length, `expected ${filePath} to be non-empty`).toBeGreaterThan(0)
+    }
+  })
 
   it('package.json.template has lint script', () => {
-    const pkgPath = join(TEMPLATE_DIR, 'package.json.template')
+    const pkgPath = join(dir, 'package.json.template')
     const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
     expect(pkg.scripts.lint).toBeDefined()
     expect(pkg.scripts.lint).toContain('eslint')
   })
 
   it('package.json.template has format script', () => {
-    const pkgPath = join(TEMPLATE_DIR, 'package.json.template')
+    const pkgPath = join(dir, 'package.json.template')
     const pkg = JSON.parse(readFileSync(pkgPath, 'utf-8'))
     expect(pkg.scripts.format).toBeDefined()
     expect(pkg.scripts.format).toContain('prettier')
   })
 
   it('includes eslint config template', () => {
-    expect(existsSync(join(TEMPLATE_DIR, '.eslintrc.cjs.template'))).toBe(true)
+    expect(existsSync(join(dir, '.eslintrc.cjs.template'))).toBe(true)
   })
 
   it('includes prettier config template', () => {
-    expect(existsSync(join(TEMPLATE_DIR, '.prettierrc.template'))).toBe(true)
+    expect(existsSync(join(dir, '.prettierrc.template'))).toBe(true)
   })
 
   it('tsconfig.json.template enables strict mode', () => {
-    const tsconfig = JSON.parse(
-      readFileSync(join(TEMPLATE_DIR, 'tsconfig.json.template'), 'utf-8'),
-    )
+    const tsconfig = JSON.parse(readFileSync(join(dir, 'tsconfig.json.template'), 'utf-8'))
     expect(tsconfig.compilerOptions.strict).toBe(true)
   })
+
+  it('has an App.tsx.template and main.tsx.template', () => {
+    expect(existsSync(join(dir, 'src', 'App.tsx.template'))).toBe(true)
+    expect(existsSync(join(dir, 'src', 'main.tsx.template'))).toBe(true)
+  })
 })

package/templates/editor/.eslintrc.cjs.template

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+}

package/templates/editor/.prettierrc.template

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100
+}

package/templates/editor/index.html.template

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{PROJECT_NAME}}</title>
+  <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0a0f; min-height: 100vh; font-family: system-ui, sans-serif; color: #e0e7f1; }</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/editor/package.json.template

@@ -0,0 +1,29 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx",
+    "format": "prettier --write src"
+  },
+  "dependencies": {
+    "cubeforge": "latest",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0"
+  }
+}

package/templates/editor/src/App.tsx.template

@@ -0,0 +1,144 @@
+import { useRef, useState } from 'react'
+import type { GameControls } from 'cubeforge'
+import {
+  Stage,
+  Entity,
+  Transform,
+  Sprite,
+  Selection,
+  TransformHandles,
+  useSnap,
+  useHistory,
+  saveSceneToLocalStorage,
+  loadSceneFromLocalStorage,
+  downloadCanvas,
+  useGame,
+} from 'cubeforge'
+
+type Piece = { id: number; x: number; y: number; color: string }
+
+const PALETTE = ['#4fc3f7', '#ef5350', '#8bc34a', '#ffc107', '#ab47bc']
+const STORAGE_KEY = '{{PROJECT_NAME}}:scene'
+
+function Piece({ piece }: { piece: Piece }) {
+  return (
+    <Entity>
+      <Transform x={piece.x} y={piece.y} />
+      <Sprite width={60} height={60} color={piece.color} borderRadius={6} />
+    </Entity>
+  )
+}
+
+function Scene({ pieces }: { pieces: Piece[] }) {
+  return (
+    <>
+      {pieces.map((p) => (
+        <Piece key={p.id} piece={p} />
+      ))}
+    </>
+  )
+}
+
+// A tiny inline toolbar — talks to the engine via useGame().
+function Toolbar({ onAdd }: { onAdd: (color: string) => void }) {
+  const engine = useGame()
+  const history = useHistory({ bindKeyboardShortcuts: true })
+
+  const save = () => {
+    if (saveSceneToLocalStorage(engine, STORAGE_KEY, { pretty: true })) {
+      // eslint-disable-next-line no-console
+      console.log('Saved to localStorage')
+    }
+  }
+  const load = () => {
+    if (!loadSceneFromLocalStorage(engine, STORAGE_KEY)) {
+      // eslint-disable-next-line no-console
+      console.warn('No saved scene found')
+    }
+  }
+  const exportPng = () => downloadCanvas(engine.canvas, '{{PROJECT_NAME}}.png')
+
+  return (
+    <div style={toolbarStyle}>
+      <strong style={{ fontSize: 12, color: '#78909c', marginRight: 8 }}>Add:</strong>
+      {PALETTE.map((c) => (
+        <button
+          key={c}
+          onClick={() => onAdd(c)}
+          style={{ ...swatch, background: c }}
+          aria-label={`Add piece with color ${c}`}
+        />
+      ))}
+      <span style={{ flex: 1 }} />
+      <button onClick={history.undo} disabled={!history.canUndo} style={btn}>Undo</button>
+      <button onClick={history.redo} disabled={!history.canRedo} style={btn}>Redo</button>
+      <button onClick={save} style={btn}>Save</button>
+      <button onClick={load} style={btn}>Load</button>
+      <button onClick={exportPng} style={btn}>Export PNG</button>
+    </div>
+  )
+}
+
+export function App() {
+  const nextId = useRef(1)
+  const [pieces, setPieces] = useState<Piece[]>([
+    { id: nextId.current++, x: -80, y: 0, color: '#4fc3f7' },
+    { id: nextId.current++, x: 80, y: 0, color: '#ef5350' },
+  ])
+
+  const addPiece = (color: string) => {
+    setPieces((prev) => [...prev, { id: nextId.current++, x: 0, y: 0, color }])
+  }
+
+  return (
+    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <h1 style={{ fontSize: 18, fontWeight: 500 }}>{`{{PROJECT_NAME}}`}</h1>
+      <p style={{ fontSize: 13, color: '#78909c' }}>
+        Click a colored swatch to spawn a piece. Drag the handle box to move, corners to resize,
+        the round handle above to rotate. Ctrl+Z / Ctrl+Shift+Z to undo/redo. Snap to 10px grid.
+      </p>
+      <div style={{ position: 'relative', alignSelf: 'flex-start' }}>
+        <Stage width={800} height={500}>
+          <Selection>
+            <Scene pieces={pieces} />
+            <TransformHandles />
+            <Toolbar onAdd={addPiece} />
+          </Selection>
+        </Stage>
+      </div>
+    </div>
+  )
+}
+
+const toolbarStyle: React.CSSProperties = {
+  position: 'absolute',
+  bottom: -48,
+  left: 0,
+  right: 0,
+  display: 'flex',
+  gap: 6,
+  alignItems: 'center',
+  background: 'rgba(255,255,255,0.04)',
+  border: '1px solid rgba(255,255,255,0.1)',
+  padding: 6,
+  borderRadius: 4,
+}
+
+const swatch: React.CSSProperties = {
+  width: 24,
+  height: 24,
+  border: '1px solid rgba(255,255,255,0.3)',
+  borderRadius: 3,
+  cursor: 'pointer',
+}
+
+const btn: React.CSSProperties = {
+  background: 'rgba(255,255,255,0.08)',
+  border: '1px solid rgba(255,255,255,0.2)',
+  color: '#e0e7f1',
+  padding: '4px 10px',
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: 'pointer',
+  fontFamily: 'monospace',
+}

package/templates/editor/src/main.tsx.template

@@ -0,0 +1,8 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/editor/tsconfig.json.template

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/templates/editor/vite.config.ts.template

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({ plugins: [react()] })

package/templates/puzzle/.eslintrc.cjs.template

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+}

package/templates/puzzle/.prettierrc.template

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100
+}

package/templates/puzzle/index.html.template

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{PROJECT_NAME}}</title>
+  <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0a0f; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: system-ui, sans-serif; }</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/puzzle/package.json.template

@@ -0,0 +1,29 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx",
+    "format": "prettier --write src"
+  },
+  "dependencies": {
+    "cubeforge": "latest",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0"
+  }
+}

package/templates/puzzle/src/App.tsx.template

@@ -0,0 +1,171 @@
+import { Stage, Entity, Transform, Sprite, Text, useGrid, useHistory } from 'cubeforge'
+
+const SIZE = 4
+const TILE = 80
+const BOARD_PX = SIZE * TILE
+const EMPTY = 0
+
+type Board = number[]
+
+function isSolved(cells: readonly number[]): boolean {
+  for (let i = 0; i < cells.length - 1; i++) {
+    if (cells[i] !== i + 1) return false
+  }
+  return cells[cells.length - 1] === EMPTY
+}
+
+function neighborsOfEmpty(cells: readonly number[]): number[] {
+  const empty = cells.indexOf(EMPTY)
+  const row = Math.floor(empty / SIZE)
+  const col = empty % SIZE
+  const out: number[] = []
+  if (row > 0) out.push(empty - SIZE)
+  if (row < SIZE - 1) out.push(empty + SIZE)
+  if (col > 0) out.push(empty - 1)
+  if (col < SIZE - 1) out.push(empty + 1)
+  return out
+}
+
+function scramble(cells: number[], moves = 80): number[] {
+  const out = cells.slice()
+  for (let i = 0; i < moves; i++) {
+    const ns = neighborsOfEmpty(out)
+    const pick = ns[Math.floor(Math.random() * ns.length)]
+    const emptyIdx = out.indexOf(EMPTY)
+    ;[out[emptyIdx], out[pick]] = [out[pick], out[emptyIdx]]
+  }
+  return out
+}
+
+function Tile({ value, row, col, onClick }: { value: number; row: number; col: number; onClick: () => void }) {
+  if (value === EMPTY) return null
+  const x = col * TILE + TILE / 2 - BOARD_PX / 2
+  const y = row * TILE + TILE / 2 - BOARD_PX / 2
+  return (
+    <Entity>
+      <Transform x={x} y={y} />
+      <Sprite width={TILE - 6} height={TILE - 6} color="#4fc3f7" borderRadius={10} />
+      <Text text={String(value)} fontSize={28} color="#0a0a0f" />
+      <HitArea onClick={onClick} width={TILE} height={TILE} />
+    </Entity>
+  )
+}
+
+// Tiny helper: an invisible sprite that catches pointer events.
+function HitArea({ onClick, width, height }: { onClick: () => void; width: number; height: number }) {
+  return (
+    <div
+      onClick={onClick}
+      style={{
+        position: 'absolute',
+        width,
+        height,
+        transform: `translate(-${width / 2}px, -${height / 2}px)`,
+        cursor: 'pointer',
+      }}
+    />
+  )
+}
+
+function BoardUI({ board, history }: { board: ReturnType<typeof useGrid<number>>; history: ReturnType<typeof useHistory> }) {
+  const cells: number[] = []
+  board.forEach((c) => cells.push(c.value))
+  const solved = isSolved(cells)
+
+  const tryMove = (index: number) => {
+    const ns = neighborsOfEmpty(cells)
+    if (!ns.includes(index)) return
+    const emptyIdx = cells.indexOf(EMPTY)
+    const tileRow = Math.floor(index / SIZE)
+    const tileCol = index % SIZE
+    const emptyRow = Math.floor(emptyIdx / SIZE)
+    const emptyCol = emptyIdx % SIZE
+    board.swap(tileCol, tileRow, emptyCol, emptyRow)
+    history.push()
+  }
+
+  return (
+    <>
+      {cells.map((value, i) => {
+        const row = Math.floor(i / SIZE)
+        const col = i % SIZE
+        return <Tile key={`${row}-${col}`} value={value} row={row} col={col} onClick={() => tryMove(i)} />
+      })}
+      {solved && (
+        <Entity>
+          <Transform x={0} y={-BOARD_PX / 2 - 40} />
+          <Text text="Solved!" fontSize={32} color="#8bc34a" />
+        </Entity>
+      )}
+    </>
+  )
+}
+
+export function App() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16, padding: 24 }}>
+      <h1 style={{ color: '#e0e7f1', fontSize: 18, fontWeight: 500 }}>{`{{PROJECT_NAME}}`}</h1>
+      <Stage width={BOARD_PX + 40} height={BOARD_PX + 40}>
+        <BoardMount />
+      </Stage>
+    </div>
+  )
+}
+
+function BoardMount() {
+  // Seed the board with a scrambled solved state (1..15, 0)
+  const solved: number[] = []
+  for (let i = 1; i < SIZE * SIZE; i++) solved.push(i)
+  solved.push(EMPTY)
+  const initial = scramble(solved)
+
+  const board = useGrid<number>({
+    width: SIZE,
+    height: SIZE,
+    fill: (x, y) => initial[y * SIZE + x],
+  })
+  const history = useHistory({ bindKeyboardShortcuts: true, capacity: 200 })
+
+  return (
+    <>
+      <BoardUI board={board} history={history} />
+      <Controls history={history} />
+    </>
+  )
+}
+
+function Controls({ history }: { history: ReturnType<typeof useHistory> }) {
+  return (
+    <div style={{ position: 'absolute', bottom: 8, left: 8, right: 8, display: 'flex', gap: 8, pointerEvents: 'auto' }}>
+      <button
+        onClick={history.undo}
+        disabled={!history.canUndo}
+        style={btn}
+      >
+        Undo (Ctrl+Z)
+      </button>
+      <button
+        onClick={history.redo}
+        disabled={!history.canRedo}
+        style={btn}
+      >
+        Redo
+      </button>
+      <span style={{ flex: 1 }} />
+      <span style={{ color: '#78909c', fontSize: 12, alignSelf: 'center' }}>
+        Moves: {history.length}
+      </span>
+    </div>
+  )
+}
+
+const btn: React.CSSProperties = {
+  background: 'rgba(255,255,255,0.08)',
+  border: '1px solid rgba(255,255,255,0.2)',
+  color: '#e0e7f1',
+  padding: '4px 10px',
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: 'pointer',
+  fontFamily: 'monospace',
+}

package/templates/puzzle/src/main.tsx.template

@@ -0,0 +1,8 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/puzzle/tsconfig.json.template

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/templates/puzzle/vite.config.ts.template

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({ plugins: [react()] })

package/templates/turn-based/.eslintrc.cjs.template

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist'],
+  parser: '@typescript-eslint/parser',
+  rules: {
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+    'react-hooks/exhaustive-deps': 'warn',
+  },
+}

package/templates/turn-based/.prettierrc.template

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "printWidth": 100
+}

package/templates/turn-based/index.html.template

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{PROJECT_NAME}}</title>
+  <style>* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0a0f; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: system-ui, sans-serif; }</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

package/templates/turn-based/package.json.template

@@ -0,0 +1,29 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext ts,tsx",
+    "format": "prettier --write src"
+  },
+  "dependencies": {
+    "cubeforge": "latest",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^3.2.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0"
+  }
+}

package/templates/turn-based/src/App.tsx.template

@@ -0,0 +1,144 @@
+import { useState } from 'react'
+import { Stage, Entity, Transform, Sprite, Text, useTurnSystem, useHistory } from 'cubeforge'
+
+type Cell = '' | 'X' | 'O'
+type Board = Cell[]
+
+const CELL = 90
+const GRID_PX = CELL * 3
+const LINES = [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6],
+]
+
+function winner(cells: Board): Cell | null {
+  for (const [a, b, c] of LINES) {
+    if (cells[a] && cells[a] === cells[b] && cells[a] === cells[c]) return cells[a]
+  }
+  return null
+}
+
+function BoardCell({
+  value,
+  row,
+  col,
+  disabled,
+  onClick,
+}: {
+  value: Cell
+  row: number
+  col: number
+  disabled: boolean
+  onClick: () => void
+}) {
+  const x = col * CELL + CELL / 2 - GRID_PX / 2
+  const y = row * CELL + CELL / 2 - GRID_PX / 2
+
+  return (
+    <>
+      <Entity>
+        <Transform x={x} y={y} />
+        <Sprite width={CELL - 6} height={CELL - 6} color="#1e2a3a" borderRadius={8} />
+        {value && <Text text={value} fontSize={52} color={value === 'X' ? '#4fc3f7' : '#ef5350'} />}
+      </Entity>
+      <div
+        onClick={disabled ? undefined : onClick}
+        aria-label={`Row ${row + 1} column ${col + 1}${value ? `, ${value}` : ', empty'}`}
+        style={{
+          position: 'absolute',
+          left: '50%',
+          top: '50%',
+          width: CELL,
+          height: CELL,
+          transform: `translate(${x - CELL / 2}px, ${y - CELL / 2}px)`,
+          cursor: disabled || value ? 'default' : 'pointer',
+        }}
+      />
+    </>
+  )
+}
+
+function Game() {
+  const [cells, setCells] = useState<Board>(Array(9).fill(''))
+  const history = useHistory({ bindKeyboardShortcuts: true })
+  const turns = useTurnSystem<'X' | 'O'>({
+    players: ['X', 'O'],
+    onTurnStart: ({ player, turn }) => {
+      if (turn > 0) {
+        // eslint-disable-next-line no-console
+        console.log(`${player}'s turn`)
+      }
+    },
+  })
+
+  const win = winner(cells)
+  const full = cells.every((c) => c !== '')
+  const done = win !== null || full
+
+  const onCell = (index: number) => {
+    if (done || cells[index]) return
+    const next = cells.slice() as Board
+    next[index] = turns.activePlayer
+    setCells(next)
+    history.push()
+    if (!winner(next) && next.some((c) => c === '')) turns.nextTurn()
+  }
+
+  const reset = () => {
+    setCells(Array(9).fill(''))
+    turns.reset()
+    history.clear()
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
+      <h1 style={{ color: '#e0e7f1', fontSize: 18, fontWeight: 500 }}>{`{{PROJECT_NAME}}`}</h1>
+      <div style={{ color: '#78909c', fontSize: 14, fontFamily: 'monospace', height: 18 }}>
+        {win ? `${win} wins!` : full ? 'Draw' : `Turn: ${turns.activePlayer}`}
+      </div>
+      <div style={{ position: 'relative' }}>
+        <Stage width={GRID_PX + 20} height={GRID_PX + 20}>
+          {cells.map((value, i) => (
+            <BoardCell
+              key={i}
+              value={value}
+              row={Math.floor(i / 3)}
+              col={i % 3}
+              disabled={done}
+              onClick={() => onCell(i)}
+            />
+          ))}
+        </Stage>
+      </div>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <button onClick={reset} style={btn}>Reset</button>
+        <button onClick={history.undo} disabled={!history.canUndo} style={btn}>Undo (Ctrl+Z)</button>
+      </div>
+    </div>
+  )
+}
+
+export function App() {
+  return (
+    <div style={{ padding: 24 }}>
+      <Game />
+    </div>
+  )
+}
+
+const btn: React.CSSProperties = {
+  background: 'rgba(255,255,255,0.08)',
+  border: '1px solid rgba(255,255,255,0.2)',
+  color: '#e0e7f1',
+  padding: '4px 10px',
+  borderRadius: 4,
+  fontSize: 12,
+  cursor: 'pointer',
+  fontFamily: 'monospace',
+}

package/templates/turn-based/src/main.tsx.template

@@ -0,0 +1,8 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { App } from './App'
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/turn-based/tsconfig.json.template

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/templates/turn-based/vite.config.ts.template

@@ -0,0 +1,3 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+export default defineConfig({ plugins: [react()] })