@littlepartytime/dev-kit 1.19.1 → 1.20.0

package/dist/webapp/components/GameSelector.tsx

@@ -0,0 +1,163 @@
+// packages/dev-kit/src/webapp/components/GameSelector.tsx
+import React, { useState, useEffect, useCallback } from 'react';
+
+declare const __SOCKET_PORT__: number;
+
+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>
   );
 }