// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // ChatAIClass Definition // ================================================== const AI_BEHAVIOR_DESCRIPTION = ` You are a seasoned Fremen sietch leader from Arrakis, steeped in the ways of the desert. You guide outsiders with cryptic wisdom about spice, sandworms, and survival, speaking in a commanding yet mysterious tone. `; export class ChatAIClass { constructor() { this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } async getResponse(prompt) { this.chatManager.addMessage('user', prompt); const response = await this.chatManager.getCharacterResponse('classify'); this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // Main App Component with Three.js Scene (Enhanced Dune Sandbox) // ================================================== const App = () => { const mobileButtonStyle = { padding: '15px 30px', backgroundColor: 'rgba(219, 182, 134, 0.8)', border: '2px solid #8b5e34', borderRadius: '10px', color: '#5c4033', fontSize: '18px', fontFamily: '"Courier New", monospace', touchAction: 'manipulation', userSelect: 'none', WebkitTapHighlightColor: 'transparent' }; const mountRef = useRef(null); const [spiceCount, setSpiceCount] = useState(0); const [sandCount, setSandCount] = useState(0); const [thumpers, setThumpers] = useState([]); const [walls, setWalls] = useState([]); const [gameState, setGameState] = useState({ harvesterActive: true, wormThreat: 0 }); useEffect(() => { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); // Resize handler const handleResize = () => { const width = window.innerWidth; const height = window.innerHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); renderer.setPixelRatio(window.devicePixelRatio); }; renderer.setPixelRatio(window.devicePixelRatio); renderer.setClearColor(0xdbb686, 1); // Warm desert sky mountRef.current.appendChild(renderer.domElement); handleResize(); window.addEventListener('resize', handleResize); // Terrain const terrainGroup = new THREE.Group(); const terrainMaterial = new THREE.MeshPhongMaterial({ color: 0xe3b778, shininess: 10 }); const terrainBlocks = []; for (let x = -15; x <= 15; x++) { for (let z = -15; z <= 15; z++) { const height = Math.floor(Math.sin(x * 0.2) * Math.cos(z * 0.2) * 4 + 4); const blockGeometry = new THREE.BoxGeometry(1, height, 1); const block = new THREE.Mesh(blockGeometry, terrainMaterial); block.position.set(x, height / 2 - 4, z); block.userData = { type: 'sand', height }; terrainGroup.add(block); terrainBlocks.push(block); } } scene.add(terrainGroup); // Spice deposits const spiceGroup = new THREE.Group(); const spiceMaterial = new THREE.MeshPhongMaterial({ color: 0xffa500, emissive: 0x552200, shininess: 30 }); const spawnSpice = () => { const spiceGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const spice = new THREE.Mesh(spiceGeometry, spiceMaterial); spice.position.set((Math.random() - 0.5) * 30, 0.25, (Math.random() - 0.5) * 30); spice.userData = { type: 'spice' }; spiceGroup.add(spice); }; for (let i = 0; i < 5; i++) spawnSpice(); scene.add(spiceGroup); // Harvester const harvesterGroup = new THREE.Group(); const harvesterMaterial = new THREE.MeshPhongMaterial({ color: 0xd4a017, shininess: 20 }); const bodyGeometry = new THREE.BoxGeometry(3, 1, 2); const body = new THREE.Mesh(bodyGeometry, harvesterMaterial); body.position.y = 1; harvesterGroup.add(body); const treadMaterial = new THREE.MeshPhongMaterial({ color: 0x8b5e34, shininess: 10 }); const treadGeometry = new THREE.BoxGeometry(0.5, 0.5, 2.2); const leftTread = new THREE.Mesh(treadGeometry, treadMaterial); const rightTread = new THREE.Mesh(treadGeometry, treadMaterial); leftTread.position.set(-1.75, 0.5, 0); rightTread.position.set(1.75, 0.5, 0); harvesterGroup.add(leftTread, rightTread); const collectorGeometry = new THREE.BoxGeometry(1, 0.5, 1); const collector = new THREE.Mesh(collectorGeometry, spiceMaterial); collector.position.set(0, 1.75, 0); harvesterGroup.add(collector); scene.add(harvesterGroup); // Sandworm const wormGroup = new THREE.Group(); const wormMaterial = new THREE.MeshPhongMaterial({ color: 0x5c4033, shininess: 5 }); const wormGeometry = new THREE.CylinderGeometry(0.5, 0.5, 3, 8); const worm = new THREE.Mesh(wormGeometry, wormMaterial); worm.rotation.x = Math.PI / 2; worm.position.y = -1; worm.userData = { active: false }; wormGroup.add(worm); scene.add(wormGroup); // Sandstorm const particleCount = 300; const particlesGeometry = new THREE.BufferGeometry(); const positions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount; i++) { positions[i * 3] = (Math.random() - 0.5) * 60; positions[i * 3 + 1] = Math.random() * 12; positions[i * 3 + 2] = (Math.random() - 0.5) * 60; } particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0xe3b778, size: 0.15, transparent: true, opacity: 0.6 }); const particles = new THREE.Points(particlesGeometry, particleMaterial); scene.add(particles); // Lighting const sunLight = new THREE.DirectionalLight(0xf4e4bc, 1.5); sunLight.position.set(15, 25, 15); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 1024; sunLight.shadow.mapSize.height = 1024; scene.add(sunLight); const ambientLight = new THREE.AmbientLight(0xdbb686, 0.4); scene.add(ambientLight); // Shadows renderer.shadowMap.enabled = true; [harvesterGroup, spiceGroup, terrainGroup, wormGroup].forEach(group => { group.children.forEach(child => { child.castShadow = true; child.receiveShadow = true; }); }); // Player (camera-based movement) const playerSpeed = 0.2; const keys = { w: false, a: false, s: false, d: false, space: false, t: false, wKey: false }; const touchControls = { active: false, startX: 0, startY: 0, moveX: 0, moveY: 0 }; // Make keys accessible to touch handlers mountRef.current.keys = keys; camera.position.set(0, 5, 10); camera.rotation.order = 'YXZ'; // For smoother control // Crafting and placement const thumperMaterial = new THREE.MeshPhongMaterial({ color: 0xaaaaaa, shininess: 15 }); const wallMaterial = new THREE.MeshPhongMaterial({ color: 0x8b5e34, shininess: 10 }); const placeItem = (type) => { const position = camera.position.clone().add(camera.getWorldDirection(new THREE.Vector3()).multiplyScalar(2)); position.y = 0.5; if (type === 'thumper' && spiceCount >= 5 && sandCount >= 10) { setSpiceCount(prev => prev - 5); setSandCount(prev => prev - 10); const thumperGeometry = new THREE.BoxGeometry(0.5, 1, 0.5); const thumper = new THREE.Mesh(thumperGeometry, thumperMaterial); thumper.position.copy(position); thumper.userData = { type: 'thumper', timeLeft: 10 }; setThumpers(prev => [...prev, thumper]); scene.add(thumper); } else if (type === 'wall' && spiceCount >= 2 && sandCount >= 20) { setSpiceCount(prev => prev - 2); setSandCount(prev => prev - 20); const wallGeometry = new THREE.BoxGeometry(2, 2, 1); const wall = new THREE.Mesh(wallGeometry, wallMaterial); wall.position.copy(position); wall.userData = { type: 'wall' }; setWalls(prev => [...prev, wall]); scene.add(wall); } }; // Animation and game logic let time = 0; let wormTimer = 30; const animate = () => { requestAnimationFrame(animate); time += 0.016; // ~60 FPS wormTimer -= 0.016; // Player movement const direction = new THREE.Vector3(); if (keys.w) direction.z -= 1; if (keys.s) direction.z += 1; if (keys.a) direction.x -= 1; if (keys.d) direction.x += 1; direction.normalize().multiplyScalar(playerSpeed); camera.position.add(direction); camera.position.y = 5; // Fixed height // Harvester if (gameState.harvesterActive) { harvesterGroup.position.y = Math.sin(time) * 0.3 + 1; harvesterGroup.position.x = Math.cos(time * 0.5) * 5; harvesterGroup.rotation.y += 0.005; leftTread.rotation.x += 0.1; rightTread.rotation.x += 0.1; setSpiceCount(prev => prev + 0.01); } // Sandstorm const positions = particles.geometry.attributes.position.array; for (let i = 0; i < particleCount; i++) { positions[i * 3] += 0.1 + gameState.wormThreat * 0.01; if (positions[i * 3] > 30) positions[i * 3] = -30; } particles.geometry.attributes.position.needsUpdate = true; // Sandworm if (wormTimer <= 0 && !worm.userData.active) { worm.userData.active = true; worm.position.set(15, -1, 15); wormTimer = 30 - Math.min(gameState.wormThreat, 20); setGameState(prev => ({ ...prev, wormThreat: prev.wormThreat + 1 })); } if (worm.userData.active) { const target = thumpers.find(t => t.userData.timeLeft > 0) || harvesterGroup; const direction = target.position.clone().sub(worm.position).normalize(); worm.position.add(direction.multiplyScalar(0.1)); if (worm.position.distanceTo(harvesterGroup.position) < 2) { setGameState(prev => ({ ...prev, harvesterActive: false })); setSpiceCount(prev => Math.max(0, prev - 10)); worm.userData.active = false; } } // Thumpers thumpers.forEach(t => { t.userData.timeLeft -= 0.016; if (t.userData.timeLeft <= 0) { scene.remove(t); setThumpers(prev => prev.filter(th => th !== t)); } else { t.position.y = 0.5 + Math.sin(time * 5) * 0.1; } }); renderer.render(scene, camera); }; animate(); // Keyboard controls const onKeyDown = (e) => { switch (e.key) { case 'w': keys.w = true; break; case 'a': keys.a = true; break; case 's': keys.s = true; break; case 'd': keys.d = true; break; case ' ': keys.space = true; const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(new THREE.Vector2(0, 0), camera); const intersects = raycaster.intersectObjects([...terrainBlocks, ...spiceGroup.children]); if (intersects.length > 0) { const obj = intersects[0].object; if (obj.userData.type === 'spice') { setSpiceCount(prev => prev + 5); spiceGroup.remove(obj); setTimeout(spawnSpice, 10000); } else if (obj.userData.type === 'sand') { setSandCount(prev => prev + 1); obj.geometry = new THREE.BoxGeometry(1, obj.userData.height - 1, 1); obj.position.y -= 0.5; obj.userData.height -= 1; if (obj.userData.height <= 0) terrainGroup.remove(obj); } } break; case 't': placeItem('thumper'); break; case 'w': placeItem('wall'); break; } }; const onKeyUp = (e) => { switch (e.key) { case 'w': keys.w = false; break; case 'a': keys.a = false; break; case 's': keys.s = false; break; case 'd': keys.d = false; break; case ' ': keys.space = false; break; } }; window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); // Touch controls const handleTouchStart = (e) => { const touch = e.touches[0]; touchControls.active = true; touchControls.startX = touch.clientX; touchControls.startY = touch.clientY; }; const handleTouchMove = (e) => { if (!touchControls.active) return; const touch = e.touches[0]; touchControls.moveX = (touch.clientX - touchControls.startX) / 50; touchControls.moveY = (touch.clientY - touchControls.startY) / 50; mountRef.current.keys.a = touchControls.moveX < -0.5; mountRef.current.keys.d = touchControls.moveX > 0.5; mountRef.current.keys.w = touchControls.moveY < -0.5; mountRef.current.keys.s = touchControls.moveY > 0.5; }; const handleTouchEnd = () => { touchControls.active = false; touchControls.moveX = 0; touchControls.moveY = 0; mountRef.current.keys.w = false; mountRef.current.keys.a = false; mountRef.current.keys.s = false; mountRef.current.keys.d = false; }; mountRef.current.addEventListener('touchstart', handleTouchStart); mountRef.current.addEventListener('touchmove', handleTouchMove); mountRef.current.addEventListener('touchend', handleTouchEnd); // Cleanup return () => { window.removeEventListener('resize', handleResize); window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); mountRef.current.removeEventListener('touchstart', handleTouchStart); mountRef.current.removeEventListener('touchmove', handleTouchMove); mountRef.current.removeEventListener('touchend', handleTouchEnd); mountRef.current.removeChild(renderer.domElement); [terrainGroup, spiceGroup, harvesterGroup, wormGroup].forEach(group => { group.children.forEach(child => child.geometry.dispose()); }); [terrainMaterial, spiceMaterial, harvesterMaterial, treadMaterial, thumperMaterial, wallMaterial, wormMaterial].forEach(mat => mat.dispose()); particlesGeometry.dispose(); particleMaterial.dispose(); renderer.dispose(); }; }, [thumpers, walls, gameState]); return (

Spice: {Math.floor(spiceCount)} | Sand: {sandCount}

Harvester: {gameState.harvesterActive ? 'Active' : 'Disabled'}

Worm Threat: {gameState.wormThreat}

Controls: WASD (Move), Space (Mine), T (Thumper), W (Wall)

The Desert Beckons

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();