<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Village Builders - Rosy's Arcade</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #2d4a3e;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            padding: 10px;
            user-select: none;
            overflow: hidden;
        }
        h1 {
            font-size: 1.8rem;
            margin-bottom: 8px;
            color: #a8d5a2;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .game-header {
            display: flex;
            gap: 30px;
            margin-bottom: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .player-info {
            background: rgba(0,0,0,0.3);
            padding: 10px 20px;
            border-radius: 10px;
            text-align: center;
            min-width: 200px;
        }
        .player-info.p1 {
            border: 3px solid #5dade2;
        }
        .player-info.p2 {
            border: 3px solid #f39c12;
        }
        .player-name {
            font-weight: bold;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        .player-name.p1 { color: #5dade2; }
        .player-name.p2 { color: #f39c12; }
        .player-resources {
            display: flex;
            gap: 15px;
            justify-content: center;
            font-size: 0.9rem;
        }
        .resource {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .resource-icon {
            width: 16px;
            height: 16px;
            border-radius: 3px;
        }
        .wood-icon { background: #8b4513; }
        .stone-icon { background: #888; }
        .food-icon { background: #e74c3c; }

        .village-stats {
            background: rgba(0,0,0,0.3);
            padding: 10px 20px;
            border-radius: 10px;
            text-align: center;
            border: 3px solid #a8d5a2;
        }
        .village-stats h3 {
            color: #a8d5a2;
            margin-bottom: 5px;
        }
        .stats-row {
            display: flex;
            gap: 20px;
            font-size: 0.9rem;
        }

        .game-container {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 0 30px rgba(0,0,0,0.4);
        }
        #gameCanvas {
            display: block;
            background: #5a8f5a;
        }

        .build-menu {
            display: flex;
            gap: 10px;
            margin-top: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .build-btn {
            padding: 8px 15px;
            background: rgba(0,0,0,0.4);
            border: 2px solid #666;
            border-radius: 8px;
            color: white;
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .build-btn:hover {
            background: rgba(0,0,0,0.6);
            border-color: #a8d5a2;
        }
        .build-btn.selected {
            border-color: #ffd700;
            background: rgba(255,215,0,0.2);
        }
        .build-btn .preview {
            width: 20px;
            height: 20px;
            border-radius: 3px;
        }
        .build-btn .cost {
            font-size: 0.75rem;
            color: #aaa;
        }

        .controls {
            margin-top: 10px;
            text-align: center;
            color: #a8d5a2;
            font-size: 0.8rem;
            line-height: 1.6;
        }
        .controls span {
            background: rgba(0,0,0,0.3);
            padding: 2px 8px;
            border-radius: 4px;
            margin: 0 2px;
        }
        .p1-controls { color: #5dade2; }
        .p2-controls { color: #f39c12; }

        .day-night {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.5);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <h1>🏘️ Village Builders</h1>

    <div class="game-header">
        <div class="player-info p1">
            <div class="player-name p1">Player 1 (WASD)</div>
            <div class="player-resources">
                <div class="resource"><div class="resource-icon wood-icon"></div><span id="p1-wood">10</span></div>
                <div class="resource"><div class="resource-icon stone-icon"></div><span id="p1-stone">5</span></div>
                <div class="resource"><div class="resource-icon food-icon"></div><span id="p1-food">5</span></div>
            </div>
        </div>
        <div class="village-stats">
            <h3>Village</h3>
            <div class="stats-row">
                <span>🏠 <span id="houses">0</span></span>
                <span>👥 <span id="population">2</span></span>
                <span>🌾 <span id="farms">0</span></span>
            </div>
        </div>
        <div class="player-info p2">
            <div class="player-name p2">Player 2 (Arrows)</div>
            <div class="player-resources">
                <div class="resource"><div class="resource-icon wood-icon"></div><span id="p2-wood">10</span></div>
                <div class="resource"><div class="resource-icon stone-icon"></div><span id="p2-stone">5</span></div>
                <div class="resource"><div class="resource-icon food-icon"></div><span id="p2-food">5</span></div>
            </div>
        </div>
    </div>

    <div class="game-container">
        <canvas id="gameCanvas" width="900" height="500"></canvas>
        <div class="day-night">Day <span id="dayCount">1</span></div>
    </div>

    <div class="build-menu">
        <button class="build-btn selected" data-building="none">
            <div class="preview" style="background: transparent; border: 2px dashed #666;"></div>
            <div>Move</div>
        </button>
        <button class="build-btn" data-building="house">
            <div class="preview" style="background: #d35400;"></div>
            <div>House<br><span class="cost">🪵5 🪨3</span></div>
        </button>
        <button class="build-btn" data-building="farm">
            <div class="preview" style="background: #f1c40f;"></div>
            <div>Farm<br><span class="cost">🪵3</span></div>
        </button>
        <button class="build-btn" data-building="well">
            <div class="preview" style="background: #3498db; border-radius: 50%;"></div>
            <div>Well<br><span class="cost">🪨5</span></div>
        </button>
        <button class="build-btn" data-building="path">
            <div class="preview" style="background: #b5651d;"></div>
            <div>Path<br><span class="cost">🪨1</span></div>
        </button>
        <button class="build-btn" data-building="tree">
            <div class="preview" style="background: #27ae60; border-radius: 50%;"></div>
            <div>Tree<br><span class="cost">🍎1</span></div>
        </button>
        <button class="build-btn" data-building="fence">
            <div class="preview" style="background: #8b4513;"></div>
            <div>Fence<br><span class="cost">🪵2</span></div>
        </button>
    </div>

    <div class="controls">
        <span class="p1-controls">P1: WASD move, E build, Q gather, 1-7 select</span> |
        <span class="p2-controls">P2: Arrows move, / build, . gather, Numpad 1-7</span>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const TILE_SIZE = 25;
        const GRID_W = Math.floor(canvas.width / TILE_SIZE);
        const GRID_H = Math.floor(canvas.height / TILE_SIZE);

        // Game state
        let dayCount = 1;
        let dayTimer = 0;
        const DAY_LENGTH = 1800; // frames per day

        // Grid for buildings
        const grid = [];
        for (let y = 0; y < GRID_H; y++) {
            grid[y] = [];
            for (let x = 0; x < GRID_W; x++) {
                grid[y][x] = null;
            }
        }

        // Resource nodes (trees, rocks, berry bushes)
        const resources = [];

        // Generate initial resources
        function generateResources() {
            // Trees
            for (let i = 0; i < 30; i++) {
                resources.push({
                    type: 'tree',
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    amount: 3
                });
            }
            // Rocks
            for (let i = 0; i < 15; i++) {
                resources.push({
                    type: 'rock',
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    amount: 3
                });
            }
            // Berry bushes
            for (let i = 0; i < 10; i++) {
                resources.push({
                    type: 'berry',
                    x: Math.random() * canvas.width,
                    y: Math.random() * canvas.height,
                    amount: 2
                });
            }
        }
        generateResources();

        // Buildings placed
        const buildings = [];
        let villageStats = { houses: 0, population: 2, farms: 0 };

        // Players
        const players = [
            {
                id: 1,
                x: canvas.width / 3,
                y: canvas.height / 2,
                color: '#5dade2',
                wood: 10,
                stone: 5,
                food: 5,
                selectedBuilding: 'none',
                keys: { up: false, down: false, left: false, right: false }
            },
            {
                id: 2,
                x: (canvas.width / 3) * 2,
                y: canvas.height / 2,
                color: '#f39c12',
                wood: 10,
                stone: 5,
                food: 5,
                selectedBuilding: 'none',
                keys: { up: false, down: false, left: false, right: false }
            }
        ];

        const PLAYER_SIZE = 20;
        const PLAYER_SPEED = 3;

        // Building costs
        const buildingCosts = {
            house: { wood: 5, stone: 3, food: 0 },
            farm: { wood: 3, stone: 0, food: 0 },
            well: { wood: 0, stone: 5, food: 0 },
            path: { wood: 0, stone: 1, food: 0 },
            tree: { wood: 0, stone: 0, food: 1 },
            fence: { wood: 2, stone: 0, food: 0 }
        };

        // Input handling
        const keys = {};
        document.addEventListener('keydown', (e) => {
            keys[e.key.toLowerCase()] = true;
            keys[e.code] = true;

            // Player 1 build (E)
            if (e.key.toLowerCase() === 'e') {
                tryBuild(players[0]);
            }
            // Player 1 gather (Q)
            if (e.key.toLowerCase() === 'q') {
                tryGather(players[0]);
            }
            // Player 2 build (/)
            if (e.key === '/') {
                e.preventDefault();
                tryBuild(players[1]);
            }
            // Player 2 gather (.)
            if (e.key === '.') {
                tryGather(players[1]);
            }

            // Building selection P1 (1-7)
            const numKeys = ['1','2','3','4','5','6','7'];
            const buildTypes = ['none','house','farm','well','path','tree','fence'];
            if (numKeys.includes(e.key)) {
                const idx = numKeys.indexOf(e.key);
                players[0].selectedBuilding = buildTypes[idx];
                updateBuildButtons(0);
            }

            // Building selection P2 (Numpad 1-7)
            const numpadCodes = ['Numpad1','Numpad2','Numpad3','Numpad4','Numpad5','Numpad6','Numpad7'];
            if (numpadCodes.includes(e.code)) {
                const idx = numpadCodes.indexOf(e.code);
                players[1].selectedBuilding = buildTypes[idx];
                updateBuildButtons(1);
            }
        });

        document.addEventListener('keyup', (e) => {
            keys[e.key.toLowerCase()] = false;
            keys[e.code] = false;
        });

        // Build button clicks
        document.querySelectorAll('.build-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const building = btn.dataset.building;
                players[0].selectedBuilding = building;
                players[1].selectedBuilding = building;
                document.querySelectorAll('.build-btn').forEach(b => b.classList.remove('selected'));
                btn.classList.add('selected');
            });
        });

        function updateBuildButtons(playerIdx) {
            // Visual feedback could be added here
        }

        function canAfford(player, buildingType) {
            const cost = buildingCosts[buildingType];
            if (!cost) return false;
            return player.wood >= cost.wood &&
                   player.stone >= cost.stone &&
                   player.food >= cost.food;
        }

        function tryBuild(player) {
            const buildingType = player.selectedBuilding;
            if (buildingType === 'none') return;

            if (!canAfford(player, buildingType)) {
                return; // Can't afford
            }

            const gridX = Math.floor(player.x / TILE_SIZE);
            const gridY = Math.floor(player.y / TILE_SIZE);

            // Check if spot is free
            if (gridX < 0 || gridX >= GRID_W || gridY < 0 || gridY >= GRID_H) return;
            if (grid[gridY][gridX]) return; // Already occupied

            // Deduct cost
            const cost = buildingCosts[buildingType];
            player.wood -= cost.wood;
            player.stone -= cost.stone;
            player.food -= cost.food;

            // Place building
            const building = {
                type: buildingType,
                x: gridX * TILE_SIZE,
                y: gridY * TILE_SIZE,
                gridX,
                gridY,
                builtBy: player.id
            };
            buildings.push(building);
            grid[gridY][gridX] = building;

            // Update stats
            if (buildingType === 'house') {
                villageStats.houses++;
                villageStats.population += 2;
            } else if (buildingType === 'farm') {
                villageStats.farms++;
            }

            updateUI();
        }

        function tryGather(player) {
            // Find nearby resource
            for (let i = resources.length - 1; i >= 0; i--) {
                const res = resources[i];
                const dist = Math.hypot(player.x - res.x, player.y - res.y);
                if (dist < 40 && res.amount > 0) {
                    res.amount--;
                    if (res.type === 'tree') {
                        player.wood++;
                    } else if (res.type === 'rock') {
                        player.stone++;
                    } else if (res.type === 'berry') {
                        player.food++;
                    }

                    if (res.amount <= 0) {
                        resources.splice(i, 1);
                    }
                    updateUI();
                    return;
                }
            }
        }

        function updateUI() {
            document.getElementById('p1-wood').textContent = players[0].wood;
            document.getElementById('p1-stone').textContent = players[0].stone;
            document.getElementById('p1-food').textContent = players[0].food;
            document.getElementById('p2-wood').textContent = players[1].wood;
            document.getElementById('p2-stone').textContent = players[1].stone;
            document.getElementById('p2-food').textContent = players[1].food;
            document.getElementById('houses').textContent = villageStats.houses;
            document.getElementById('population').textContent = villageStats.population;
            document.getElementById('farms').textContent = villageStats.farms;
            document.getElementById('dayCount').textContent = dayCount;
        }

        function update() {
            // Day cycle
            dayTimer++;
            if (dayTimer >= DAY_LENGTH) {
                dayTimer = 0;
                dayCount++;
                // Farms produce food each day
                players.forEach(p => {
                    p.food += villageStats.farms;
                });
                // Occasionally spawn new resources
                if (Math.random() < 0.3) {
                    resources.push({
                        type: 'tree',
                        x: Math.random() * canvas.width,
                        y: Math.random() * canvas.height,
                        amount: 3
                    });
                }
                updateUI();
            }

            // Player 1 movement (WASD)
            if (keys['w']) players[0].y -= PLAYER_SPEED;
            if (keys['s']) players[0].y += PLAYER_SPEED;
            if (keys['a']) players[0].x -= PLAYER_SPEED;
            if (keys['d']) players[0].x += PLAYER_SPEED;

            // Player 2 movement (Arrows)
            if (keys['arrowup']) players[1].y -= PLAYER_SPEED;
            if (keys['arrowdown']) players[1].y += PLAYER_SPEED;
            if (keys['arrowleft']) players[1].x -= PLAYER_SPEED;
            if (keys['arrowright']) players[1].x += PLAYER_SPEED;

            // Keep players in bounds
            players.forEach(p => {
                p.x = Math.max(PLAYER_SIZE/2, Math.min(canvas.width - PLAYER_SIZE/2, p.x));
                p.y = Math.max(PLAYER_SIZE/2, Math.min(canvas.height - PLAYER_SIZE/2, p.y));
            });
        }

        function draw() {
            // Sky/ground gradient based on time of day
            const dayProgress = dayTimer / DAY_LENGTH;
            let skyBrightness = 1;
            if (dayProgress > 0.7) {
                skyBrightness = 1 - ((dayProgress - 0.7) / 0.3) * 0.4;
            } else if (dayProgress < 0.2) {
                skyBrightness = 0.6 + (dayProgress / 0.2) * 0.4;
            }

            // Ground
            const groundColor = `rgb(${Math.floor(90 * skyBrightness)}, ${Math.floor(143 * skyBrightness)}, ${Math.floor(90 * skyBrightness)})`;
            ctx.fillStyle = groundColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Grid lines (subtle)
            ctx.strokeStyle = `rgba(0,0,0,0.1)`;
            ctx.lineWidth = 1;
            for (let x = 0; x <= canvas.width; x += TILE_SIZE) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, canvas.height);
                ctx.stroke();
            }
            for (let y = 0; y <= canvas.height; y += TILE_SIZE) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(canvas.width, y);
                ctx.stroke();
            }

            // Draw resources
            resources.forEach(res => {
                if (res.type === 'tree') {
                    // Trunk
                    ctx.fillStyle = '#5d4037';
                    ctx.fillRect(res.x - 4, res.y - 5, 8, 15);
                    // Leaves
                    ctx.fillStyle = '#2e7d32';
                    ctx.beginPath();
                    ctx.arc(res.x, res.y - 15, 15, 0, Math.PI * 2);
                    ctx.fill();
                } else if (res.type === 'rock') {
                    ctx.fillStyle = '#78909c';
                    ctx.beginPath();
                    ctx.arc(res.x, res.y, 12, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.fillStyle = '#90a4ae';
                    ctx.beginPath();
                    ctx.arc(res.x - 3, res.y - 3, 5, 0, Math.PI * 2);
                    ctx.fill();
                } else if (res.type === 'berry') {
                    // Bush
                    ctx.fillStyle = '#4caf50';
                    ctx.beginPath();
                    ctx.arc(res.x, res.y, 12, 0, Math.PI * 2);
                    ctx.fill();
                    // Berries
                    ctx.fillStyle = '#e91e63';
                    for (let i = 0; i < 4; i++) {
                        const bx = res.x + Math.cos(i * 1.5) * 6;
                        const by = res.y + Math.sin(i * 1.5) * 6;
                        ctx.beginPath();
                        ctx.arc(bx, by, 3, 0, Math.PI * 2);
                        ctx.fill();
                    }
                }
            });

            // Draw buildings
            buildings.forEach(b => {
                const x = b.x;
                const y = b.y;
                const s = TILE_SIZE;

                if (b.type === 'house') {
                    // House body
                    ctx.fillStyle = '#d35400';
                    ctx.fillRect(x + 2, y + s * 0.4, s - 4, s * 0.6 - 2);
                    // Roof
                    ctx.fillStyle = '#8b4513';
                    ctx.beginPath();
                    ctx.moveTo(x, y + s * 0.4);
                    ctx.lineTo(x + s / 2, y + 2);
                    ctx.lineTo(x + s, y + s * 0.4);
                    ctx.fill();
                    // Door
                    ctx.fillStyle = '#5d4037';
                    ctx.fillRect(x + s * 0.35, y + s * 0.6, s * 0.3, s * 0.4 - 2);
                } else if (b.type === 'farm') {
                    // Dirt
                    ctx.fillStyle = '#8d6e63';
                    ctx.fillRect(x + 2, y + 2, s - 4, s - 4);
                    // Crops
                    ctx.fillStyle = '#f1c40f';
                    for (let i = 0; i < 3; i++) {
                        for (let j = 0; j < 3; j++) {
                            ctx.fillRect(x + 5 + i * 7, y + 5 + j * 7, 4, 4);
                        }
                    }
                } else if (b.type === 'well') {
                    ctx.fillStyle = '#5d6d7e';
                    ctx.beginPath();
                    ctx.arc(x + s/2, y + s/2, s * 0.4, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.fillStyle = '#3498db';
                    ctx.beginPath();
                    ctx.arc(x + s/2, y + s/2, s * 0.25, 0, Math.PI * 2);
                    ctx.fill();
                } else if (b.type === 'path') {
                    ctx.fillStyle = '#b5651d';
                    ctx.fillRect(x + 1, y + 1, s - 2, s - 2);
                    // Pebbles
                    ctx.fillStyle = '#a0522d';
                    ctx.fillRect(x + 5, y + 5, 4, 4);
                    ctx.fillRect(x + 15, y + 12, 4, 4);
                    ctx.fillRect(x + 8, y + 16, 4, 4);
                } else if (b.type === 'tree') {
                    // Planted tree (smaller)
                    ctx.fillStyle = '#5d4037';
                    ctx.fillRect(x + s/2 - 3, y + s/2, 6, s/2 - 2);
                    ctx.fillStyle = '#27ae60';
                    ctx.beginPath();
                    ctx.arc(x + s/2, y + s * 0.35, s * 0.35, 0, Math.PI * 2);
                    ctx.fill();
                } else if (b.type === 'fence') {
                    ctx.fillStyle = '#8b4513';
                    ctx.fillRect(x + 2, y + s * 0.3, s - 4, 4);
                    ctx.fillRect(x + 2, y + s * 0.6, s - 4, 4);
                    ctx.fillRect(x + 4, y + 4, 4, s - 8);
                    ctx.fillRect(x + s - 8, y + 4, 4, s - 8);
                }
            });

            // Draw players
            players.forEach(p => {
                // Shadow
                ctx.fillStyle = 'rgba(0,0,0,0.2)';
                ctx.beginPath();
                ctx.ellipse(p.x, p.y + PLAYER_SIZE/2, PLAYER_SIZE/2, PLAYER_SIZE/4, 0, 0, Math.PI * 2);
                ctx.fill();

                // Body
                ctx.fillStyle = p.color;
                ctx.beginPath();
                ctx.arc(p.x, p.y, PLAYER_SIZE/2, 0, Math.PI * 2);
                ctx.fill();

                // Face
                ctx.fillStyle = '#fff';
                ctx.beginPath();
                ctx.arc(p.x - 4, p.y - 2, 3, 0, Math.PI * 2);
                ctx.arc(p.x + 4, p.y - 2, 3, 0, Math.PI * 2);
                ctx.fill();
                ctx.fillStyle = '#333';
                ctx.beginPath();
                ctx.arc(p.x - 4, p.y - 2, 1.5, 0, Math.PI * 2);
                ctx.arc(p.x + 4, p.y - 2, 1.5, 0, Math.PI * 2);
                ctx.fill();

                // Smile
                ctx.strokeStyle = '#333';
                ctx.lineWidth = 1.5;
                ctx.beginPath();
                ctx.arc(p.x, p.y + 2, 4, 0.1 * Math.PI, 0.9 * Math.PI);
                ctx.stroke();

                // Player number
                ctx.fillStyle = '#fff';
                ctx.font = 'bold 10px sans-serif';
                ctx.textAlign = 'center';
                ctx.fillText('P' + p.id, p.x, p.y - PLAYER_SIZE/2 - 5);

                // Show selected building indicator
                if (p.selectedBuilding !== 'none') {
                    ctx.strokeStyle = p.color;
                    ctx.lineWidth = 2;
                    ctx.setLineDash([4, 4]);
                    const gridX = Math.floor(p.x / TILE_SIZE) * TILE_SIZE;
                    const gridY = Math.floor(p.y / TILE_SIZE) * TILE_SIZE;
                    ctx.strokeRect(gridX + 2, gridY + 2, TILE_SIZE - 4, TILE_SIZE - 4);
                    ctx.setLineDash([]);
                }
            });
        }

        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

        updateUI();
        gameLoop();
    </script>
</body>
</html>
