// Theme configuration import { ThreeJSSandbox, PhaserSandbox, SkyboxShaderSandbox, ShaderSandbox, MaterialShaderSandbox } from 'https://play.rosebud.ai/assets/Sandboxes.js?igvw'; const THEME = { colors: { accent: '#4a80b4', // Mellow blue for general accents separator: '#4ac4c0', // Watercolor teal for separators categoryFill: '#2a2a3a', // Category background categoryHeader: '#3a3a4a', // Category header background subcategoryFill: '#333333', // Subcategory background subcategoryHeader: '#404040' // Subcategory header background } }; // Script dicts. const PHASER_CODE = { '_separator_1': { name: 'Info', type: 'separator' }, 'Help': { 'How to Use': { url: 'https://play.rosebud.ai/assets/3DTemplate.js?YjUD', type: 'none', executable: false } }, '_separator_2': { name: 'UI Systems & Elements', type: 'separator' }, 'UI Components': { 'UIGrace': { 'UIElement': { url: 'https://play.rosebud.ai/assets/UIElement.js?3cS2', type: 'phaser', executable: false }, } } }; const THREEJS_CODE = { '_separator_1': { name: 'Help', type: 'separator' }, 'Guide': { 'How to Use': { url: 'https://play.rosebud.ai/assets/3DTemplate.js?YjUD', type: 'none', executable: false } }, '_separator_2': { name: 'UI Systems & Elements', type: 'separator' }, }; const PHASER_GAMES = { '_separator_1': { name: 'Community', type: 'separator' }, 'Bonkout - Pass the game': { 'Lord Boots submission': { url: 'https://play.rosebud.ai/assets/new PhaserTestScript.js?NCi8', type: 'phaser', executable: true } }, '_separator_2': { name: 'LordBoots', type: 'separator' }, 'Engines': { 'Lighting Engine': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Games/Phaser/LightingEngine.js', type: 'phaser', executable: true }, 'Psuedo3DEngine': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Games/Phaser/Psuedo3DEngine.js', type: 'phaser', executable: true } }, '_separator_3': { name: 'Another User', type: 'separator' }, }; const TEMPLATES_SCRIPTS = { '_separator_1': { name: 'Basic', type: 'separator' }, 'ThreeJS': { 'Rosebud official Blank 3D Template': { url: 'https://play.rosebud.ai/assets/3DTemplate.js?YjUD', type: 'threejs', executable: true } }, 'PlasmatorGames': { 'Dither Template': { url: 'https://play.rosebud.ai/assets/DitherTemplate.js?7vVg', type: 'threejs', executable: true }, 'Mini Map Template': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Examples/ThreeJS/MiniMap.js', type: 'threejs', executable: true }, 'Space Shooter Template': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Examples/ThreeJS/SpaceShooter.js', type: 'threejs', executable: true }, 'PS1 Graphics Template': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Examples/ThreeJS/PS1Filter.js', type: 'threejs', executable: true }, 'Fisheye Lense Template': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Examples/ThreeJS/FishEye.js', type: 'threejs', executable: true }, '2D Map Template': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Examples/ThreeJS/2DMap.js', type: 'threejs', executable: true } } }; const THREEJS_GAMES = { '_separator_1': { name: 'ThreeJS', type: 'separator' }, '3D Core': { 'Templates': { '3D Blank Template': { url: 'https://play.rosebud.ai/assets/3DTemplate.js?YjUD', type: 'threejs', executable: true } } }, 'Boots': { 'Cavernous Caution': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Games/ThreeJS/CavernousCaution.js', type: 'threejs', executable: true } } }; const EXPERIMENTS_SCRIPTS = { '_separator_1': { name: 'Experiments', type: 'separator' }, 'Experiments': { 'Demos': { 'Coming Soon': { url: 'https://play.rosebud.ai/assets/3DTemplate.js?YjUD', type: 'none', executable: false } } } }; const SHADER_SCRIPTS = { '_separator_1': { name: 'Info', type: 'separator' }, 'Help': { 'Introduction': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Info/Shaders/Opener.js', type: 'none', executable: false } }, 'Guides': { 'Integration with your ThreeJS Game/App': { }, 'Modifying Shaders': { } }, '_separator_2': { name: 'Shaders', type: 'separator' }, 'Skybox Shaders': { 'Star Nest': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/StarNest1.js', type: 'skybox', executable: true }, 'BasicSky - Daytime': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/BasicSky.js', type: 'skybox', executable: true }, 'Hypnotic': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/HypnoticShader.js', type: 'skybox', executable: true }, 'Ocean': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/Ocean%20Shader.js', type: 'skybox', executable: true }, 'Ocean Sky 1': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/OceanClouds%201.js', type: 'skybox', executable: true }, 'Universe': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/UniverseShader.js', type: 'skybox', executable: true }, }, 'General Shaders': { 'Star Nest': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/StarNest1.js', type: 'shader', executable: true }, 'Hypnotic': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/HypnoticShader.js', type: 'shader', executable: true }, 'Cute Cross': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/CuteCrossShader.js', type: 'shader', executable: true }, 'BasicSky - Daytime': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/BasicSky.js', type: 'shader', executable: true }, }, 'Material Shaders': { 'Hypnotic': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Shaders/ThreeJS/HypnoticShader.js', type: 'material', executable: true }, }, }; const TUTORIAL_SCRIPTS = { 'Getting Started': { 'Introduction': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Tutorials/MarkdownInfo.txt', type: 'none', executable: false }, }, 'RoseBud Official': { 'Hour of code': { url: 'https://raw.githubusercontent.com/LordBoots/BootsCodeLibrary/refs/heads/main/Tutorials/RosebudOficcial/HourOfCode.txt', type: 'none', executable: false } } }; class MarkdownParser { constructor(content) { this.content = content; this.contentBlocks = {}; this.images = {}; this.videos = {}; this.parseMarkdown(content); } static sanitizeUrl(url) { // First, decode any HTML entities let decodedUrl = url.replace(/&[^;]+;/g, ''); // Remove all HTML tags including strong tags decodedUrl = decodedUrl.replace(/<[^>]+>/g, ''); // Clean up any remaining artifacts decodedUrl = decodedUrl .replace(/\s+/g, '') // Remove whitespace .replace(/["'<>]/g, '') // Remove quotes and brackets .trim(); // Handle protocol if (!decodedUrl.match(/^https?:\/\//i)) { decodedUrl = 'https://' + decodedUrl; } return decodedUrl; } parseMarkdown(content) { // URL sanitization helper const sanitizeUrl = (url) => { return url.replace(/<\/?[^>]+(>|$)/g, '') // Remove HTML tags .replace(/&[^;]+;/g, '') // Remove HTML entities .trim(); }; // Parse content blocks with sanitization const contentRegex = /<--([^>]+)-->([\s\S]*?)(?=<--|<##|<==|<@@|<\+\+|\s*$)/g; const titleRegex = /<==([^>]+)==>/g; const imageRegex = /<##([^#]+?)##>\s*\n((?:https?:\/\/[^\n]+))/g; const textBlockRegex = /<@@([^@]+)@@>([\s\S]*?)(?=<--|<##|<==|<@@|<\+\+|\s*$)/g; const videoRegex = /<\+\+([^+]+?)\+\+>\s*\n((?:https?:\/\/[^\n]+))/g; let match; // Parse titles while ((match = titleRegex.exec(content)) !== null) { const titleName = match[1]; // Check for font size marker in title const fontSizeMatch = titleName.match(/^<-(\d+)->(.*)$/s); if (fontSizeMatch) { this.contentBlocks[`title_${fontSizeMatch[2]}`] = { fontSize: fontSizeMatch[1], content: fontSizeMatch[2].trim() }; } else { this.contentBlocks[`title_${titleName}`] = { fontSize: '28', // default title font size content: titleName }; } } // Parse content blocks while ((match = contentRegex.exec(content)) !== null) { const blockName = match[1]; let blockContent = match[2].trim(); // Check for font size marker const fontSizeMatch = blockContent.match(/^<-(\d+)->(.*)$/s); if (fontSizeMatch) { this.contentBlocks[blockName] = { fontSize: fontSizeMatch[1], content: fontSizeMatch[2].trim() }; } else { this.contentBlocks[blockName] = { fontSize: '14', // default font size content: blockContent }; } } // Parse text blocks while ((match = textBlockRegex.exec(content)) !== null) { const blockName = match[1]; let blockContent = match[2]; // Extract content between font size marker (if present) and next block const textEndRegex = /(?=<--|<##|<==|<@@|\s*$)/g; const textEndMatch = textEndRegex.exec(blockContent); if (textEndMatch) { blockContent = blockContent.slice(0, textEndMatch.index); } // Check for font size marker const fontSizeMatch = blockContent.match(/^\s*<-(\d+)->([^]*?)(?:\s*$)/); if (fontSizeMatch) { this.contentBlocks[`text_${blockName}`] = { fontSize: fontSizeMatch[1], content: fontSizeMatch[2].replace(/^\n+|\n+$/g, ''), type: 'text' }; } else { this.contentBlocks[`text_${blockName}`] = { fontSize: '14', content: blockContent.replace(/^\n+|\n+$/g, ''), type: 'text' }; } } // Parse images with sanitization while ((match = imageRegex.exec(content)) !== null) { const imageName = match[1]; const imageUrl = match[2].trim(); // Don't sanitize image URLs this.images[imageName] = imageUrl; } // Parse videos with sanitization while ((match = videoRegex.exec(content)) !== null) { const videoName = match[1]; const videoUrl = MarkdownParser.sanitizeUrl(match[2]); this.videos[videoName] = videoUrl; } } getContentBlock(name) { return this.contentBlocks[name] || null; } getImage(name) { return this.images[name] || null; } getVideo(name) { return this.videos[name] || null; } getAllVideos() { return this.videos; } getAllContentBlocks() { return this.contentBlocks; } getAllImages() { return this.images; } } class CodeLibrary { constructor(scene, x, y, width, height) { this.scene = scene; this.x = x; this.y = y; this.width = width; this.height = height; this.bottomPadding = 40; this.categoryPadding = 10; this.buttons = {}; this.categoryHeaders = []; this.categoriesContainer = null; this.createCategoriesContainer(); this.createButtons(); this.updateCodeViewLayout(); } updateCodeViewLayout() { if (this.codeView) { const padding = 20; const availableHeight = this.height - 40; // Account for parent padding this.codeView.container.style.left = `${this.width / 2 + 20}px`; this.codeView.container.style.top = `20px`; // Align with parent padding this.codeView.container.style.width = `${this.width / 2 - 40}px`; this.codeView.container.style.height = `${availableHeight}px`; } } createCategoriesContainer() { this.categoriesContainer = document.createElement('div'); this.categoriesContainer.style.width = '100%'; this.categoriesContainer.style.height = '100%'; this.categoriesContainer.style.backgroundColor = '#2a2a2a'; this.categoriesContainer.style.border = `2px solid ${THEME.colors.accent}`; this.categoriesContainer.style.borderRadius = '5px'; this.categoriesContainer.style.display = 'flex'; this.categoriesContainer.style.flexDirection = 'column'; this.categoriesContainer.style.overflow = 'hidden'; // Create title container const titleContainer = document.createElement('div'); titleContainer.textContent = 'Library'; titleContainer.style.padding = '10px'; titleContainer.style.backgroundColor = THEME.colors.categoryHeader; titleContainer.style.color = '#ffffff'; titleContainer.style.fontWeight = 'bold'; titleContainer.style.fontSize = '20px'; titleContainer.style.textAlign = 'center'; titleContainer.style.borderBottom = `2px solid ${THEME.colors.accent}`; // Create content container for categories const contentContainer = document.createElement('div'); contentContainer.style.overflowY = 'auto'; contentContainer.style.padding = '10px'; contentContainer.style.flexGrow = '1'; // Add custom scrollbar styling contentContainer.style.scrollbarWidth = 'thin'; contentContainer.style.scrollbarColor = `${THEME.colors.accent} ${THEME.colors.categoryFill}`; // For Webkit browsers (Chrome, Safari, etc.) contentContainer.style.cssText += ` &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: ${THEME.colors.categoryFill}; } &::-webkit-scrollbar-thumb { background-color: ${THEME.colors.accent}; border-radius: 4px; } `; this.categoriesContainer.appendChild(titleContainer); this.categoriesContainer.appendChild(contentContainer); this.contentContainer = contentContainer; // Store reference for later use this.categoriesContainer.style.boxSizing = 'border-box'; // Removed duplicate renderDiv code as it's now handled by Main class } createButtons() { for (const [category, content] of Object.entries(this.scene.scriptsToUse)) { // Check if this is a separator if (category.startsWith('_separator_')) { const separator = this.createSeparator(content.name); this.contentContainer.appendChild(separator); continue; } const categoryContainer = this.createCategoryContainer(category); const scriptsContainer = categoryContainer.querySelector('.scripts-container'); // Check if content is an element (has url) or contains subcategories if (content.url) { // This is a direct element const button = this.createScriptButton(category, content); scriptsContainer.appendChild(button); } else { // This contains subcategories for (const [subcategory, scripts] of Object.entries(content)) { if (scripts.url) { // Direct script under category const button = this.createScriptButton(subcategory, scripts); scriptsContainer.appendChild(button); } else { // Subcategory with its own scripts const subcategoryContainer = this.createSubcategoryContainer(subcategory); const subcategoryScriptsContainer = subcategoryContainer.querySelector('.scripts-container'); if (Object.keys(scripts).length === 0) { this.addComingSoonMessage(subcategoryScriptsContainer); } else { for (const [name, scriptData] of Object.entries(scripts)) { const button = this.createScriptButton(name, scriptData); subcategoryScriptsContainer.appendChild(button); } } scriptsContainer.appendChild(subcategoryContainer); } } } this.contentContainer.appendChild(categoryContainer); } } createCategoryContainer(category) { const container = document.createElement('div'); container.style.marginBottom = '15px'; container.style.border = `2px solid ${THEME.colors.accent}`; container.style.borderRadius = '5px'; container.style.backgroundColor = '#2a2a4a'; // Slightly blue background for categories container.style.overflow = 'hidden'; const header = document.createElement('div'); header.textContent = `+ ${category}`; header.style.fontSize = '20px'; header.style.color = '#ffffff'; header.style.fontWeight = 'bold'; header.style.padding = '5px 8px'; header.style.cursor = 'pointer'; header.style.backgroundColor = THEME.colors.categoryHeader; header.style.borderBottom = `2px solid ${THEME.colors.accent}`; container.appendChild(header); const scriptsContainer = document.createElement('div'); scriptsContainer.classList.add('scripts-container'); scriptsContainer.style.display = 'none'; scriptsContainer.style.padding = '10px 5px'; container.appendChild(scriptsContainer); header.addEventListener('click', () => this.toggleCategory(header, scriptsContainer)); return container; } createSubcategoryContainer(subcategory) { const container = document.createElement('div'); container.style.marginBottom = '10px'; container.style.border = '1px solid #999999'; container.style.borderRadius = '4px'; container.style.backgroundColor = '#2a2a3a'; // Slightly blue background for subcategories container.style.overflow = 'hidden'; const header = document.createElement('div'); header.textContent = `+ ${subcategory}`; header.style.fontSize = '16px'; header.style.color = '#ffffff'; header.style.fontWeight = 'bold'; header.style.padding = '4px 8px'; header.style.cursor = 'pointer'; header.style.backgroundColor = THEME.colors.subcategoryHeader; container.appendChild(header); const scriptsContainer = document.createElement('div'); scriptsContainer.classList.add('scripts-container'); scriptsContainer.style.display = 'none'; scriptsContainer.style.padding = '8px 4px'; container.appendChild(scriptsContainer); header.addEventListener('click', () => this.toggleCategory(header, scriptsContainer)); return container; } createScriptButton(name, scriptData) { const button = document.createElement('div'); button.style.fontSize = '14px'; button.style.color = '#ffffff'; button.style.backgroundColor = '#3a3a4a'; // Slightly blue background for script buttons button.style.padding = '5px 10px'; button.style.marginBottom = '5px'; button.style.cursor = 'pointer'; button.style.borderRadius = '3px'; button.style.border = '1px solid #666666'; button.style.transition = 'all 0.2s ease-in-out'; // Add hover effects button.addEventListener('mouseover', () => { button.style.backgroundColor = '#4a4a5a'; // Slightly blue hover state button.style.border = '1px solid #777777'; button.style.transform = 'translateY(-1px)'; button.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#3a3a4a'; // Reset to original slightly blue button.style.border = '1px solid #666666'; button.style.transform = 'translateY(0)'; button.style.boxShadow = 'none'; }); button.style.display = 'flex'; button.style.justifyContent = 'space-between'; button.style.alignItems = 'center'; // Create name span const nameSpan = document.createElement('span'); nameSpan.textContent = name; button.appendChild(nameSpan); // Add type emoji if applicable and script is executable if (typeof scriptData === 'object' && scriptData.type && scriptData.type !== 'none' && scriptData.executable === true) { const typeEmoji = document.createElement('span'); typeEmoji.style.marginLeft = '8px'; switch (scriptData.type) { case 'threejs': typeEmoji.textContent = '🎮'; break; case 'phaser': typeEmoji.textContent = '🕹️'; break; case 'shader': typeEmoji.textContent = '🌈'; break; case 'skybox': typeEmoji.textContent = '☁️'; break; case 'material': typeEmoji.textContent = '💍'; break; } button.appendChild(typeEmoji); } button.addEventListener('click', () => this.openCodeView(name, scriptData)); return button; } addComingSoonMessage(container) { const comingSoonMsg = document.createElement('div'); comingSoonMsg.textContent = 'Coming Soon'; comingSoonMsg.style.fontSize = '20px'; comingSoonMsg.style.color = '#888888'; comingSoonMsg.style.fontStyle = 'italic'; comingSoonMsg.style.padding = '5px 10px'; container.appendChild(comingSoonMsg); } createSeparator(name) { const separator = document.createElement('div'); separator.style.width = 'calc(100% + 20px)'; // Extend beyond padding separator.style.margin = '10px -10px'; // Negative margin to counter padding separator.style.padding = '8px 0'; separator.style.textAlign = 'center'; separator.style.color = '#ffffff'; separator.style.backgroundColor = '#3a3a4a'; separator.style.borderTop = `4px solid ${THEME.colors.accent}`; separator.style.borderBottom = `4px solid ${THEME.colors.accent}`; separator.style.fontSize = '22px'; separator.style.fontWeight = '600'; separator.textContent = name; return separator; } toggleCategory(header, scriptsContainer) { const isExpanded = scriptsContainer.style.display === 'block'; scriptsContainer.style.display = isExpanded ? 'none' : 'block'; header.textContent = `${isExpanded ? '+' : '-'} ${header.textContent.slice(2)}`; } async openCodeView(name, scriptData) { const url = typeof scriptData === 'string' ? scriptData : scriptData.url; const scriptType = typeof scriptData === 'object' ? scriptData.type || 'none' : 'none'; try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const content = await response.text(); if (this.scene.category === 'tutorials' && this.scene.tutorialViewer) { // Load content in Tutorial Viewer await this.scene.tutorialViewer.loadTutorial(content); } else if (this.scene.codeView) { // Update script type before loading code this.scene.codeView.scriptType = scriptType; // Update load button state based on executable flag if (this.scene.codeView.loadButton) { const isExecutable = typeof scriptData === 'object' && scriptData.executable === true; this.scene.codeView.loadButton.disabled = !isExecutable; this.scene.codeView.loadButton.style.opacity = isExecutable ? '1' : '0.5'; this.scene.codeView.loadButton.style.cursor = isExecutable ? 'pointer' : 'not-allowed'; } await this.scene.codeView.loadCodeSnippet(content); } } catch (error) { console.error('Error loading content from URL:', error); } } loadPhaserScript(code) { const sandbox = new PhaserSandbox(); sandbox.loadScript(code); } loadThreeJSScript(code) { const sandbox = new ThreeJSSandbox(); sandbox.loadScript(code); } createBrowser() { // Create and return a new BrowserSandbox instance const browserSandbox = new BrowserSandbox(); return browserSandbox.createBrowser(); } createNavButton(text) { return BrowserSandbox.createNavButton(text); } loadShaderScript(code) { const sandbox = new ShaderSandbox(); sandbox.loadScript(code); } loadSkyboxShaderScript(code) { const sandbox = new SkyboxShaderSandbox(); sandbox.loadScript(code); } loadMaterialScript(code) { const sandbox = new MaterialShaderSandbox(); sandbox.loadScript(code); } loadGameScript(code, scriptType = 'threejs') { try { if (scriptType === 'phaser') { this.loadPhaserScript(code); } else if (scriptType === 'shader') { this.loadShaderScript(code); } else if (scriptType === 'skybox') { this.loadSkyboxShaderScript(code); } else if (scriptType === 'material') { this.loadMaterialScript(code); } else { this.loadThreeJSScript(code); } console.log(`✅ Successfully loaded ${scriptType} script in sandbox`); } catch (error) { console.error(`❌ Error loading ${scriptType} script in sandbox:`, error); console.error(error.stack); } } destroy() { // Ensure we cleanup the code view first if (this.codeView) { this.codeView.destroy(); this.codeView = null; } // Safely remove the categories container if (this.categoriesContainer) { try { if (this.categoriesContainer.parentNode) { this.categoriesContainer.parentNode.removeChild(this.categoriesContainer); } } catch (error) { console.warn('Failed to remove categories container:', error); } this.categoriesContainer = null; } } } class CodeView { constructor(scene, x, y, width, height, language = 'javascript', editable = false, onLoad, scriptType = 'none') { this.scene = scene; this.editor = null; this.isReady = false; this.scriptType = scriptType; this.copyButton = null; this.foldButton = null; this.x = x; this.y = y; this.width = width; this.height = height; this.buttonPadding = 40; this.language = language; this.container = null; this.editable = editable; this.showLineNumbers = false; this.init(); } async init() { // Main container this.container = document.createElement('div'); this.container.style.position = 'relative'; this.container.style.width = '100%'; this.container.style.height = '100%'; this.container.style.boxSizing = 'border-box'; this.container.style.display = 'flex'; this.container.style.flexDirection = 'column'; this.container.style.border = `2px solid ${THEME.colors.accent}`; this.container.style.overflow = 'hidden'; this.container.style.backgroundColor = THEME.colors.categoryFill; this.container.style.borderRadius = '8px'; this.container.style.overflow = 'hidden'; // Create header container const headerContainer = document.createElement('div'); headerContainer.textContent = 'Code Viewer'; headerContainer.style.padding = '10px'; headerContainer.style.backgroundColor = '#2a2a3a'; headerContainer.style.color = '#ffffff'; headerContainer.style.fontWeight = 'bold'; headerContainer.style.fontSize = '16px'; headerContainer.style.borderBottom = `2px solid ${THEME.colors.accent}`; headerContainer.style.textAlign = 'center'; this.container.appendChild(headerContainer); const renderDiv = document.getElementById('renderDiv'); if (renderDiv) { renderDiv.appendChild(this.container); } // Create editor container const editorContainer = document.createElement('div'); editorContainer.style.flexGrow = '1'; editorContainer.style.overflow = 'hidden'; editorContainer.style.position = 'relative'; editorContainer.style.height = '100%'; editorContainer.style.minHeight = '0'; editorContainer.style.display = 'flex'; editorContainer.style.flexDirection = 'column'; this.container.appendChild(editorContainer); // Create button container this.buttonContainer = document.createElement('div'); this.buttonHeight = 40; // Define fixed button container height this.buttonContainer.style.height = `${this.buttonHeight}px`; this.buttonContainer.style.backgroundColor = THEME.colors.categoryHeader; this.buttonContainer.style.display = 'flex'; this.buttonContainer.style.justifyContent = 'space-between'; this.buttonContainer.style.alignItems = 'center'; this.buttonContainer.style.padding = '0 10px'; this.container.appendChild(this.buttonContainer); try { this.editor = monaco.editor.create(editorContainer, { value: '', language: this.language, theme: 'vs-dark', automaticLayout: false, minimap: { enabled: false }, scrollBeyondLastLine: true, readOnly: !this.editable, lineNumbers: this.showLineNumbers ? 'on' : 'off' }); this.isReady = true; this.createButtons(); // Add keyboard event listeners for undo and redo this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_Z, () => this.undo()); this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_Y, () => this.redo()); this.editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KEY_Z, () => this.redo()); } catch (error) { console.error('Failed to load Monaco editor:', error); } } createButtons() { this.buttonContainer.style.display = 'flex'; this.buttonContainer.style.justifyContent = 'flex-start'; this.buttonContainer.style.alignItems = 'center'; this.foldButton = this.createButton('Fold All', () => this.foldAll()); this.unfoldButton = this.createButton('Unfold All', () => this.unfoldAll()); this.copyButton = this.createButton('Copy', () => this.copyCodeToClipboard()); this.loadButton = this.createButton('Launch Script', () => this.executeScript()); // Update load button state based on script type this.updateLoadButtonState(); } updateLoadButtonState() { if (this.loadButton) { const isNone = this.scriptType === 'none'; this.loadButton.disabled = isNone; this.loadButton.style.opacity = isNone ? '0.5' : '1'; this.loadButton.style.cursor = isNone ? 'not-allowed' : 'pointer'; this.loadButton.title = isNone ? 'This script cannot be executed' : 'Load this script'; } this.undoButton = this.createButton('Undo', () => this.undo()); this.redoButton = this.createButton('Redo', () => this.redo()); this.foldButton.style.marginRight = '10px'; this.unfoldButton.style.marginRight = '10px'; this.copyButton.style.marginRight = '10px'; this.undoButton.style.marginRight = '10px'; this.redoButton.style.marginRight = '10px'; this.loadButton.style.marginRight = '10px'; this.buttonContainer.appendChild(this.foldButton); this.buttonContainer.appendChild(this.unfoldButton); this.buttonContainer.appendChild(this.copyButton); this.buttonContainer.appendChild(this.loadButton); this.buttonContainer.appendChild(this.undoButton); this.buttonContainer.appendChild(this.redoButton); } createButton(text, onClick) { const button = document.createElement('button'); button.textContent = text; button.style.padding = '4px 12px'; button.style.fontSize = '14px'; button.style.border = `1px solid ${THEME.colors.accent}`; button.style.borderRadius = '4px'; button.style.backgroundColor = '#2d2d2d'; button.style.color = '#ffffff'; button.style.cursor = 'pointer'; button.style.margin = '0'; button.style.transition = 'all 0.2s ease-in-out'; // Add hover effects button.addEventListener('mouseover', () => { button.style.backgroundColor = THEME.colors.accent; button.style.transform = 'translateY(-1px)'; button.style.boxShadow = '0 2px 4px rgba(74, 128, 180, 0.3)'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#2d2d2d'; button.style.transform = 'translateY(0)'; button.style.boxShadow = 'none'; }); button.addEventListener('click', onClick); return button; } async copyCodeToClipboard() { if (this.editor) { const code = this.editor.getValue(); try { await navigator.clipboard.writeText(code); console.log('Code copied to clipboard'); const originalText = this.copyButton.textContent; this.copyButton.textContent = 'Copied!'; setTimeout(() => { this.copyButton.textContent = originalText; }, 2000); } catch (err) { console.error('Failed to copy code: ', err); } } } executeScript() { if (this.editor) { const code = this.editor.getValue(); this.scene.codeLibrary.loadGameScript(code, this.scriptType); } } waitForReady() { return new Promise((resolve) => { if (this.isReady) { resolve(); } else { const checkReady = setInterval(() => { if (this.isReady) { clearInterval(checkReady); resolve(); } }, 100); } }); } async setContent(content) { await this.waitForReady(); if (this.editor) { this.editor.setValue(content); } } async loadCodeSnippet(codeSnippet) { await this.waitForReady(); await this.setContent(codeSnippet); // Scroll to top after content is loaded if (this.editor) { this.editor.setScrollPosition({ scrollTop: 0 }); } } async loadScript(url) { try { const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const code = await response.text(); await this.loadCodeSnippet(code); } catch (error) { console.error('Error loading code from URL:', error); } } foldAll() { if (this.isReady && this.editor) { this.editor.trigger('fold', 'editor.foldAll'); } } unfoldAll() { if (this.isReady && this.editor) { this.editor.trigger('unfold', 'editor.unfoldAll'); } } resize(width, height) { if (width !== undefined) { this.container.style.width = `${width}px`; } // Let the container take full height this.container.style.height = '100%'; if (this.editor) { // Get the actual available height from the container const containerHeight = this.container.clientHeight; const headerHeight = 42; // Height of the "Code Viewer" header const buttonContainerHeight = 40; // Height of the button container const availableHeight = containerHeight - headerHeight - buttonContainerHeight; this.editor.layout({ width: width || this.container.clientWidth, height: Math.max(0, availableHeight) }); } } destroy() { // Cleanup editor instance if (this.editor) { try { this.editor.dispose(); this.editor = null; } catch (error) { console.warn('Failed to dispose editor:', error); } } // Remove event listeners try { if (this.copyButton) { this.copyButton.removeEventListener('click', this.copyCodeToClipboard); this.copyButton = null; } if (this.foldButton) { this.foldButton.removeEventListener('click', this.foldAllAndResize); this.foldButton = null; } if (this.unfoldButton) { this.unfoldButton.removeEventListener('click', this.unfoldAllAndResize); this.unfoldButton = null; } if (this.loadButton) { this.loadButton.removeEventListener('click', this.executeScript); this.loadButton = null; } } catch (error) { console.warn('Failed to remove event listeners:', error); } // Disconnect resize observer if (this.resizeObserver) { try { this.resizeObserver.disconnect(); this.resizeObserver = null; } catch (error) { console.warn('Failed to disconnect resize observer:', error); } } // Remove container if (this.container) { try { if (this.container.parentNode) { this.container.parentNode.removeChild(this.container); } } catch (error) { console.warn('Failed to remove container:', error); } this.container = null; } // Clear any remaining references this.scene = null; this.buttonContainer = null; } toggleLineNumbers() { this.showLineNumbers = !this.showLineNumbers; if (this.editor) { this.editor.updateOptions({ lineNumbers: this.showLineNumbers ? 'on' : 'off' }); } } undo() { if (this.editor) { this.editor.trigger('undo', 'undo'); } } redo() { if (this.editor) { this.editor.trigger('redo', 'redo'); } } } class TutorialViewer { constructor(scene, x, y, width, height) { this.scene = scene; this.x = x; this.y = y; this.width = width; this.height = height; this.container = null; this.contentContainer = null; this.init(); } init() { // Main container this.container = document.createElement('div'); this.container.style.position = 'relative'; this.container.style.width = '100%'; this.container.style.height = '100%'; this.container.style.boxSizing = 'border-box'; this.container.style.display = 'flex'; this.container.style.flexDirection = 'column'; this.container.style.border = `2px solid ${THEME.colors.accent}`; this.container.style.overflow = 'hidden'; this.container.style.backgroundColor = THEME.colors.categoryFill; this.container.style.borderRadius = '8px'; // Create header container const headerContainer = document.createElement('div'); headerContainer.textContent = 'Tutorial Viewer'; headerContainer.style.padding = '10px'; headerContainer.style.backgroundColor = '#2a2a3a'; headerContainer.style.color = '#ffffff'; headerContainer.style.fontWeight = 'bold'; headerContainer.style.fontSize = '16px'; headerContainer.style.borderBottom = `2px solid ${THEME.colors.accent}`; headerContainer.style.textAlign = 'center'; this.container.appendChild(headerContainer); // Create content container this.contentContainer = document.createElement('div'); this.contentContainer.style.flex = '1'; this.contentContainer.style.overflow = 'auto'; this.contentContainer.style.padding = '20px'; this.contentContainer.style.color = '#ffffff'; this.contentContainer.style.fontSize = '14px'; this.contentContainer.style.lineHeight = '1.6'; // Add scrollbar styling this.contentContainer.style.scrollbarWidth = 'thin'; this.contentContainer.style.scrollbarColor = `${THEME.colors.accent} ${THEME.colors.categoryFill}`; // For Webkit browsers (Chrome, Safari, etc.) this.contentContainer.style.cssText += ` &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: ${THEME.colors.categoryFill}; } &::-webkit-scrollbar-thumb { background-color: ${THEME.colors.accent}; border-radius: 4px; } `; this.container.appendChild(this.contentContainer); } addElement(name, content) { // Regular element container const elementContainer = document.createElement('div'); elementContainer.className = 'tutorial-element'; elementContainer.style.marginBottom = '20px'; elementContainer.style.padding = '15px'; elementContainer.style.backgroundColor = '#2a2a2a'; elementContainer.style.borderRadius = '8px'; elementContainer.style.border = `1px solid ${THEME.colors.accent}`; elementContainer.style.pointerEvents = 'auto'; // Add header if name is provided if (name && name !== 'main') { const header = document.createElement('div'); header.className = 'tutorial-element-header'; header.textContent = name; header.style.fontSize = '18px'; header.style.fontWeight = 'bold'; header.style.marginBottom = '10px'; header.style.padding = '5px'; header.style.borderBottom = `2px solid ${THEME.colors.separator}`; elementContainer.appendChild(header); } const contentDiv = document.createElement('div'); contentDiv.className = 'tutorial-element-content'; if (typeof content === 'object') { if (typeof content === 'object' && content.content) { contentDiv.innerHTML = this.convertMarkdownToHTML(content.content); contentDiv.style.fontSize = `${content.fontSize || '14'}px`; } else { contentDiv.innerHTML = this.convertMarkdownToHTML(content); contentDiv.style.fontSize = '14px'; } } elementContainer.appendChild(contentDiv); this.contentContainer.appendChild(elementContainer); } async loadTutorial(content) { if (!this.contentContainer) return; // Clear any existing event listeners const oldLinks = this.contentContainer.getElementsByClassName('custom-link'); Array.from(oldLinks).forEach(link => { link.replaceWith(link.cloneNode(true)); }); try { // Clear existing content this.contentContainer.innerHTML = ''; const parser = new MarkdownParser(content); const blocks = parser.getAllContentBlocks(); const images = parser.getAllImages(); const videos = parser.getAllVideos(); // Get the content in the order it appears in the original markdown const contentOrder = []; let currentPosition = 0; // Process the content sequentially by looking for block markers while (currentPosition < content.length) { const titleMatch = /<==([^=]+)==>/.exec(content.slice(currentPosition)); const contentMatch = /<--([^>]+)-->/.exec(content.slice(currentPosition)); const imageMatch = /<##([^#]+)##>/.exec(content.slice(currentPosition)); const textMatch = /<@@([^@]+)@@>/.exec(content.slice(currentPosition)); const videoMatch = /<\+\+([^+]+)\+\+>/.exec(content.slice(currentPosition)); let nextMatch = null; let type = null; let name = null; let position = Infinity; if (textMatch) { const textPosition = content.indexOf(textMatch[0], currentPosition); if (textPosition >= 0 && textPosition < position) { position = textPosition; nextMatch = textMatch; type = 'text'; name = `text_${textMatch[1]}`; } } if (titleMatch) { const titlePosition = content.indexOf(titleMatch[0], currentPosition); if (titlePosition >= 0 && titlePosition < position) { position = titlePosition; nextMatch = titleMatch; type = 'title'; name = `title_${titleMatch[1]}`; } } if (contentMatch) { const contentPosition = content.indexOf(contentMatch[0], currentPosition); if (contentPosition >= 0 && contentPosition < position) { position = contentPosition; nextMatch = contentMatch; type = 'content'; name = contentMatch[1]; } } if (imageMatch) { const imagePosition = content.indexOf(imageMatch[0], currentPosition); if (imagePosition >= 0 && imagePosition < position) { position = imagePosition; nextMatch = imageMatch; type = 'image'; name = imageMatch[1]; } } if (videoMatch) { const videoPosition = content.indexOf(videoMatch[0], currentPosition); if (videoPosition >= 0 && videoPosition < position) { position = videoPosition; nextMatch = videoMatch; type = 'video'; name = videoMatch[1]; } } if (nextMatch) { contentOrder.push({ type, name }); currentPosition = position + nextMatch[0].length; } else { break; } } // Check if there are any blocks if (contentOrder.length === 0) { const noBlocksElement = document.createElement('div'); noBlocksElement.style.padding = '20px'; noBlocksElement.style.backgroundColor = '#2a2a2a'; noBlocksElement.style.borderRadius = '8px'; noBlocksElement.style.border = `1px solid ${THEME.colors.accent}`; noBlocksElement.style.color = '#ffffff'; noBlocksElement.style.textAlign = 'center'; noBlocksElement.style.fontSize = '16px'; noBlocksElement.style.pointerEvents = 'none'; noBlocksElement.textContent = 'No content blocks found in this tutorial.'; this.contentContainer.appendChild(noBlocksElement); return; } // Process content in the order it was found for (const item of contentOrder) { switch (item.type) { case 'title': const titleContent = blocks[item.name]; if (titleContent) { this.addTitleElement(titleContent); } break; case 'text': const textContent = blocks[item.name]; if (textContent) { this.addTextBlock(textContent); } break; case 'content': let processedContent = blocks[item.name]; if (processedContent) { // Extract content string depending on whether it's an object or string const contentString = typeof processedContent === 'object' ? processedContent.content : processedContent; // Only process the content block if it's not just an image tag const isOnlyImage = /^<##[^#]+##>$/.test(contentString.trim()); if (!isOnlyImage) { this.addElement(item.name, processedContent); } } break; case 'image': const imageUrl = images[item.name]; if (imageUrl) { this.addImageElement(imageUrl, item.name); } break; case 'video': const videoUrl = videos[item.name]; if (videoUrl) { this.addVideoElement(videoUrl, item.name); } break; } } } catch (error) { console.error('Error parsing tutorial content:', error); this.contentContainer.innerHTML = '

Error loading tutorial content

'; } // Add event listeners to all links after content is loaded this.addEventListenersToLinks(); } convertMarkdownToHTML(markdown, fontSize = '14') { // Function to convert URLs to custom elements, excluding image URLs const convertURLs = (text) => { // Skip conversion if text contains image markdown if (text.includes('<##') && text.includes('##>')) { return text; } // Match content between [url] tags const urlRegex = /\[url\](.*?)\[\/url\]/g; return text.replace(urlRegex, (match, url) => { const safeUrl = MarkdownParser.sanitizeUrl(url); return ``; }); }; // Process the markdown content let html = markdown; // First process URLs to prevent interference with other markdown html = convertURLs(html); // Then process other markdown elements html = html.replace(/\*\*(.*?)\*\*/g, '$1') .replace(/\*(.*?)\*/g, '$1') .replace(/`([^`]+)`/g, '$1') .replace(/```([^`]+)```/g, '

$1

') // Handle line breaks .split('\n') .map(line => { // Check if line contains a list item with colon const listItemMatch = line.match(/^([^:]+):(.+)$/); if (listItemMatch) { return `

${listItemMatch[1]}:${convertURLs(listItemMatch[2])}

`; } return convertURLs(line); }) .join('
'); // Add styling html = `

${html}

`; return html; } addEventListenersToLinks() { // Find all custom link elements const customLinks = this.contentContainer.getElementsByClassName('custom-link'); // Add click event listeners to each custom link Array.from(customLinks).forEach(link => { // Remove previous event listeners if any exist const newLink = link.cloneNode(true); if (link.parentNode) { link.parentNode.replaceChild(newLink, link); } // Add new click listener newLink.addEventListener('click', async (e) => { e.preventDefault(); e.stopPropagation(); const url = newLink.dataset.url; if (url) { try { // Copy URL to clipboard await navigator.clipboard.writeText(url); // Create browser sandbox and load URL const browserSandbox = new BrowserSandbox(); const browser = browserSandbox.createBrowser(); if (browser) { browserSandbox.loadUrl(url); } // Create and show copy notification const notification = document.createElement('div'); notification.textContent = 'URL Copied & Opened!'; notification.style.position = 'fixed'; notification.style.backgroundColor = THEME.colors.accent; notification.style.color = '#ffffff'; notification.style.padding = '8px 16px'; notification.style.borderRadius = '4px'; notification.style.zIndex = '10000'; notification.style.transition = 'opacity 0.3s ease'; // Position the notification near the clicked link const rect = newLink.getBoundingClientRect(); notification.style.left = `${rect.left}px`; notification.style.top = `${rect.bottom + 5}px`; document.body.appendChild(notification); // Remove notification after 2 seconds setTimeout(() => { notification.style.opacity = '0'; setTimeout(() => { document.body.removeChild(notification); }, 300); }, 2000); } catch (err) { console.error('Failed to handle URL:', err); } } }); // Add hover effects newLink.addEventListener('mouseover', () => { newLink.style.color = THEME.colors.separator; newLink.style.borderBottomColor = THEME.colors.separator; }); newLink.addEventListener('mouseout', () => { newLink.style.color = THEME.colors.accent; newLink.style.borderBottomColor = THEME.colors.accent; }); }); } addTitleElement(titleData) { const titleContainer = document.createElement('div'); titleContainer.className = 'tutorial-title'; titleContainer.style.marginBottom = '15px'; titleContainer.style.padding = '10px'; titleContainer.style.backgroundColor = '#2a2a2a'; titleContainer.style.borderRadius = '8px'; titleContainer.style.border = `2px solid ${THEME.colors.accent}`; titleContainer.style.textAlign = 'center'; const titleText = document.createElement('h1'); const titleContent = typeof titleData === 'object' ? titleData.content : titleData; const fontSize = typeof titleData === 'object' ? titleData.fontSize : '28'; titleText.textContent = titleContent; titleText.style.margin = '0'; titleText.style.color = '#ffffff'; titleText.style.fontSize = `${fontSize}px`; titleText.style.fontWeight = 'bold'; titleContainer.appendChild(titleText); this.contentContainer.appendChild(titleContainer); } addTextBlock(content) { const textContainer = document.createElement('div'); textContainer.className = 'tutorial-element'; textContainer.style.marginBottom = '20px'; textContainer.style.padding = '15px'; textContainer.style.backgroundColor = '#2a2a2a'; textContainer.style.borderRadius = '8px'; textContainer.style.border = `1px solid ${THEME.colors.accent}`; textContainer.style.color = '#ffffff'; textContainer.style.pointerEvents = 'auto'; if (typeof content === 'object' && content.type === 'text') { const processedContent = content.content.trim(); textContainer.innerHTML = this.convertMarkdownToHTML(processedContent); textContainer.style.fontSize = `${content.fontSize || '14'}px`; } else { const processedContent = content.trim(); textContainer.innerHTML = this.convertMarkdownToHTML(processedContent); textContainer.style.fontSize = '14px'; } this.contentContainer.appendChild(textContainer); } addImageElement(imageUrl, altText = '') { const imageContainer = document.createElement('div'); imageContainer.className = 'tutorial-image'; imageContainer.style.marginBottom = '20px'; imageContainer.style.padding = '15px'; imageContainer.style.backgroundColor = '#2a2a2a'; imageContainer.style.borderRadius = '8px'; imageContainer.style.border = `1px solid ${THEME.colors.accent}`; imageContainer.style.textAlign = 'center'; imageContainer.style.position = 'relative'; const image = document.createElement('img'); image.src = imageUrl.replace(/&/g, '&'); // Handle encoded ampersands image.alt = altText; image.style.maxWidth = '100%'; image.style.height = 'auto'; image.style.borderRadius = '4px'; image.style.cursor = 'pointer'; // Extract description from altText if it contains the special syntax const descriptionMatch = altText.match(/<-(.+?)->/); if (descriptionMatch) { const description = descriptionMatch[1]; const descriptionContainer = document.createElement('div'); descriptionContainer.className = 'image-description'; descriptionContainer.textContent = description; descriptionContainer.style.position = 'absolute'; descriptionContainer.style.bottom = '15px'; descriptionContainer.style.left = '15px'; descriptionContainer.style.right = '15px'; descriptionContainer.style.backgroundColor = 'rgba(42, 42, 42, 0.95)'; descriptionContainer.style.color = '#ffffff'; descriptionContainer.style.padding = '12px 15px'; descriptionContainer.style.borderRadius = '8px'; descriptionContainer.style.fontSize = '14px'; descriptionContainer.style.textAlign = 'left'; descriptionContainer.style.transition = 'opacity 0.3s ease'; descriptionContainer.style.opacity = '0'; descriptionContainer.style.border = `1px solid ${THEME.colors.accent}`; descriptionContainer.style.maxHeight = '200px'; descriptionContainer.style.overflowY = 'auto'; // Add scrollbar styling descriptionContainer.style.scrollbarWidth = 'thin'; descriptionContainer.style.scrollbarColor = `${THEME.colors.accent} ${THEME.colors.categoryFill}`; // For Webkit browsers (Chrome, Safari, etc.) descriptionContainer.style.cssText += ` &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: ${THEME.colors.categoryFill}; } &::-webkit-scrollbar-thumb { background-color: ${THEME.colors.accent}; border-radius: 4px; } `; // Show description on hover imageContainer.addEventListener('mouseenter', () => { descriptionContainer.style.opacity = '1'; }); imageContainer.addEventListener('mouseleave', () => { descriptionContainer.style.opacity = '0'; }); imageContainer.appendChild(descriptionContainer); } // Add click handler for image modal image.addEventListener('click', (e) => { e.preventDefault(); e.stopPropagation(); this.openImageModal(imageUrl, altText); return false; }); imageContainer.appendChild(image); this.contentContainer.appendChild(imageContainer); } resize(width, height) { if (width !== undefined) { this.container.style.width = `${width}px`; } this.container.style.height = '100%'; } destroy() { if (this.container && this.container.parentNode) { this.container.parentNode.removeChild(this.container); } this.container = null; this.contentContainer = null; this.scene = null; } openImageModal(imageUrl, altText) { // Create modal container const modalContainer = document.createElement('div'); modalContainer.style.position = 'fixed'; modalContainer.style.top = '0'; modalContainer.style.left = '0'; modalContainer.style.width = '100%'; modalContainer.style.height = '100%'; modalContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; modalContainer.style.display = 'flex'; modalContainer.style.justifyContent = 'center'; modalContainer.style.alignItems = 'center'; modalContainer.style.zIndex = '10000'; // Create image container const imageContainer = document.createElement('div'); imageContainer.style.position = 'relative'; imageContainer.style.maxWidth = '90%'; imageContainer.style.maxHeight = '90%'; imageContainer.style.backgroundColor = '#2a2a2a'; imageContainer.style.padding = '20px'; imageContainer.style.borderRadius = '8px'; imageContainer.style.border = `2px solid ${THEME.colors.accent}`; // Create close button const closeButton = document.createElement('button'); closeButton.textContent = '×'; closeButton.style.position = 'absolute'; closeButton.style.right = '10px'; closeButton.style.top = '10px'; closeButton.style.width = '30px'; closeButton.style.height = '30px'; closeButton.style.backgroundColor = '#ff4444'; closeButton.style.border = 'none'; closeButton.style.borderRadius = '50%'; closeButton.style.color = '#fff'; closeButton.style.fontSize = '20px'; closeButton.style.cursor = 'pointer'; closeButton.style.zIndex = '10001'; // Create modal image const modalImage = document.createElement('img'); modalImage.src = imageUrl; modalImage.alt = altText; modalImage.style.maxWidth = '100%'; modalImage.style.maxHeight = 'calc(90vh - 40px)'; modalImage.style.objectFit = 'contain'; modalImage.style.borderRadius = '4px'; // Add click handlers closeButton.onclick = () => modalContainer.remove(); modalContainer.onclick = (e) => { if (e.target === modalContainer) { modalContainer.remove(); } }; // Assemble and display modal imageContainer.appendChild(modalImage); imageContainer.appendChild(closeButton); modalContainer.appendChild(imageContainer); document.body.appendChild(modalContainer); } addVideoElement(videoUrl, altText = '') { const videoContainer = document.createElement('div'); videoContainer.className = 'tutorial-video'; videoContainer.style.marginBottom = '20px'; videoContainer.style.padding = '15px'; videoContainer.style.backgroundColor = '#2a2a2a'; videoContainer.style.borderRadius = '8px'; videoContainer.style.border = `1px solid ${THEME.colors.accent}`; videoContainer.style.position = 'relative'; // Create iframe for video const videoFrame = document.createElement('iframe'); videoFrame.style.width = '100%'; videoFrame.style.aspectRatio = '16/9'; videoFrame.style.border = 'none'; videoFrame.style.borderRadius = '4px'; videoFrame.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'; videoFrame.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms'; // Extract video ID if it's a YouTube URL const youtubeRegex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/; const match = videoUrl.match(youtubeRegex); if (match && match[1]) { const videoId = match[1]; videoFrame.src = `https://www.youtube.com/embed/${videoId}`; videoFrame.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'; videoFrame.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms'; videoFrame.allowFullscreen = true; } else { console.warn('Invalid YouTube URL:', videoUrl); return; } // Extract description from altText if it contains the special syntax const descriptionMatch = altText.match(/<-(.+?)->/); if (descriptionMatch) { const description = descriptionMatch[1]; const descriptionContainer = document.createElement('div'); descriptionContainer.className = 'video-description'; descriptionContainer.textContent = description; descriptionContainer.style.marginTop = '10px'; descriptionContainer.style.padding = '12px 15px'; descriptionContainer.style.backgroundColor = 'rgba(42, 42, 42, 0.95)'; descriptionContainer.style.borderRadius = '8px'; descriptionContainer.style.color = '#ffffff'; descriptionContainer.style.fontSize = '14px'; descriptionContainer.style.border = `1px solid ${THEME.colors.accent}`; videoContainer.appendChild(descriptionContainer); } videoContainer.appendChild(videoFrame); this.contentContainer.appendChild(videoContainer); } } class InitializerScene { constructor() { this.init(); } init() { this.loadMonaco(); } loadMonaco() { if (window.monaco) { this.onMonacoLoaded(); return; } const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs/loader.min.js'; script.onload = () => { require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.30.1/min/vs' } }); require(['vs/editor/editor.main'], () => { this.onMonacoLoaded(); }); }; document.head.appendChild(script); } onMonacoLoaded() { new MainMenu(); } } class MenuElement { constructor(title, callback, image) { this.title = title; this.callback = callback; this.imageUrl = image; this.container = document.createElement('div'); this.init(); } init() { // Create container for this menu element this.container.style.margin = '0 20px'; this.container.style.display = 'inline-block'; this.container.style.verticalAlign = 'top'; this.container.style.padding = '10px'; this.container.style.border = `2px solid ${THEME.colors.accent}`; this.container.style.borderRadius = '12px'; this.container.style.backgroundColor = '#2a2a2a'; this.container.style.transition = 'all 0.3s ease'; this.container.style.cursor = this.callback ? 'pointer' : 'not-allowed'; // Add hover effects for the entire container // Create image container const imageContainer = document.createElement('div'); imageContainer.style.width = '200px'; imageContainer.style.height = '200px'; imageContainer.style.backgroundColor = '#2a2a2a'; imageContainer.style.marginBottom = '20px'; imageContainer.style.borderRadius = '8px'; if (this.imageUrl) { imageContainer.style.backgroundImage = `url('${this.imageUrl}')`; imageContainer.style.backgroundSize = 'cover'; imageContainer.style.backgroundPosition = 'center'; } this.container.appendChild(imageContainer); // Create button const button = document.createElement('button'); button.textContent = this.title; button.style.width = '200px'; button.style.padding = '15px 30px'; button.style.fontSize = '18px'; button.style.backgroundColor = THEME.colors.accent; button.style.color = '#ffffff'; button.style.border = 'none'; button.style.borderRadius = '8px'; button.style.cursor = this.callback ? 'pointer' : 'not-allowed'; button.style.transition = 'background-color 0.3s ease'; button.style.opacity = this.callback ? '1' : '0.5'; // Container click and hover handlers if (this.callback) { // Add click handler to entire container this.container.onclick = this.callback; // Add hover effects for button when container is hovered this.container.onmouseover = () => { button.style.backgroundColor = THEME.colors.separator; this.container.style.transform = 'translateY(-5px)'; this.container.style.boxShadow = '0 5px 15px rgba(74, 128, 180, 0.3)'; this.container.style.borderColor = THEME.colors.separator; }; this.container.onmouseout = () => { button.style.backgroundColor = THEME.colors.accent; this.container.style.transform = 'translateY(0)'; this.container.style.boxShadow = 'none'; this.container.style.borderColor = THEME.colors.accent; }; } this.container.appendChild(button); } } class MainMenu { constructor() { this.container = null; this.contentContainer = null; this.menuElements = []; this.init(); } init() { this.setupContainer(); this.createContentContainer(); this.createLaunchButton(); } setupContainer() { this.container = document.getElementById('renderDiv'); if (!this.container) { console.error('Render container not found!'); return; } this.container.style.backgroundImage = `url('https://play.rosebud.ai/assets/sword stone.png?gow6')`; this.container.style.backgroundSize = 'cover'; this.container.style.backgroundPosition = 'center'; this.container.style.width = '100%'; this.container.style.height = '100%'; } createContentContainer() { // Create welcome container const welcomeContainer = document.createElement('div'); welcomeContainer.style.position = 'absolute'; welcomeContainer.style.left = '50%'; welcomeContainer.style.top = '20%'; welcomeContainer.style.transform = 'translateX(-50%)'; welcomeContainer.style.textAlign = 'center'; welcomeContainer.style.padding = '30px 40px'; welcomeContainer.style.backgroundColor = 'rgba(58, 58, 74, 0.6)'; // More transparent version of categoryHeader welcomeContainer.style.backdropFilter = 'blur(8px)'; welcomeContainer.style.border = `2px solid ${THEME.colors.separator}`; welcomeContainer.style.borderRadius = '15px'; welcomeContainer.style.zIndex = '1'; welcomeContainer.style.minWidth = '600px'; // Create welcome title with animation const welcomeTitle = document.createElement('div'); welcomeTitle.textContent = 'LordBoots Code Library'; welcomeTitle.style.fontSize = '48px'; welcomeTitle.style.fontWeight = 'bold'; welcomeTitle.style.marginBottom = '15px'; welcomeTitle.style.color = '#ffffff'; welcomeTitle.style.animation = 'colorChange 8s infinite'; // Create welcome message const welcomeMessage = document.createElement('div'); welcomeMessage.textContent = 'A collection of bits and bobs to help you out on your Rosebud advanture!'; welcomeMessage.style.fontSize = '18px'; welcomeMessage.style.color = '#cccccc'; // Add animation style const style = document.createElement('style'); style.textContent = ` @keyframes colorChange { 0% { color: #ffffff; } 10% { color: ${THEME.colors.accent}; } 20% { color: #ff7b72; } 30% { color: ${THEME.colors.separator}; } 40% { color: #4ac4c0; } 50% { color: #c792ea; } 60% { color: #89ddff; } 70% { color: #f78c6c; } 80% { color: #82aaff; } 90% { color: #c3e88d; } 100% { color: #ffffff; } } `; document.head.appendChild(style); // Add welcome elements to welcome container welcomeContainer.appendChild(welcomeTitle); welcomeContainer.appendChild(welcomeMessage); this.container.appendChild(welcomeContainer); // Create main content container this.contentContainer = document.createElement('div'); this.contentContainer.style.position = 'absolute'; this.contentContainer.style.left = '50%'; this.contentContainer.style.top = '60%'; this.contentContainer.style.transform = 'translate(-50%, -50%)'; this.contentContainer.style.textAlign = 'center'; this.contentContainer.style.padding = '40px 20px'; this.contentContainer.style.backgroundColor = 'rgba(42, 42, 58, 0.6)'; // More transparent version of categoryFill this.contentContainer.style.backdropFilter = 'blur(8px)'; this.contentContainer.style.border = `2px solid ${THEME.colors.accent}`; this.contentContainer.style.borderRadius = '15px'; this.contentContainer.style.whiteSpace = 'nowrap'; this.contentContainer.style.overflowX = 'auto'; this.container.appendChild(this.contentContainer); } createLaunchButton() { // Code Library const codeLibrary = new MenuElement( 'Code Library', () => { this.destroy(); window.mainApp = new Main(); }, 'https://play.rosebud.ai/assets/Dark themed pattern.png?1YHr' ); // Shader Library const shaderLibrary = new MenuElement( 'Shader Library', null, 'https://play.rosebud.ai/assets/A dark themed, patterns.png?0W5r' ); // Coming Soon buttons const phaserCode = new MenuElement( 'Phaser Code', () => { this.destroy(); window.mainApp = new Main('phaser'); }, 'https://play.rosebud.ai/assets/Dark themed pattern.png?1YHr' ); const threejsCode = new MenuElement( 'ThreeJS Code', () => { this.destroy(); window.mainApp = new Main('threejs'); }, 'https://play.rosebud.ai/assets/A dark themed, patterns.png?0W5r' ); const phaserGames = new MenuElement( 'Phaser Games', () => { this.destroy(); window.mainApp = new Main('phaser-games'); }, 'https://play.rosebud.ai/assets/A dark themed, patterns.png?jZhq' ); const threejsGames = new MenuElement( 'ThreeJS Games', () => { this.destroy(); window.mainApp = new Main('threejs-games'); }, 'https://play.rosebud.ai/assets/A dark themed, patterns.png?3tTJ' ); const templates = new MenuElement( 'Templates', () => { this.destroy(); window.mainApp = new Main('templates'); }, 'https://play.rosebud.ai/assets/A dark themed, patterns.png?sl4I' ); const shaders = new MenuElement( 'Shaders', () => { this.destroy(); window.mainApp = new Main('shader'); }, 'https://play.rosebud.ai/assets/A dark themed, patterns.png?cVHo' ); this.menuElements = [phaserCode, threejsCode, phaserGames, threejsGames, templates, shaders]; this.menuElements.forEach(element => { this.contentContainer.appendChild(element.container); }); // Create experiments button container const experimentsContainer = document.createElement('div'); experimentsContainer.style.position = 'absolute'; experimentsContainer.style.left = '50%'; experimentsContainer.style.bottom = '5%'; experimentsContainer.style.transform = 'translateX(-50%)'; experimentsContainer.style.textAlign = 'center'; experimentsContainer.style.display = 'flex'; experimentsContainer.style.flexDirection = 'column'; experimentsContainer.style.gap = '10px'; // Create Tutorials button const tutorialsButton = document.createElement('div'); tutorialsButton.style.padding = '15px 40px'; tutorialsButton.style.backgroundColor = '#2d2d2d'; tutorialsButton.style.border = `2px solid ${THEME.colors.separator}`; tutorialsButton.style.borderRadius = '12px'; tutorialsButton.style.cursor = 'pointer'; tutorialsButton.style.display = 'inline-block'; tutorialsButton.style.transition = 'all 0.3s ease'; const tutorialButtonText = document.createElement('span'); tutorialButtonText.textContent = 'Tutorials'; tutorialButtonText.style.fontSize = '24px'; tutorialButtonText.style.color = '#ffffff'; tutorialButtonText.style.fontWeight = 'bold'; tutorialsButton.appendChild(tutorialButtonText); // Add hover effects for tutorials button tutorialsButton.onmouseover = () => { tutorialsButton.style.backgroundColor = THEME.colors.categoryHeader; tutorialsButton.style.transform = 'translateY(-2px)'; tutorialsButton.style.boxShadow = '0 4px 15px rgba(74, 196, 192, 0.3)'; }; tutorialsButton.onmouseout = () => { tutorialsButton.style.backgroundColor = '#2d2d2d'; tutorialsButton.style.transform = 'translateY(0)'; tutorialsButton.style.boxShadow = 'none'; }; // Add click handler for tutorials tutorialsButton.onclick = () => { this.destroy(); window.mainApp = new Main('tutorials'); }; const experimentsButton = document.createElement('div'); experimentsButton.style.padding = '15px 40px'; experimentsButton.style.backgroundColor = '#2d2d2d'; experimentsButton.style.border = `2px solid ${THEME.colors.separator}`; experimentsButton.style.borderRadius = '12px'; experimentsButton.style.cursor = 'pointer'; experimentsButton.style.display = 'inline-block'; experimentsButton.style.transition = 'all 0.3s ease'; const experimentButtonText = document.createElement('span'); experimentButtonText.textContent = 'Experiments'; experimentButtonText.style.fontSize = '24px'; experimentButtonText.style.color = '#ffffff'; experimentButtonText.style.fontWeight = 'bold'; experimentsButton.appendChild(experimentButtonText); // Add hover effects experimentsButton.onmouseover = () => { experimentsButton.style.backgroundColor = THEME.colors.categoryHeader; experimentsButton.style.transform = 'translateY(-2px)'; experimentsButton.style.boxShadow = '0 4px 15px rgba(74, 196, 192, 0.3)'; }; experimentsButton.onmouseout = () => { experimentsButton.style.backgroundColor = '#2d2d2d'; experimentsButton.style.transform = 'translateY(0)'; experimentsButton.style.boxShadow = 'none'; }; // Add click handler experimentsButton.onclick = () => { this.destroy(); window.mainApp = new Main('experiments'); }; // Add buttons to container experimentsContainer.appendChild(tutorialsButton); experimentsContainer.appendChild(experimentsButton); this.container.appendChild(experimentsContainer); } destroy() { // Remove content container if (this.contentContainer && this.contentContainer.parentNode) { this.contentContainer.parentNode.removeChild(this.contentContainer); } // Remove experiments container const experimentsContainer = this.container.querySelector('div[style*="bottom: 5%"]'); if (experimentsContainer && experimentsContainer.parentNode) { experimentsContainer.parentNode.removeChild(experimentsContainer); } // Remove welcome container const welcomeContainer = this.container.querySelector('div[style*="top: 20%"]'); if (welcomeContainer && welcomeContainer.parentNode) { welcomeContainer.parentNode.removeChild(welcomeContainer); } // Clear references this.container = null; this.contentContainer = null; } } class Main { constructor(category = 'all') { this.codeLibrary = null; this.contentContainer = null; this.category = category; this.scriptsToUse = this.getScriptsForCategory(category); this.testUrls = [ 'https://play.rosebud.ai/demo?type=graph&eq=sin(x)', 'https://play.rosebud.ai/demo?type=graph&eq=x^2', 'https://play.rosebud.ai/demo?type=animation&anim=circle', 'https://play.rosebud.ai/demo?type=animation&anim=particle' ]; this.init(); } getScriptsForCategory(category) { switch (category) { case 'phaser': return PHASER_CODE; case 'threejs': return THREEJS_CODE; case 'shader': return SHADER_SCRIPTS; case 'experiments': return EXPERIMENTS_SCRIPTS; case 'templates': return TEMPLATES_SCRIPTS; case 'tutorials': return TUTORIAL_SCRIPTS; case 'phaser-games': return PHASER_GAMES; case 'threejs-games': return THREEJS_GAMES; default: return {}; } } getSectionTitle() { switch (this.category) { case 'phaser': return 'Phaser Code Library'; case 'threejs': return 'ThreeJS Code Library'; case 'shader': return 'Shader Library'; case 'experiments': return 'Experiments Laboratory'; case 'templates': return 'Templates Library'; case 'phaser-games': return 'Phaser Games Library'; case 'threejs-games': return 'ThreeJS Games Library'; case 'tutorials': return 'Tutorials'; default: return 'Code Library'; } } init() { this.setupContainer(); this.addCodeLibrary(); this.addCoveView(); this.setupEventListeners(); this.setupTestBrowser(); this.loadOpeningScript(); } setupContainer() { const container = document.getElementById('renderDiv'); if (!container) { console.error('Render container not found!'); return; } // Create main content container with flex layout this.contentContainer = document.createElement('div'); this.contentContainer.style.position = 'absolute'; this.contentContainer.style.inset = '2%'; // shorthand for top/right/bottom/left this.contentContainer.style.display = 'flex'; this.contentContainer.style.flexDirection = 'column'; this.contentContainer.style.gap = '20px'; this.contentContainer.style.backgroundColor = 'rgba(42, 42, 58, 0.6)'; this.contentContainer.style.backdropFilter = 'blur(8px)'; this.contentContainer.style.border = `2px solid ${THEME.colors.accent}`; this.contentContainer.style.borderRadius = '15px'; this.contentContainer.style.boxSizing = 'border-box'; container.appendChild(this.contentContainer); // Create top bar region this.topBarRegion = document.createElement('div'); this.topBarRegion.style.height = '60px'; this.topBarRegion.style.backgroundColor = THEME.colors.categoryHeader; this.topBarRegion.style.borderRadius = '8px'; this.topBarRegion.style.display = 'flex'; this.topBarRegion.style.alignItems = 'center'; this.topBarRegion.style.padding = '0 20px'; this.topBarRegion.style.color = '#ffffff'; this.topBarRegion.style.fontSize = '24px'; this.topBarRegion.style.fontWeight = 'bold'; // Create main menu button const mainMenuButton = document.createElement('button'); mainMenuButton.textContent = 'Back'; mainMenuButton.style.padding = '8px 16px'; mainMenuButton.style.fontSize = '16px'; mainMenuButton.style.backgroundColor = THEME.colors.accent; mainMenuButton.style.color = '#ffffff'; mainMenuButton.style.border = 'none'; mainMenuButton.style.borderRadius = '6px'; mainMenuButton.style.cursor = 'pointer'; mainMenuButton.style.transition = 'background-color 0.3s ease'; mainMenuButton.style.marginRight = '20px'; mainMenuButton.onmouseover = () => { mainMenuButton.style.backgroundColor = THEME.colors.separator; }; mainMenuButton.onmouseout = () => { mainMenuButton.style.backgroundColor = THEME.colors.accent; }; mainMenuButton.onclick = () => { if (this.codeLibrary) { this.codeLibrary.destroy(); } if (this.codeView) { this.codeView.destroy(); } if (this.contentContainer && this.contentContainer.parentNode) { this.contentContainer.parentNode.removeChild(this.contentContainer); } new MainMenu(); }; // Create section title element const sectionTitle = document.createElement('div'); sectionTitle.textContent = this.getSectionTitle(); sectionTitle.style.width = '100%'; sectionTitle.style.textAlign = 'center'; // Add button and title to top bar this.topBarRegion.appendChild(mainMenuButton); this.topBarRegion.appendChild(sectionTitle); // Create main content region for library and code view const mainContentRegion = document.createElement('div'); mainContentRegion.style.display = 'flex'; mainContentRegion.style.gap = '20px'; mainContentRegion.style.flex = '1'; mainContentRegion.style.minHeight = '0'; // Allow proper shrinking // Create flex regions for library and code view this.libraryRegion = document.createElement('div'); this.libraryRegion.style.flex = '1'; this.libraryRegion.style.minWidth = '0'; // Allow proper shrinking this.libraryRegion.style.padding = '20px'; this.libraryRegion.style.boxSizing = 'border-box'; this.codeViewRegion = document.createElement('div'); this.codeViewRegion.style.flex = '1'; this.codeViewRegion.style.minWidth = '0'; // Allow proper shrinking this.codeViewRegion.style.padding = '20px'; this.codeViewRegion.style.boxSizing = 'border-box'; mainContentRegion.appendChild(this.libraryRegion); mainContentRegion.appendChild(this.codeViewRegion); // Add regions to content container this.contentContainer.appendChild(this.topBarRegion); this.contentContainer.appendChild(mainContentRegion); } setupEventListeners() { // Add other event listeners here } setupTestBrowser() { // Add keyboard event listener for testing browser document.addEventListener('keydown', (event) => { // Press 'T' to test browser if (event.key === 't' || event.key === 'T') { this.testBrowser(); } }); } testBrowser() { if (this.codeLibrary) { // Create browser instance const browser = this.codeLibrary.createBrowser(); if (browser && browser.content) { // Get random URL from test URLs const randomUrl = this.testUrls[Math.floor(Math.random() * this.testUrls.length)]; // Load random URL browser.content.src = randomUrl; if (browser.urlBar) { browser.urlBar.value = randomUrl; } console.log('Test browser launched with URL:', randomUrl); } } } loadOpeningScript() { // Removed opening script functionality } addCoveView() { if (!this.contentContainer) return; if (this.category === 'tutorials') { // Create Tutorial Viewer for tutorials category this.tutorialViewer = new TutorialViewer( this, 0, 0, this.codeViewRegion.clientWidth, this.codeViewRegion.clientHeight ); this.codeViewRegion.appendChild(this.tutorialViewer.container); } else { // Create Code View for other categories this.codeView = new CodeView( this, 0, 0, this.codeViewRegion.clientWidth, this.codeViewRegion.clientHeight, 'javascript', true, (code) => this.codeLibrary.loadGameScript(code, this.codeView.scriptType), 'none' ); this.codeViewRegion.appendChild(this.codeView.container); } } addCodeLibrary() { if (!this.contentContainer) return; // Subtract padding from width and height const padding = 40; // 20px padding on each side this.codeLibrary = new CodeLibrary( this, 0, 0, this.libraryRegion.clientWidth - padding, this.libraryRegion.clientHeight - padding ); this.libraryRegion.appendChild(this.codeLibrary.categoriesContainer); } } class BrowserSandbox { constructor() { this.modalContainer = null; this.browser = null; this.history = []; this.currentHistoryIndex = -1; } createBrowser() { try { this.modalContainer = document.createElement('div'); this.modalContainer.style.position = 'fixed'; this.modalContainer.style.top = '0'; this.modalContainer.style.left = '0'; this.modalContainer.style.width = '100%'; this.modalContainer.style.height = '100%'; this.modalContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; this.modalContainer.style.zIndex = '9999'; this.modalContainer.style.display = 'flex'; this.modalContainer.style.justifyContent = 'center'; this.modalContainer.style.alignItems = 'center'; const browserContainer = document.createElement('div'); browserContainer.style.position = 'relative'; browserContainer.style.width = '80%'; browserContainer.style.height = '80%'; browserContainer.style.backgroundColor = '#1e1e1e'; browserContainer.style.maxWidth = '1600px'; browserContainer.style.maxHeight = '900px'; browserContainer.style.border = `3px solid ${THEME.colors.accent}`; browserContainer.style.borderRadius = '15px'; browserContainer.style.overflow = 'hidden'; // Create toolbar const toolbar = this.createToolbar(); browserContainer.appendChild(toolbar); // Create iframe for content const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = 'calc(100% - 40px)'; iframe.style.border = 'none'; iframe.style.backgroundColor = '#ffffff'; iframe.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox'; iframe.allow = 'fullscreen'; iframe.referrerPolicy = 'no-referrer'; iframe.src = 'about:blank'; // Add scrollbar styling iframe.style.scrollbarWidth = 'thin'; iframe.style.scrollbarColor = `${THEME.colors.accent} ${THEME.colors.categoryFill}`; // For Webkit browsers (Chrome, Safari, etc.) iframe.style.cssText += ` &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: ${THEME.colors.categoryFill}; } &::-webkit-scrollbar-thumb { background-color: ${THEME.colors.accent}; border-radius: 4px; } `; browserContainer.appendChild(iframe); this.modalContainer.appendChild(browserContainer); document.body.appendChild(this.modalContainer); // Store browser reference this.browser = { container: browserContainer, content: iframe, urlBar: toolbar.querySelector('input'), close: () => this.cleanup() }; return this.browser; } catch (error) { console.error('Error creating browser:', error); this.cleanup(); return null; } } createBrowserContainer() { const container = document.createElement('div'); container.style.width = '100%'; container.style.height = '100%'; container.style.display = 'flex'; container.style.flexDirection = 'column'; // Create toolbar const toolbar = this.createToolbar(); container.appendChild(toolbar); // Create content area const contentArea = this.createContentArea(); container.appendChild(contentArea); return container; } createToolbar() { const toolbar = document.createElement('div'); toolbar.style.height = '40px'; toolbar.style.backgroundColor = '#2d2d2d'; toolbar.style.display = 'flex'; toolbar.style.alignItems = 'center'; toolbar.style.padding = '0 10px'; // Navigation buttons const backButton = BrowserSandbox.createNavButton('←'); const forwardButton = BrowserSandbox.createNavButton('→'); const refreshButton = BrowserSandbox.createNavButton('↻'); const closeButton = BrowserSandbox.createNavButton('×'); // URL bar const urlBar = document.createElement('input'); urlBar.type = 'text'; urlBar.style.flex = '1'; urlBar.style.margin = '0 10px'; urlBar.style.padding = '5px'; urlBar.style.backgroundColor = '#3d3d3d'; urlBar.style.border = 'none'; urlBar.style.color = '#fff'; // Add event listeners this.setupToolbarEventListeners(urlBar, backButton, forwardButton, refreshButton, closeButton); // Assemble toolbar toolbar.appendChild(backButton); toolbar.appendChild(forwardButton); toolbar.appendChild(refreshButton); toolbar.appendChild(urlBar); toolbar.appendChild(closeButton); return toolbar; } createContentArea() { const iframe = document.createElement('iframe'); iframe.style.width = '100%'; iframe.style.height = 'calc(100% - 40px)'; iframe.style.border = 'none'; iframe.style.backgroundColor = '#ffffff'; iframe.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox'; iframe.allow = 'fullscreen'; iframe.referrerPolicy = 'no-referrer'; iframe.src = 'about:blank'; // Add scrollbar styling iframe.style.scrollbarWidth = 'thin'; iframe.style.scrollbarColor = `${THEME.colors.accent} ${THEME.colors.categoryFill}`; // For Webkit browsers (Chrome, Safari, etc.) iframe.style.cssText += ` &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: ${THEME.colors.categoryFill}; } &::-webkit-scrollbar-thumb { background-color: ${THEME.colors.accent}; border-radius: 4px; } `; return iframe; } setupToolbarEventListeners(urlBar, backButton, forwardButton, refreshButton, closeButton) { urlBar.addEventListener('keypress', (e) => { if (e.key === 'Enter') { this.loadUrl(urlBar.value); } }); backButton.addEventListener('click', () => this.navigateBack()); forwardButton.addEventListener('click', () => this.navigateForward()); refreshButton.addEventListener('click', () => this.refresh()); closeButton.addEventListener('click', () => this.cleanup()); } async loadUrl(url) { try { if (this.browser?.content) { // Ensure URL is properly sanitized const formattedUrl = MarkdownParser.sanitizeUrl(url); // Configure iframe this.browser.content.sandbox = 'allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox'; this.browser.content.src = formattedUrl; // Update history this.currentHistoryIndex++; this.history.splice(this.currentHistoryIndex); this.history.push({ url: formattedUrl, content: formattedUrl }); // Update URL bar if (this.browser?.urlBar) { this.browser.urlBar.value = formattedUrl; } console.log('Loading URL:', formattedUrl); } } catch (error) { console.error('Error loading URL:', error); } } loadContent(content) { if (this.browser?.content) { this.browser.content.src = content; } } navigateBack() { if (this.currentHistoryIndex > 0) { this.currentHistoryIndex--; const { url, content } = this.history[this.currentHistoryIndex]; if (this.browser?.urlBar) this.browser.urlBar.value = url; this.loadContent(content); } } navigateForward() { if (this.currentHistoryIndex < this.history.length - 1) { this.currentHistoryIndex++; const { url, content } = this.history[this.currentHistoryIndex]; if (this.browser?.urlBar) this.browser.urlBar.value = url; this.loadContent(content); } } refresh() { if (this.currentHistoryIndex >= 0) { const { url } = this.history[this.currentHistoryIndex]; this.loadUrl(url); } } cleanup() { if (this.modalContainer && this.modalContainer.parentNode) { this.modalContainer.parentNode.removeChild(this.modalContainer); } this.modalContainer = null; this.browser = null; this.history = []; this.currentHistoryIndex = -1; } static createNavButton(text) { const button = document.createElement('button'); button.textContent = text; button.style.width = '30px'; button.style.height = '30px'; button.style.margin = '0 5px'; button.style.backgroundColor = '#3d3d3d'; button.style.border = 'none'; button.style.color = '#fff'; button.style.cursor = 'pointer'; button.style.borderRadius = '4px'; button.style.transition = 'background-color 0.3s ease'; button.addEventListener('mouseover', () => { button.style.backgroundColor = '#4d4d4d'; }); button.addEventListener('mouseout', () => { button.style.backgroundColor = '#3d3d3d'; }); return button; } } // Initialize when document is ready if (document.readyState === 'complete') { new InitializerScene(); } else { window.addEventListener('load', () => new InitializerScene()); }