<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Adventure Farming Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #87CEEB;
        }
        canvas {
            display: block;
            margin: 0 auto;
            background-color: #F0F8FF;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script src="game.js"></script>
</body>
</html>
// Setup the canvas
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

// Tile size and world dimensions
const TILE_SIZE = 32;
let worldWidth, worldHeight;

// Set canvas size to fill the entire window
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Calculate world dimensions (larger than the screen)
worldWidth = Math.floor(canvas.width / TILE_SIZE) * 2; // The world will be twice the width of the screen
worldHeight = Math.floor(canvas.height / TILE_SIZE) * 2; // The world will be twice the height of the screen

// Define the player object
const player = {
    x: Math.floor(worldWidth / 2) * TILE_SIZE,  // Start in the center of the world
    y: Math.floor(worldHeight / 2) * TILE_SIZE,
    width: TILE_SIZE,
    height: TILE_SIZE,
    speed: 4,
};

// World grid (generated procedurally)
const world = [];

// Initialize world with random grass, dirt, and water tiles
function generateWorld() {
    // First, create all grass and dirt tiles
    for (let y = 0; y < worldHeight; y++) {
        world[y] = [];
        for (let x = 0; x < worldWidth; x++) {
            const rand = Math.random();
            if (rand < 0.8) {
                world[y][x] = 'grass';  // 80% chance for grass
            } else {
                world[y][x] = 'dirt';   // 20% chance for dirt
            }
        }
    }

    // Now, let's add water pools randomly but smaller and less frequent
    let numberOfWaterPools = Math.floor(worldWidth * worldHeight / 200);  // Less frequent water pools
    for (let i = 0; i < numberOfWaterPools; i++) {
        let poolWidth = Math.floor(Math.random() * 4) + 2;  // Water pool width between 2 and 5 tiles
        let poolHeight = Math.floor(Math.random() * 4) + 2;  // Water pool height between 2 and 5 tiles
        let startX = Math.floor(Math.random() * (worldWidth - poolWidth));
        let startY = Math.floor(Math.random() * (worldHeight - poolHeight));

        // Fill the region with water
        for (let y = startY; y < startY + poolHeight; y++) {
            for (let x = startX; x < startX + poolWidth; x++) {
                world[y][x] = 'water';
            }
        }
    }
}

// Set up movement controls
let keys = {
    w: false,
    a: false,
    s: false,
    d: false,
};

window.addEventListener('keydown', (e) => {
    if (e.key === 'w') keys.w = true;
    if (e.key === 'a') keys.a = true;
    if (e.key === 's') keys.s = true;
    if (e.key === 'd') keys.d = true;
});

window.addEventListener('keyup', (e) => {
    if (e.key === 'w') keys.w = false;
    if (e.key === 'a') keys.a = false;
    if (e.key === 's') keys.s = false;
    if (e.key === 'd') keys.d = false;
});

// Move the player
function movePlayer() {
    let newX = player.x;
    let newY = player.y;

    // Calculate the direction of movement based on the key pressed
    if (keys.w) newY -= player.speed;
    if (keys.s) newY += player.speed;
    if (keys.a) newX -= player.speed;
    if (keys.d) newX += player.speed;

    // Check the tile in the direction of movement to see if it's water
    const targetTileX = Math.floor(newX / TILE_SIZE);
    const targetTileY = Math.floor(newY / TILE_SIZE);

    // Function to check if a tile is water
    const isWater = (x, y) => world[y] && world[y][x] === 'water';

    // Check if the tile the player is trying to move into is water
    if (isWater(targetTileX, targetTileY)) {
        // Prevent movement if the player is trying to move into water
        return;
    }

    // Allow movement if it's not water
    player.x = newX;
    player.y = newY;
}

// Draw the world (tiles)
function drawWorld() {
    for (let y = 0; y < worldHeight; y++) {
        for (let x = 0; x < worldWidth; x++) {
            const tile = world[y][x];
            if (tile === 'grass') {
                drawGrass(x * TILE_SIZE, y * TILE_SIZE);
            } else if (tile === 'dirt') {
                drawDirt(x * TILE_SIZE, y * TILE_SIZE);
            } else if (tile === 'water') {
                drawWater(x * TILE_SIZE, y * TILE_SIZE);
            }
        }
    }
}

// Drawing pixel art for Grass Tile
function drawGrass(x, y) {
    ctx.fillStyle = "#8bff66"; // light green color for grass
    ctx.fillRect(x - cameraOffset.x, y - cameraOffset.y, TILE_SIZE, TILE_SIZE); // Fill the tile with color
    // Draw grass texture (small lines for detail)
    ctx.fillStyle = "#4f9d3f"; // darker green for grass texture
    ctx.fillRect(x - cameraOffset.x + 5, y - cameraOffset.y + 5, 5, 10);
    ctx.fillRect(x - cameraOffset.x + 10, y - cameraOffset.y + 8, 5, 10);
    ctx.fillRect(x - cameraOffset.x + 15, y - cameraOffset.y + 6, 5, 10);
    ctx.fillRect(x - cameraOffset.x + 20, y - cameraOffset.y + 5, 5, 10);
}

// Drawing pixel art for Dirt Tile
function drawDirt(x, y) {
    ctx.fillStyle = "#d0b77b"; // light brown color for dirt
    ctx.fillRect(x - cameraOffset.x, y - cameraOffset.y, TILE_SIZE, TILE_SIZE); // Fill the tile with color
    // Add some texture for dirt
    ctx.fillStyle = "#8b6c2f"; // darker brown for texture
    ctx.fillRect(x - cameraOffset.x + 8, y - cameraOffset.y + 8, 5, 5);
    ctx.fillRect(x - cameraOffset.x + 15, y - cameraOffset.y + 12, 6, 6);
}

// Drawing pixel art for Water Tile (pools)
function drawWater(x, y) {
    ctx.fillStyle = "#1f8dff"; // blue for water
    ctx.fillRect(x - cameraOffset.x, y - cameraOffset.y, TILE_SIZE, TILE_SIZE); // Fill the tile with color
    // Draw some waves for texture (light blue)
    ctx.fillStyle = "#63b9ff"; 
    ctx.beginPath();
    ctx.arc(x - cameraOffset.x + 8, y - cameraOffset.y + 12, 4, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.beginPath();
    ctx.arc(x - cameraOffset.x + 24, y - cameraOffset.y + 20, 4, 0, Math.PI * 2, false);
    ctx.fill();
}

// Draw the player sprite (simple character)
function drawPlayer() {
    ctx.fillStyle = "#ffdbac"; // Skin color for the head
    ctx.fillRect(player.x - cameraOffset.x, player.y - cameraOffset.y, TILE_SIZE, TILE_SIZE); // Draw the head
    ctx.fillStyle = "#0000ff"; // Blue for the body
    ctx.fillRect(player.x - cameraOffset.x + 8, player.y - cameraOffset.y + 16, 16, 16); // Body (16x16)

    // Legs
    ctx.fillStyle = "#000"; // Black for legs
    ctx.fillRect(player.x - cameraOffset.x + 8, player.y - cameraOffset.y + 24, 6, 8); // Left leg
    ctx.fillRect(player.x - cameraOffset.x + 18, player.y - cameraOffset.y + 24, 6, 8); // Right leg

    // Simple face (two eyes)
    ctx.fillStyle = "#000"; // Black for eyes
    ctx.fillRect(player.x - cameraOffset.x + 10, player.y - cameraOffset.y + 8, 4, 4); // Left eye
    ctx.fillRect(player.x - cameraOffset.x + 18, player.y - cameraOffset.y + 8, 4, 4); // Right eye
}

// Camera Logic
const cameraOffset = {
    x: 0, // Initial camera offset (starts at 0)
    y: 0,
};

const followThreshold = 100;  // Distance from the center before the camera moves

// Update camera position based on player's position
function updateCamera() {
    const centerX = player.x - cameraOffset.x - canvas.width / 2;
    const centerY = player.y - cameraOffset.y - canvas.height / 2;

    // Check if the player is beyond the threshold in any direction
    if (centerX > followThreshold) {
        cameraOffset.x += (centerX - followThreshold);
    } else if (centerX < -followThreshold) {
        cameraOffset.x += (centerX + followThreshold);
    }

    if (centerY > followThreshold) {
        cameraOffset.y += (centerY - followThreshold);
    } else if (centerY < -followThreshold) {
        cameraOffset.y += (centerY + followThreshold);
    }

    // Ensure camera does not go out of bounds
    cameraOffset.x = Math.max(0, Math.min(cameraOffset.x, worldWidth * TILE_SIZE - canvas.width));
    cameraOffset.y = Math.max(0, Math.min(cameraOffset.y, worldHeight * TILE_SIZE - canvas.height));
}

// Clear the canvas before each frame
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

// Game loop
function gameLoop() {
    clearCanvas();
    movePlayer();
    updateCamera();
    drawWorld();
    drawPlayer();
    requestAnimationFrame(gameLoop);
}

// Generate the world and start the game loop
generateWorld();
gameLoop();
add the ability to till the land and place crops. add a few basic crops hard coding the textures like for the water, grass, dirt, and player. add an inventory/hotbar system. make a hotbar in the bottom left corner with rounded corners, slightly transparent, blur, with 9 slots. give the player a few crops and a hoe to till dirt by default. they should be able to click blocks and till them, and the blocks should be next to water or within 5 blocks of a water source. then you should beable to select the crops on the hotbar and click to plant them, and they should grow with 5 stages from seed to ready to harvest. Make the charcater move normal and allow you to harvest with a third item in the hotbar