create-smore-game 2.3.0 → 3.0.0

package/index.js

@@ -1,8 +1,9 @@
 #!/usr/bin/env node
 
-import fs from "node:fs";
-import path from "node:path";
-import prompts from "prompts";
+import fs from 'node:fs';
+import path from 'node:path';
+import { execSync } from 'node:child_process';
+import prompts from 'prompts';
 import {
   rootPackageJson,
   envExample,
@@ -11,51 +12,69 @@ import {
   screenVanilla,
   controllerReact,
   controllerVanilla,
-  devServer,
-  devHarness,
-  devControllerPage,
-} from "./templates.js";
+} from './templates.js';
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const args = process.argv.slice(2);
-const argName = args.find((a) => !a.startsWith("-"));
+const argName = args.find((a) => !a.startsWith('-'));
+
+// SDK version auto-detection
+function getLatestSdkVersion() {
+  try {
+    const result = execSync('npm view @smoregg/sdk version', {
+      encoding: 'utf-8',
+      timeout: 5000,
+      stdio: ['pipe', 'pipe', 'pipe'],
+    }).trim();
+    if (/^\d+\.\d+\.\d+/.test(result)) {
+      return '^' + result;
+    }
+  } catch {}
+  // Fallback to bundled version
+  return '^2.3.0';
+}
 
 async function main() {
-  console.log("\n  create-smore-game\n");
+  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: 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 (TV) template:",
+        type: 'select',
+        name: 'screen',
+        message: 'Screen (TV) template:',
         choices: [
-          { title: "React + Phaser", value: "react-phaser" },
-          { title: "React only", value: "react" },
-          { title: "Vanilla JS", value: "vanilla" },
+          { title: 'React + Phaser', value: 'react-phaser' },
+          { title: 'React only', value: 'react' },
+          { title: 'Vanilla JS', value: 'vanilla' },
         ],
       },
       {
-        type: "select",
-        name: "controller",
-        message: "Controller (phone) template:",
+        type: 'select',
+        name: 'controller',
+        message: 'Controller (phone) template:',
         choices: [
-          { title: "React", value: "react" },
-          { title: "Vanilla JS", value: "vanilla" },
+          { title: 'React', value: 'react' },
+          { title: 'Vanilla JS', value: 'vanilla' },
         ],
       },
     ],
-    { onCancel: () => (process.exit(0), undefined) },
+    { onCancel: () => process.exit(0) },
   );
 
   const projectName = (argName || response.name).trim();
-  const gameId = projectName.replace(/[^a-z0-9-]/gi, "-").toLowerCase();
+  const gameId = projectName.replace(/[^a-z0-9-]/gi, '-').toLowerCase();
   const root = path.resolve(process.cwd(), projectName);
 
   if (fs.existsSync(root)) {
@@ -63,68 +82,64 @@ async function main() {
     process.exit(1);
   }
 
+  // Auto-detect SDK version
+  console.log('  Detecting latest SDK version...');
+  const sdkVersion = getLatestSdkVersion();
+  console.log(`  Using @smoregg/sdk ${sdkVersion}\n`);
+
   // Get templates
   const screenFiles =
-    response.screen === "react-phaser"
-      ? screenReactPhaser(gameId)
-      : response.screen === "react"
-        ? screenReact(gameId)
-        : screenVanilla(gameId);
+    response.screen === 'react-phaser'
+      ? screenReactPhaser(gameId, sdkVersion)
+      : response.screen === 'react'
+        ? screenReact(gameId, sdkVersion)
+        : screenVanilla(gameId, sdkVersion);
 
   const controllerFiles =
-    response.controller === "react" ? controllerReact(gameId) : controllerVanilla(gameId);
+    response.controller === 'react'
+      ? controllerReact(gameId, sdkVersion)
+      : controllerVanilla(gameId, sdkVersion);
 
   // Write root files
-  writeFile(root, "package.json", rootPackageJson(projectName));
-  writeFile(
-    root,
-    ".gitignore",
-    "node_modules\ndist\n*.local\n.DS_Store\n.env\n",
-  );
-  writeFile(root, ".env.example", envExample());
+  writeFile(root, 'package.json', rootPackageJson(projectName));
+  writeFile(root, '.gitignore', 'node_modules\ndist\n*.local\n.DS_Store\n.env\n');
+  writeFile(root, '.env.example', envExample());
   writeFile(
     root,
-    "game.json",
+    'game.json',
     JSON.stringify(
       {
         id: gameId,
         title: projectName,
-        description: "",
+        description: '',
         minPlayers: 2,
         maxPlayers: 8,
-        categories: ["party"],
-        version: "0.1.0",
+        categories: ['party'],
+        version: '0.1.0',
       },
       null,
       2,
     ),
   );
 
+  // Write shared types
+  writeFile(root, 'types.ts', readFileSync(join(__dirname, 'templates', 'types.ts'), 'utf-8'));
+
   // Write screen files
   for (const [filePath, content] of Object.entries(screenFiles)) {
-    writeFile(path.join(root, "screen"), filePath, content);
+    writeFile(path.join(root, 'screen'), filePath, content);
   }
 
   // Write controller files
   for (const [filePath, content] of Object.entries(controllerFiles)) {
-    writeFile(path.join(root, "controller"), filePath, content);
-  }
-
-  // Write dev server files
-  const devFiles = {
-    ...devServer(gameId),
-    ...devHarness(gameId),
-    ...devControllerPage(gameId),
-  };
-  for (const [filePath, content] of Object.entries(devFiles)) {
-    writeFile(root, filePath, content);
+    writeFile(path.join(root, 'controller'), filePath, content);
   }
 
   console.log(`\n  Done! Created ${projectName}/\n`);
-  console.log("  Next steps:\n");
+  console.log('  Next steps:\n');
   console.log(`    cd ${projectName}`);
-  console.log("    npm install");
-  console.log("    npm run dev\n");
+  console.log('    npm install');
+  console.log('    npm run dev\n');
 }
 
 function writeFile(dir, filePath, content) {

package/package.json

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

package/templates/config/tsconfig.react.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "../types.ts"]
+}

package/templates/config/tsconfig.vanilla.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "../types.ts"]
+}

package/templates/config/vite.controller.react.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+  server: { port: 5174, host: true },
+  build: { outDir: '../dist/controller' },
+});

package/templates/config/vite.controller.vanilla.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: './',
+  server: { port: 5174, host: true },
+  build: { outDir: '../dist/controller' },
+});

package/templates/config/vite.screen.react.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  base: './',
+  plugins: [react()],
+  server: { port: 5173, host: true },
+  build: { outDir: '../dist/screen' },
+});

package/templates/config/vite.screen.vanilla.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: './',
+  server: { port: 5173, host: true },
+  build: { outDir: '../dist/screen' },
+});

package/templates/html/controller.react.html

@@ -0,0 +1,20 @@
+<!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>{{GAME_ID}} - Controller</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>

package/templates/html/controller.vanilla.html

@@ -0,0 +1,40 @@
+<!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>{{GAME_ID}} - Controller</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);
+      }
+      #player-info { font-size: 16px; opacity: 0.6; }
+      #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="player-info"></div>
+      <div id="count">0</div>
+      <button id="tap-btn">TAP</button>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/html/screen.react.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{GAME_ID}} - 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>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/html/screen.vanilla.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{GAME_ID}} - 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; }
+      #room-code { font-size: 3vmin; opacity: 0.8; }
+      #log { font-size: 3vmin; opacity: 0.6; }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <h1 id="status">Waiting for players...</h1>
+      <div id="room-code"></div>
+      <div id="log"></div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/react/controller/App.test.tsx

@@ -0,0 +1,24 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createMockController } from '@smoregg/sdk/testing';
+import type { GameEvents } from '../../types';
+
+describe('Game Controller', () => {
+  let controller: ReturnType<typeof createMockController<GameEvents>>;
+
+  beforeEach(() => {
+    controller = createMockController<GameEvents>({ autoReady: true });
+  });
+
+  it('should send tap event on user input', async () => {
+    await controller.ready;
+    controller.send('tap', { timestamp: Date.now() });
+    const sends = controller.getSends();
+    expect(sends).toHaveLength(1);
+    expect(sends[0].event).toBe('tap');
+  });
+
+  it('should update display when Screen pushes score', async () => {
+    await controller.ready;
+    controller.simulateEvent('score-update', { score: 42 });
+  });
+});

package/templates/react/controller/App.tsx

@@ -0,0 +1,80 @@
+import { createController } from '@smoregg/sdk';
+import type { Controller, ControllerInfo } from '@smoregg/sdk';
+import { useEffect, useRef, useState } from 'react';
+import type { GameEvents } from '../../types';
+
+/**
+ * ARCHITECTURE: Stateless Controller Pattern
+ *
+ * The controller is a stateless display + input device:
+ * - Render ONLY what the Screen sends (via controller.on())
+ * - Send ONLY user input to Screen (via controller.send())
+ * - Do NOT store or compute game state here
+ */
+
+export function App() {
+  const controllerRef = useRef<Controller | null>(null);
+  const [myIndex, setMyIndex] = useState(-1);
+  const [me, setMe] = useState<ControllerInfo | null>(null);
+  const [count, setCount] = useState(0);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const controller = createController<GameEvents>({ debug: true });
+
+    controller.onAllReady(() => {
+      if (!mounted) return;
+      setMyIndex(controller.myPlayerIndex);
+      setMe(controller.me);
+      setIsReady(true);
+    });
+
+    controllerRef.current = controller;
+
+    controller.on('score-update', (data) => {
+      if (!mounted) return;
+      setCount(data.score);
+    });
+
+    controller.on('personal-message', (data) => {
+      console.log('Received message:', data.text);
+    });
+
+    return () => {
+      mounted = false;
+      controllerRef.current?.destroy();
+      controllerRef.current = null;
+    };
+  }, []);
+
+  const handleTap = () => {
+    controllerRef.current?.send('tap', { timestamp: Date.now() });
+  };
+
+  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',
+    }}>
+      {isReady && (
+        <div style={{ fontSize: '16px', opacity: 0.6 }}>{me?.nickname ?? `Player ${myIndex}`}</div>
+      )}
+      <div style={{ fontSize: '48px', fontWeight: 'bold' }}>{count}</div>
+      <button
+        onPointerDown={handleTap}
+        style={{
+          width: '200px', height: '200px', borderRadius: '50%',
+          background: '#4f46e5', border: 'none', color: '#fff',
+          fontSize: '24px', fontWeight: 'bold', cursor: 'pointer',
+          WebkitTapHighlightColor: 'transparent',
+        }}
+      >
+        TAP
+      </button>
+    </div>
+  );
+}

package/templates/react/controller/main.tsx

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

package/templates/react/screen/App.test.tsx

@@ -0,0 +1,21 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { createMockScreen } from '@smoregg/sdk/testing';
+import type { GameEvents } from '../../types';
+
+describe('Game Screen', () => {
+  let screen: ReturnType<typeof createMockScreen<GameEvents>>;
+
+  beforeEach(() => {
+    screen = createMockScreen<GameEvents>({ autoReady: true });
+  });
+
+  it('should broadcast score-update when player taps', async () => {
+    await screen.ready;
+    screen.simulateEvent('tap', 0, { timestamp: Date.now() });
+  });
+
+  it('should handle player reconnection', async () => {
+    await screen.ready;
+    screen.simulateControllerReconnect(0);
+  });
+});

package/templates/react/screen/App.tsx

@@ -0,0 +1,91 @@
+import { createScreen } from '@smoregg/sdk';
+import type { Screen, ControllerInfo, GameResults } from '@smoregg/sdk';
+import { useEffect, useRef, useState } from 'react';
+import type { GameEvents } from '../../types';
+
+export function App() {
+  const screenRef = useRef<Screen | null>(null);
+  const [roomCode, setRoomCode] = useState('');
+  const [controllers, setControllers] = useState<ControllerInfo[]>([]);
+  const [taps, setTaps] = useState<{ playerIndex: number; time: number }[]>([]);
+  const [tapCount, setTapCount] = useState(0);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const screen = createScreen<GameEvents>({ debug: true });
+
+    screen.onControllerJoin((playerIndex, info) => {
+      console.log('Player joined:', playerIndex);
+      if (!mounted) return;
+      setControllers([...screen.controllers]);
+    });
+
+    screen.onControllerLeave((playerIndex) => {
+      console.log('Player left:', playerIndex);
+      if (!mounted) return;
+      setControllers([...screen.controllers]);
+    });
+
+    screen.onControllerDisconnect((playerIndex) => {
+      console.log(`Player ${playerIndex} disconnected`);
+    });
+
+    screen.onError((error) => {
+      console.error('SDK Error:', error.message);
+    });
+
+    screen.onAllReady(() => {
+      if (!mounted) return;
+      setRoomCode(screen.roomCode);
+      setControllers([...screen.controllers]);
+    });
+
+    screenRef.current = screen;
+
+    screen.on('tap', (playerIndex, data) => {
+      if (!mounted) return;
+      setTaps((prev) => [...prev.slice(-9), { playerIndex, time: Date.now() }]);
+      setTapCount((prev) => {
+        const newCount = prev + 1;
+        screen.broadcast('score-update', { score: newCount });
+        return newCount;
+      });
+    });
+
+    return () => {
+      mounted = false;
+      screenRef.current?.destroy();
+      screenRef.current = null;
+    };
+  }, []);
+
+  const handleSendToPlayer = (playerIndex: number) => {
+    screenRef.current?.sendToController(playerIndex, 'personal-message', { text: 'Hello!' });
+  };
+
+  const handleGameOver = () => {
+    const scores: Record<number, number> = {};
+    controllers.forEach((_, idx) => {
+      scores[idx] = Math.floor(Math.random() * 100);
+    });
+    const results: GameResults = { scores };
+    screenRef.current?.gameOver(results);
+  };
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: '2vmin' }}>
+      <h1 style={{ fontSize: '5vmin' }}>
+        {controllers.length ? `${controllers.length} player(s) connected` : 'Waiting for players...'}
+      </h1>
+      {roomCode && (
+        <div style={{ fontSize: '3vmin', opacity: 0.8 }}>Room Code: {roomCode}</div>
+      )}
+      <div style={{ fontSize: '3vmin', opacity: 0.6 }}>
+        {taps.map((t, i) => (
+          <div key={i}>Player {t.playerIndex} tapped</div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/react/screen/main.tsx

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