@littlepartytime/dev-kit 1.19.1 → 1.20.1

package/dist/server/zip-manager.d.ts

@@ -0,0 +1,24 @@
+export interface GameEntry {
+    id: string;
+    name: string;
+    description: string;
+    version: string;
+    minPlayers: number;
+    maxPlayers: number;
+    iconPath: string | null;
+    extractDir: string;
+    enginePath: string;
+    bundlePath: string;
+    assetsDir: string | null;
+}
+export declare class ZipManager {
+    private games;
+    loadZip(zipPath: string): Promise<GameEntry>;
+    loadFromUpload(buffer: Buffer, filename: string): Promise<GameEntry>;
+    private registerFromDir;
+    getGame(id: string): GameEntry | undefined;
+    listGames(): GameEntry[];
+    removeGame(id: string): void;
+    cleanup(): void;
+}
+//# sourceMappingURL=zip-manager.d.ts.map

package/dist/server/zip-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zip-manager.d.ts","sourceRoot":"","sources":["../../src/server/zip-manager.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B;AAED,qBAAa,UAAU;IACrB,OAAO,CAAC,KAAK,CAAqC;IAE5C,OAAO,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC;IAW5C,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC;IAU1E,OAAO,CAAC,eAAe;IAkDvB,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS;IAI1C,SAAS,IAAI,SAAS,EAAE;IAIxB,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAQ5B,OAAO,IAAI,IAAI;CAMhB"}

package/dist/server/zip-manager.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZipManager = void 0;
+// packages/dev-kit/src/server/zip-manager.ts
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const os_1 = __importDefault(require("os"));
+const child_process_1 = require("child_process");
+class ZipManager {
+    games = new Map();
+    async loadZip(zipPath) {
+        const extractDir = fs_1.default.mkdtempSync(path_1.default.join(os_1.default.tmpdir(), 'lpt-game-'));
+        try {
+            (0, child_process_1.execSync)(`unzip -o -q "${zipPath}" -d "${extractDir}"`);
+        }
+        catch {
+            fs_1.default.rmSync(extractDir, { recursive: true, force: true });
+            throw new Error(`Failed to extract ZIP: ${zipPath}`);
+        }
+        return this.registerFromDir(extractDir);
+    }
+    async loadFromUpload(buffer, filename) {
+        const tmpZip = path_1.default.join(os_1.default.tmpdir(), `lpt-upload-${Date.now()}-${filename}`);
+        fs_1.default.writeFileSync(tmpZip, buffer);
+        try {
+            return await this.loadZip(tmpZip);
+        }
+        finally {
+            fs_1.default.rmSync(tmpZip, { force: true });
+        }
+    }
+    registerFromDir(extractDir) {
+        const manifestPath = path_1.default.join(extractDir, 'manifest.json');
+        const enginePath = path_1.default.join(extractDir, 'engine.cjs');
+        const bundlePath = path_1.default.join(extractDir, 'bundle.js');
+        if (!fs_1.default.existsSync(manifestPath)) {
+            fs_1.default.rmSync(extractDir, { recursive: true, force: true });
+            throw new Error('Invalid game ZIP: missing manifest.json');
+        }
+        if (!fs_1.default.existsSync(enginePath)) {
+            fs_1.default.rmSync(extractDir, { recursive: true, force: true });
+            throw new Error('Invalid game ZIP: missing engine.cjs');
+        }
+        if (!fs_1.default.existsSync(bundlePath)) {
+            fs_1.default.rmSync(extractDir, { recursive: true, force: true });
+            throw new Error('Invalid game ZIP: missing bundle.js');
+        }
+        const manifest = JSON.parse(fs_1.default.readFileSync(manifestPath, 'utf-8'));
+        let iconPath = null;
+        const iconName = manifest.assets?.icon;
+        if (iconName) {
+            const candidate = path_1.default.join(extractDir, iconName);
+            if (fs_1.default.existsSync(candidate))
+                iconPath = candidate;
+        }
+        const assetsDir = path_1.default.join(extractDir, 'assets');
+        const hasAssetsDir = fs_1.default.existsSync(assetsDir) && fs_1.default.statSync(assetsDir).isDirectory();
+        const id = `game-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+        const entry = {
+            id,
+            name: manifest.name || 'Unknown Game',
+            description: manifest.description || '',
+            version: manifest.version || '0.0.0',
+            minPlayers: manifest.minPlayers ?? 2,
+            maxPlayers: manifest.maxPlayers ?? 8,
+            iconPath,
+            extractDir,
+            enginePath,
+            bundlePath,
+            assetsDir: hasAssetsDir ? assetsDir : null,
+        };
+        this.games.set(id, entry);
+        return entry;
+    }
+    getGame(id) {
+        return this.games.get(id);
+    }
+    listGames() {
+        return Array.from(this.games.values());
+    }
+    removeGame(id) {
+        const entry = this.games.get(id);
+        if (entry) {
+            fs_1.default.rmSync(entry.extractDir, { recursive: true, force: true });
+            this.games.delete(id);
+        }
+    }
+    cleanup() {
+        for (const entry of this.games.values()) {
+            fs_1.default.rmSync(entry.extractDir, { recursive: true, force: true });
+        }
+        this.games.clear();
+    }
+}
+exports.ZipManager = ZipManager;
+//# sourceMappingURL=zip-manager.js.map

package/dist/server/zip-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zip-manager.js","sourceRoot":"","sources":["../../src/server/zip-manager.ts"],"names":[],"mappings":"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"}

package/dist/webapp/App.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Preview from './pages/Preview';
+
+declare const __SOCKET_PORT__: number;
 import Play from './pages/Play';
 import Debug from './pages/Debug';
 import { captureScreen } from './utils/captureScreen';
@@ -57,7 +59,7 @@ export default function App() {
         ))}
         <div style={{ flex: 1 }} />
         <button
-          onClick={() => fetch('http://localhost:4001/api/reset', { method: 'POST' })}
+          onClick={() => fetch(`http://${window.location.hostname}:${__SOCKET_PORT__}/api/reset`, { method: 'POST' })}
           className="dk-nav-btn"
           style={{
             padding: '4px 12px',

package/dist/webapp/components/GameSelector.tsx

@@ -0,0 +1,161 @@
+// packages/dev-kit/src/webapp/components/GameSelector.tsx
+import React, { useState, useEffect, useCallback } from 'react';
+
+interface GameInfo {
+  id: string;
+  name: string;
+  description: string;
+  version: string;
+  minPlayers: number;
+  maxPlayers: number;
+  active: boolean;
+}
+
+interface GameSelectorProps {
+  onGameActivated?: () => void;
+}
+
+export default function GameSelector({ onGameActivated }: GameSelectorProps) {
+  const [games, setGames] = useState<GameInfo[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const apiBase = `http://${window.location.hostname}:${window.location.port}`;
+
+  const fetchGames = useCallback(async () => {
+    try {
+      const res = await fetch(`${apiBase}/api/games`);
+      const data = await res.json();
+      setGames(data.games);
+    } catch {
+      // ignore fetch errors
+    }
+  }, [apiBase]);
+
+  useEffect(() => {
+    fetchGames();
+    const interval = setInterval(fetchGames, 3000);
+    return () => clearInterval(interval);
+  }, [fetchGames]);
+
+  const handleUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setUploading(true);
+    setError(null);
+
+    try {
+      const buffer = await file.arrayBuffer();
+      const res = await fetch(`${apiBase}/api/games/upload`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/octet-stream' },
+        body: buffer,
+      });
+
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Upload failed');
+      }
+
+      await fetchGames();
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setUploading(false);
+      // Reset input
+      e.target.value = '';
+    }
+  }, [apiBase, fetchGames]);
+
+  const activate = useCallback(async (id: string) => {
+    try {
+      await fetch(`${apiBase}/api/games/${id}/activate`, { method: 'POST' });
+      await fetchGames();
+      onGameActivated?.();
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }, [apiBase, fetchGames, onGameActivated]);
+
+  const remove = useCallback(async (id: string) => {
+    try {
+      await fetch(`${apiBase}/api/games/${id}`, { method: 'DELETE' });
+      await fetchGames();
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  }, [apiBase, fetchGames]);
+
+  if (games.length === 0 && !uploading) {
+    return (
+      <div style={{ background: '#18181b', borderRadius: 8, padding: 12, marginBottom: 16, display: 'flex', alignItems: 'center', gap: 12 }}>
+        <span style={{ color: '#71717a', fontSize: 13 }}>No games loaded.</span>
+        <label style={{ background: '#d97706', color: '#fff', padding: '4px 12px', borderRadius: 4, fontSize: 13, cursor: 'pointer', fontWeight: 600 }}>
+          Upload ZIP
+          <input type="file" accept=".zip" onChange={handleUpload} style={{ display: 'none' }} />
+        </label>
+        {error && <span style={{ color: '#ef4444', fontSize: 12 }}>{error}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ background: '#18181b', borderRadius: 8, padding: 12, marginBottom: 16 }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+        {games.map((game) => (
+          <div
+            key={game.id}
+            onClick={() => !game.active && activate(game.id)}
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 8,
+              padding: '6px 12px',
+              borderRadius: 6,
+              cursor: game.active ? 'default' : 'pointer',
+              border: game.active ? '2px solid #d97706' : '1px solid #3f3f46',
+              background: game.active ? 'rgba(217, 119, 6, 0.15)' : '#27272a',
+              fontSize: 13,
+            }}
+          >
+            <img
+              src={`/api/games/${game.id}/icon`}
+              alt=""
+              style={{ width: 24, height: 24, borderRadius: 4 }}
+              onError={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+            />
+            <div>
+              <div style={{ color: '#e5e5e5', fontWeight: 600 }}>{game.name}</div>
+              <div style={{ color: '#71717a', fontSize: 10 }}>v{game.version} · {game.minPlayers}-{game.maxPlayers}p</div>
+            </div>
+            {!game.active && (
+              <button
+                onClick={(e) => { e.stopPropagation(); remove(game.id); }}
+                style={{ background: 'none', border: 'none', color: '#71717a', cursor: 'pointer', fontSize: 14, padding: '0 2px' }}
+                title="Remove"
+              >
+                ×
+              </button>
+            )}
+          </div>
+        ))}
+
+        <label style={{
+          background: '#3f3f46',
+          color: '#d4d4d8',
+          padding: '6px 12px',
+          borderRadius: 6,
+          fontSize: 13,
+          cursor: uploading ? 'default' : 'pointer',
+          fontWeight: 600,
+          opacity: uploading ? 0.5 : 1,
+        }}>
+          {uploading ? 'Uploading...' : '+ Upload'}
+          <input type="file" accept=".zip" onChange={handleUpload} disabled={uploading} style={{ display: 'none' }} />
+        </label>
+      </div>
+      {error && <div style={{ color: '#ef4444', fontSize: 12, marginTop: 8 }}>{error}</div>}
+    </div>
+  );
+}

package/dist/webapp/pages/Debug.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { io, Socket } from 'socket.io-client';
 
+declare const __SOCKET_PORT__: number;
+
 export default function Debug() {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [room, setRoom] = useState<any>({ players: [], phase: 'lobby' });
   const [fullState, setFullState] = useState<any>(null);
 
   useEffect(() => {
-    const sock = io('http://localhost:4001', { query: { nickname: '__debug__' } });
+    const sock = io(`http://${window.location.hostname}:${__SOCKET_PORT__}`, { query: { nickname: '__debug__' } });
 
     sock.on('room:update', setRoom);
     sock.on('game:state', setFullState);

package/dist/webapp/pages/Play.tsx

@@ -2,6 +2,10 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
 import { io, Socket } from 'socket.io-client';
 import PhoneFrame from '../components/PhoneFrame';
 import PlatformTakeover from '../components/PlatformTakeover';
+import GameSelector from '../components/GameSelector';
+
+declare const __SOCKET_PORT__: number;
+declare const __DEV_KIT_MODE__: string;
 
 const card: React.CSSProperties = { background: '#18181b', borderRadius: 8, padding: 24 };
 const inputStyle: React.CSSProperties = { width: '100%', background: '#27272a', border: '1px solid #3f3f46', borderRadius: 4, padding: '8px 12px', marginBottom: 16, color: '#e5e5e5', fontSize: 14 };
@@ -16,19 +20,42 @@ export default function Play() {
   const [myId, setMyId] = useState<string | null>(null);
   const [GameRenderer, setGameRenderer] = useState<React.ComponentType<any> | null>(null);
   const [gameResult, setGameResult] = useState<any>(null);
+  const [activeGameId, setActiveGameId] = useState<string | null>(null);
 
   const isAutoMode = useMemo(() => new URLSearchParams(window.location.search).get('auto') === 'true', []);
   const [myPlayerId, setMyPlayerId] = useState<string | null>(null);
   // Ref survives React Fast Refresh (HMR) but not new tabs — perfect for reconnect identity
   const assignedNicknameRef = useRef<string | null>(null);
 
-  // Load renderer
+  // Fetch active game ID on mount (play mode only)
   useEffect(() => {
-    import('/src/renderer.tsx').then((mod) => {
-      setGameRenderer(() => mod.default || mod.Renderer);
-    }).catch(console.error);
+    if (__DEV_KIT_MODE__ !== 'play') return;
+    const fetchActive = async () => {
+      try {
+        const res = await fetch(`http://${window.location.hostname}:${window.location.port}/api/games`);
+        const data = await res.json();
+        if (data.activeGameId) setActiveGameId(data.activeGameId);
+      } catch { /* ignore */ }
+    };
+    fetchActive();
   }, []);
 
+  // Load renderer
+  useEffect(() => {
+    if (__DEV_KIT_MODE__ === 'play') {
+      if (!activeGameId) return;
+      import(/* @vite-ignore */ `virtual:active-game?id=${activeGameId}&t=${Date.now()}`)
+        .then((mod) => {
+          setGameRenderer(() => mod.Renderer || mod.default);
+        })
+        .catch(console.error);
+    } else {
+      import('/src/renderer.tsx').then((mod) => {
+        setGameRenderer(() => mod.default || mod.Renderer);
+      }).catch(console.error);
+    }
+  }, [activeGameId]);
+
   // Auto-join: connect immediately with server-assigned name
   // assignedNicknameRef persists across HMR (React Refresh keeps refs) but resets per new tab
   useEffect(() => {
@@ -38,7 +65,7 @@ export default function Play() {
       ? { nickname: assignedNicknameRef.current }
       : { auto: 'true' };
 
-    const sock = io('http://localhost:4001', { query });
+    const sock = io(`http://${window.location.hostname}:${__SOCKET_PORT__}`, { query });
 
     sock.on('connect', () => {
       setMyId(sock.id);
@@ -72,7 +99,7 @@ export default function Play() {
   const join = useCallback(() => {
     if (!nickname.trim()) return;
 
-    const sock = io('http://localhost:4001', { query: { nickname } });
+    const sock = io(`http://${window.location.hostname}:${__SOCKET_PORT__}`, { query: { nickname } });
 
     sock.on('connect', () => {
       setMyId(sock.id);
@@ -100,6 +127,16 @@ export default function Play() {
     setSocket(sock);
   }, [nickname]);
 
+  const handleGameActivated = useCallback(async () => {
+    setGameRenderer(null);
+    setGameState(null);
+    try {
+      const res = await fetch(`http://${window.location.hostname}:${window.location.port}/api/games`);
+      const data = await res.json();
+      if (data.activeGameId) setActiveGameId(data.activeGameId);
+    } catch { /* ignore */ }
+  }, []);
+
   const me = room.players.find((p: any) => myPlayerId && p.id === myPlayerId)
            || room.players.find((p: any) => p.nickname === nickname);
   const isHost = me?.isHost;
@@ -133,7 +170,10 @@ export default function Play() {
         if (event === 'stateUpdate') socket.off('game:state', handler as any);
       },
       reportResult: () => {},
-      getAssetUrl: (assetPath: string) => `/assets/${assetPath}`,
+      getAssetUrl: (assetPath: string) =>
+        __DEV_KIT_MODE__ === 'play'
+          ? `/api/games/active/assets/${assetPath}`
+          : `/assets/${assetPath}`,
       getDeviceCapabilities: () => ({ haptics: false, motion: false }),
       haptic: () => {},
       onShake: () => () => {},
@@ -143,25 +183,28 @@ export default function Play() {
 
   if (!joined && !isAutoMode) {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '60vh' }}>
-        <div style={{ ...card, width: 320 }}>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Join Game</h2>
-          <input
-            type="text"
-            placeholder="Your nickname"
-            value={nickname}
-            onChange={(e) => setNickname(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && join()}
-            className="dk-input"
-            style={inputStyle}
-          />
-          <button
-            onClick={join}
-            className="dk-btn-amber"
-            style={btnAmber}
-          >
-            Join
-          </button>
+      <div>
+        {__DEV_KIT_MODE__ === 'play' && <GameSelector />}
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '60vh' }}>
+          <div style={{ ...card, width: 320 }}>
+            <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Join Game</h2>
+            <input
+              type="text"
+              placeholder="Your nickname"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && join()}
+              className="dk-input"
+              style={inputStyle}
+            />
+            <button
+              onClick={join}
+              className="dk-btn-amber"
+              style={btnAmber}
+            >
+              Join
+            </button>
+          </div>
         </div>
       </div>
     );
@@ -169,48 +212,51 @@ export default function Play() {
 
   if (room.phase === 'lobby' || room.phase === 'ready') {
     return (
-      <div style={{ maxWidth: 448, margin: '32px auto 0' }}>
-        <div style={card}>
-          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Lobby</h2>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
-            {room.players.map((p: any) => (
-              <div key={p.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#27272a', borderRadius: 4, padding: '8px 12px' }}>
-                <span>{p.nickname} {p.isHost && '(Host)'}</span>
-                <span style={{ color: p.ready ? '#4ade80' : '#71717a' }}>
-                  {p.ready ? 'Ready' : 'Not Ready'}
-                </span>
-              </div>
-            ))}
-          </div>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <button
-              onClick={() => socket?.emit('player:ready', !isReady)}
-              className={isReady ? 'dk-btn-zinc' : 'dk-btn-green'}
-              style={{
-                flex: 1,
-                padding: '8px 0',
-                borderRadius: 4,
-                fontWeight: 600,
-                border: 'none',
-                cursor: 'pointer',
-                fontSize: 14,
-                ...(isReady
-                  ? { background: '#3f3f46', color: '#d4d4d8' }
-                  : { background: '#16a34a', color: '#fff' }),
-              }}
-            >
-              {isReady ? 'Cancel Ready' : 'Ready'}
-            </button>
-            {isHost && (
+      <div>
+        {__DEV_KIT_MODE__ === 'play' && <GameSelector onGameActivated={handleGameActivated} />}
+        <div style={{ maxWidth: 448, margin: '32px auto 0' }}>
+          <div style={card}>
+            <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Lobby</h2>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
+              {room.players.map((p: any) => (
+                <div key={p.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#27272a', borderRadius: 4, padding: '8px 12px' }}>
+                  <span>{p.nickname} {p.isHost && '(Host)'}</span>
+                  <span style={{ color: p.ready ? '#4ade80' : '#71717a' }}>
+                    {p.ready ? 'Ready' : 'Not Ready'}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div style={{ display: 'flex', gap: 8 }}>
               <button
-                onClick={() => socket?.emit('game:start')}
-                disabled={!room.players.every((p: any) => p.ready) || room.players.length < 2}
-                className="dk-btn-amber"
-                style={{ ...btnAmber, flex: 1, width: 'auto' }}
+                onClick={() => socket?.emit('player:ready', !isReady)}
+                className={isReady ? 'dk-btn-zinc' : 'dk-btn-green'}
+                style={{
+                  flex: 1,
+                  padding: '8px 0',
+                  borderRadius: 4,
+                  fontWeight: 600,
+                  border: 'none',
+                  cursor: 'pointer',
+                  fontSize: 14,
+                  ...(isReady
+                    ? { background: '#3f3f46', color: '#d4d4d8' }
+                    : { background: '#16a34a', color: '#fff' }),
+                }}
               >
-                Start Game
+                {isReady ? 'Cancel Ready' : 'Ready'}
               </button>
-            )}
+              {isHost && (
+                <button
+                  onClick={() => socket?.emit('game:start')}
+                  disabled={!room.players.every((p: any) => p.ready) || room.players.length < 2}
+                  className="dk-btn-amber"
+                  style={{ ...btnAmber, flex: 1, width: 'auto' }}
+                >
+                  Start Game
+                </button>
+              )}
+            </div>
           </div>
         </div>
       </div>
@@ -219,36 +265,39 @@ export default function Play() {
 
   // Playing or ended
   return (
-    <div style={{ height: 'calc(100vh - 80px)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
-      <PhoneFrame>
-        {gameOver ? (
-          <PlatformTakeover
-            result={gameResult}
-            players={room.players.map((p: any) => ({ id: p.id, nickname: p.nickname }))}
-            onReturn={handleReturn}
-          />
-        ) : GameRenderer && platform && gameState ? (
-          <GameRenderer platform={platform} state={gameState} />
-        ) : (
-          <div style={{ padding: 16, color: '#71717a' }}>Loading game...</div>
+    <div>
+      {__DEV_KIT_MODE__ === 'play' && <GameSelector onGameActivated={handleGameActivated} />}
+      <div style={{ height: __DEV_KIT_MODE__ === 'play' ? 'calc(100vh - 140px)' : 'calc(100vh - 80px)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 24 }}>
+        <PhoneFrame>
+          {gameOver ? (
+            <PlatformTakeover
+              result={gameResult}
+              players={room.players.map((p: any) => ({ id: p.id, nickname: p.nickname }))}
+              onReturn={handleReturn}
+            />
+          ) : GameRenderer && platform && gameState ? (
+            <GameRenderer platform={platform} state={gameState} />
+          ) : (
+            <div style={{ padding: 16, color: '#71717a' }}>Loading game...</div>
+          )}
+        </PhoneFrame>
+        {isHost && (
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: 160 }}>
+            <button
+              onClick={() => socket?.emit('game:forceReset')}
+              style={{ width: '100%', background: '#d97706', color: '#fff', border: 'none', padding: '8px 0', borderRadius: 6, fontWeight: 600, cursor: 'pointer', fontSize: 13 }}
+            >
+              Reset Game
+            </button>
+            <button
+              onClick={() => socket?.emit('room:kickAll')}
+              style={{ width: '100%', background: '#dc2626', color: '#fff', border: 'none', padding: '8px 0', borderRadius: 6, fontWeight: 600, cursor: 'pointer', fontSize: 13 }}
+            >
+              Kick All Players
+            </button>
+          </div>
         )}
-      </PhoneFrame>
-      {isHost && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: 160 }}>
-          <button
-            onClick={() => socket?.emit('game:forceReset')}
-            style={{ width: '100%', background: '#d97706', color: '#fff', border: 'none', padding: '8px 0', borderRadius: 6, fontWeight: 600, cursor: 'pointer', fontSize: 13 }}
-          >
-            Reset Game
-          </button>
-          <button
-            onClick={() => socket?.emit('room:kickAll')}
-            style={{ width: '100%', background: '#dc2626', color: '#fff', border: 'none', padding: '8px 0', borderRadius: 6, fontWeight: 600, cursor: 'pointer', fontSize: 13 }}
-          >
-            Kick All Players
-          </button>
-        </div>
-      )}
+      </div>
     </div>
   );
 }