\r\n

🎴 Vibe-Draft

\r\n

\r\n Multiplayer Prompting Sandbox\r\n

\r\n \r\n

\r\n

\r\n Session ID\r\n setSessionId(e.target.value)}\r\n placeholder=\"my-awesome-session\"\r\n className=\"w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 text-white placeholder-white/50\"\r\n />\r\n

\r\n \r\n

\r\n Your Name\r\n setPlayerName(e.target.value)}\r\n placeholder=\"CodeWizard\"\r\n className=\"w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 text-white placeholder-white/50\"\r\n />\r\n

\r\n \r\n \r\n Join Session 🚀\r\n \r\n \r\n \r\n

\r\n

Up to 10 players can join. Cards Against Humanity meets vibe-coding!

\r\n

\r\n \r\n {window.__PROJECT__ && (\r\n

\r\n \r\n View Source 📝\r\n \r\n

\r\n )}\r\n

\r\n

\r\n );\r\n }\r\n \r\n return (\r\n

\r\n

\r\n {/* Header */}\r\n

\r\n

🎴 Vibe-Draft

\r\n

Session: {sessionId}

\r\n

\r\n \r\n

\r\n {currentPlayer && (\r\n

\r\n Current Turn:\r\n {currentPlayer.avatar} {currentPlayer.name}\r\n {isMyTurn && (\r\n ⭐\r\n )}\r\n

\r\n )}\r\n

\r\n

\r\n \r\n {/* Main Grid */}\r\n

\r\n {/* Left Sidebar - Players */}\r\n

\r\n \r\n

\r\n \r\n {/* Center - Prompt Stack & Output */}\r\n

\r\n \r\n \r\n

\r\n \r\n {/* Right Sidebar - Vibe Preview */}\r\n

\r\n

🎨 Current Vibe

\r\n

\r\n {vibePreview || \"No cards played yet\"}\r\n

\r\n \r\n {stack.length > 0 && (\r\n handleGenerate()}\r\n disabled={generating}\r\n className=\"w-full mt-4 bg-white text-purple-600 font-bold py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50\"\r\n >\r\n {generating ? \"Generating...\" : \"🎲 Generate Vibe\"}\r\n \r\n )}\r\n

\r\n

\r\n \r\n {/* Bottom - Card Hand */}\r\n

\r\n \r\n

\r\n

\r\n );\r\n}\r\n",[],[231,237],{"_106":245,"_97":246,"_160":247,"_162":232,"_163":145,"_164":248,"_166":167,"_108":249,"_102":188,"_169":197,"_171":250,"_172":22,"_173":-5,"_174":251,"_100":252},"5d6e9d18-054f-11f1-9d4e-42dde27851f2","CardDeck.tsx","5872d180-054f-11f1-ad55-42dde27851f2",46,["D",1770597385126],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\r\nimport type { Card } from \"../../shared/types.ts\";\r\n\r\ninterface CardDeckProps {\r\n hand: Card[];\r\n onPlayCard: (card: Card, customContent?: string) => void;\r\n isMyTurn: boolean;\r\n}\r\n\r\nexport function CardDeck({ hand, onPlayCard, isMyTurn }: CardDeckProps) {\r\n const [selectedCard, setSelectedCard] = useState(null);\r\n const [customContent, setCustomContent] = useState(\"\");\r\n \r\n const handleCardClick = (card: Card) => {\r\n if (!isMyTurn) {\r\n alert(\"Wait for your turn!\");\r\n return;\r\n }\r\n \r\n if (card.type === \"custom\" && !card.content) {\r\n setSelectedCard(card);\r\n } else {\r\n onPlayCard(card);\r\n }\r\n };\r\n \r\n const handleCustomSubmit = () => {\r\n if (selectedCard && customContent.trim()) {\r\n onPlayCard(selectedCard, customContent);\r\n setSelectedCard(null);\r\n setCustomContent(\"\");\r\n }\r\n };\r\n \r\n return (\r\n <>\r\n

\r\n

🃏 Your Hand

\r\n {!isMyTurn && (\r\n ⏳ Waiting for turn...\r\n )}\r\n {isMyTurn && (\r\n ⭐ Your Turn!\r\n )}\r\n

\r\n \r\n

\r\n {hand.map((card, index) => (\r\n handleCardClick(card)}\r\n className={`card glass rounded-xl p-4 text-center ${\r\n isMyTurn ? \"cursor-pointer\" : \"cursor-not-allowed opacity-50\"\r\n }`}\r\n >\r\n

{card.emoji}

\r\n

{card.title}

\r\n

{card.content || \"Custom...\"}

\r\n

\r\n ))}\r\n

\r\n \r\n \r\n {/* Custom Card Modal */}\r\n {selectedCard && (\r\n

\r\n

\r\n {selectedCard.emoji} {selectedCard.title}\r\n

\r\n \r\n

\r\n Write your custom instruction:\r\n

\r\n \r\n setCustomContent(e.target.value)}\r\n placeholder=\"e.g., Make it look like a 1990s Geocities website...\"\r\n className=\"w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 text-white placeholder-white/50 resize-none\"\r\n rows={4}\r\n autoFocus\r\n />\r\n \r\n

\r\n {\r\n setSelectedCard(null);\r\n setCustomContent(\"\");\r\n }}\r\n className=\"flex-1 bg-white/20 text-white font-semibold py-2 rounded-lg hover:bg-white/30 transition-all\"\r\n >\r\n Cancel\r\n \r\n \r\n Play Card\r\n \r\n

\r\n

\r\n )}\r\n \r\n );\r\n}\r\n",[],[231,246],{"_106":254,"_97":255,"_160":256,"_162":232,"_163":145,"_164":257,"_166":167,"_108":258,"_102":188,"_169":197,"_171":259,"_172":22,"_173":-5,"_174":260,"_100":261},"6021bd42-054f-11f1-9825-42dde27851f2","PlayerList.tsx","585a4a8e-054f-11f1-b789-42dde27851f2",48,["D",1770597389843],"/** @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",[],[231,255],{"_106":263,"_97":264,"_160":265,"_162":232,"_163":145,"_164":266,"_166":167,"_108":267,"_102":188,"_169":197,"_171":268,"_172":22,"_173":-5,"_174":269,"_100":270},"614c5a9c-054f-11f1-95b5-42dde27851f2","PromptStack.tsx","5863d888-054f-11f1-9410-42dde27851f2",49,["D",1770597391800],"/** @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 { PlayedCard } from \"../../shared/types.ts\";\r\n\r\ninterface PromptStackProps {\r\n stack: PlayedCard[];\r\n vibePreview: string;\r\n}\r\n\r\nexport function PromptStack({ stack, vibePreview }: PromptStackProps) {\r\n const getCardColor = (type: string) => {\r\n switch (type) {\r\n case \"role\": return \"bg-blue-500/30 border-blue-400/50\";\r\n case \"tone\": return \"bg-purple-500/30 border-purple-400/50\";\r\n case \"token-limit\": return \"bg-green-500/30 border-green-400/50\";\r\n case \"custom\": return \"bg-yellow-500/30 border-yellow-400/50\";\r\n case \"image\": return \"bg-pink-500/30 border-pink-400/50\";\r\n case \"remove\": return \"bg-red-500/30 border-red-400/50\";\r\n default: return \"bg-white/20 border-white/30\";\r\n }\r\n };\r\n \r\n const getCardEmoji = (type: string) => {\r\n switch (type) {\r\n case \"role\": return \"🎭\";\r\n case \"tone\": return \"🎨\";\r\n case \"token-limit\": return \"📏\";\r\n case \"custom\": return \"✨\";\r\n case \"image\": return \"📸\";\r\n case \"remove\": return \"🗑️\";\r\n default: return \"🃏\";\r\n }\r\n };\r\n \r\n return (\r\n

\r\n

📚 Prompt Stack

\r\n \r\n {stack.length === 0 ? (\r\n

\r\n

🎴

\r\n

No cards played yet

\r\n

Play a card to start building the vibe!

\r\n

\r\n ) : (\r\n

\r\n {stack.map((card, index) => (\r\n \r\n

\r\n {getCardEmoji(card.card_type)}\r\n

\r\n

\r\n {card.player_name}\r\n #{index + 1}\r\n

\r\n

{card.content}

\r\n {card.image_url && (\r\n

\r\n $\"Context\"\r\n$ \r\n

\r\n )}\r\n

\r\n

\r\n ))}\r\n

\r\n )}\r\n \r\n

\r\n

Stack size: {stack.length} cards

\r\n

\r\n \r\n );\r\n}\r\n",[],[231,264],{"_106":272,"_97":273,"_160":274,"_162":232,"_163":145,"_164":275,"_166":167,"_108":276,"_102":188,"_169":197,"_171":277,"_172":22,"_173":-5,"_174":278,"_100":279},"6300b982-054f-11f1-86b5-42dde27851f2","VibeOutput.tsx","5868e198-054f-11f1-a1a0-42dde27851f2",50,["D",1770597394665],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\r\nimport React, { useState } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\r\nimport type { PromptResult } from \"../../shared/types.ts\";\r\n\r\ninterface VibeOutputProps {\r\n result: PromptResult | null;\r\n generating: boolean;\r\n onGenerate: (query: string) => void;\r\n}\r\n\r\nexport function VibeOutput({ result, generating, onGenerate }: VibeOutputProps) {\r\n const [query, setQuery] = useState(\"\");\r\n const [showPrompt, setShowPrompt] = useState(false);\r\n \r\n const handleGenerate = () => {\r\n onGenerate(query);\r\n setQuery(\"\");\r\n };\r\n \r\n return (\r\n

\r\n

✨ Vibe Output

\r\n {result && (\r\n setShowPrompt(!showPrompt)}\r\n className=\"text-xs opacity-70 hover:opacity-100 transition-opacity\"\r\n >\r\n {showPrompt ? \"Hide\" : \"Show\"} Prompt\r\n \r\n )}\r\n

\r\n \r\n {/* Query Input */}\r\n

\r\n

\r\n setQuery(e.target.value)}\r\n onKeyDown={(e) => e.key === \"Enter\" && !generating && handleGenerate()}\r\n placeholder=\"What should the vibe create?\"\r\n className=\"flex-1 px-4 py-2 rounded-lg bg-white/20 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 text-white placeholder-white/50 text-sm\"\r\n />\r\n \r\n {generating ? \"⏳\" : \"🎲\"}\r\n \r\n

\r\n

\r\n \r\n {/* Output Area */}\r\n

\r\n {generating ? (\r\n

\r\n

Synthesizing the vibe...

\r\n

\r\n \r\n \r\n \r\n

\r\n

\r\n ) : result ? (\r\n

\r\n {showPrompt && (\r\n

\r\n

SYSTEM PROMPT:

\r\n

\r\n                  {result.prompt}\r\n

\r\n

\r\n )}\r\n \r\n

\r\n

\r\n RESPONSE:\r\n {result.token_count} tokens\r\n

\r\n

\r\n {result.response}\r\n

\r\n

\r\n \r\n

\r\n {new Date(result.timestamp).toLocaleTimeString()}\r\n

\r\n

\r\n ) : (\r\n

\r\n

🎨

\r\n

No vibe generated yet

\r\n

Stack some cards and hit generate!

\r\n

\r\n )}\r\n

\r\n

\r\n );\r\n}\r\n",[],[231,273],[231],{"_106":282,"_97":283,"_160":284,"_162":-5,"_163":145,"_164":207,"_166":167,"_108":285,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":286,"_100":287},"c4dfc992-054d-11f1-83a6-42dde27851f2","shared","c4dfca5a-054d-11f1-83a6-42dde27851f2",["D",1770596699877],[],[283],{"_106":289,"_97":290,"_160":291,"_162":-5,"_163":145,"_164":292,"_166":167,"_108":293,"_102":33,"_169":294,"_171":295,"_172":22,"_173":-5,"_174":296,"_100":297},"c516331a-054d-11f1-9bbe-42dde27851f2",".vtignore","c5163496-054d-11f1-9bbe-42dde27851f2",9,["D",1770596700214],"file",".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[],[290],{"_106":299,"_97":300,"_160":301,"_162":-5,"_163":145,"_164":302,"_166":167,"_108":303,"_102":33,"_169":294,"_171":304,"_172":22,"_173":-5,"_174":305,"_100":306},"c50ed53e-054d-11f1-a6d7-42dde27851f2","AGENTS.md","c50ed73c-054d-11f1-a6d7-42dde27851f2",7,["D",1770596700181],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

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",[],[300],{"_106":308,"_97":309,"_160":310,"_162":-5,"_163":145,"_164":311,"_166":167,"_108":312,"_102":33,"_169":294,"_171":313,"_172":22,"_173":-5,"_174":314,"_100":315},"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",[],[309],{"_106":317,"_97":318,"_160":319,"_162":-5,"_163":145,"_164":320,"_166":167,"_108":321,"_102":33,"_169":294,"_171":322,"_172":22,"_173":-5,"_174":323,"_100":324},"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",[],[318],{"_106":326,"_97":327,"_160":328,"_162":-5,"_163":145,"_164":329,"_166":167,"_108":330,"_102":33,"_169":294,"_171":331,"_172":22,"_173":-5,"_174":332,"_100":333},"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",[],[327],{"_106":335,"_97":336,"_160":337,"_162":-5,"_163":145,"_164":338,"_166":167,"_108":339,"_102":225,"_169":294,"_171":340,"_172":22,"_173":-5,"_174":341,"_100":342},"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",[],[336],{"_106":344,"_97":345,"_160":346,"_162":-5,"_163":145,"_164":347,"_166":167,"_108":348,"_102":33,"_169":294,"_171":349,"_172":22,"_173":-5,"_174":350,"_100":351},"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}",[],[345],{"_106":353,"_97":354,"_160":355,"_162":-5,"_163":145,"_164":356,"_166":22,"_108":357,"_102":216,"_169":197,"_171":358,"_172":22,"_173":-5,"_174":359,"_100":360},"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",[],[354],{"_106":362,"_97":363,"_160":364,"_162":-5,"_163":145,"_164":365,"_166":22,"_108":366,"_102":225,"_169":197,"_171":367,"_172":22,"_173":-5,"_174":368,"_100":369},"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",[],[363],"files",[157,177,184,191,201,211,221,229,235,244,253,262,271,281,288,298,307,316,325,334,343,352,361],"counts",{"_374":33,"_375":188,"_376":33,"_377":378,"_381":382},"pulls","branches","forks","envVars",{"_379":33,"_380":33},"count","emptyCount","connections",{"_379":33,"_383":33},"unfilledCount","contents",[],{"_106":178,"_163":145,"_160":179,"_97":101,"_171":-5,"_169":170,"_102":33,"_162":-5,"_108":387,"_164":180,"_173":-5,"_100":388},["D",1770596700053],[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":397,"_155":402,"_370":472,"_294":473,"_384":476,"_477":-5,"_478":-5,"_479":-5,"_480":-5,"_481":482,"_377":-5},{"_106":107,"_97":98,"_108":398,"_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":399,"_137":400,"_142":401,"_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},[403,406,409,421,424,442,445,448,451,454,457,460,463,466,469],{"_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":404,"_100":405},[],[159],{"_106":178,"_97":101,"_160":179,"_162":-5,"_163":145,"_164":180,"_166":167,"_108":181,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":407,"_100":408},[],[101],{"_106":185,"_97":186,"_160":187,"_162":-5,"_163":145,"_164":188,"_166":167,"_108":189,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":410,"_100":420},[411,414,417],{"_106":192,"_97":193,"_160":194,"_162":187,"_163":145,"_164":195,"_166":167,"_108":196,"_102":165,"_169":197,"_171":198,"_172":22,"_173":-5,"_174":412,"_100":413},[],[186,193],{"_106":202,"_97":203,"_160":204,"_162":187,"_163":145,"_164":205,"_166":167,"_108":206,"_102":207,"_169":197,"_171":208,"_172":22,"_173":-5,"_174":415,"_100":416},[],[186,203],{"_106":212,"_97":213,"_160":214,"_162":187,"_163":145,"_164":103,"_166":167,"_108":215,"_102":216,"_169":197,"_171":217,"_172":22,"_173":-5,"_174":418,"_100":419},[],[186,213],[186],{"_106":222,"_97":223,"_160":224,"_162":-5,"_163":145,"_164":225,"_166":167,"_108":226,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":422,"_100":423},[],[223],{"_106":230,"_97":231,"_160":232,"_162":-5,"_163":145,"_164":216,"_166":167,"_108":233,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":425,"_100":441},[426,429,432,435,438],{"_106":236,"_97":237,"_160":238,"_162":232,"_163":145,"_164":239,"_166":167,"_108":240,"_102":188,"_169":197,"_171":241,"_172":22,"_173":-5,"_174":427,"_100":428},[],[231,237],{"_106":245,"_97":246,"_160":247,"_162":232,"_163":145,"_164":248,"_166":167,"_108":249,"_102":188,"_169":197,"_171":250,"_172":22,"_173":-5,"_174":430,"_100":431},[],[231,246],{"_106":254,"_97":255,"_160":256,"_162":232,"_163":145,"_164":257,"_166":167,"_108":258,"_102":188,"_169":197,"_171":259,"_172":22,"_173":-5,"_174":433,"_100":434},[],[231,255],{"_106":263,"_97":264,"_160":265,"_162":232,"_163":145,"_164":266,"_166":167,"_108":267,"_102":188,"_169":197,"_171":268,"_172":22,"_173":-5,"_174":436,"_100":437},[],[231,264],{"_106":272,"_97":273,"_160":274,"_162":232,"_163":145,"_164":275,"_166":167,"_108":276,"_102":188,"_169":197,"_171":277,"_172":22,"_173":-5,"_174":439,"_100":440},[],[231,273],[231],{"_106":282,"_97":283,"_160":284,"_162":-5,"_163":145,"_164":207,"_166":167,"_108":285,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_174":443,"_100":444},[],[283],{"_106":289,"_97":290,"_160":291,"_162":-5,"_163":145,"_164":292,"_166":167,"_108":293,"_102":33,"_169":294,"_171":295,"_172":22,"_173":-5,"_174":446,"_100":447},[],[290],{"_106":299,"_97":300,"_160":301,"_162":-5,"_163":145,"_164":302,"_166":167,"_108":303,"_102":33,"_169":294,"_171":304,"_172":22,"_173":-5,"_174":449,"_100":450},[],[300],{"_106":308,"_97":309,"_160":310,"_162":-5,"_163":145,"_164":311,"_166":167,"_108":312,"_102":33,"_169":294,"_171":313,"_172":22,"_173":-5,"_174":452,"_100":453},[],[309],{"_106":317,"_97":318,"_160":319,"_162":-5,"_163":145,"_164":320,"_166":167,"_108":321,"_102":33,"_169":294,"_171":322,"_172":22,"_173":-5,"_174":455,"_100":456},[],[318],{"_106":326,"_97":327,"_160":328,"_162":-5,"_163":145,"_164":329,"_166":167,"_108":330,"_102":33,"_169":294,"_171":331,"_172":22,"_173":-5,"_174":458,"_100":459},[],[327],{"_106":335,"_97":336,"_160":337,"_162":-5,"_163":145,"_164":338,"_166":167,"_108":339,"_102":225,"_169":294,"_171":340,"_172":22,"_173":-5,"_174":461,"_100":462},[],[336],{"_106":344,"_97":345,"_160":346,"_162":-5,"_163":145,"_164":347,"_166":167,"_108":348,"_102":33,"_169":294,"_171":349,"_172":22,"_173":-5,"_174":464,"_100":465},[],[345],{"_106":353,"_97":354,"_160":355,"_162":-5,"_163":145,"_164":356,"_166":22,"_108":357,"_102":216,"_169":197,"_171":358,"_172":22,"_173":-5,"_174":467,"_100":468},[],[354],{"_106":362,"_97":363,"_160":364,"_162":-5,"_163":145,"_164":365,"_166":22,"_108":366,"_102":225,"_169":197,"_171":367,"_172":22,"_173":-5,"_174":470,"_100":471},[],[363],[403,406,409,411,414,417,421,424,426,429,432,435,438,442,445,448,451,454,457,460,463,466,469],{"_106":178,"_97":101,"_160":179,"_162":-5,"_163":145,"_164":180,"_166":167,"_108":474,"_102":33,"_169":170,"_171":-5,"_172":22,"_173":-5,"_100":475},["D",1770596700053],[101],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

jjg

multiplayer-prompting