`data/artifacts/1d4944290382/hermes3-8b.html`

105 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Isometric City Builder</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        canvas {
            border: 1px solid #ccc;
        }
        
        .controls {
            margin-top: 10px;
        }
        
        button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <canvas id="cityCanvas" width="400" height="400"></canvas>
    <div class="controls">
        <button id="rotateView">Rotate View</button>
        <button id="addHouse">Add House</button>
        <button id="addTree">Add Tree</button>
        <button id="addShop">Add Shop</button>
        <button id="addRoad">Add Road</button>
    </div>

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

        let buildings = {
            house: 0,
            tree: 0,
            shop: 0,
            road: 0
        };

        function drawBuilding(x, y, type) {
            switch (type) {
                case 'house':
                    ctx.fillStyle = '#FFD700';
                    break;
                case 'tree':
                    ctx.fillStyle = '#228B22';
                    break;
                case 'shop':
                    ctx.fillStyle = '#1E90FF';
                    break;
                case 'road':
                    ctx.fillStyle = '#A52A2A';
                    break;
            }
            
            ctx.beginPath();
            ctx.fillRect(x, y, 50, 50);
            ctx.closePath();
        }

        function toggleBuildingType(type) {
            return (buildings[type] % 2 === 0) ? 'house' : type;
        }

        canvas.addEventListener('click', (event) => {
            const x = Math.floor(event.clientX / 50) * 50 - 100;
            const y = Math.floor(event.clientY / 50) * 50 - 200;

            ctx.clearRect(x, y, 50, 50);

            Object.keys(buildings).forEach((type) => {
                drawBuilding(x, y, toggleBuildingType(type));
            });

            buildings[toggleBuildingType(Object.keys(buildings)[0]]]++;
        });

        document.getElementById('rotateView').addEventListener('click', () => {
            ctx.translate(canvas.width, 0);
            ctx.scale(-1, 1);
        });

        Object.keys(buildings).forEach((type) => {
            const button = document.getElementById(type);
            
            if (button) {
                button.addEventListener('click', () => {
                    buildings[type]++;
                });
            }
        });
    </script>
</body>
</html>