create-smore-game 2.1.0 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smore-game",
-  "version": "2.1.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.1.0';
+const SDK_VERSION = '^2.2.0';
 
 export function rootPackageJson(name) {
   return JSON.stringify(
@@ -373,6 +373,7 @@ export function App() {
   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;
@@ -412,6 +413,11 @@ 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.
@@ -715,7 +721,7 @@ import { App } from './App';
 createRoot(document.getElementById('root')!).render(<App />);
 `,
     "src/App.tsx": `import { createController } from '@smoregg/sdk';
-import type { Controller } from '@smoregg/sdk';
+import type { Controller, ControllerInfo } from '@smoregg/sdk';
 import { useEffect, useRef, useState } from 'react';
 
 interface GameEvents {
@@ -727,6 +733,7 @@ interface GameEvents {
 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);
 
@@ -745,6 +752,7 @@ export function App() {
     controller.onAllReady(() => {
       if (!mounted) return;
       setMyIndex(controller.myPlayerIndex);
+      setMe(controller.me);
       setIsReady(true);
     });
 
@@ -779,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
@@ -897,7 +905,7 @@ const controller = createController<GameEvents>({ debug: true });
 // To control autoReady: createScreen({ autoReady: false }) or createController({ autoReady: false })
 
 controller.onAllReady(() => {
-  playerInfoEl.textContent = \`Player \${controller.myPlayerIndex}\`;
+  playerInfoEl.textContent = controller.me?.name ?? \`Player \${controller.myPlayerIndex}\`;
 });
 
 controller.on('score-update', (data) => {
@@ -996,6 +1004,7 @@ const room = {
   gameId: '',
   status: 'waiting',
   readyIds: new Set(),
+  customStates: new Map(), // playerIndex -> state object
 };
 
 function toPlayerDTO(p) {
@@ -1142,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 = '';
@@ -1163,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 });
     });
@@ -1537,7 +1561,7 @@ export function devHarness(gameId) {
     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:self-disconnected', 'smore:self-reconnected'
+      'smore:self-disconnected', 'smore:self-reconnected', 'smore:custom-state-changed', 'smore:custom-states'
     ];
     screenSysEvents.forEach(function(sysEvent) {
       screenSocket.on(sysEvent, function(data) {
@@ -1619,7 +1643,7 @@ export function devHarness(gameId) {
       '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:self-disconnected', 'smore:self-reconnected'
+      'smore:self-disconnected', 'smore:self-reconnected', 'smore:custom-state-changed', 'smore:custom-states'
     ];
     ctrlSysEvents.forEach(function(sysEvent) {
       controllerSocket.on(sysEvent, function(data) {
@@ -1735,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;
 
@@ -1948,7 +1982,7 @@ export function devControllerPage(gameId) {
     '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:self-disconnected', 'smore:self-reconnected'
+    'smore:self-disconnected', 'smore:self-reconnected', 'smore:custom-state-changed', 'smore:custom-states'
   ];
   sysEvents.forEach(function(sysEvent) {
     socket.on(sysEvent, function(data) {
@@ -2010,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;