// Gateway '99 - AOL 1999 Simulator UI // Authentic 1999 AOL + Windows 98 Desktop experience const { CHANNELS } = require('lib/data-channels'); const { NEWS_CHANNEL } = require('lib/data-articles-news'); const { SPORTS_CHANNEL } = require('lib/data-articles-sports'); const { ENTERTAINMENT_CHANNEL } = require('lib/data-articles-entertainment'); const { GAMES_CHANNEL } = require('lib/data-articles-games'); const { MUSIC_CHANNEL } = require('lib/data-articles-music'); const { SHOPPING_CHANNEL } = require('lib/data-articles-shopping'); const { TRAVEL_CHANNEL } = require('lib/data-articles-travel'); const { FINANCE_CHANNEL } = require('lib/data-articles-finance'); const { HEALTH_CHANNEL } = require('lib/data-articles-health'); const { COMPUTING_CHANNEL } = require('lib/data-articles-computing'); const { COMPUTING_ARTICLES } = require('lib/data-article-content-computing'); const { ENTERTAINMENT_ARTICLES } = require('lib/data-article-content-entertainment'); const { GAMES_ARTICLES } = require('lib/data-article-content-games'); const { MUSIC_ARTICLES } = require('lib/data-article-content-music'); const { NEWS_ARTICLES } = require('lib/data-article-content-news'); const { SPORTS_ARTICLES } = require('lib/data-article-content-sports'); const { CODEX_TABS } = require('lib/data-codex'); const { MY_COMPUTER_FOLDERS, getDynamicFilesHtml } = require('lib/data-mycomputer'); var _uiMinesweeper = null; try { _uiMinesweeper = require('lib/ui-minesweeper'); } catch(e) { _uiMinesweeper = { renderMinesweeperWindow: function() { return '

Minesweeper Error

'; } }; } var renderMinesweeperWindow = _uiMinesweeper.renderMinesweeperWindow; const { renderNapsterWindow } = require('lib/ui-napster'); const { renderNotification } = require('lib/ui-notifications'); const { renderCaseFilesWindow } = require('lib/ui-casefiles'); var _uiBrowser = null; try { _uiBrowser = require('lib/ui-browser'); } catch(e) { _uiBrowser = { renderWebsite: function() { return '

Browser Error

'; }, getAvailableSites: function() { return []; } }; } var renderWebsite = _uiBrowser.renderWebsite; var getAvailableSites = _uiBrowser.getAvailableSites; var _uiSnowcraft = null; try { _uiSnowcraft = require('lib/ui-snowcraft'); } catch(e) { _uiSnowcraft = { renderSnowcraftGame: function() { return ''; }, renderSnowcraftMaximized: function() { return ''; } }; } var renderSnowcraftGame = _uiSnowcraft.renderSnowcraftGame; var renderSnowcraftMaximized = _uiSnowcraft.renderSnowcraftMaximized; var _uiChess = null; try { _uiChess = require('lib/ui-chess'); } catch(e) { _uiChess = { renderChessGame: function() { return ''; }, renderChessMaximized: function() { return ''; } }; } var renderChessGame = _uiChess.renderChessGame; var renderChessMaximized = _uiChess.renderChessMaximized; var _uiAoe = null; try { _uiAoe = require('lib/ui-aoe'); } catch(e) { _uiAoe = { renderAoeGame: function() { return ''; }, renderAoeMaximized: function() { return ''; } }; } var renderAoeGame = _uiAoe.renderAoeGame; var renderAoeMaximized = _uiAoe.renderAoeMaximized; var _uiSol = null; try { _uiSol = require('lib/ui-solitaire'); } catch(e) { _uiSol = { renderSolitaireGame: function() { return ''; }, renderSolitaireMaximized: function() { return ''; } }; } var renderSolitaireGame = _uiSol.renderSolitaireGame; var renderSolitaireMaximized = _uiSol.renderSolitaireMaximized; var _uiSearch = null; try { _uiSearch = require('lib/ui-aol-search'); } catch(e) { _uiSearch = null; } var uiEmail = require('lib/ui-email.js'); var identity = require('lib/identity.js'); var _uiClippy = null; try { _uiClippy = require('lib/ui-clippy'); } catch(e) { _uiClippy = { renderClippy: function() { return ''; } }; } var renderClippy = _uiClippy.renderClippy; // Module-level identity resolution (set each render frame) var _idRegistry = {}; var _localPlayerId = ''; function resolveName(id) { return identity.resolveFromRegistry(_idRegistry, id); } export default function(localPlayer, world) { // Set up identity resolution for this render frame var _cm = world.getObject('chat-manager'); _idRegistry = _cm && _cm.state ? _cm.state.identityRegistry || {} : {}; _localPlayerId = localPlayer.id || ''; // Pass registry to email UI module for name resolution uiEmail.setRegistry(_idRegistry); const state = localPlayer.state || {}; state._localPlayerId = _localPlayerId; const gameState = state.gameState || 'desktop'; // Codex overlay (P key) - renders on top of everything const codexHtml = state.codexOpen ? renderCodex(state) : ''; // Skill discovery popup - renders on top of EVERYTHING const skillPopupHtml = renderSkillDiscoveryPopup(state); // Discovery/achievement/mystery notifications - renders on top of most things const notificationHtml = renderNotification(state); let mainContent = ''; // Connecting states render on their own if (gameState === 'connecting') { mainContent = renderConnectingScreen(state); } else if (gameState === 'connection_failed') { mainContent = renderConnectionFailed(state); } else { // Desktop is always the base - windows render on top mainContent = renderWindows98Desktop(state, localPlayer, world); } return mainContent + codexHtml + notificationHtml + skillPopupHtml; } // ============================================ // WINDOWS 98 DESKTOP // ============================================ function renderWindows98Desktop(state, localPlayer, world) { const openWindows = state.openWindows || []; const activeWindow = state.activeWindow; const startMenuOpen = state.startMenuOpen || false; const positions = state.windowPositions || {}; const openIMs = state.openIMs || []; const imPositions = state.imPositions || {}; const isConnected = state.isConnected || false; // Check if AOL is minimized (connected but window not open) const aolMinimized = isConnected && !openWindows.includes('aol'); // Calculate z-indices based on which window is active const getZIndex = (windowName) => { if (activeWindow === windowName) return 10002; return 10000; }; // Render all open windows let windowsHtml = ''; var minimizedWindows = state.minimizedWindows || []; if (openWindows.includes('notepad') && !minimizedWindows.includes('notepad')) { windowsHtml += renderNotepadWindow(state, activeWindow === 'notepad', positions.notepad, getZIndex('notepad')); } if (openWindows.includes('minesweeper') && !minimizedWindows.includes('minesweeper')) { windowsHtml += renderMinesweeperWindow(state, activeWindow === 'minesweeper', positions.minesweeper, getZIndex('minesweeper')); } if (openWindows.includes('recyclebin') && !minimizedWindows.includes('recyclebin')) { windowsHtml += renderRecycleBinWindow(state, activeWindow === 'recyclebin', positions.recyclebin, getZIndex('recyclebin')); } if (openWindows.includes('mycomputer') && !minimizedWindows.includes('mycomputer')) { windowsHtml += renderMyComputerWindow(state, activeWindow === 'mycomputer', positions.mycomputer, getZIndex('mycomputer')); } if (openWindows.includes('profile') && !minimizedWindows.includes('profile')) { windowsHtml += renderProfileWindow(state, activeWindow === 'profile', positions.profile, getZIndex('profile')); } if (openWindows.includes('napster') && !minimizedWindows.includes('napster')) { windowsHtml += renderNapsterWindow(state, activeWindow === 'napster', positions.napster, getZIndex('napster')); } if (openWindows.includes('casefiles') && !minimizedWindows.includes('casefiles')) { windowsHtml += renderCaseFilesWindow(state, activeWindow === 'casefiles', positions.casefiles, getZIndex('casefiles')); } if (openWindows.includes('readme') && !minimizedWindows.includes('readme')) { windowsHtml += renderReadmeWindow(state, activeWindow === 'readme', positions.readme, getZIndex('readme')); } if (openWindows.includes('aol')) { windowsHtml += renderAOLWindow(state, localPlayer, activeWindow === 'aol', positions.aol, getZIndex('aol'), world); } // Render single tabbed IM window let imWindowsHtml = renderTabbedIMWindow(openIMs, state, world); return `

${renderDesktopIcon('🌐', 'AOL', 'openAOL')} ${renderDesktopIcon('📧', "You've Got Mail", 'youveGotMail')} ${renderDesktopIcon('📝', 'Notepad', 'openNotepad')} ${renderDesktopIcon('🔍', 'Case Files', 'openCaseFiles')} ${renderDesktopIcon('🎵', 'Napster', 'openNapster')} ${renderDesktopIcon('📄', 'How-to-Play.txt', 'openReadme')}

${windowsHtml} ${imWindowsHtml}

${openWindows.includes('aol') ? '' : ''} ${aolMinimized ? '' : ''} ${openWindows.includes('minesweeper') ? '' : ''} ${openWindows.includes('notepad') ? '' : ''} ${openWindows.includes('recyclebin') ? '' : ''} ${openWindows.includes('mycomputer') ? '' : ''} ${openWindows.includes('profile') ? '' : ''} ${openWindows.includes('napster') ? '' : ''} ${!openWindows.includes('napster') && state.napsterPlaying ? '' : ''} ${openWindows.includes('casefiles') ? '' : ''} ${openWindows.includes('readme') ? '' : ''} ${openIMs.length > 0 ? '' : ''}

🔊 ${(() => { let y2k = 7200; if (world) { const mgrs = world.query({ tags: ['chat-manager'] }); if (mgrs.length > 0) { const mgr = world.getObject(mgrs[0].id); if (mgr && mgr.state && typeof mgr.state.y2kTimer === 'number') y2k = mgr.state.y2kTimer; } } const elapsed = 7200 - y2k; const totalMinutes = Math.floor(elapsed / 60); let hour = 10 + Math.floor(totalMinutes / 60); const minute = totalMinutes % 60; const ampm = hour >= 12 ? (hour >= 24 ? 'AM' : 'AM') : 'PM'; if (hour >= 12) { if (hour > 12) hour -= 12; return String(hour).padStart(2,'0') + ':' + String(minute).padStart(2,'0') + ' AM'; } return String(hour).padStart(2,'0') + ':' + String(minute).padStart(2,'0') + ' PM'; })()}

${startMenuOpen ? renderStartMenu() : ''} ${state.avatarPopupOpen && state.profile && state.profile.avatarUrl ? `

` : ''} ${renderClippy(state)}

`; } function renderDesktopIcon(emoji, label, action) { const onclick = action ? `onclick="sendAction('${action}')"` : ''; return ` `; } function renderStartMenu() { return `

Windows 98

`; } // ============================================ // MINESWEEPER WINDOW // ============================================ // renderMinesweeperWindow — EXTRACTED to lib/ui-minesweeper.js // ============================================ // README (How-to-Play.txt) WINDOW — read-only // ============================================ var README_TEXT = '========================================\r\n' + ' GATEWAY \'99 - README.txt\r\n' + ' Version 5.0 Build 1999.12.31\r\n' + ' (c) 1999 America Online, Inc.\r\n' + '========================================\r\n' + '\r\n' + 'Thank you for choosing Gateway \'99!\r\n' + '\r\n' + 'This file contains important information\r\n' + 'about your new online experience. Please\r\n' + 'read it before getting started.\r\n' + '\r\n' + '----------------------------------------\r\n' + ' GETTING STARTED\r\n' + '----------------------------------------\r\n' + '\r\n' + '1. Double-click the AOL icon on your\r\n' + ' desktop to connect to the internet.\r\n' + ' (Make sure nobody is using the phone!)\r\n' + '\r\n' + '2. Wait for the dial-up connection.\r\n' + ' If you get a busy signal, just try\r\n' + ' again. It happens sometimes.\r\n' + '\r\n' + '3. Once connected, you\'ll see the AOL\r\n' + ' Welcome screen with all the latest\r\n' + ' news, features, and channels.\r\n' + '\r\n' + '4. Open Napster and download some tunes\r\n' + ' to your playlist. Let the sounds of\r\n' + ' 1999 set the mood while you browse.\r\n' + '\r\n' + '----------------------------------------\r\n' + ' WHAT CAN I DO?\r\n' + '----------------------------------------\r\n' + '\r\n' + 'EMAIL:\r\n' + ' Click "Read" or "Write" in the AOL\r\n' + ' toolbar to check your inbox and send\r\n' + ' messages to friends and family.\r\n' + ' You\'ve Got Mail!\r\n' + '\r\n' + 'CHAT ROOMS:\r\n' + ' Click the "People" button to browse\r\n' + ' chat rooms. Talk to people from all\r\n' + ' over the country! Try Town Square for\r\n' + ' general conversation, or find a room\r\n' + ' that matches your interests.\r\n' + '\r\n' + 'INSTANT MESSAGES:\r\n' + ' See a buddy online? Click their name\r\n' + ' to send them an Instant Message. It\'s\r\n' + ' like passing notes, but on the computer!\r\n' + '\r\n' + 'CHANNELS:\r\n' + ' Click "Channels" to explore topics like\r\n' + ' News, Sports, Games, Music, Computing,\r\n' + ' Entertainment, Travel, and more. Each\r\n' + ' channel has articles and features updated\r\n' + ' daily by the AOL editorial team.\r\n' + '\r\n' + 'MINESWEEPER:\r\n' + ' Need a break? The classic game is right\r\n' + ' on your desktop. Left-click to reveal a\r\n' + ' square. Right-click to place a flag.\r\n' + ' Try to beat your best time!\r\n' + '\r\n' + 'NAPSTER:\r\n' + ' Search for songs, download MP3s, and\r\n' + ' build your playlist. Hit play and let\r\n' + ' the music ride while you chat, browse,\r\n' + ' and explore. Trust us - it hits different.\r\n' + '\r\n' + 'MY PROFILE:\r\n' + ' Click the My Profile icon to customize\r\n' + ' your screen name info, set your A/S/L,\r\n' + ' and even generate a profile picture.\r\n' + '\r\n' + 'MY COMPUTER:\r\n' + ' Browse your hard drive, check system\r\n' + ' info, and explore your files.\r\n' + '\r\n' + 'NOTEPAD:\r\n' + ' A simple text editor. Great for taking\r\n' + ' notes, keeping track of URLs, or\r\n' + ' writing down chat room conversations.\r\n' + ' (Tip: Try typing things, such as codes you discover, and saving!)\r\n' + '\r\n' + '----------------------------------------\r\n' + ' KEYBOARD SHORTCUTS\r\n' + '----------------------------------------\r\n' + '\r\n' + ' P .............. Open Case Files\r\n' + '\r\n' + '----------------------------------------\r\n' + ' TIPS & TRICKS\r\n' + '----------------------------------------\r\n' + '\r\n' + '- Right-click on usernames in chat to\r\n' + ' see options like Send IM, Add Buddy,\r\n' + ' or Mention in Chat.\r\n' + '\r\n' + '- Keep an eye on the Y2K countdown on\r\n' + ' the AOL home page. What happens when\r\n' + ' it hits zero? We honestly don\'t know.\r\n' + '\r\n' + '- Check your email often. You never\r\n' + ' know who might write to you.\r\n' + '\r\n' + '- Explore EVERYTHING. Click around.\r\n' + ' Not everything is what it seems.\r\n' + '\r\n' + '----------------------------------------\r\n' + ' KNOWN ISSUES\r\n' + '----------------------------------------\r\n' + '\r\n' + '- Some users have reported strange\r\n' + ' occurrences during late-night\r\n' + ' sessions. Chat messages appearing\r\n' + ' from screen names that don\'t seem\r\n' + ' to exist. Emails from unknown\r\n' + ' senders. Files that weren\'t there\r\n' + ' before. We are looking into this.\r\n' + '\r\n' + '- If the Minesweeper counter starts\r\n' + ' displaying unusual numbers, this is\r\n' + ' a known graphical glitch. Probably.\r\n' + '\r\n' + '- The Recycle Bin may not always be\r\n' + ' empty. We are not sure why.\r\n' + '\r\n' + '- Please do not attempt to contact\r\n' + ' admin@gateway99.bbs. This address\r\n' + ' is not in service.\r\n' + '\r\n' + '========================================\r\n' + ' Have fun and Happy New Year!\r\n' + ' - The Gateway \'99 Team\r\n' + '========================================\r\n'; function renderReadmeWindow(state, isActive, position, zIndex) { var titleBg = isActive ? 'from-[#000080] to-[#1084d0]' : 'from-[#808080] to-[#a0a0a0]'; var pos = position || { x: 200, y: 60 }; // Escape HTML entities for safe rendering inside a pre tag var safeText = README_TEXT.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"'); return '

' + '

📄How-to-Play.txt - Notepad

' + '

' + '' + '' + '

' + '

' + 'File' + 'Edit' + 'Format' + 'Help' + '

' + '

' + safeText + '

' + '

'; } // ============================================ // NOTEPAD WINDOW // ============================================ function renderNotepadWindow(state, isActive, position, zIndex) { // Preserve textarea content from DOM before re-render to prevent rubberbanding var liveContent = null; var notepadFocused = false; var notepadSelStart = 0; var notepadSelEnd = 0; if (typeof document !== 'undefined') { var ta = document.getElementById('notepadTextarea'); if (ta) { liveContent = ta.value; if (document.activeElement === ta) { notepadFocused = true; notepadSelStart = ta.selectionStart || 0; notepadSelEnd = ta.selectionEnd || 0; } } } // Use DOM value if available (user is actively editing), otherwise fall back to server state var displayContent = (liveContent !== null) ? liveContent : (state.notepadContent || ''); const titleBg = isActive ? 'from-[#000080] to-[#1084d0]' : 'from-[#808080] to-[#a0a0a0]'; const pos = position || { x: 180, y: 80 }; const showFileMenu = state.notepadFileMenuOpen || false; // File dropdown menu (appears when File is clicked) const fileMenuHtml = showFileMenu ? ( '

' + '' + '

' ) : ''; // Restore focus and cursor position after re-render if (notepadFocused && typeof window !== 'undefined') { requestAnimationFrame(function() { var ta = document.getElementById('notepadTextarea'); if (ta) { ta.focus(); try { ta.setSelectionRange(notepadSelStart, notepadSelEnd); } catch(e) {} } }); } return '

' + // Title bar - draggable '

' + '

📝Untitled - Notepad

' + '

' + '' + '' + '

' + '

' + '' + 'File' + fileMenuHtml + '' + 'Edit' + 'Format' + 'Help' + '

' + '' + '

'; } // ============================================ // RECYCLE BIN WINDOW // ============================================ function renderRecycleBinWindow(state, isActive, position, zIndex) { const titleBg = isActive ? 'from-[#000080] to-[#1084d0]' : 'from-[#808080] to-[#a0a0a0]'; const pos = position || { x: 280, y: 100 }; return '

' + // Title bar '

' + '

🗑️Recycle Bin

' + '

' + '' + '' + '

' + '

FileEditViewHelp

' + // Content '

' + '

🗑️

' + '

The Recycle Bin is empty.

' + '

Deleted items will appear here.

' + '

0 object(s)

' + '

'; } // ============================================ // MY COMPUTER WINDOW // ============================================ function renderMyComputerWindow(state, isActive, position, zIndex) { const titleBg = isActive ? 'from-[#000080] to-[#1084d0]' : 'from-[#808080] to-[#a0a0a0]'; const pos = position || { x: 320, y: 80 }; const currentFolder = state.myComputerFolder || 'root'; // Render content based on which folder we're viewing let contentHtml = ''; let statusText = ''; let titleText = 'My Computer'; const folderData = MY_COMPUTER_FOLDERS[currentFolder] || MY_COMPUTER_FOLDERS._default; contentHtml = folderData.html; // Inject dynamic files based on progression flags const dynamicHtml = getDynamicFilesHtml(currentFolder, (state.progression || {})); if (dynamicHtml) { // Inject dynamic files into the grid (before closing of grid container) const gridEndIdx = contentHtml.lastIndexOf(''); if (gridEndIdx > 0) { contentHtml = contentHtml.substring(0, gridEndIdx) + dynamicHtml + contentHtml.substring(gridEndIdx); } } statusText = folderData.status; titleText = folderData.title || currentFolder; // Back button (show if not at root) const backButton = currentFolder !== 'root' ? '' : ''; return '

' + // Title bar '

' + '

💾' + titleText + '

' + '

' + '' + '' + '

' + '

FileEditViewHelp

' + backButton + '

' + // Content '

' + contentHtml + '

' + '

' + statusText + '

' + '

'; } // ============================================ // MY PROFILE WINDOW (Skill Tracking) // ============================================ function renderProfileWindow(state, isActive, position, zIndex) { const titleBg = isActive ? 'from-[#000080] to-[#1084d0]' : 'from-[#808080] to-[#a0a0a0]'; const pos = position || { x: 200, y: 60 }; const screenName = state.screenName || 'NewUser99'; const profile = state.profile || {}; const skills = state.skills || {}; const editingProfile = state.editingProfile || false; const generatingAvatar = state.generatingAvatar || false; // CRITICAL: Preserve input values from DOM before re-render destroys them // This pattern matches the IM window EXACTLY - which works well let currentAge = ''; let currentSex = ''; let currentLocation = ''; let currentAbout = ''; let currentAvatarPrompt = ''; let currentScreenName = ''; let focusedInputId = null; let hadSelection = false; let selStart = 0; let selEnd = 0; let selDir = 'none'; if (typeof document !== 'undefined') { const ageInput = document.getElementById('profileAge'); const sexSelect = document.getElementById('profileSex'); const locationInput = document.getElementById('profileLocation'); const aboutTextarea = document.getElementById('profileAbout'); const promptInput = document.getElementById('avatarPrompt'); const screenNameInput = document.getElementById('profileScreenName'); // Grab values from DOM (source of truth while typing) currentAge = ageInput?.value ?? profile.age ?? ''; currentSex = sexSelect?.value ?? profile.sex ?? ''; currentLocation = locationInput?.value ?? profile.location ?? ''; currentAbout = aboutTextarea?.value ?? profile.aboutMe ?? ''; currentAvatarPrompt = promptInput?.value ?? profile.avatarPrompt ?? ''; currentScreenName = screenNameInput?.value ?? screenName; // Track which input was focused AND its selection state if (document.activeElement) { const activeId = document.activeElement.id; if (['profileAge', 'profileSex', 'profileLocation', 'profileAbout', 'avatarPrompt', 'profileScreenName'].includes(activeId)) { focusedInputId = activeId; // Check if there's an actual selection (not just a cursor) if (document.activeElement.selectionStart !== undefined) { selStart = document.activeElement.selectionStart; selEnd = document.activeElement.selectionEnd; selDir = document.activeElement.selectionDirection || 'none'; hadSelection = (selStart !== selEnd); } } } } else { // Server-side or initial render - use state values currentAge = profile.age || ''; currentSex = profile.sex || ''; currentLocation = profile.location || ''; currentAbout = profile.aboutMe || ''; currentAvatarPrompt = profile.avatarPrompt || ''; currentScreenName = screenName; } // Restore focus after DOM update if (focusedInputId && typeof window !== 'undefined') { requestAnimationFrame(() => { const el = document.getElementById(focusedInputId); if (el) { el.focus(); if (el.setSelectionRange) { if (hadSelection) { // User had text highlighted - restore their exact selection try { el.setSelectionRange(selStart, selEnd, selDir); } catch (e) { // Fallback if direction fails el.setSelectionRange(selStart, selEnd); } } else { // No selection, just typing - move cursor to end (simple and reliable) const len = el.value?.length || 0; el.setSelectionRange(len, len); } } } }); } // Skill definitions with display info const skillDefs = [ { id: 'chatNavigator', name: 'Chatroom Navigator', icon: '💬', tiers: ['New Member', 'Regular', 'Room Regular', 'Guide', 'Wizard'], thresholds: [0, 500, 2000, 6000, 15000] }, { id: 'digitalCorrespondent', name: 'Digital Correspondent', icon: '📧', tiers: ['Stamp Licker', 'Postal Worker', 'Letter Carrier', 'Postmaster', 'Dead Letter Expert'], thresholds: [0, 400, 1600, 4800, 12000] }, { id: 'webExplorer', name: 'Web Explorer', icon: '🌐', tiers: ['Modem Squealer', 'Surfer', 'Pathfinder', 'Pioneer', 'Net Legend'], thresholds: [0, 600, 2400, 7200, 18000] }, { id: 'digitalArchivist', name: 'Digital Archivist', icon: '📁', tiers: ['Pack Rat', 'Filer', 'Curator', 'Archivist', 'Librarian'], thresholds: [0, 450, 1800, 5400, 13500] }, { id: 'cyberGamer', name: 'Cyber Gamer', icon: '🎮', tiers: ['Button Masher', 'Player', 'Contender', 'Champion', 'Game God'], thresholds: [0, 500, 2000, 6000, 15000] }, { id: 'paranormalInvestigator', name: '???', icon: '❓', tiers: ['Curious', 'Seeker', 'Believer', 'Initiate', 'Illuminated'], thresholds: [0, 300, 1200, 3600, 9000], hidden: true } ]; // Render each skill row const renderSkillRow = (def) => { const skill = skills[def.id]; const discovered = skill && skill.discovered; if (!discovered) { // Undiscovered skill - show mystery return `

❓ Unknown Interest

Keep exploring to discover!

`; } // Discovered skill - show progress const tier = skill.tier || 0; const xp = skill.xp || 0; const tierName = def.tiers[tier] || def.tiers[0]; const currentThreshold = def.thresholds[tier] || 0; const nextThreshold = def.thresholds[tier + 1] || def.thresholds[def.thresholds.length - 1]; const xpInTier = xp - currentThreshold; const xpNeeded = nextThreshold - currentThreshold; const progress = Math.min(100, (xpInTier / xpNeeded) * 100); const isMaxTier = tier >= def.tiers.length - 1; const stars = '⭐'.repeat(tier + 1); // Special styling for the hidden paranormal skill const bgColor = def.hidden ? 'bg-[#1a1a2e]' : 'bg-white'; const textColor = def.hidden ? 'text-purple-300' : 'text-[#000080]'; const borderColor = def.hidden ? 'border-purple-500' : 'border-[#b0d4f1]'; return `

${def.icon} ${def.hidden && tier === 0 ? '???' : def.name} ${stars}

Rank: ${tierName}

${!isMaxTier ? `

${xpInTier} / ${xpNeeded} Next: ${def.tiers[tier + 1]}

` : `

✨ MAX RANK ACHIEVED ✨

`; }; // Profile editing fields - EXACTLY like the IM window pattern: // - autocomplete="off" to prevent browser interference // - spellcheck="false" to prevent red squiggles and interference // - NO oninput handlers (no real-time state sync - that causes re-render storms) // - Values grabbed from DOM at render time, only saved on Save button click const profileContent = editingProfile ? `

Screen Name:

This is how other users see you on AOL (3-24 characters)

A/S/L:

About Me:

Profile Picture:

Describe yourself and we'll generate an avatar!

${generatingAvatar ? '

⏳ Your avatar is being created — this can take up to 30 seconds. It will appear automatically when ready. Hit Save after it shows up!

' : (profile.avatarUrl ? '

✅ Avatar generated! Remember to Save your profile.

' : '')}

` : `

${profile.avatarUrl ? `

` : '👤'}

${screenName}

Member Since: December 1999

${profile.age || profile.sex || profile.location ? `

A/S/L: ${profile.age || '?'} / ${profile.sex || '?'} / ${profile.location || '?'}

` : ''}

${profile.aboutMe ? `

About Me:

${profile.aboutMe.replace(/

` : ''} `; return `

👤 My Profile - ${screenName}

${profileContent}

✨ Your Interests & Expertise ✨

${skillDefs.map(def => renderSkillRow(def)).join('')}

`; } // ============================================ // SKILL DISCOVERY POPUP // ============================================ function renderSkillDiscoveryPopup(state) { const popup = state.skillDiscoveryPopup; if (!popup || !popup.visible) return ''; const isHidden = popup.skillId === 'paranormalInvestigator'; // Win98 styling per type const titleBg = isHidden ? 'from-[#2d1050] to-[#6030a0]' : 'from-[#000080] to-[#1084d0]'; const bodyBg = isHidden ? '#1a1a2e' : '#d4d0c8'; const subtitleColor = isHidden ? '#d8c0ff' : '#000080'; const textCol = isHidden ? '#c8b0e8' : '#000000'; const titleLabel = isHidden ? '???' : 'New Interest Discovered'; const icon = isHidden ? '❓' : '✨'; const skillLabel = isHidden ? '???' : popup.skillName; const msg = isHidden ? 'Something noticed you noticing it.' : popup.message; let btnHtml = ''; if (isHidden) { btnHtml = ``; } else { btnHtml = ``; btnHtml += ``; } return `

${icon} ${titleLabel}

${icon}

${skillLabel}

${msg}

${btnHtml}

`; } // ============================================ // INSTANT MESSAGE WINDOW (Tabbed - AIM 5.0) // ============================================ function renderTabbedIMWindow(openIMs, state, world) { if (openIMs.length === 0) return ''; if (state.imWindowMinimized) return ''; var activeTab = state.activeIMTab || (openIMs.length > 0 ? openIMs[0].recipientId : null); var unreadTabs = state.imUnreadTabs || {}; var imTabScroll = state.imTabScroll || 0; var pos = state.imWindowPosition || { x: 250, y: 100 }; var imW = state.imWindowWidth || 400; var imH = state.imWindowHeight || 450; // Find active IM conversation var activeIM = openIMs.find(function(im) { return im.recipientId === activeTab; }); if (!activeIM && openIMs.length > 0) { activeIM = openIMs[0]; activeTab = activeIM.recipientId; } if (!activeIM) return ''; var recipientId = activeIM.recipientId; // For player-to-player IMs, merge shared messages var messages = activeIM.messages || []; if (activeIM.isPlayer && world) { var managers = world.query({ tags: ['chat-manager'] }); if (managers.length > 0) { var manager = world.getObject(managers[0].id); if (manager && manager.state && manager.state.playerIMs) { var participants = [_localPlayerId, recipientId].sort(); var convId = participants.join(':'); var sharedConv = manager.state.playerIMs[convId]; if (sharedConv && sharedConv.messages) { messages = sharedConv.messages; } } } } // CRITICAL: Grab the current input value AND focus state from the DOM before we destroy it var currentInputValue = ''; var hadFocus = false; if (typeof document !== 'undefined') { var existingInput = document.getElementById('imInput_' + recipientId); if (existingInput) { currentInputValue = existingInput.value || ''; hadFocus = document.activeElement === existingInput; } } // Schedule focus restoration after DOM update (cursor at end) if (hadFocus && typeof window !== 'undefined') { requestAnimationFrame(function() { var input = document.getElementById('imInput_' + recipientId); if (input) { input.focus(); var len = input.value.length; input.setSelectionRange(len, len); } }); } // Render message history var messagesHtml = messages.length === 0 ? '

Start a conversation...

' : messages.map(function(msg) { var isLocalPlayer = msg.from === _localPlayerId; var nameColor = isLocalPlayer ? 'text-blue-600' : 'text-[#cc0000]'; return '

' + '' + resolveName(msg.from) + ': ' + '' + msg.text + '' + '

'; }).join(''); // Build tab bar var maxVisibleTabs = 5; var showArrows = openIMs.length > maxVisibleTabs; var visibleStart = Math.max(0, Math.min(imTabScroll, openIMs.length - maxVisibleTabs)); var visibleEnd = showArrows ? Math.min(visibleStart + maxVisibleTabs, openIMs.length) : openIMs.length; var tabsHtml = ''; for (var ti = visibleStart; ti < visibleEnd; ti++) { var tabIM = openIMs[ti]; var isActive = tabIM.recipientId === activeTab; var isUnread = unreadTabs[tabIM.recipientId]; var tabBg = isActive ? '#e0e0e0' : '#c0c0c0'; var tabWeight = isActive ? 'font-weight:bold;' : ''; var tabClass = isUnread && !isActive ? ' im-tab-unread' : ''; var tabBorder = isActive ? 'border-bottom:2px solid #e0e0e0;' : 'border-bottom:2px solid #808080;'; tabsHtml += '

' + '' + resolveName(tabIM.recipientId) + '' + '✕' + '

'; } var arrowsHtml = ''; if (showArrows) { arrowsHtml = '

' + '' + '' + '

'; } return `

🏃

${resolveName(recipientId)} - Instant Message

${tabsHtml} ${arrowsHtml}

To: ${resolveName(recipientId)} Online

${messagesHtml}

`; } // ============================================ // CODEX - Project Documentation (Press P) // ============================================ function renderCodex(state) { const codexPage = state.codexPage || 'overview'; // Tab definitions const tabs = [ { id: 'launch', label: '🚀 LAUNCH' }, { id: 'overview', label: '📋 Overview' }, { id: 'roadmap', label: '🗺️ Roadmap' }, { id: 'bots', label: '🤖 Bot Behavior' }, { id: 'skills', label: '📊 Skills' }, { id: 'y2k', label: '⚠️ Y2K System' }, { id: 'chat', label: '💬 Chat & NPCs' }, { id: 'content', label: '🌐 Content System' }, { id: 'email', label: '📧 Email' }, { id: 'arg', label: '🔮 ARG/Mystery' }, { id: 'tech', label: '🔧 Technical' }, { id: 'arch', label: '🏗️ Architecture' }, ]; const tabsHtml = tabs.map(tab => { const isActive = codexPage === tab.id; const activeClass = isActive ? 'bg-white border-b-white font-bold' : 'bg-[#d0d0d0] hover:bg-[#e0e0e0]'; return ''; }).join(''); let contentHtml = ''; switch(codexPage) { case 'launch': contentHtml = CODEX_TABS.launch || ''; break; case 'roadmap': contentHtml = CODEX_TABS.roadmap || ''; break; case 'bots': contentHtml = CODEX_TABS.bots || ''; break; case 'skills': contentHtml = CODEX_TABS.skills || ''; break; case 'y2k': contentHtml = CODEX_TABS.y2k || ''; break; case 'chat': contentHtml = CODEX_TABS.chat || ''; break; case 'content': contentHtml = CODEX_TABS.content || ''; break; case 'email': contentHtml = CODEX_TABS.email || ''; break; case 'arg': contentHtml = CODEX_TABS.arg || ''; break; case 'tech': contentHtml = CODEX_TABS.tech || ''; break; case 'arch': contentHtml = CODEX_TABS.arch || ''; break; default: contentHtml = CODEX_TABS.overview || ''; break; } return `

📋 Gateway '99 - Project Codex

${tabsHtml}

          ${contentHtml}
        

Press Ctrl+Shift+P to close | Use tabs to navigate

`; } // renderCodexOverview — EXTRACTED to lib/data-codex.js // renderCodexRoadmap — EXTRACTED to lib/data-codex.js // renderCodexBots — EXTRACTED to lib/data-codex.js // renderCodexSkills — EXTRACTED to lib/data-codex.js // renderCodexY2K — EXTRACTED to lib/data-codex.js // renderCodexChat — EXTRACTED to lib/data-codex.js // renderCodexEmail — EXTRACTED to lib/data-codex.js // renderCodexContent — EXTRACTED to lib/data-codex.js function renderCodexAchievements() { return `

🏆 ACHIEVEMENTS & CD COLLECTION

THE CD COLLECTION

Players collect virtual CDs representing real albums, movies, and games from before 1999. CDs are unlocked by completing achievements - hidden goals that reward exploration and engagement. Your collection lives in "My Files" as a visual trophy case.

🎯 ACHIEVEMENT EXAMPLES

"A/S/L?" - Answer an a/s/l question in chat
Reward: Social Butterfly CD (compilation album)

"First Connection" - Successfully dial up for the first time
Reward: "You've Got Mail" Movie CD (1998)

"Busy Signal Blues" - Get disconnected 5 times
Reward: "No Strings Attached" CD - NSYNC

"Night Owl" - Be online when Y2K countdown hits zero
Reward: "1999" CD - Prince

"Chain Mail Champion" - Forward an email to 5 people
Reward: "Millennium" CD - Backstreet Boys

"Minesweeper Master" - Win a game of Minesweeper
Reward: "Windows 98 Plus!" CD

"The Matrix" - Find a hidden ARG clue
Reward: "The Matrix" Soundtrack CD

💿 CD CATEGORIES

• Music Albums: Real albums released before 2000
• Movie Soundtracks: Film scores and compilations
• Video Games: PC games that came on CD-ROM
• Software: Actual programs like Encarta, Oregon Trail
• AOL Discs: Those free trial CDs everyone got in the mail!

📁 MY FILES - COLLECTION VIEW

Your CD collection is displayed in "My Files":

• Visual grid of CD covers you've collected
• Click a CD to see details and how you earned it
• Locked CDs show silhouettes with hints
• Collection progress: "12 of 50 CDs collected"
• Sort by: Date Earned, Category, Rarity

💡 HIDDEN ACHIEVEMENTS: Most achievements are secret until unlocked. Players discover them through natural exploration. Some are easy, some require dedication, and a few are extremely rare. The mystery of "what else is there?" drives engagement.

`; } // renderCodexARG — EXTRACTED to lib/data-codex.js // renderCodexTech — EXTRACTED to lib/data-codex.js // ============================================ // BOOT SCREEN - "Click to Connect" // ============================================ function renderBootScreen(state) { return `

AOL

AMERICA ONLINE

Version 5.0

GATEWAY

GATEWAY '99

A journey back to 1999

`; } // ============================================ // CONNECTING SCREEN - Authentic AOL 7-step dial-up // ============================================ function renderConnectingScreen(state) { const progress = state.connectionProgress || 0; const step = getConnectionStep(progress); const stepText = getConnectionStepText(step, progress); // Determine which icons show in each box based on step // Box 1 (left): Always shows running man // Box 2 (middle): Empty -> Loading -> Running man with lines // Box 3 (right): AOL logo -> eventually people celebrating const box1Content = renderRunningMan(); const box2Content = step < 3 ? renderLoadingIndicator(progress) : renderRunningManWithLines(); const box3Content = step < 7 ? renderAOLTriangle() : renderCelebrationPeople(); return `

AMERICA

Online.

${box1Content}

${box2Content}

${box3Content}

${stepText}

GATEWAY

`; } // Get current step (1-7) based on progress percentage function getConnectionStep(progress) { // Step 2 (Dialing) takes the longest - about 54% of the time // Steps 3-7 go quickly after that if (progress < 54) return 2; // 0-54%: Step 2 - Dialing if (progress < 62) return 3; // 54-62%: Step 3 - Connected if (progress < 69) return 4; // 62-69%: Step 4 - (quick) if (progress < 77) return 5; // 69-77%: Step 5 - Talking to network if (progress < 85) return 6; // 77-85%: Step 6 - (quick) return 7; // 85-100%: Step 7 - Checking password } // Get step text for display function getConnectionStepText(step, progress) { switch(step) { case 2: return 'Step 2: Dialing 732-984-0003...'; case 3: return 'Step 3: Connected at 52000 bps...'; case 4: return 'Step 4: Requesting network attention...'; case 5: return 'Step 5: Talking to network...'; case 6: return 'Step 6: Starting AOL services...'; case 7: return 'Step 7: Checking password...'; default: return 'Step 1: Initializing...'; } } // Running man SVG (left box - always shown) function renderRunningMan() { return ` `; } // Running man with motion lines SVG (middle box - after connecting) function renderRunningManWithLines() { return ` `; } // Loading indicator (middle box - during dialing) function renderLoadingIndicator(progress) { // Animate based on progress - show pause icon style const opacity = (progress % 20) < 10 ? '1' : '0.5'; return `

`; } // AOL Triangle with circle (right box - during connection) function renderAOLTriangle() { return ` `; } // Celebration people (right box - final step) function renderCelebrationPeople() { return ` `; } function getConnectionStatus(progress) { if (progress < 15) return 'Initializing modem...'; if (progress < 30) return 'Dialing 1-800-827-6364...'; if (progress < 45) return 'Modem handshaking...'; if (progress < 60) return 'Authenticating...'; if (progress < 75) return 'Loading your settings...'; if (progress < 90) return 'Checking for new mail...'; return 'Welcome to AOL!'; } // ============================================ // CONNECTION FAILED - Busy signal // ============================================ function renderConnectionFailed(state) { return `

AMERICA

Online.

📞❌

Busy Signal Detected

All lines are currently busy. Please try again.

GATEWAY

`; } // ============================================ // AOL WINDOW (renders on desktop) // ============================================ function renderAOLWindow(state, localPlayer, isActive, position, zIndex, world) { const screenName = state.screenName || 'NewUser99'; const unreadMail = (state.inbox || []).filter(m => !m.read).length; const titleBg = isActive ? 'from-[#000080] to-[#1084d0]' : 'from-[#808080] to-[#a0a0a0]'; const isMaximized = state.aolMaximized || false; // Preserve address bar value across re-renders // Show current website URL when browsing, otherwise preserve typed value let addressBarValue = ''; if (state.currentView === 'internet' && state.currentWebsite) { addressBarValue = 'http://' + state.currentWebsite + (state.currentWebPage && state.currentWebPage !== 'index' ? '/' + state.currentWebPage : ''); } else if (typeof document !== 'undefined') { const existingInput = document.getElementById('aolAddressBar'); if (existingInput) { addressBarValue = existingInput.value || ''; } } // Window positioning and sizing // When maximized: fill screen except taskbar (bottom-8 = 32px for taskbar) // When normal: centered with breathing room, max 1400px wide const windowClasses = isMaximized ? 'absolute top-0 bottom-8 left-0 right-0' : 'absolute top-4 bottom-12 left-8 right-8'; const windowStyle = isMaximized ? `z-index: ${zIndex};` : `z-index: ${zIndex}; max-width: 1400px; margin: 0 auto;`; // Maximize/restore button icon: □ when normal (click to maximize), ❐ when maximized (click to restore) const maxButtonIcon = isMaximized ? '❐' : '□'; // AOL window - wider but still centered with breathing room return `

America Online

File Edit Window Sign Off Help

🔖

${renderAOLContent(state, screenName, world)}

Connected at 56.6 Kbps ${unreadMail > 0 ? '📧 ' + unreadMail + ' new mail!' : '📭 No new mail'} December 31, 1999

`; } function renderAOLContent(state, screenName, world) { const view = state.currentView || 'home'; switch(view) { case 'mail': return uiEmail.renderMailView(state, screenName); case 'chat': return renderChatView(state, world); case 'compose': return uiEmail.renderComposeView(state, screenName); case 'mailcenter': return renderMailCenterView(state); case 'print': return renderPrintView(); case 'myfiles': return renderMyFilesView(state); case 'myaol': return renderMyAOLView(state, screenName); case 'article': return renderArticleView(state); case 'favorites': return renderFavoritesView(state); case 'internet': return renderInternetView(state); case 'channels': return renderChannelsView(state); case 'channel': return renderChannelView(state); case 'pictures': return renderPicturesView(state); case 'calendar': return renderCalendarView(state); default: return renderHomeView(state, screenName, world); } } function renderHomeView(state, screenName, world) { // Calculate Y2K countdown from shared chat-manager state let y2kSeconds = state.y2kTimer || 7200; // fallback to player state if (world) { const managers = world.query({ tags: ['chat-manager'] }); if (managers.length > 0) { const manager = world.getObject(managers[0].id); if (manager && manager.state && typeof manager.state.y2kTimer === 'number') { y2kSeconds = manager.state.y2kTimer; } } } const days = Math.floor(y2kSeconds / 86400); const hours = Math.floor((y2kSeconds % 86400) / 3600); const minutes = Math.floor((y2kSeconds % 3600) / 60); const seconds = Math.floor(y2kSeconds % 60); const countdownStr = String(days).padStart(2, '0') + ':' + String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0'); // Preserve search input value across re-renders let searchValue = ''; if (typeof document !== 'undefined') { const existingInput = document.getElementById('aolSearchInput'); if (existingInput) { searchValue = existingInput.value || ''; } } return `

AMERICA

Online

📬 You've Got Mail

📷 You've Got Pictures

📅 My Calendar

💬 Chat

Welcome

Computing

Entertainment

Families

Games

Health

Influence

Interests

International

Lifestyles

Local

News

Personal Finance

Shopping

Sports

Travel

Welcome, ${screenName}!

Today on AOL

Friday, December 31, 1999

4,721 members online now

🎊 Y2K: The Final Hours

As the world prepares for the stroke of midnight, experts are reassuring the public that critical systems have been tested and are Y2K compliant. But some aren't so sure... Will your computer survive? Will the planes stay in the sky? Will your bank account still exist tomorrow?

Read the full story →

⚠️ Y2K COUNTDOWN ⚠️

${countdownStr}

DAYS : HOURS : MINS : SECS until the new millennium!

📰 More Features For You:

• Y2K Bug: What You Need To Know

• Best Movies of 1999

• Napster: The Music Revolution

• Pokemon Takes Over America

• NFL Playoff Picture Heating Up

• Tech Stocks Close Out Record Year

🎬 Entertainment

#1 Movie of 1999

The Matrix redefined action movies forever

TV Sensation

Who Wants to Be a Millionaire sweeps ratings

Pop Music Explodes

Boy bands and pop princesses dominate charts

💻 Deal of the Day!

Gateway PC - Pentium III 500MHz, 128MB RAM, 13GB HD, 17" Monitor

$1,299.99

Free shipping in cow-spotted box!

🐱 Pet of the Day

Hi, I'm Whiskers! I'm an 8-week-old tabby from San Diego looking for a loving home!

Adopt a pet near you →

🎮 Gaming

Pokemon Stadium Hits N64!

Finally battle your Pokemon in full 3D! Transfer your team from Red, Blue, or Yellow using the Transfer Pak. Plus: Sega Dreamcast sales surge, EverQuest players hit 200,000, and why Half-Life is the FPS of the year.

More Gaming News →

🌐 Around the Web

💾

Napster Downloads Soar

College students downloading MP3s at record rates. Music industry concerned.

🛒

Amazon.com Holiday Rush

Online shopping sets records. Is the future of retail on the internet?

🔍

New Search Engine: Google

Stanford students launch cleaner alternative to AltaVista and Yahoo.

📧

Chain Email Warning

Don't fall for "Bill Gates will pay you $1000" hoax emails!

📊 AOL Quick Poll

Are you worried about Y2K computer problems?

Yes, I've stockpiled supplies!

A little nervous, but prepared

Not worried at all

What's Y2K?

12,847 votes so far

🔮

Your Millennium Horoscope

What do the stars hold for you in 2000? Enter the new millennium with cosmic guidance!

Read your horoscope →

🔍 Search

📰 Top News

📈 Nasdaq Closes at Record High

🌍 World Prepares for Y2K

🇺🇸 Clinton's Final Year Begins

🏈 NFL Playoffs This Weekend

🌤️ My Weather

☀️

72°F

Partly Cloudy

San Diego, CA

Change Location

💰 Markets

DJIA11,497 ▲

NASDAQ4,069 ▲

S&P 5001,469 ▲

AMZN$76.13

YHOO$432.69

AOL$75.88

👥 My Buddies

Buddies (${(state.buddyList || []).length})

${(state.buddyList || []).length === 0 ? '

No buddies yet! Visit a chat room to meet people.

' : (state.buddyList || []).map(function(buddyId) { var buddyName = resolveName(buddyId); return ''; }).join('') }

My Places

Set My Places

AOL Help

Parental Controls

Go To Web

`; } // ============================================ // UNDELIVERED EMAILS - Words Puzzle Data // Subjects spell: THE SECRET CODE IS 559817 // ============================================ const UNDELIVERED_EMAILS = [ { id: 'und-1', from: 'system@aol.com', subject: 'THE', date: '01/15/99', read: false, body: 'RETURNED MAIL: Message undeliverable\n\nThe following message to admin@gateway99.bbs could not be delivered.\n\nServer returned: 550 User unknown\nAttempt: 1 of 3\nStatus: PERMANENT FAILURE\n\n--- Original Message ---\n[CONTENT ENCRYPTED - CLEARANCE LEVEL 4 REQUIRED]\n\nThis is an automated notification from the AOL Mail Delivery System.' }, { id: 'und-2', from: 'system@aol.com', subject: 'SECRET', date: '02/03/99', read: false, body: 'RETURNED MAIL: Message undeliverable\n\nThe following message to admin@gateway99.bbs could not be delivered.\n\nServer returned: 550 User unknown\nAttempt: 2 of 3\nStatus: PERMANENT FAILURE\n\n--- Original Message ---\n[CONTENT ENCRYPTED - CLEARANCE LEVEL 4 REQUIRED]\n\nThis is an automated notification from the AOL Mail Delivery System.' }, { id: 'und-3', from: 'system@aol.com', subject: 'CODE', date: '02/28/99', read: false, body: 'RETURNED MAIL: Message undeliverable\n\nThe following message to admin@gateway99.bbs could not be delivered.\n\nServer returned: 550 User unknown\nAttempt: 3 of 3\nStatus: PERMANENT FAILURE\n\n--- Original Message ---\n[CONTENT ENCRYPTED - CLEARANCE LEVEL 4 REQUIRED]\n\nThis is an automated notification from the AOL Mail Delivery System.' }, { id: 'und-4', from: 'system@aol.com', subject: 'IS', date: '03/15/99', read: false, body: 'RETURNED MAIL: Message undeliverable\n\nThe following message to admin@gateway99.bbs could not be delivered.\n\nServer returned: 550 User unknown\nAttempt: 1 of 1\nStatus: REJECTED\n\n--- Original Message ---\n[CONTENT ENCRYPTED - CLEARANCE LEVEL 4 REQUIRED]\n\nThis is an automated notification from the AOL Mail Delivery System.' }, { id: 'und-5', from: 'system@aol.com', subject: '559817', date: '04/01/99', read: false, body: 'RETURNED MAIL: Message undeliverable\n\nThe following message to admin@gateway99.bbs could not be delivered.\n\nServer returned: 550 User unknown\nAttempt: 1 of 1\nStatus: PERMANENT FAILURE\n\n--- Original Message ---\n[CONTENT ENCRYPTED - CLEARANCE LEVEL 4 REQUIRED]\n\nThis is an automated notification from the AOL Mail Delivery System.\n\n[NOTE: This message has been flagged by the GATEWAY MONITORING SYSTEM]\n[CLASSIFICATION: ANOMALOUS]' }, ]; function renderMailView(state) { const inbox = state.inbox || []; const currentFolder = state.currentMailFolder || 'inbox'; const selectedEmail = state.selectedEmail; const selectedUndeliveredEmail = state.selectedUndeliveredEmail; // Handle both string and number id comparison const selectedMail = selectedEmail !== null && selectedEmail !== undefined ? inbox.find(m => m.id === selectedEmail || m.id === Number(selectedEmail) || String(m.id) === String(selectedEmail)) : null; // Undelivered folder selected email const selectedUndMail = selectedUndeliveredEmail ? UNDELIVERED_EMAILS.find(m => m.id === selectedUndeliveredEmail) : null; // Determine active tab styles const isInbox = currentFolder === 'inbox'; const isUndelivered = currentFolder === 'undelivered'; const inboxTabClass = isInbox ? 'font-bold bg-white border border-gray-400 border-b-0 -mb-px' : 'text-gray-600 hover:underline'; // CSS keyframes for the pulsing [?] tab - injected inline via '; // Undelivered tab — only visible after 5+ min playtime (hint email mentions it) var showUndelivered = isUndelivered || (state.hintPlaytime && state.hintPlaytime >= 300); const undTabHtml = showUndelivered ? ('') : ''; // Render content based on folder let contentHtml = ''; let actionButtonsHtml = ''; if (isUndelivered) { contentHtml = selectedUndMail ? renderUndeliveredEmailReader(selectedUndMail) : renderUndeliveredEmailList(); actionButtonsHtml = '

' + '' + '

'; } else { contentHtml = selectedMail ? renderEmailReader(selectedMail) : renderEmailList(inbox); actionButtonsHtml = '

' + '' + '' + '' + '

'; } return pulseStyle + `

${isUndelivered ? '⚠️' : '📬'} ${isUndelivered ? 'Undelivered Mail' : "You've Got Mail!"}

${undTabHtml}

${contentHtml}

${actionButtonsHtml}

`; } function renderUndeliveredEmailList() { return UNDELIVERED_EMAILS.map(function(email) { return '

' + '⚠️' + '' + email.from + '' + '' + email.subject + '' + '' + email.date + '' + '

'; }).join(''); } function renderUndeliveredEmailReader(email) { return '

' +
    '' +
    '' +
      'From: ' + email.from + '
' +
      'To: admin@gateway99.bbs
' +
      'Subject: ' + email.subject + '
' +
      'Date: ' + email.date + '
' +
      '' +
      '' + email.body + '
' +
    '
' +
  '

'; } function renderEmailList(inbox) { return inbox.map(email => { const readClass = email.read ? 'text-gray-500' : 'font-bold text-black'; const icon = email.read ? '📭' : '📬'; return '

' + '' + icon + '' + '' + email.from + '' + '' + email.subject + '' + '' + email.date + '' + '

'; }).join(''); } function renderEmailReader(email) { return '

' + '' + '

' + '

From: ' + email.from + '

' + '

Subject: ' + email.subject + '

' + '

Date: ' + email.date + '

' + '

' + email.body + '

' + '

'; } // ============================================ // NEW VIEWS - Surface Pass (Feb 3, 2026) // ============================================ function renderComposeView(state, screenName) { return `

✏️ Write Mail

To:

CC: (optional)

Subject:

Message:

📎 Attachments: Coming Soon! File sharing will be available in a future update.

`; } function renderMailCenterView(state) { return `

📬 Mail Center

Welcome to Mail Center!

`; } function renderPrintView() { return `

🖨️

Print

Printing is not available in this simulation.
(Your 1999 printer is probably out of ink anyway!)

`; } function renderMyFilesView(state) { return `

📁 My Files

Personal Filing Cabinet

Store and organize your downloaded files, saved emails, and more.

Storage Used:

2.4 MB / 12 MB

📧

Saved Mail

3 items

🖼️

Pictures

0 items

🎵

Music

0 items

📄

Documents

0 items

Recent Downloads

No recent downloads

💡 Tip: Download files from the web and they'll appear here. Your files are stored on AOL's servers!

`; } function renderMyAOLView(state, screenName) { return `

⭐ My AOL

${screenName.charAt(0).toUpperCase()}

${screenName}

Member since December 1999

AOL Member Level: Newbie

Customize Your AOL Experience

🚧 Under Construction: Profile customization coming soon!

`; } function renderFavoritesView(state) { return `

❤️ Favorite Places

Your Favorite Places

🏠 AOL.COM - Welcome

🎮 Games Channel

💬 Chat Rooms

💡 Tip: Add your favorite pages here for quick access! Click the heart icon on any page.

`; } function renderInternetView(state) { // AOL Search — LLM-generated content if (state.currentWebsite === '_search' && _uiSearch) { var search = state.aolSearch || {}; // Loading search results if (search.loading) { return _uiSearch.renderSearchLoading(search.query || ''); } // Viewing a generated page if (search.viewingPage !== null && search.viewingPage !== undefined) { if (search.pageLoading) { var loadingResult = (search.results && search.results[search.viewingPage]) || { url: '...' }; return _uiSearch.renderSearchPageLoading(loadingResult); } if (search.pageHtml) { return _uiSearch.renderSearchPage(search); } } // Show search results (or error) if (search.results && search.results.length > 0) { return _uiSearch.renderSearchResults(search); } // Error state if (search.error) { return _uiSearch.renderSearchResults(search); } // Fallback — show loading return _uiSearch.renderSearchLoading(search.query || ''); } // If we have a current website set, render the website content if (state.currentWebsite) { // Special case: zone.com/snowcraft with active game — inject live renderer if (state.currentWebsite === 'zone.com' && state.currentWebPage === 'snowcraft' && state.snowcraft && state.snowcraft.active) { // MAXIMIZED MODE: fullscreen game overlay replacing all zone.com chrome if (state.snowcraft.maximized) { var maxHtml = renderSnowcraftMaximized(state.snowcraft); if (maxHtml) { return '

' + maxHtml + '

'; } } var gameHtml = renderSnowcraftGame(state.snowcraft); if (gameHtml) { // Wrap in the website chrome but replace the game container with live game var baseHtml = renderWebsite(state); // The game area has id="snowcraft-game-area" — inject our renderer content into it // Find the game area div and replace its inner content var marker = 'id="snowcraft-game-area"'; var markerIdx = baseHtml.indexOf(marker); if (markerIdx !== -1) { // Find the closing > of the game area div var openTag = baseHtml.indexOf('>', markerIdx); if (openTag !== -1) { // Find the corresponding closing

// The game area content starts after the > var depth = 1; var pos = openTag + 1; var contentStart = pos; while (depth > 0 && pos < baseHtml.length) { var nextOpen = baseHtml.indexOf('', pos); if (nextClose === -1) break; if (nextOpen !== -1 && nextOpen < nextClose) { depth++; pos = nextOpen + 4; } else { depth--; if (depth === 0) { // Replace content between contentStart and nextClose baseHtml = baseHtml.substring(0, contentStart) + gameHtml + baseHtml.substring(nextClose); } pos = nextClose + 6; } } } } return baseHtml; } } // Special case: zone.com/chess with active game — inject live renderer if (state.currentWebsite === 'zone.com' && state.currentWebPage === 'chess' && state.chess && state.chess.active) { // MAXIMIZED MODE: fullscreen game overlay replacing all zone.com chrome if (state.chess.maximized) { var chessMaxHtml = renderChessMaximized(state.chess); if (chessMaxHtml) { return '

' + chessMaxHtml + '

'; } } var chessGameHtml = renderChessGame(state.chess); if (chessGameHtml) { // Wrap in the website chrome but replace the game container with live game var chessBaseHtml = renderWebsite(state); // The game area has id="chess-game-area" — inject our renderer content into it var chessMarker = 'id="chess-game-area"'; var chessMarkerIdx = chessBaseHtml.indexOf(chessMarker); if (chessMarkerIdx !== -1) { var chessOpenTag = chessBaseHtml.indexOf('>', chessMarkerIdx); if (chessOpenTag !== -1) { var chessDepth = 1; var chessPos = chessOpenTag + 1; var chessContentStart = chessPos; while (chessDepth > 0 && chessPos < chessBaseHtml.length) { var chessNextOpen = chessBaseHtml.indexOf('', chessPos); if (chessNextClose === -1) break; if (chessNextOpen !== -1 && chessNextOpen < chessNextClose) { chessDepth++; chessPos = chessNextOpen + 4; } else { chessDepth--; if (chessDepth === 0) { chessBaseHtml = chessBaseHtml.substring(0, chessContentStart) + chessGameHtml + chessBaseHtml.substring(chessNextClose); } chessPos = chessNextClose + 6; } } } } return chessBaseHtml; } } // Special case: zone.com/aoe with active game — inject live renderer if (state.currentWebsite === 'zone.com' && state.currentWebPage === 'aoe' && state.aoe && state.aoe.active) { // MAXIMIZED MODE: fullscreen game overlay replacing all zone.com chrome if (state.aoe.maximized) { var aoeMaxHtml = renderAoeMaximized(state.aoe, state.aoeElo || 1000); if (aoeMaxHtml) { return '

' + aoeMaxHtml + '

'; } } var aoeGameHtml = renderAoeGame(state.aoe, state.aoeElo || 1000); if (aoeGameHtml) { // Wrap in the website chrome but replace the game container with live game var aoeBaseHtml = renderWebsite(state); // The game area has id="aoe-game-area" — inject our renderer content into it var aoeMarker = 'id="aoe-game-area"'; var aoeMarkerIdx = aoeBaseHtml.indexOf(aoeMarker); if (aoeMarkerIdx !== -1) { var aoeOpenTag = aoeBaseHtml.indexOf('>', aoeMarkerIdx); if (aoeOpenTag !== -1) { var aoeDepth = 1; var aoePos = aoeOpenTag + 1; var aoeContentStart = aoePos; while (aoeDepth > 0 && aoePos < aoeBaseHtml.length) { var aoeNextOpen = aoeBaseHtml.indexOf('', aoePos); if (aoeNextClose === -1) break; if (aoeNextOpen !== -1 && aoeNextOpen < aoeNextClose) { aoeDepth++; aoePos = aoeNextOpen + 4; } else { aoeDepth--; if (aoeDepth === 0) { aoeBaseHtml = aoeBaseHtml.substring(0, aoeContentStart) + aoeGameHtml + aoeBaseHtml.substring(aoeNextClose); } aoePos = aoeNextClose + 6; } } } } return aoeBaseHtml; } } // Special case: zone.com/solitaire with active game if (state.currentWebsite === 'zone.com' && state.currentWebPage === 'solitaire' && state.solitaire && state.solitaire.active) { if (state.solitaire.maximized) { var solMaxHtml = renderSolitaireMaximized(state.solitaire); if (solMaxHtml) { return '

' + solMaxHtml + '

'; } } var solGameHtml = renderSolitaireGame(state.solitaire); if (solGameHtml) { var solBaseHtml = renderWebsite(state); var solMarker = 'id="solitaire-game-area"'; var solMarkerIdx = solBaseHtml.indexOf(solMarker); if (solMarkerIdx !== -1) { var solOpenTag = solBaseHtml.indexOf('>', solMarkerIdx); if (solOpenTag !== -1) { var solDepth = 1; var solPos = solOpenTag + 1; var solContentStart = solPos; while (solDepth > 0 && solPos < solBaseHtml.length) { var solNextOpen = solBaseHtml.indexOf('', solPos); if (solNextClose === -1) break; if (solNextOpen !== -1 && solNextOpen < solNextClose) { solDepth++; solPos = solNextOpen + 4; } else { solDepth--; if (solDepth === 0) { solBaseHtml = solBaseHtml.substring(0, solContentStart) + solGameHtml + solBaseHtml.substring(solNextClose); } solPos = solNextClose + 6; } } } } return solBaseHtml; } } return renderWebsite(state); } // Otherwise show the "Go to the Web!" landing page with functional navigation var availableSites = getAvailableSites(); var siteLinks = availableSites.map(function(s) { return '

' + '' + s.favicon + '' + '

' + '

' + s.domain + '

' + '

' + s.title + '

' + '

'; }).join(''); // Fake popular 1999 sites that show a 404 var fakeSites = [ {name: 'Yahoo.com', icon: '🔍'}, {name: 'AltaVista.com', icon: '🔎'}, {name: 'Geocities.com', icon: '🏠'}, {name: 'Lycos.com', icon: '🐕'}, {name: 'Amazon.com', icon: '📦'}, {name: 'eBay.com', icon: '🏷️'} ]; var fakeLinks = fakeSites.map(function(s) { return '

' + '' + s.icon + '' + s.name + '

'; }).join(''); return `

🌐 Internet Connection

Go to the Web!

Explore the World Wide Web through AOL

${availableSites.length > 0 ? `

🔍 Interesting Sites

These sites appeared in our web crawler. Some seem... unusual.

${siteLinks}

` : ''}

🌐 Popular Sites

${fakeLinks}

💡 Tip: Type a web address in the bar above or in the AOL address bar and click Go. Try searching for interesting keywords...

`; } function renderChannelsView(state) { const channels = CHANNELS; const channelButtons = channels.map(ch => '' ).join(''); return `

📺 AOL Channels

Explore AOL Channels

Click a channel to explore its content!

${channelButtons}

`; } function renderChannelView(state) { const channelId = state.currentChannel || 'news'; // Render specific channel content based on ID // Data-driven channels use the generic renderer switch(channelId) { case 'news': return renderChannelFromData(NEWS_CHANNEL); case 'sports': return renderChannelFromData(SPORTS_CHANNEL); case 'entertainment': return renderChannelFromData(ENTERTAINMENT_CHANNEL); case 'games': return renderChannelFromData(GAMES_CHANNEL); case 'music': return renderChannelFromData(MUSIC_CHANNEL); case 'shopping': return renderChannelFromData(SHOPPING_CHANNEL); case 'travel': return renderChannelFromData(TRAVEL_CHANNEL); case 'finance': return renderChannelFromData(FINANCE_CHANNEL); case 'health': return renderChannelFromData(HEALTH_CHANNEL); case 'computing': return renderChannelFromData(COMPUTING_CHANNEL); default: return renderGenericChannel(channelId); } } // ============================================ // GENERIC DATA-DRIVEN CHANNEL RENDERER // ============================================ // Renders any channel from a structured data object. // Each channel data file exports an object with: mainStory, articleGrid, headlines, bottomSection, etc. // This function turns that data into the same HTML the old hardcoded functions produced. function renderChannelFromData(channelData) { var d = channelData; // Banner (optional) var bannerHtml = ''; if (d.banner) { bannerHtml = '

' + d.banner.text + '

'; } // Dual feature (side-by-side cards, used by games channel) var dualHtml = ''; if (d.dualFeature) { var df = d.dualFeature; var renderDualCard = function(card) { var linkHtml = ''; if (card.webUrl) { linkHtml = '' + card.linkText + ''; } else if (card.articleId) { linkHtml = '' + card.linkText + ''; } return '

' + '

' + card.label + '

' + '

' + card.title + '

' + '

' + card.text + '

' + linkHtml + '

' + '

'; }; dualHtml = '

' + renderDualCard(df.left) + renderDualCard(df.right) + '

'; } // Main story var mainHtml = ''; if (d.mainStory) { var ms = d.mainStory; mainHtml = '

' + '

' + ms.label + '

' + '

' + ms.title + '

' + '

' + ms.text + '

' + (ms.linkArticleId ? '' + ms.linkText + '' : '') + '

' + '

'; } // Article grid (2 columns of image cards) var gridHtml = ''; if (d.articleGrid && d.articleGrid.length > 0) { var cards = d.articleGrid.map(function(a) { var imgHtml = a.image ? '

' : ''; var centerClass = a.image ? '' : ' text-center'; var titleSize = a.image ? 'text-base' : 'text-3xl mb-2'; var clickAttr = a.webUrl ? ' onclick="sendAction(\'webNavigate\', {url: \'' + a.webUrl + '\'})" style="cursor:pointer;"' : ''; return '

' + imgHtml + '

' + a.title + '

' + (a.desc ? '

' + a.desc + '

' : '') + (a.webUrl ? '

Visit Site →

' : '') + '

'; }).join(''); gridHtml = '

' + cards + '

'; } // Headlines list var headlinesHtml = ''; if (d.headlines) { var hl = d.headlines; var items = hl.items.map(function(item) { if (item.webUrl) { return '

• ' + item.text + '

'; } if (item.articleId) { return '

• ' + item.text + '

'; } return '

• ' + item.text + '

'; }).join(''); headlinesHtml = '

' + '

' + hl.title + '

' + '

' + items + '

' + '

'; } // Bottom section (themed box with bullet items) var bottomHtml = ''; if (d.bottomSection) { var bs = d.bottomSection; var bItems = bs.items.map(function(item) { return '

• ' + item + '

'; }).join(''); bottomHtml = '

' + '

' + bs.title + '

' + '

' + bItems + '

' + '

'; } return '

' + '

' + '' + d.icon + '' + '' + d.name + '' + '

' + '

' + '' + bannerHtml + dualHtml + mainHtml + gridHtml + headlinesHtml + bottomHtml + '

' + '

'; } function renderGenericChannel(channelId) { return `

📺 ${channelId.charAt(0).toUpperCase() + channelId.slice(1)} Channel

${channelId.charAt(0).toUpperCase() + channelId.slice(1)}

🚧

Under Construction!

This channel is being built. Check back soon for exciting content!

`; } // ============================================ // ARTICLE VIEW - Full article content pages // ============================================ function renderArticleView(state) { const articleId = state.currentArticle || 'unknown'; // Article database with full content const articles = { // Computing articles loaded from external data file ...COMPUTING_ARTICLES, // Entertainment articles loaded from external data file ...ENTERTAINMENT_ARTICLES, // Games articles loaded from external data file ...GAMES_ARTICLES, // Music articles loaded from external data file ...MUSIC_ARTICLES, // News articles loaded from external data file ...NEWS_ARTICLES, // Sports articles loaded from external data file ...SPORTS_ARTICLES, }; const article = articles[articleId]; if (!article) { // Article not found - show error return `

Article Not Found

📰

Article Not Found

Sorry, this article isn't available yet.

`; } return `

📰 ${article.category.charAt(0).toUpperCase() + article.category.slice(1)}

${article.title}

Published: December 31, 1999

${article.content}

Share this article: 📧 Email to a Friend 🖨️ Print

`; } function renderPicturesView(state) { return `

📷 You've Got Pictures!

📷

No Pictures Yet!

Develop your film at participating photo centers and
have your pictures sent directly to AOL!

How It Works:

Take your film to a participating photo center
Ask for "AOL You've Got Pictures" processing
Your photos will appear here in 3-5 days!

💡 Remember: This is 1999 - digital cameras are expensive! Most people still use film.

`; } function renderCalendarView(state) { return `

📅 My Calendar

December 1999

Sun

Mon

Tue

Wed

Thu

Fri

Sat

${Array(31).fill(0).map((_, i) => { const day = i + 1; const isToday = day === 31; const bgClass = isToday ? 'bg-[#ff6600] text-white font-bold' : 'bg-white hover:bg-gray-100'; return '

' + day + '

'; }).join('')}

📌 December 31, 1999

11:59 PM - Y2K COUNTDOWN!

Will computers survive? Stay tuned...

12:00 AM - New Year 2000!

Happy New Millennium! 🎉

`; } function renderChatView(state, world) { const currentRoom = state.chatRoom || null; // If no room selected, show room selection if (!currentRoom) { return renderChatRoomSelection(state); } // Show active chat room return renderActiveChatRoom(state, currentRoom, world); } function renderChatRoomSelection(state) { const rooms = [ { id: 'town-square', name: 'Town Square', icon: '🏛️', desc: 'General chat - talk about anything!', users: 23 }, { id: 'gaming', name: 'Gaming', icon: '🎮', desc: 'Video games, consoles, PC gaming', users: 15 }, { id: 'music', name: 'Music', icon: '🎵', desc: 'Bands, albums, concerts, Napster', users: 18 }, { id: 'tech-talk', name: 'Tech Talk', icon: '💻', desc: 'Computers, internet, Y2K bugs', users: 12 }, { id: 'movies-tv', name: 'TV & Movies', icon: '📺', desc: 'Films, TV shows, entertainment', users: 14 }, { id: 'realm-of-legends', name: 'Realm of Legends', icon: '⚔️', desc: 'Text-based fantasy RPG! Join the adventure!', users: 8, special: true }, ]; // Add hidden room if discovered if (state.discoveredUnknown) { rooms.push({ id: 'the-unknown', name: 'The Unknown', icon: '🔮', desc: 'Mysteries, conspiracies...', users: 7 }); } const roomButtons = rooms.map(room => { const specialClass = room.special ? 'bg-[#2a1a4a] border-[#6633cc]' : 'bg-[#e8f4fc] border-[#b0d4f1]'; const textClass = room.special ? 'text-yellow-300' : ''; const descClass = room.special ? 'text-purple-200' : 'text-gray-600'; const hoverClass = room.special ? 'hover:bg-[#3a2a5a]' : 'hover:bg-[#d0e8f8]'; return ''; }).join(''); return `

💬 AOL Chat Rooms

Select a Chat Room:

${roomButtons}

💡 Tip: Click on usernames in chat to add them to your Buddy List or send a private message!

`; } function renderActiveChatRoom(state, roomId, world) { const allRooms = [ { id: 'town-square', name: 'Town Square', icon: '🏛️' }, { id: 'gaming', name: 'Gaming', icon: '🎮' }, { id: 'music', name: 'Music', icon: '🎵' }, { id: 'tech-talk', name: 'Tech Talk', icon: '💻' }, { id: 'movies-tv', name: 'TV & Movies', icon: '📺' }, { id: 'realm-of-legends', name: 'Realm of Legends', icon: '⚔️', special: true }, ]; // Add hidden room if discovered if (state.discoveredUnknown) { allRooms.push({ id: 'the-unknown', name: 'The Unknown', icon: '🔮' }); } const room = allRooms.find(r => r.id === roomId) || { name: 'Chat Room', icon: '💬' }; const screenName = state.screenName || 'NewUser99'; const chatLoading = state.chatLoading || false; const showRPRules = state.showRPRules || false; // CRITICAL: Preserve chat input value across re-renders! let chatInputValue = ''; if (typeof document !== 'undefined') { const existingInput = document.getElementById('chatInput'); if (existingInput) { chatInputValue = existingInput.value || ''; } } // GET MESSAGES FROM SHARED CHAT MANAGER let messages = []; let usersInRoom = []; let npcsInRoom = []; let currentDM = null; let currentLocation = null; const managers = world.query({ tags: ['chat-manager'] }); if (managers.length > 0) { const manager = world.getObject(managers[0].id); if (manager && manager.state && manager.state.rooms) { const roomData = manager.state.rooms[roomId]; if (roomData) { messages = roomData.messages || []; usersInRoom = roomData.users || []; npcsInRoom = roomData.npcs || []; currentDM = roomData.currentDM || null; currentLocation = roomData.currentLocation || null; } } } // Combine real players and NPCs for the user list const allUsersInRoom = [...usersInRoom, ...npcsInRoom]; // For RP room, also show the DM if (roomId === 'realm-of-legends' && currentDM && !allUsersInRoom.includes(currentDM)) { allUsersInRoom.unshift(currentDM); // DM at top } // Right-click context menu state const contextMenu = state.userContextMenu || null; // Render room list sidebar const roomListHtml = allRooms.map(r => { const isActive = r.id === roomId; const activeClass = isActive ? 'bg-[#9933cc] text-white' : 'hover:bg-purple-100 text-gray-700'; const specialIndicator = r.special ? ' ⚔️' : ''; return ''; }).join(''); // Render messages - with special styling for DM const messagesHtml = messages.length === 0 ? '

Welcome to ' + room.name + '! Say hi to start chatting.

' : messages.map(msg => { const isSystem = msg.type === 'system'; const isPlayer = msg.from === _localPlayerId || msg.from === screenName; const isDM = currentDM && msg.from === currentDM; let nameColor = isPlayer ? 'text-blue-600' : 'text-[#cc0000]'; if (isDM) nameColor = 'text-[#6633cc] font-bold'; // DM gets special purple if (isSystem) { return '

' + msg.text + '

'; } const contextHandler = isPlayer ? '' : 'oncontextmenu="event.preventDefault(); sendAction(\'showUserMenu\', {user: \'' + msg.from + '\', x: event.clientX, y: event.clientY});"'; // DM messages get special styling const dmBg = isDM ? 'bg-[#f8f0ff] px-2 py-1 rounded border-l-4 border-[#6633cc]' : ''; return '

' + '' + (isDM ? '🎭 ' : '') + resolveName(msg.from) + ': ' + '' + msg.text + '' + '

'; }).join(''); // Render user list with special DM indicator const usersHtml = allUsersInRoom.map(user => { const isPlayer = user === _localPlayerId || user === screenName; const isRealPlayer = usersInRoom.includes(user); const isDM = user === currentDM; const contextHandler = isPlayer ? '' : 'oncontextmenu="event.preventDefault(); sendAction(\'showUserMenu\', {user: \'' + user + '\', x: event.clientX, y: event.clientY});"'; let dotColor = isRealPlayer ? 'bg-blue-500' : 'bg-green-500'; if (isDM) dotColor = 'bg-purple-500'; let label = isPlayer ? ' (you)' : ''; if (isDM) label = ' 🎭 DM'; if (isRealPlayer && !isPlayer && !isDM) label = ' 👤'; return '

' + '' + '' + resolveName(user) + label + '' + '

'; }).join(''); // Context menu const contextMenuHtml = contextMenu ? renderUserContextMenu(contextMenu.user, contextMenu.x, contextMenu.y, screenName) : ''; // RP Rules modal const rpRulesHtml = (roomId === 'realm-of-legends' && showRPRules) ? renderRPRulesModal() : ''; // Special header for RP room const isRPRoom = roomId === 'realm-of-legends'; const headerBg = isRPRoom ? 'from-[#2a1a4a] to-[#4a2a6a]' : 'from-[#9933cc] to-[#cc66ff]'; let headerExtra = ''; if (isRPRoom) { headerExtra = `

DM: ${currentDM || 'Loading...'}

`; } return `

💬 Chat Rooms

${roomListHtml}

${room.icon} ${room.name} (${allUsersInRoom.length} people)

${headerExtra}

${isRPRoom && currentLocation ? '

📍 Location: ' + currentLocation + '

' : ''}

${messagesHtml} ${chatLoading ? '

Someone is typing...

' : ''}

${isRPRoom ? '

Use *asterisks* for actions, ((double parens)) for OOC

' : ''}

${isRPRoom ? '⚔️ Party' : '👥 In Room'}

${usersHtml}

${contextMenuHtml} ${rpRulesHtml}

`; } // RP Rules Modal function renderRPRulesModal() { return `

📜 Realm of Legends - Rules of Engagement

⚔️ What Is This?

Welcome, brave adventurer! This is a collaborative text-based fantasy RPG. A Dungeon Master (DM) describes the world and events, and YOU decide what your character does. There's always a quest in progress - jump in anytime!

🎭 Character Classes

⚔️ Warrior
Strong, tanky, hits hard. Sword and shield.

✨ Mage
Powerful spells, but fragile. Arcane arts.

🗡️ Rogue
Sneaky, traps, backstabs. Shadows are your friend.

✝️ Cleric
Heals, buffs, smites undead. Divine power.

📝 How To Play

*Asterisks* or ::colons:: for actions
Example: *draws sword and approaches the door*
((Double parens)) for out-of-character (OOC) chat
Example: ((brb getting snacks))
Describe what you TRY to do - the DM decides if it works
No dice rolling needed - DM uses dramatic narrative judgment

⚠️ Etiquette

• Don't godmode - You can't decide your own success ("I kill the dragon instantly")
• Don't derail - Work with the party, not against them
• Be cool - Everyone's here to have fun
• Deaths aren't permanent - Wait a few minutes, then rejoin as same or new character

🎲 The DM System

DMs rotate to keep things fresh! Each has their own style:

• DragonLord_DM - Epic high fantasy, dramatic battles
• ShadowWeaver_DM - Dark mysteries, plot twists
• TavernMaster_Bob - Comedy, puns, silly fun
• CriticalHit_Kate - Classic D&D, fair but tough
• NightmareNarrator - Horror, survival, tension

🗡️ Ready to adventure?
Just start typing! The DM will work you into the story.

May your blade stay sharp and your dice roll true! 🎲

`; } // Render user right-click context menu function renderUserContextMenu(targetUser, x, y, screenName) { // Check if already a buddy // For now we'll add that check later const displayName = resolveName(targetUser); return `

${displayName}

`; }

Spawn