import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; // Define ASSETS array const ASSETS = [{ "name": "play", "shortid": "4xHr", "file_type": "png", "url": "https://play.rosebud.ai/assets/play.png?4xHr" }]; // Function to load texture from asset function loadTextureFromAsset(assetName) { const asset = ASSETS.find(a => a.name === assetName); if (asset) { return textureLoader.load(asset.url); } return null; } // Function to apply texture to a part function applyTextureToPart(part, textureName) { const texture = loadTextureFromAsset(textureName); if (texture) { part.mesh.material.map = texture; part.mesh.material.needsUpdate = true; } } // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); let assetsLoaded = false; const parentDiv = document.getElementById('renderDiv'); // Create AI interface container const aiContainer = document.createElement('div'); aiContainer.style.position = 'absolute'; aiContainer.style.top = '0'; aiContainer.style.left = '0'; aiContainer.style.width = '50%'; aiContainer.style.height = '100%'; aiContainer.style.backgroundColor = '#1e1e1e'; aiContainer.style.color = 'white'; aiContainer.style.overflow = 'auto'; aiContainer.style.padding = '20px'; aiContainer.style.boxSizing = 'border-box'; parentDiv.appendChild(aiContainer); // Create chat container const chatContainer = document.createElement('div'); chatContainer.style.height = 'calc(100% - 60px)'; chatContainer.style.overflowY = 'auto'; chatContainer.style.marginBottom = '10px'; aiContainer.appendChild(chatContainer); // Create input container const inputContainer = document.createElement('div'); inputContainer.style.display = 'flex'; inputContainer.style.alignItems = 'center'; aiContainer.appendChild(inputContainer); // Create input field const inputField = document.createElement('input'); inputField.type = 'text'; inputField.placeholder = 'Talk to AI...'; inputField.style.flex = '1'; inputField.style.padding = '10px'; inputField.style.backgroundColor = '#333'; inputField.style.color = 'white'; inputField.style.border = '1px solid white'; inputField.style.borderRadius = '5px'; inputContainer.appendChild(inputField); // Create submit button const submitButton = document.createElement('button'); submitButton.innerHTML = '↑'; // Up arrow character submitButton.style.marginLeft = '10px'; submitButton.style.padding = '10px'; submitButton.style.width = '44px'; submitButton.style.height = '44px'; submitButton.style.backgroundColor = '#333'; submitButton.style.color = '#666'; submitButton.style.border = 'none'; submitButton.style.borderRadius = '12px'; submitButton.style.cursor = 'pointer'; submitButton.style.display = 'flex'; submitButton.style.alignItems = 'center'; submitButton.style.justifyContent = 'center'; submitButton.style.fontSize = '20px'; submitButton.style.transition = 'background-color 0.3s, color 0.3s'; inputContainer.appendChild(submitButton); // Create tabbed interface container const tabbedInterface = document.createElement('div'); tabbedInterface.style.position = 'absolute'; tabbedInterface.style.top = '0'; tabbedInterface.style.left = '50%'; tabbedInterface.style.width = '50%'; tabbedInterface.style.height = '30px'; tabbedInterface.style.backgroundColor = '#1e1e1e'; tabbedInterface.style.display = 'flex'; tabbedInterface.style.borderBottom = '1px solid #333'; parentDiv.appendChild(tabbedInterface); // Create tabs const tabs = ['PREVIEW', 'ASSETS', 'CODE']; const tabElements = {}; tabs.forEach((tabName, index) => { const tab = document.createElement('div'); tab.textContent = tabName; tab.style.padding = '5px 10px'; tab.style.cursor = 'pointer'; tab.style.color = index === 0 ? '#fff' : '#999'; tab.style.borderBottom = index === 0 ? '2px solid #fff' : 'none'; tab.addEventListener('click', () => switchTab(tabName)); tabbedInterface.appendChild(tab); tabElements[tabName] = tab; }); // Create tab content containers const previewContainer = document.createElement('div'); const assetsContainer = document.createElement('div'); const codeContainer = document.createElement('div'); [previewContainer, assetsContainer, codeContainer].forEach(container => { container.style.position = 'absolute'; container.style.top = '30px'; container.style.left = '50%'; container.style.width = '50%'; container.style.height = 'calc(100% - 30px)'; container.style.backgroundColor = '#1e1e1e'; container.style.display = 'none'; parentDiv.appendChild(container); }); previewContainer.style.display = 'block'; // Function to switch between tabs function switchTab(tabName) { [previewContainer, assetsContainer, codeContainer].forEach(container => { container.style.display = 'none'; }); Object.values(tabElements).forEach(tab => { tab.style.color = '#999'; tab.style.borderBottom = 'none'; }); if (tabName === 'PREVIEW') { previewContainer.style.display = 'block'; } else if (tabName === 'ASSETS') { assetsContainer.style.display = 'block'; } else if (tabName === 'CODE') { codeContainer.style.display = 'block'; displayGameCode(); } tabElements[tabName].style.color = '#fff'; tabElements[tabName].style.borderBottom = '2px solid #fff'; } function displayGameCode() { codeContainer.innerHTML = ''; const pre = document.createElement('pre'); pre.style.margin = '0'; pre.style.padding = '10px'; pre.style.whiteSpace = 'pre-wrap'; pre.style.wordWrap = 'break-word'; pre.style.backgroundColor = '#1e1e1e'; pre.style.color = '#d4d4d4'; pre.style.fontFamily = 'monospace'; pre.style.fontSize = '14px'; pre.style.lineHeight = '1.5'; pre.style.overflow = 'auto'; pre.style.height = '100%'; // Collect all functions that are part of the game logic const gameFunctions = [ createTerrain, animate, onWindowResize, handlePlayerInput, analyzeInput, executeCommands, executeSingleCommand, createPart, deleteAllParts, changePartColor, getColorFromName, toggleGravity, rotateCameraLeft, rotateCameraRight, zoomIn, zoomOut, changeSkyColor, toggleWireframe, createSphere, createCylinder, changeGroundTexture, toggleShadows, increasePartSize, decreasePartSize, applyForceUp, applyForceForward, toggleSlowMotion ]; // Combine all function definitions into a single string const gameCode = gameFunctions.map(func => func.toString()).join('\n\n'); pre.textContent = gameCode; codeContainer.appendChild(pre); } // Adjust canvas position and size let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; previewContainer.appendChild(canvas); } canvas.style.width = '100%'; canvas.style.height = '100%'; // Create upload asset button const uploadAssetButton = document.createElement('button'); uploadAssetButton.textContent = 'Upload Asset'; uploadAssetButton.style.position = 'absolute'; uploadAssetButton.style.top = '10px'; uploadAssetButton.style.left = '10px'; uploadAssetButton.style.padding = '5px 10px'; uploadAssetButton.style.backgroundColor = '#4a4a4a'; uploadAssetButton.style.color = '#fff'; uploadAssetButton.style.border = 'none'; uploadAssetButton.style.borderRadius = '3px'; uploadAssetButton.style.cursor = 'pointer'; assetsContainer.appendChild(uploadAssetButton); // Create upload asset modal const modal = document.createElement('div'); modal.style.display = 'none'; modal.style.position = 'fixed'; modal.style.zIndex = '1001'; modal.style.left = '0'; modal.style.top = '0'; modal.style.width = '100%'; modal.style.height = '100%'; modal.style.backgroundColor = 'rgba(0,0,0,0.5)'; const modalContent = document.createElement('div'); modalContent.style.backgroundColor = '#2a1e45'; modalContent.style.margin = '15% auto'; modalContent.style.padding = '20px'; modalContent.style.border = '1px solid #888'; modalContent.style.width = '50%'; modalContent.style.borderRadius = '5px'; modalContent.style.boxShadow = '0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)'; const modalTitle = document.createElement('h2'); modalTitle.textContent = 'Upload Asset'; modalTitle.style.color = '#fff'; modalTitle.style.marginBottom = '20px'; const modalInstructions = document.createElement('p'); modalInstructions.textContent = 'Paste an asset URL link or drag and drop a file to upload an asset. Files must be under 4MB in size.'; modalInstructions.style.color = '#ddd'; modalInstructions.style.marginBottom = '15px'; const urlInput = document.createElement('input'); urlInput.type = 'text'; urlInput.placeholder = 'Enter asset URL'; urlInput.style.width = '70%'; urlInput.style.padding = '5px'; urlInput.style.marginRight = '10px'; const uploadButton = document.createElement('button'); uploadButton.textContent = 'Upload'; uploadButton.style.padding = '5px 10px'; uploadButton.style.backgroundColor = '#6c5ce7'; uploadButton.style.color = '#fff'; uploadButton.style.border = 'none'; uploadButton.style.borderRadius = '3px'; uploadButton.style.cursor = 'pointer'; const divider = document.createElement('hr'); divider.style.margin = '20px 0'; divider.style.border = '0'; divider.style.borderTop = '1px solid #ddd'; const dropZone = document.createElement('div'); dropZone.textContent = 'Drag and drop files here or click to browse'; dropZone.style.border = '2px dashed #ddd'; dropZone.style.borderRadius = '5px'; dropZone.style.padding = '20px'; dropZone.style.textAlign = 'center'; dropZone.style.color = '#ddd'; dropZone.style.cursor = 'pointer'; modalContent.appendChild(modalTitle); modalContent.appendChild(modalInstructions); modalContent.appendChild(urlInput); modalContent.appendChild(uploadButton); modalContent.appendChild(divider); modalContent.appendChild(dropZone); modal.appendChild(modalContent); document.body.appendChild(modal); // Event listeners for modal uploadAssetButton.addEventListener('click', () => { modal.style.display = 'block'; }); window.addEventListener('click', (event) => { if (event.target === modal) { modal.style.display = 'none'; } }); uploadButton.addEventListener('click', () => { const assetUrl = urlInput.value.trim(); if (assetUrl) { uploadAsset(assetUrl); modal.style.display = 'none'; urlInput.value = ''; } }); function uploadAsset(url) { const assetName = url.split('/').pop().split('?')[0]; const asset = { url, name: assetName }; ASSETS.push(asset); displayAssets(); } function displayAssets() { assetsContainer.innerHTML = ''; const gridContainer = document.createElement('div'); gridContainer.style.display = 'grid'; gridContainer.style.gridTemplateColumns = 'repeat(auto-fill, minmax(150px, 1fr))'; gridContainer.style.gap = '20px'; gridContainer.style.padding = '20px'; ASSETS.forEach((asset, index) => { const assetElement = document.createElement('div'); assetElement.style.border = '1px solid #444'; assetElement.style.borderRadius = '5px'; assetElement.style.padding = '10px'; assetElement.style.position = 'relative'; assetElement.style.transition = 'background-color 0.3s'; const img = document.createElement('img'); img.src = asset.url; img.style.width = '100%'; img.style.height = '120px'; img.style.objectFit = 'cover'; img.style.borderRadius = '3px'; const name = document.createElement('div'); name.textContent = asset.name; name.style.position = 'absolute'; name.style.bottom = '10px'; name.style.left = '0'; name.style.right = '0'; name.style.textAlign = 'center'; name.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; name.style.color = 'white'; name.style.padding = '5px'; name.style.fontSize = '12px'; name.style.overflow = 'hidden'; name.style.textOverflow = 'ellipsis'; name.style.whiteSpace = 'nowrap'; const iconContainer = document.createElement('div'); iconContainer.style.position = 'absolute'; iconContainer.style.top = '10px'; iconContainer.style.right = '10px'; iconContainer.style.display = 'flex'; iconContainer.style.flexDirection = 'column'; iconContainer.style.gap = '5px'; const copyIcon = createIcon('📋', 'Copy URL'); const renameIcon = createIcon('✏️', 'Rename'); const deleteIcon = createIcon('🗑️', 'Delete'); iconContainer.appendChild(copyIcon); iconContainer.appendChild(renameIcon); iconContainer.appendChild(deleteIcon); assetElement.appendChild(img); assetElement.appendChild(name); assetElement.appendChild(iconContainer); assetElement.addEventListener('mouseover', () => { assetElement.style.backgroundColor = 'rgba(128, 0, 128, 0.2)'; }); assetElement.addEventListener('mouseout', () => { assetElement.style.backgroundColor = 'transparent'; }); copyIcon.addEventListener('click', (e) => { e.stopPropagation(); copyAssetURL(asset.url, copyIcon); }); renameIcon.addEventListener('click', (e) => { e.stopPropagation(); renameAsset(index, name); }); deleteIcon.addEventListener('click', (e) => { e.stopPropagation(); deleteAsset(index); }); gridContainer.appendChild(assetElement); }); assetsContainer.appendChild(gridContainer); } function createIcon(symbol, tooltip) { const icon = document.createElement('div'); icon.textContent = symbol; icon.style.cursor = 'pointer'; icon.style.fontSize = '16px'; icon.style.width = '24px'; icon.style.height = '24px'; icon.style.display = 'flex'; icon.style.justifyContent = 'center'; icon.style.alignItems = 'center'; icon.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; icon.style.borderRadius = '50%'; icon.title = tooltip; return icon; } function copyAssetURL(url, copyIcon) { navigator.clipboard.writeText(url).then(() => { const originalText = copyIcon.textContent; const originalTooltip = copyIcon.title; copyIcon.textContent = '✅'; copyIcon.title = 'URL copied!'; setTimeout(() => { copyIcon.textContent = originalText; copyIcon.title = originalTooltip; }, 2000); }).catch(err => { console.error('Failed to copy URL: ', err); }); } function renameAsset(index, nameElement) { const newName = prompt('Enter new name for the asset:', ASSETS[index].name); if (newName && newName.trim() !== '') { ASSETS[index].name = newName.trim(); nameElement.textContent = newName.trim(); } } function deleteAsset(index) { if (confirm('Are you sure you want to delete this asset?')) { ASSETS.splice(index, 1); displayAssets(); } } // Declare fileInput at a higher scope let fileInput; dropZone.addEventListener('click', () => { fileInput = document.createElement('input'); fileInput.type = 'file'; fileInput.accept = 'image/*,audio/*,video/*'; fileInput.style.display = 'none'; fileInput.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { uploadAsset(e.target.result); }; reader.readAsDataURL(file); modal.style.display = 'none'; } }); document.body.appendChild(fileInput); fileInput.click(); document.body.removeChild(fileInput); }); // UI creation functions function createUIButton(text, x, y, onClick) { const button = document.createElement('button'); button.textContent = text; button.style.position = 'absolute'; button.style.left = x + 'px'; button.style.top = y + 'px'; button.addEventListener('click', onClick); previewContainer.appendChild(button); return button; } function createUIPanel(x, y, width, height) { const panel = document.createElement('div'); panel.style.position = 'absolute'; panel.style.left = x + 'px'; panel.style.top = y + 'px'; panel.style.width = width + 'px'; panel.style.height = height + 'px'; panel.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; previewContainer.appendChild(panel); return panel; } function createUIText(text, x, y) { const textElement = document.createElement('div'); textElement.textContent = text; textElement.style.position = 'absolute'; textElement.style.left = x + 'px'; textElement.style.top = y + 'px'; textElement.style.color = 'white'; previewContainer.appendChild(textElement); return textElement; } dropZone.addEventListener('dragover', (event) => { event.preventDefault(); dropZone.style.backgroundColor = 'rgba(108, 92, 231, 0.1)'; }); dropZone.addEventListener('dragleave', () => { dropZone.style.backgroundColor = 'transparent'; }); dropZone.addEventListener('drop', (event) => { event.preventDefault(); dropZone.style.backgroundColor = 'transparent'; const file = event.dataTransfer.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { uploadAsset(e.target.result); }; reader.readAsDataURL(file); modal.style.display = 'none'; } }); // Update file input change event // Remove this event listener as it's now handled in the dropZone click event // The fileInput is recreated each time the dropZone is clicked, so we don't need a separate listener here // If you need to keep this listener for some reason, make sure to add it after creating the fileInput in the dropZone click event // Create question mark button const questionMarkButton = document.createElement('button'); questionMarkButton.textContent = '?'; questionMarkButton.style.position = 'absolute'; questionMarkButton.style.bottom = '20px'; questionMarkButton.style.left = '20px'; questionMarkButton.style.zIndex = '1000'; questionMarkButton.style.fontSize = '24px'; questionMarkButton.style.padding = '10px 15px'; questionMarkButton.style.borderRadius = '50%'; previewContainer.appendChild(questionMarkButton); // Create commands interface const commandsInterface = document.createElement('div'); commandsInterface.style.position = 'absolute'; commandsInterface.style.top = '50%'; commandsInterface.style.left = '50%'; commandsInterface.style.transform = 'translate(-50%, -50%)'; commandsInterface.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; commandsInterface.style.color = 'white'; commandsInterface.style.padding = '20px'; commandsInterface.style.borderRadius = '10px'; commandsInterface.style.display = 'none'; commandsInterface.style.zIndex = '2000'; commandsInterface.style.maxHeight = '80%'; commandsInterface.style.overflowY = 'auto'; parentDiv.appendChild(commandsInterface); // Create UI Component Menu const uiComponentMenu = document.createElement('div'); uiComponentMenu.style.position = 'absolute'; uiComponentMenu.style.top = '10px'; uiComponentMenu.style.right = '10px'; uiComponentMenu.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; uiComponentMenu.style.padding = '10px'; uiComponentMenu.style.borderRadius = '5px'; uiComponentMenu.style.display = 'none'; previewContainer.appendChild(uiComponentMenu); const uiComponents = ['Button', 'Panel', 'Text', 'Image', 'Slider', 'Dropdown']; uiComponents.forEach(component => { const button = document.createElement('button'); button.textContent = component; button.style.display = 'block'; button.style.margin = '5px'; button.addEventListener('click', () => createUIComponent(component)); uiComponentMenu.appendChild(button); }); const finishButton = document.createElement('button'); finishButton.textContent = 'Finish UI'; finishButton.style.display = 'block'; finishButton.style.margin = '5px'; finishButton.style.backgroundColor = 'green'; finishButton.addEventListener('click', finishUICreation); uiComponentMenu.appendChild(finishButton); let isUICreationMode = false; let createdUIComponents = []; // Create loading screen const loadingScreen = document.createElement('div'); loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); // Initialize background music variable let backgroundMusic; // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; // Initialize and play background music backgroundMusic = new Audio('https://play.rosebud.ai/assets/rosebud_official_theme_02.mp3?YUny'); backgroundMusic.loop = true; backgroundMusic.volume = 0.10; // Adjust volume as needed (0.0 to 1.0) // Attempt to play the music. Note: Some browsers may require user interaction to play audio. backgroundMusic.play().catch((error) => { console.warn('Autoplay was prevented. User interaction is required to play the background music.'); }); // Spawn the big, bouncy ball after assets are loaded }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); const world = new CANNON.World(); world.gravity.set(0, -9.81, 0); // Standard gravity world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); // Adjusted camera position to better view the big ball camera.position.set(0, 50, 100); camera.lookAt(0, 0, 0); // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: "high-performance" }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87CEEB); // Bright sky blue const groundColor = new THREE.Color(0xFFFFFF); // White ground reflection // Create sky dome with improved colors const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4( position, 1.0 ); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }`; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize( vWorldPosition + offset ).y; gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 ); }`; const uniforms = { topColor: { value: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(500, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Modify OrbitControls setup const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; // Adjusted damping factor controls.screenSpacePanning = false; controls.maxPolarAngle = Math.PI / 2; // Create flat terrain function createTerrain() { const size = 200; // Create simple flat plane for visuals const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT'); const normalMap = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0 }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); const groundShape = new CANNON.Box(new CANNON.Vec3(size / 2, 0.1, size / 2)); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); groundBody.addShape(groundShape); groundBody.position.set(0, -0.1, 0); world.addBody(groundBody); return terrain; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // Create initial scene const terrain = createTerrain(); // Array to store all created parts const parts = []; function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { world.step(deltaTime); controls.update(); // Update all parts parts.forEach(part => { part.mesh.position.copy(part.body.position); part.mesh.quaternion.copy(part.body.quaternion); }); } composer.render(); } // Handle window resize function onWindowResize() { const width = previewContainer.clientWidth; const height = previewContainer.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Start animation animate(); // AI Interface logic // Function to calculate string similarity (Levenshtein distance) function levenshteinDistance(a, b) { if (a.length === 0) return b.length; if (b.length === 0) return a.length; const matrix = []; for (let i = 0; i <= b.length; i++) { matrix[i] = [i]; } for (let j = 0; j <= a.length; j++) { matrix[0][j] = j; } for (let i = 1; i <= b.length; i++) { for (let j = 1; j <= a.length; j++) { if (b.charAt(i - 1) === a.charAt(j - 1)) { matrix[i][j] = matrix[i - 1][j - 1]; } else { matrix[i][j] = Math.min( matrix[i - 1][j - 1] + 1, matrix[i][j - 1] + 1, matrix[i - 1][j] + 1 ); } } } return matrix[b.length][a.length]; } // Function to find the closest matching command function findClosestCommand(input, commands) { let closestCommand = ''; let smallestDistance = Infinity; for (const command of commands) { const distance = levenshteinDistance(input, command); if (distance < smallestDistance) { smallestDistance = distance; closestCommand = command; } } return smallestDistance <= 3 ? closestCommand : ''; } // NEW FUNCTION: Translate non-valid inputs to the closest valid command function translateToValidCommand(input) { // Remove extra descriptors (like "a lot," "quickly") const modifiers = ["a lot", "very", "quickly", "slowly"]; modifiers.forEach(modifier => { input = input.replace(modifier, "").trim(); }); // Match the cleaned input to the closest valid command const closestCommand = findClosestCommand(input, recognizedCommands); if (closestCommand) { return closestCommand; } // No match found, return null return null; } // UPDATED FUNCTION: Handle player input with translation logic function handlePlayerInput(input, isPartialInput = false) { const lowerInput = input.toLowerCase().trim(); let translatedCommand = translateToValidCommand(lowerInput); if (translatedCommand) { // Provide feedback if the input was translated if (lowerInput !== translatedCommand) { addMessageToChat('AI', `Did you mean '${translatedCommand}'? Executing it now.`); } return executeSingleCommand(translatedCommand); } else { // If no valid translation, handle as unknown intent return handleUnknownIntent(lowerInput); } } // Existing list of recognized commands (keep this as is) const recognizedCommands = [ "create a part", "create a part with texture [textureName]", "delete all parts", "change the color of the part to [color]", "toggle gravity", "rotate camera left", "rotate camera right", "zoom in", "zoom out", "change sky color", "toggle wireframe", "create sphere", "create cylinder", "change ground texture", "toggle shadows", "increase part size", "decrease part size", "apply force up", "apply force forward", "toggle slow motion", "start ui creation", "finish ui creation", "create ui button [text]", "create ui panel", "create ui text [text]", "create ui image", "create ui slider", "create ui dropdown", "modify ui [component] color [value]", "modify ui [component] background [value]", "modify ui [component] size [value]", "modify ui [component] text [value]", "arrange ui [component] [position]" ]; let conversationContext = { lastTopic: null, userFeelings: null, partCount: 0, recentCommands: [], userPreferences: {}, }; function handlePlayerInput(input, isPartialInput = false) { const lowerInput = input.toLowerCase().trim(); let translatedCommand = translateToValidCommand(lowerInput); if (translatedCommand) { // Provide feedback if the input was translated if (lowerInput !== translatedCommand) { addMessageToChat('AI', `Did you mean '${translatedCommand}'? Executing it now.`); } return executeSingleCommand(translatedCommand); } else { // If no valid translation, handle as unknown intent return handleUnknownIntent(lowerInput); } } switch (intent) { case 'command': response = executeCommands(entities.commands, isPartialInput); break; case 'question': response = answerQuestion(entities.question, entities.subject); break; case 'greeting': response = respondToGreeting(); break; case 'farewell': response = respondToFarewell(); break; case 'sentiment': response = respondToSentiment(entities.sentiment); break; case 'preference': response = handlePreference(entities.preference, entities.value); break; case 'clarification': response = requestClarification(lowerInput); break; default: response = handleUnknownIntent(lowerInput); } if (!isPartialInput) { updateConversationContext(intent, entities); } return isPartialInput ? response : addPersonality(response); } function handleUnknownIntent(input) { const similarCommands = findSimilarCommands(input); if (similarCommands.length > 0) { return `I'm not sure what you mean. Did you perhaps want to ${similarCommands[0]}? Or you can try these similar commands: ${similarCommands.slice(1).join(', ')}`; } return "I'm not sure how to respond to that. Can you please rephrase or ask me about the 3D scene?"; } function findSimilarCommands(input) { return recognizedCommands .map(cmd => ({ command: cmd, similarity: calculateSimilarity(input, cmd) })) .filter(item => item.similarity > 0.6) .sort((a, b) => b.similarity - a.similarity) .map(item => item.command) .slice(0, 3); } function calculateSimilarity(str1, str2) { const len1 = str1.length; const len2 = str2.length; const maxDist = Math.floor(Math.max(len1, len2) / 2) - 1; const matches = []; const hash1 = []; const hash2 = []; for (let i = 0; i < len1; i++) { for (let j = Math.max(0, i - maxDist); j < Math.min(len2, i + maxDist + 1); j++) { if (str1[i] === str2[j] && !hash1[i] && !hash2[j]) { matches.push(str1[i]); hash1[i] = hash2[j] = true; break; } } } return matches.length / Math.max(len1, len2); } function handlePreference(preference, value) { conversationContext.userPreferences[preference] = value; return `I've noted your preference for ${preference}. I'll keep that in mind for future interactions.`; } function requestClarification(input) { const recentCommands = conversationContext.recentCommands; if (recentCommands.length > 0) { return `I'm not sure what you mean by "${input}". Are you referring to your recent command "${recentCommands[recentCommands.length - 1]}"? Can you please provide more context or rephrase your request?`; } return "I'm not sure what you mean. Can you please provide more context or rephrase your request?"; } function analyzeInput(input) { let intent = 'unknown'; let entities = {}; // Command intent if (input.match(/^(create|delete|change|toggle|rotate|zoom|apply|increase|decrease|start|finish)/i)) { intent = 'command'; entities.commands = splitCommands(input); } // UI-specific command intent else if (input.match(/^(create ui|modify ui|arrange ui)/i)) { intent = 'ui_command'; entities.commands = [input.trim()]; } // Question intent else if (input.match(/^(what|how|why|when|where|who|can you|is there|are there)/i)) { intent = 'question'; entities.question = input.match(/^(what|how|why|when|where|who|can you|is there|are there)/i)[0]; entities.subject = input.replace(entities.question, '').trim(); } // Greeting intent else if (input.match(/^(hi|hello|hey|greetings|good morning|good afternoon|good evening)/i)) { intent = 'greeting'; } // Farewell intent else if (input.match(/^(bye|goodbye|see you|farewell|good night)/i)) { intent = 'farewell'; } // Sentiment intent else if (input.match(/(good|great|nice|love|hate|dislike|awesome|terrible|bad|wonderful)/i)) { intent = 'sentiment'; entities.sentiment = input.match(/(good|great|nice|love|hate|dislike|awesome|terrible|bad|wonderful)/i)[0]; } // Preference intent else if (input.match(/(prefer|like|want|need|desire)/i)) { intent = 'preference'; const prefMatch = input.match(/(prefer|like|want|need|desire)\s+(\w+)/i); if (prefMatch) { entities.preference = prefMatch[2]; entities.value = input.slice(input.indexOf(entities.preference) + entities.preference.length).trim(); } } // Clarification intent else if (input.match(/(what do you mean|can you explain|i don't understand|clarify)/i)) { intent = 'clarification'; } return { intent, entities }; } function executeCommands(commands) { let responses = []; for (const command of commands) { const response = executeSingleCommand(command); responses.push(response); } return responses.join(" "); } function answerQuestion(questionType, subject) { switch (questionType) { case 'what': if (subject.includes('scene')) { return `The scene contains a terrain and ${conversationContext.partCount} parts. You can create more parts or modify existing ones.`; } else if (subject.includes('command')) { return "You can use commands like 'create a part', 'change color', 'toggle gravity', and more. Ask me about specific actions you'd like to perform."; } break; case 'how': if (subject.includes('create')) { return "You can create parts by saying 'create a part', 'create a sphere', or 'create a cylinder'."; } else if (subject.includes('change')) { return "You can change various aspects of the scene. For example, 'change the color of the part to blue' or 'change sky color'."; } break; case 'can you': return "I can help you manipulate the 3D scene. Try asking me to create parts, change colors, toggle gravity, or modify the camera view."; } return "I'm not sure about that. Can you ask me something specific about the 3D scene or the available commands?"; } function respondToGreeting() { const greetings = [ "Hello! How can I assist you with the 3D scene today?", "Hi there! Ready to create something awesome in 3D?", "Greetings! What would you like to do in our virtual 3D space?" ]; return greetings[Math.floor(Math.random() * greetings.length)]; } function respondToFarewell() { const farewells = [ "Goodbye! Feel free to come back anytime to work on your 3D scene.", "See you later! Your 3D creation will be waiting for you.", "Farewell! I hope you enjoyed manipulating the 3D environment." ]; return farewells[Math.floor(Math.random() * farewells.length)]; } function respondToSentiment(sentiment) { if (['good', 'great', 'nice', 'love'].includes(sentiment)) { return "I'm glad you're enjoying the 3D scene! Is there anything specific you'd like to try next?"; } else { return "I'm sorry to hear that. Can you tell me what you'd like to improve in the 3D scene?"; } } function updateConversationContext(intent, entities) { if (intent === 'command' && entities.commands) { conversationContext.lastTopic = entities.commands[entities.commands.length - 1]; if (entities.commands.some(cmd => cmd.includes('create'))) { conversationContext.partCount++; } else if (entities.commands.includes('delete all parts')) { conversationContext.partCount = 0; } } else if (intent === 'sentiment') { conversationContext.userFeelings = entities.sentiment; } } function addPersonality(response) { const personalityPhrases = [ "Certainly! ", "I'd be happy to help with that. ", "Great idea! ", "Alright, let's see what we can do. ", "Interesting request! " ]; const randomPhrase = personalityPhrases[Math.floor(Math.random() * personalityPhrases.length)]; return randomPhrase + response; } function splitCommands(input) { const separators = [' and ', ' then ', ' also ', '. ']; let commands = [input]; for (const separator of separators) { commands = commands.flatMap(cmd => cmd.split(separator)); } return commands.map(cmd => cmd.trim()).filter(cmd => cmd.length > 0); } function executeSingleCommand(command) { if (command.startsWith("change the color of the part to ")) { const color = command.slice("change the color of the part to ".length); return changePartColor(color); } else if (command.startsWith("create a part with texture ")) { const textureName = command.slice("create a part with texture ".length); createPart(textureName); return `Part created with ${textureName} texture.`; } else if (command.toLowerCase() === "start ui creation") { return startUICreation(); } else if (command.toLowerCase() === "finish ui creation") { return finishUICreation(); } else if (command.startsWith("create ui ")) { return handleUICreationCommand(command); } else if (command.startsWith("modify ui ")) { return handleUIModificationCommand(command); } else if (command.startsWith("arrange ui ")) { return handleUIArrangementCommand(command); } // Add this new function to handle UI creation mode function startUICreation() { isUICreationMode = true; uiComponentMenu.style.display = 'block'; return "UI creation mode started. Use the menu on the right to add components, or use commands like 'create ui button Start Game'."; } function handleUICreationCommand(command) { if (!isUICreationMode) { return "Please start UI creation mode first with 'start ui creation'."; } const parts = command.split(' '); const componentType = parts[2]; const componentText = parts.slice(3).join(' '); return createUIComponent(componentType, componentText); } function handleUIModificationCommand(command) { const parts = command.split(' '); const componentType = parts[2]; const property = parts[3]; const value = parts.slice(4).join(' '); const component = createdUIComponents.find(c => c.tagName.toLowerCase() === componentType); if (!component) { return `No ${componentType} found to modify`; } switch (property) { case 'color': component.style.color = value; return `Changed ${componentType} color to ${value}`; case 'background': component.style.backgroundColor = value; return `Changed ${componentType} background to ${value}`; case 'size': component.style.width = value + 'px'; component.style.height = value + 'px'; return `Changed ${componentType} size to ${value}px`; case 'text': if (component.textContent !== undefined) { component.textContent = value; return `Changed ${componentType} text to "${value}"`; } return `Cannot change text of ${componentType}`; default: return `Unknown property: ${property}`; } } function handleUIArrangementCommand(command) { const parts = command.split(' '); const componentType = parts[2]; const position = parts[3]; const component = createdUIComponents.find(c => c.tagName.toLowerCase() === componentType); if (!component) { return `No ${componentType} found to arrange`; } switch (position) { case 'center': component.style.left = '50%'; component.style.top = '50%'; component.style.transform = 'translate(-50%, -50%)'; return `Moved ${componentType} to the center`; case 'top': component.style.left = '50%'; component.style.top = '10px'; component.style.transform = 'translateX(-50%)'; return `Moved ${componentType} to the top`; case 'bottom': component.style.left = '50%'; component.style.bottom = '10px'; component.style.transform = 'translateX(-50%)'; return `Moved ${componentType} to the bottom`; case 'left': component.style.left = '10px'; component.style.top = '50%'; component.style.transform = 'translateY(-50%)'; return `Moved ${componentType} to the left`; case 'right': component.style.right = '10px'; component.style.top = '50%'; component.style.transform = 'translateY(-50%)'; return `Moved ${componentType} to the right`; default: return `Unknown position: ${position}`; } } const closestCommand = findClosestCommand(command, recognizedCommands); switch (closestCommand) { case "create a part": createPart(); return "Part created in the scene."; case "delete all parts": deleteAllParts(); return "All parts have been removed from the scene."; case "change part color": return "Please specify a color. For example, 'change the color of the part to blue'."; case "toggle gravity": return toggleGravity(); case "rotate camera left": rotateCameraLeft(); return "Camera rotated left."; case "rotate camera right": rotateCameraRight(); return "Camera rotated right."; case "zoom in": zoomIn(); return "Camera zoomed in."; case "zoom out": zoomOut(); return "Camera zoomed out."; case "change sky color": return changeSkyColor(); case "toggle wireframe": return toggleWireframe(); case "create sphere": createSphere(); return "Sphere created in the scene."; case "create cylinder": createCylinder(); return "Cylinder created in the scene."; case "change ground texture": return changeGroundTexture(); case "toggle shadows": return toggleShadows(); case "increase part size": return increasePartSize(); case "decrease part size": return decreasePartSize(); case "apply force up": return applyForceUp(); case "apply force forward": return applyForceForward(); case "toggle slow motion": return toggleSlowMotion(); default: if (closestCommand) { return `Did you mean "${closestCommand}"? Please try again.`; } return `I'm sorry, I don't understand the command "${command}". Click the '?' button to see available options.`; } } function createPart(textureName = null) { console.log("Creating a new part"); const partSize = 1; const partGeometry = new THREE.BoxGeometry(partSize, partSize, partSize); const partMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const partMesh = new THREE.Mesh(partGeometry, partMaterial); partMesh.position.set(0, 10, 0); partMesh.castShadow = true; partMesh.receiveShadow = true; scene.add(partMesh); const partShape = new CANNON.Box(new CANNON.Vec3(partSize / 2, partSize / 2, partSize / 2)); const partBody = new CANNON.Body({ mass: 1, shape: partShape, }); partBody.position.copy(partMesh.position); world.addBody(partBody); // Add the part to the parts array const newPart = { mesh: partMesh, body: partBody }; parts.push(newPart); // Apply texture if provided if (textureName) { applyTextureToPart(newPart, textureName); } console.log("Part created and added to the scene"); } function deleteAllParts() { for (const part of parts) { scene.remove(part.mesh); world.removeBody(part.body); } parts.length = 0; } function changePartColor(colorName) { if (parts.length === 0) { return "There are no parts to change color."; } const color = getColorFromName(colorName); if (!color) { return "Sorry, I don't recognize that color. Please try a common color name."; } for (const part of parts) { part.mesh.material.color.setHex(color); } return `Parts color changed to ${colorName}.`; } function getColorFromName(name) { const colors = { red: 0xFF0000, green: 0x00FF00, blue: 0x0000FF, yellow: 0xFFFF00, purple: 0x800080, orange: 0xFFA500, pink: 0xFFC0CB, brown: 0xA52A2A, black: 0x000000, white: 0xFFFFFF, gray: 0x808080, cyan: 0x00FFFF, magenta: 0xFF00FF, silver: 0xC0C0C0, gold: 0xFFD700, navy: 0x000080, teal: 0x008080 }; return colors[name]; } function toggleGravity() { if (world.gravity.y === 0) { world.gravity.set(0, -9.81, 0); return "Gravity turned on."; } else { world.gravity.set(0, 0, 0); return "Gravity turned off."; } } function rotateCameraLeft() { controls.rotateLeft(Math.PI / 12); } function rotateCameraRight() { controls.rotateLeft(-Math.PI / 12); } function zoomIn() { camera.position.multiplyScalar(0.9); } function zoomOut() { camera.position.multiplyScalar(1.1); } function changeSkyColor(colorName) { const color = getColorFromName(colorName); if (!color) { return "Sorry, I don't recognize that color for the sky. Please try a common color name."; } uniforms.topColor.value = new THREE.Color(color); return `Sky color changed to ${colorName}.`; } function toggleWireframe() { parts.forEach(part => { part.mesh.material.wireframe = !part.mesh.material.wireframe; }); return "Wireframe mode toggled."; } function createSphere() { const radius = 0.5; const sphereGeometry = new THREE.SphereGeometry(radius, 32, 32); const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }); const sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial); sphereMesh.position.set(0, 10, 0); sphereMesh.castShadow = true; sphereMesh.receiveShadow = true; scene.add(sphereMesh); const sphereShape = new CANNON.Sphere(radius); const sphereBody = new CANNON.Body({ mass: 1, shape: sphereShape, }); sphereBody.position.copy(sphereMesh.position); world.addBody(sphereBody); parts.push({ mesh: sphereMesh, body: sphereBody }); } function createCylinder() { const radius = 0.5; const height = 1; const cylinderGeometry = new THREE.CylinderGeometry(radius, radius, height, 32); const cylinderMaterial = new THREE.MeshStandardMaterial({ color: 0xff00ff }); const cylinderMesh = new THREE.Mesh(cylinderGeometry, cylinderMaterial); cylinderMesh.position.set(0, 10, 0); cylinderMesh.castShadow = true; cylinderMesh.receiveShadow = true; scene.add(cylinderMesh); const cylinderShape = new CANNON.Cylinder(radius, radius, height, 16); const cylinderBody = new CANNON.Body({ mass: 1, shape: cylinderShape, }); cylinderBody.position.copy(cylinderMesh.position); world.addBody(cylinderBody); parts.push({ mesh: cylinderMesh, body: cylinderBody }); } function changeGroundTexture() { const newTexture = textureLoader.load('https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT'); newTexture.wrapS = newTexture.wrapT = THREE.RepeatWrapping; newTexture.repeat.set(20, 20); terrain.material.map = newTexture; terrain.material.needsUpdate = true; return "Ground texture changed."; } function toggleShadows() { renderer.shadowMap.enabled = !renderer.shadowMap.enabled; return `Shadows ${renderer.shadowMap.enabled ? 'enabled' : 'disabled'}.`; } function increasePartSize() { parts.forEach(part => { part.mesh.scale.multiplyScalar(1.1); part.body.shapes[0].halfExtents.scale(1.1, 1.1, 1.1); part.body.updateMassProperties(); }); return "Part size increased."; } function decreasePartSize() { parts.forEach(part => { part.mesh.scale.multiplyScalar(0.9); part.body.shapes[0].halfExtents.scale(0.9, 0.9, 0.9); part.body.updateMassProperties(); }); return "Part size decreased."; } function applyForceUp() { parts.forEach(part => { part.body.applyImpulse(new CANNON.Vec3(0, 10, 0), part.body.position); }); return "Upward force applied to all parts."; } function applyForceForward() { parts.forEach(part => { part.body.applyImpulse(new CANNON.Vec3(0, 0, -10), part.body.position); }); return "Forward force applied to all parts."; } function toggleSlowMotion() { if (world.timeStep === 1 / 60) { world.timeStep = 1 / 120; return "Slow motion enabled."; } else { world.timeStep = 1 / 60; return "Slow motion disabled."; } } // Function to add message to chat function addMessageToChat(sender, message) { const messageElement = document.createElement('div'); messageElement.style.marginBottom = '10px'; messageElement.innerHTML = `${sender}: ${message}`; chatContainer.appendChild(messageElement); chatContainer.scrollTop = chatContainer.scrollHeight; } // Function to handle AI response let typingTimer; const doneTypingInterval = 300; // ms function handleAIResponse(input, isPartialInput = false) { if (!isPartialInput) { addMessageToChat('You', input); } const aiResponse = handlePlayerInput(input, isPartialInput); if (!isPartialInput) { addMessageToChat('AI', aiResponse); if (input.toLowerCase().includes('what commands') || input.toLowerCase().includes('what can you do')) { questionMarkButton.click(); } } else { updatePartialResponse(aiResponse); } } function updatePartialResponse(partialResponse) { let partialResponseElement = document.getElementById('partialResponse'); if (!partialResponseElement) { partialResponseElement = document.createElement('div'); partialResponseElement.id = 'partialResponse'; partialResponseElement.style.color = '#888'; partialResponseElement.style.fontStyle = 'italic'; chatContainer.appendChild(partialResponseElement); } partialResponseElement.textContent = 'AI is typing: ' + partialResponse; } // Function to update submit button style function updateSubmitButtonStyle() { if (inputField.value.trim() !== '') { submitButton.style.backgroundColor = 'purple'; submitButton.style.color = 'white'; } else { submitButton.style.backgroundColor = '#333'; submitButton.style.color = '#666'; } } // Event listener for the submit button submitButton.addEventListener('click', () => { const playerInput = inputField.value.trim(); if (playerInput !== '') { handleAIResponse(playerInput); inputField.value = ''; updateSubmitButtonStyle(); } }); inputField.addEventListener('keypress', (event) => { if (event.key === 'Enter') { const playerInput = inputField.value.trim(); if (playerInput !== '') { handleAIResponse(playerInput); inputField.value = ''; updateSubmitButtonStyle(); } } }); inputField.addEventListener('input', (event) => { updateSubmitButtonStyle(); clearTimeout(typingTimer); if (event.target.value) { typingTimer = setTimeout(() => handleAIResponse(event.target.value, true), doneTypingInterval); } else { const partialResponseElement = document.getElementById('partialResponse'); if (partialResponseElement) { partialResponseElement.remove(); } } }); inputField.addEventListener('keydown', () => { clearTimeout(typingTimer); }); function createMenu() { const menu = document.createElement('div'); menu.style.position = 'absolute'; menu.style.top = '50%'; menu.style.left = '50%'; menu.style.transform = 'translate(-50%, -50%)'; menu.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; menu.style.padding = '20px'; menu.style.borderRadius = '10px'; menu.style.color = 'white'; menu.innerHTML = '

'; previewContainer.appendChild(menu); } function createCenteredUIPanel() { const panel = createUIPanel('50%', '50%', '200px', '200px'); panel.style.transform = 'translate(-50%, -50%)'; } function createCenteredUIButton(text) { const button = createUIButton(text, '50%', '50%', () => console.log(`${text} clicked`)); button.style.transform = 'translate(-50%, -50%)'; } function createCenteredUIText(text) { const textElement = createUIText(text, '50%', '50%'); textElement.style.transform = 'translate(-50%, -50%)'; } function createUIComponent(type, text = '') { if (!isUICreationMode) { return "Please start UI creation mode first with 'start ui creation'."; } let component; switch (type.toLowerCase()) { case 'button': component = createUIButton(text || 'New Button', 50, 50, () => console.log(`${text || 'Button'} clicked`)); break; case 'panel': component = createUIPanel(50, 50, 200, 100); break; case 'text': component = createUIText(text || 'New Text', 50, 50); break; case 'image': component = createUIImage(50, 50, 100, 100, 'https://play.rosebud.ai/assets/play.png?4xHr'); break; case 'slider': component = createUISlider(50, 50, 100, 0, 100, 50); break; case 'dropdown': component = createUIDropdown(50, 50, ['Option 1', 'Option 2', 'Option 3']); break; default: return `Unknown UI component type: ${type}`; } makeComponentDraggable(component); createdUIComponents.push(component); return `Created a ${type}${text ? ` with text "${text}"` : ''}.`; } function makeComponentDraggable(component) { let isDragging = false; let offsetX, offsetY; component.style.cursor = 'move'; component.addEventListener('mousedown', startDragging); document.addEventListener('mousemove', drag); document.addEventListener('mouseup', stopDragging); function startDragging(e) { isDragging = true; offsetX = e.clientX - component.offsetLeft; offsetY = e.clientY - component.offsetTop; } function drag(e) { if (isDragging) { component.style.left = (e.clientX - offsetX) + 'px'; component.style.top = (e.clientY - offsetY) + 'px'; } } function stopDragging() { isDragging = false; } } function finishUICreation() { isUICreationMode = false; uiComponentMenu.style.display = 'none'; createdUIComponents.forEach(component => { component.style.cursor = 'default'; component.removeEventListener('mousedown', component.startDragging); }); } function createUIImage(x, y, width, height, src) { const img = document.createElement('img'); img.src = src; img.style.position = 'absolute'; img.style.left = x + 'px'; img.style.top = y + 'px'; img.style.width = width + 'px'; img.style.height = height + 'px'; previewContainer.appendChild(img); return img; } function createUISlider(x, y, width, min, max, value) { const slider = document.createElement('input'); slider.type = 'range'; slider.min = min; slider.max = max; slider.value = value; slider.style.position = 'absolute'; slider.style.left = x + 'px'; slider.style.top = y + 'px'; slider.style.width = width + 'px'; previewContainer.appendChild(slider); return slider; } function createUIDropdown(x, y, options) { const select = document.createElement('select'); select.style.position = 'absolute'; select.style.left = x + 'px'; select.style.top = y + 'px'; options.forEach(optionText => { const option = document.createElement('option'); option.text = optionText; select.add(option); }); previewContainer.appendChild(select); return select; } // Event listener for the question mark button questionMarkButton.addEventListener('click', () => { if (commandsInterface.style.display === 'none') { commandsInterface.style.display = 'block'; commandsInterface.innerHTML = '

Available Commands:

' + recognizedCommands.map(cmd => `

${cmd}

`).join('') + '

UI Customization:

' + '

You can ask the AI to create, modify, or arrange UI components.

' + '

Examples:

' + '

Create a button labeled "Start Game"
Add a panel in the top right corner
Change the color of the last created button to blue
Move the text to the center of the screen

'; } else { commandsInterface.style.display = 'none'; } }); // Event listener to close the commands interface when clicking outside document.addEventListener('click', (event) => { if (event.target !== questionMarkButton && event.target !== commandsInterface) { commandsInterface.style.display = 'none'; } });