@littlepartytime/dev-kit 1.12.0 → 1.12.2

package/dist/webapp/pages/Play.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { io, Socket } from 'socket.io-client';
 import PhoneFrame from '../components/PhoneFrame';
 
@@ -45,23 +45,35 @@ export default function Play() {
   const isHost = me?.isHost;
   const isReady = me?.ready;
 
-  const platform = socket ? {
-    getPlayers: () => room.players.map((p: any) => ({ id: p.id, nickname: p.nickname, avatarUrl: null, isHost: p.isHost })),
-    getLocalPlayer: () => me ? { id: me.id, nickname: me.nickname, avatarUrl: null, isHost: me.isHost } : { id: '', nickname: '', avatarUrl: null, isHost: false },
-    send: (action: any) => socket.emit('game:action', action),
-    on: (event: string, handler: Function) => {
-      if (event === 'stateUpdate') socket.on('game:state', handler as any);
-    },
-    off: (event: string, handler: Function) => {
-      if (event === 'stateUpdate') socket.off('game:state', handler as any);
-    },
-    reportResult: () => {},
-    getAssetUrl: (assetPath: string) => `/assets/${assetPath}`,
-    getDeviceCapabilities: () => ({ haptics: false, motion: false }),
-    haptic: () => {},
-    onShake: () => () => {},
-    onTilt: () => () => {},
-  } : null;
+  // Use refs to avoid recreating platform on every room/me change
+  const roomRef = useRef(room);
+  roomRef.current = room;
+  const meRef = useRef(me);
+  meRef.current = me;
+
+  const platform = useMemo(() => {
+    if (!socket) return null;
+    return {
+      getPlayers: () => roomRef.current.players.map((p: any) => ({ id: p.id, nickname: p.nickname, avatarUrl: null, isHost: p.isHost })),
+      getLocalPlayer: () => {
+        const m = meRef.current;
+        return m ? { id: m.id, nickname: m.nickname, avatarUrl: null, isHost: m.isHost } : { id: '', nickname: '', avatarUrl: null, isHost: false };
+      },
+      send: (action: any) => socket.emit('game:action', action),
+      on: (event: string, handler: Function) => {
+        if (event === 'stateUpdate') socket.on('game:state', handler as any);
+      },
+      off: (event: string, handler: Function) => {
+        if (event === 'stateUpdate') socket.off('game:state', handler as any);
+      },
+      reportResult: () => {},
+      getAssetUrl: (assetPath: string) => `/assets/${assetPath}`,
+      getDeviceCapabilities: () => ({ haptics: false, motion: false }),
+      haptic: () => {},
+      onShake: () => () => {},
+      onTilt: () => () => {},
+    };
+  }, [socket]);
 
   if (!joined) {
     return (

package/dist/webapp/pages/Preview.tsx

@@ -11,11 +11,12 @@ const btnAmber: React.CSSProperties = { background: '#d97706', color: '#fff', bo
 const btnZinc: React.CSSProperties = { background: '#3f3f46', color: '#fff', border: 'none', padding: '4px 12px', borderRadius: 4, fontSize: 13, cursor: 'pointer', width: '100%' };
 
 export default function Preview() {
-  const [playerCount, setPlayerCount] = useState(3);
+  const [playerCount, setPlayerCount] = useState<number | null>(null);
   const [playerIndex, setPlayerIndex] = useState(0);
   const [actions, setActions] = useState<any[]>([]);
   const [GameRenderer, setGameRenderer] = useState<React.ComponentType<any> | null>(null);
   const [engine, setEngine] = useState<any>(null);
+  const [config, setConfig] = useState<{ minPlayers?: number; maxPlayers?: number } | null>(null);
   const [fullState, setFullState] = useState<any>(null);
   const [viewState, setViewState] = useState<any>(null);
   const [gameOver, setGameOver] = useState(false);
@@ -31,6 +32,7 @@ export default function Preview() {
 
   // Generate mock players
   const mockPlayers = useMemo(() => {
+    if (playerCount === null) return [];
     return Array.from({ length: playerCount }, (_, i) => ({
       id: `player-${i + 1}`,
       nickname: PLAYER_NAMES[i] || `Player ${i + 1}`,
@@ -42,15 +44,25 @@ export default function Preview() {
   const mockPlayersRef = useRef(mockPlayers);
   mockPlayersRef.current = mockPlayers;
 
-  // Load renderer and engine dynamically
+  const minPlayers = config?.minPlayers ?? 2;
+  const maxPlayers = config?.maxPlayers ?? 32;
+
+  // Load renderer, engine, and config dynamically
   useEffect(() => {
     import('/src/index.ts').then((mod) => {
       setGameRenderer(() => mod.Renderer || mod.default);
       if (mod.engine) {
         setEngine(mod.engine);
       }
+      if (mod.config) {
+        setConfig(mod.config);
+        setPlayerCount(mod.config.minPlayers ?? 3);
+      } else {
+        setPlayerCount(3);
+      }
     }).catch((err) => {
       console.error('Failed to load game module:', err);
+      setPlayerCount(3);
       // Fallback: try loading renderer directly
       import('/src/renderer.tsx').then((mod) => {
         setGameRenderer(() => mod.default || mod.Renderer);
@@ -62,7 +74,7 @@ export default function Preview() {
 
   // Initialize game when engine loads or player count changes
   useEffect(() => {
-    if (!engine) return;
+    if (!engine || mockPlayers.length === 0) return;
     const initialState = engine.init(mockPlayers);
     setFullState(initialState);
     setGameOver(false);
@@ -166,7 +178,7 @@ export default function Preview() {
 
   // Clamp playerIndex when playerCount decreases
   useEffect(() => {
-    if (playerIndex >= playerCount) {
+    if (playerCount !== null && playerIndex >= playerCount) {
       setPlayerIndex(0);
     }
   }, [playerCount, playerIndex]);
@@ -195,7 +207,7 @@ export default function Preview() {
       <div style={{ width: '50%', height: '100%' }}>
         <PhoneFrame>
           {GameRenderer && platform && viewState ? (
-            <GameRenderer platform={platform} state={viewState} />
+            <GameRenderer key={mockPlayers[playerIndex].id} platform={platform} state={viewState} />
           ) : (
             <div style={{ padding: 16, color: '#71717a' }}>
               {!engine ? 'Loading engine...' : 'Initializing game...'}
@@ -213,10 +225,10 @@ export default function Preview() {
             <h3 style={label}>Player Count</h3>
             <input
               type="number"
-              min={2}
-              max={32}
-              value={playerCount}
-              onChange={(e) => setPlayerCount(Math.max(2, Math.min(32, Number(e.target.value))))}
+              min={minPlayers}
+              max={maxPlayers}
+              value={playerCount ?? ''}
+              onChange={(e) => setPlayerCount(Math.max(minPlayers, Math.min(maxPlayers, Number(e.target.value))))}
               className="dk-input"
               style={inputBase}
             />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",