${message.username}

` : ''}\n

${escapeHtml(message.content)}

${formatTimestamp(message.createdAt)}

\n `;\n \n messagesContainer.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Add a system message to the chat\nfunction addSystemMessage(text) {\n const messageElement = document.createElement('div');\n messageElement.className = 'message-bubble system-message';\n messageElement.textContent = text;\n \n messagesContainer.appendChild(messageElement);\n scrollToBottom();\n}\n\n// Show the chat screen\nfunction showChatScreen() {\n console.log('Showing chat screen');\n \n if (!loginScreen || !chatScreen) {\n console.error('Login or chat screen elements not found!', {\n loginScreen: !!loginScreen,\n chatScreen: !!chatScreen\n });\n alert('Error loading chat interface. Please refresh the page.');\n return;\n }\n \n loginScreen.classList.add('hidden');\n chatScreen.classList.remove('hidden');\n \n if (currentUserSpan) {\n currentUserSpan.textContent = username;\n }\n \n if (messageInput) {\n messageInput.focus();\n }\n \n console.log('Chat screen should now be visible');\n}\n\n// Utility: Scroll to the bottom of the messages container\nfunction scrollToBottom() {\n messagesContainer.scrollTop = messagesContainer.scrollHeight;\n}\n\n// Utility: Format timestamp\nfunction formatTimestamp(timestamp) {\n const date = new Date(timestamp);\n return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });\n}\n\n// Utility: Escape HTML to prevent XSS\nfunction escapeHtml(unsafe) {\n return unsafe\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\")\n .replace(/'/g, \"'\");\n}\n\n// Initialize the app when the DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n console.log('DOM content loaded, initializing app...');\n init();\n});",[],[256,248],"frontend","672f6512-30ed-11f0-b6cf-569c3dd06744","index.html","73354b52-30ec-11f0-9261-569c3dd06744",17,["D",1747245664492],"\n\n\n \n \n Real-Time Chat\n \n \n \n\n\n

\n \n \n\n \n

Real-Time Chat

Logged in as:

\n\n

\n \n

\n\n \n

\n \n \n

\n Error!\n JavaScript is not working properly. Please try refreshing the page or check your browser settings.\n

\n\n \n \n\n \n \n \n \n\n",[],[256,258],"84b6bdac-30ec-11f0-aeee-569c3dd06744","84b6be56-30ec-11f0-aeee-569c3dd06744",10,["D",1747245284541],"# Frontend for Real-Time Chat\n\nThis directory contains the frontend code for the real-time chat application.\n\n## Components\n\n- `index.html`: Main HTML template with the chat UI\n- `index.js`: Frontend JavaScript for handling WebSocket communication and UI updates\n\n## Features\n\n- Real-time message updates using WebSockets\n- User authentication with username\n- Message history display\n- Responsive design with Tailwind CSS",[],[256,84],"7335d7f2-30ec-11f0-9261-569c3dd06744",7,["D",1747245255169],[221,222,223],[256],["D",1747245708914],[],[18,93],["D",1747245206486],[],[18,84],"528b7f8e-30ec-11f0-afc4-569c3dd06744","queries.ts","528b8038-30ec-11f0-afc4-569c3dd06744",4,["D",1747245200370],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nimport { Message, User } from \"../../shared/types.ts\";\nimport { MESSAGES_TABLE, USERS_TABLE } from \"./migrations.ts\";\n\n// User queries\nexport async function createUser(username: string): Promise {\n const now = new Date().toISOString();\n \n const result = await sqlite.execute(\n `INSERT INTO ${USERS_TABLE} (username, created_at) VALUES (?, ?) RETURNING id, username, created_at`,\n [username, now]\n );\n \n if (result.rows.length === 0) {\n throw new Error(\"Failed to create user\");\n }\n \n return {\n id: result.rows[0][0] as number,\n username: result.rows[0][1] as string,\n createdAt: result.rows[0][2] as string\n };\n}\n\nexport async function getUserByUsername(username: string): Promise {\n const result = await sqlite.execute(\n `SELECT id, username, created_at FROM ${USERS_TABLE} WHERE username = ?`,\n [username]\n );\n \n if (result.rows.length === 0) {\n return null;\n }\n \n return {\n id: result.rows[0][0] as number,\n username: result.rows[0][1] as string,\n createdAt: result.rows[0][2] as string\n };\n}\n\n// Message queries\nexport async function createMessage(userId: number, content: string): Promise {\n const now = new Date().toISOString();\n \n // First get the username\n const userResult = await sqlite.execute(\n `SELECT username FROM ${USERS_TABLE} WHERE id = ?`,\n [userId]\n );\n \n if (userResult.rows.length === 0) {\n throw new Error(\"User not found\");\n }\n \n const username = userResult.rows[0][0] as string;\n \n // Then create the message\n const result = await sqlite.execute(\n `INSERT INTO ${MESSAGES_TABLE} (user_id, content, created_at) VALUES (?, ?, ?) RETURNING id`,\n [userId, content, now]\n );\n \n if (result.rows.length === 0) {\n throw new Error(\"Failed to create message\");\n }\n \n return {\n id: result.rows[0][0] as number,\n userId,\n username,\n content,\n createdAt: now\n };\n}\n\nexport async function getRecentMessages(limit = 50): Promise {\n const result = await sqlite.execute(\n `SELECT m.id, m.user_id, u.username, m.content, m.created_at \n FROM ${MESSAGES_TABLE} m\n JOIN ${USERS_TABLE} u ON m.user_id = u.id\n ORDER BY m.created_at DESC\n LIMIT ?`,\n [limit]\n );\n \n return result.rows.map(row => ({\n id: row[0] as number,\n userId: row[1] as number,\n username: row[2] as string,\n content: row[3] as string,\n createdAt: row[4] as string\n })).reverse(); // Reverse to get oldest first\n}",[],[18,68,284],"4be5ea3e-30ec-11f0-be93-569c3dd06744","migrations.ts","4be5eb06-30ec-11f0-be93-569c3dd06744",["D",1747245189189],"import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\n\n// Table names - change these when modifying schema\nexport const USERS_TABLE = 'chat_users';\nexport const MESSAGES_TABLE = 'chat_messages';\n\nexport async function runMigrations() {\n // Create users table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${USERS_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL UNIQUE,\n created_at TEXT NOT NULL\n )\n `);\n\n // Create messages table\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${MESSAGES_TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n user_id INTEGER NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT NOT NULL,\n FOREIGN KEY (user_id) REFERENCES ${USERS_TABLE}(id)\n )\n `);\n}",[],[18,68,292],["D",1747245189189],[216,217],[18,68],["D",1747245189189],[215,218,219],[18],["D",1747245081250],{"_11":12,"_159":74},{"_11":12,"_155":-5,"_73":74,"_31":72,"_156":157,"_158":30},{"_43":106,"_13":16,"_37":40,"_147":114,"_148":-5,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":14,"_154":12},"ctx",{"_56":-5,"_178":341,"_342":343,"_344":345,"_346":30,"_347":30,"_348":30,"_349":24,"_350":-5,"_351":-7,"_352":-7,"_353":26,"_354":30,"_355":30,"_356":-5,"_357":30,"_358":30,"_359":30,"_360":-5},"ENV",{"_312":313,"_314":315,"_316":16,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Join the Chat

History · backend