Spaces:

aappeell
/

blocky-builder-deluxe

Running

App Files Files Community

aappeell commited on Nov 27, 2025

Commit

26272c4

verified ·

1 Parent(s): b93eb69

Dont have the table at the top right display if you are close to a bench, or if you have the lantern on. Also make the lantern not so bright where I turn into the holy spirit. The dropping function doesnt work (it might but I just instant pick it back up) and onluy show the accessible crafting and dont put (need bench) just only show it when a bench is near (within 3 blocks on the x cordinate)

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +1457 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Blocky Builder Deluxe
-emoji: ⚡
-colorFrom: purple
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Blocky Builder Deluxe 🧱
+colorFrom: pink
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,1457 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Advanced 2D Sandbox Game (v7)</title>
+    <!-- Load Tailwind CSS for styling -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* Use Inter font */
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #3b82f6; /* Sky Blue - Will be darkened by JS overlay */
+            color: white;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 10vh;
+        }
+        canvas {
+            display: block;
+            background: transparent;
+            cursor: crosshair;
+        }
+        /* UI container styles */
+        #ui-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none; /* Allows mouse to pass through */
+        }
+        #hotbar, #instructions, #coordinates, #crafting-menu {
+            pointer-events: auto; /* Re-enable pointer events for UI elements */
+        }
+        /* Hotbar styles */
+        #hotbar {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 8px;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 8px;
+            border-radius: 12px;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+            transition: all 0.1s ease;
+        }
+        .hotbar-slot {
+            width: 50px;
+            height: 50px;
+            border: 2px solid #888;
+            border-radius: 8px;
+            background-size: cover;
+            background-position: center;
+            display: flex;
+            align-items: flex-end;
+            justify-content: flex-end;
+            font-weight: bold;
+            font-size: 14px;
+            text-shadow: 1px 1px 2px #000;
+            position: relative;
+            cursor: pointer;
+            box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
+        }
+        .hotbar-slot.active {
+            border-color: #fde047; /* Yellow */
+            transform: scale(1.1);
+            box-shadow: 0 0 15px #fde047;
+        }
+        .hotbar-slot .count {
+            position: absolute;
+            bottom: 2px;
+            right: 4px;
+            font-size: 16px;
+        }
+        .hotbar-slot .item-name {
+            position: absolute;
+            top: 2px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 10px;
+            white-space: nowrap;
+            color: #ccc;
+        }
+        /* Crafting panel styles */
+        #crafting-menu {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 400px;
+            max-height: 80vh;
+            background-color: #2c3e50;
+            border: 4px solid #fde047;
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            display: none; /* Hidden by default */
+            overflow-y: auto;
+            pointer-events: auto;
+        }
+        .recipe-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: #34495e;
+            padding: 10px;
+            margin-bottom: 8px;
+            border-radius: 8px;
+            transition: background-color 0.2s;
+            cursor: pointer;
+            border: 1px solid #4a637c;
+        }
+        .recipe-item:hover:not(.disabled) {
+            background-color: #4a637c;
+        }
+        .recipe-item.disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            background-color: #1e2a38;
+        }
+        .recipe-info {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+        }
+        .recipe-name {
+            font-size: 1.1rem;
+            font-weight: bold;
+            color: #ecf0f1;
+        }
+        .recipe-materials {
+            font-size: 0.8rem;
+            color: #bdc3c7;
+        }
+        .craft-button {
+            background-color: #2ecc71;
+            color: white;
+            padding: 8px 15px;
+            border-radius: 6px;
+            font-weight: bold;
+            transition: background-color 0.2s;
+        }
+        .recipe-item.disabled .craft-button {
+            background-color: #e74c3c;
+        }
+    </style>
+</head>
+<body>
+    <!-- Canvas for the game world -->
+    <canvas id="gameCanvas"></canvas>
+    <!-- UI Overlay Container -->
+    <div id="ui-overlay">
+        <!-- UI: Hotbar for selecting items -->
+        <div id="hotbar">
+            <!-- Slots will be generated by JS -->
+        </div>
+        <!-- UI: Instructions -->
+        <div id="instructions" class="fixed top-4 left-4 p-3 bg-gray-800 bg-opacity-70 rounded-lg text-sm text-gray-200">
+            <strong>Controls:</strong> [A][D] Move | [Space] Jump | [1-7] Select | [Mouse Wheel] Scroll | **[E]** Crafting Menu | **[F]** Loot Chest | **[G]** Drop Item
+        </div>
+        <!-- UI: Crafting Menu -->
+        <div id="crafting-menu">
+            <h2 class="text-xl font-bold mb-4 text-center">Crafting Bench</h2>
+            <div id="recipe-list">
+                <!-- Recipes will be generated by JS -->
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        // --- Perlin Noise Helper Functions ---
+        const PERLIN_SIZE = 256;
+        const PERLIN_WRAP = PERLIN_SIZE - 1;
+        const p = new Array(PERLIN_SIZE);
+        for(let i = 0; i < PERLIN_SIZE; i++) p[i] = Math.floor(Math.random() * 256);
+        function fade(t) { return t * t * t * (t * (t * 6 - 15) + 10); }
+        function lerp(t, a, b) { return a + t * (b - a); }
+        function grad(hash, x, y) {
+            const h = hash & 15;
+            const u = h < 8 ? x : y;
+            const v = h < 4 ? y : h === 12 || h === 14 ? x : 0;
+            return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+        }
+        function noise2D(x, y) {
+            let X = Math.floor(x) & PERLIN_WRAP;
+            let Y = Math.floor(y) & PERLIN_WRAP;
+            x -= Math.floor(x);
+            y -= Math.floor(y);
+            let u = fade(x);
+            let v = fade(y);
+            let A = (p[X] + Y) & PERLIN_WRAP;
+            let B = (p[X + 1] + Y) & PERLIN_WRAP;
+            let h_A = p[A];
+            let h_B = p[B];
+            let h_A1 = p[A + 1];
+            let h_B1 = p[B + 1];
+            return lerp(v,
+                lerp(u, grad(h_A, x, y), grad(h_B, x - 1, y)),
+                lerp(u, grad(h_A1, x, y - 1), grad(h_B1, x - 1, y - 1))
+            );
+        }
+        // --- Game Setup ---
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const hotbarContainer = document.getElementById('hotbar');
+        const craftingMenu = document.getElementById('crafting-menu');
+        const recipeList = document.getElementById('recipe-list');
+        // --- Constants ---
+        const TILE_SIZE = 32;
+        const WORLD_WIDTH = 300; // In tiles
+        const WORLD_HEIGHT = 300; // Increased depth!
+        const GRAVITY = 0.5;
+        const PLAYER_SPEED = 5;
+        const JUMP_FORCE = 12;
+        const REACH = 5 * TILE_SIZE; // How many tiles away the player can build/mine
+        const E = 0.01; // Epsilon for collision buffer to prevent sticking
+        const NOISE_SCALE = 0.02;
+        const CAVE_THRESHOLD = 0.1;
+        const SURFACE_Y = 60; // Y coordinate (in tiles) where the surface generally starts
+        // --- Asset Definitions (Tiles and Items) ---
+        const ASSETS = {
+            // Tiles (Placeable Blocks, ID < 100)
+            AIR: 0,
+            GRASS: 1,
+            DIRT: 2,
+            STONE: 3,
+            WOOD: 4,
+            LEAVES: 5,
+            COPPER_ORE: 6,
+            IRON_ORE: 7,
+            GOLD_ORE: 8,
+            DIAMOND_ORE: 9,
+            PLATFORM_WOOD: 10,
+            CHEST: 11,
+            CRAFTING_TABLE: 12, // New Block
+            // Items (Non-placeable, ID >= 100)
+            PICKAXE_WOOD: 100,
+            LANTERN: 101, // New Crafted Light Source
+        };
+        const ASSET_INFO = {
+            [ASSETS.AIR]: { name: 'Air', color: 'rgba(0,0,0,0)', hp: 0, stackable: false, placeable: false },
+            [ASSETS.GRASS]: { name: 'Grass', color: '#6a994e', hp: 20, stackable: true, placeable: true },
+            [ASSETS.DIRT]: { name: 'Dirt', color: '#785532', hp: 20, stackable: true, placeable: true },
+            [ASSETS.STONE]: { name: 'Stone', color: '#8a8d91', hp: 50, stackable: true, placeable: true },
+            [ASSETS.WOOD]: { name: 'Wood', color: '#6f4518', hp: 40, stackable: true, placeable: true },
+            [ASSETS.LEAVES]: { name: 'Leaves', color: '#386641', hp: 10, stackable: true, placeable: true },
+            [ASSETS.COPPER_ORE]: { name: 'Copper Ore', color: '#b87333', hp: 80, stackable: true, placeable: true, highContrast: true },
+            [ASSETS.IRON_ORE]: { name: 'Iron Ore', color: '#a8a8a0', hp: 120, stackable: true, placeable: true, highContrast: true },
+            [ASSETS.GOLD_ORE]: { name: 'Gold Ore', color: '#ffd700', hp: 150, stackable: true, placeable: true, highContrast: true },
+            [ASSETS.DIAMOND_ORE]: { name: 'Diamond Ore', color: '#b9f2ff', hp: 250, stackable: true, placeable: true, highContrast: true },
+            [ASSETS.PLATFORM_WOOD]: { name: 'Wood Platform', color: '#a07850', hp: 5, stackable: true, placeable: true, isPlatform: true },
+            [ASSETS.CHEST]: { name: 'Chest', color: '#964b00', hp: 1000, stackable: false, placeable: false, highContrast: true },
+            [ASSETS.CRAFTING_TABLE]: { name: 'Crafting Table', color: '#964b00', hp: 100, stackable: true, placeable: true },
+            // Items
+            [ASSETS.PICKAXE_WOOD]: { name: 'W. Pickaxe', color: '#b69255', hp: 0, stackable: false, placeable: false },
+            [ASSETS.LANTERN]: { name: 'Lantern', color: '#fde047', hp: 0, stackable: false, placeable: false },
+        };
+        const RECIPES = [
+            {
+                name: "Crafting Table (Basic)",
+                result: { type: ASSETS.CRAFTING_TABLE, count: 1 },
+                materials: { [ASSETS.WOOD]: 4 },
+                requiresBench: false // FIX: Can be crafted anywhere
+            },
+            {
+                name: "Wooden Pickaxe",
+                result: { type: ASSETS.PICKAXE_WOOD, count: 1 },
+                materials: { [ASSETS.WOOD]: 10, [ASSETS.DIRT]: 5 },
+                requiresBench: true
+            },
+            {
+                name: "Wood Platform (x10)",
+                result: { type: ASSETS.PLATFORM_WOOD, count: 10 },
+                materials: { [ASSETS.WOOD]: 1 },
+                requiresBench: true
+            },
+            {
+                name: "Lantern",
+                result: { type: ASSETS.LANTERN, count: 1 },
+                materials: { [ASSETS.IRON_ORE]: 1, [ASSETS.WOOD]: 4 },
+                requiresBench: true
+            },
+            {
+                name: "Dirt Block",
+                result: { type: ASSETS.DIRT, count: 1 },
+                materials: { [ASSETS.GRASS]: 1 },
+                requiresBench: false
+            }
+        ];
+        // --- Game State ---
+        let world = [];
+        let worldChests = {};
+        let droppedItems = [];
+        let gameTime = 0;
+        let isCraftingOpen = false;
+        let lastGPress = 0;
+        let hasPlacedWorkbench = false; // New state flag for placed bench
+        let player = {
+            x: (WORLD_WIDTH * TILE_SIZE) / 2,
+            y: SURFACE_Y * TILE_SIZE,
+            width: TILE_SIZE * 0.8,
+            height: TILE_SIZE * 1.8,
+            vx: 0,
+            vy: 0,
+            onGround: false,
+            animState: 'idle',
+            hp: 100,
+            maxHp: 100,
+            hasLantern: false,
+        };
+        let camera = { x: 0, y: 0 };
+        let keys = {};
+        let inventory = {
+            [ASSETS.PICKAXE_WOOD]: 1,
+        };
+        const hotbar = [ASSETS.PICKAXE_WOOD, ASSETS.WOOD, ASSETS.DIRT, ASSETS.STONE, ASSETS.CRAFTING_TABLE, ASSETS.PLATFORM_WOOD, ASSETS.LANTERN];
+        let activeSlot = 0;
+        let mouse = {
+            x: 0,
+            y: 0,
+            worldX: 0,
+            worldY: 0,
+            tileX: 0,
+            tileY: 0,
+            isDown: false,
+            breaking: null,
+        };
+        // --- Utility Functions ---
+        // FIX: updateMousePos defined here to resolve ReferenceError
+        function updateMousePos(e) {
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+            mouse.worldX = mouse.x + camera.x;
+            mouse.worldY = mouse.y + camera.y;
+            mouse.tileX = Math.floor(mouse.worldX / TILE_SIZE);
+            mouse.tileY = Math.floor(mouse.worldY / TILE_SIZE);
+        }
+        function drawTile(x, y, type) {
+            const drawX = x * TILE_SIZE;
+            const drawY = y * TILE_SIZE;
+            const color = ASSET_INFO[type].color;
+            // Base fill
+            ctx.fillStyle = color;
+            ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+            // Apply texture patterns
+            switch (type) {
+                case ASSETS.GRASS:
+                    // Grass top and shade
+                    ctx.fillStyle = '#4c7b39';
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, 5);
+                    ctx.fillStyle = '#3f6631';
+                    for (let i = 0; i < TILE_SIZE; i += 4) {
+                        ctx.fillRect(drawX + i, drawY, 2, 8);
+                    }
+                    break;
+                case ASSETS.WOOD:
+                    // Wood grain
+                    ctx.fillStyle = '#83653b';
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+                    ctx.strokeStyle = '#5c4521';
+                    ctx.lineWidth = 1;
+                    for (let i = 0; i < TILE_SIZE; i += 8) {
+                        ctx.beginPath();
+                        ctx.moveTo(drawX, drawY + i);
+                        ctx.lineTo(drawX + TILE_SIZE, drawY + i);
+                        ctx.stroke();
+                    }
+                    break;
+                case ASSETS.STONE:
+                    // Stone speckles
+                    ctx.fillStyle = '#787a7d';
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+                    ctx.fillStyle = 'rgba(0,0,0,0.2)';
+                    for (let i = 0; i < 10; i++) {
+                        ctx.fillRect(drawX + Math.random() * TILE_SIZE, drawY + Math.random() * TILE_SIZE, 2, 2);
+                    }
+                    break;
+                case ASSETS.COPPER_ORE:
+                case ASSETS.IRON_ORE:
+                case ASSETS.GOLD_ORE:
+                case ASSETS.DIAMOND_ORE:
+                    // Ore glow/speckles over stone base
+                    ctx.fillStyle = ASSET_INFO[ASSETS.STONE].color;
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+                    ctx.fillStyle = color;
+                    for (let i = 0; i < 5; i++) {
+                        ctx.fillRect(drawX + TILE_SIZE/4 + Math.random() * TILE_SIZE/2, drawY + TILE_SIZE/4 + Math.random() * TILE_SIZE/2, 4, 4);
+                    }
+                    break;
+                case ASSETS.CHEST:
+                    // Chest texture
+                    ctx.fillStyle = '#964b00'; // Dark brown
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+                    ctx.fillStyle = '#ffd700'; // Gold latch
+                    ctx.fillRect(drawX + TILE_SIZE * 0.4, drawY + 2, TILE_SIZE * 0.2, TILE_SIZE * 0.1);
+                    ctx.fillRect(drawX + TILE_SIZE * 0.45, drawY + TILE_SIZE * 0.1, TILE_SIZE * 0.1, TILE_SIZE * 0.4);
+                    break;
+                case ASSETS.CRAFTING_TABLE:
+                    // Crafting table texture
+                    ctx.fillStyle = '#6f4518'; // Wood color
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+                    ctx.fillStyle = '#2c3e50'; // Top surface
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, 5);
+                    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'; // Detail
+                    ctx.fillRect(drawX + 5, drawY + 1, 2, 2);
+                    ctx.fillRect(drawX + TILE_SIZE - 7, drawY + 1, 2, 2);
+                    break;
+                case ASSETS.PLATFORM_WOOD:
+                    // Platform (Drawn thinner later)
+                    ctx.fillStyle = ASSET_INFO[type].color;
+                    break;
+                default:
+                    // Use fallback color
+                    ctx.fillStyle = color;
+                    ctx.fillRect(drawX, drawY, TILE_SIZE, TILE_SIZE);
+            }
+            // Draw Platforms thin
+            if (ASSET_INFO[type].isPlatform) {
+                ctx.fillStyle = ASSET_INFO[type].color;
+                ctx.fillRect(drawX, drawY + TILE_SIZE * 0.8, TILE_SIZE, TILE_SIZE * 0.2);
+            }
+        }
+        // --- Initialization ---
+        function generateWorld() {
+            console.log("Generating world...");
+            world = new Array(WORLD_WIDTH).fill(0).map(() => new Array(WORLD_HEIGHT).fill(ASSETS.AIR));
+            worldChests = {};
+            for (let x = 0; x < WORLD_WIDTH; x++) {
+                let heightNoise = (noise2D(x * NOISE_SCALE, 0) + 1) / 2;
+                let terrainHeight = Math.floor(SURFACE_Y + heightNoise * 30 - 15);
+                for (let y = 0; y < WORLD_HEIGHT; y++) {
+                    if (y > terrainHeight) {
+                        let caveNoise = Math.abs(noise2D(x * 0.08, y * 0.08));
+                        let deepCaveNoise = Math.abs(noise2D(x * 0.03, y * 0.03));
+                        if (caveNoise < CAVE_THRESHOLD * 1.2 && y > SURFACE_Y + 5 || deepCaveNoise < 0.03 && y > SURFACE_Y + 50) {
+                             world[x][y] = ASSETS.AIR; // Cave
+                             // Chest placement check: Must be on a solid block
+                             if (deepCaveNoise < 0.03 && Math.random() < 0.01 && y + 1 < WORLD_HEIGHT && world[x][y+1] !== ASSETS.AIR) {
+                                world[x][y] = ASSETS.CHEST;
+                                worldChests[`${x},${y}`] = generateLoot();
+                             }
+                        } else if (y === terrainHeight + 1) {
+                            world[x][y] = ASSETS.GRASS;
+                        } else if (y < terrainHeight + 8) {
+                            world[x][y] = ASSETS.DIRT;
+                        } else {
+                            if (y < SURFACE_Y + 30) {
+                                world[x][y] = Math.random() < 0.03 ? ASSETS.COPPER_ORE : ASSETS.STONE;
+                            } else if (y < SURFACE_Y + 80) {
+                                world[x][y] = Math.random() < 0.02 ? ASSETS.IRON_ORE : ASSETS.STONE;
+                            } else if (y < SURFACE_Y + 150) {
+                                world[x][y] = Math.random() < 0.01 ? ASSETS.GOLD_ORE : ASSETS.STONE;
+                            } else {
+                                world[x][y] = Math.random() < 0.005 ? ASSETS.DIAMOND_ORE : ASSETS.STONE;
+                            }
+                        }
+                    }
+                }
+                // Tree Generation
+                if (Math.random() < 0.05 && x > 10 && x < WORLD_WIDTH - 10 && world[x][terrainHeight + 1] === ASSETS.GRASS) {
+                    let treeHeight = 5 + Math.floor(Math.random() * 5);
+                    let treeTopY = terrainHeight - treeHeight;
+                    for (let y = terrainHeight; y >= treeTopY; y--) {
+                        if (world[x] && world[x][y] !== undefined) {
+                            world[x][y] = ASSETS.WOOD;
+                        }
+                    }
+                    for (let lx = -2; lx <= 2; lx++) {
+                        for (let ly = -2; ly <= 0; ly++) {
+                            if (Math.random() < 0.8) {
+                                let leafX = x + lx;
+                                let leafY = treeTopY + ly;
+                                if (world[leafX] && world[leafX][leafY] === ASSETS.AIR) {
+                                    world[leafX][leafY] = ASSETS.LEAVES;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            console.log("World generated.");
+            player.y = (SURFACE_Y - 5) * TILE_SIZE;
+        }
+        function generateLoot() {
+            const possibleLoot = [
+                [ASSETS.WOOD, 10 + Math.floor(Math.random() * 20)],
+                [ASSETS.IRON_ORE, 3 + Math.floor(Math.random() * 7)],
+                [ASSETS.GOLD_ORE, 1 + Math.floor(Math.random() * 5)],
+                [ASSETS.DIAMOND_ORE, Math.random() < 0.2 ? 1 : 0],
+                [ASSETS.LANTERN, 1]
+            ];
+            const loot = [];
+            for(let i = 0; i < 3; i++) {
+                if(Math.random() < 0.6) {
+                    loot.push(possibleLoot[Math.floor(Math.random() * possibleLoot.length)]);
+                }
+            }
+            return loot.filter(item => item[1] > 0);
+        }
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        // --- Game Loop ---
+        function update() {
+            if (isCraftingOpen) return;
+            player.hasLantern = (inventory[ASSETS.LANTERN] || 0) > 0;
+            hasPlacedWorkbench = getNearestCraftingTable(); // Update workbench status
+            handleInput();
+            handleMining();
+            applyPhysics(player);
+            updateDroppedItems();
+            updateCamera();
+        }
+        function draw() {
+            // Clear canvas (the sky is the body background)
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.save();
+            ctx.translate(-Math.floor(camera.x), -Math.floor(camera.y));
+            // --- Draw World (Base Tiles) ---
+            let startX = Math.floor(camera.x / TILE_SIZE);
+            let endX = Math.min(WORLD_WIDTH, startX + Math.ceil(canvas.width / TILE_SIZE) + 1);
+            let startY = Math.floor(camera.y / TILE_SIZE);
+            let endY = Math.min(WORLD_HEIGHT, startY + Math.ceil(canvas.height / TILE_SIZE) + 1);
+            for (let x = startX; x < endX; x++) {
+                for (let y = startY; y < endY; y++) {
+                    let tileType = world[x][y];
+                    if (tileType !== ASSETS.AIR) {
+                        drawTile(x, y, tileType);
+                    }
+                }
+            }
+            // --- Draw Block Breaking Animation ---
+            drawBreakingDamage();
+            // --- Draw Dropped Items ---
+            drawDroppedItems();
+            // --- Draw Player ---
+            drawPlayer(player);
+            // --- Draw Mouse Selector ---
+            let dist = Math.hypot(mouse.worldX - (player.x + player.width / 2), mouse.worldY - (player.y + player.height / 2));
+            if (dist <= REACH) {
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(mouse.tileX * TILE_SIZE, mouse.tileY * TILE_SIZE, TILE_SIZE, TILE_SIZE);
+            }
+            ctx.restore();
+            // --- Lighting Overlay (FIX for bright sky & grainy textures) ---
+            const playerCenterWorldY = player.y + player.height / 2;
+            const depthInTiles = playerCenterWorldY / TILE_SIZE;
+            // Calculate ambient darkness (Max 70% dark at 50 tiles below surface)
+            const maxDarknessDepth = SURFACE_Y + 50;
+            let ambientDarkness = Math.min(1, Math.max(0, (depthInTiles - SURFACE_Y) / (maxDarknessDepth - SURFACE_Y))) * 0.7;
+            // 1. Apply Global Ambient Darkness (Darkens the entire canvas, including the sky area)
+            if (ambientDarkness > 0.05) {
+                ctx.fillStyle = `rgba(0, 0, 0, ${ambientDarkness})`;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            // 2. Apply Local Lighting Brightness (Cut out a light circle)
+            const LIGHT_RADIUS = player.hasLantern ? 250 : 0;
+            if (LIGHT_RADIUS > 0) {
+                 const playerCenterScreenX = canvas.width / 2;
+                 const playerCenterScreenY = canvas.height / 2;
+                 // Create a soft light gradient effect
+            const gradient = ctx.createRadialGradient(
+                    playerCenterScreenX, playerCenterScreenY, 0,
+                    playerCenterScreenX, playerCenterScreenY, LIGHT_RADIUS
+                 );
+                 // More subtle lighting
+                 gradient.addColorStop(0, 'rgba(255, 255, 200, 0.8)');
+                 gradient.addColorStop(0.5, 'rgba(255, 255, 200, 0.4)');
+                 gradient.addColorStop(1, 'rgba(255, 255, 200, 0)');
+ctx.fillStyle = gradient;
+                 ctx.globalCompositeOperation = 'lighter'; // Use 'lighter' to brighten the area
+                 ctx.beginPath();
+                 ctx.arc(playerCenterScreenX, playerCenterScreenY, LIGHT_RADIUS, 0, Math.PI * 2);
+                 ctx.fill();
+                 ctx.globalCompositeOperation = 'source-over'; // Reset
+            }
+            // --- Draw UI ---
+            drawHotbar();
+            drawHealthBar();
+            drawCoordinates();
+            drawAlert();
+        }
+        function drawHealthBar() {
+            const barWidth = 200;
+            const barHeight = 20;
+            const x = canvas.width - barWidth - 20;
+            const y = 20;
+            ctx.fillStyle = '#2c3e50';
+            ctx.fillRect(x, y, barWidth, barHeight);
+            const healthPercent = player.hp / player.maxHp;
+            ctx.fillStyle = '#e74c3c';
+            ctx.fillRect(x, y, barWidth * healthPercent, barHeight);
+            ctx.strokeStyle = 'white';
+            ctx.lineWidth = 2;
+            ctx.strokeRect(x, y, barWidth, barHeight);
+            ctx.fillStyle = 'white';
+            ctx.font = '14px Inter';
+            ctx.textAlign = 'center';
+            ctx.fillText(`HP: ${player.hp}/${player.maxHp}`, x + barWidth / 2, y + barHeight - 5);
+        }
+        function drawCoordinates() {
+            const x = canvas.width - 20;
+            const y = 50;
+            const tileX = Math.floor(player.x / TILE_SIZE);
+            const tileY = Math.floor(player.y / TILE_SIZE);
+            const depthLevel = Math.max(0, tileY - SURFACE_Y);
+            const depthColor = depthLevel > 10 ? '#fde047' : 'white';
+            ctx.fillStyle = depthColor;
+            ctx.font = '16px Inter';
+            ctx.textAlign = 'right';
+            ctx.fillText(`X: ${tileX}`, x, y + 20);
+            ctx.fillText(`Depth: ${depthLevel}`, x, y + 40);
+            // Don't show lantern/bench status anymore
+}
+        function drawPlayer(p) {
+            let yOffset = 0;
+            let pHeight = p.height;
+            let pWidth = p.width;
+            if (p.animState === 'walking') {
+                yOffset = Math.sin(gameTime * 0.3) * 2;
+            } else if (p.animState === 'jumping') {
+                if (p.vy > 1) { pHeight = p.height * 0.95; pWidth = p.width * 1.05; }
+                else if (p.vy < -1) { pHeight = p.height * 1.05; pWidth = p.width * 0.95; }
+            }
+            const headSize = TILE_SIZE * 0.8;
+            const headX = p.x + (p.width - headSize) / 2;
+            const headY = p.y + yOffset;
+            const bodyY = headY + headSize;
+            const bodyHeight = pHeight - headSize;
+            ctx.fillStyle = '#8b5e3c';
+            ctx.fillRect(p.x + (p.width - pWidth) / 2, bodyY, pWidth, bodyHeight);
+            ctx.fillStyle = '#f3bf9e';
+            ctx.fillRect(headX, headY, headSize, headSize);
+            const headCenterXScreen = p.x + p.width / 2 - camera.x;
+            const headCenterYScreen = headY + headSize / 2 - camera.y;
+            const dx = mouse.x - headCenterXScreen;
+            const dy = mouse.y - headCenterYScreen;
+            const angle = Math.atan2(dy, dx);
+            const eyeMovementRadius = 3;
+            const pupilOffsetX = Math.cos(angle) * eyeMovementRadius;
+            const pupilOffsetY = Math.sin(angle) * eyeMovementRadius;
+            const eyeWidth = 4;
+            const eyeHeight = 4;
+            const leftEyeX = headX + headSize * 0.2;
+            const rightEyeX = headX + headSize * 0.6;
+            const eyeY = headY + headSize * 0.3;
+            ctx.fillStyle = 'white';
+            ctx.fillRect(leftEyeX, eyeY, eyeWidth, eyeHeight);
+            ctx.fillRect(rightEyeX, eyeY, eyeWidth, eyeHeight);
+            ctx.fillStyle = 'black';
+            ctx.fillRect(leftEyeX + eyeWidth/2 - 1 + pupilOffsetX, eyeY + eyeHeight/2 - 1 + pupilOffsetY, 2, 2);
+            ctx.fillRect(rightEyeX + eyeWidth/2 - 1 + pupilOffsetX, eyeY + eyeHeight/2 - 1 + pupilOffsetY, 2, 2);
+        }
+        function drawBreakingDamage() {
+            if (!mouse.breaking) return;
+            const { x, y, damage } = mouse.breaking;
+            const tileType = world[x][y];
+            if (tileType === ASSETS.AIR) return;
+            const maxHp = ASSET_INFO[tileType].hp || 20;
+            const percent = damage / maxHp;
+            if (percent <= 0) return;
+            const drawX = x * TILE_SIZE;
+            const drawY = y * TILE_SIZE;
+            ctx.strokeStyle = 'rgba(255, 0, 0, 0.6)'; // Redder damage indicator for visibility
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            if (percent > 0.2) {
+                ctx.moveTo(drawX + TILE_SIZE * 0.1, drawY + TILE_SIZE * 0.1);
+                ctx.lineTo(drawX + TILE_SIZE * 0.9, drawY + TILE_SIZE * 0.9);
+            }
+            if (percent > 0.5) {
+                ctx.moveTo(drawX + TILE_SIZE * 0.9, drawY + TILE_SIZE * 0.1);
+                ctx.lineTo(drawX + TILE_SIZE * 0.1, drawY + TILE_SIZE * 0.9);
+            }
+            if (percent > 0.8) {
+                ctx.moveTo(drawX + TILE_SIZE * 0.5, drawY + TILE_SIZE * 0.1);
+                ctx.lineTo(drawX + TILE_SIZE * 0.5, drawY + TILE_SIZE * 0.9);
+            }
+            ctx.stroke();
+        }
+        function drawHotbar() {
+            hotbarContainer.innerHTML = '';
+            hotbar.forEach((assetType, index) => {
+                const info = ASSET_INFO[assetType];
+                const countValue = inventory[assetType] || 0;
+                // Only show slot if we have the item or it's a non-stackable tool (pickaxe)
+                if (countValue === 0 && info.stackable && assetType !== ASSETS.AIR) return;
+                const slot = document.createElement('div');
+                slot.className = 'hotbar-slot';
+                if (index === activeSlot) {
+                    slot.classList.add('active');
+                }
+                // Draw Item Icon inside the slot (simplified)
+                slot.style.backgroundColor = info.color;
+                // Add item name
+                const name = document.createElement('span');
+                name.className = 'item-name';
+                name.textContent = info.name;
+                slot.appendChild(name);
+                // Add count
+                const count = document.createElement('span');
+                count.className = 'count';
+                count.textContent = info.stackable ? countValue : '∞'; // Show infinity for tools
+                slot.appendChild(count);
+                slot.onclick = () => {
+                    activeSlot = index;
+                    drawHotbar();
+                };
+                hotbarContainer.appendChild(slot);
+            });
+        }
+        function drawCrafting() {
+            recipeList.innerHTML = '';
+            const workbenchPresent = getNearestCraftingTable();
+            RECIPES.forEach((recipe, index) => {
+                const recipeDiv = document.createElement('div');
+                recipeDiv.className = 'recipe-item';
+                let canCraft = true;
+                let materialsHtml = '';
+                for (const type in recipe.materials) {
+                    const required = recipe.materials[type];
+                    const held = inventory[type] || 0;
+                    const info = ASSET_INFO[type];
+                    if (held < required) {
+                        canCraft = false;
+                    }
+                    materialsHtml += `<span style="color: ${held >= required ? '#2ecc71' : '#e74c3c'};">${required} ${info.name}</span>, `;
+                }
+                materialsHtml = materialsHtml.slice(0, -2);
+                // Only show recipes that are available (either don't need bench or bench is nearby)
+                const requiresBench = recipe.requiresBench !== false;
+                const recipeAvailable = !requiresBench || workbenchPresent;
+                if (!recipeAvailable) {
+                    return; // Skip adding this recipe to the list
+                }
+                let buttonText = 'Craft';
+                if (!canCraft) {
+                    recipeDiv.classList.add('disabled');
+                    buttonText = 'Missing Mats';
+                }
+recipeDiv.innerHTML = `
+                    <div class="recipe-info">
+                        <div class="recipe-name">${recipe.name} (x${recipe.result.count})</div>
+                        <div class="recipe-materials">Requires: ${materialsHtml}</div>
+                    </div>
+                    <button class="craft-button" data-index="${index}" ${canCraft ? '' : 'disabled'}>
+                        ${buttonText}
+                    </button>
+                `;
+                recipeDiv.querySelector('.craft-button').onclick = (e) => {
+                    e.stopPropagation();
+                    if (canCraft) {
+                        tryCraft(recipe);
+                    }
+                };
+                recipeList.appendChild(recipeDiv);
+            });
+        }
+        function drawDroppedItems() {
+            droppedItems.forEach(item => {
+                const info = ASSET_INFO[item.type];
+                // Draw icon (simplified small rectangle with item color)
+                ctx.fillStyle = info.color;
+                ctx.fillRect(item.x, item.y, item.width, item.height);
+                // Draw label (Name and count)
+                ctx.fillStyle = 'white';
+                ctx.font = '12px Inter';
+                ctx.textAlign = 'center';
+                ctx.shadowColor = 'black';
+                ctx.shadowBlur = 4;
+                ctx.fillText(`${info.name} x${item.count}`, item.x + item.width / 2, item.y - 10);
+                ctx.shadowBlur = 0;
+            });
+        }
+        function gameLoop() {
+            gameTime++;
+            update();
+            draw();
+            requestAnimationFrame(gameLoop);
+        }
+        // --- Core Game Logic ---
+        function updateDroppedItems() {
+            for (let i = droppedItems.length - 1; i >= 0; i--) {
+                const item = droppedItems[i];
+                // Bobbing animation logic
+                if (item.onGround) {
+                    item.vy = 0;
+                    // Reset to base position then apply bob
+                    item.y = item.baseY + Math.sin(gameTime * 0.05) * 2;
+                } else {
+                    applyPhysics(item);
+                }
+                // Check if player picks it up
+            if (item.pickupCooldown > 0) {
+                item.pickupCooldown--;
+            } else if (checkCollision(player, item)) {
+inventory[item.type] = (inventory[item.type] || 0) + item.count;
+                    // Add to hotbar if new and stackable
+                    if (!hotbar.includes(item.type) && ASSET_INFO[item.type].stackable) {
+                         // Find the first empty hotbar slot that isn't a tool, or append
+                        const emptySlotIndex = hotbar.findIndex(t => t === ASSETS.AIR || inventory[t] === 0);
+                        if (emptySlotIndex !== -1 && hotbar[emptySlotIndex] < 100) {
+                             hotbar[emptySlotIndex] = item.type;
+                        } else {
+                             // Fallback: append it
+                             hotbar.push(item.type);
+                        }
+                    }
+                    alert(`Picked up +${item.count} ${ASSET_INFO[item.type].name}`);
+                    droppedItems.splice(i, 1);
+                    drawHotbar();
+                }
+            }
+        }
+        function checkCollision(r1, r2) {
+            return r1.x < r2.x + r2.width &&
+                   r1.x + r1.width > r2.x &&
+                   r1.y < r2.y + r2.height &&
+                   r1.y + r1.height > r2.y;
+        }
+        function handleInput() {
+            // Horizontal movement
+            if (keys['a'] || keys['ArrowLeft']) {
+                player.vx = -PLAYER_SPEED;
+                if(player.onGround) player.animState = 'walking';
+            } else if (keys['d'] || keys['ArrowRight']) {
+                player.vx = PLAYER_SPEED;
+                if(player.onGround) player.animState = 'walking';
+            } else if (player.onGround) {
+                player.animState = 'idle';
+            }
+            // Jumping
+            if ((keys[' '] || keys['w'] || keys['ArrowUp']) && player.onGround) {
+                player.vy = -JUMP_FORCE;
+                player.onGround = false;
+                player.animState = 'jumping';
+            }
+        }
+        function applyPhysics(entity) {
+            const isPlayer = entity.type === undefined;
+            if (entity.onGround && isPlayer) {
+                if (!keys['a'] && !keys['d'] && !keys['ArrowLeft'] && !keys['ArrowRight']) {
+                    entity.vx *= 0.8;
+                    if (Math.abs(entity.vx) < 0.1) entity.vx = 0;
+                }
+            } else if (entity.onGround && !isPlayer) {
+                 entity.vx *= 0.95;
+                 if (Math.abs(entity.vx) < 0.05) entity.vx = 0;
+            }
+            entity.vy += GRAVITY;
+            entity.onGround = false;
+            // 1. Horizontal Collision
+            entity.x += entity.vx;
+            let dx = entity.vx;
+            let playerLeftTile = Math.floor(entity.x / TILE_SIZE);
+            let playerRightTile = Math.floor((entity.x + entity.width - E) / TILE_SIZE);
+            let playerTopTile = Math.floor((entity.y + E) / TILE_SIZE);
+            let playerBottomTile = Math.floor((entity.y + entity.height - E) / TILE_SIZE);
+            for (let y = playerTopTile; y <= playerBottomTile; y++) {
+                if (y < 0 || y >= WORLD_HEIGHT) continue;
+                if (dx < 0 && playerLeftTile >= 0 && world[playerLeftTile] && ASSET_INFO[world[playerLeftTile][y]].placeable && !ASSET_INFO[world[playerLeftTile][y]].isPlatform) {
+                    entity.x = (playerLeftTile + 1) * TILE_SIZE;
+                    entity.vx = 0;
+                    break;
+                }
+                if (dx > 0 && playerRightTile < WORLD_WIDTH && world[playerRightTile] && ASSET_INFO[world[playerRightTile][y]].placeable && !ASSET_INFO[world[playerRightTile][y]].isPlatform) {
+                    entity.x = playerRightTile * TILE_SIZE - entity.width;
+                    entity.vx = 0;
+                    break;
+                }
+            }
+            // 2. Vertical Collision
+            entity.y += entity.vy;
+            playerLeftTile = Math.floor((entity.x + E) / TILE_SIZE);
+            playerRightTile = Math.floor((entity.x + entity.width - E) / TILE_SIZE);
+            playerTopTile = Math.floor(entity.y / TILE_SIZE);
+            playerBottomTile = Math.floor((entity.y + entity.height) / TILE_SIZE);
+             for (let x = playerLeftTile; x <= playerRightTile; x++) {
+                 if (x < 0 || x >= WORLD_WIDTH) continue;
+                if (entity.vy < 0 && world[x] && ASSET_INFO[world[x][playerTopTile]].placeable && !ASSET_INFO[world[x][playerTopTile]].isPlatform) {
+                    entity.y = (playerTopTile + 1) * TILE_SIZE;
+                    entity.vy = 0;
+                    break;
+                }
+                if (entity.vy > 0 && world[x]) {
+                    const tileType = world[x][playerBottomTile];
+                    const isPlaceable = ASSET_INFO[tileType] && ASSET_INFO[tileType].placeable;
+                    if (isPlaceable) {
+                        if (ASSET_INFO[tileType].isPlatform) {
+                            if (entity.y + entity.height <= (playerBottomTile * TILE_SIZE) + (TILE_SIZE * 0.2) + GRAVITY) {
+                                entity.y = (playerBottomTile * TILE_SIZE) + (TILE_SIZE * 0.2) - entity.height;
+                                entity.vy = 0;
+                                entity.onGround = true;
+                                if (!isPlayer) entity.baseY = entity.y; // For dropped items
+                            }
+                        } else {
+                            entity.y = playerBottomTile * TILE_SIZE - entity.height;
+                            entity.vy = 0;
+                            entity.onGround = true;
+                            if (!isPlayer) entity.baseY = entity.y; // For dropped items
+                        }
+                    }
+                }
+            }
+            if (!entity.onGround && entity.vy > 0 && isPlayer) {
+                entity.animState = 'jumping';
+            }
+            // World bounds
+            if (entity.x < 0) entity.x = 0;
+            if (entity.x + entity.width > WORLD_WIDTH * TILE_SIZE) {
+                entity.x = WORLD_WIDTH * TILE_SIZE - entity.width;
+            }
+            if (entity.y < 0) {
+                entity.y = 0;
+                entity.vy = 0;
+            }
+        }
+        function updateCamera() {
+            camera.x = player.x - canvas.width / 2 + player.width / 2;
+            camera.y = player.y - canvas.height / 2 + player.height / 2;
+            camera.x = Math.max(0, Math.min(camera.x, WORLD_WIDTH * TILE_SIZE - canvas.width));
+            camera.y = Math.max(0, Math.min(camera.y, WORLD_HEIGHT * TILE_SIZE - canvas.height));
+        }
+        // --- Interaction ---
+        function handleMining() {
+            if (!mouse.isDown) {
+                mouse.breaking = null;
+                return;
+            }
+            const activeItem = hotbar[activeSlot];
+            if (activeItem !== ASSETS.PICKAXE_WOOD) {
+                 mouse.breaking = null;
+                 return;
+            }
+            let dist = Math.hypot(mouse.worldX - (player.x + player.width / 2), mouse.worldY - (player.y + player.height / 2));
+            if (dist > REACH) {
+                mouse.breaking = null;
+                return;
+            }
+            let tileX = mouse.tileX;
+            let tileY = mouse.tileY;
+            if (tileX < 0 || tileX >= WORLD_WIDTH || tileY < 0 || tileY >= WORLD_HEIGHT) return;
+            let tileType = world[tileX][tileY];
+            if (tileType === ASSETS.AIR || tileType === ASSETS.CHEST) {
+                mouse.breaking = null;
+                return;
+            }
+            if (!mouse.breaking || mouse.breaking.x !== tileX || mouse.breaking.y !== tileY) {
+                mouse.breaking = { x: tileX, y: tileY, damage: 0 };
+            }
+            mouse.breaking.damage += 5;
+            let maxHp = ASSET_INFO[tileType].hp || 20;
+            if (mouse.breaking.damage >= maxHp) {
+                mineBlock(tileX, tileY);
+                mouse.breaking = null; // Reset
+            }
+        }
+        function mineBlock(tileX, tileY) {
+            let tileType = world[tileX][tileY];
+            if (tileType !== ASSETS.AIR) {
+                world[tileX][tileY] = ASSETS.AIR;
+                if(ASSET_INFO[tileType].stackable) {
+                    inventory[tileType] = (inventory[tileType] || 0) + 1;
+                    // Add newly acquired stackable item to hotbar if not present
+                    if (!hotbar.includes(tileType)) {
+                        const emptySlotIndex = hotbar.findIndex(t => t === ASSETS.AIR || (inventory[t] || 0) === 0);
+                        if (emptySlotIndex !== -1) {
+                            hotbar[emptySlotIndex] = tileType;
+                        } else {
+                            hotbar.push(tileType);
+                        }
+                    }
+                }
+            }
+            drawHotbar();
+        }
+        function placeBlock(tileX, tileY) {
+            if (tileX < 0 || tileX >= WORLD_WIDTH || tileY < 0 || tileY >= WORLD_HEIGHT) return;
+            let assetToPlace = hotbar[activeSlot];
+            const assetInfo = ASSET_INFO[assetToPlace];
+            if (assetToPlace < 100 && assetInfo.placeable && world[tileX][tileY] === ASSETS.AIR) {
+                if ((inventory[assetToPlace] || 0) > 0) {
+                    let playerRect = { x: player.x, y: player.y, width: player.width, height: player.height };
+                    let tileRect = { x: tileX * TILE_SIZE, y: tileY * TILE_SIZE, width: TILE_SIZE, height: TILE_SIZE };
+                    if (!(playerRect.x < tileRect.x + tileRect.width &&
+                          playerRect.x + playerRect.width > tileRect.x &&
+                          playerRect.y < tileRect.y + tileRect.height &&
+                          playerRect.y + playerRect.height > tileRect.y)) {
+                        world[tileX][tileY] = assetToPlace;
+                        inventory[assetToPlace]--;
+                        drawHotbar();
+                    }
+                } else {
+                    alert(`You are out of ${assetInfo.name}!`);
+                }
+            }
+        }
+        function tryCraft(recipe) {
+            const workbenchPresent = getNearestCraftingTable();
+            const requiresBench = recipe.requiresBench !== false;
+            if (requiresBench && !workbenchPresent) {
+                alert("You need a placed Crafting Table nearby for this recipe!");
+                return;
+            }
+            let canCraft = true;
+            for (const type in recipe.materials) {
+                if ((inventory[type] || 0) < recipe.materials[type]) {
+                    canCraft = false;
+                    break;
+                }
+            }
+            if (canCraft) {
+                for (const type in recipe.materials) {
+                    inventory[type] -= recipe.materials[type];
+                }
+                const resultType = recipe.result.type;
+                const resultCount = recipe.result.count;
+                inventory[resultType] = (inventory[resultType] || 0) + resultCount;
+                 // Update hotbar if newly crafted item is not present
+                if (!hotbar.includes(resultType) && ASSET_INFO[resultType].stackable) {
+                    const emptySlotIndex = hotbar.findIndex(t => t === ASSETS.AIR || (inventory[t] || 0) === 0);
+                    if (emptySlotIndex !== -1) {
+                        hotbar[emptySlotIndex] = resultType;
+                    } else {
+                        hotbar.push(resultType);
+                    }
+                }
+                alert(`Crafted ${recipe.name}!`);
+                drawHotbar();
+                drawCrafting();
+            } else {
+                alert("Cannot craft: missing materials.");
+            }
+        }
+        function dropItem() {
+            const assetType = hotbar[activeSlot];
+            const info = ASSET_INFO[assetType];
+            const countToDrop = 1;
+            if (assetType >= 100 || !info.stackable || (inventory[assetType] || 0) < countToDrop) {
+                alert("Cannot drop this item or stack is empty.");
+                return;
+            }
+            // Drop item further away from player
+            const dropOffsetX = (Math.random() - 0.5) * 40;
+            const dropOffsetY = -20;
+            const itemEntity = {
+                x: player.x + player.width / 2 - TILE_SIZE / 4 + dropOffsetX,
+                y: player.y + player.height - TILE_SIZE / 4 + dropOffsetY,
+                width: TILE_SIZE / 2,
+                height: TILE_SIZE / 2,
+                vx: (Math.random() - 0.5) * 5,
+                vy: -5,
+                onGround: false,
+                type: assetType,
+                count: countToDrop,
+                baseY: 0,
+                pickupCooldown: 30 // Prevent instant pickup
+            };
+inventory[assetType] -= countToDrop;
+            droppedItems.push(itemEntity);
+            alert(`Dropped 1 ${info.name}.`);
+            drawHotbar();
+        }
+function getNearestCraftingTable() {
+            const ptx = Math.floor((player.x + player.width / 2) / TILE_SIZE);
+            const pty = Math.floor((player.y + player.height / 2) / TILE_SIZE);
+            // Check 3 blocks left/right, 2 blocks up/down
+            for (let x = ptx - 3; x <= ptx + 3; x++) {
+                for (let y = pty - 2; y <= pty + 2; y++) {
+                    if (x >= 0 && x < WORLD_WIDTH && y >= 0 && y < WORLD_HEIGHT && world[x][y] === ASSETS.CRAFTING_TABLE) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+// FIX: Always open the menu, but rely on drawCrafting to disable advanced recipes if no table is placed.
+        function toggleCrafting() {
+            if (isCraftingOpen) {
+                isCraftingOpen = false;
+                craftingMenu.style.display = 'none';
+            } else {
+                isCraftingOpen = true;
+                craftingMenu.style.display = 'block';
+                drawCrafting();
+            }
+        }
+        function checkChestInteraction() {
+            const ptx = Math.floor((player.x + player.width / 2) / TILE_SIZE);
+            const pty = Math.floor(player.y / TILE_SIZE);
+            const checks = [
+                {x: ptx, y: pty},
+                {x: ptx, y: pty + 1},
+                {x: ptx, y: pty + 2},
+                {x: ptx + 1, y: pty + 1},
+                {x: ptx - 1, y: pty + 1}
+            ];
+            let foundChest = false;
+            for (const { x, y } of checks) {
+                if (x >= 0 && x < WORLD_WIDTH && y >= 0 && y < WORLD_HEIGHT && world[x][y] === ASSETS.CHEST) {
+                    const chestKey = `${x},${y}`;
+                    if (worldChests[chestKey]) {
+                        lootChest(chestKey, x, y);
+                        foundChest = true;
+                        break;
+                    }
+                }
+            }
+            if (!foundChest) {
+                alert("No nearby chest found.");
+            }
+        }
+        function lootChest(chestKey, x, y) {
+            const loot = worldChests[chestKey];
+            let lootMessage = "Looted Chest:\n";
+            if (loot.length === 0) {
+                 lootMessage += "The chest was empty!";
+            } else {
+                loot.forEach(([itemType, count]) => {
+                    const info = ASSET_INFO[itemType];
+                    inventory[itemType] = (inventory[itemType] || 0) + count;
+                    lootMessage += `+${count} ${info.name}\n`;
+                    if (!hotbar.includes(itemType) && ASSET_INFO[itemType].stackable) {
+                         // Add new loot items to hotbar if not present
+                        const emptySlotIndex = hotbar.findIndex(t => t === ASSETS.AIR || (inventory[t] || 0) === 0);
+                        if (emptySlotIndex !== -1 && hotbar[emptySlotIndex] < 100) {
+                             hotbar[emptySlotIndex] = itemType;
+                        } else {
+                             hotbar.push(itemType);
+                        }
+                    }
+                });
+            }
+            alert(lootMessage);
+            world[x][y] = ASSETS.AIR;
+            delete worldChests[chestKey];
+            drawHotbar();
+        }
+        // QoL: Simple on-screen alert for game messages
+        let messageTimer = 0;
+        let currentMessage = '';
+        function alert(message) {
+            console.log("--- MESSAGE BOX ---");
+            console.log(message);
+            console.log("-------------------");
+            alertUserOnScreen(message);
+        }
+        function alertUserOnScreen(message) {
+            currentMessage = message;
+            messageTimer = 180;
+        }
+        function drawAlert() {
+            if (messageTimer <= 0) return;
+            ctx.globalAlpha = messageTimer / 60;
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
+            const x = canvas.width / 2;
+            const y = canvas.height / 2;
+            ctx.beginPath();
+            ctx.roundRect(x - 200, y - 50, 400, 100, 10);
+            ctx.fill();
+            ctx.fillStyle = 'white';
+            ctx.font = '20px Inter';
+            ctx.textAlign = 'center';
+            currentMessage.split('\n').forEach((line, index) => {
+                ctx.fillText(line, x, y + index * 25 - 20);
+            });
+            ctx.globalAlpha = 1.0;
+            messageTimer--;
+        }
+        // --- Event Listeners ---
+        window.addEventListener('keydown', (e) => {
+            keys[e.key.toLowerCase()] = true;
+            if (e.key >= '1' && e.key <= '7') {
+                let slotIndex = parseInt(e.key) - 1;
+                if(slotIndex < hotbar.length) {
+                    activeSlot = slotIndex;
+                    drawHotbar();
+                }
+            }
+            // Crafting Toggle (E)
+            if (e.key.toLowerCase() === 'e' && !e.repeat) {
+                toggleCrafting();
+            }
+            // Loot Chest (F)
+            if (e.key.toLowerCase() === 'f' && !isCraftingOpen && !e.repeat) {
+                checkChestInteraction();
+            }
+            // Drop Item (G)
+            if (e.key.toLowerCase() === 'g' && !isCraftingOpen && gameTime > lastGPress + 10) {
+                dropItem();
+                lastGPress = gameTime;
+            }
+        });
+        window.addEventListener('keyup', (e) => {
+            keys[e.key.toLowerCase()] = false;
+        });
+        canvas.addEventListener('mousemove', updateMousePos);
+        canvas.addEventListener('mousedown', (e) => {
+            updateMousePos(e);
+            if (isCraftingOpen) return;
+            let dist = Math.hypot(mouse.worldX - (player.x + player.width / 2), mouse.worldY - (player.y + player.height / 2));
+            if (dist > REACH) return;
+            if (e.button === 2) { // Right click (Place Block)
+                placeBlock(mouse.tileX, mouse.tileY);
+            }
+        });
+        window.addEventListener('mousedown', (e) => {
+            if (e.button === 0 && e.target === canvas && !isCraftingOpen) {
+                mouse.isDown = true;
+                e.preventDefault();
+            }
+        });
+        window.addEventListener('mouseup', (e) => {
+            if (e.button === 0) {
+                mouse.isDown = false;
+                mouse.breaking = null;
+            }
+        });
+        canvas.addEventListener('wheel', (e) => {
+            if (isCraftingOpen) return;
+            if (e.deltaY > 0) {
+                activeSlot = (activeSlot + 1) % hotbar.length;
+            } else {
+                activeSlot = (activeSlot - 1 + hotbar.length) % hotbar.length;
+            }
+            drawHotbar();
+            e.preventDefault();
+        });
+        canvas.addEventListener('contextmenu', (e) => {
+            e.preventDefault();
+        });
+        window.addEventListener('resize', resizeCanvas);
+        // --- Start Game ---
+        resizeCanvas();
+        generateWorld();
+        alert("Welcome to Survival! Press [E] to open the Crafting Menu anywhere.\n[G] to drop items. [F] to loot chests.");
+        gameLoop();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>