3D Sandbox Crafting

Okay, integrating a full crafting system with UI is a substantial task. We'll implement the core mechanics: the 2x2 inventory grid, the 3x3 crafting table grid, the recipe book unlocking based on item pickup, and the UI for these elements. We'll also add the `Crafting Table` and `Book` items. * **Press 'E'** to open/close your inventory and the 2x2 crafting grid. * **Press 'R'** to open/close the Recipe Book (once crafted). * **Right-click a Crafting Table** block in the world to open the 3x3 grid. 3D Sandbox Crafting

Health: 100

body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; background-color: #87ceeb; color: white; } canvas { display: block; } /* --- Overlays --- */ #blocker, #game-over, .ui-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 10; flex-direction: column; text-align: center; box-sizing: border-box; } #instructions, #game-over > h1, #game-over > button { background-color: #fff; padding: 20px; border-radius: 10px; color: #333; } #instructions { width: 50%; max-width: 400px; cursor: pointer; } #game-over > h1 { margin-bottom: 20px; } #game-over > button { padding: 10px 20px; font-size: 16px; cursor: pointer; } /* --- In-Game HUD --- */ #crosshair, #health-bar, #hotbar { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; /* Allow clicks through HUD */ } #crosshair { top: 50%; transform: translate(-50%, -50%); font-size: 20px; text-shadow: 1px 1px 2px black; } #health-bar { bottom: 80px; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; font-size: 14px; } #hotbar { bottom: 20px; display: flex; background-color: rgba(0, 0, 0, 0.5); padding: 5px; border-radius: 5px; } /* --- UI Screens (Inventory, Crafting Table, Recipe Book) --- */ .ui-screen { background-color: rgba(50, 50, 50, 0.9); /* Darker semi-transparent background */ border: 2px solid #aaa; border-radius: 10px; padding: 20px; width: 80%; max-width: 800px; height: auto; /* Adjust height based on content */ max-height: 90%; overflow-y: auto; /* Allow scrolling if content overflows */ color: white; display: none; /* Hidden by default */ flex-direction: column; align-items: center; } .ui-screen h2, .ui-screen h3 { margin-top: 0; margin-bottom: 15px; color: #eee; } .close-button { position: absolute; top: 15px; right: 15px; padding: 5px 10px; cursor: pointer; background-color: #555; border: 1px solid #888; color: white; border-radius: 3px; } .close-button:hover { background-color: #777; } /* --- Slots (General) --- */ .slot { width: 50px; height: 50px; border: 1px solid #555; margin: 2px; /* Consistent margin */ background-color: rgba(0, 0, 0, 0.4); display: flex; justify-content: center; /* Center content horizontally */ align-items: center; /* Center content vertically */ font-size: 10px; color: white; position: relative; background-size: 80%; background-repeat: no-repeat; background-position: center; box-sizing: border-box; user-select: none; /* Prevent text selection */ cursor: pointer; /* Indicate interactable */ } .slot:hover { background-color: rgba(255, 255, 255, 0.2); } .slot.selected { /* Hotbar selection */ border-color: #fff; box-shadow: 0 0 5px #fff; } .slot .item-icon { /* For image icons later */ max-width: 80%; max-height: 80%; object-fit: contain; } .slot .item-count { position: absolute; bottom: 2px; right: 2px; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 1px black; } .slot .item-name-tooltip { /* Tooltip on hover */ display: none; position: absolute; bottom: 105%; /* Position above the slot */ left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 3px 6px; border-radius: 3px; font-size: 11px; white-space: nowrap; z-index: 20; /* Ensure tooltip is on top */ } .slot:hover .item-name-tooltip { display: block; } /* --- Crafting Specific --- */ .crafting-area { display: flex; align-items: center; margin-bottom: 20px; justify-content: center; } .crafting-grid { display: grid; gap: 2px; background-color: #444; padding: 5px; border-radius: 3px; margin-right: 10px; } .grid-2x2 { grid-template-columns: repeat(2, 50px); grid-template-rows: repeat(2, 50px); } .grid-3x3 { grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(3, 50px); } .crafting-arrow { font-size: 24px; margin: 0 10px; } .craft-output-slot { background-color: rgba(0, 0, 0, 0.6); /* Slightly different background */ border: 1px solid #888; } .craft-output-slot:hover { background-color: rgba(255, 255, 255, 0.3); } /* --- Inventory Specific --- */ #inventory-screen, #crafting-table-screen { /* Align items for better layout */ justify-content: flex-start; /* Align content to top */ padding-top: 50px; /* Space for title/close button */ } .inventory-main { display: grid; grid-template-columns: repeat(9, 54px); /* 9 slots wide */ grid-template-rows: repeat(3, 54px); /* 3 rows high */ gap: 2px; margin-bottom: 10px; justify-content: center; } .inventory-hotbar { display: grid; grid-template-columns: repeat(9, 54px); gap: 2px; justify-content: center; border-top: 2px solid #666; padding-top: 10px; } /* --- Recipe Book Specific --- */ #recipe-book-screen { justify-content: flex-start; padding-top: 50px; } #recipe-list { width: 100%; max-height: calc(90% - 60px); /* Adjust based on padding/title */ overflow-y: auto; background-color: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 5px; } .recipe-entry { display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.1); margin-bottom: 8px; padding: 5px; border-radius: 4px; cursor: pointer; } .recipe-entry:hover { background-color: rgba(255, 255, 255, 0.2); } .recipe-output-icon { width: 40px; height: 40px; margin-right: 10px; border: 1px solid #666; background-color: rgba(0, 0, 0, 0.4); /* background-image, size, etc. set by JS */ background-size: contain; background-repeat: no-repeat; background-position: center; } .recipe-name { flex-grow: 1; font-size: 14px; } .recipe-ingredients-preview { /* Optional: Show small icons of ingredients */ display: flex; margin-left: 10px; } .recipe-ingredients-preview .slot { width: 20px; height: 20px; margin: 1px; border: none; } import * as THREE from 'three'; import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; import { itemTypes, recipes, playerInventory, craftingGrid, craftingTableGrid, initializeInventory, addItemToInventory, getSelectedItem, consumeItem, playerKnownRecipes, unlockRecipesForItem } from './inventory.js'; // Separate inventory/item logic import { updateCraftingOutput, clearCraftingGrid } from './crafting.js'; // Separate crafting logic import { updateRecipeBookUI, toggleRecipeBook, closeRecipeBook } from './ui.js'; // Separate UI logic // --- Core Game Variables --- let camera, scene, renderer, controls; let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false; let canJump = false; let isGameOver = false; let isInventoryOpen = false; let isCraftingTableOpen = false; let isRecipeBookOpen = false; let velocity = new THREE.Vector3(); let direction = new THREE.Vector3(); const worldObjects = []; // Blocks const mobs = []; const droppedItems = []; const voxelSize = 1; // --- Player Stats --- let playerHealth = 100; const maxPlayerHealth = 100; // --- Block/Item Definitions (Simplified, moved detailed to inventory.js) --- const blockGeometry = new THREE.BoxGeometry(voxelSize, voxelSize, voxelSize); const blockMaterials = {}; // Cache block materials const droppedItemGeometry = new THREE.BoxGeometry(voxelSize * 0.3, voxelSize * 0.3, voxelSize * 0.3); // --- Mob Definitions --- const mobGeometry = new THREE.BoxGeometry(0.8, 1.8, 0.8); const mobTypes = { zombie: { name: 'Zombie', health: 20, attackDamage: 5, speed: 1.5, attackRange: 1.5, attackCooldown: 1.5, detectionRange: 15, material: new THREE.MeshStandardMaterial({ color: 0x3a5f3a }), drops: [{ type: 'apple', chance: 0.3, min: 0, max: 1 }] }, }; // --- UI Elements --- const blocker = document.getElementById('blocker'); const instructions = document.getElementById('instructions'); const healthValueUI = document.getElementById('health-value'); const gameOverUI = document.getElementById('game-over'); const respawnButton = document.getElementById('respawn-button'); const inventoryScreen = document.getElementById('inventory-screen'); const craftingTableScreen = document.getElementById('crafting-table-screen'); const recipeBookScreen = document.getElementById('recipe-book-screen'); // --- Global Functions for UI Interaction --- window.toggleInventory = toggleInventory; window.closeCraftingTable = closeCraftingTable; window.toggleRecipeBook = toggleRecipeBook; // --- Initialization --- function init() { isGameOver = false; gameOverUI.style.display = 'none'; blocker.style.display = 'flex'; instructions.style.display = ''; inventoryScreen.style.display = 'none'; craftingTableScreen.style.display = 'none'; recipeBookScreen.style.display = 'none'; isInventoryOpen = false; isCraftingTableOpen = false; isRecipeBookOpen = false; // Scene scene = new THREE.Scene(); scene.background = new THREE.Color(0x87ceeb); scene.fog = new THREE.Fog(0x87ceeb, 0, 150); // Camera camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 10, 5); // Renderer renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.7); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); directionalLight.position.set(50, 80, 50); directionalLight.castShadow = true; directionalLight.shadow.mapSize.width = 2048; directionalLight.shadow.mapSize.height = 2048; directionalLight.shadow.camera.near = 0.5; directionalLight.shadow.camera.far = 200; const shadowCamSize = 50; directionalLight.shadow.camera.left = -shadowCamSize; directionalLight.shadow.camera.right = shadowCamSize; directionalLight.shadow.camera.top = shadowCamSize; directionalLight.shadow.camera.bottom = -shadowCamSize; scene.add(directionalLight); scene.add(directionalLight.target); // Controls controls = new PointerLockControls(camera, document.body); controls.addEventListener('lock', () => { if (!isGameOver && !isInventoryOpen && !isCraftingTableOpen && !isRecipeBookOpen) { instructions.style.display = 'none'; blocker.style.display = 'none'; } }); controls.addEventListener('unlock', () => { // Only show blocker if no UI is open and not game over if (!isGameOver && !isInventoryOpen && !isCraftingTableOpen && !isRecipeBookOpen) { blocker.style.display = 'flex'; instructions.style.display = ''; } }); instructions.addEventListener('click', () => controls.lock()); respawnButton.addEventListener('click', respawnPlayer); scene.add(controls.getObject()); // Input Listeners document.addEventListener('keydown', onKeyDown); document.addEventListener('keyup', onKeyUp); document.addEventListener('mousedown', onMouseDown); // Use mousedown for interactions // Initialize Materials Cache for (const id in itemTypes) { if (itemTypes[id].type === 'block') { blockMaterials[id] = new THREE.MeshStandardMaterial({ color: itemTypes[id].color }); } } // Add Crafting Table material if not already defined as a block if (!blockMaterials['crafting_table']) { blockMaterials['crafting_table'] = new THREE.MeshStandardMaterial({ color: 0xDEB887 }); // BurlyWood color } // Initial World State resetWorld(); // Handle window resize window.addEventListener('resize', onWindowResize); } function resetWorld() { // Clear existing objects worldObjects.forEach(obj => scene.remove(obj)); mobs.forEach(mob => scene.remove(mob.mesh)); droppedItems.forEach(item => scene.remove(item.mesh)); worldObjects.length = 0; mobs.length = 0; droppedItems.length = 0; playerKnownRecipes.clear(); // Clear known recipes // Reset player state playerHealth = maxPlayerHealth; updateHealthUI(); initializeInventory(); // Reset inventory from inventory.js controls.getObject().position.set(0, 10, 5); velocity.set(0, 0, 0); // Add starting items (triggers recipe unlocks) addItemToInventory('wood_log', 10); // Give logs first to unlock basics addItemToInventory('stone', 16); addItemToInventory('apple', 5); // Crafting a book requires paper and leather, let's give ingredients addItemToInventory('sugar_cane', 3); // Leather needs mobs, maybe spawn a cow or give leather directly for testing addItemToInventory('leather', 1); // Ground Plane const groundSize = 30; for (let x = -groundSize / 2; x < groundSize / 2; x++) { for (let z = -groundSize / 2; z < groundSize / 2; z++) { addWorldBlock(x * voxelSize + voxelSize / 2, -voxelSize / 2, z * voxelSize + voxelSize / 2, 'grass'); addWorldBlock(x * voxelSize + voxelSize / 2, -voxelSize * 1.5, z * voxelSize + voxelSize / 2, 'dirt'); for (let y = 2; y < 5; y++) { addWorldBlock(x * voxelSize + voxelSize / 2, -voxelSize * (y + 0.5), z * voxelSize + voxelSize / 2, 'stone'); } } } // Add some trees for(let i = 0; i < 5; i++) { const tx = Math.floor(Math.random() * 20) - 10; const tz = Math.floor(Math.random() * 20) - 10; for(let h = 0; h < 4; h++) { addWorldBlock(tx, h - 0.5, tz, 'wood_log'); } // Simple leaves for(let lx = -1; lx <= 1; lx++) { for(let lz = -1; lz <= 1; lz++) { if(lx !== 0 || lz !== 0) { addWorldBlock(tx + lx, 3.5, tz + lz, 'grass'); // Use grass as temp leaves } } } addWorldBlock(tx, 4.5, tz, 'grass'); } // Spawn initial mobs spawnMob('zombie', 5, 5, 5); spawnMob('zombie', -5, 5, -5); spawnMob('zombie', 0, 5, 10); // Update UI after inventory setup // updateHotbarUI(); // Called within inventory.js now updateRecipeBookUI(); // Update recipe book with initially known recipes } function respawnPlayer() { isGameOver = false; gameOverUI.style.display = 'none'; resetWorld(); controls.lock(); } // --- Helper Functions --- function addWorldBlock(x, y, z, typeId) { const material = blockMaterials[typeId]; if (!material) { console.warn(`Material not found for block type: ${typeId}`); return null; } const block = new THREE.Mesh(blockGeometry, material); block.position.set(x, y, z); block.castShadow = true; block.receiveShadow = true; block.userData = { typeId: typeId, isGround: y <= -voxelSize / 2 }; scene.add(block); worldObjects.push(block); return block; } function removeWorldBlock(block) { scene.remove(block); const index = worldObjects.indexOf(block); if (index > -1) worldObjects.splice(index, 1); } function spawnDroppedItem(x, y, z, typeId) { const itemDef = itemTypes[typeId]; if (!itemDef) return; // Use block material or a default color const material = blockMaterials[typeId] || new THREE.MeshStandardMaterial({ color: itemDef.color || 0xffffff }); const itemMesh = new THREE.Mesh(droppedItemGeometry, material); itemMesh.position.set(x, y + 0.2, z); itemMesh.castShadow = true; const droppedItemData = { mesh: itemMesh, typeId: typeId, pickupCooldown: 0.5 }; scene.add(itemMesh); droppedItems.push(droppedItemData); } function spawnMob(typeId, x, y, z) { const mobDef = mobTypes[typeId]; if (!mobDef) return; const mobMesh = new THREE.Mesh(mobGeometry, mobDef.material.clone()); // Clone material mobMesh.position.set(x, y, z); mobMesh.castShadow = true; const mobData = { mesh: mobMesh, typeId: typeId, definition: mobDef, health: mobDef.health, velocity: new THREE.Vector3(), targetDirection: new THREE.Vector3(Math.random() - 0.5, 0, Math.random() - 0.5).normalize(), state: 'wandering', stateTimer: Math.random() * 5 + 2, attackTimer: mobDef.attackCooldown, }; scene.add(mobMesh); mobs.push(mobData); } function updateHealthUI() { healthValueUI.textContent = Math.max(0, Math.round(playerHealth)); } function takePlayerDamage(amount) { if (isGameOver) return; playerHealth -= amount; updateHealthUI(); if (playerHealth <= 0) { gameOver(); } } function healPlayer(amount) { if (isGameOver) return; playerHealth = Math.min(maxPlayerHealth, playerHealth + amount); updateHealthUI(); } function gameOver() { isGameOver = true; controls.unlock(); blocker.style.display = 'flex'; instructions.style.display = 'none'; gameOverUI.style.display = 'flex'; inventoryScreen.style.display = 'none'; // Close UI on death craftingTableScreen.style.display = 'none'; recipeBookScreen.style.display = 'none'; isInventoryOpen = false; isCraftingTableOpen = false; isRecipeBookOpen = false; } // --- UI Toggles --- function toggleInventory() { if (isGameOver || isCraftingTableOpen) return; // Don't open if other modal is open or game over isInventoryOpen = !isInventoryOpen; inventoryScreen.style.display = isInventoryOpen ? 'flex' : 'none'; if (isInventoryOpen) { closeRecipeBook(); // Close recipe book if opening inventory controls.unlock(); updateCraftingOutput('inventory'); // Update crafting grid when opening } else { // Return items from crafting grid to inventory when closing clearCraftingGrid('inventory', true); controls.lock(); } } function openCraftingTable() { if (isGameOver || isInventoryOpen) return; isCraftingTableOpen = true; craftingTableScreen.style.display = 'flex'; closeRecipeBook(); // Close recipe book if opening table controls.unlock(); updateCraftingOutput('table'); // Update crafting grid when opening } function closeCraftingTable() { if (!isCraftingTableOpen) return; isCraftingTableOpen = false; craftingTableScreen.style.display = 'none'; // Return items from crafting grid to inventory when closing clearCraftingGrid('table', true); // Only lock controls if inventory isn't also open (shouldn't happen with current logic, but safe) if (!isInventoryOpen) { controls.lock(); } } // toggleRecipeBook moved to ui.js but needs access to controls window.lockControls = () => controls.lock(); window.unlockControls = () => controls.unlock(); window.getIsRecipeBookOpen = () => isRecipeBookOpen; window.setIsRecipeBookOpen = (val) => isRecipeBookOpen = val; window.getIsInventoryOpen = () => isInventoryOpen; window.getIsCraftingTableOpen = () => isCraftingTableOpen; // --- Event Handlers --- function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function onKeyDown(event) { if (isGameOver) return; // Handle UI toggles first if (event.code === 'KeyE') { toggleInventory(); return; // Prevent movement keys registering while toggling UI } if (event.code === 'KeyR') { toggleRecipeBook(); return; } // Close UI with Escape key if (event.code === 'Escape') { if (isInventoryOpen) toggleInventory(); else if (isCraftingTableOpen) closeCraftingTable(); else if (isRecipeBookOpen) toggleRecipeBook(); else if (controls.isLocked) { /* Maybe add pause menu later */ } return; } // If any UI is open, don't process game controls (except hotbar keys) if (isInventoryOpen || isCraftingTableOpen || isRecipeBookOpen) { // Allow hotbar switching even with UI open if (event.code.startsWith('Digit')) { const digit = parseInt(event.code.slice(5)); if (digit >= 1 && digit <= 9) { playerInventory.selectedSlot = digit - 1; // updateHotbarUI(); // Called by inventory.js } } return; } // Game controls switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = true; break; case 'ArrowLeft': case 'KeyA': moveLeft = true; break; case 'ArrowDown': case 'KeyS': moveBackward = true; break; case 'ArrowRight': case 'KeyD': moveRight = true; break; case 'Space': if (canJump === true) velocity.y += 35; canJump = false; break; // Hotbar selection (handled above if UI is open) case 'Digit1': playerInventory.selectedSlot = 0; /*updateHotbarUI();*/ break; case 'Digit2': playerInventory.selectedSlot = 1; /*updateHotbarUI();*/ break; case 'Digit3': playerInventory.selectedSlot = 2; /*updateHotbarUI();*/ break; case 'Digit4': playerInventory.selectedSlot = 3; /*updateHotbarUI();*/ break; case 'Digit5': playerInventory.selectedSlot = 4; /*updateHotbarUI();*/ break; case 'Digit6': playerInventory.selectedSlot = 5; /*updateHotbarUI();*/ break; case 'Digit7': playerInventory.selectedSlot = 6; /*updateHotbarUI();*/ break; case 'Digit8': playerInventory.selectedSlot = 7; /*updateHotbarUI();*/ break; case 'Digit9': playerInventory.selectedSlot = 8; /*updateHotbarUI();*/ break; } } function onKeyUp(event) { // Don't process game controls if UI is open if (isInventoryOpen || isCraftingTableOpen || isRecipeBookOpen) return; switch (event.code) { case 'ArrowUp': case 'KeyW': moveForward = false; break; case 'ArrowLeft': case 'KeyA': moveLeft = false; break; case 'ArrowDown': case 'KeyS': moveBackward = false; break; case 'ArrowRight': case 'KeyD': moveRight = false; break; } } const interactionRaycaster = new THREE.Raycaster(); const attackRange = 3; const placeRange = 5; function onMouseDown(event) { // Ignore clicks if UI is open or game over if (isInventoryOpen || isCraftingTableOpen || isRecipeBookOpen || isGameOver) return; // Ignore clicks if pointer is not locked (e.g., on blocker screen) if (!controls.isLocked) return; const selectedInvItem = getSelectedItem(); // From inventory.js const selectedItemDef = selectedInvItem ? itemTypes[selectedInvItem.typeId] : null; interactionRaycaster.setFromCamera({ x: 0, y: 0 }, camera); if (event.button === 0) { // Left Click - Attack / Break / Use Item let interacted = false; // 1. Attack Mobs const mobMeshes = mobs.map(m => m.mesh); const mobIntersects = interactionRaycaster.intersectObjects(mobMeshes); if (mobIntersects.length > 0 && mobIntersects[0].distance <= attackRange) { const hitMobMesh = mobIntersects[0].object; const hitMobData = mobs.find(m => m.mesh === hitMobMesh); if (hitMobData) { let damage = 1; // Base hand damage if (selectedItemDef && selectedItemDef.type === 'weapon') { damage = selectedItemDef.attackDamage || 1; } hitMobData.health -= damage; // TODO: Add visual feedback (flash red) console.log(`Hit ${hitMobData.definition.name}, health: ${hitMobData.health}`); if (hitMobData.health <= 0) { scene.remove(hitMobMesh); const index = mobs.findIndex(m => m.mesh === hitMobMesh); if (index > -1) mobs.splice(index, 1); hitMobData.definition.drops?.forEach(drop => { if (Math.random() < drop.chance) { const count = Math.floor(Math.random() * (drop.max - drop.min + 1)) + drop.min; for(let i = 0; i < count; i++) { spawnDroppedItem(hitMobMesh.position.x, hitMobMesh.position.y, hitMobMesh.position.z, drop.type); } } }); } interacted = true; } } // 2. Break Block (if not holding a block or weapon didn't hit mob) if (!interacted) { const blockIntersects = interactionRaycaster.intersectObjects(worldObjects); if (blockIntersects.length > 0 && blockIntersects[0].distance <= placeRange) { const block = blockIntersects[0].object; if (!block.userData.isGround) { // Don't break ground easily const blockTypeId = block.userData.typeId; removeWorldBlock(block); spawnDroppedItem(block.position.x, block.position.y, block.position.z, blockTypeId); interacted = true; } } } // 3. Use Consumable (if nothing else interacted) if (!interacted && selectedItemDef && selectedItemDef.type === 'consumable') { if (selectedItemDef.healAmount && playerHealth < maxPlayerHealth) { healPlayer(selectedItemDef.healAmount); consumeItem(playerInventory.selectedSlot); // Consume from inventory interacted = true; } } } else if (event.button === 2) { // Right Click - Place Block / Use Block const blockIntersects = interactionRaycaster.intersectObjects(worldObjects); if (blockIntersects.length > 0 && blockIntersects[0].distance <= placeRange) { const intersect = blockIntersects[0]; const targetBlock = intersect.object; const targetBlockId = targetBlock.userData.typeId; // Check if right-clicking a specific block type (e.g., Crafting Table) if (targetBlockId === 'crafting_table') { openCraftingTable(); return; // Don't try to place a block } // Add checks for Furnace, Chest etc. here later // If not interacting with a special block, try placing if (selectedItemDef && selectedItemDef.type === 'block') { const normal = intersect.face.normal.clone(); const placePosition = targetBlock.position.clone().addScaledVector(normal, voxelSize); const playerPos = controls.getObject().position; const playerBox = new THREE.Box3().setFromCenterAndSize(playerPos, new THREE.Vector3(voxelSize * 0.8, playerHeight, voxelSize * 0.8)); const placeBox = new THREE.Box3().setFromCenterAndSize(placePosition, new THREE.Vector3(voxelSize, voxelSize, voxelSize)); // Also check if placing on the same spot as an existing block (shouldn't happen with normal placement) const occupied = worldObjects.some(obj => obj.position.distanceToSquared(placePosition) < 0.1); if (!playerBox.intersectsBox(placeBox) && !occupied) { const placed = addWorldBlock(placePosition.x, placePosition.y, placePosition.z, selectedInvItem.typeId); if (placed) { consumeItem(playerInventory.selectedSlot); // Consume from inventory } } } } } } // --- Animation Loop --- let prevTime = performance.now(); const playerHeight = 1.8; const gravity = 9.8 * 12.0; const playerHalfHeight = playerHeight / 2; const collisionRaycasterDown = new THREE.Raycaster(new THREE.Vector3(), new THREE.Vector3(0, -1, 0), 0, playerHalfHeight + 0.2); const itemPickupRadiusSq = 1.5 * 1.5; function animate() { // Stop game loop logic if game over if (isGameOver) { requestAnimationFrame(animate); // Keep rendering maybe? renderer.render(scene, camera); return; } requestAnimationFrame(animate); const time = performance.now(); const delta = Math.min(0.1, (time - prevTime) / 1000); const playerPosition = controls.getObject().position; // --- Player Movement & Physics (only if controls locked) --- if (controls.isLocked === true) { collisionRaycasterDown.ray.origin.copy(playerPosition); const intersectionsDown = collisionRaycasterDown.intersectObjects(worldObjects, false); const onObject = intersectionsDown.length > 0; velocity.y -= gravity * delta; if (onObject && velocity.y < 0) { const groundY = intersectionsDown[0].point.y; if (playerPosition.y - playerHalfHeight < groundY + 0.01) { velocity.y = 0; playerPosition.y = groundY + playerHalfHeight; canJump = true; } } velocity.x -= velocity.x * 10.0 * delta; velocity.z -= velocity.z * 10.0 * delta; direction.z = Number(moveForward) - Number(moveBackward); direction.x = Number(moveRight) - Number(moveLeft); direction.normalize(); const speed = 60.0; if (moveForward || moveBackward) velocity.z -= direction.z * speed * delta; if (moveLeft || moveRight) velocity.x -= direction.x * speed * delta; controls.moveRight(-velocity.x * delta); controls.moveForward(-velocity.z * delta); playerPosition.y += velocity.y * delta; if (playerPosition.y < -20) { velocity.y = 0; playerPosition.set(0, 10, 0); canJump = true; } // --- Item Pickup --- for (let i = droppedItems.length - 1; i >= 0; i--) { const item = droppedItems[i]; item.pickupCooldown -= delta; if (item.pickupCooldown <= 0) { const distanceSq = playerPosition.distanceToSquared(item.mesh.position); if (distanceSq < itemPickupRadiusSq) { if (addItemToInventory(item.typeId, 1)) { // addItemToInventory now handles recipe unlocks scene.remove(item.mesh); droppedItems.splice(i, 1); } else { item.pickupCooldown = 0.1; // Inventory full } } } } } // End if(controls.isLocked) // --- Item Animation (always run) --- droppedItems.forEach(item => { item.mesh.rotation.y += delta * 2; // Spin animation }); // --- Mob AI & Physics (always run) --- mobs.forEach(mob => { mob.stateTimer -= delta; mob.attackTimer -= delta; const mobPos = mob.mesh.position; const mobDef = mob.definition; // Ground check const mobRaycasterDown = new THREE.Raycaster(mobPos, new THREE.Vector3(0, -1, 0), 0, 1.1); const mobIntersectsDown = mobRaycasterDown.intersectObjects(worldObjects, false); const mobOnGround = mobIntersectsDown.length > 0; if (!mobOnGround) { mob.velocity.y -= gravity * delta * 0.8; } else { mob.velocity.y = 0; mobPos.y = mobIntersectsDown[0].point.y + 1.0; } // State Machine const distanceToPlayerSq = mobPos.distanceToSquared(playerPosition); const canSeePlayer = distanceToPlayerSq < mobDef.detectionRange * mobDef.detectionRange; if (mob.state === 'wandering') { if (canSeePlayer) mob.state = 'chasing'; else if (mob.stateTimer <= 0) { mob.targetDirection.set(Math.random() - 0.5, 0, Math.random() - 0.5).normalize(); mob.stateTimer = Math.random() * 5 + 3; } } else if (mob.state === 'chasing') { if (distanceToPlayerSq < mobDef.attackRange * mobDef.attackRange) mob.state = 'attacking'; else if (!canSeePlayer && mob.stateTimer <= 0) mob.state = 'wandering'; else mob.targetDirection.subVectors(playerPosition, mobPos).normalize().setY(0); } else if (mob.state === 'attacking') { if (distanceToPlayerSq > mobDef.attackRange * mobDef.attackRange * 1.2) mob.state = 'chasing'; else if (mob.attackTimer <= 0) { takePlayerDamage(mobDef.attackDamage); mob.attackTimer = mobDef.attackCooldown; } } // Movement if (mob.state === 'wandering' || mob.state === 'chasing') { if (mobOnGround) { mob.velocity.x = mob.targetDirection.x * mobDef.speed; mob.velocity.z = mob.targetDirection.z * mobDef.speed; } else { mob.velocity.x *= 0.95; mob.velocity.z *= 0.95; } } else if (mob.state === 'attacking') { mob.velocity.x = 0; mob.velocity.z = 0; const lookTarget = playerPosition.clone(); lookTarget.y = mobPos.y; mob.mesh.lookAt(lookTarget); } // Apply velocity mobPos.x += mob.velocity.x * delta; mobPos.y += mob.velocity.y * delta; mobPos.z += mob.velocity.z * delta; // Boundary check const boundary = 30; if (mobPos.x > boundary || mobPos.x < -boundary || mobPos.z > boundary || mobPos.z < -boundary) { if (mob.state === 'wandering') mob.targetDirection.negate(); mobPos.clampScalar(-boundary, boundary); } }); prevTime = time; renderer.render(scene, camera); } // --- Start --- init(); animate(); import { updateRecipeBookUI } from './ui.js'; // Need to update recipe book on unlock import { updateCraftingOutput } from './crafting.js'; // Need to update crafting grid if inventory changes // --- Item Definitions --- export const itemTypes = { // Raw Materials wood_log: { name: 'Wood Log', type: 'block', color: 0x654321, stackable: true }, stone: { name: 'Cobblestone', type: 'block', color: 0x808080, stackable: true }, dirt: { name: 'Dirt', type: 'block', color: 0x8B4513, stackable: true }, grass: { name: 'Grass Block', type: 'block', color: 0x228b22, stackable: true }, sand: { name: 'Sand', type: 'block', color: 0xF4A460, stackable: true }, coal: { name: 'Coal', type: 'material', color: 0x363636, stackable: true }, iron_ore: { name: 'Iron Ore', type: 'block', color: 0xA0522D, stackable: true }, // Brownish-orange flecks leather: { name: 'Leather', type: 'material', color: 0x8B4513, stackable: true }, stick: { name: 'Stick', type: 'material', color: 0x8B4513, stackable: true }, flint: { name: 'Flint', type: 'material', color: 0x696969, stackable: true }, feather: { name: 'Feather', type: 'material', color: 0xFFFFFF, stackable: true }, string: { name: 'String', type: 'material', color: 0xEEEEEE, stackable: true }, sugar_cane: { name: 'Sugar Cane', type: 'material', color: 0x90EE90, stackable: true }, paper: { name: 'Paper', type: 'material', color: 0xFFFFFF, stackable: true }, // Processed Materials wood_plank: { name: 'Wood Plank', type: 'block', color: 0xDEB887, stackable: true }, iron_ingot: { name: 'Iron Ingot', type: 'material', color: 0xD3D3D3, stackable: true }, // Tools & Weapons wood_pickaxe: { name: 'Wooden Pickaxe', type: 'tool', breakSpeedMultiplier: 1.5, stackable: false }, stone_pickaxe: { name: 'Stone Pickaxe', type: 'tool', breakSpeedMultiplier: 2, stackable: false }, iron_pickaxe: { name: 'Iron Pickaxe', type: 'tool', breakSpeedMultiplier: 4, stackable: false }, wood_sword: { name: 'Wooden Sword', type: 'weapon', attackDamage: 4, stackable: false }, stone_sword: { name: 'Stone Sword', type: 'weapon', attackDamage: 5, stackable: false }, iron_sword: { name: 'Iron Sword', type: 'weapon', attackDamage: 6, stackable: false }, bow: { name: 'Bow', type: 'weapon', stackable: false }, arrow: { name: 'Arrow', type: 'material', stackable: true }, // Ammo // Utility crafting_table: { name: 'Crafting Table', type: 'block', color: 0xDEB887, stackable: true }, furnace: { name: 'Furnace', type: 'block', color: 0x708090, stackable: true }, chest: { name: 'Chest', type: 'block', color: 0xCD853F, stackable: true }, torch: { name: 'Torch', type: 'block', color: 0xFFA500, stackable: true }, // Represent color, actual rendering is different book: { name: 'Guide to the Wilds', type: 'tool', stackable: false }, // The recipe book item // Consumables apple: { name: 'Apple', type: 'consumable', healAmount: 10, stackable: true }, }; // --- Recipes --- // Key: output item id // Value: { grid: 2 or 3, pattern: array of arrays (rows), ingredients: { char: itemId } } export const recipes = { wood_plank: { grid: 2, // Can be crafted in inventory count: 4, pattern: [ // Shapeless - represented by single item in 2x2 ['L'] ], ingredients: { 'L': 'wood_log' } }, stick: { grid: 2, count: 4, pattern: [ ['P'], ['P'] ], ingredients: { 'P': 'wood_plank' } }, crafting_table: { grid: 2, count: 1, pattern: [ ['P', 'P'], ['P', 'P'] ], ingredients: { 'P': 'wood_plank' } }, torch: { grid: 2, count: 4, pattern: [ ['C'], // C for Coal (or Charcoal later) ['S'] // S for Stick ], ingredients: { 'C': 'coal', 'S': 'stick' } }, furnace: { grid: 3, count: 1, pattern: [ ['O', 'O', 'O'], // O for Cobblestone ['O', ' ', 'O'], ['O', 'O', 'O'] ], ingredients: { 'O': 'stone' } }, chest: { grid: 3, count: 1, pattern: [ ['P', 'P', 'P'], // P for Plank ['P', ' ', 'P'], ['P', 'P', 'P'] ], ingredients: { 'P': 'wood_plank' } }, wood_pickaxe: { grid: 3, count: 1, pattern: [ ['P', 'P', 'P'], [' ', 'S', ' '], [' ', 'S', ' '] ], ingredients: { 'P': 'wood_plank', 'S': 'stick' } }, stone_pickaxe: { grid: 3, count: 1, pattern: [ ['O', 'O', 'O'], // O for Cobblestone [' ', 'S', ' '], [' ', 'S', ' '] ], ingredients: { 'O': 'stone', 'S': 'stick' } }, wood_sword: { grid: 3, count: 1, pattern: [ [' ', 'P', ' '], [' ', 'P', ' '], [' ', 'S', ' '] ], ingredients: { 'P': 'wood_plank', 'S': 'stick' } }, stone_sword: { grid: 3, count: 1, pattern: [ [' ', 'O', ' '], // O for Cobblestone [' ', 'O', ' '], [' ', 'S', ' '] ], ingredients: { 'O': 'stone', 'S': 'stick' } }, bow: { grid: 3, count: 1, pattern: [ ['R', 'S', ' '], // R for String ['R', ' ', 'S'], ['R', 'S', ' '] ], ingredients: { 'S': 'stick', 'R': 'string' } }, arrow: { grid: 3, count: 4, pattern: [ [' ', 'F', ' '], // F for Flint [' ', 'S', ' '], // S for Stick [' ', 'E', ' '] // E for Feather ], ingredients: { 'F': 'flint', 'S': 'stick', 'E': 'feather' } }, paper: { grid: 3, // Requires crafting table count: 3, pattern: [ ['G', 'G', 'G'] // G for Sugar Cane ], ingredients: { 'G': 'sugar_cane' } }, book: { grid: 3, count: 1, pattern: [ // Example pattern, might need adjustment [' ', 'A', ' '], // A for Paper ['L', 'A', ' '], // L for Leather [' ', 'A', ' '] ], ingredients: { 'A': 'paper', 'L': 'leather' } }, // Add more recipes based on the design doc... }; // --- Player Inventory State --- export const playerInventory = { slots: new Array(36).fill(null), // 3 rows of 9 main + 1 row of 9 hotbar selectedSlot: 0, // Index within the hotbar (0-8, maps to slots 27-35) }; // --- Crafting Grid State --- // Separate state for inventory 2x2 and table 3x3 export const craftingGrid = { inventory: new Array(4).fill(null), // 2x2 table: new Array(9).fill(null), // 3x3 output: { inventory: null, table: null } // Store potential output item }; // --- Recipe Book State --- export const playerKnownRecipes = new Set(); // Stores IDs of recipes the player knows // --- Inventory Functions --- export function initializeInventory() { playerInventory.slots.fill(null); playerInventory.selectedSlot = 0; craftingGrid.inventory.fill(null); craftingGrid.table.fill(null); craftingGrid.output.inventory = null; craftingGrid.output.table = null; updateInventoryUI(); // Initial UI update } // Finds the first available slot or stack for an item export function addItemToInventory(typeId, count = 1) { const itemDef = itemTypes[typeId]; if (!itemDef) return false; let remainingCount = count; // --- Recipe Unlock Trigger --- unlockRecipesForItem(typeId); // --- End Recipe Unlock --- // 1. Try stacking in hotbar first (slots 27-35) if (itemDef.stackable) { for (let i = 27; i < 36; i++) { const slot = playerInventory.slots[i]; if (slot && slot.typeId === typeId && slot.count < 64) { const canAdd = 64 - slot.count; const toAdd = Math.min(remainingCount, canAdd); slot.count += toAdd; remainingCount -= toAdd; if (remainingCount <= 0) { updateInventoryUI(); return true; } } } } // 2. Try stacking in main inventory (slots 0-26) if (itemDef.stackable) { for (let i = 0; i < 27; i++) { const slot = playerInventory.slots[i]; if (slot && slot.typeId === typeId && slot.count < 64) { const canAdd = 64 - slot.count; const toAdd = Math.min(remainingCount, canAdd); slot.count += toAdd; remainingCount -= toAdd; if (remainingCount <= 0) { updateInventoryUI(); return true; } } } } // 3. Try adding to empty hotbar slot for (let i = 27; i < 36; i++) { if (!playerInventory.slots[i]) { playerInventory.slots[i] = { typeId: typeId, count: remainingCount }; updateInventoryUI(); return true; // Added whole stack } } // 4. Try adding to empty main inventory slot for (let i = 0; i < 27; i++) { if (!playerInventory.slots[i]) { playerInventory.slots[i] = { typeId: typeId, count: remainingCount }; updateInventoryUI(); return true; // Added whole stack } } updateInventoryUI(); // Update UI even if partially added or failed return remainingCount < count; // Return true if *any* amount was added } // Removes items from a specific inventory slot index export function consumeItem(slotIndex, count = 1) { const slot = playerInventory.slots[slotIndex]; if (slot && slot.count >= count) { slot.count -= count; if (slot.count <= 0) { playerInventory.slots[slotIndex] = null; // Clear slot if empty } updateInventoryUI(); // If the consumed item was in a crafting grid, update that grid's output if (window.getIsInventoryOpen()) updateCraftingOutput('inventory'); if (window.getIsCraftingTableOpen()) updateCraftingOutput('table'); return true; } return false; } // Gets the item object in the currently selected hotbar slot export function getSelectedItem() { const hotbarIndex = playerInventory.selectedSlot; // 0-8 const inventoryIndex = 27 + hotbarIndex; // Map to 27-35 return playerInventory.slots[inventoryIndex]; } // --- Recipe Book Functions --- export function unlockRecipesForItem(itemId) { let newlyUnlocked = false; for (const outputId in recipes) { const recipe = recipes[outputId]; // Check if this item is an ingredient in the recipe let isIngredient = false; for (const char in recipe.ingredients) { if (recipe.ingredients[char] === itemId) { isIngredient = true; break; } } // If it's an ingredient and the recipe isn't known, unlock it if (isIngredient && !playerKnownRecipes.has(outputId)) { playerKnownRecipes.add(outputId); newlyUnlocked = true; console.log(`Unlocked recipe: ${outputId}`); } } // If any recipes were newly unlocked, update the UI if (newlyUnlocked) { updateRecipeBookUI(); } } // --- UI Update --- // Updates the visual representation of the inventory and hotbar export function updateInventoryUI() { // Update main inventory slots (0-26) in the UI screens const mainInvContainers = document.querySelectorAll('#inventory-screen .inventory-main, #crafting-table-screen .inventory-main'); mainInvContainers.forEach(container => { container.innerHTML = ''; // Clear previous slots for (let i = 0; i < 27; i++) { const slotElement = createSlotElement(playerInventory.slots[i], i, 'inventory'); container.appendChild(slotElement); } }); // Update hotbar slots (27-35) in the UI screens AND the main game HUD hotbar const hotbarContainers = document.querySelectorAll('#inventory-screen .inventory-hotbar, #crafting-table-screen .inventory-hotbar, #hotbar'); hotbarContainers.forEach(container => { container.innerHTML = ''; // Clear previous slots for (let i = 27; i < 36; i++) { const hotbarIndex = i - 27; const slotElement = createSlotElement(playerInventory.slots[i], i, 'hotbar'); if (container.id === 'hotbar') { // Add selection class only to the HUD hotbar slotElement.dataset.hotbarIndex = hotbarIndex; // Store hotbar index if (hotbarIndex === playerInventory.selectedSlot) { slotElement.classList.add('selected'); } } else { // Add index for inventory screen hotbar slots slotElement.dataset.index = i; } container.appendChild(slotElement); } }); } // Helper to create a slot element function createSlotElement(item, index, type) { const slot = document.createElement('div'); slot.classList.add('slot'); slot.dataset.index = index; // Store the inventory index slot.dataset.slotType = type; // 'inventory', 'hotbar', 'craft-input', 'craft-output' if (item) { const itemDef = itemTypes[item.typeId]; if (itemDef) { // Basic visual representation using background color slot.style.backgroundColor = `#${(itemDef.color || 0xcccccc).toString(16).padStart(6, '0')}`; // TODO: Replace with background image icons later // Tooltip const tooltip = document.createElement('span'); tooltip.classList.add('item-name-tooltip'); tooltip.textContent = itemDef.name; slot.appendChild(tooltip); // Count if (item.count > 1) { const countSpan = document.createElement('span'); countSpan.classList.add('item-count'); countSpan.textContent = item.count; slot.appendChild(countSpan); } } } // Add drag-and-drop event listeners (implement actual logic in ui.js) slot.setAttribute('draggable', true); slot.addEventListener('dragstart', window.handleDragStart); slot.addEventListener('dragover', window.handleDragOver); slot.addEventListener('drop', window.handleDrop); slot.addEventListener('dragend', window.handleDragEnd); // Add click listener for output slot if (type === 'craft-output') { slot.addEventListener('click', window.handleCraftOutputClick); } return slot; } // Expose createSlotElement globally for ui.js crafting grid updates window.createSlotElement = createSlotElement; import { itemTypes, recipes, playerInventory, craftingGrid, addItemToInventory, updateInventoryUI } from './inventory.js'; // Checks if the current grid matches any known recipe // gridType: 'inventory' (2x2) or 'table' (3x3) export function checkRecipe(gridType) { const gridState = craftingGrid[gridType]; const gridSize = gridType === 'inventory' ? 2 : 3; for (const outputId in recipes) { const recipe = recipes[outputId]; const recipeGridSize = recipe.grid; // Skip if recipe grid size doesn't match current grid type if ((gridSize === 2 && recipeGridSize > 2) || (gridSize === 3 && recipeGridSize < 3)) { continue; } // --- Shaped Recipe Check --- // Check if grid matches the recipe pattern let match = true; let recipeHeight = recipe.pattern.length; let recipeWidth = recipe.pattern[0].length; // Assume rectangular // Find the top-left corner of the items in the actual grid let gridTop = -1, gridLeft = -1; for (let r = 0; r < gridSize; r++) { for (let c = 0; c < gridSize; c++) { if (gridState[r * gridSize + c]) { if (gridTop === -1) gridTop = r; if (gridLeft === -1 || c < gridLeft) gridLeft = c; } } } // If grid is empty, no match if (gridTop === -1) { match = false; } else { // Compare recipe pattern starting from gridTop, gridLeft for (let r = 0; r < recipeHeight; r++) { for (let c = 0; c < recipeWidth; c++) { const recipeChar = recipe.pattern[r][c]; const expectedItemId = recipeChar === ' ' ? null : recipe.ingredients[recipeChar]; const actualItem = gridState[(gridTop + r) * gridSize + (gridLeft + c)]; const actualItemId = actualItem ? actualItem.typeId : null; if (actualItemId !== expectedItemId) { match = false; break; } } if (!match) break; } // Check if there are any extra items outside the recipe pattern bounds if (match) { for (let r = 0; r < gridSize; r++) { for (let c = 0; c < gridSize; c++) { // Is this grid slot outside the recipe pattern relative to top-left? const isOutsidePattern = r < gridTop || r >= gridTop + recipeHeight || c < gridLeft || c >= gridLeft + recipeWidth; if (isOutsidePattern && gridState[r * gridSize + c]) { match = false; // Found an extra item break; } } if (!match) break; } } } // --- TODO: Shapeless Recipe Check --- // If shaped didn't match, could check shapeless here later if (match) { // Found a matching recipe const outputItemDef = itemTypes[outputId]; return { typeId: outputId, count: recipe.count || 1, name: outputItemDef ? outputItemDef.name : 'Unknown Item', color: outputItemDef ? outputItemDef.color : 0xffffff, }; } } return null; // No recipe matched } // Updates the output slot based on the current crafting grid state export function updateCraftingOutput(gridType) { const outputItem = checkRecipe(gridType); craftingGrid.output[gridType] = outputItem; // Store the potential output // Update the UI for the specific grid's output slot const screenId = gridType === 'inventory' ? 'inventory-screen' : 'crafting-table-screen'; const outputSlotElement = document.querySelector(`#${screenId} .craft-output-slot`); if (outputSlotElement) { // Clear previous content outputSlotElement.innerHTML = ''; outputSlotElement.style.backgroundColor = 'rgba(0, 0, 0, 0.6)'; // Reset background if (outputItem) { const itemDef = itemTypes[outputItem.typeId]; // Get full def for color/icon later if(itemDef) { outputSlotElement.style.backgroundColor = `#${(itemDef.color || 0xcccccc).toString(16).padStart(6, '0')}`; } // Tooltip const tooltip = document.createElement('span'); tooltip.classList.add('item-name-tooltip'); tooltip.textContent = outputItem.name; outputSlotElement.appendChild(tooltip); // Count if (outputItem.count > 1) { const countSpan = document.createElement('span'); countSpan.classList.add('item-count'); countSpan.textContent = outputItem.count; outputSlotElement.appendChild(countSpan); } // Store output data on the element for click handling outputSlotElement.dataset.outputItem = JSON.stringify(outputItem); outputSlotElement.dataset.gridType = gridType; } else { // Clear output data if no recipe matches delete outputSlotElement.dataset.outputItem; delete outputSlotElement.dataset.gridType; } } } // Called when the player clicks the output slot export function handleCraft(gridType, shiftHeld = false) { const outputItem = craftingGrid.output[gridType]; if (!outputItem) return; // No recipe match const gridState = craftingGrid[gridType]; const gridSize = gridType === 'inventory' ? 4 : 9; // Check if inventory has space for the output (simplified check) // A real check would need to simulate adding the item properly let canCraft = true; // Assume true for now // TODO: Implement proper inventory space check, considering shift-click max crafting let craftCount = 0; const maxCraft = shiftHeld ? 64 : 1; // Arbitrary max for shift-click for now while(craftCount < maxCraft) { // Re-check recipe before each craft in a shift-click loop const currentOutput = checkRecipe(gridType); if (!currentOutput || currentOutput.typeId !== outputItem.typeId) { break; // Ingredients ran out or changed } // Simulate adding to inventory to check space (very basic) // This needs a more robust check like addItemToInventory provides let hasSpace = false; for(let i = 0; i < playerInventory.slots.length; i++) { const slot = playerInventory.slots[i]; if (!slot) { hasSpace = true; break; } // Empty slot if (slot.typeId === outputItem.typeId && itemTypes[outputItem.typeId]?.stackable && slot.count < 64) { hasSpace = true; break; // Stackable slot } } if (!hasSpace) { console.log("Inventory full!"); break; // Stop crafting if no space } // Consume ingredients (decrement count by 1 for each slot) for (let i = 0; i < gridSize; i++) { if (gridState[i]) { gridState[i].count--; if (gridState[i].count <= 0) { gridState[i] = null; // Clear slot if empty } } } // Add output to inventory addItemToInventory(outputItem.typeId, outputItem.count); craftCount++; // If not shift-clicking, break after one craft if (!shiftHeld) break; } // Update UI after crafting updateInventoryUI(); // Update inventory display updateCraftingGridUI(gridType); // Update the crafting grid slots updateCraftingOutput(gridType); // Check for next possible craft } // Clears the crafting grid and optionally returns items to inventory export function clearCraftingGrid(gridType, returnToInventory = false) { const gridState = craftingGrid[gridType]; const gridSize = gridType === 'inventory' ? 4 : 9; for (let i = 0; i < gridSize; i++) { if (gridState[i]) { if (returnToInventory) { addItemToInventory(gridState[i].typeId, gridState[i].count); } gridState[i] = null; // Clear the slot in the state } } // Update the UI updateCraftingGridUI(gridType); updateCraftingOutput(gridType); } // Updates the UI elements for the crafting grid slots themselves function updateCraftingGridUI(gridType) { const screenId = gridType === 'inventory' ? 'inventory-screen' : 'crafting-table-screen'; const gridContainer = document.querySelector(`#${screenId} .crafting-grid`); if (!gridContainer) return; const gridState = craftingGrid[gridType]; const gridSize = gridType === 'inventory' ? 4 : 9; // Get existing slot elements const slotElements = gridContainer.querySelectorAll('.slot.craft-slot'); for (let i = 0; i < gridSize; i++) { const item = gridState[i]; const slotElement = slotElements[i]; // Assume elements are in order if (!slotElement) continue; // Should not happen if UI is correct // Clear previous content slotElement.innerHTML = ''; slotElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // Reset background delete slotElement.dataset.item; // Clear item data if any if (item) { const itemDef = itemTypes[item.typeId]; if (itemDef) { slotElement.style.backgroundColor = `#${(itemDef.color || 0xcccccc).toString(16).padStart(6, '0')}`; slotElement.dataset.item = JSON.stringify(item); // Store item data // Tooltip const tooltip = document.createElement('span'); tooltip.classList.add('item-name-tooltip'); tooltip.textContent = itemDef.name; slotElement.appendChild(tooltip); // Count if (item.count > 1) { const countSpan = document.createElement('span'); countSpan.classList.add('item-count'); countSpan.textContent = item.count; slotElement.appendChild(countSpan); } } } } } // Expose functions needed by UI interactions window.handleCraft = handleCraft; import { playerInventory, craftingGrid, playerKnownRecipes, recipes, itemTypes, updateInventoryUI } from './inventory.js'; import { updateCraftingOutput } from './crafting.js'; // --- State for Drag and Drop --- let draggedItem = null; // { item: { typeId, count }, originalIndex: number, sourceType: 'inventory' | 'hotbar' | 'craft-input' } let dragSourceElement = null; // --- Recipe Book --- const recipeBookScreen = document.getElementById('recipe-book-screen'); const recipeListContainer = document.getElementById('recipe-list'); export function toggleRecipeBook() { // Use global functions from script.js to access/modify state and controls const isOpen = window.getIsRecipeBookOpen(); const isInvOpen = window.getIsInventoryOpen(); const isTableOpen = window.getIsCraftingTableOpen(); if (isInvOpen || isTableOpen) return; // Don't open if other modals are open window.setIsRecipeBookOpen(!isOpen); recipeBookScreen.style.display = !isOpen ? 'flex' : 'none'; if (!isOpen) { window.unlockControls(); updateRecipeBookUI(); // Refresh content when opening } else { window.lockControls(); } } export function closeRecipeBook() { if (!window.getIsRecipeBookOpen()) return; window.setIsRecipeBookOpen(false); recipeBookScreen.style.display = 'none'; // Don't automatically lock controls, let the calling function decide } export function updateRecipeBookUI() { if (!recipeListContainer) return; recipeListContainer.innerHTML = ''; // Clear previous list // Sort known recipes alphabetically by name for better readability const sortedRecipeIds = Array.from(playerKnownRecipes).sort((a, b) => { const nameA = itemTypes[a]?.name || a; const nameB = itemTypes[b]?.name || b; return nameA.localeCompare(nameB); }); sortedRecipeIds.forEach(outputId => { const recipe = recipes[outputId]; const outputItemDef = itemTypes[outputId]; if (!recipe || !outputItemDef) return; // Skip if recipe/item missing const entry = document.createElement('div'); entry.classList.add('recipe-entry'); entry.dataset.recipeId = outputId; // Store recipe ID for click handling // Output Icon (using color for now) const icon = document.createElement('div'); icon.classList.add('recipe-output-icon'); icon.style.backgroundColor = `#${(outputItemDef.color || 0xcccccc).toString(16).padStart(6, '0')}`; // TODO: Use background image later entry.appendChild(icon); // Recipe Name const name = document.createElement('span'); name.classList.add('recipe-name'); name.textContent = outputItemDef.name + (recipe.count > 1 ? ` (x${recipe.count})` : ''); entry.appendChild(name); // TODO: Add click listener to show recipe in crafting grid (visual only for now) entry.addEventListener('click', () => showRecipeInGrid(outputId)); recipeListContainer.appendChild(entry); }); } // --- Drag and Drop Handlers --- function handleDragStart(event) { const target = event.target.closest('.slot'); if (!target) return; const index = parseInt(target.dataset.index); const sourceType = target.dataset.slotType; // 'inventory', 'hotbar', 'craft-input' let item = null; if (sourceType === 'inventory' || sourceType === 'hotbar') { item = playerInventory.slots[index]; } else if (sourceType === 'craft-input') { const gridType = target.closest('#inventory-screen') ? 'inventory' : 'table'; item = craftingGrid[gridType][index]; } if (item) { draggedItem = { item: { ...item }, originalIndex: index, sourceType: sourceType }; // Clone item dragSourceElement = target; event.dataTransfer.effectAllowed = 'move'; // Optional: Set drag image (can be complex) // event.dataTransfer.setData('text/plain', JSON.stringify(draggedItem)); // Can be useful target.style.opacity = '0.5'; // Visual feedback } else { event.preventDefault(); // Don't drag empty slots } } function handleDragOver(event) { event.preventDefault(); // Necessary to allow dropping event.dataTransfer.dropEffect = 'move'; const target = event.target.closest('.slot'); if (target) { // Optional: Add visual cue on hover (e.g., border highlight) } } function handleDrop(event) { event.preventDefault(); const target = event.target.closest('.slot'); if (!target || !draggedItem) return; // No drop target or nothing being dragged const targetIndex = parseInt(target.dataset.index); const targetType = target.dataset.slotType; // --- Logic for moving items --- // Get references to the source and target states let sourceState, targetState; let sourceGridType = null, targetGridType = null; if (draggedItem.sourceType === 'inventory' || draggedItem.sourceType === 'hotbar') { sourceState = playerInventory.slots; } else if (draggedItem.sourceType === 'craft-input') { sourceGridType = dragSourceElement.closest('#inventory-screen') ? 'inventory' : 'table'; sourceState = craftingGrid[sourceGridType]; } if (targetType === 'inventory' || targetType === 'hotbar') { targetState = playerInventory.slots; } else if (targetType === 'craft-input') { targetGridType = target.closest('#inventory-screen') ? 'inventory' : 'table'; targetState = craftingGrid[targetGridType]; } else { console.warn("Invalid drop target type:", targetType); resetDragState(); return; } // --- Perform the swap/move --- const sourceItem = draggedItem.item; // The item being dragged const targetItem = targetState[targetIndex] ? { ...targetState[targetIndex] } : null; // Item currently in target slot (clone) // Simple swap logic (can be improved for stacking, splitting later) // TODO: Implement stacking logic (if targetItem exists and is same type and stackable) // TODO: Implement split logic (e.g., right-click drag to drop one item) // Place dragged item in target slot targetState[targetIndex] = sourceItem; // Place target item (if any) in source slot sourceState[draggedItem.originalIndex] = targetItem; // --- Update UI and State --- resetDragState(); updateInventoryUI(); // Update main inventory/hotbar visuals // Update crafting grids if involved if (sourceGridType) { updateCraftingGridUI(sourceGridType); updateCraftingOutput(sourceGridType); } if (targetGridType) { updateCraftingGridUI(targetGridType); updateCraftingOutput(targetGridType); } // Also update inventory crafting output if inventory was the target/source if (targetType === 'inventory' || targetType === 'hotbar' || draggedItem.sourceType === 'inventory' || draggedItem.sourceType === 'hotbar') { if(window.getIsInventoryOpen()) updateCraftingOutput('inventory'); } } function handleDragEnd(event) { // If drag ended without a successful drop (e.g., outside a valid slot) // For now, just reset visual opacity. Item remains in original slot due to state management. resetDragState(); } function resetDragState() { if (dragSourceElement) { dragSourceElement.style.opacity = '1'; } draggedItem = null; dragSourceElement = null; } // --- Crafting Output Click --- function handleCraftOutputClick(event) { const target = event.target.closest('.slot'); if (!target || !target.dataset.outputItem) return; const gridType = target.dataset.gridType; // 'inventory' or 'table' const shiftHeld = event.shiftKey; window.handleCraft(gridType, shiftHeld); // Call the crafting logic from crafting.js } // --- Show Recipe in Grid (Visual Only) --- function showRecipeInGrid(recipeId) { console.log("Show recipe:", recipeId); // TODO: Implement visual feedback, maybe highlight ingredients in inventory // or temporarily display the pattern in the appropriate crafting grid UI. // This is primarily a UI/UX feature. } // --- Initial UI Setup --- function setupCraftingGrids() { // Inventory 2x2 const invGridContainer = document.querySelector('#inventory-screen .grid-2x2'); invGridContainer.innerHTML = ''; for (let i = 0; i < 4; i++) { const slot = document.createElement('div'); slot.classList.add('slot', 'craft-slot'); slot.dataset.index = i; slot.dataset.slotType = 'craft-input'; // Add drag/drop listeners slot.setAttribute('draggable', true); slot.addEventListener('dragstart', handleDragStart); slot.addEventListener('dragover', handleDragOver); slot.addEventListener('drop', handleDrop); slot.addEventListener('dragend', handleDragEnd); invGridContainer.appendChild(slot); } const invOutputSlot = document.querySelector('#inventory-screen .craft-output-slot'); invOutputSlot.dataset.slotType = 'craft-output'; invOutputSlot.addEventListener('click', handleCraftOutputClick); invOutputSlot.addEventListener('dragover', handleDragOver); // Allow dropping *on* output to trigger craft? Maybe not. // Crafting Table 3x3 const tableGridContainer = document.querySelector('#crafting-table-screen .grid-3x3'); tableGridContainer.innerHTML = ''; for (let i = 0; i < 9; i++) { const slot = document.createElement('div'); slot.classList.add('slot', 'craft-slot'); slot.dataset.index = i; slot.dataset.slotType = 'craft-input'; // Add drag/drop listeners slot.setAttribute('draggable', true); slot.addEventListener('dragstart', handleDragStart); slot.addEventListener('dragover', handleDragOver); slot.addEventListener('drop', handleDrop); slot.addEventListener('dragend', handleDragEnd); tableGridContainer.appendChild(slot); } const tableOutputSlot = document.querySelector('#crafting-table-screen .craft-output-slot'); tableOutputSlot.dataset.slotType = 'craft-output'; tableOutputSlot.addEventListener('click', handleCraftOutputClick); tableOutputSlot.addEventListener('dragover', handleDragOver); } // Updates the UI elements for a specific crafting grid function updateCraftingGridUI(gridType) { const screenId = gridType === 'inventory' ? 'inventory-screen' : 'crafting-table-screen'; const gridContainer = document.querySelector(`#${screenId} .crafting-grid`); if (!gridContainer) return; const gridState = craftingGrid[gridType]; const gridSize = gridType === 'inventory' ? 4 : 9; const slotElements = gridContainer.querySelectorAll('.slot.craft-slot'); for (let i = 0; i < gridSize; i++) { const item = gridState[i]; const slotElement = slotElements[i]; if (!slotElement) continue; // Use createSlotElement logic (slightly adapted) slotElement.innerHTML = ''; slotElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; delete slotElement.dataset.item; if (item) { const itemDef = itemTypes[item.typeId]; if (itemDef) { slotElement.style.backgroundColor = `#${(itemDef.color || 0xcccccc).toString(16).padStart(6, '0')}`; slotElement.dataset.item = JSON.stringify(item); const tooltip = document.createElement('span'); tooltip.classList.add('item-name-tooltip'); tooltip.textContent = itemDef.name; slotElement.appendChild(tooltip); if (item.count > 1) { const countSpan = document.createElement('span'); countSpan.classList.add('item-count'); countSpan.textContent = item.count; slotElement.appendChild(countSpan); } } } } } // Expose handlers globally for HTML event attributes and script.js calls window.handleDragStart = handleDragStart; window.handleDragOver = handleDragOver; window.handleDrop = handleDrop; window.handleDragEnd = handleDragEnd; window.handleCraftOutputClick = handleCraftOutputClick; window.updateRecipeBookUI = updateRecipeBookUI; window.toggleRecipeBook = toggleRecipeBook; window.closeRecipeBook = closeRecipeBook; // Initialize UI elements on load setupCraftingGrids(); updateInventoryUI(); // Initial render of inventory slots **Key Changes & Implementation Details:** 1. **File Structure:** Introduced `inventory.js`, `crafting.js`, and `ui.js` to better organize the code. `script.js` handles core game loop, physics, world interaction, and calls functions from the other modules. 2. **HTML Structure:** Added divs for the Inventory Screen (`#inventory-screen`), Crafting Table Screen (`#crafting-table-screen`), and Recipe Book Screen (`#recipe-book-screen`). These include areas for crafting grids, inventory display, and recipe lists. 3. **CSS Styling:** Added extensive CSS to style the new UI screens, slots, grids, and recipe book to make them functional and visually distinct. 4. **Item/Recipe Data (`inventory.js`):** * Expanded `itemTypes` with more items from the design. * Created a `recipes` object defining output, grid size, pattern, and ingredients. * Manages `playerInventory` state (36 slots) and `craftingGrid` state (for both 2x2 and 3x3). * Manages `playerKnownRecipes` (a `Set` of recipe output IDs). * `addItemToInventory` now triggers `unlockRecipesForItem`. * `unlockRecipesForItem` checks the `recipes` list and adds relevant recipes to `playerKnownRecipes`, then calls `updateRecipeBookUI`. * `updateInventoryUI` renders the player's inventory and hotbar in all relevant UI locations. 5. **Crafting Logic (`crafting.js`):** * `checkRecipe` compares the items in a given crafting grid state against the `recipes` data (currently only shaped recipes). * `updateCraftingOutput` calls `checkRecipe` and updates the UI for the corresponding output slot. * `handleCraft` is called when the output slot is clicked. It consumes ingredients from the crafting grid state, adds the output to the player's inventory (using `addItemToInventory`), and updates the UI. Includes basic shift-click support. * `clearCraftingGrid` removes items from the crafting state and optionally returns them to the inventory. 6. **UI Interaction (`ui.js`):** * Handles toggling the Inventory, Crafting Table, and Recipe Book UIs (`toggleInventory`, `openCraftingTable`, `closeCraftingTable`, `toggleRecipeBook`). Uses global functions exposed from `script.js` to manage controls lock/unlock and check UI states. * Implements Drag and Drop functionality (`handleDragStart`, `handleDragOver`, `handleDrop`, `handleDragEnd`) for moving items between inventory slots and crafting grids (basic swap logic, needs refinement for stacking/splitting). * `updateRecipeBookUI` dynamically generates the list of known recipes in the book UI. * `handleCraftOutputClick` links the output slot click to the `handleCraft` logic. * Initializes the crafting grid slot elements. 7. **Integration (`script.js`):** * Imports necessary functions from the new modules. * Adds keybinds 'E' and 'R' for Inventory and Recipe Book. Escape key now closes open UI screens. * Prevents game movement/interaction when UI screens are open. * Modifies `onMouseDown` (Right Click) to check if the target block is a `crafting_table` and open the UI instead of placing a block. * Item pickup logic now relies on `addItemToInventory` which handles recipe unlocking internally. * Adds `Crafting Table` and `Book` items/recipes. This is a complex update! Test carefully, especially the drag-and-drop and crafting logic. The Furnace and more advanced features are deferred for now.

Game Over

Inventory

Crafting

Crafting Table

Crafting

Guide to the Wilds