\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","deleted","label",[175,156],"frontend","permalink","https://www.val.town/x/jjg/multiplayer-prompting/code/frontend/App.tsx","extension","actionData","errors"]