@littlepartytime/dev-kit 1.8.0 → 1.10.0

package/dist/webapp/components/PhoneFrame.tsx

@@ -41,7 +41,7 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
     <div
       ref={containerRef}
       className="flex items-center justify-center h-full overflow-hidden"
-      style={{ minWidth: 0, minHeight: 0 }}
+      style={{ flex: 1, minWidth: 0, minHeight: 0 }}
     >
       {/* Wrapper sized to the scaled phone for correct layout flow */}
       <div style={{ width: BODY_W * scale, height: BODY_H * scale, flexShrink: 0 }}>

package/dist/webapp/pages/Preview.tsx

@@ -160,10 +160,28 @@ export default function Preview() {
     }
   }, [playerCount, playerIndex]);
 
+  // Resizable split panel
+  const [splitRatio, setSplitRatio] = useState(0.6); // left column gets 60%
+  const panelRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+
+  useEffect(() => {
+    const onMove = (e: MouseEvent) => {
+      if (!dragging.current || !panelRef.current) return;
+      const rect = panelRef.current.getBoundingClientRect();
+      const ratio = (e.clientX - rect.left) / rect.width;
+      setSplitRatio(Math.min(0.8, Math.max(0.2, ratio)));
+    };
+    const onUp = () => { dragging.current = false; document.body.style.cursor = ''; document.body.style.userSelect = ''; };
+    window.addEventListener('mousemove', onMove);
+    window.addEventListener('mouseup', onUp);
+    return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp); };
+  }, []);
+
   return (
     <div className="flex gap-4 h-[calc(100vh-80px)]">
-      {/* Renderer — constrain to phone width so it doesn't hog space */}
-      <div className="shrink-0 h-full">
+      {/* Renderer — half the screen width */}
+      <div className="h-full" style={{ width: '50%' }}>
         <PhoneFrame>
           {GameRenderer && platform && viewState ? (
             <GameRenderer platform={platform} state={viewState} />
@@ -175,10 +193,10 @@ export default function Preview() {
         </PhoneFrame>
       </div>
 
-      {/* Control Panel — fills remaining width, two-column grid */}
-      <div className="flex-1 min-w-0 grid grid-cols-2 gap-4 overflow-auto">
+      {/* Control Panel — fills remaining width, resizable two-column */}
+      <div ref={panelRef} className="flex-1 min-w-0 flex h-full">
         {/* Left column: Players & Controls */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 overflow-auto pr-1" style={{ width: `${splitRatio * 100}%` }}>
           {/* Player Count */}
           <div className="bg-zinc-900 rounded-lg p-3">
             <h3 className="text-sm font-bold text-zinc-400 mb-2">Player Count</h3>
@@ -200,9 +218,25 @@ export default function Preview() {
                 const isActive = i === playerIndex;
                 const hue = (i * 137) % 360; // deterministic color per player
                 const playerState = fullState?.players?.find((ps: any) => ps.id === p.id);
-                const extraEntries = playerState
-                  ? Object.entries(playerState).filter(([k]) => k !== 'id')
-                  : [];
+                // Fallback chain: 1) PlayerState field  2) GameState.data mapping table
+                const ROLE_KEYS = ['role', 'character', 'team', 'class', 'job', 'faction', 'type'];
+                const DATA_MAP_KEYS = ['playerRoles', 'roles', 'playerCharacters', 'characters', 'playerTeams', 'teams'];
+                let roleLabel: string | undefined;
+                // Try PlayerState direct field
+                if (playerState) {
+                  const entry = Object.entries(playerState).find(([k]) => ROLE_KEYS.includes(k.toLowerCase()));
+                  if (entry) roleLabel = String(entry[1]);
+                }
+                // Try GameState.data lookup table
+                if (!roleLabel && fullState?.data) {
+                  for (const mapKey of DATA_MAP_KEYS) {
+                    const map = fullState.data[mapKey];
+                    if (map && typeof map === 'object' && !Array.isArray(map)) {
+                      const val = (map as Record<string, unknown>)[p.id];
+                      if (val != null) { roleLabel = String(val); break; }
+                    }
+                  }
+                }
                 return (
                   <button
                     key={p.id}
@@ -227,9 +261,9 @@ export default function Preview() {
                           <span className="text-[10px] text-amber-400 shrink-0">HOST</span>
                         )}
                       </div>
-                      {extraEntries.length > 0 && (
+                      {roleLabel && (
                         <div className="text-[10px] text-zinc-500 truncate">
-                          {extraEntries.map(([k, v]) => `${k}: ${typeof v === 'object' ? JSON.stringify(v) : String(v)}`).join(' · ')}
+                          {roleLabel}
                         </div>
                       )}
                     </div>
@@ -268,8 +302,16 @@ export default function Preview() {
           )}
         </div>
 
+        {/* Drag handle */}
+        <div
+          className="shrink-0 w-2 cursor-col-resize flex items-center justify-center group"
+          onMouseDown={() => { dragging.current = true; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; }}
+        >
+          <div className="w-0.5 h-8 bg-zinc-700 rounded group-hover:bg-zinc-500 transition-colors" />
+        </div>
+
         {/* Right column: State & Logs */}
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-4 overflow-auto pl-1" style={{ width: `${(1 - splitRatio) * 100}%` }}>
           {/* State Editor */}
           <div className="bg-zinc-900 rounded-lg p-3 flex-1 flex flex-col min-h-0">
             <h3 className="text-sm font-bold text-zinc-400 mb-2">Game State (Full)</h3>

package/package.json

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