// ================================================== // Project Imports // ================================================== // App.jsx import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; // ================================================== // General Notes for Rosie AI // ================================================== // // This code is a more visually appealing, Dune-inspired sandbox survival prototype, // showcasing: // - A procedural sand shader for the desert floor // - A segmented sandworm with a gentle undulating effect // - A swirling dust plane near the camera for atmosphere // - A gradient sky sphere with day-night cycle // - Random cacti and rock outcrops // - Basic WASD + QE movement, collecting spice via mouse click // - UI overlay with semi-transparent styling // // Still uses only React, ReactDOM, and three. No additional imports. // // It's a prototype, meant to demonstrate how to make the scene more immersive // rather than a finished game. // ================================================== // ChatAIClass Definition // ================================================== // // This module provides a class, ChatAIClass, which uses a ChatManager (provided externally) // to conduct a conversation with an AI. The AI's behavior is defined by a description string, // and the ChatAIClass offers a simple getResponse method to get AI responses. // // This AI is powered by Rosebud AI and is Rosebud's method to add in-game AI features. // // IMPORTANT NOTE: // - Do not assume how ChatManager works beyond what is described here. // - We only know that: // 1. ChatManager is constructed by passing in a description string. // 2. We can add messages by calling chatManager.addMessage('user', prompt). // 3. We can get an AI-generated response by calling chatManager.getCharacterResponse('classify'). // - Any other assumptions about ChatManager internals or methods should not be made. // // This code can be used in any JS project by simply importing this class and using it. ////////////////////////////////////////////////////////////// // Defines how the AI should behave. This should change to match the project. const AI_BEHAVIOR_DESCRIPTION = ` You are an advanced and knowledgeable AI system capable of assisting users with a wide range of topics. You should respond concisely and helpfully, ensuring that the information you provide is accurate, clear, and context-aware. `; /** * ChatAIClass: * * This class is intended for non-technical users who want to interact with an AI system. * * Usage: * 1. Create an instance of ChatAIClass: * const chat = new ChatAIClass(); * * 2. Call getResponse(prompt) to get a response from the AI: * const answer = await chat.getResponse("What is quantum computing?"); * console.log(answer); */ export class ChatAIClass { constructor() { // Directly create a new ChatManager instance with the AI behavior description. // We assume ChatManager is available globally or imported from elsewhere. this.chatManager = new ChatManager(AI_BEHAVIOR_DESCRIPTION); } /** * Generates a response from the AI based on the given prompt. * * @param {string} prompt - The user's input or question. * @returns {Promise} - The AI's response as text. */ async getResponse(prompt) { // Add the user's message to the conversation. this.chatManager.addMessage('user', prompt); // Ask the ChatManager for the AI's response and return it. const response = await this.chatManager.getCharacterResponse('classify'); // Add the AI's message to the conversation so it has memory of it. this.chatManager.addMessage('assistant', response); return response; } } // ================================================== // GLSL Noise Utils // ================================================== // // We'll implement a basic 2D "classic noise" function in GLSL to give some procedural texturing // on the sand. This is a simplified version of Perlin noise. You can replace it with any other // noise code or use your own approach. const noiseUtils = ` // Simplex/Perlin-like noise for 2D // This is a minimal adaptation of a classic "smooth noise" snippet. vec2 fade(vec2 t) { return t * t * (3.0 - 2.0 * t); } float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float noise2D(vec2 p) { // Grid cell vec2 i = floor(p); vec2 f = fract(p); // Four corners float a = rand(i); float b = rand(i + vec2(1.0, 0.0)); float c = rand(i + vec2(0.0, 1.0)); float d = rand(i + vec2(1.0, 1.0)); vec2 u = fade(f); // Bilinear interpolation return mix( mix(a, b, u.x), mix(c, d, u.x), u.y ); } `; // ================================================== // Desert Floor Shader // ================================================== // // This shader uses the noise function above to blend between two sand colors. const desertFloorShader = { uniforms: { uColorA: { value: new THREE.Color(0xe3c188) }, // lighter sand uColorB: { value: new THREE.Color(0xd2a06c) }, // darker sand uTime: { value: 0 }, }, vertexShader: ` varying vec2 vUv; varying vec3 vPosition; void main() { vUv = uv; vPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` ${noiseUtils} uniform vec3 uColorA; uniform vec3 uColorB; uniform float uTime; varying vec2 vUv; varying vec3 vPosition; void main() { // We'll map world space XZ to noise coordinates: // Use vPosition.xz or so for noise float scale = 0.1; float n = noise2D(vPosition.xz * scale); // Blend between two sand colors float blend = smoothstep(0.3, 0.7, n); vec3 color = mix(uColorA, uColorB, blend); // Slight "banding" effect to mimic wind-swept dunes float lines = fract(n * 8.0); lines = step(0.95, lines); color = mix(color, color * 0.8, lines); gl_FragColor = vec4(color, 1.0); } `, }; // ================================================== // Sky Shader // ================================================== // // A simple gradient from horizon (bottomColor) to sky (topColor). const skyShader = { uniforms: { topColor: { value: new THREE.Color(0x87CEEB) }, // "sky" color bottomColor: { value: new THREE.Color(0xF2C49B) }, // horizon color }, vertexShader: ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * viewMatrix * worldPosition; } `, fragmentShader: ` uniform vec3 topColor; uniform vec3 bottomColor; varying vec3 vWorldPosition; void main() { vec3 direction = normalize(vWorldPosition); float h = direction.y; float factor = (h + 1.0) * 0.5; vec3 finalColor = mix(bottomColor, topColor, smoothstep(0.0, 1.0, factor)); gl_FragColor = vec4(finalColor, 1.0); } `, side: THREE.BackSide, }; // ================================================== // Main Game Component // ================================================== const App = () => { const mountRef = useRef(null); // -------------------- // Game State // -------------------- const [spiceCount, setSpiceCount] = useState(0); const [health, setHealth] = useState(100); const [thirst, setThirst] = useState(100); const [wormAlert, setWormAlert] = useState(0); const [message, setMessage] = useState("Explore, gather Spice, survive..."); // Refs const sceneRef = useRef(null); const cameraRef = useRef(null); const rendererRef = useRef(null); const resourceNodesRef = useRef([]); const wormSegmentsRef = useRef([]); // multiple segments const wormAlertActiveRef = useRef(false); const floorMeshRef = useRef(null); const skyMeshRef = useRef(null); const clockRef = useRef(null); // Keyboard const keysPressedRef = useRef({ KeyW: false, KeyS: false, KeyA: false, KeyD: false, KeyQ: false, KeyE: false, }); // Raycasting const raycasterRef = useRef(new THREE.Raycaster()); const pointerRef = useRef(new THREE.Vector2()); // Day-Night const sunAngleRef = useRef(0); // -------------------- // Setup // -------------------- useEffect(() => { // Scene const scene = new THREE.Scene(); sceneRef.current = scene; // Skydome const skyGeo = new THREE.SphereGeometry(2000, 32, 32); const skyMat = new THREE.ShaderMaterial(skyShader); const skyMesh = new THREE.Mesh(skyGeo, skyMat); skyMeshRef.current = skyMesh; scene.add(skyMesh); // Camera const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 2000 ); camera.position.set(0, 5, 20); cameraRef.current = camera; // Renderer const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); rendererRef.current = renderer; mountRef.current.appendChild(renderer.domElement); function handleResize() { renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); } window.addEventListener('resize', handleResize); handleResize(); // Lights const sunLight = new THREE.DirectionalLight(0xffffff, 0.7); sunLight.position.set(30, 50, 0); scene.add(sunLight); const ambLight = new THREE.AmbientLight(0xffffff, 0.3); scene.add(ambLight); // Desert Floor using a custom ShaderMaterial const floorGeo = new THREE.PlaneGeometry(300, 300, 100, 100); const floorMat = new THREE.ShaderMaterial(desertFloorShader); const floorMesh = new THREE.Mesh(floorGeo, floorMat); floorMesh.rotation.x = -Math.PI / 2; floorMeshRef.current = floorMesh; scene.add(floorMesh); // Slight vertex displacement for dunes const posAttr = floorGeo.attributes.position; for (let i = 0; i < posAttr.count; i++) { const x = posAttr.getX(i); const y = posAttr.getY(i); const z = posAttr.getZ(i); const noise = (Math.random() - 0.5) * 2.0; posAttr.setXYZ(i, x, y + noise, z); } floorGeo.computeVertexNormals(); // Rocks (simple random lumps) for (let i = 0; i < 8; i++) { const rockGeo = new THREE.IcosahedronGeometry(Math.random() * 3 + 2, 1); const rockMat = new THREE.MeshPhongMaterial({ color: 0x8f7a6f }); const rock = new THREE.Mesh(rockGeo, rockMat); rock.position.set( (Math.random() - 0.5) * 250, Math.random() * 2, (Math.random() - 0.5) * 250 ); rock.rotation.y = Math.random() * Math.PI; scene.add(rock); } // Cacti for (let i = 0; i < 10; i++) { const trunkHeight = Math.random() * 3 + 2; const trunkGeo = new THREE.CylinderGeometry(0.5, 0.8, trunkHeight, 6); const trunkMat = new THREE.MeshPhongMaterial({ color: 0x3f8f4f }); const trunk = new THREE.Mesh(trunkGeo, trunkMat); trunk.position.set( (Math.random() - 0.5) * 250, trunkHeight / 2, (Math.random() - 0.5) * 250 ); scene.add(trunk); } // Spice Nodes const spiceNodes = []; for (let i = 0; i < 25; i++) { const spiceGeo = new THREE.SphereGeometry(0.8, 12, 12); const spiceMat = new THREE.MeshPhongMaterial({ color: 0x8b4513, emissive: 0x331400, emissiveIntensity: 0.3, }); const spice = new THREE.Mesh(spiceGeo, spiceMat); spice.position.set( (Math.random() - 0.5) * 250, 1, (Math.random() - 0.5) * 250 ); scene.add(spice); spiceNodes.push(spice); } resourceNodesRef.current = spiceNodes; // Segmented Sandworm const wormSegments = []; const segmentCount = 6; for (let i = 0; i < segmentCount; i++) { const segGeo = new THREE.CylinderGeometry(1, 1.5, 2, 8, 1, true); const segMat = new THREE.MeshPhongMaterial({ color: 0x5f4330, side: THREE.DoubleSide }); const segment = new THREE.Mesh(segGeo, segMat); segment.rotation.z = Math.PI / 2; // Stagger them in a line, hidden underground initially segment.position.set(-i * 1.5, -15, 0); scene.add(segment); wormSegments.push(segment); } wormSegmentsRef.current = wormSegments; // Dust Storm Plane // A large plane near the camera with an alpha gradient or noise texture // We'll just apply a built-in texture-like approach using a small "noise" approach in a ShaderMaterial const dustGeo = new THREE.PlaneGeometry(80, 40); const dustMat = new THREE.ShaderMaterial({ transparent: true, uniforms: { uTime: { value: 0 }, }, vertexShader: ` varying vec2 vUv; void main(){ vUv = uv; vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * mvPosition; } `, fragmentShader: ` ${noiseUtils} uniform float uTime; varying vec2 vUv; void main(){ // Animated swirl float scale = 3.0; float n = noise2D((vUv * scale) + vec2(uTime * 0.1, 0.0)); // We make it more transparent in some spots float alpha = smoothstep(0.2, 0.7, n); // Some fade out near edges float edgeFade = smoothstep(0.0, 0.1, vUv.y) * smoothstep(1.0, 0.9, vUv.y); alpha *= edgeFade; // Dust color is a mild tan vec3 color = vec3(0.9, 0.8, 0.7); gl_FragColor = vec4(color, alpha * 0.25); } `, }); const dustPlane = new THREE.Mesh(dustGeo, dustMat); dustPlane.position.set(0, 10, -20); scene.add(dustPlane); // Clock clockRef.current = new THREE.Clock(); // Events window.addEventListener('pointermove', onPointerMove); window.addEventListener('pointerdown', onPointerDown); window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); // Cleanup return () => { window.removeEventListener('resize', handleResize); window.removeEventListener('pointermove', onPointerMove); window.removeEventListener('pointerdown', onPointerDown); window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); mountRef.current.removeChild(renderer.domElement); // Dispose omitted for brevity — in a real project, carefully dispose geometry/materials renderer.dispose(); }; // eslint-disable-next-line }, []); // -------------------- // Raycasting // -------------------- function onPointerMove(e) { pointerRef.current.x = (e.clientX / window.innerWidth) * 2 - 1; pointerRef.current.y = -(e.clientY / window.innerHeight) * 2 + 1; } function onPointerDown() { raycasterRef.current.setFromCamera(pointerRef.current, cameraRef.current); const intersects = raycasterRef.current.intersectObjects( resourceNodesRef.current, false ); if (intersects.length > 0) { collectSpice(intersects[0].object); } } function collectSpice(node) { sceneRef.current.remove(node); resourceNodesRef.current = resourceNodesRef.current.filter((x) => x !== node); // Increase Spice setSpiceCount((prev) => prev + 1); // Worm Alert setWormAlert((prev) => { const newVal = Math.min(prev + 5, 100); if (newVal >= 100 && !wormAlertActiveRef.current) { wormAlertActiveRef.current = true; setMessage("Sandworm is rising!"); } else { setMessage(`Spice +1. Worm Alert: ${newVal}%`); } return newVal; }); } // -------------------- // Keyboard // -------------------- function onKeyDown(e) { if (keysPressedRef.current.hasOwnProperty(e.code)) { keysPressedRef.current[e.code] = true; } } function onKeyUp(e) { if (keysPressedRef.current.hasOwnProperty(e.code)) { keysPressedRef.current[e.code] = false; } } const updatePlayerMovement = (delta) => { const camera = cameraRef.current; if (!camera) return; const moveSpeed = 10; const turnSpeed = 1.5; if (keysPressedRef.current.KeyW) { camera.translateZ(-moveSpeed * delta); } if (keysPressedRef.current.KeyS) { camera.translateZ(moveSpeed * delta); } if (keysPressedRef.current.KeyA) { camera.translateX(-moveSpeed * delta); } if (keysPressedRef.current.KeyD) { camera.translateX(moveSpeed * delta); } if (keysPressedRef.current.KeyQ) { camera.rotation.y += turnSpeed * delta; } if (keysPressedRef.current.KeyE) { camera.rotation.y -= turnSpeed * delta; } }; // -------------------- // Survival & Worm // -------------------- useEffect(() => { const animate = () => { requestAnimationFrame(animate); const clock = clockRef.current; if (!clock) return; const delta = clock.getDelta(); // Player updatePlayerMovement(delta); // Survival stats updateSurvival(delta); // Worm updateSandworm(delta); // Update day-night cycle updateDayNight(delta); // Animate dust plane, floor, etc. animateEnvironment(delta); rendererRef.current.render(sceneRef.current, cameraRef.current); }; animate(); }, []); const updateSurvival = (delta) => { // Thirst setThirst((prev) => { let newVal = prev - delta * 0.4; return newVal < 0 ? 0 : newVal; }); // Health if thirst=0 setHealth((prev) => { if (thirst <= 0) { let newVal = prev - delta * 2; return newVal < 0 ? 0 : newVal; } return prev; }); }; // Make the worm segments surface and wriggle if alert is 100% const updateSandworm = (delta) => { const segments = wormSegmentsRef.current; if (!segments.length) return; const active = wormAlert >= 100; for (let i = 0; i < segments.length; i++) { const seg = segments[i]; const segmentOffset = i * 1.5; // If active, raise them near ground if (active) { if (seg.position.y < 1) { seg.position.y += delta * 4; } // Undulate seg.rotation.y += Math.sin(performance.now() * 0.001 + i) * 0.02; seg.position.x += Math.cos(performance.now() * 0.001 + i) * delta * 3; } else { // Hide underground if (seg.position.y > -15 - segmentOffset) { seg.position.y -= delta * 4; } } // Check distance to player for damage const dist = seg.position.distanceTo(cameraRef.current.position); if (dist < 5) { setHealth((prev) => { let val = prev - delta * 10; return val < 0 ? 0 : val; }); } } }; // Day-night cycle const updateDayNight = (delta) => { const scene = sceneRef.current; if (!scene) return; const sunLight = scene.children.find((c) => c.isDirectionalLight); if (!sunLight) return; sunAngleRef.current += delta * 0.05; const angle = sunAngleRef.current; // "Orbit" the sun around (0,0) sunLight.position.x = 50 * Math.cos(angle); sunLight.position.z = 50 * Math.sin(angle); sunLight.position.y = 30 + 10 * Math.sin(angle * 0.5); // Adjust intensity const intensity = 0.7 - 0.4 * (Math.sin(angle) * 0.5 + 0.5); sunLight.intensity = intensity; }; // Animate dust plane, floor, etc. const animateEnvironment = (delta) => { const scene = sceneRef.current; if (!scene) return; // Animate the dust plane's uniform time const dustPlane = scene.children.find((child) => child.material?.uniforms?.uTime); if (dustPlane) { dustPlane.material.uniforms.uTime.value += delta; } // Animate floor time for the noise pattern if desired if (floorMeshRef.current?.material?.uniforms?.uTime) { floorMeshRef.current.material.uniforms.uTime.value += delta; } }; // -------------------- // UI // -------------------- const drinkWater = () => { setThirst(100); setMessage("You quenched your thirst!"); }; return (

{/* Three.js Canvas */}

{/* UI Overlay */}

DuneCraft Survival

{message}

Health: {health.toFixed(0)}

Thirst: {thirst.toFixed(0)}

Spice: {spiceCount}

Worm Alert: {wormAlert}%

Controls:

W/S = Forward/Backward
A/D = Strafe Left/Right
Q/E = Turn Left/Right
Mouse Click = Collect Spice

); }; // Render const container = document.getElementById("renderDiv"); const root = ReactDOM.createRoot(container); root.render();