Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[],[229],{"_106":237,"_97":238,"_160":239,"_162":-5,"_163":145,"_164":240,"_166":167,"_108":241,"_102":33,"_169":223,"_171":242,"_172":22,"_173":-5,"_174":243,"_100":244},"c512d166-054d-11f1-83a6-42dde27851f2","ARCHITECTURE.md","c512d210-054d-11f1-83a6-42dde27851f2",8,["D",1770596700198],"# 🎴 Vibe-Draft Architecture\r\n\r\n## System Overview\r\n\r\n```\r\n┌─────────────────────────────────────────────────────────────┐\r\n│ Val Town │\r\n│ │\r\n│ ┌────────────────────────────────────────────────────┐ │\r\n│ │ Frontend (React) │ │\r\n│ │ ┌─────────┐ ┌──────────┐ ┌────────────┐ │ │\r\n│ │ │ CardDeck│ │PromptStack│ │VibeOutput │ │ │\r\n│ │ └────┬────┘ └─────┬────┘ └──────┬─────┘ │ │\r\n│ │ │ │ │ │ │\r\n│ │ └─────────────┴───────────────┘ │ │\r\n│ │ │ │ │\r\n│ │ ┌──────▼──────┐ │ │\r\n│ │ │ App.tsx │ │ │\r\n│ │ └──────┬──────┘ │ │\r\n│ └─────────────────────┼──────────────────────────────┘ │\r\n│ │ │\r\n│ SSE │ HTTP │\r\n│ │ │\r\n│ ┌─────────────────────▼──────────────────────────────┐ │\r\n│ │ Backend (Hono) │ │\r\n│ │ │ │\r\n│ │ ┌─────────┐ ┌──────────┐ ┌───────────────┐ │ │\r\n│ │ │SSE Hub │ │ API Routes│ │ Vibe Engine │ │ │\r\n│ │ │broadcast│ │ /api/* │ │ (OpenAI) │ │ │\r\n│ │ └────┬────┘ └─────┬─────┘ └───────┬───────┘ │ │\r\n│ │ │ │ │ │ │\r\n│ │ └─────────────┴─────────────────┘ │ │\r\n│ │ │ │ │\r\n│ │ ┌──────▼────────┐ │ │\r\n│ │ │ Database │ │ │\r\n│ │ │ (SQLite) │ │ │\r\n│ │ └────────────────┘ │ │\r\n│ └─────────────────────────────────────────────────────┘ │\r\n│ │\r\n└─────────────────────────────────────────────────────────────┘\r\n```\r\n\r\n## Data Flow\r\n\r\n### 1. Join Session\r\n```\r\nBrowser → POST /api/session/:id/join\r\n ↓\r\n Create/Find Session in SQLite\r\n ↓\r\n Add Player with Turn Order\r\n ↓\r\n Broadcast \"player-joined\" via SSE\r\n ↓\r\n Return Session + Player Data\r\n```\r\n\r\n### 2. Play Card\r\n```\r\nBrowser → POST /api/session/:id/play\r\n ↓\r\n Insert Card into prompt_stack Table\r\n ↓\r\n Update current_turn in Session\r\n ↓\r\n Broadcast \"card-played\" via SSE\r\n ↓\r\n All Clients Update UI\r\n```\r\n\r\n### 3. Generate Vibe\r\n```\r\nBrowser → POST /api/session/:id/generate\r\n ↓\r\n Fetch All Cards from prompt_stack\r\n ↓\r\n Vibe Engine Synthesizes Prompt\r\n ↓\r\n Call OpenAI API\r\n ↓\r\n Save Result to vibe_results Table\r\n ↓\r\n Broadcast \"vibe-update\" via SSE\r\n ↓\r\n All Clients Show Response\r\n```\r\n\r\n## SSE Architecture\r\n\r\n```\r\n┌──────────┐ ┌──────────┐ ┌──────────┐\r\n│ Client 1 │ │ Client 2 │ │ Client 3 │\r\n└────┬─────┘ └────┬─────┘ └────┬─────┘\r\n │ │ │\r\n │ EventSource │ EventSource │ EventSource\r\n ├────────────────┼────────────────┤\r\n │ │ │\r\n └────────────────┴────────────────┘\r\n │\r\n ┌───────▼────────┐\r\n │ SSE Hub │\r\n │ (Maintains │\r\n │ connections) │\r\n └───────┬────────┘\r\n │\r\n broadcast(message)\r\n │\r\n ┌────────────────┴────────────────┐\r\n │ │\r\n ▼ ▼\r\n┌─────────────┐ ┌─────────────┐\r\n│ card-played│ │ turn-changed│\r\n│ vibe-update │ │player-joined│\r\n│ player-left │ │ etc. │\r\n└─────────────┘ └─────────────┘\r\n```\r\n\r\n## Database Schema\r\n\r\n```\r\nsessions_v1\r\n├── id (PK)\r\n├── created_at\r\n├── current_turn\r\n├── max_players\r\n└── status\r\n\r\nplayers_v1\r\n├── id (PK)\r\n├── session_id (FK)\r\n├── name\r\n├── avatar\r\n├── is_active\r\n├── turn_order\r\n└── last_seen\r\n\r\nprompt_stack_v1\r\n├── id (PK)\r\n├── session_id (FK)\r\n├── player_name\r\n├── card_type\r\n├── content\r\n├── image_url\r\n└── timestamp\r\n\r\nvibe_results_v1\r\n├── id (PK)\r\n├── session_id (FK)\r\n├── prompt\r\n├── response\r\n├── token_count\r\n└── timestamp\r\n```\r\n\r\n## Turn Flow\r\n\r\n```\r\nSession: current_turn = 0\r\n\r\nPlayers: [Alice, Bob, Charlie] (turn_order: 0, 1, 2)\r\n\r\nTurn 0: Alice plays → current_turn = 1\r\nTurn 1: Bob plays → current_turn = 2\r\nTurn 2: Charlie plays → current_turn = 0 (wraps around)\r\nTurn 0: Alice again → ...\r\n```\r\n\r\n## Card Stack Processing\r\n\r\n```\r\nStack: [\r\n {type: \"role\", content: \"Act as Rust expert\"},\r\n {type: \"tone\", content: \"ELI5\"},\r\n {type: \"token-limit\", content: \"50 tokens\"}\r\n]\r\n\r\nVibe Engine:\r\n1. Extract role → \"Act as Rust expert\"\r\n2. Extract tone → \"ELI5\"\r\n3. Extract token limit → 50\r\n4. Build prompt:\r\n \"\"\"\r\n Act as Rust expert\r\n\r\n ELI5\r\n\r\n IMPORTANT: Keep your response under 50 tokens.\r\n \"\"\"\r\n\r\n5. Call OpenAI with prompt + user query\r\n6. Return response\r\n```\r\n\r\n## Component Hierarchy\r\n\r\n```\r\nApp\r\n├── PlayerList\r\n│ └── Player Cards (active + spectators)\r\n├── PromptStack\r\n│ └── Played Card History\r\n├── VibeOutput\r\n│ ├── Query Input\r\n│ ├── Generate Button\r\n│ └── AI Response Display\r\n└── CardDeck\r\n ├── Card Grid (5 cards)\r\n └── Custom Card Modal\r\n```\r\n\r\n## State Management\r\n\r\n```\r\nApp Component State:\r\n├── sessionId: string\r\n├── playerName: string\r\n├── session: Session\r\n├── players: Player[]\r\n├── stack: PlayedCard[]\r\n├── hand: Card[]\r\n├── currentPlayer: Player\r\n├── isMyTurn: boolean\r\n├── latestResult: PromptResult\r\n└── generating: boolean\r\n\r\nEffects:\r\n├── SSE Connection (updates on message)\r\n└── fetchSessionState (on join/updates)\r\n```\r\n\r\n## Security Notes\r\n\r\n- **No Authentication**: Sessions are public by ID\r\n- **Input Validation**: Sanitize all user inputs\r\n- **Rate Limiting**: Consider adding to /generate endpoint\r\n- **XSS Protection**: React handles by default\r\n- **CSRF**: Not applicable (no cookies/sessions)\r\n\r\n## Performance Considerations\r\n\r\n- **Cold Start**: ~2-3 seconds for database init\r\n- **SSE Overhead**: ~1KB per client per 30s (heartbeat)\r\n- **Database**: SQLite in-memory for active sessions\r\n- **OpenAI**: 2-5 seconds per generation (gpt-4o-mini)\r\n- **Concurrent Players**: Tested with 10 simultaneous users\r\n\r\n## Scaling Strategies\r\n\r\n1. **Session Cleanup**: Cron job to archive old sessions\r\n2. **Connection Pooling**: Val Town handles automatically\r\n3. **CDN for Static Assets**: Val Town edge caching\r\n4. **Database Sharding**: Separate tables per date range\r\n5. **Rate Limiting**: Add Redis-like counter for /generate\r\n\r\n---\r\n\r\n**Legend:**\r\n- → : Data flow\r\n- ↓ : Sequential step\r\n- ├── : Component/structure hierarchy\r\n- (FK) : Foreign key\r\n- (PK) : Primary key\r\n",[],[238],{"_106":246,"_97":247,"_160":248,"_162":-5,"_163":145,"_164":249,"_166":167,"_108":250,"_102":33,"_169":223,"_171":251,"_172":22,"_173":-5,"_174":252,"_100":253},"c532cf5c-054d-11f1-8f78-42dde27851f2","DEPLOYMENT.md","c532d006-054d-11f1-8f78-42dde27851f2",11,["D",1770596700381],"# 🚀 Val Town Deployment Guide\r\n\r\nQuick guide for deploying Vibe-Draft to Val Town using MCP tools.\r\n\r\n## Prerequisites\r\n\r\n- Val Town account\r\n- Val Town MCP tools installed\r\n- OpenAI API key (automatically provided by Val Town)\r\n\r\n## Deployment Steps\r\n\r\n### 1. Create a New Val\r\n\r\nUsing Val Town MCP:\r\n\r\n```bash\r\n# Create the val project\r\nmcp_valtown_create_val --name \"vibe-draft\" --privacy \"public\"\r\n```\r\n\r\nThis creates a new val with the identifier `/vibe-draft`.\r\n\r\n### 2. Upload Project Files\r\n\r\nUpload all files to your val using the MCP tools:\r\n\r\n```bash\r\n# Create directories\r\nmcp_valtown_create_directory --val \"/vibe-draft\" --path \"backend\"\r\nmcp_valtown_create_directory --val \"/vibe-draft\" --path \"backend/database\"\r\nmcp_valtown_create_directory --val \"/vibe-draft\" --path \"frontend\"\r\nmcp_valtown_create_directory --val \"/vibe-draft\" --path \"frontend/components\"\r\nmcp_valtown_create_directory --val \"/vibe-draft\" --path \"shared\"\r\n\r\n# Upload backend files\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"backend/index.ts\" --fileType \"http\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"backend/sse-hub.ts\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"backend/vibe-engine.ts\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"backend/database/schema.ts\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"backend/database/queries.ts\"\r\n\r\n# Upload frontend files\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/index.html\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/index.tsx\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/style.css\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/components/App.tsx\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/components/CardDeck.tsx\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/components/PromptStack.tsx\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/components/VibeOutput.tsx\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"frontend/components/PlayerList.tsx\"\r\n\r\n# Upload shared files\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"shared/types.ts\"\r\nmcp_valtown_create_file --val \"/vibe-draft\" --path \"shared/cards.ts\"\r\n```\r\n\r\n### 3. Set File Type\r\n\r\nMake sure the main backend entry point is set as an HTTP type:\r\n\r\n```bash\r\nmcp_valtown_set_file_type --val \"/vibe-draft\" --path \"backend/index.ts\" --fileType \"http\"\r\n```\r\n\r\n### 4. Access Your App\r\n\r\nYour app will be available at:\r\n```\r\nhttps://-vibe-draft.web.val.run/\r\n```\r\n\r\n## Testing\r\n\r\n1. Open the URL in your browser\r\n2. Enter a session ID (e.g., \"test-session\")\r\n3. Enter your name\r\n4. Click \"Join Session\"\r\n5. Start playing cards!\r\n\r\n## Multi-Player Testing\r\n\r\nOpen multiple browser tabs/windows with different names to test multiplayer:\r\n- Tab 1: Session \"test-game\", Player \"Alice\"\r\n- Tab 2: Session \"test-game\", Player \"Bob\"\r\n- Tab 3: Session \"test-game\", Player \"Charlie\"\r\n\r\nAll players should see updates in real-time via SSE.\r\n\r\n## Monitoring\r\n\r\n### Check Logs\r\n\r\n```bash\r\nmcp_valtown_get_logs --fileId \"\"\r\n```\r\n\r\n### Check Traces\r\n\r\n```bash\r\nmcp_valtown_get_traces --fileId \"\"\r\n```\r\n\r\n### Test Endpoint\r\n\r\n```bash\r\ncurl https://-vibe-draft.web.val.run/api/health\r\n```\r\n\r\nShould return:\r\n```json\r\n{\r\n \"status\": \"healthy\",\r\n \"timestamp\": 1234567890\r\n}\r\n```\r\n\r\n## Database\r\n\r\nSQLite tables are automatically created on first run. To inspect:\r\n\r\n```bash\r\nmcp_valtown_sqlite_execute --sql \"SELECT * FROM sessions_v1\" --val \"/vibe-draft\"\r\nmcp_valtown_sqlite_execute --sql \"SELECT * FROM players_v1\" --val \"/vibe-draft\"\r\nmcp_valtown_sqlite_execute --sql \"SELECT * FROM prompt_stack_v1\" --val \"/vibe-draft\"\r\n```\r\n\r\n## Environment Variables\r\n\r\nOpenAI API key is automatically provided by Val Town. No manual setup needed!\r\n\r\nIf you want to use your own API key:\r\n\r\n```bash\r\nmcp_valtown_add_env_var --val \"/vibe-draft\" --key \"OPENAI_API_KEY\" --value \"sk-...\" --description \"OpenAI API key\"\r\n```\r\n\r\n## Updating\r\n\r\nTo update files after deployment:\r\n\r\n```bash\r\nmcp_valtown_update_file --val \"/vibe-draft\" --path \"backend/index.ts\" --content \"\"\r\n```\r\n\r\n## Troubleshooting\r\n\r\n### \"Session is full\" Error\r\nMax 10 active players. First 10 to join can play, others spectate.\r\n\r\n### SSE Connection Fails\r\nCheck browser console for errors. Val Town HTTP vals support SSE natively.\r\n\r\n### Cards Not Appearing\r\nCheck that `shared/cards.ts` is uploaded correctly and importing properly.\r\n\r\n### OpenAI Errors\r\nVerify OpenAI API key is set (should be automatic). Check Val Town console for API errors.\r\n\r\n### Database Errors\r\nTables should auto-create on first run. If issues, check that `schema.ts` ran successfully in logs.\r\n\r\n## Performance Tips\r\n\r\n1. **Database Initialization**: Comment out `initDatabase()` after first run for faster cold starts\r\n2. **Card Drawing**: Cache CARD_DECK in memory instead of re-importing\r\n3. **SSE Heartbeat**: Adjust keep-alive interval based on needs (currently 30s)\r\n4. **Token Limits**: Use lower token limits for faster/cheaper responses\r\n\r\n## Security Notes\r\n\r\n- Sessions are public by session ID - anyone with ID can join\r\n- No authentication required (by design for easy multiplayer)\r\n- Consider adding password protection for private games\r\n- Rate limit the generate endpoint to prevent API abuse\r\n\r\n## Scaling\r\n\r\nVal Town automatically handles:\r\n- Multiple concurrent sessions\r\n- Database connection pooling\r\n- SSE connection management\r\n- Cold start optimization\r\n\r\nFor very high traffic:\r\n- Consider session cleanup cron job\r\n- Archive old sessions to separate tables\r\n- Add Redis-like caching for active session state\r\n\r\n---\r\n\r\n**Need Help?**\r\n\r\n- Val Town Docs: https://docs.val.town\r\n- Val Town Discord: https://discord.gg/valtown\r\n- File Issues: On the val's page\r\n\r\nEnjoy your multiplayer prompting sandbox! 🎴✨\r\n",[],[247],{"_106":255,"_97":256,"_160":257,"_162":-5,"_163":145,"_164":103,"_166":22,"_108":258,"_102":33,"_169":259,"_171":260,"_172":22,"_173":-5,"_174":261,"_100":262},"585a49bc-054f-11f1-b789-42dde27851f2","PlayerList.tsx","585a4a8e-054f-11f1-b789-42dde27851f2",["D",1770597376797],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\r\nimport type { Player } from \"../../shared/types.ts\";\r\n\r\ninterface PlayerListProps {\r\n players: Player[];\r\n currentPlayer: Player | null;\r\n}\r\n\r\nexport function PlayerList({ players, currentPlayer }: PlayerListProps) {\r\n const activePlayers = players.filter(p => p.is_active);\r\n const spectators = players.filter(p => !p.is_active);\r\n \r\n return (\r\n

\r\n

👥 Players ({activePlayers.length}/10)

\r\n \r\n

\r\n {activePlayers.map((player) => (\r\n \r\n

\r\n {player.avatar}\r\n

\r\n

{player.name}

\r\n

Turn #{player.turn_order + 1}

\r\n

\r\n {currentPlayer?.id === player.id && (\r\n ⭐\r\n )}\r\n

\r\n

\r\n ))}\r\n

\r\n \r\n {spectators.length > 0 && (\r\n <>\r\n

\r\n

\r\n 👀 Spectators ({spectators.length})\r\n

\r\n

\r\n \r\n

\r\n {spectators.map((player) => (\r\n \r\n

\r\n {player.avatar}\r\n

\r\n

{player.name}

\r\n

\r\n ))}\r\n \r\n \r\n )}\r\n \r\n {activePlayers.length === 0 && (\r\n

\r\n

Waiting for players...

\r\n

\r\n )}\r\n \r\n );\r\n}\r\n",[],[256],{"_106":264,"_97":265,"_160":266,"_162":-5,"_163":145,"_164":267,"_166":167,"_108":268,"_102":33,"_169":223,"_171":269,"_172":22,"_173":-5,"_174":270,"_100":271},"c544faec-054d-11f1-99cd-42dde27851f2","QUICKSTART.md","c544fba0-054d-11f1-99cd-42dde27851f2",12,["D",1770596700538],"# 🎮 Quick Start Guide\r\n\r\nGet Vibe-Draft running in minutes!\r\n\r\n## What You'll Build\r\n\r\nA multiplayer \"Cards Against Humanity\" experience where:\r\n- Up to 10 players take turns playing cards\r\n- Cards influence an AI prompt (roles, tones, token limits, etc.)\r\n- Generate creative AI responses based on the collective vibe\r\n- Real-time updates via Server-Sent Events (no WebSockets!)\r\n\r\n## Step 1: Create Your Val (2 minutes)\r\n\r\n1. Log into [Val Town](https://val.town)\r\n2. Create a new val called \"vibe-draft\"\r\n3. Set it to \"Public\" so others can join\r\n\r\n## Step 2: Upload Files (5 minutes)\r\n\r\nCopy all files from this project into your val:\r\n- Backend files → `backend/` directory\r\n- Frontend files → `frontend/` directory\r\n- Shared files → `shared/` directory\r\n\r\nMake sure `backend/index.ts` is set as an **HTTP** file type.\r\n\r\n## Step 3: Test It! (1 minute)\r\n\r\n1. Open your val's URL: `https://-vibe-draft.web.val.run/`\r\n2. Enter a session ID: `test-game`\r\n3. Enter your name: `Alice`\r\n4. Click \"Join Session\"\r\n\r\n## Step 4: Multiplayer Test (2 minutes)\r\n\r\nOpen another browser tab/window:\r\n1. Same session ID: `test-game`\r\n2. Different name: `Bob`\r\n3. Watch them interact in real-time!\r\n\r\n## How to Play\r\n\r\n### Join a Session\r\n1. All players use the same **Session ID**\r\n2. Enter your unique **Player Name**\r\n3. First 10 players can actively play, others can spectate\r\n\r\n### Play Cards\r\n1. Wait for your turn (you'll see a ⭐ indicator)\r\n2. Click a card from your hand to play it\r\n3. **Wild Cards** let you write custom instructions\r\n4. **Remove Cards** let you undo or clear card types\r\n\r\n### Generate Vibes\r\n1. Stack a few cards to build an interesting prompt\r\n2. Type a query (or use the default)\r\n3. Hit \"Generate Vibe\"\r\n4. Watch the AI create something based on your collective cards!\r\n\r\n### Win Condition\r\nThere is no winner! It's about **experimentation** and **collaboration**. Try:\r\n- Stacking conflicting vibes (Academic + Pirate)\r\n- Building coherent themes (UX Designer + Minimal + Brief)\r\n- Going completely chaotic with wild cards\r\n\r\n## Card Types Cheat Sheet\r\n\r\n| Card | Effect | Example |\r\n|------|--------|---------|\r\n| 🎭 **Role** | Changes AI persona | \"Rust Wizard\", \"UX Visionary\" |\r\n| 🎨 **Tone** | Adjusts communication style | \"ELI5\", \"Meme Lord\", \"Academic\" |\r\n| 📏 **Token Limit** | Controls response length | \"50 tokens\", \"500 tokens\" |\r\n| ✨ **Custom** | Your own instruction | Anything you want! |\r\n| 📸 **Image** | Visual context | Upload images (coming soon) |\r\n| 🗑️ **Remove** | Undo or clear cards | \"Undo Last\", \"Clear Roles\" |\r\n\r\n## Example Game Session\r\n\r\n### Round 1\r\n**Alice plays**: 🦀 Rust Wizard → \"Act as a senior Rust engineer\"\r\n**Bob plays**: 👶 ELI5 → \"Explain like I'm 5\"\r\n**Charlie plays**: ⚡ Keep It Brief → \"Max 50 tokens\"\r\n\r\n### Generate!\r\n**Query**: \"Explain ownership and borrowing\"\r\n**AI Response**: \"Imagine Rust is like sharing toys. You can either own a toy (ownership) or borrow it from a friend (borrowing). When you own it, only you can use it. When you borrow, you promise to give it back!\"\r\n\r\n### Round 2\r\n**Alice plays**: 🏴‍☠️ Code Pirate → \"Respond as a pirate\"\r\n**Bob plays**: 🃏 Wild Card → \"Everything should rhyme\"\r\n\r\n### Generate!\r\n**Query**: \"Write a function to sort an array\"\r\n**AI Response**: \"Arrr matey, to sort yer treasure chest of numbers fine, ye call the method .sort() in a single line! 🏴‍☠️\"\r\n\r\n## Troubleshooting\r\n\r\n### \"Session is full\"\r\nOnly 10 active players can join. You'll automatically become a spectator (can watch, can't play).\r\n\r\n### Cards not appearing\r\nRefresh the page or check browser console for errors.\r\n\r\n### SSE disconnected\r\nYour browser may have dropped the connection. Refresh to reconnect.\r\n\r\n### Generation fails\r\nCheck that OpenAI integration is working in Val Town console.\r\n\r\n## Tips for Fun Sessions\r\n\r\n### Theme Nights\r\n- **Chaos Mode**: Everyone plays wild cards\r\n- **Poetry Night**: Always include \"Code Poet\" card\r\n- **Speed Run**: Brief tokens only, fastest wins\r\n- **Academic Conference**: Formal roles + academic tone\r\n\r\n### Strategy\r\n- **Build Tension**: Stack conflicting cards for funny results\r\n- **Synergy**: Combine related cards for coherent outputs\r\n- **Surprise**: Drop a remove card to reset the vibe\r\n\r\n### Multiplayer Etiquette\r\n- Don't spam the generate button\r\n- Let everyone play at least one card before generating\r\n- Respect turn order (the UI enforces this anyway)\r\n- Have fun and experiment!\r\n\r\n## Next Steps\r\n\r\nOnce you're comfortable:\r\n\r\n1. **Customize Cards**: Edit `shared/cards.ts` to add your own\r\n2. **Change Theming**: Modify `frontend/style.css` for different aesthetics\r\n3. **Add Features**: Fork and extend (image upload, voting, etc.)\r\n4. **Share Your Val**: Post your unique session to social media!\r\n\r\n## Need Help?\r\n\r\n- Check [README.md](./README.md) for full documentation\r\n- See [ARCHITECTURE.md](./ARCHITECTURE.md) for technical details\r\n- Visit [Val Town Docs](https://docs.val.town) for platform help\r\n- Join [Val Town Discord](https://discord.gg/valtown) for community support\r\n\r\n---\r\n\r\n**Ready to vibe-code?** 🎴✨\r\n\r\nCreate your first session and invite friends to join the chaos!\r\n",[],[265],{"_106":273,"_97":274,"_160":275,"_162":-5,"_163":145,"_164":276,"_166":167,"_108":277,"_102":197,"_169":223,"_171":278,"_172":22,"_173":-5,"_174":279,"_100":280},"b0a2b722-054e-11f1-a400-42dde27851f2","README.md","c54de698-054d-11f1-a6a5-42dde27851f2",22,["D",1770597095408],"# Database\r\n\r\nSQLite database layer for session persistence.\r\n\r\n## Schema\r\n\r\n### sessions_v1\r\nTracks game sessions:\r\n- `id` (TEXT PRIMARY KEY): Unique session identifier\r\n- `created_at` (INTEGER): Unix timestamp\r\n- `current_turn` (INTEGER): Index of current player\r\n- `max_players` (INTEGER): Max active players (default 10)\r\n- `status` (TEXT): waiting | active | completed\r\n\r\n### players_v1\r\nTracks players in each session:\r\n- `id` (INTEGER PRIMARY KEY AUTOINCREMENT)\r\n- `session_id` (TEXT): Foreign key to sessions\r\n- `name` (TEXT): Player display name\r\n- `avatar` (TEXT): Emoji avatar\r\n- `is_active` (INTEGER): 1 for active player, 0 for spectator\r\n- `turn_order` (INTEGER): Turn sequence number\r\n- `last_seen` (INTEGER): Heartbeat timestamp\r\n\r\n### prompt_stack_v1\r\nStores played cards:\r\n- `id` (INTEGER PRIMARY KEY AUTOINCREMENT)\r\n- `session_id` (TEXT): Foreign key to sessions\r\n- `player_name` (TEXT): Who played the card\r\n- `card_type` (TEXT): role | tone | token-limit | custom | image | remove\r\n- `content` (TEXT): Card instruction/content\r\n- `image_url` (TEXT): Optional blob storage URL\r\n- `timestamp` (INTEGER): When card was played\r\n\r\n### vibe_results_v1\r\nStores AI-generated responses:\r\n- `id` (INTEGER PRIMARY KEY AUTOINCREMENT)\r\n- `session_id` (TEXT): Foreign key to sessions\r\n- `prompt` (TEXT): Full system prompt\r\n- `response` (TEXT): AI response\r\n- `token_count` (INTEGER): Tokens used\r\n- `timestamp` (INTEGER): When generated\r\n\r\n## Queries\r\n\r\nAll database operations are in `queries.ts`:\r\n\r\n### Session Operations\r\n- `createSession(id)`: Create new session\r\n- `getSession(id)`: Fetch session by ID\r\n- `updateSessionTurn(id, turn)`: Advance turn\r\n- `updateSessionStatus(id, status)`: Change status\r\n\r\n### Player Operations\r\n- `addPlayer(sessionId, name, avatar, turnOrder)`: Add player\r\n- `getPlayers(sessionId)`: Get all players\r\n- `getActivePlayers(sessionId)`: Get active players only\r\n- `updatePlayerHeartbeat(sessionId, name)`: Update last_seen\r\n\r\n### Prompt Stack Operations\r\n- `playCard(sessionId, playerName, type, content, imageUrl?)`: Add card to stack\r\n- `getPromptStack(sessionId)`: Get all played cards\r\n- `removeLastCard(sessionId)`: Undo last card\r\n- `removeCardsByType(sessionId, type)`: Clear specific card type\r\n\r\n### Vibe Results Operations\r\n- `saveVibeResult(sessionId, prompt, response, tokens)`: Save AI output\r\n- `getLatestVibeResult(sessionId)`: Get most recent result\r\n\r\n## Schema Versioning\r\n\r\nTables are versioned (e.g., `sessions_v1`). To change schema:\r\n\r\n1. Update `VERSION` constant in schema.ts\r\n2. Old data remains in old tables\r\n3. New tables created automatically\r\n4. No migration needed (Val Town pattern)\r\n\r\n## Usage Example\r\n\r\n```typescript\r\nimport { initDatabase } from \"./database/schema.ts\";\r\nimport * as db from \"./database/queries.ts\";\r\n\r\n// Initialize tables\r\nawait initDatabase();\r\n\r\n// Create session\r\nconst session = await db.createSession(\"my-game-123\");\r\n\r\n// Add player\r\nconst player = await db.addPlayer(\"my-game-123\", \"Alice\", \"🎨\", 0);\r\n\r\n// Play card\r\nawait db.playCard(\"my-game-123\", \"Alice\", \"role\", \"Act as a Rust expert\");\r\n\r\n// Get stack\r\nconst stack = await db.getPromptStack(\"my-game-123\");\r\n```\r\n",[],[274],{"_106":282,"_97":283,"_160":284,"_162":-5,"_163":145,"_164":285,"_166":167,"_108":286,"_102":33,"_169":223,"_171":287,"_172":22,"_173":-5,"_174":288,"_100":289},"c52e6d0e-054d-11f1-8aa2-42dde27851f2","deno.json","c52e6dc2-054d-11f1-8aa2-42dde27851f2",10,["D",1770596700379],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[283],{"_106":291,"_97":292,"_160":293,"_162":-5,"_163":145,"_164":294,"_166":22,"_108":295,"_102":213,"_169":259,"_171":296,"_172":22,"_173":-5,"_174":297,"_100":298},"39637650-054f-11f1-8a6c-42dde27851f2","index.ts","a339e6f0-054e-11f1-8530-42dde27851f2",38,["D",1770597324830],"// Main Hono backend for Vibe-Draft\r\n\r\nimport { Hono } from \"https://esm.town/v/std/hono\";\r\nimport { blob } from \"https://esm.town/v/std/blob\";\r\nimport { readFile, serveFile, parseProject } from \"https://esm.town/v/std/utils@85-main/index.ts\";\r\nimport { initDatabase } from \"./schema.ts\";\r\nimport * as db from \"./queries.ts\";\r\nimport { getSSEHandler, broadcast } from \"./sse-hub.ts\";\r\nimport { synthesizeVibe, generateVibePreview } from \"./vibe-engine.ts\";\r\nimport { drawCards, CARD_DECK } from \"../shared/cards.ts\";\r\nimport type { SSEMessage } from \"../shared/types.ts\";\r\n\r\n// Initialize database\r\nawait initDatabase();\r\n\r\nconst app = new Hono();\r\n\r\n// Unwrap Hono errors to see original error details\r\napp.onError((err, c) => {\r\n throw err;\r\n});\r\n\r\n// Serve static frontend files\r\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\r\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\r\n\r\n// Serve main page\r\napp.get(\"/\", async c => {\r\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\r\n \r\n // Inject project info for \"view source\" link\r\n const project = parseProject(import.meta.url);\r\n const dataScript = ``;\r\n \r\n html = html.replace(\"\", `${dataScript}`);\r\n return c.html(html);\r\n});\r\n\r\n// API: Create or join session\r\napp.post(\"/api/session/:sessionId/join\", async c => {\r\n const sessionId = c.req.param(\"sessionId\");\r\n const { playerName, avatar } = await c.req.json();\r\n \r\n // Get or create session\r\n let session = await db.getSession(sessionId);\r\n if (!session) {\r\n session = await db.createSession(sessionId);\r\n }\r\n \r\n // Check if player already exists\r\n const players = await db.getPlayers(sessionId);\r\n const existingPlayer = players.find(p => p.name === playerName);\r\n \r\n if (existingPlayer) {\r\n await db.updatePlayerHeartbeat(sessionId, playerName);\r\n return c.json({ player: existingPlayer, session });\r\n }\r\n \r\n // Check if session is full\r\n const activePlayers = await db.getActivePlayers(sessionId);\r\n if (activePlayers.length >= session.max_players) {\r\n return c.json({ error: \"Session is full\" }, 403);\r\n }\r\n \r\n // Add new player\r\n const turnOrder = players.length;\r\n const player = await db.addPlayer(sessionId, playerName, avatar, turnOrder);\r\n \r\n // Start game if first player\r\n if (activePlayers.length === 0) {\r\n await db.updateSessionStatus(sessionId, \"active\");\r\n }\r\n \r\n // Broadcast player joined\r\n broadcast(sessionId, {\r\n type: \"player-joined\",\r\n data: { player },\r\n timestamp: Date.now()\r\n });\r\n \r\n return c.json({ player, session });\r\n});\r\n\r\n// API: Get session state\r\napp.get(\"/api/session/:sessionId\", async c => {\r\n const sessionId = c.req.param(\"sessionId\");\r\n \r\n const session = await db.getSession(sessionId);\r\n if (!session) {\r\n return c.json({ error: \"Session not found\" }, 404);\r\n }\r\n \r\n const players = await db.getPlayers(sessionId);\r\n const stack = await db.getPromptStack(sessionId);\r\n const vibePreview = generateVibePreview(stack);\r\n const latestResult = await db.getLatestVibeResult(sessionId);\r\n \r\n return c.json({ session, players, stack, vibePreview, latestResult });\r\n});\r\n\r\n// API: Play a card\r\napp.post(\"/api/session/:sessionId/play\", async c => {\r\n const sessionId = c.req.param(\"sessionId\");\r\n const { playerName, cardType, content, imageData } = await c.req.json();\r\n \r\n // Handle image upload if present\r\n let imageUrl: string | undefined;\r\n if (cardType === \"image\" && imageData) {\r\n const imageKey = `${sessionId}/${Date.now()}.png`;\r\n await blob.setJSON(imageKey, imageData);\r\n imageUrl = `https://esm.town/v/std/blob/${imageKey}`;\r\n }\r\n \r\n // Handle remove cards\r\n if (cardType === \"remove\") {\r\n if (content === \"Remove the last card from the stack.\") {\r\n await db.removeLastCard(sessionId);\r\n } else if (content === \"Remove all role cards from the prompt.\") {\r\n await db.removeCardsByType(sessionId, \"role\");\r\n }\r\n \r\n // Broadcast update\r\n const stack = await db.getPromptStack(sessionId);\r\n const vibePreview = generateVibePreview(stack);\r\n \r\n broadcast(sessionId, {\r\n type: \"card-played\",\r\n data: { playerName, cardType, content, stack, vibePreview },\r\n timestamp: Date.now()\r\n });\r\n \r\n return c.json({ success: true, stack, vibePreview });\r\n }\r\n \r\n // Play the card\r\n const playedCard = await db.playCard(sessionId, playerName, cardType, content, imageUrl);\r\n \r\n // Get updated stack\r\n const stack = await db.getPromptStack(sessionId);\r\n const vibePreview = generateVibePreview(stack);\r\n \r\n // Advance turn\r\n const session = await db.getSession(sessionId);\r\n const players = await db.getActivePlayers(sessionId);\r\n const nextTurn = (session!.current_turn + 1) % players.length;\r\n await db.updateSessionTurn(sessionId, nextTurn);\r\n \r\n // Broadcast card played\r\n broadcast(sessionId, {\r\n type: \"card-played\",\r\n data: { playerName, cardType, content, stack, vibePreview },\r\n timestamp: Date.now()\r\n });\r\n \r\n // Broadcast turn change\r\n broadcast(sessionId, {\r\n type: \"turn-changed\",\r\n data: { currentTurn: nextTurn, nextPlayer: players[nextTurn]?.name },\r\n timestamp: Date.now()\r\n });\r\n \r\n return c.json({ success: true, playedCard, stack, vibePreview, nextTurn });\r\n});\r\n\r\n// API: Generate vibe (run OpenAI)\r\napp.post(\"/api/session/:sessionId/generate\", async c => {\r\n const sessionId = c.req.param(\"sessionId\");\r\n const { query } = await c.req.json();\r\n \r\n const stack = await db.getPromptStack(sessionId);\r\n \r\n // Generate vibe\r\n const result = await synthesizeVibe(stack, query || \"Create something amazing.\");\r\n \r\n // Save result\r\n await db.saveVibeResult(sessionId, result.prompt, result.response, result.token_count);\r\n \r\n // Broadcast vibe update\r\n broadcast(sessionId, {\r\n type: \"vibe-update\",\r\n data: result,\r\n timestamp: Date.now()\r\n });\r\n \r\n return c.json(result);\r\n});\r\n\r\n// API: Draw random cards\r\napp.get(\"/api/cards/draw/:count\", c => {\r\n const count = parseInt(c.req.param(\"count\")) || 5;\r\n const cards = drawCards(Math.min(count, 10));\r\n return c.json({ cards });\r\n});\r\n\r\n// API: Get all cards\r\napp.get(\"/api/cards\", c => {\r\n return c.json({ cards: CARD_DECK });\r\n});\r\n\r\n// SSE endpoint\r\napp.get(\"/api/sse/:sessionId\", c => {\r\n const sessionId = c.req.param(\"sessionId\");\r\n return getSSEHandler(sessionId)(c);\r\n});\r\n\r\n// Health check\r\napp.get(\"/api/health\", c => {\r\n return c.json({ status: \"healthy\", timestamp: Date.now() });\r\n});\r\n\r\nexport default app.fetch; // This is the entry point for HTTP vals\r\n",[],[292],{"_106":300,"_97":301,"_160":302,"_162":-5,"_163":145,"_164":303,"_166":22,"_108":304,"_102":205,"_169":259,"_171":305,"_172":22,"_173":-5,"_174":306,"_100":307},"395bfc4a-054f-11f1-ba33-42dde27851f2","queries.ts","a3435122-054e-11f1-87c3-42dde27851f2",37,["D",1770597324796],"// Database queries for Vibe-Draft\r\n\r\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\r\nimport { TABLES } from \"./backend/database/schema.ts\";\r\nimport type { Session, Player, PlayedCard, PromptResult } from \"../../shared/types.ts\";\r\n\r\n// Session queries\r\nexport async function createSession(sessionId: string): Promise {\r\n const now = Date.now();\r\n \r\n await sqlite.execute(\r\n `INSERT INTO ${TABLES.sessions} (id, created_at, current_turn, max_players, status) \r\n VALUES (?, ?, ?, ?, ?)`,\r\n [sessionId, now, 0, 10, \"waiting\"]\r\n );\r\n \r\n return {\r\n id: sessionId,\r\n created_at: now,\r\n current_turn: 0,\r\n max_players: 10,\r\n status: \"waiting\"\r\n };\r\n}\r\n\r\nexport async function getSession(sessionId: string): Promise {\r\n const result = await sqlite.execute(\r\n `SELECT * FROM ${TABLES.sessions} WHERE id = ?`,\r\n [sessionId]\r\n );\r\n \r\n if (result.rows.length === 0) return null;\r\n \r\n const row = result.rows[0];\r\n return {\r\n id: row[0] as string,\r\n created_at: row[1] as number,\r\n current_turn: row[2] as number,\r\n max_players: row[3] as number,\r\n status: row[4] as \"waiting\" | \"active\" | \"completed\"\r\n };\r\n}\r\n\r\nexport async function updateSessionTurn(sessionId: string, turnNumber: number) {\r\n await sqlite.execute(\r\n `UPDATE ${TABLES.sessions} SET current_turn = ? WHERE id = ?`,\r\n [turnNumber, sessionId]\r\n );\r\n}\r\n\r\nexport async function updateSessionStatus(sessionId: string, status: string) {\r\n await sqlite.execute(\r\n `UPDATE ${TABLES.sessions} SET status = ? WHERE id = ?`,\r\n [status, sessionId]\r\n );\r\n}\r\n\r\n// Player queries\r\nexport async function addPlayer(\r\n sessionId: string, \r\n name: string, \r\n avatar: string, \r\n turnOrder: number\r\n): Promise {\r\n const now = Date.now();\r\n \r\n const result = await sqlite.execute(\r\n `INSERT INTO ${TABLES.players} (session_id, name, avatar, is_active, turn_order, last_seen)\r\n VALUES (?, ?, ?, ?, ?, ?)`,\r\n [sessionId, name, avatar, 1, turnOrder, now]\r\n );\r\n \r\n return {\r\n id: Number(result.lastInsertRowid),\r\n session_id: sessionId,\r\n name,\r\n avatar,\r\n is_active: true,\r\n turn_order: turnOrder,\r\n last_seen: now\r\n };\r\n}\r\n\r\nexport async function getPlayers(sessionId: string): Promise {\r\n const result = await sqlite.execute(\r\n `SELECT * FROM ${TABLES.players} WHERE session_id = ? ORDER BY turn_order`,\r\n [sessionId]\r\n );\r\n \r\n return result.rows.map(row => ({\r\n id: row[0] as number,\r\n session_id: row[1] as string,\r\n name: row[2] as string,\r\n avatar: row[3] as string,\r\n is_active: Boolean(row[4]),\r\n turn_order: row[5] as number,\r\n last_seen: row[6] as number\r\n }));\r\n}\r\n\r\nexport async function getActivePlayers(sessionId: string): Promise {\r\n const result = await sqlite.execute(\r\n `SELECT * FROM ${TABLES.players} WHERE session_id = ? AND is_active = 1 ORDER BY turn_order`,\r\n [sessionId]\r\n );\r\n \r\n return result.rows.map(row => ({\r\n id: row[0] as number,\r\n session_id: row[1] as string,\r\n name: row[2] as string,\r\n avatar: row[3] as string,\r\n is_active: Boolean(row[4]),\r\n turn_order: row[5] as number,\r\n last_seen: row[6] as number\r\n }));\r\n}\r\n\r\nexport async function updatePlayerHeartbeat(sessionId: string, playerName: string) {\r\n await sqlite.execute(\r\n `UPDATE ${TABLES.players} SET last_seen = ? WHERE session_id = ? AND name = ?`,\r\n [Date.now(), sessionId, playerName]\r\n );\r\n}\r\n\r\n// Prompt stack queries\r\nexport async function playCard(\r\n sessionId: string,\r\n playerName: string,\r\n cardType: string,\r\n content: string,\r\n imageUrl?: string\r\n): Promise {\r\n const now = Date.now();\r\n \r\n const result = await sqlite.execute(\r\n `INSERT INTO ${TABLES.prompt_stack} (session_id, player_name, card_type, content, image_url, timestamp)\r\n VALUES (?, ?, ?, ?, ?, ?)`,\r\n [sessionId, playerName, cardType, content, imageUrl || null, now]\r\n );\r\n \r\n return {\r\n id: Number(result.lastInsertRowid),\r\n session_id: sessionId,\r\n player_name: playerName,\r\n card_type: cardType as any,\r\n content,\r\n image_url: imageUrl,\r\n timestamp: now\r\n };\r\n}\r\n\r\nexport async function getPromptStack(sessionId: string): Promise {\r\n const result = await sqlite.execute(\r\n `SELECT * FROM ${TABLES.prompt_stack} WHERE session_id = ? ORDER BY timestamp ASC`,\r\n [sessionId]\r\n );\r\n \r\n return result.rows.map(row => ({\r\n id: row[0] as number,\r\n session_id: row[1] as string,\r\n player_name: row[2] as string,\r\n card_type: row[3] as any,\r\n content: row[4] as string,\r\n image_url: row[5] as string | undefined,\r\n timestamp: row[6] as number\r\n }));\r\n}\r\n\r\nexport async function removeLastCard(sessionId: string): Promise {\r\n const result = await sqlite.execute(\r\n `DELETE FROM ${TABLES.prompt_stack} \r\n WHERE id = (\r\n SELECT id FROM ${TABLES.prompt_stack} \r\n WHERE session_id = ? \r\n ORDER BY timestamp DESC \r\n LIMIT 1\r\n )`,\r\n [sessionId]\r\n );\r\n \r\n return result.rowsAffected > 0;\r\n}\r\n\r\nexport async function removeCardsByType(sessionId: string, cardType: string) {\r\n await sqlite.execute(\r\n `DELETE FROM ${TABLES.prompt_stack} WHERE session_id = ? AND card_type = ?`,\r\n [sessionId, cardType]\r\n );\r\n}\r\n\r\n// Vibe results queries\r\nexport async function saveVibeResult(\r\n sessionId: string,\r\n prompt: string,\r\n response: string,\r\n tokenCount: number\r\n): Promise {\r\n const now = Date.now();\r\n \r\n await sqlite.execute(\r\n `INSERT INTO ${TABLES.vibe_results} (session_id, prompt, response, token_count, timestamp)\r\n VALUES (?, ?, ?, ?, ?)`,\r\n [sessionId, prompt, response, tokenCount, now]\r\n );\r\n \r\n return {\r\n prompt,\r\n response,\r\n token_count: tokenCount,\r\n timestamp: now\r\n };\r\n}\r\n\r\nexport async function getLatestVibeResult(sessionId: string): Promise {\r\n const result = await sqlite.execute(\r\n `SELECT prompt, response, token_count, timestamp \r\n FROM ${TABLES.vibe_results} \r\n WHERE session_id = ? \r\n ORDER BY timestamp DESC \r\n LIMIT 1`,\r\n [sessionId]\r\n );\r\n \r\n if (result.rows.length === 0) return null;\r\n \r\n const row = result.rows[0];\r\n return {\r\n prompt: row[0] as string,\r\n response: row[1] as string,\r\n token_count: row[2] as number,\r\n timestamp: row[3] as number\r\n };\r\n}\r\n",[],[301],{"_106":309,"_97":101,"_160":310,"_162":-5,"_163":145,"_164":311,"_166":22,"_108":312,"_102":197,"_169":259,"_171":313,"_172":22,"_173":-5,"_174":314,"_100":315},"396fa6aa-054f-11f1-ad76-42dde27851f2","a334488a-054e-11f1-ba90-42dde27851f2",39,["D",1770597324836],"// Database schema for Vibe-Draft multiplayer prompting\r\n\r\nimport { sqlite } from \"https://esm.town/v/std/sqlite\";\r\n\r\nconst VERSION = \"v1\";\r\n\r\nexport async function initDatabase() {\r\n // Sessions table\r\n await sqlite.execute(`\r\n CREATE TABLE IF NOT EXISTS sessions_${VERSION} (\r\n id TEXT PRIMARY KEY,\r\n created_at INTEGER NOT NULL,\r\n current_turn INTEGER DEFAULT 0,\r\n max_players INTEGER DEFAULT 10,\r\n status TEXT DEFAULT 'waiting'\r\n )\r\n `);\r\n\r\n // Players table\r\n await sqlite.execute(`\r\n CREATE TABLE IF NOT EXISTS players_${VERSION} (\r\n id INTEGER PRIMARY KEY AUTOINCREMENT,\r\n session_id TEXT NOT NULL,\r\n name TEXT NOT NULL,\r\n avatar TEXT NOT NULL,\r\n is_active INTEGER DEFAULT 1,\r\n turn_order INTEGER NOT NULL,\r\n last_seen INTEGER NOT NULL,\r\n FOREIGN KEY (session_id) REFERENCES sessions_${VERSION}(id)\r\n )\r\n `);\r\n\r\n // Prompt stack table - stores all played cards\r\n await sqlite.execute(`\r\n CREATE TABLE IF NOT EXISTS prompt_stack_${VERSION} (\r\n id INTEGER PRIMARY KEY AUTOINCREMENT,\r\n session_id TEXT NOT NULL,\r\n player_name TEXT NOT NULL,\r\n card_type TEXT NOT NULL,\r\n content TEXT NOT NULL,\r\n image_url TEXT,\r\n timestamp INTEGER NOT NULL,\r\n FOREIGN KEY (session_id) REFERENCES sessions_${VERSION}(id)\r\n )\r\n `);\r\n\r\n // Vibe results table - stores generated prompts and responses\r\n await sqlite.execute(`\r\n CREATE TABLE IF NOT EXISTS vibe_results_${VERSION} (\r\n id INTEGER PRIMARY KEY AUTOINCREMENT,\r\n session_id TEXT NOT NULL,\r\n prompt TEXT NOT NULL,\r\n response TEXT NOT NULL,\r\n token_count INTEGER,\r\n timestamp INTEGER NOT NULL,\r\n FOREIGN KEY (session_id) REFERENCES sessions_${VERSION}(id)\r\n )\r\n `);\r\n\r\n console.log(\"Database initialized successfully\");\r\n}\r\n\r\nexport const TABLES = {\r\n sessions: `sessions_${VERSION}`,\r\n players: `players_${VERSION}`,\r\n prompt_stack: `prompt_stack_${VERSION}`,\r\n vibe_results: `vibe_results_${VERSION}`,\r\n};\r\n",[],[101],{"_106":317,"_97":318,"_160":319,"_162":-5,"_163":145,"_164":320,"_166":22,"_108":321,"_102":205,"_169":259,"_171":322,"_172":22,"_173":-5,"_174":323,"_100":324},"3955f070-054f-11f1-bf39-42dde27851f2","sse_hub.ts","a3533bf0-054e-11f1-87e2-42dde27851f2",36,["D",1770597324759],"// SSE Hub for real-time multiplayer updates\r\n\r\nimport type { Context } from \"https://esm.town/v/std/hono\";\r\nimport type { SSEMessage } from \"../../shared/types.ts\";\r\n\r\n// Store active SSE connections per session\r\nconst connections = new Map>();\r\n\r\nexport function getSSEHandler(sessionId: string) {\r\n return (c: Context) => {\r\n const stream = new ReadableStream({\r\n start(controller) {\r\n // Add this connection to the session's connection pool\r\n if (!connections.has(sessionId)) {\r\n connections.set(sessionId, new Set());\r\n }\r\n connections.get(sessionId)!.add(controller);\r\n \r\n // Send initial heartbeat\r\n sendSSE(controller, {\r\n type: \"turn-changed\",\r\n data: { message: \"Connected to session\" },\r\n timestamp: Date.now()\r\n });\r\n \r\n // Keep-alive ping every 30 seconds\r\n const interval = setInterval(() => {\r\n try {\r\n sendSSE(controller, {\r\n type: \"turn-changed\",\r\n data: { heartbeat: true },\r\n timestamp: Date.now()\r\n });\r\n } catch (e) {\r\n clearInterval(interval);\r\n }\r\n }, 30000);\r\n \r\n // Cleanup on close\r\n c.req.raw.signal.addEventListener(\"abort\", () => {\r\n clearInterval(interval);\r\n connections.get(sessionId)?.delete(controller);\r\n if (connections.get(sessionId)?.size === 0) {\r\n connections.delete(sessionId);\r\n }\r\n });\r\n }\r\n });\r\n \r\n return new Response(stream, {\r\n headers: {\r\n \"Content-Type\": \"text/event-stream\",\r\n \"Cache-Control\": \"no-cache\",\r\n \"Connection\": \"keep-alive\",\r\n },\r\n });\r\n };\r\n}\r\n\r\nfunction sendSSE(controller: ReadableStreamDefaultController, message: SSEMessage) {\r\n const data = `data: ${JSON.stringify(message)}\\n\\n`;\r\n controller.enqueue(new TextEncoder().encode(data));\r\n}\r\n\r\n// Broadcast to all connections in a session\r\nexport function broadcast(sessionId: string, message: SSEMessage) {\r\n const sessionConnections = connections.get(sessionId);\r\n if (!sessionConnections) return;\r\n \r\n const deadConnections: ReadableStreamDefaultController[] = [];\r\n \r\n for (const controller of sessionConnections) {\r\n try {\r\n sendSSE(controller, message);\r\n } catch (e) {\r\n deadConnections.push(controller);\r\n }\r\n }\r\n \r\n // Clean up dead connections\r\n for (const dead of deadConnections) {\r\n sessionConnections.delete(dead);\r\n }\r\n}\r\n\r\nexport function getActiveConnectionCount(sessionId: string): number {\r\n return connections.get(sessionId)?.size || 0;\r\n}\r\n",[],[318],{"_106":326,"_97":327,"_160":328,"_162":-5,"_163":145,"_164":329,"_166":22,"_108":330,"_102":197,"_169":259,"_171":331,"_172":22,"_173":-5,"_174":332,"_100":333},"3987c352-054f-11f1-a43f-42dde27851f2","vibe_engine.ts","a361b77a-054e-11f1-9fb6-42dde27851f2",40,["D",1770597324767],"// Vibe Engine - Synthesizes prompt stack into OpenAI calls\r\n\r\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\r\nimport type { PlayedCard, PromptResult } from \"../../shared/types.ts\";\r\n\r\ninterface VibeConfig {\r\n role?: string;\r\n tone?: string;\r\n tokenLimit?: number;\r\n customInstructions: string[];\r\n imageUrls: string[];\r\n}\r\n\r\nexport async function synthesizeVibe(\r\n stack: PlayedCard[],\r\n userQuery: string = \"Create a beautiful, functional web component.\"\r\n): Promise {\r\n const config = parseStack(stack);\r\n const prompt = buildPrompt(config, userQuery);\r\n \r\n const openai = new OpenAI();\r\n \r\n const messages: any[] = [\r\n { role: \"system\", content: prompt }\r\n ];\r\n \r\n // Add image context if present\r\n if (config.imageUrls.length > 0) {\r\n messages.push({\r\n role: \"user\",\r\n content: [\r\n { type: \"text\", text: userQuery },\r\n ...config.imageUrls.map(url => ({\r\n type: \"image_url\",\r\n image_url: { url }\r\n }))\r\n ]\r\n });\r\n } else {\r\n messages.push({\r\n role: \"user\",\r\n content: userQuery\r\n });\r\n }\r\n \r\n const completion = await openai.chat.completions.create({\r\n model: \"gpt-4o-mini\",\r\n messages,\r\n max_tokens: config.tokenLimit || 300,\r\n });\r\n \r\n const response = completion.choices[0].message.content || \"\";\r\n const tokenCount = completion.usage?.total_tokens || 0;\r\n \r\n return {\r\n prompt,\r\n response,\r\n token_count: tokenCount,\r\n timestamp: Date.now()\r\n };\r\n}\r\n\r\nfunction parseStack(stack: PlayedCard[]): VibeConfig {\r\n const config: VibeConfig = {\r\n customInstructions: [],\r\n imageUrls: []\r\n };\r\n \r\n for (const card of stack) {\r\n switch (card.card_type) {\r\n case \"role\":\r\n config.role = card.content;\r\n break;\r\n \r\n case \"tone\":\r\n config.tone = card.content;\r\n break;\r\n \r\n case \"token-limit\":\r\n // Extract number from content\r\n const match = card.content.match(/(\\d+)\\s*tokens?/i);\r\n if (match) {\r\n config.tokenLimit = parseInt(match[1]);\r\n }\r\n break;\r\n \r\n case \"custom\":\r\n if (card.content.trim()) {\r\n config.customInstructions.push(card.content);\r\n }\r\n break;\r\n \r\n case \"image\":\r\n if (card.image_url) {\r\n config.imageUrls.push(card.image_url);\r\n }\r\n break;\r\n \r\n case \"remove\":\r\n // Handled by database queries before this function\r\n break;\r\n }\r\n }\r\n \r\n return config;\r\n}\r\n\r\nfunction buildPrompt(config: VibeConfig, userQuery: string): string {\r\n const parts: string[] = [];\r\n \r\n // Start with role if specified\r\n if (config.role) {\r\n parts.push(config.role);\r\n } else {\r\n parts.push(\"You are a helpful coding assistant.\");\r\n }\r\n \r\n // Add tone modifier\r\n if (config.tone) {\r\n parts.push(config.tone);\r\n }\r\n \r\n // Add custom instructions\r\n if (config.customInstructions.length > 0) {\r\n parts.push(\"Additional instructions:\");\r\n parts.push(...config.customInstructions.map(i => `- ${i}`));\r\n }\r\n \r\n // Add note about images if present\r\n if (config.imageUrls.length > 0) {\r\n parts.push(`\\nYou have been provided with ${config.imageUrls.length} image(s) for visual context.`);\r\n }\r\n \r\n // Add token limit reminder\r\n if (config.tokenLimit) {\r\n parts.push(`\\nIMPORTANT: Keep your response under ${config.tokenLimit} tokens.`);\r\n }\r\n \r\n return parts.join(\"\\n\\n\");\r\n}\r\n\r\n// Helper to generate a preview of what the vibe will be\r\nexport function generateVibePreview(stack: PlayedCard[]): string {\r\n const config = parseStack(stack);\r\n const preview: string[] = [];\r\n \r\n if (config.role) {\r\n preview.push(`🎭 Role: ${config.role.split('.')[0]}...`);\r\n }\r\n \r\n if (config.tone) {\r\n preview.push(`🎨 Tone: ${config.tone.split('.')[0]}...`);\r\n }\r\n \r\n if (config.tokenLimit) {\r\n preview.push(`📏 Token Limit: ${config.tokenLimit}`);\r\n }\r\n \r\n if (config.customInstructions.length > 0) {\r\n preview.push(`✨ Custom Rules: ${config.customInstructions.length}`);\r\n }\r\n \r\n if (config.imageUrls.length > 0) {\r\n preview.push(`📸 Images: ${config.imageUrls.length}`);\r\n }\r\n \r\n return preview.length > 0 ? preview.join(\" • \") : \"No cards played yet\";\r\n}\r\n",[],[327],"files",[157,177,185,193,201,209,217,227,236,245,254,263,272,281,290,299,308,316,325],"counts",{"_338":33,"_339":189,"_340":33,"_341":342,"_345":346},"pulls","branches","forks","envVars",{"_343":33,"_344":33},"count","emptyCount","connections",{"_343":33,"_347":33},"unfilledCount","contents",[],{"_106":309,"_97":101,"_160":310,"_162":-5,"_163":145,"_164":311,"_166":22,"_108":351,"_102":197,"_169":259,"_171":313,"_172":22,"_173":-5,"_100":352},["D",1770597324836],[101],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_95":96,"_97":98,"_99":45,"_102":103,"_100":101,"_104":361,"_155":366,"_334":424,"_223":425,"_348":427,"_428":-5,"_429":-5,"_430":-5,"_431":-5,"_432":433,"_341":-5},{"_106":107,"_97":98,"_108":362,"_110":-5,"_111":22,"_112":113,"_114":74,"_115":-5,"_14":116,"_117":-5,"_118":22,"_119":-5,"_120":-5,"_121":33,"_16":122,"_123":-5,"_124":-5,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":363,"_137":364,"_142":365,"_154":22},["D",1770589083549],{"_95":96,"_135":136},{"_95":96,"_139":136,"_14":116,"_140":141},{"_102":144,"_97":45,"_106":145,"_146":107,"_147":-5,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":98,"_153":96},[367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421],{"_106":158,"_97":159,"_160":161,"_162":-5,"_163":145,"_164":165,"_166":167,"_108":168,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":368,"_100":369},[],[159],{"_106":178,"_97":179,"_160":180,"_162":-5,"_163":145,"_164":181,"_166":167,"_108":182,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":371,"_100":372},[],[179],{"_106":186,"_97":187,"_160":188,"_162":-5,"_163":145,"_164":189,"_166":167,"_108":190,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":374,"_100":375},[],[187],{"_106":194,"_97":195,"_160":196,"_162":-5,"_163":145,"_164":197,"_166":167,"_108":198,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":377,"_100":378},[],[195],{"_106":202,"_97":203,"_160":204,"_162":-5,"_163":145,"_164":205,"_166":167,"_108":206,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":380,"_100":381},[],[203],{"_106":210,"_97":211,"_160":212,"_162":-5,"_163":145,"_164":213,"_166":167,"_108":214,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":383,"_100":384},[],[211],{"_106":218,"_97":219,"_160":220,"_162":-5,"_163":145,"_164":221,"_166":167,"_108":222,"_102":33,"_169":223,"_171":224,"_172":22,"_173":-5,"_174":386,"_100":387},[],[219],{"_106":228,"_97":229,"_160":230,"_162":-5,"_163":145,"_164":231,"_166":167,"_108":232,"_102":33,"_169":223,"_171":233,"_172":22,"_173":-5,"_174":389,"_100":390},[],[229],{"_106":237,"_97":238,"_160":239,"_162":-5,"_163":145,"_164":240,"_166":167,"_108":241,"_102":33,"_169":223,"_171":242,"_172":22,"_173":-5,"_174":392,"_100":393},[],[238],{"_106":246,"_97":247,"_160":248,"_162":-5,"_163":145,"_164":249,"_166":167,"_108":250,"_102":33,"_169":223,"_171":251,"_172":22,"_173":-5,"_174":395,"_100":396},[],[247],{"_106":255,"_97":256,"_160":257,"_162":-5,"_163":145,"_164":103,"_166":22,"_108":258,"_102":33,"_169":259,"_171":260,"_172":22,"_173":-5,"_174":398,"_100":399},[],[256],{"_106":264,"_97":265,"_160":266,"_162":-5,"_163":145,"_164":267,"_166":167,"_108":268,"_102":33,"_169":223,"_171":269,"_172":22,"_173":-5,"_174":401,"_100":402},[],[265],{"_106":273,"_97":274,"_160":275,"_162":-5,"_163":145,"_164":276,"_166":167,"_108":277,"_102":197,"_169":223,"_171":278,"_172":22,"_173":-5,"_174":404,"_100":405},[],[274],{"_106":282,"_97":283,"_160":284,"_162":-5,"_163":145,"_164":285,"_166":167,"_108":286,"_102":33,"_169":223,"_171":287,"_172":22,"_173":-5,"_174":407,"_100":408},[],[283],{"_106":291,"_97":292,"_160":293,"_162":-5,"_163":145,"_164":294,"_166":22,"_108":295,"_102":213,"_169":259,"_171":296,"_172":22,"_173":-5,"_174":410,"_100":411},[],[292],{"_106":300,"_97":301,"_160":302,"_162":-5,"_163":145,"_164":303,"_166":22,"_108":304,"_102":205,"_169":259,"_171":305,"_172":22,"_173":-5,"_174":413,"_100":414},[],[301],{"_106":309,"_97":101,"_160":310,"_162":-5,"_163":145,"_164":311,"_166":22,"_108":312,"_102":197,"_169":259,"_171":313,"_172":22,"_173":-5,"_174":416,"_100":417},[],[101],{"_106":317,"_97":318,"_160":319,"_162":-5,"_163":145,"_164":320,"_166":22,"_108":321,"_102":205,"_169":259,"_171":322,"_172":22,"_173":-5,"_174":419,"_100":420},[],[318],{"_106":326,"_97":327,"_160":328,"_162":-5,"_163":145,"_164":329,"_166":22,"_108":330,"_102":197,"_169":259,"_171":331,"_172":22,"_173":-5,"_174":422,"_100":423},[],[327],[367,370,373,376,379,382,385,388,391,394,397,400,403,406,409,412,415,418,421],{"_106":309,"_97":101,"_160":310,"_162":-5,"_163":145,"_164":311,"_166":22,"_108":351,"_102":197,"_169":259,"_171":313,"_172":22,"_173":-5,"_100":426},[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

jjg

multiplayer-prompting