create-smore-game 0.1.0

package/index.js

@@ -0,0 +1,109 @@
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import path from "node:path";
+import prompts from "prompts";
+import {
+  pnpmWorkspace,
+  rootPackageJson,
+  screenReactPhaser,
+  screenReact,
+  screenVanilla,
+  playerReact,
+  playerVanilla,
+} from "./templates.js";
+
+const args = process.argv.slice(2);
+const argName = args.find((a) => !a.startsWith("-"));
+
+async function main() {
+  console.log("\n  create-smore-game\n");
+
+  const response = await prompts(
+    [
+      {
+        type: argName ? null : "text",
+        name: "name",
+        message: "Project name:",
+        initial: "my-game",
+        validate: (v) => (v.trim() ? true : "Name is required"),
+      },
+      {
+        type: "select",
+        name: "screen",
+        message: "Screen (host/TV) template:",
+        choices: [
+          { title: "React + Phaser", value: "react-phaser" },
+          { title: "React only", value: "react" },
+          { title: "Vanilla JS", value: "vanilla" },
+        ],
+      },
+      {
+        type: "select",
+        name: "player",
+        message: "Player (phone) template:",
+        choices: [
+          { title: "React", value: "react" },
+          { title: "Vanilla JS", value: "vanilla" },
+        ],
+      },
+    ],
+    { onCancel: () => (process.exit(0), undefined) },
+  );
+
+  const projectName = (argName || response.name).trim();
+  const gameId = projectName.replace(/[^a-z0-9-]/gi, "-").toLowerCase();
+  const root = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(root)) {
+    console.error(`\n  Error: Directory "${projectName}" already exists.\n`);
+    process.exit(1);
+  }
+
+  // Get templates
+  const screenFiles =
+    response.screen === "react-phaser"
+      ? screenReactPhaser(gameId)
+      : response.screen === "react"
+        ? screenReact(gameId)
+        : screenVanilla(gameId);
+
+  const playerFiles =
+    response.player === "react" ? playerReact(gameId) : playerVanilla(gameId);
+
+  // Write root files
+  writeFile(root, "package.json", rootPackageJson(projectName));
+  writeFile(root, "pnpm-workspace.yaml", pnpmWorkspace);
+  writeFile(
+    root,
+    ".gitignore",
+    "node_modules\ndist\n*.local\n.DS_Store\n",
+  );
+
+  // Write screen files
+  for (const [filePath, content] of Object.entries(screenFiles)) {
+    writeFile(path.join(root, "screen"), filePath, content);
+  }
+
+  // Write player files
+  for (const [filePath, content] of Object.entries(playerFiles)) {
+    writeFile(path.join(root, "player"), filePath, content);
+  }
+
+  console.log(`\n  Done! Created ${projectName}/\n`);
+  console.log("  Next steps:\n");
+  console.log(`    cd ${projectName}`);
+  console.log("    pnpm install");
+  console.log("    pnpm dev\n");
+}
+
+function writeFile(dir, filePath, content) {
+  const full = path.join(dir, filePath);
+  fs.mkdirSync(path.dirname(full), { recursive: true });
+  fs.writeFileSync(full, content);
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "create-smore-game",
+  "version": "0.1.0",
+  "type": "module",
+  "bin": {
+    "create-smore-game": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "templates.js"
+  ],
+  "dependencies": {
+    "prompts": "^2.4.2"
+  }
+}

package/templates.js

@@ -0,0 +1,618 @@
+// ─── Shared ───
+
+export const pnpmWorkspace = `packages:
+  - screen
+  - player
+`;
+
+export function rootPackageJson(name) {
+  return JSON.stringify(
+    {
+      name,
+      private: true,
+      scripts: {
+        "dev": "pnpm -r --parallel dev",
+        "dev:screen": "pnpm --filter screen dev",
+        "dev:player": "pnpm --filter player dev",
+        "build": "pnpm -r build",
+        "zip": "pnpm build && node -e \"const{execSync:e}=require('child_process');e('cd dist && zip -r ../'+process.env.npm_package_name+'.zip .');\""
+      },
+    },
+    null,
+    2,
+  );
+}
+
+// ─── Screen templates ───
+
+const screenTsconfig = JSON.stringify(
+  {
+    compilerOptions: {
+      target: "ES2020",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      jsx: "react-jsx",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+    },
+    include: ["src"],
+  },
+  null,
+  2,
+);
+
+const screenTsconfigVanilla = JSON.stringify(
+  {
+    compilerOptions: {
+      target: "ES2020",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+    },
+    include: ["src"],
+  },
+  null,
+  2,
+);
+
+function screenViteConfig(isReact) {
+  if (isReact) {
+    return `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5173 },
+  build: { outDir: '../dist/screen' },
+});
+`;
+  }
+  return `import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: { port: 5173 },
+  build: { outDir: '../dist/screen' },
+});
+`;
+}
+
+function screenIndexHtml(title, isReact) {
+  const entry = isReact ? "/src/main.tsx" : "/src/main.ts";
+  const root = isReact ? '\n    <div id="root"></div>' : "";
+  return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title} - Screen</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 100%; height: 100%; background: #0f0f0f; color: #fff; font-family: sans-serif; overflow: hidden; }
+      #root, #app { width: 100%; height: 100%; }
+    </style>
+  </head>
+  <body>${root}
+    <script type="module" src="${entry}"></script>
+  </body>
+</html>
+`;
+}
+
+// Screen: React + Phaser
+export function screenReactPhaser(gameId) {
+  return {
+    "package.json": JSON.stringify(
+      {
+        name: "screen",
+        private: true,
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "tsc && vite build",
+        },
+        dependencies: {
+          react: "^18.3.1",
+          "react-dom": "^18.3.1",
+          phaser: "^3.80.1",
+          "@smoregg/sdk": "^0.1.0",
+        },
+        devDependencies: {
+          "@types/react": "^18.3.0",
+          "@types/react-dom": "^18.3.0",
+          "@vitejs/plugin-react": "^4.3.0",
+          typescript: "^5.5.0",
+          vite: "^5.4.0",
+        },
+      },
+      null,
+      2,
+    ),
+    "tsconfig.json": screenTsconfig,
+    "vite.config.ts": screenViteConfig(true),
+    "index.html": screenIndexHtml(gameId, true),
+    "src/main.tsx": `import { createRoot } from 'react-dom/client';
+import { IframeRoomProvider } from '@smoregg/sdk/iframe';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <IframeRoomProvider>
+    <App />
+  </IframeRoomProvider>
+);
+`,
+    "src/App.tsx": `import { useGameHost } from '@smoregg/sdk/iframe';
+import { useEffect, useRef } from 'react';
+import Phaser from 'phaser';
+import { GameScene } from './scenes/GameScene';
+
+export function App() {
+  const gameRef = useRef<Phaser.Game | null>(null);
+  const { room, broadcast } = useGameHost({
+    gameId: '${gameId}',
+    onInput: {
+      tap: (playerId, data) => {
+        console.log('Player tapped:', playerId, data);
+        // Forward input to Phaser scene
+        gameRef.current?.events.emit('player-tap', { playerId, ...data });
+      },
+    },
+    onPlayerJoin: (playerId) => {
+      console.log('Player joined:', playerId);
+    },
+    onPlayerLeave: (playerId) => {
+      console.log('Player left:', playerId);
+    },
+  });
+
+  useEffect(() => {
+    if (gameRef.current) return;
+
+    gameRef.current = new Phaser.Game({
+      type: Phaser.AUTO,
+      parent: 'phaser-container',
+      width: 1280,
+      height: 720,
+      backgroundColor: '#0f0f0f',
+      scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+      },
+      scene: [GameScene],
+    });
+
+    return () => {
+      gameRef.current?.destroy(true);
+      gameRef.current = null;
+    };
+  }, []);
+
+  return (
+    <div style={{ width: '100%', height: '100%' }}>
+      <div id="phaser-container" style={{ width: '100%', height: '100%' }} />
+    </div>
+  );
+}
+`,
+    "src/scenes/GameScene.ts": `import Phaser from 'phaser';
+
+export class GameScene extends Phaser.Scene {
+  private label!: Phaser.GameObjects.Text;
+
+  constructor() {
+    super('GameScene');
+  }
+
+  create() {
+    this.label = this.add
+      .text(640, 360, 'Waiting for players...', {
+        fontSize: '32px',
+        color: '#ffffff',
+      })
+      .setOrigin(0.5);
+
+    // Listen for player taps forwarded from React
+    this.game.events.on('player-tap', (data: { playerId: string }) => {
+      this.label.setText(\`Player \${data.playerId.slice(0, 6)} tapped!\`);
+    });
+  }
+}
+`,
+  };
+}
+
+// Screen: React only
+export function screenReact(gameId) {
+  return {
+    "package.json": JSON.stringify(
+      {
+        name: "screen",
+        private: true,
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "tsc && vite build",
+        },
+        dependencies: {
+          react: "^18.3.1",
+          "react-dom": "^18.3.1",
+          "@smoregg/sdk": "^0.1.0",
+        },
+        devDependencies: {
+          "@types/react": "^18.3.0",
+          "@types/react-dom": "^18.3.0",
+          "@vitejs/plugin-react": "^4.3.0",
+          typescript: "^5.5.0",
+          vite: "^5.4.0",
+        },
+      },
+      null,
+      2,
+    ),
+    "tsconfig.json": screenTsconfig,
+    "vite.config.ts": screenViteConfig(true),
+    "index.html": screenIndexHtml(gameId, true),
+    "src/main.tsx": `import { createRoot } from 'react-dom/client';
+import { IframeRoomProvider } from '@smoregg/sdk/iframe';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <IframeRoomProvider>
+    <App />
+  </IframeRoomProvider>
+);
+`,
+    "src/App.tsx": `import { useGameHost } from '@smoregg/sdk/iframe';
+import { useState } from 'react';
+
+export function App() {
+  const [taps, setTaps] = useState<{ playerId: string; time: number }[]>([]);
+
+  const { room, broadcast } = useGameHost({
+    gameId: '${gameId}',
+    onInput: {
+      tap: (playerId, data) => {
+        setTaps((prev) => [...prev.slice(-9), { playerId, time: Date.now() }]);
+      },
+    },
+    onPlayerJoin: (playerId) => {
+      console.log('Player joined:', playerId);
+    },
+    onPlayerLeave: (playerId) => {
+      console.log('Player left:', playerId);
+    },
+  });
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '2vmin' }}>
+      <h1 style={{ fontSize: '5vmin' }}>
+        {room?.players?.length ? \`\${room.players.length} player(s) connected\` : 'Waiting for players...'}
+      </h1>
+      <div style={{ fontSize: '3vmin', opacity: 0.6 }}>
+        {taps.map((t, i) => (
+          <div key={i}>Player {t.playerId.slice(0, 6)} tapped</div>
+        ))}
+      </div>
+    </div>
+  );
+}
+`,
+  };
+}
+
+// Screen: Vanilla JS
+export function screenVanilla(gameId) {
+  return {
+    "package.json": JSON.stringify(
+      {
+        name: "screen",
+        private: true,
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "tsc && vite build",
+        },
+        dependencies: {
+          "@smoregg/sdk": "^0.1.0",
+        },
+        devDependencies: {
+          typescript: "^5.5.0",
+          vite: "^5.4.0",
+        },
+      },
+      null,
+      2,
+    ),
+    "tsconfig.json": screenTsconfigVanilla,
+    "vite.config.ts": screenViteConfig(false),
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${gameId} - Screen</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { width: 100%; height: 100%; background: #0f0f0f; color: #fff; font-family: sans-serif; overflow: hidden; }
+      #app { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2vmin; }
+      h1 { font-size: 5vmin; }
+      #log { font-size: 3vmin; opacity: 0.6; }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <h1 id="status">Waiting for players...</h1>
+      <div id="log"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`,
+    "src/main.ts": `import { createIframeHost } from '@smoregg/sdk/iframe';
+
+const host = createIframeHost({
+  gameId: '${gameId}',
+  onInput: {
+    tap: (playerId: string, data: unknown) => {
+      const log = document.getElementById('log')!;
+      const line = document.createElement('div');
+      line.textContent = \`Player \${playerId.slice(0, 6)} tapped\`;
+      log.appendChild(line);
+      // Keep last 10
+      while (log.children.length > 10) log.removeChild(log.firstChild!);
+    },
+  },
+  onPlayerJoin: (playerId: string) => {
+    document.getElementById('status')!.textContent = 'Player connected!';
+  },
+});
+`,
+  };
+}
+
+// ─── Player templates ───
+
+const playerTsconfig = JSON.stringify(
+  {
+    compilerOptions: {
+      target: "ES2020",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      jsx: "react-jsx",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+    },
+    include: ["src"],
+  },
+  null,
+  2,
+);
+
+const playerTsconfigVanilla = JSON.stringify(
+  {
+    compilerOptions: {
+      target: "ES2020",
+      module: "ESNext",
+      moduleResolution: "bundler",
+      strict: true,
+      esModuleInterop: true,
+      skipLibCheck: true,
+      outDir: "dist",
+    },
+    include: ["src"],
+  },
+  null,
+  2,
+);
+
+// Player: React
+export function playerReact(gameId) {
+  return {
+    "package.json": JSON.stringify(
+      {
+        name: "player",
+        private: true,
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "tsc && vite build",
+        },
+        dependencies: {
+          react: "^18.3.1",
+          "react-dom": "^18.3.1",
+          "@smoregg/sdk": "^0.1.0",
+        },
+        devDependencies: {
+          "@types/react": "^18.3.0",
+          "@types/react-dom": "^18.3.0",
+          "@vitejs/plugin-react": "^4.3.0",
+          typescript: "^5.5.0",
+          vite: "^5.4.0",
+        },
+      },
+      null,
+      2,
+    ),
+    "tsconfig.json": playerTsconfig,
+    "vite.config.ts": `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: { port: 5174 },
+  build: { outDir: '../dist/player' },
+});
+`,
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <title>${gameId} - Player</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body, #root {
+        width: 100%; height: 100vh; height: 100dvh;
+        background: #0f0f0f; color: #fff; font-family: sans-serif;
+        overflow: hidden; overscroll-behavior: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+    "src/main.tsx": `import { createRoot } from 'react-dom/client';
+import { IframeRoomProvider } from '@smoregg/sdk/iframe';
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(
+  <IframeRoomProvider>
+    <App />
+  </IframeRoomProvider>
+);
+`,
+    "src/App.tsx": `import { useGamePlayer, TapButton } from '@smoregg/sdk/iframe';
+import { useState } from 'react';
+
+export function App() {
+  const [count, setCount] = useState(0);
+
+  const { emit, room } = useGamePlayer({
+    gameId: '${gameId}',
+    listeners: {
+      'score-update': (data: { score: number }) => {
+        setCount(data.score);
+      },
+    },
+  });
+
+  const handleTap = () => {
+    emit('tap', { timestamp: Date.now() });
+    setCount((c) => c + 1);
+  };
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, display: 'flex', flexDirection: 'column',
+      alignItems: 'center', justifyContent: 'center', gap: '24px',
+      padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
+      touchAction: 'manipulation', userSelect: 'none',
+    }}>
+      <div style={{ fontSize: '48px', fontWeight: 'bold' }}>{count}</div>
+      <TapButton onTap={handleTap} style={{
+        width: '200px', height: '200px', borderRadius: '50%',
+        background: '#4f46e5', border: 'none', color: '#fff',
+        fontSize: '24px', fontWeight: 'bold', cursor: 'pointer',
+      }}>
+        TAP
+      </TapButton>
+    </div>
+  );
+}
+`,
+  };
+}
+
+// Player: Vanilla JS
+export function playerVanilla(gameId) {
+  return {
+    "package.json": JSON.stringify(
+      {
+        name: "player",
+        private: true,
+        type: "module",
+        scripts: {
+          dev: "vite",
+          build: "tsc && vite build",
+        },
+        dependencies: {
+          "@smoregg/sdk": "^0.1.0",
+        },
+        devDependencies: {
+          typescript: "^5.5.0",
+          vite: "^5.4.0",
+        },
+      },
+      null,
+      2,
+    ),
+    "tsconfig.json": playerTsconfigVanilla,
+    "vite.config.ts": `import { defineConfig } from 'vite';
+
+export default defineConfig({
+  server: { port: 5174 },
+  build: { outDir: '../dist/player' },
+});
+`,
+    "index.html": `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <title>${gameId} - Player</title>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body {
+        width: 100%; height: 100vh; height: 100dvh;
+        background: #0f0f0f; color: #fff; font-family: sans-serif;
+        overflow: hidden; overscroll-behavior: none;
+        touch-action: manipulation; user-select: none;
+        -webkit-user-select: none;
+      }
+      #app {
+        position: fixed; inset: 0;
+        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
+        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+      }
+      #count { font-size: 48px; font-weight: bold; }
+      #tap-btn {
+        width: 200px; height: 200px; border-radius: 50%;
+        background: #4f46e5; border: none; color: #fff;
+        font-size: 24px; font-weight: bold; cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+      }
+      #tap-btn:active { background: #4338ca; }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div id="count">0</div>
+      <button id="tap-btn">TAP</button>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
+`,
+    "src/main.ts": `import { createIframePlayer } from '@smoregg/sdk/iframe';
+
+let count = 0;
+const countEl = document.getElementById('count')!;
+const tapBtn = document.getElementById('tap-btn')!;
+
+const player = createIframePlayer({
+  gameId: '${gameId}',
+  listeners: {
+    'score-update': (data: { score: number }) => {
+      count = data.score;
+      countEl.textContent = String(count);
+    },
+  },
+});
+
+tapBtn.addEventListener('pointerdown', () => {
+  player.emit('tap', { timestamp: Date.now() });
+  count++;
+  countEl.textContent = String(count);
+});
+`,
+  };
+}