@littlepartytime/dev-kit 1.0.0 → 1.2.0

package/dist/webapp/pages/Play.tsx

@@ -0,0 +1,137 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { io, Socket } from 'socket.io-client';
+
+export default function Play() {
+  const [socket, setSocket] = useState<Socket | null>(null);
+  const [nickname, setNickname] = useState('');
+  const [joined, setJoined] = useState(false);
+  const [room, setRoom] = useState<any>({ players: [], phase: 'lobby' });
+  const [gameState, setGameState] = useState<any>(null);
+  const [myId, setMyId] = useState<string | null>(null);
+  const [GameRenderer, setGameRenderer] = useState<React.ComponentType<any> | null>(null);
+
+  // Load renderer
+  useEffect(() => {
+    import('/src/renderer.tsx').then((mod) => {
+      setGameRenderer(() => mod.default || mod.Renderer);
+    }).catch(console.error);
+  }, []);
+
+  const join = useCallback(() => {
+    if (!nickname.trim()) return;
+
+    const sock = io('http://localhost:4001', { query: { nickname } });
+
+    sock.on('connect', () => {
+      setMyId(sock.id);
+      setJoined(true);
+    });
+
+    sock.on('room:update', setRoom);
+    sock.on('game:state', setGameState);
+    sock.on('game:result', (result) => {
+      console.log('Game result:', result);
+    });
+
+    setSocket(sock);
+  }, [nickname]);
+
+  const me = room.players.find((p: any) => socket && p.socketId === socket.id) || room.players.find((p: any) => p.nickname === nickname);
+  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: () => {},
+  } : null;
+
+  if (!joined) {
+    return (
+      <div className="flex items-center justify-center h-[60vh]">
+        <div className="bg-zinc-900 rounded-lg p-6 w-80">
+          <h2 className="text-xl font-bold mb-4">Join Game</h2>
+          <input
+            type="text"
+            placeholder="Your nickname"
+            value={nickname}
+            onChange={(e) => setNickname(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && join()}
+            className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 mb-4"
+          />
+          <button
+            onClick={join}
+            className="w-full bg-amber-600 hover:bg-amber-500 text-white py-2 rounded font-semibold"
+          >
+            Join
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (room.phase === 'lobby' || room.phase === 'ready') {
+    return (
+      <div className="max-w-md mx-auto mt-8">
+        <div className="bg-zinc-900 rounded-lg p-6">
+          <h2 className="text-xl font-bold mb-4">Lobby</h2>
+          <div className="space-y-2 mb-6">
+            {room.players.map((p: any) => (
+              <div key={p.id} className="flex items-center justify-between bg-zinc-800 rounded px-3 py-2">
+                <span>{p.nickname} {p.isHost && '(Host)'}</span>
+                <span className={p.ready ? 'text-green-400' : 'text-zinc-500'}>
+                  {p.ready ? 'Ready' : 'Not Ready'}
+                </span>
+              </div>
+            ))}
+          </div>
+          <div className="flex gap-2">
+            <button
+              onClick={() => socket?.emit('player:ready', !isReady)}
+              className={`flex-1 py-2 rounded font-semibold ${isReady ? 'bg-zinc-700 text-zinc-300' : 'bg-green-600 text-white'}`}
+            >
+              {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="flex-1 bg-amber-600 hover:bg-amber-500 disabled:opacity-50 text-white py-2 rounded font-semibold"
+              >
+                Start Game
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Playing or ended
+  return (
+    <div className="h-[calc(100vh-80px)]">
+      {GameRenderer && platform && gameState ? (
+        <GameRenderer platform={platform} state={gameState} />
+      ) : (
+        <div className="p-4 text-zinc-500">Loading game...</div>
+      )}
+      {room.phase === 'ended' && isHost && (
+        <div className="fixed bottom-4 left-1/2 -translate-x-1/2">
+          <button
+            onClick={() => socket?.emit('game:playAgain')}
+            className="bg-amber-600 hover:bg-amber-500 text-white px-6 py-2 rounded-full font-semibold"
+          >
+            Play Again
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/webapp/pages/Preview.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export default function Preview(): React.JSX.Element;
+//# sourceMappingURL=Preview.d.ts.map

package/dist/webapp/pages/Preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.d.ts","sourceRoot":"","sources":["../../../src/webapp/pages/Preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,OAAO,sBA6G9B"}

package/dist/webapp/pages/Preview.js

@@ -0,0 +1,118 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Preview;
+const react_1 = __importStar(require("react"));
+function Preview() {
+    const [state, setState] = (0, react_1.useState)({ phase: 'playing', players: [], data: {} });
+    const [stateJson, setStateJson] = (0, react_1.useState)('');
+    const [playerIndex, setPlayerIndex] = (0, react_1.useState)(0);
+    const [actions, setActions] = (0, react_1.useState)([]);
+    const [GameRenderer, setGameRenderer] = (0, react_1.useState)(null);
+    // Load renderer dynamically
+    (0, react_1.useEffect)(() => {
+        Promise.resolve().then(() => __importStar(require('/src/renderer.tsx'))).then((mod) => {
+            setGameRenderer(() => mod.default || mod.Renderer);
+        }).catch((err) => {
+            console.error('Failed to load renderer:', err);
+        });
+    }, []);
+    // Mock players
+    const mockPlayers = [
+        { id: 'player-1', nickname: 'Alice', avatarUrl: null, isHost: true },
+        { id: 'player-2', nickname: 'Bob', avatarUrl: null, isHost: false },
+        { id: 'player-3', nickname: 'Carol', avatarUrl: null, isHost: false },
+    ];
+    // Mock platform
+    const platform = {
+        getPlayers: () => mockPlayers,
+        getLocalPlayer: () => mockPlayers[playerIndex],
+        send: (action) => {
+            setActions((prev) => [...prev, { time: new Date().toISOString(), player: mockPlayers[playerIndex].nickname, action }]);
+        },
+        on: () => { },
+        off: () => { },
+        reportResult: () => { },
+    };
+    const updateState = (0, react_1.useCallback)(() => {
+        try {
+            const parsed = JSON.parse(stateJson);
+            setState(parsed);
+        }
+        catch (e) {
+            // ignore
+        }
+    }, [stateJson]);
+    (0, react_1.useEffect)(() => {
+        setStateJson(JSON.stringify(state, null, 2));
+    }, []);
+    return (<div className="flex gap-4 h-[calc(100vh-80px)]">
+      {/* Renderer */}
+      <div className="flex-1 bg-zinc-900 rounded-lg overflow-auto">
+        {GameRenderer ? (<GameRenderer platform={platform} state={state}/>) : (<div className="p-4 text-zinc-500">Loading renderer...</div>)}
+      </div>
+
+      {/* Control Panel */}
+      <div className="w-80 flex flex-col gap-4">
+        {/* 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>
+          <select value={playerIndex} onChange={(e) => setPlayerIndex(Number(e.target.value))} className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1">
+            {mockPlayers.map((p, i) => (<option key={p.id} value={i}>{p.nickname}</option>))}
+          </select>
+        </div>
+
+        {/* State Editor */}
+        <div className="bg-zinc-900 rounded-lg p-3 flex-1 flex flex-col">
+          <h3 className="text-sm font-bold text-zinc-400 mb-2">Game State</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"/>
+          <button onClick={updateState} 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>)}
+        </div>
+      </div>
+    </div>);
+}
+//# sourceMappingURL=Preview.js.map

package/dist/webapp/pages/Preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preview.js","sourceRoot":"","sources":["../../../src/webapp/pages/Preview.tsx"],"names":[],"mappings":"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"}

package/dist/webapp/pages/Preview.tsx

@@ -0,0 +1,265 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+
+const PLAYER_NAMES = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi'];
+
+export default function Preview() {
+  const [playerCount, setPlayerCount] = useState(3);
+  const [playerIndex, setPlayerIndex] = useState(0);
+  const [actions, setActions] = useState<any[]>([]);
+  const [GameRenderer, setGameRenderer] = useState<React.ComponentType<any> | null>(null);
+  const [engine, setEngine] = useState<any>(null);
+  const [fullState, setFullState] = useState<any>(null);
+  const [viewState, setViewState] = useState<any>(null);
+  const [gameOver, setGameOver] = useState(false);
+  const [gameResult, setGameResult] = useState<any>(null);
+  const [stateJson, setStateJson] = useState('');
+
+  // Refs to avoid recreating platform on every state change
+  const fullStateRef = useRef(fullState);
+  fullStateRef.current = fullState;
+  const playerIndexRef = useRef(playerIndex);
+  playerIndexRef.current = playerIndex;
+  const stateUpdateListeners = useRef<Set<(...args: unknown[]) => void>>(new Set());
+
+  // Generate mock players
+  const mockPlayers = useMemo(() => {
+    return Array.from({ length: playerCount }, (_, i) => ({
+      id: `player-${i + 1}`,
+      nickname: PLAYER_NAMES[i] || `Player ${i + 1}`,
+      avatarUrl: null,
+      isHost: i === 0,
+    }));
+  }, [playerCount]);
+
+  const mockPlayersRef = useRef(mockPlayers);
+  mockPlayersRef.current = mockPlayers;
+
+  // Load renderer and engine dynamically
+  useEffect(() => {
+    import('/src/index.ts').then((mod) => {
+      setGameRenderer(() => mod.Renderer || mod.default);
+      if (mod.engine) {
+        setEngine(mod.engine);
+      }
+    }).catch((err) => {
+      console.error('Failed to load game module:', err);
+      // Fallback: try loading renderer directly
+      import('/src/renderer.tsx').then((mod) => {
+        setGameRenderer(() => mod.default || mod.Renderer);
+      }).catch((err2) => {
+        console.error('Failed to load renderer:', err2);
+      });
+    });
+  }, []);
+
+  // Initialize game when engine loads or player count changes
+  useEffect(() => {
+    if (!engine) return;
+    const initialState = engine.init(mockPlayers);
+    setFullState(initialState);
+    setGameOver(false);
+    setGameResult(null);
+    setActions([]);
+  }, [engine, mockPlayers]);
+
+  // Compute view state whenever fullState or playerIndex changes
+  useEffect(() => {
+    if (!engine || !fullState) return;
+    const view = engine.getPlayerView(fullState, mockPlayers[playerIndex].id);
+    setViewState(view);
+    // Notify renderer of new view
+    stateUpdateListeners.current.forEach(handler => handler(view));
+  }, [fullState, playerIndex, engine, mockPlayers]);
+
+  // Sync state JSON editor
+  useEffect(() => {
+    if (fullState) {
+      setStateJson(JSON.stringify(fullState, null, 2));
+    }
+  }, [fullState]);
+
+  // Platform object — stable reference via useMemo on engine + mockPlayers
+  const platform = useMemo(() => {
+    if (!engine) return null;
+    return {
+      getPlayers: () => mockPlayersRef.current,
+      getLocalPlayer: () => mockPlayersRef.current[playerIndexRef.current],
+      send: (action: any) => {
+        const currentState = fullStateRef.current;
+        if (!currentState) return;
+
+        const playerId = mockPlayersRef.current[playerIndexRef.current].id;
+
+        // Log the action
+        setActions(prev => [...prev, {
+          time: new Date().toISOString(),
+          player: mockPlayersRef.current[playerIndexRef.current].nickname,
+          action,
+        }]);
+
+        // Run through engine
+        const newState = engine.handleAction(currentState, playerId, action);
+        setFullState(newState);
+
+        // Check game over
+        if (engine.isGameOver(newState)) {
+          setGameOver(true);
+          setGameResult(engine.getResult(newState));
+        }
+      },
+      on: (event: string, handler: (...args: unknown[]) => void) => {
+        if (event === 'stateUpdate') {
+          stateUpdateListeners.current.add(handler);
+        }
+      },
+      off: (event: string, handler: (...args: unknown[]) => void) => {
+        if (event === 'stateUpdate') {
+          stateUpdateListeners.current.delete(handler);
+        }
+      },
+      reportResult: (result: any) => {
+        console.log('Game result reported:', result);
+      },
+    };
+  }, [engine]);
+
+  // Apply manual state override from JSON editor
+  const applyState = useCallback(() => {
+    try {
+      const parsed = JSON.parse(stateJson);
+      setFullState(parsed);
+      if (engine) {
+        setGameOver(engine.isGameOver(parsed));
+        if (engine.isGameOver(parsed)) {
+          setGameResult(engine.getResult(parsed));
+        } else {
+          setGameResult(null);
+        }
+      }
+    } catch (e) {
+      // ignore invalid JSON
+    }
+  }, [stateJson, engine]);
+
+  // Reset game
+  const resetGame = useCallback(() => {
+    if (!engine) return;
+    const newState = engine.init(mockPlayersRef.current);
+    setFullState(newState);
+    setGameOver(false);
+    setGameResult(null);
+    setActions([]);
+  }, [engine]);
+
+  // Clamp playerIndex when playerCount decreases
+  useEffect(() => {
+    if (playerIndex >= playerCount) {
+      setPlayerIndex(0);
+    }
+  }, [playerCount, playerIndex]);
+
+  return (
+    <div className="flex gap-4 h-[calc(100vh-80px)]">
+      {/* Renderer */}
+      <div className="flex-1 bg-zinc-900 rounded-lg overflow-auto">
+        {GameRenderer && platform && viewState ? (
+          <GameRenderer platform={platform} state={viewState} />
+        ) : (
+          <div className="p-4 text-zinc-500">
+            {!engine ? 'Loading engine...' : 'Initializing game...'}
+          </div>
+        )}
+      </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={8}
+            value={playerCount}
+            onChange={(e) => setPlayerCount(Math.max(2, Math.min(8, 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>
+          <select
+            value={playerIndex}
+            onChange={(e) => setPlayerIndex(Number(e.target.value))}
+            className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-sm"
+          >
+            {mockPlayers.map((p, i) => (
+              <option key={p.id} value={i}>{p.nickname}{p.isHost ? ' (Host)' : ''}</option>
+            ))}
+          </select>
+        </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>
+        )}
+
+        {/* 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>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/package.json

@@ -1,14 +1,24 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./testing": {
+      "types": "./dist/testing/index.d.ts",
+      "default": "./dist/testing/index.js"
+    }
+  },
   "bin": {
     "lpt-dev-kit": "./dist/cli.js"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && cp -r src/webapp dist/",
     "dev": "tsc --watch",
     "test": "vitest run",
     "test:watch": "vitest"
@@ -21,12 +31,30 @@
     "url": "https://github.com/chesterli710/littlepartytime-sdk.git",
     "directory": "packages/dev-kit"
   },
+  "peerDependencies": {
+    "playwright": ">=1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "playwright": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "archiver": "^7"
+    "@vitejs/plugin-react": "^5",
+    "archiver": "^7",
+    "chokidar": "^4",
+    "express": "^5",
+    "react": "^19",
+    "react-dom": "^19",
+    "socket.io": "^4",
+    "vite": "^7"
   },
   "devDependencies": {
     "@types/archiver": "^6",
+    "@types/express": "^5",
     "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "typescript": "^5",
     "vitest": "^3"
   }