create-smore-game 2.0.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smore-game",
-  "version": "2.0.0",
+  "version": "2.2.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 = '^2.0.0';
+const SDK_VERSION = '^2.2.0';
 
 export function rootPackageJson(name) {
   return JSON.stringify(
@@ -119,7 +119,7 @@ function screenIndexHtml(title, isReact) {
 
 // Screen: React + Phaser
 // Test utilities: createMockScreen(), createMockController() can be imported in test files
-// Example: import { createMockScreen } from '@smoregg/sdk';
+// Example: import { createMockScreen } from '@smoregg/sdk/testing';
 export function screenReactPhaser(gameId) {
   return {
     "package.json": JSON.stringify(
@@ -162,12 +162,14 @@ import { useEffect, useRef, useState } from 'react';
 import Phaser from 'phaser';
 import { GameScene } from './scenes/GameScene';
 
-// Type-safe events example:
-// type MyEvents = { 'player-move': { x: number; y: number } };
-// const screen = createScreen<MyEvents>({ debug: true });
+interface GameEvents {
+  'score-update': { score: number };
+  'personal-message': { text: string };
+  'tap': { timestamp: number };
+}
 
 // Testing: Use mock utilities for unit tests
-// import { createMockScreen, createMockController } from '@smoregg/sdk';
+// import { createMockScreen, createMockController } from '@smoregg/sdk/testing';
 // const mockScreen = createMockScreen();
 // mockScreen.simulateControllerJoin({ playerIndex: 0, name: 'Test' });
 
@@ -175,10 +177,8 @@ import { GameScene } from './scenes/GameScene';
 // screen/controller onError callback handles initialization and runtime errors.
 // Wrap critical game logic in try/catch for graceful error recovery.
 
-// Import GameMetadata type for game.json schema:
-// import type { GameMetadata } from '@smoregg/sdk';
+// Game metadata is defined in game.json (see S'MORE platform docs)
 // game.json fields: { id, title, description, minPlayers, maxPlayers, version }
-// See docs for full GameMetadata schema.
 
 export function App() {
   const screenRef = useRef<Screen | null>(null);
@@ -189,7 +189,7 @@ export function App() {
   useEffect(() => {
     let mounted = true;
 
-    const screen = createScreen({ debug: true });
+    const screen = createScreen<GameEvents>({ debug: true });
 
     screen.onControllerJoin((playerIndex, info) => {
       console.log('Player joined:', playerIndex);
@@ -212,9 +212,9 @@ export function App() {
     });
     // 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); });
+    // Rate limiting is delivered through onError() with code 'RATE_LIMITED'
     // screen.onAllReady(() => { console.log('All participants ready'); });
-    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
+    // To control autoReady: createScreen({ autoReady: false }) or createController({ autoReady: false })
 
     screen.onError((error) => {
       console.error('SDK Error:', error.message);
@@ -310,7 +310,7 @@ export class GameScene extends Phaser.Scene {
 
 // Screen: React only
 // Test utilities: createMockScreen(), createMockController() can be imported in test files
-// Example: import { createMockScreen } from '@smoregg/sdk';
+// Example: import { createMockScreen } from '@smoregg/sdk/testing';
 export function screenReact(gameId) {
   return {
     "package.json": JSON.stringify(
@@ -350,12 +350,14 @@ createRoot(document.getElementById('root')!).render(<App />);
 import type { Screen, ControllerInfo, GameResults } from '@smoregg/sdk';
 import { useEffect, useRef, useState } from 'react';
 
-// Type-safe events example:
-// type MyEvents = { 'player-move': { x: number; y: number } };
-// const screen = createScreen<MyEvents>({ debug: true });
+interface GameEvents {
+  'score-update': { score: number };
+  'personal-message': { text: string };
+  'tap': { timestamp: number };
+}
 
 // Testing: Use mock utilities for unit tests
-// import { createMockScreen, createMockController } from '@smoregg/sdk';
+// import { createMockScreen, createMockController } from '@smoregg/sdk/testing';
 // const mockScreen = createMockScreen();
 // mockScreen.simulateControllerJoin({ playerIndex: 0, name: 'Test' });
 
@@ -363,25 +365,20 @@ import { useEffect, useRef, useState } from 'react';
 // screen/controller onError callback handles initialization and runtime errors.
 // Wrap critical game logic in try/catch for graceful error recovery.
 
-// Import GameMetadata type for game.json schema:
-// import type { GameMetadata } from '@smoregg/sdk';
+// Game metadata is defined in game.json (see S'MORE platform docs)
 // game.json fields: { id, title, description, minPlayers, maxPlayers, version }
-// See docs for full GameMetadata schema.
-
-// Advanced: Validate custom event names before sending
-// import { validateEventName } from '@smoregg/sdk';
-// validateEventName('my-event'); // throws if contains ':'
 
 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 [customStates, setCustomStates] = useState<Record<number, Record<string, unknown>>>({});
 
   useEffect(() => {
     let mounted = true;
 
-    const screen = createScreen({ debug: true });
+    const screen = createScreen<GameEvents>({ debug: true });
 
     screen.onControllerJoin((playerIndex, info) => {
       console.log('Player joined:', playerIndex);
@@ -401,9 +398,9 @@ export function App() {
     });
     // 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); });
+    // Rate limiting is delivered through onError() with code 'RATE_LIMITED'
     // screen.onAllReady(() => { console.log('All participants ready'); });
-    // To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
+    // To control autoReady: createScreen({ autoReady: false }) or createController({ autoReady: false })
 
     screen.onError((error) => {
       console.error('SDK Error:', error.message);
@@ -416,11 +413,16 @@ export function App() {
       setControllers([...screen.controllers]);
     });
 
+    screen.onCustomStateChange((playerIndex, state) => {
+      if (!mounted) return;
+      setCustomStates((prev) => ({ ...prev, [playerIndex]: state }));
+    });
+
     screenRef.current = screen;
 
     // 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) => {
+    screen.on('tap', (playerIndex, data) => {
       if (!mounted) return;
       setTaps((prev) => [...prev.slice(-9), { playerIndex, time: Date.now() }]);
     });
@@ -448,11 +450,11 @@ export function App() {
     controllers.forEach((_, idx) => {
       scores[idx] = Math.floor(Math.random() * 100);
     });
-    // GameResults fields: scores (required), winner (optional), reason (optional)
+    // GameResults fields: scores (optional), winner (optional), rankings (optional), custom (optional)
     const results: GameResults = {
       scores,
       // winner: 0, // optional — playerIndex of winner
-      // reason: 'time-up', // optional — custom game-over reason
+      // custom: { reason: 'time-up' }, // optional -- custom game-specific data
     };
     screenRef.current?.gameOver(results);
   };
@@ -479,7 +481,7 @@ export function App() {
 
 // Screen: Vanilla JS
 // Test utilities: createMockScreen(), createMockController() can be imported in test files
-// Example: import { createMockScreen } from '@smoregg/sdk';
+// Example: import { createMockScreen } from '@smoregg/sdk/testing';
 export function screenVanilla(gameId) {
   return {
     "package.json": JSON.stringify(
@@ -530,14 +532,16 @@ export function screenVanilla(gameId) {
 </html>
 `,
     "src/main.ts": `import { createScreen } from '@smoregg/sdk';
-import type { Screen, ControllerInfo, GameResults } from '@smoregg/sdk';
+import type { GameResults } from '@smoregg/sdk';
 
-// Type-safe events example:
-// type MyEvents = { 'player-move': { x: number; y: number } };
-// const screen = createScreen<MyEvents>({ debug: true });
+interface GameEvents {
+  'score-update': { score: number };
+  'personal-message': { text: string };
+  'tap': { timestamp: number };
+}
 
 // Testing: Use mock utilities for unit tests
-// import { createMockScreen, createMockController } from '@smoregg/sdk';
+// import { createMockScreen, createMockController } from '@smoregg/sdk/testing';
 // const mockScreen = createMockScreen();
 // mockScreen.simulateControllerJoin({ playerIndex: 0, name: 'Test' });
 
@@ -545,16 +549,14 @@ import type { Screen, ControllerInfo, GameResults } from '@smoregg/sdk';
 // screen/controller onError callback handles initialization and runtime errors.
 // Wrap critical game logic in try/catch for graceful error recovery.
 
-// Import GameMetadata type for game.json schema:
-// import type { GameMetadata } from '@smoregg/sdk';
+// Game metadata is defined in game.json (see S'MORE platform docs)
 // game.json fields: { id, title, description, minPlayers, maxPlayers, version }
-// See docs for full GameMetadata schema.
 
 const statusEl = document.getElementById('status')!;
 const roomCodeEl = document.getElementById('room-code')!;
 const logEl = document.getElementById('log')!;
 
-const screen = createScreen({ debug: true });
+const screen = createScreen<GameEvents>({ debug: true });
 
 screen.onControllerJoin((playerIndex) => {
   console.log('Player joined:', playerIndex);
@@ -572,9 +574,9 @@ screen.onControllerDisconnect((playerIndex) => {
 });
 // 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); });
+// Rate limiting is delivered through onError() with code 'RATE_LIMITED'
 // screen.onAllReady(() => { console.log('All participants ready'); });
-// To control autoReady, use: import { configure } from '@smoregg/sdk'; configure({ autoReady: false });
+// To control autoReady: createScreen({ autoReady: false }) or createController({ autoReady: false })
 
 screen.onError((error) => {
   console.error('SDK Error:', error.message);
@@ -588,7 +590,7 @@ screen.onAllReady(() => {
 
 // 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) => {
+screen.on('tap', (playerIndex, data) => {
   const line = document.createElement('div');
   line.textContent = \`Player \${playerIndex} tapped\`;
   logEl.appendChild(line);
@@ -609,7 +611,7 @@ function updateStatus() {
 // const results: GameResults = {
 //   scores: { 0: 50, 1: 75 },
 //   // winner: 0,
-//   // reason: 'time-up',
+//   // custom: { reason: 'time-up' },
 // };
 // screen.gameOver(results);
 `,
@@ -722,38 +724,46 @@ createRoot(document.getElementById('root')!).render(<App />);
 import type { Controller, ControllerInfo } from '@smoregg/sdk';
 import { useEffect, useRef, useState } from 'react';
 
+interface GameEvents {
+  'score-update': { score: number };
+  'personal-message': { text: string };
+  'tap': { timestamp: number };
+}
+
 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({ debug: true });
+    const controller = createController<GameEvents>({ 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 });
+    // To control autoReady: createScreen({ autoReady: false }) or createController({ autoReady: false })
 
     controller.onAllReady(() => {
       if (!mounted) return;
-      setMyIndex(controller.myIndex);
+      setMyIndex(controller.myPlayerIndex);
+      setMe(controller.me);
       setIsReady(true);
     });
 
     controllerRef.current = controller;
 
-    controller.on('score-update', (data: { score: number }) => {
+    controller.on('score-update', (data) => {
       if (!mounted) return;
       setCount(data.score);
     });
 
-    controller.on('personal-message', (data: { text: string }) => {
+    controller.on('personal-message', (data) => {
       console.log('Received message:', data.text);
     });
 
@@ -777,7 +787,7 @@ export function App() {
       touchAction: 'manipulation', userSelect: 'none',
     }}>
       {isReady && (
-        <div style={{ fontSize: '16px', opacity: 0.6 }}>Player {myIndex}</div>
+        <div style={{ fontSize: '16px', opacity: 0.6 }}>{me?.name ?? \`Player \${myIndex}\`}</div>
       )}
       <div style={{ fontSize: '48px', fontWeight: 'bold' }}>{count}</div>
       <button
@@ -872,7 +882,12 @@ export default defineConfig({
 </html>
 `,
     "src/main.ts": `import { createController } from '@smoregg/sdk';
-import type { Controller, ControllerInfo } from '@smoregg/sdk';
+
+interface GameEvents {
+  'score-update': { score: number };
+  'personal-message': { text: string };
+  'tap': { timestamp: number };
+}
 
 let count = 0;
 
@@ -880,25 +895,25 @@ const playerInfoEl = document.getElementById('player-info')!;
 const countEl = document.getElementById('count')!;
 const tapBtn = document.getElementById('tap-btn')!;
 
-const controller = createController({ debug: true });
+const controller = createController<GameEvents>({ 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 });
+// To control autoReady: createScreen({ autoReady: false }) or createController({ autoReady: false })
 
 controller.onAllReady(() => {
-  playerInfoEl.textContent = \`Player \${controller.myIndex}\`;
+  playerInfoEl.textContent = controller.me?.name ?? \`Player \${controller.myPlayerIndex}\`;
 });
 
-controller.on('score-update', (data: { score: number }) => {
+controller.on('score-update', (data) => {
   count = data.score;
   countEl.textContent = String(count);
 });
 
-controller.on('personal-message', (data: { text: string }) => {
+controller.on('personal-message', (data) => {
   console.log('Received message:', data.text);
 });
 
@@ -989,6 +1004,7 @@ const room = {
   gameId: '',
   status: 'waiting',
   readyIds: new Set(),
+  customStates: new Map(), // playerIndex -> state object
 };
 
 function toPlayerDTO(p) {
@@ -1135,6 +1151,20 @@ async function main() {
       io.to(room.code).emit('smore:game-over', data);
     });
 
+    socket.on('smore:set-custom-state', (data) => {
+      if (socket.role !== 'player') return;
+      const prev = room.customStates.get(socket.playerIndex) || {};
+      const next = Object.assign({}, prev, data && typeof data === 'object' ? data : {});
+      room.customStates.set(socket.playerIndex, next);
+      io.to(room.code).emit('smore:custom-state-changed', { playerIndex: socket.playerIndex, state: next });
+    });
+
+    socket.on('smore:get-custom-states', () => {
+      const states = {};
+      room.customStates.forEach((state, playerIndex) => { states[playerIndex] = state; });
+      socket.emit('smore:custom-states', { states });
+    });
+
     socket.on('smore:return-to-selection', () => {
       room.status = 'waiting';
       room.gameId = '';
@@ -1156,6 +1186,7 @@ async function main() {
       room.gameId = '';
       room.status = 'waiting';
       room.readyIds = new Set();
+      room.customStates = new Map();
       console.log('  [reset] Room reset by host');
       if (typeof callback === 'function') callback({ success: true });
     });
@@ -1529,7 +1560,8 @@ export function devHarness(gameId) {
     // Forward specific smore: system events to screen iframe
     var screenSysEvents = [
       'smore:player-joined', 'smore:player-left', 'smore:player-disconnected', 'smore:player-reconnected',
-      'smore:player-character-updated', 'smore:rate-limited', 'smore:game-over', 'smore:all-ready'
+      'smore:player-character-updated', 'smore:rate-limited', 'smore:game-over', 'smore:all-ready',
+      'smore:self-disconnected', 'smore:self-reconnected', 'smore:custom-state-changed', 'smore:custom-states'
     ];
     screenSysEvents.forEach(function(sysEvent) {
       screenSocket.on(sysEvent, function(data) {
@@ -1610,7 +1642,8 @@ export function devHarness(gameId) {
     var ctrlSysEvents = [
       'smore:game-over',
       'smore:player-joined', 'smore:player-left', 'smore:player-disconnected', 'smore:player-reconnected',
-      'smore:player-character-updated', 'smore:rate-limited', 'smore:all-ready'
+      'smore:player-character-updated', 'smore:rate-limited', 'smore:all-ready',
+      'smore:self-disconnected', 'smore:self-reconnected', 'smore:custom-state-changed', 'smore:custom-states'
     ];
     ctrlSysEvents.forEach(function(sysEvent) {
       controllerSocket.on(sysEvent, function(data) {
@@ -1647,6 +1680,7 @@ export function devHarness(gameId) {
           side: 'host',
           roomCode: roomCode,
           players: getPlayerList(),
+          protocolVersion: 1,
         },
       }, '*');
       return;
@@ -1700,6 +1734,7 @@ export function devHarness(gameId) {
           roomCode: roomCode,
           players: getPlayerList(),
           myIndex: player.playerIndex,
+          protocolVersion: 1,
         },
       }, '*');
       return;
@@ -1724,6 +1759,16 @@ export function devHarness(gameId) {
         return;
       }
 
+      // Relay custom state events to server
+      if (event === 'smore:set-custom-state') {
+        player.socket.emit('smore:set-custom-state', data || {});
+        return;
+      }
+      if (event === 'smore:get-custom-states') {
+        player.socket.emit('smore:get-custom-states');
+        return;
+      }
+
       // Block smore:* events
       if (event.startsWith('smore:')) return;
 
@@ -1936,7 +1981,8 @@ export function devControllerPage(gameId) {
   var sysEvents = [
     'smore:game-over',
     'smore:player-joined', 'smore:player-left', 'smore:player-disconnected', 'smore:player-reconnected',
-    'smore:player-character-updated', 'smore:rate-limited', 'smore:all-ready'
+    'smore:player-character-updated', 'smore:rate-limited', 'smore:all-ready',
+    'smore:self-disconnected', 'smore:self-reconnected', 'smore:custom-state-changed', 'smore:custom-states'
   ];
   sysEvents.forEach(function(sysEvent) {
     socket.on(sysEvent, function(data) {
@@ -1982,6 +2028,7 @@ export function devControllerPage(gameId) {
           roomCode: roomCode,
           players: players,
           myIndex: playerIndex,
+          protocolVersion: 1,
         },
       }, '*');
     }
@@ -1997,6 +2044,16 @@ export function devControllerPage(gameId) {
         return;
       }
 
+      // Relay custom state events to server
+      if (event === 'smore:set-custom-state') {
+        socket.emit('smore:set-custom-state', data || {});
+        return;
+      }
+      if (event === 'smore:get-custom-states') {
+        socket.emit('smore:get-custom-states');
+        return;
+      }
+
       // Block smore:* events
       if (event.startsWith('smore:')) return;