@littlepartytime/dev-kit 1.7.0 → 1.9.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={{ flex: 1, minWidth: 0, minHeight: 0 }}
+      style={{ 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,126 +160,174 @@ 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 */}
-      <PhoneFrame>
-        {GameRenderer && platform && viewState ? (
-          <GameRenderer platform={platform} state={viewState} />
-        ) : (
-          <div className="p-4 text-zinc-500">
-            {!engine ? 'Loading engine...' : 'Initializing game...'}
-          </div>
-        )}
-      </PhoneFrame>
+      {/* Renderer — fixed width matching the phone body */}
+      <div className="shrink-0 h-full" style={{ width: 420 }}>
+        <PhoneFrame>
+          {GameRenderer && platform && viewState ? (
+            <GameRenderer platform={platform} state={viewState} />
+          ) : (
+            <div className="p-4 text-zinc-500">
+              {!engine ? 'Loading engine...' : 'Initializing game...'}
+            </div>
+          )}
+        </PhoneFrame>
+      </div>
 
-      {/* Control Panel */}
-      <div className="w-80 flex flex-col gap-4 overflow-auto">
-        {/* 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>
-          <input
-            type="number"
-            min={2}
-            max={32}
-            value={playerCount}
-            onChange={(e) => setPlayerCount(Math.max(2, Math.min(32, Number(e.target.value))))}
-            className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-sm"
-          />
-        </div>
+      {/* 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 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>
+            <input
+              type="number"
+              min={2}
+              max={32}
+              value={playerCount}
+              onChange={(e) => setPlayerCount(Math.max(2, Math.min(32, Number(e.target.value))))}
+              className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-sm"
+            />
+          </div>
 
-        {/* Player Switcher */}
-        <div className="bg-zinc-900 rounded-lg p-3">
-          <h3 className="text-sm font-bold text-zinc-400 mb-2">Current Player</h3>
-          <div className="space-y-1">
-            {mockPlayers.map((p, i) => {
-              const isActive = i === playerIndex;
-              const hue = (i * 137) % 360; // deterministic color per player
-              return (
-                <button
-                  key={p.id}
-                  onClick={() => setPlayerIndex(i)}
-                  className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm text-left transition-colors ${
-                    isActive
-                      ? 'bg-amber-600/20 ring-1 ring-amber-500 text-white'
-                      : 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300'
-                  }`}
-                >
-                  {/* Avatar */}
-                  <div
-                    className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
-                    style={{ background: `hsl(${hue}, 55%, 45%)` }}
+          {/* Player Switcher */}
+          <div className="bg-zinc-900 rounded-lg p-3 flex-1 overflow-auto">
+            <h3 className="text-sm font-bold text-zinc-400 mb-2">Current Player</h3>
+            <div className="space-y-1">
+              {mockPlayers.map((p, i) => {
+                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 ROLE_KEYS = ['role', 'character', 'team', 'class', 'job', 'faction', 'type'];
+                const roleEntry = playerState
+                  ? Object.entries(playerState).find(([k]) => ROLE_KEYS.includes(k.toLowerCase()))
+                  : undefined;
+                return (
+                  <button
+                    key={p.id}
+                    onClick={() => setPlayerIndex(i)}
+                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm text-left transition-colors ${
+                      isActive
+                        ? 'bg-amber-600/20 ring-1 ring-amber-500 text-white'
+                        : 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300'
+                    }`}
                   >
-                    {p.nickname[0]}
-                  </div>
-                  <span className="truncate">{p.nickname}</span>
-                  {p.isHost && (
-                    <span className="ml-auto text-[10px] text-amber-400 shrink-0">HOST</span>
-                  )}
-                </button>
-              );
-            })}
+                    {/* Avatar */}
+                    <div
+                      className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
+                      style={{ background: `hsl(${hue}, 55%, 45%)` }}
+                    >
+                      {p.nickname[0]}
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-1">
+                        <span className="truncate">{p.nickname}</span>
+                        {p.isHost && (
+                          <span className="text-[10px] text-amber-400 shrink-0">HOST</span>
+                        )}
+                      </div>
+                      {roleEntry && (
+                        <div className="text-[10px] text-zinc-500 truncate">
+                          {String(roleEntry[1])}
+                        </div>
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
           </div>
+
+          {/* Game Result */}
+          {gameOver && gameResult && (
+            <div className="bg-zinc-900 rounded-lg p-3">
+              <h3 className="text-sm font-bold text-green-400 mb-2">Game Over</h3>
+              <pre className="text-xs font-mono bg-zinc-800 rounded p-2 overflow-auto max-h-32 whitespace-pre-wrap">
+                {JSON.stringify(gameResult, null, 2)}
+              </pre>
+              <button
+                onClick={resetGame}
+                className="mt-2 w-full bg-amber-600 hover:bg-amber-500 text-white px-3 py-1 rounded text-sm"
+              >
+                Reset Game
+              </button>
+            </div>
+          )}
+
+          {/* Reset button (when game is not over) */}
+          {!gameOver && engine && (
+            <div className="bg-zinc-900 rounded-lg p-3">
+              <button
+                onClick={resetGame}
+                className="w-full bg-zinc-700 hover:bg-zinc-600 text-white px-3 py-1 rounded text-sm"
+              >
+                Reset Game
+              </button>
+            </div>
+          )}
         </div>
 
-        {/* Game Result */}
-        {gameOver && gameResult && (
-          <div className="bg-zinc-900 rounded-lg p-3">
-            <h3 className="text-sm font-bold text-green-400 mb-2">Game Over</h3>
-            <pre className="text-xs font-mono bg-zinc-800 rounded p-2 overflow-auto max-h-32 whitespace-pre-wrap">
-              {JSON.stringify(gameResult, null, 2)}
-            </pre>
-            <button
-              onClick={resetGame}
-              className="mt-2 w-full bg-amber-600 hover:bg-amber-500 text-white px-3 py-1 rounded text-sm"
-            >
-              Reset Game
-            </button>
-          </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>
 
-        {/* Reset button (when game is not over) */}
-        {!gameOver && engine && (
-          <div className="bg-zinc-900 rounded-lg p-3">
+        {/* Right column: State & Logs */}
+        <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>
+            <textarea
+              value={stateJson}
+              onChange={(e) => setStateJson(e.target.value)}
+              className="flex-1 bg-zinc-800 border border-zinc-700 rounded p-2 font-mono text-xs resize-none min-h-[120px]"
+            />
             <button
-              onClick={resetGame}
-              className="w-full bg-zinc-700 hover:bg-zinc-600 text-white px-3 py-1 rounded text-sm"
+              onClick={applyState}
+              className="mt-2 bg-amber-600 hover:bg-amber-500 text-white px-3 py-1 rounded text-sm"
             >
-              Reset Game
+              Apply State
             </button>
           </div>
-        )}
-
-        {/* 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>
-          <textarea
-            value={stateJson}
-            onChange={(e) => setStateJson(e.target.value)}
-            className="flex-1 bg-zinc-800 border border-zinc-700 rounded p-2 font-mono text-xs resize-none min-h-[120px]"
-          />
-          <button
-            onClick={applyState}
-            className="mt-2 bg-amber-600 hover:bg-amber-500 text-white px-3 py-1 rounded text-sm"
-          >
-            Apply State
-          </button>
-        </div>
 
-        {/* Action Log */}
-        <div className="bg-zinc-900 rounded-lg p-3 h-48 overflow-auto">
-          <h3 className="text-sm font-bold text-zinc-400 mb-2">Action Log</h3>
-          {actions.length === 0 ? (
-            <p className="text-zinc-500 text-xs">No actions yet</p>
-          ) : (
-            <div className="space-y-1">
-              {actions.map((a, i) => (
-                <div key={i} className="text-xs font-mono bg-zinc-800 rounded p-1">
-                  <span className="text-amber-400">{a.player}</span>: {JSON.stringify(a.action)}
-                </div>
-              ))}
-            </div>
-          )}
+          {/* Action Log */}
+          <div className="bg-zinc-900 rounded-lg p-3 h-48 overflow-auto">
+            <h3 className="text-sm font-bold text-zinc-400 mb-2">Action Log</h3>
+            {actions.length === 0 ? (
+              <p className="text-zinc-500 text-xs">No actions yet</p>
+            ) : (
+              <div className="space-y-1">
+                {actions.map((a, i) => (
+                  <div key={i} className="text-xs font-mono bg-zinc-800 rounded p-1">
+                    <span className="text-amber-400">{a.player}</span>: {JSON.stringify(a.action)}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </div>

package/package.json

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