create-smore-game 1.3.0 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smore-game",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "type": "module",
   "bin": {
     "create-smore-game": "./index.js"

package/templates.js

@@ -3,7 +3,7 @@
 // pnpm-workspace.yaml is no longer generated.
 // npm workspaces are configured in root package.json instead.
 
-const SDK_VERSION = '^1.3.0';
+const SDK_VERSION = '^2.0.0';
 
 export function rootPackageJson(name) {
   return JSON.stringify(
@@ -164,7 +164,7 @@ import { GameScene } from './scenes/GameScene';
 
 // Type-safe events example:
 // type MyEvents = { 'player-move': { x: number; y: number } };
-// const screen = await createScreen<MyEvents>({ ... });
+// const screen = createScreen<MyEvents>({ debug: true });
 
 // Testing: Use mock utilities for unit tests
 // import { createMockScreen, createMockController } from '@smoregg/sdk';
@@ -189,66 +189,56 @@ export function App() {
   useEffect(() => {
     let mounted = true;
 
-    const init = async () => {
-      // Alternative: register listeners in config (instead of screen.on())
-      // const screen = await createScreen({
-      //   listeners: {
-      //     'tap': (playerIndex, data) => console.log('Player', playerIndex, 'tapped:', data),
-      //   },
-      // });
-      // Note: listeners in config are set during initialization and cannot be removed.
-      // Use screen.on(event, handler) / screen.off(event, handler) for dynamic listeners.
-
-      const screen = await createScreen({
-        debug: true,
-        onControllerJoin: (playerIndex, info) => {
-          console.log('Player joined:', playerIndex);
-          // Access player character data:
-          // const { nickname, appearance } = info;
-          // console.log(nickname, appearance?.style, appearance?.seed);
-          setControllers([...screen.controllers]);
-        },
-        onControllerLeave: (playerIndex) => {
-          console.log('Player left:', playerIndex);
-          setControllers([...screen.controllers]);
-        },
-        // Advanced callbacks (uncomment to use):
-        onControllerDisconnect: (playerIndex) => {
-          console.log(\`Player \${playerIndex} disconnected\`);
-        },
-        // onControllerReconnect: (playerIndex: number, info: ControllerInfo) => void — called when a disconnected player reconnects
-        // onCharacterUpdated: (playerIndex: number, appearance: CharacterAppearance | null) => void — called when a player updates their character appearance
-        // onRateLimited: (event: string) => void — called when client is rate-limited by server
-        // onReady: () => void — called when all participants are ready. Use for countdown/game start.
-        // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
-        onError: (error) => {
-          console.error('SDK Error:', error.message);
-          // Show user-friendly error UI
-        },
-      });
-      if (!mounted) {
-        screen.destroy();
-        return;
-      }
+    const screen = createScreen({ debug: true });
 
-      screenRef.current = screen;
-      setRoomCode(screen.roomCode);
+    screen.onControllerJoin((playerIndex, info) => {
+      console.log('Player joined:', playerIndex);
+      // Access player character data:
+      // const { nickname, appearance } = info;
+      // console.log(nickname, appearance?.style, appearance?.seed);
+      if (!mounted) return;
       setControllers([...screen.controllers]);
+    });
 
-      // Note: listeners in config are set during initialization (onControllerJoin, etc. above).
-      // Use screen.on(event, handler) / screen.off(event, handler) for dynamic event listeners.
-      // Cleanup example (useful in React useEffect):
-      // const handler = (playerIndex, data) => { ... };
-      // screen.on('my-event', handler);
-      // Later: screen.off('my-event', handler);
-      screen.on('tap', (playerIndex, data) => {
-        console.log('Player', playerIndex, 'tapped:', data);
-        // Forward input to Phaser scene
-        gameRef.current?.events.emit('player-tap', { playerIndex, ...data });
-      });
-    };
+    screen.onControllerLeave((playerIndex) => {
+      console.log('Player left:', playerIndex);
+      if (!mounted) return;
+      setControllers([...screen.controllers]);
+    });
+
+    // Advanced callbacks (uncomment to use):
+    screen.onControllerDisconnect((playerIndex) => {
+      console.log(\`Player \${playerIndex} disconnected\`);
+    });
+    // screen.onControllerReconnect((playerIndex, info) => { console.log('Player reconnected:', playerIndex); });
+    // screen.onCharacterUpdated((playerIndex, appearance) => { console.log('Character updated:', playerIndex); });
+    // screen.onRateLimited((event) => { console.warn('Rate limited:', event); });
+    // screen.onAllReady(() => { console.log('All participants ready'); });
+    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
+
+    screen.onError((error) => {
+      console.error('SDK Error:', error.message);
+      // Show user-friendly error UI
+    });
 
-    init();
+    screen.onAllReady(() => {
+      if (!mounted) return;
+      setRoomCode(screen.roomCode);
+      setControllers([...screen.controllers]);
+    });
+
+    screenRef.current = screen;
+
+    // Use screen.on(event, handler) / screen.off(event, handler) for dynamic event listeners.
+    // Cleanup example (useful in React useEffect):
+    // const handler = (playerIndex, data) => { ... };
+    // screen.on('my-event', handler);
+    // Later: screen.off('my-event', handler);
+    screen.on('tap', (playerIndex, data) => {
+      console.log('Player', playerIndex, 'tapped:', data);
+      // Forward input to Phaser scene
+      gameRef.current?.events.emit('player-tap', { playerIndex, ...data });
+    });
 
     return () => {
       mounted = false;
@@ -362,7 +352,7 @@ import { useEffect, useRef, useState } from 'react';
 
 // Type-safe events example:
 // type MyEvents = { 'player-move': { x: number; y: number } };
-// const screen = await createScreen<MyEvents>({ ... });
+// const screen = createScreen<MyEvents>({ debug: true });
 
 // Testing: Use mock utilities for unit tests
 // import { createMockScreen, createMockController } from '@smoregg/sdk';
@@ -391,49 +381,49 @@ export function App() {
   useEffect(() => {
     let mounted = true;
 
-    const init = async () => {
-      const screen = await createScreen({
-        debug: true,
-        onControllerJoin: (playerIndex, info) => {
-          console.log('Player joined:', playerIndex);
-          setControllers([...screen.controllers]);
-        },
-        onControllerLeave: (playerIndex) => {
-          console.log('Player left:', playerIndex);
-          setControllers([...screen.controllers]);
-        },
-        // Advanced callbacks (uncomment to use):
-        onControllerDisconnect: (playerIndex) => {
-          console.log(\`Player \${playerIndex} disconnected\`);
-        },
-        // onControllerReconnect: (playerIndex: number, info: ControllerInfo) => void — called when a disconnected player reconnects
-        // onCharacterUpdated: (playerIndex: number, appearance: CharacterAppearance | null) => void — called when a player updates their character appearance
-        // onRateLimited: (event: string) => void — called when client is rate-limited by server
-        // onReady: () => void — called when all participants are ready. Use for countdown/game start.
-        // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
-        onError: (error) => {
-          console.error('SDK Error:', error.message);
-          // Show user-friendly error UI
-        },
-      });
-      if (!mounted) {
-        screen.destroy();
-        return;
-      }
+    const screen = createScreen({ debug: true });
 
-      screenRef.current = screen;
+    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]);
+    });
+
+    // Advanced callbacks (uncomment to use):
+    screen.onControllerDisconnect((playerIndex) => {
+      console.log(\`Player \${playerIndex} disconnected\`);
+    });
+    // screen.onControllerReconnect((playerIndex, info) => { console.log('Player reconnected:', playerIndex); });
+    // screen.onCharacterUpdated((playerIndex, appearance) => { console.log('Character updated:', playerIndex); });
+    // screen.onRateLimited((event) => { console.warn('Rate limited:', event); });
+    // screen.onAllReady(() => { console.log('All participants ready'); });
+    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
+
+    screen.onError((error) => {
+      console.error('SDK Error:', error.message);
+      // Show user-friendly error UI
+    });
+
+    screen.onAllReady(() => {
+      if (!mounted) return;
       setRoomCode(screen.roomCode);
       setControllers([...screen.controllers]);
+    });
 
-      // Note: listeners in config are set during initialization (onControllerJoin, etc. above).
-      // Use screen.on(event, handler) / screen.off(event, handler) for dynamic event listeners.
-      // destroy() automatically removes all listeners, so explicit off() cleanup is not needed.
-      screen.on('tap', (playerIndex) => {
-        setTaps((prev) => [...prev.slice(-9), { playerIndex, time: Date.now() }]);
-      });
-    };
+    screenRef.current = screen;
 
-    init();
+    // Use screen.on(event, handler) / screen.off(event, handler) for dynamic event listeners.
+    // destroy() automatically removes all listeners, so explicit off() cleanup is not needed.
+    screen.on('tap', (playerIndex) => {
+      if (!mounted) return;
+      setTaps((prev) => [...prev.slice(-9), { playerIndex, time: Date.now() }]);
+    });
 
     return () => {
       mounted = false;
@@ -544,7 +534,7 @@ import type { Screen, ControllerInfo, GameResults } from '@smoregg/sdk';
 
 // Type-safe events example:
 // type MyEvents = { 'player-move': { x: number; y: number } };
-// const screen = await createScreen<MyEvents>({ ... });
+// const screen = createScreen<MyEvents>({ debug: true });
 
 // Testing: Use mock utilities for unit tests
 // import { createMockScreen, createMockController } from '@smoregg/sdk';
@@ -564,58 +554,55 @@ const statusEl = document.getElementById('status')!;
 const roomCodeEl = document.getElementById('room-code')!;
 const logEl = document.getElementById('log')!;
 
-let screen: Screen;
+const screen = createScreen({ debug: true });
 
-async function init() {
-  screen = await createScreen({
-    debug: true,
-    onControllerJoin: (playerIndex) => {
-      console.log('Player joined:', playerIndex);
-      updateStatus();
-    },
-    onControllerLeave: (playerIndex) => {
-      console.log('Player left:', playerIndex);
-      updateStatus();
-    },
-    // Advanced callbacks (uncomment to use):
-    onControllerDisconnect: (playerIndex) => {
-      console.log(\`Player \${playerIndex} disconnected\`);
-    },
-    // onControllerReconnect: (playerIndex, info) => { console.log('Player reconnected:', playerIndex); },
-    // onCharacterUpdated: (playerIndex, appearance) => { console.log('Character updated:', playerIndex); },
-    // onRateLimited: (event: string) => { console.warn('Rate limited:', event); },
-    // onReady: () => void — called when all participants are ready. Use for countdown/game start.
-    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
-    onError: (error) => {
-      console.error('SDK Error:', error.message);
-      // Show user-friendly error UI
-    },
-  });
+screen.onControllerJoin((playerIndex) => {
+  console.log('Player joined:', playerIndex);
+  updateStatus();
+});
+
+screen.onControllerLeave((playerIndex) => {
+  console.log('Player left:', playerIndex);
+  updateStatus();
+});
+
+// Advanced callbacks (uncomment to use):
+screen.onControllerDisconnect((playerIndex) => {
+  console.log(\`Player \${playerIndex} disconnected\`);
+});
+// screen.onControllerReconnect((playerIndex, info) => { console.log('Player reconnected:', playerIndex); });
+// screen.onCharacterUpdated((playerIndex, appearance) => { console.log('Character updated:', playerIndex); });
+// screen.onRateLimited((event) => { console.warn('Rate limited:', event); });
+// screen.onAllReady(() => { console.log('All participants ready'); });
+// To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
+
+screen.onError((error) => {
+  console.error('SDK Error:', error.message);
+  // Show user-friendly error UI
+});
 
+screen.onAllReady(() => {
   roomCodeEl.textContent = \`Room Code: \${screen.roomCode}\`;
   updateStatus();
+});
 
-  // Note: listeners in config are set during initialization (onControllerJoin, etc. above).
-  // Use screen.on(event, handler) / screen.off(event, handler) for dynamic event listeners.
-  // destroy() automatically removes all listeners, so explicit off() cleanup is not needed.
-  screen.on('tap', (playerIndex: number, data: unknown) => {
-    const line = document.createElement('div');
-    line.textContent = \`Player \${playerIndex} tapped\`;
-    logEl.appendChild(line);
-    // Keep last 10 entries
-    while (logEl.children.length > 10) {
-      logEl.removeChild(logEl.firstChild!);
-    }
-  });
-}
+// Use screen.on(event, handler) / screen.off(event, handler) for dynamic event listeners.
+// destroy() automatically removes all listeners, so explicit off() cleanup is not needed.
+screen.on('tap', (playerIndex: number, data: unknown) => {
+  const line = document.createElement('div');
+  line.textContent = \`Player \${playerIndex} tapped\`;
+  logEl.appendChild(line);
+  // Keep last 10 entries
+  while (logEl.children.length > 10) {
+    logEl.removeChild(logEl.firstChild!);
+  }
+});
 
 function updateStatus() {
   const count = screen.controllers.length;
   statusEl.textContent = count > 0 ? \`\${count} player(s) connected\` : 'Waiting for players...';
 }
 
-init();
-
 // Example functions (can be called from console for testing):
 // screen.broadcast('score-update', { score: 100 });
 // screen.sendToController(0, 'message', { text: 'Hello!' });
@@ -735,11 +722,6 @@ createRoot(document.getElementById('root')!).render(<App />);
 import type { Controller, ControllerInfo } from '@smoregg/sdk';
 import { useEffect, useRef, useState } from 'react';
 
-// You can also register listeners in config:
-// const controller = await createController({
-//   listeners: { 'game-state': (data) => { /* handle state */ } },
-// });
-
 export function App() {
   const controllerRef = useRef<Controller | null>(null);
   const [myIndex, setMyIndex] = useState(-1);
@@ -749,35 +731,31 @@ export function App() {
   useEffect(() => {
     let mounted = true;
 
-    const init = async () => {
-      const controller = await createController({
-        debug: true,
-        // Lifecycle callbacks (uncomment to use):
-        // onControllerJoin: (playerIndex: number, info: ControllerInfo) => void — called when any player joins
-        // onControllerLeave: (playerIndex: number) => void — called when any player leaves
-        // onError: (error: SmoreError) => void — called on SDK errors
-        // onReady: () => void — called when all participants are ready
-        // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
-      });
-      if (!mounted) {
-        controller.destroy();
-        return;
-      }
+    const controller = createController({ debug: true });
+
+    // Lifecycle callbacks (uncomment to use):
+    // controller.onControllerJoin((playerIndex, info) => { console.log('Player joined:', playerIndex); });
+    // controller.onControllerLeave((playerIndex) => { console.log('Player left:', playerIndex); });
+    // controller.onError((error) => { console.error('SDK Error:', error.message); });
+    // controller.onAllReady(() => { console.log('All participants ready'); });
+    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
 
-      controllerRef.current = controller;
+    controller.onAllReady(() => {
+      if (!mounted) return;
       setMyIndex(controller.myIndex);
       setIsReady(true);
+    });
 
-      controller.on('score-update', (data: { score: number }) => {
-        setCount(data.score);
-      });
+    controllerRef.current = controller;
 
-      controller.on('personal-message', (data: { text: string }) => {
-        console.log('Received message:', data.text);
-      });
-    };
+    controller.on('score-update', (data: { score: number }) => {
+      if (!mounted) return;
+      setCount(data.score);
+    });
 
-    init();
+    controller.on('personal-message', (data: { text: string }) => {
+      console.log('Received message:', data.text);
+    });
 
     return () => {
       mounted = false;
@@ -896,42 +874,33 @@ export default defineConfig({
     "src/main.ts": `import { createController } from '@smoregg/sdk';
 import type { Controller, ControllerInfo } from '@smoregg/sdk';
 
-// You can also register listeners in config:
-// const controller = await createController({
-//   listeners: { 'game-state': (data) => { /* handle state */ } },
-// });
-
 let count = 0;
-let controller: Controller;
 
 const playerInfoEl = document.getElementById('player-info')!;
 const countEl = document.getElementById('count')!;
 const tapBtn = document.getElementById('tap-btn')!;
 
-async function init() {
-  controller = await createController({
-    debug: true,
-    // Lifecycle callbacks (uncomment to use):
-    // onControllerJoin: (playerIndex, info) => { console.log('Player joined:', playerIndex); },
-    // onControllerLeave: (playerIndex) => { console.log('Player left:', playerIndex); },
-    // onError: (error) => { console.error('SDK Error:', error.message); },
-    // onReady: () => void — called when all participants are ready
-    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
-  });
+const controller = createController({ debug: true });
 
-  playerInfoEl.textContent = \`Player \${controller.myIndex}\`;
+// Lifecycle callbacks (uncomment to use):
+// controller.onControllerJoin((playerIndex, info) => { console.log('Player joined:', playerIndex); });
+// controller.onControllerLeave((playerIndex) => { console.log('Player left:', playerIndex); });
+// controller.onError((error) => { console.error('SDK Error:', error.message); });
+// controller.onAllReady(() => { console.log('All participants ready'); });
+// To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
 
-  controller.on('score-update', (data: { score: number }) => {
-    count = data.score;
-    countEl.textContent = String(count);
-  });
+controller.onAllReady(() => {
+  playerInfoEl.textContent = \`Player \${controller.myIndex}\`;
+});
 
-  controller.on('personal-message', (data: { text: string }) => {
-    console.log('Received message:', data.text);
-  });
-}
+controller.on('score-update', (data: { score: number }) => {
+  count = data.score;
+  countEl.textContent = String(count);
+});
 
-init();
+controller.on('personal-message', (data: { text: string }) => {
+  console.log('Received message:', data.text);
+});
 
 tapBtn.addEventListener('pointerdown', () => {
   controller.send('tap', { timestamp: Date.now() });