import React, { useRef, useEffect, useState } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; const DuneCraft = () => { const mountRef = useRef(null); // Game state management const [inventory, setInventory] = useState({ spice: 0, components: 0, walls: 0, traps: 0 }); const [buildMode, setBuildMode] = useState(false); const [selectedBuilding, setSelectedBuilding] = useState(null); const [structures, setStructures] = useState([]); const [gameStatus, setGameStatus] = useState({ dayCount: 1, lastDamageTime: 0, isNight: false }); const [playerStats, setPlayerStats] = useState({ health: 100, stamina: 100, maxHealth: 100, maxStamina: 100 }); const [craftingMenu, setCraftingMenu] = useState(false); // Available crafting recipes const craftingRecipes = { 'Basic Trap': { requirements: { spice: 5, components: 3 }, description: 'Immobilizes sandworms temporarily', type: 'trap', damage: 20, duration: 10000, // 10 seconds range: 5 }, 'Wall Segment': { requirements: { spice: 10, components: 5 }, description: 'Provides protection from sandworms', type: 'wall', health: 100, height: 3 }, 'Health Potion': { requirements: { spice: 2, components: 2 }, description: 'Restores 25 health', type: 'consumable', heal: 25 }, 'Spice Storage': { requirements: { spice: 15, components: 8 }, description: 'Stores additional spice safely', type: 'storage', capacity: 50 } }; // Regeneration effect useEffect(() => { const regenerationInterval = setInterval(() => { setPlayerStats(prev => ({ ...prev, stamina: Math.min(prev.maxStamina, prev.stamina + 1), health: !gameStatus.isNight ? Math.min(prev.maxHealth, prev.health + 0.5) : prev.health })); }, 1000); return () => clearInterval(regenerationInterval); }, [gameStatus.isNight]); // Main game loop useEffect(() => { // Scene setup const scene = new THREE.Scene(); scene.fog = new THREE.FogExp2(0xedaa54, 0.02); // Procedural sky background 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(h, exponent), 0.0)), 1.0); }`; const uniforms = { topColor: { value: new THREE.Color(0x1f1f4d) }, bottomColor: { value: new THREE.Color(0xedaa54) }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(400, 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); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.set(0, 2, 10); // Camera control variables const cameraState = { moveForward: false, moveBackward: false, moveLeft: false, moveRight: false, velocity: new THREE.Vector3(), direction: new THREE.Vector3(), moveSpeed: 0.15 }; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Enhanced Lighting const ambientLight = new THREE.AmbientLight(0xffd4b3, 0.4); scene.add(ambientLight); const sunLight = new THREE.DirectionalLight(0xffd4b3, 1.2); sunLight.position.set(-10, 20, 10); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; scene.add(sunLight); const hemisphereLight = new THREE.HemisphereLight(0xffeeb1, 0x080820, 0.8); scene.add(hemisphereLight); // Sand dunes (ground) with vertex displacement const groundGeometry = new THREE.PlaneGeometry(100, 100, 100, 100); const vertices = groundGeometry.attributes.position.array; for (let i = 0; i < vertices.length; i += 3) { const x = vertices[i]; const z = vertices[i + 2]; vertices[i + 1] = Math.sin(x * 0.1) * Math.sin(z * 0.1) * 2; } groundGeometry.computeVertexNormals(); const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xe6c34a, metalness: 0.1, roughness: 0.8, side: THREE.DoubleSide }); const ground = new THREE.Mesh(groundGeometry, groundMaterial); ground.rotation.x = -Math.PI / 2; scene.add(ground); // Floating spice cubes const cubes = []; const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xff6b00, emissive: 0xff3300, emissiveIntensity: 0.5, metalness: 0.7, roughness: 0.3 }); for(let i = 0; i < 20; i++) { const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.set( Math.random() * 40 - 20, Math.random() * 2 + 1.5, Math.random() * 40 - 20 ); cube.userData = { rotationSpeed: Math.random() * 0.02, floatSpeed: 0.01 + Math.random() * 0.01, floatOffset: Math.random() * Math.PI * 2 }; scene.add(cube); cubes.push(cube); } // Enhanced Sandworm const wormGeometry = new THREE.CylinderGeometry(0.5, 1.5, 6, 16, 8); // Add segments to make it more worm-like const wormVertices = wormGeometry.attributes.position.array; for (let i = 0; i < wormVertices.length; i += 3) { const theta = Math.atan2(wormVertices[i], wormVertices[i + 2]); const radius = Math.sqrt(wormVertices[i] ** 2 + wormVertices[i + 2] ** 2); wormVertices[i] = Math.cos(theta) * (radius + Math.sin(wormVertices[i + 1] * 2) * 0.2); wormVertices[i + 2] = Math.sin(theta) * (radius + Math.sin(wormVertices[i + 1] * 2) * 0.2); } wormGeometry.computeVertexNormals(); const wormMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, metalness: 0.2, roughness: 0.8, flatShading: true }); const sandworm = new THREE.Mesh(wormGeometry, wormMaterial); sandworm.position.set(-15, 1, -15); scene.add(sandworm); // Click handler for collecting spice const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseClick(event) { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(cubes); if (intersects.length > 0) { const cube = intersects[0].object; scene.remove(cube); cubes.splice(cubes.indexOf(cube), 1); // Update inventory when collecting spice setInventory(prev => ({ ...prev, spice: prev.spice + 1, components: prev.components + Math.random() > 0.7 ? 1 : 0 // 30% chance to get components })); // Decrease stamina on collection setPlayerStats(prev => ({ ...prev, stamina: Math.max(0, prev.stamina - 5) })); } } // Movement controls const onKeyDown = (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': cameraState.moveForward = true; break; case 'ArrowDown': case 'KeyS': cameraState.moveBackward = true; break; case 'ArrowLeft': case 'KeyA': cameraState.moveLeft = true; break; case 'ArrowRight': case 'KeyD': cameraState.moveRight = true; break; } }; const onKeyUp = (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': cameraState.moveForward = false; break; case 'ArrowDown': case 'KeyS': cameraState.moveBackward = false; break; case 'ArrowLeft': case 'KeyA': cameraState.moveLeft = false; break; case 'ArrowRight': case 'KeyD': cameraState.moveRight = false; break; } }; window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); window.addEventListener('click', onMouseClick); // Animation loop let time = 0; function animate() { requestAnimationFrame(animate); time += 0.01; // Update camera position based on input cameraState.direction.z = Number(cameraState.moveForward) - Number(cameraState.moveBackward); cameraState.direction.x = Number(cameraState.moveRight) - Number(cameraState.moveLeft); cameraState.direction.normalize(); if (cameraState.moveForward || cameraState.moveBackward) { camera.position.z += cameraState.direction.z * cameraState.moveSpeed; } if (cameraState.moveLeft || cameraState.moveRight) { camera.position.x += cameraState.direction.x * cameraState.moveSpeed; } // Keep camera at constant height camera.position.y = 2; // Animate floating cubes cubes.forEach(cube => { cube.rotation.y += cube.userData.rotationSpeed; cube.position.y += Math.sin(time + cube.userData.floatOffset) * cube.userData.floatSpeed; }); // Enhanced sandworm AI and damage const wormSpeed = gameStatus.isNight ? 0.8 : 0.5; sandworm.position.x = -15 + Math.sin(time * wormSpeed) * 10; sandworm.position.z = -15 + Math.cos(time * wormSpeed) * 10; sandworm.rotation.y = time * wormSpeed; // Check for player damage from sandworm const distanceToWorm = Math.sqrt( Math.pow(camera.position.x - sandworm.position.x, 2) + Math.pow(camera.position.z - sandworm.position.z, 2) ); if (distanceToWorm < 5 && Date.now() - gameStatus.lastDamageTime > 1000) { setPlayerStats(prev => ({ ...prev, health: Math.max(0, prev.health - (gameStatus.isNight ? 20 : 10)) })); setGameStatus(prev => ({ ...prev, lastDamageTime: Date.now() })); } // Day/Night cycle if (Math.floor(time) % 60 === 0) { setGameStatus(prev => ({ ...prev, isNight: !prev.isNight, dayCount: prev.isNight ? prev.dayCount + 1 : prev.dayCount })); } renderer.render(scene, camera); } animate(); // Handle window resize function handleResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } window.addEventListener('resize', handleResize); // Cleanup return () => { window.removeEventListener('click', onMouseClick); window.removeEventListener('resize', handleResize); window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); mountRef.current.removeChild(renderer.domElement); }; }, []); // Crafting function const craftItem = (itemName) => { const recipe = craftingRecipes[itemName]; if (!recipe) return; // Check if player has required resources const canCraft = Object.entries(recipe.requirements).every( ([resource, amount]) => inventory[resource] >= amount ); if (canCraft) { // Deduct resources setInventory(prev => { const newInventory = { ...prev }; Object.entries(recipe.requirements).forEach(([resource, amount]) => { newInventory[resource] -= amount; }); return newInventory; }); // Apply item effects if (itemName === 'Health Potion') { setPlayerStats(prev => ({ ...prev, health: Math.min(prev.maxHealth, prev.health + 25) })); } } }; // Building placement function const placeStructure = (event) => { if (!buildMode || !selectedBuilding) return; const mouse = new THREE.Vector2( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1 ); const raycaster = new THREE.Raycaster(); raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObject(ground); if (intersects.length > 0) { const position = intersects[0].point; const structure = { type: selectedBuilding, position: position, health: craftingRecipes[selectedBuilding].health || 100, placedAt: Date.now() }; setStructures(prev => [...prev, structure]); // Deduct from inventory setInventory(prev => ({ ...prev, [selectedBuilding.toLowerCase()]: prev[selectedBuilding.toLowerCase()] - 1 })); } }; return (

{/* Stats Display */}

Health: {playerStats.health}/{playerStats.maxHealth}

Stamina: {playerStats.stamina}/{playerStats.maxStamina}

Spice: {inventory.spice}

Components: {inventory.components}

Walls: {inventory.walls}

Traps: {inventory.traps}

Day {gameStatus.dayCount} - {gameStatus.isNight ? 'Night' : 'Day'}

{/* Crafting Menu */}

Crafting Menu

{Object.entries(craftingRecipes).map(([itemName, recipe]) => (

{recipe.description}

Requirements: {Object.entries(recipe.requirements).map( ([resource, amount]) => `${resource}: ${amount}` ).join(', ')}

))}

{/* Toggle Crafting Menu Button */} {/* Building Mode Controls */}

{buildMode && (

)}

Use WASD or Arrow Keys to move around and click the floating orange spice cubes to collect them!

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