\n MASKHANGOUT\n

\n Your face. Your space. Your vibe.\n

\n\n

\n \n USERNAME\n \n setUsername(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && handleLogin()}\n placeholder=\"ENTER_YOUR_NAME\"\n className=\"w-full bg-black border border-gray-700 rounded px-4 py-3 text-white focus:border-cyan-400 focus:outline-none\"\n />\n

\n\n \n ENTER THE NETWORK\n \n

\n );\n }\n\n // Profile Editor\n if (view === \"profile\") {\n return (\n

\n {/* Header */}\n

\n setView(\"lobby\")}\n className=\"text-cyan-400 hover:text-cyan-300\"\n >\n ← BACK\n \n

MY MASK DOMAIN

\n \n

\n\n

\n {/* ACTIVE NEURAL ENGINE PREVIEW */}\n

\n 🔴 LIVE CAMERA\n

\n\n {/* THIS IS THE LIVE AR COMPONENT */}\n \n\n

{username}

{maskConfig.style} Vibe

\n\n {/* Settings */}\n

\n \n STYLE PRESET\n

\n {[\"Cyber\", \"Neon\", \"Heat\", \"Void\", \"Studio\"].map((style) => (\n \n setMaskConfig({\n ...maskConfig,\n style,\n color: vibeColors[style],\n })}\n className={`p-3 rounded text-sm font-bold transition-all ${\n maskConfig.style === style\n ? \"bg-cyan-400 text-black\"\n : \"bg-gray-800 text-gray-400 hover:bg-gray-700\"\n }`}\n >\n {style}\n \n ))}\n

\n\n

COLOR ACCENT

\n \n setMaskConfig({ ...maskConfig, color: e.target.value })}\n className=\"w-full h-12 rounded cursor-pointer border-none bg-transparent\"\n />\n

\n );\n }\n\n // Room View\n if (view === \"room\" && selectedRoom) {\n return (\n

\n {/* Room Header */}\n

\n \n \n LEAVE\n \n

{selectedRoom.name}

\n Host: {selectedRoom.host} •{\" \"}\n {selectedRoom.users}/{selectedRoom.maxUsers} online\n

\n \n \n {selectedRoom.vibe} Vibe\n \n

\n\n

\n {/* Main Stage - Mask Grid */}\n

\n {/* 1. LOCAL USER (LIVE AR) */}\n

\n \n

\n {username} (YOU)\n

\n \n

\n\n {/* 2. REMOTE USERS (Mocked as static gradients for now to save performance) */}\n {[selectedRoom.host, \"USER_003\", \"USER_004\"].map((user, i) => (\n \n \n 🎭\n

\n {user}\n {i === 0 && (\n \n )}\n

\n ))}\n

\n\n {/* Room Info */}\n

\n NEURAL SYNC ACTIVE\n

\n You are broadcasting your neural mesh data to{\" \"}\n {selectedRoom.users - 1} peers. Latency: 24ms. Vibe:{\" \"}\n {selectedRoom.vibe}.\n

\n\n {/* Chat Sidebar */}\n

\n \n ROOM CHAT\n

\n\n

\n {messages.map((msg, i) => (\n \n {msg.type === \"system\"\n ?

{msg.text}

\n : (\n

{msg.user}

\n {msg.text}\n

\n )}\n

\n ))}\n

\n\n

\n setChatMessage(e.target.value)}\n onKeyPress={(e) => e.key === \"Enter\" && handleSendMessage()}\n placeholder=\"Type message...\"\n className=\"flex-1 bg-black border border-gray-700 rounded px-3 py-2 text-sm focus:border-cyan-400 focus:outline-none\"\n />\n \n →\n \n

\n \n \n \n );\n }\n\n // Lobby View (Unchanged from your logic)\n return (\n

\n {/* Top Nav */}\n

\n MASKHANGOUT\n

\n \n

{username}

{maskConfig.style} Vibe

\n setView(\"profile\")}\n className=\"bg-cyan-400 text-black px-4 py-2 rounded font-bold hover:bg-cyan-300 flex items-center gap-2\"\n >\n \n MY DOMAIN\n \n

\n\n

\n {/* Sidebar */}\n

\n \n ONLINE NOW ({onlineUsers.length})\n

\n {onlineUsers.map((user) => (\n \n

{user.name}

\n \n

\n {user.maskStyle} • {user.followers} followers\n

\n ))}\n

\n\n {/* Room List */}\n

ACTIVE ROOMS

\n \n

\n {rooms.map((room) => (\n handleJoinRoom(room)}\n >\n \n 🎭🎭🎭\n

{room.name}

by {room.host}

\n \n {room.vibe}\n

\n \n \n {room.users}/{room.maxUsers}\n \n \n

\n ))}\n

\n \n \n \n \n );\n};\n\nexport default MaskHangout;","deleted","label",[99],"permalink","https://www.val.town/x/bomb/untitled-7438/code/main.ts","extension","actionData","errors"]