@littlepartytime/dev-kit 1.12.1 → 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

@@ -207,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...'}

package/package.json

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