city/static/js/GameRenderer.js

export class GameRenderer {
    constructor() {
        this.scene = null;
        this.camera = null;
        this.renderer = null;
        this.canvas = null;
        
        this.tiles = new Map();
        // Map of tile meshes
        this.buildings = new Map();
        // Map of building meshes
        this.cursors = new Map();
        // Map of player cursors
        this.labels = new Map();
        // Map of building labels
        
        this.hoveredTile = null;
        this.cameraPos = { x: 0, y: 0, z: 0 };
        this.cameraZoom = 1; // Re-introduced for proper orthographic zoom
        
        this.TILE_SIZE = 2;
        this.VIEW_DISTANCE = 50;
    }
    
    init() {
        this.canvas = document.getElementById('gameCanvas');
        // Create scene
        this.scene = new THREE.Scene();
        this.scene.background = new THREE.Color(0x87CEEB);
        // Sky blue
        
        // Create camera
        this.camera = new THREE.OrthographicCamera(
            -40, 40, 30, -30, 0.1, 1000
        );
        // Transport Tycoon style isometric view
        this.camera.position.set(50, 50, 50);
        this.camera.lookAt(0, 0, 0);
        
        // Create renderer
        this.renderer = new THREE.WebGLRenderer({ 
            canvas: this.canvas,
            antialias: true
        });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Soft shadows
        
        // Add lights
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.4); // Reduced ambient for better shadows
        this.scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0); // Increased intensity
        directionalLight.position.set(30, 40, 30); // Higher position for better shadows
        directionalLight.castShadow = true;
        
        // Configure shadow properties for better quality
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        directionalLight.shadow.camera.near = 0.5;
        directionalLight.shadow.camera.far = 200;
        
        // Set shadow camera bounds to cover the play area
        const shadowDistance = 50;
        directionalLight.shadow.camera.left = -shadowDistance;
        directionalLight.shadow.camera.right = shadowDistance;
        directionalLight.shadow.camera.top = shadowDistance;
        directionalLight.shadow.camera.bottom = -shadowDistance;
        
        directionalLight.shadow.bias = -0.0001; // Reduce shadow acne
        
        this.scene.add(directionalLight);
        // Create ground
        this.createGround();
        // Create grid
        this.createGrid();
        // Handle window resize
        window.addEventListener('resize', () => this.onResize());
    }
    
    createGround() {
        const geometry = new THREE.PlaneGeometry(1000, 1000);
        const material = new THREE.MeshLambertMaterial({ color: 0x228B22 }); // Forest green
        const ground = new THREE.Mesh(geometry, material);
        ground.rotation.x = -Math.PI / 2;
        ground.receiveShadow = true;
        this.scene.add(ground);
    }
    
    createGrid() {
        const gridGroup = new THREE.Group();
        const gridSize = 200; // Grid extends from -100 to +100
        const divisions = gridSize / this.TILE_SIZE; // Number of divisions
        
        // Create grid lines material - subtle gray
        const gridMaterial = new THREE.LineBasicMaterial({ 
            color: 0x666666,
            transparent: true,
            opacity: 0.3
        });
        
        // Create vertical lines (parallel to Z axis)
        // Offset by half tile size so grid squares are centered on buildings
        for (let i = -divisions/2; i <= divisions/2; i++) {
            const geometry = new THREE.BufferGeometry();
            const x = (i * this.TILE_SIZE) - (this.TILE_SIZE / 2);
            const vertices = new Float32Array([
                x, 0.02, -gridSize/2,  // Start point
                x, 0.02, gridSize/2    // End point
            ]);
            geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
            const line = new THREE.Line(geometry, gridMaterial);
            gridGroup.add(line);
        }
        
        // Create horizontal lines (parallel to X axis)
        // Offset by half tile size so grid squares are centered on buildings
        for (let i = -divisions/2; i <= divisions/2; i++) {
            const geometry = new THREE.BufferGeometry();
            const z = (i * this.TILE_SIZE) - (this.TILE_SIZE / 2);
            const vertices = new Float32Array([
                -gridSize/2, 0.02, z,  // Start point
                gridSize/2, 0.02, z    // End point
            ]);
            geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
            const line = new THREE.Line(geometry, gridMaterial);
            gridGroup.add(line);
        }
        
        this.scene.add(gridGroup);
    }
    
    createTile(x, y, color = 0x90EE90) {
        const geometry = new THREE.PlaneGeometry(this.TILE_SIZE - 0.1, this.TILE_SIZE - 0.1);
        const material = new THREE.MeshBasicMaterial({ 
            color: color,
            transparent: true,
            opacity: 0.5
        });
        const tile = new THREE.Mesh(geometry, material);
        tile.position.set(x * this.TILE_SIZE, 0.01, y * this.TILE_SIZE);
        tile.rotation.x = -Math.PI / 2;
        tile.userData = { x, y };
        return tile;
    }
    
    createBuilding(buildingData) {
        const { type, x, y, owner_id, name } = buildingData;
        
        // Get player color for accents
        const playerColor = this.getPlayerColor(owner_id);
        
        // Determine building orientation based on adjacent roads
        const orientation = this.getBuildingOrientation(x, y, type);
        
        // Create building group
        const buildingGroup = new THREE.Group();
        buildingGroup.position.set(x * this.TILE_SIZE, 0, y * this.TILE_SIZE);
        buildingGroup.userData = { x, y, owner_id, type, name };
        
        // Add foundation/base for all non-road buildings
        if (type !== 'road') {
            const foundation = this.createTileFoundation();
            buildingGroup.add(foundation);
        }
        
        // Create building based on type
        let buildingMesh;
        if (type.includes('house')) {
            buildingMesh = this.createHouse(type, playerColor, orientation);
        } else if (type.includes('shop') || type === 'supermarket' || type === 'mall') {
            buildingMesh = this.createCommercialBuilding(type, playerColor, orientation);
        } else if (type.includes('factory')) {
            buildingMesh = this.createFactory(type, playerColor, orientation);
        } else if (type === 'road') {
            buildingMesh = this.createRoad();
        } else if (type === 'park' || type === 'plaza') {
            buildingMesh = this.createPark(type, playerColor);
        } else if (type === 'town_hall') {
            buildingMesh = this.createTownHall(playerColor, orientation);
        } else if (type === 'power_plant') {
            buildingMesh = this.createPowerPlant(playerColor, orientation);
        } else {
            // Fallback to simple building
            buildingMesh = this.createSimpleBuilding(2, 0x808080);
        }
        
        buildingGroup.add(buildingMesh);
        
        // Add name label if the building has a name
        if (name) {
            const label = this.createBuildingLabel(name, playerColor);
            buildingGroup.add(label);
        }
        
        return buildingGroup;
    }
    
    getPlayerColor(owner_id) {
        // Try to find the player color from game state or use default
        if (this.gameState && this.gameState.players && this.gameState.players[owner_id]) {
            const color = this.gameState.players[owner_id].color;
            return new THREE.Color(color);
        }
        return new THREE.Color(0xff6b6b); // Default reddish color
    }
    
    getBuildingOrientation(x, y, buildingType) {
        // Roads and parks don't need orientation
        if (buildingType === 'road' || buildingType === 'park' || buildingType === 'plaza') {
            return 0;
        }
        
        // Check adjacent tiles for roads
        const adjacentRoads = this.getAdjacentRoads(x, y);
        
        // If no roads, face south (default)
        if (adjacentRoads.length === 0) {
            return 0; // 0 = south, 90 = west, 180 = north, 270 = east
        }
        
        // Priority order: south, east, north, west
        // Buildings prefer to face south, then east, etc.
        const priorities = ['south', 'east', 'north', 'west'];
        
        for (const direction of priorities) {
            if (adjacentRoads.includes(direction)) {
                switch (direction) {
                    case 'south': return 0;   // Face south (positive Z)
                    case 'east': return 270;  // Face east (positive X) 
                    case 'north': return 180; // Face north (negative Z)
                    case 'west': return 90;   // Face west (negative X)
                }
            }
        }
        
        return 0; // Default to south
    }
    
    getAdjacentRoads(x, y) {
        const roads = [];
        if (!this.gameState || !this.gameState.buildings) return roads;
        
        const directions = [
            { dir: 'north', dx: 0, dy: -1 },
            { dir: 'south', dx: 0, dy: 1 },
            { dir: 'east', dx: 1, dy: 0 },
            { dir: 'west', dx: -1, dy: 0 }
        ];
        
        for (const { dir, dx, dy } of directions) {
            const checkX = x + dx;
            const checkY = y + dy;
            const key = `${checkX},${checkY}`;
            const building = this.gameState.buildings[key];
            
            if (building && building.type === 'road') {
                roads.push(dir);
            }
        }
        
        return roads;
    }
    
    createTileFoundation() {
        // Create a full tile-sized foundation with road color
        const geometry = new THREE.BoxGeometry(
            this.TILE_SIZE, 
            0.05, 
            this.TILE_SIZE
        );
        const material = new THREE.MeshLambertMaterial({ color: 0x2F4F4F }); // Same as road color
        const foundation = new THREE.Mesh(geometry, material);
        foundation.position.y = 0.025; // Half the foundation height
        foundation.castShadow = true;
        foundation.receiveShadow = true;
        return foundation;
    }
    
    createSimpleBuilding(height, color) {
        const geometry = new THREE.BoxGeometry(
            this.TILE_SIZE - 0.2, 
            height, 
            this.TILE_SIZE - 0.2
        );
        const material = new THREE.MeshLambertMaterial({ color: color });
        const building = new THREE.Mesh(geometry, material);
        building.position.y = height / 2;
        building.castShadow = true;
        building.receiveShadow = true;
        return building;
    }
    
    createHouse(type, playerColor, orientation = 0) {
        const group = new THREE.Group();
        
        // Determine house size and height
        let houseWidth = 1.4;
        let houseDepth = 1.2;
        let wallHeight = 1.5;
        let roofHeight = 0.8;
        
        if (type === 'medium_house') {
            houseWidth = 1.6;
            houseDepth = 1.4;
            wallHeight = 2.0;
            roofHeight = 1.0;
        } else if (type === 'large_house') {
            houseWidth = 1.7;
            houseDepth = 1.6;
            wallHeight = 2.5;
            roofHeight = 1.2;
        }
        
        // Main house body
        const wallGeometry = new THREE.BoxGeometry(houseWidth, wallHeight, houseDepth);
        const wallMaterial = new THREE.MeshLambertMaterial({ color: 0xf4f4f4 });
        const walls = new THREE.Mesh(wallGeometry, wallMaterial);
        walls.position.y = wallHeight / 2;
        walls.castShadow = true;
        walls.receiveShadow = true;
        group.add(walls);
        
        // Roof (triangular prism) - player color
        const roofGeometry = new THREE.CylinderGeometry(0, houseWidth * 0.8, roofHeight, 4);
        const roofMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const roof = new THREE.Mesh(roofGeometry, roofMaterial);
        roof.position.y = wallHeight + roofHeight / 2;
        roof.rotation.y = Math.PI / 4; // Rotate 45 degrees to make it diamond-shaped
        roof.castShadow = true;
        group.add(roof);
        
        // Door - position based on orientation (always faces road)
        const doorGeometry = new THREE.BoxGeometry(0.3, 0.6, 0.05);
        const doorMaterial = new THREE.MeshLambertMaterial({ color: 0x8b4513 });
        const door = new THREE.Mesh(doorGeometry, doorMaterial);
        
        // Position door based on orientation
        switch (orientation) {
            case 0: // Face south (positive Z)
                door.position.set(0, 0.3, houseDepth / 2 + 0.02);
                break;
            case 90: // Face west (negative X)
                door.position.set(-houseWidth / 2 - 0.02, 0.3, 0);
                door.rotation.y = Math.PI / 2;
                break;
            case 180: // Face north (negative Z)
                door.position.set(0, 0.3, -houseDepth / 2 - 0.02);
                door.rotation.y = Math.PI;
                break;
            case 270: // Face east (positive X)
                door.position.set(houseWidth / 2 + 0.02, 0.3, 0);
                door.rotation.y = -Math.PI / 2;
                break;
        }
        group.add(door);
        
        // Windows with player color frames
        const createWindow = (x, y, z) => {
            const windowGroup = new THREE.Group();
            
            // Window frame - player color
            const frameGeometry = new THREE.BoxGeometry(0.35, 0.35, 0.05);
            const frameMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
            const frame = new THREE.Mesh(frameGeometry, frameMaterial);
            windowGroup.add(frame);
            
            // Window glass
            const glassGeometry = new THREE.BoxGeometry(0.25, 0.25, 0.02);
            const glassMaterial = new THREE.MeshLambertMaterial({ 
                color: 0x87ceeb, 
                transparent: true, 
                opacity: 0.7 
            });
            const glass = new THREE.Mesh(glassGeometry, glassMaterial);
            glass.position.z = 0.01;
            windowGroup.add(glass);
            
            windowGroup.position.set(x, y, z);
            return windowGroup;
        };
        
        // Add windows - position based on orientation (front-facing)
        switch (orientation) {
            case 0: // Face south (positive Z)
                group.add(createWindow(-houseWidth/3, wallHeight/2, houseDepth/2 + 0.02));
                group.add(createWindow(houseWidth/3, wallHeight/2, houseDepth/2 + 0.02));
                break;
            case 90: // Face west (negative X)
                group.add(createWindow(-houseWidth/2 - 0.02, wallHeight/2, -houseDepth/3));
                group.add(createWindow(-houseWidth/2 - 0.02, wallHeight/2, houseDepth/3));
                break;
            case 180: // Face north (negative Z)
                group.add(createWindow(-houseWidth/3, wallHeight/2, -houseDepth/2 - 0.02));
                group.add(createWindow(houseWidth/3, wallHeight/2, -houseDepth/2 - 0.02));
                break;
            case 270: // Face east (positive X)
                group.add(createWindow(houseWidth/2 + 0.02, wallHeight/2, -houseDepth/3));
                group.add(createWindow(houseWidth/2 + 0.02, wallHeight/2, houseDepth/3));
                break;
        }
        
        // Chimney for medium and large houses
        if (type !== 'small_house') {
            const chimneyGeometry = new THREE.BoxGeometry(0.2, 0.6, 0.2);
            const chimneyMaterial = new THREE.MeshLambertMaterial({ color: 0x696969 });
            const chimney = new THREE.Mesh(chimneyGeometry, chimneyMaterial);
            chimney.position.set(houseWidth/3, wallHeight + roofHeight/2 + 0.3, -houseDepth/4);
            chimney.castShadow = true;
            group.add(chimney);
        }
        
        return group;
    }
    
    createCommercialBuilding(type, playerColor, orientation = 0) {
        const group = new THREE.Group();
        
        let width = 1.6;
        let height = 2.5;
        let depth = 1.4;
        let signColor = playerColor;
        
        if (type === 'supermarket') {
            width = 1.7;
            height = 3.0;
            depth = 1.6;
        } else if (type === 'mall') {
            width = 1.8;
            height = 3.5;
            depth = 1.7;
        }
        
        // Main building
        const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
        const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0xe6e6e6 });
        const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
        building.position.y = height / 2;
        building.castShadow = true;
        building.receiveShadow = true;
        group.add(building);
        
        // Storefront elements - position based on orientation
        const signGeometry = new THREE.BoxGeometry(width * 0.9, 0.3, 0.05);
        const signMaterial = new THREE.MeshLambertMaterial({ color: signColor });
        const sign = new THREE.Mesh(signGeometry, signMaterial);
        
        const windowGeometry = new THREE.BoxGeometry(width * 0.7, height * 0.4, 0.05);
        const windowMaterial = new THREE.MeshLambertMaterial({ 
            color: 0x4169e1, 
            transparent: true, 
            opacity: 0.6 
        });
        const windows = new THREE.Mesh(windowGeometry, windowMaterial);
        
        const doorGeometry = new THREE.BoxGeometry(0.4, 0.8, 0.05);
        const doorMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const door = new THREE.Mesh(doorGeometry, doorMaterial);
        
        // Position storefront based on orientation
        switch (orientation) {
            case 0: // Face south (positive Z)
                sign.position.set(0, height * 0.8, depth / 2 + 0.02);
                windows.position.set(0, height * 0.3, depth / 2 + 0.01);
                door.position.set(0, 0.4, depth / 2 + 0.02);
                break;
            case 90: // Face west (negative X)
                sign.position.set(-width / 2 - 0.02, height * 0.8, 0);
                sign.rotation.y = Math.PI / 2;
                windows.position.set(-width / 2 - 0.01, height * 0.3, 0);
                windows.rotation.y = Math.PI / 2;
                door.position.set(-width / 2 - 0.02, 0.4, 0);
                door.rotation.y = Math.PI / 2;
                break;
            case 180: // Face north (negative Z)
                sign.position.set(0, height * 0.8, -depth / 2 - 0.02);
                sign.rotation.y = Math.PI;
                windows.position.set(0, height * 0.3, -depth / 2 - 0.01);
                windows.rotation.y = Math.PI;
                door.position.set(0, 0.4, -depth / 2 - 0.02);
                door.rotation.y = Math.PI;
                break;
            case 270: // Face east (positive X)
                sign.position.set(width / 2 + 0.02, height * 0.8, 0);
                sign.rotation.y = -Math.PI / 2;
                windows.position.set(width / 2 + 0.01, height * 0.3, 0);
                windows.rotation.y = -Math.PI / 2;
                door.position.set(width / 2 + 0.02, 0.4, 0);
                door.rotation.y = -Math.PI / 2;
                break;
        }
        
        group.add(sign);
        group.add(windows);
        group.add(door);
        
        // Air conditioning units on roof for larger buildings
        if (type === 'supermarket' || type === 'mall') {
            const acGeometry = new THREE.BoxGeometry(0.4, 0.2, 0.3);
            const acMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
            const ac1 = new THREE.Mesh(acGeometry, acMaterial);
            ac1.position.set(-width/3, height + 0.1, 0);
            group.add(ac1);
            
            const ac2 = new THREE.Mesh(acGeometry, acMaterial);
            ac2.position.set(width/3, height + 0.1, 0);
            group.add(ac2);
        }
        
        return group;
    }
    
    createFactory(type, playerColor, orientation = 0) {
        const group = new THREE.Group();
        
        let width = 1.6;
        let height = 3.5;
        let depth = 1.5;
        
        if (type === 'large_factory') {
            width = 1.8;
            height = 4.5;
            depth = 1.7;
        }
        
        // Main factory building
        const buildingGeometry = new THREE.BoxGeometry(width, height, depth);
        const buildingMaterial = new THREE.MeshLambertMaterial({ color: 0x696969 });
        const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
        building.position.y = height / 2;
        building.castShadow = true;
        building.receiveShadow = true;
        group.add(building);
        
        // Smokestack - player color stripe
        const stackHeight = height + 1.5;
        const stackGeometry = new THREE.CylinderGeometry(0.1, 0.15, stackHeight);
        const stackMaterial = new THREE.MeshLambertMaterial({ color: 0x404040 });
        const stack = new THREE.Mesh(stackGeometry, stackMaterial);
        stack.position.set(width/3, stackHeight/2, -depth/4);
        stack.castShadow = true;
        group.add(stack);
        
        // Player color stripe on smokestack
        const stripeGeometry = new THREE.CylinderGeometry(0.12, 0.16, 0.3);
        const stripeMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial);
        stripe.position.set(width/3, stackHeight * 0.7, -depth/4);
        group.add(stripe);
        
        // Factory windows
        const createFactoryWindow = (x, y, z) => {
            const windowGeometry = new THREE.BoxGeometry(0.3, 0.4, 0.05);
            const windowMaterial = new THREE.MeshLambertMaterial({ 
                color: 0xffff88, 
                transparent: true, 
                opacity: 0.8 
            });
            const window = new THREE.Mesh(windowGeometry, windowMaterial);
            window.position.set(x, y, z);
            return window;
        };
        
        // Add multiple windows
        for (let i = -1; i <= 1; i++) {
            for (let j = 1; j <= 2; j++) {
                group.add(createFactoryWindow(i * width/3, j * height/3, depth/2 + 0.01));
            }
        }
        
        // Loading dock - player color
        const dockGeometry = new THREE.BoxGeometry(0.6, 0.1, 0.4);
        const dockMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const dock = new THREE.Mesh(dockGeometry, dockMaterial);
        dock.position.set(-width/3, 0.05, depth/2 + 0.2);
        group.add(dock);
        
        return group;
    }
    
    createRoad() {
        const geometry = new THREE.BoxGeometry(
            this.TILE_SIZE, 
            0.1, 
            this.TILE_SIZE
        );
        const material = new THREE.MeshLambertMaterial({ color: 0x2F4F4F });
        const road = new THREE.Mesh(geometry, material);
        road.position.y = 0.05;
        road.castShadow = true;
        road.receiveShadow = true;
        
        return road;
    }
    
    createPark(type, playerColor) {
        const group = new THREE.Group();
        
        // Base green area
        const baseGeometry = new THREE.BoxGeometry(this.TILE_SIZE - 0.1, 0.1, this.TILE_SIZE - 0.1);
        const baseMaterial = new THREE.MeshLambertMaterial({ color: 0x32cd32 });
        const base = new THREE.Mesh(baseGeometry, baseMaterial);
        base.position.y = 0.05;
        base.receiveShadow = true;
        group.add(base);
        
        if (type === 'park') {
            // Add trees
            const createTree = (x, z) => {
                const treeGroup = new THREE.Group();
                
                // Trunk
                const trunkGeometry = new THREE.CylinderGeometry(0.05, 0.08, 0.5);
                const trunkMaterial = new THREE.MeshLambertMaterial({ color: 0x8b4513 });
                const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
                trunk.position.y = 0.25;
                trunk.castShadow = true;
                treeGroup.add(trunk);
                
                // Leaves - player color accent
                const leavesGeometry = new THREE.SphereGeometry(0.3, 8, 6);
                const leavesMaterial = new THREE.MeshLambertMaterial({ 
                    color: playerColor.clone().lerp(new THREE.Color(0x228b22), 0.7)
                });
                const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
                leaves.position.y = 0.6;
                leaves.castShadow = true;
                treeGroup.add(leaves);
                
                treeGroup.position.set(x, 0, z);
                return treeGroup;
            };
            
            group.add(createTree(-0.4, -0.4));
            group.add(createTree(0.4, 0.4));
        } else { // plaza
            // Add fountain with player color accents
            const fountainGeometry = new THREE.CylinderGeometry(0.3, 0.4, 0.3);
            const fountainMaterial = new THREE.MeshLambertMaterial({ color: 0xd3d3d3 });
            const fountain = new THREE.Mesh(fountainGeometry, fountainMaterial);
            fountain.position.y = 0.25;
            fountain.castShadow = true;
            group.add(fountain);
            
            // Water with player color tint
            const waterGeometry = new THREE.CylinderGeometry(0.25, 0.25, 0.05);
            const waterMaterial = new THREE.MeshLambertMaterial({ 
                color: playerColor.clone().lerp(new THREE.Color(0x4169e1), 0.5),
                transparent: true,
                opacity: 0.7
            });
            const water = new THREE.Mesh(waterGeometry, waterMaterial);
            water.position.y = 0.35;
            group.add(water);
        }
        
        return group;
    }
    
    createTownHall(playerColor, orientation = 0) {
        const group = new THREE.Group();
        
        // Main building
        const mainGeometry = new THREE.BoxGeometry(1.7, 4.0, 1.6);
        const mainMaterial = new THREE.MeshLambertMaterial({ color: 0xf5f5dc });
        const main = new THREE.Mesh(mainGeometry, mainMaterial);
        main.position.y = 2.0;
        main.castShadow = true;
        main.receiveShadow = true;
        group.add(main);
        
        // Clock tower
        const towerGeometry = new THREE.BoxGeometry(0.6, 1.5, 0.6);
        const towerMaterial = new THREE.MeshLambertMaterial({ color: 0xe6e6e6 });
        const tower = new THREE.Mesh(towerGeometry, towerMaterial);
        tower.position.y = 4.75;
        tower.castShadow = true;
        group.add(tower);
        
        // Clock face - player color
        const clockGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.05);
        const clockMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const clock = new THREE.Mesh(clockGeometry, clockMaterial);
        clock.position.set(0, 4.5, 0.3);
        clock.rotation.x = Math.PI / 2;
        group.add(clock);
        
        // Flag pole with player color flag
        const poleGeometry = new THREE.CylinderGeometry(0.02, 0.02, 1.0);
        const poleMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
        const pole = new THREE.Mesh(poleGeometry, poleMaterial);
        pole.position.set(0.6, 5.5, 0);
        group.add(pole);
        
        const flagGeometry = new THREE.PlaneGeometry(0.3, 0.2);
        const flagMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const flag = new THREE.Mesh(flagGeometry, flagMaterial);
        flag.position.set(0.75, 5.7, 0);
        group.add(flag);
        
        // Steps with player color carpet
        const stepsGeometry = new THREE.BoxGeometry(1.8, 0.2, 0.6);
        const stepsMaterial = new THREE.MeshLambertMaterial({ color: 0xd3d3d3 });
        const steps = new THREE.Mesh(stepsGeometry, stepsMaterial);
        steps.position.set(0, 0.1, 0.8);
        group.add(steps);
        
        const carpetGeometry = new THREE.BoxGeometry(0.4, 0.01, 0.6);
        const carpetMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const carpet = new THREE.Mesh(carpetGeometry, carpetMaterial);
        carpet.position.set(0, 0.21, 0.8);
        group.add(carpet);
        
        return group;
    }
    
    createPowerPlant(playerColor, orientation = 0) {
        const group = new THREE.Group();
        
        // Main building
        const mainGeometry = new THREE.BoxGeometry(1.8, 3.0, 1.7);
        const mainMaterial = new THREE.MeshLambertMaterial({ color: 0x555555 });
        const main = new THREE.Mesh(mainGeometry, mainMaterial);
        main.position.y = 1.5;
        main.castShadow = true;
        main.receiveShadow = true;
        group.add(main);
        
        // Cooling towers
        const createCoolingTower = (x, z) => {
            const towerGeometry = new THREE.CylinderGeometry(0.2, 0.3, 4.0);
            const towerMaterial = new THREE.MeshLambertMaterial({ color: 0x888888 });
            const tower = new THREE.Mesh(towerGeometry, towerMaterial);
            tower.position.set(x, 2.0, z);
            tower.castShadow = true;
            
            // Player color stripe on tower
            const stripeGeometry = new THREE.CylinderGeometry(0.22, 0.32, 0.3);
            const stripeMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
            const stripe = new THREE.Mesh(stripeGeometry, stripeMaterial);
            stripe.position.set(x, 3.0, z);
            group.add(stripe);
            
            return tower;
        };
        
        group.add(createCoolingTower(-0.5, -0.3));
        group.add(createCoolingTower(0.5, -0.3));
        
        // Control room with player color accents
        const controlGeometry = new THREE.BoxGeometry(0.8, 1.0, 0.6);
        const controlMaterial = new THREE.MeshLambertMaterial({ color: 0x777777 });
        const control = new THREE.Mesh(controlGeometry, controlMaterial);
        control.position.set(0, 3.5, 0.4);
        control.castShadow = true;
        group.add(control);
        
        // Control room windows - player color frames
        const windowGeometry = new THREE.BoxGeometry(0.6, 0.3, 0.05);
        const windowMaterial = new THREE.MeshLambertMaterial({ color: playerColor });
        const windows = new THREE.Mesh(windowGeometry, windowMaterial);
        windows.position.set(0, 3.5, 0.7);
        group.add(windows);
        
        // Power lines
        const lineGeometry = new THREE.CylinderGeometry(0.01, 0.01, 2.0);
        const lineMaterial = new THREE.MeshLambertMaterial({ color: 0x000000 });
        const line = new THREE.Mesh(lineGeometry, lineMaterial);
        line.position.set(0.8, 4.0, 0);
        line.rotation.z = Math.PI / 6;
        group.add(line);
        
        return group;
    }
    
    createBuildingLabel(name, playerColor) {
        // Create canvas for text rendering
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        
        // Much larger canvas for better visibility
        canvas.width = 1024;
        canvas.height = 256;
        
        // Clear background
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Much bigger text for better visibility
        const fontSize = 120;
        ctx.font = `bold ${fontSize}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Draw colored background
        const padding = 32;
        const textWidth = ctx.measureText(name).width;
        const bgWidth = Math.max(textWidth + padding * 2, 300);
        const bgHeight = fontSize + padding * 2;
        
        // Fill with player color
        ctx.fillStyle = `rgb(${Math.floor(playerColor.r * 255)}, ${Math.floor(playerColor.g * 255)}, ${Math.floor(playerColor.b * 255)})`;
        ctx.fillRect(
            (canvas.width - bgWidth) / 2,
            (canvas.height - bgHeight) / 2,
            bgWidth,
            bgHeight
        );
        
        // Draw black text
        ctx.fillStyle = 'black';
        ctx.fillText(name, canvas.width / 2, canvas.height / 2);
        
        // Create texture and material
        const texture = new THREE.CanvasTexture(canvas);
        const material = new THREE.MeshBasicMaterial({ 
            map: texture,
            transparent: true,
            side: THREE.DoubleSide,
            depthTest: false // Always render on top
        });
        
        // Much larger geometry - 2x bigger than before
        const geometry = new THREE.PlaneGeometry(8, 2);
        const labelMesh = new THREE.Mesh(geometry, material);
        
        // Position above building
        labelMesh.position.set(0, 4.5, 0);
        
        // Make labels always face camera (billboard effect) and appear horizontal
        // This will be updated in the render loop to always face the camera
        labelMesh.userData.isBillboard = true;
        
        // Initial rotation to face the isometric camera
        // Camera is positioned at (cameraPos.x + 50, 50, cameraPos.z + 50)
        // We want labels to face northeast towards camera but remain horizontal
        labelMesh.rotation.y = -Math.PI / 4; // Face camera direction
        labelMesh.rotation.x = 0; // Keep horizontal (no tilt)
        
        // Mark as building label
        labelMesh.userData.isBuildingLabel = true;
        
        return labelMesh;
    }
    
    createCursor(playerId, color) {
        const geometry = new THREE.RingGeometry(0.5, 0.7, 16);
        const material = new THREE.MeshBasicMaterial({ 
            color: color,
            side: THREE.DoubleSide
        });
        const cursor = new THREE.Mesh(geometry, material);
        cursor.rotation.x = -Math.PI / 2;
        cursor.position.y = 0.02;
        return cursor;
    }
    
    updateGameState(gameState) {
        // Store game state for player color access
        this.gameState = gameState;
        
        // Clear existing buildings
        this.buildings.forEach(mesh => this.scene.remove(mesh));
        this.buildings.clear();
        
        // Add all buildings
        Object.values(gameState.buildings).forEach(building => {
            this.addBuilding(building);
        });
    }
    
    addBuilding(buildingData) {
        const key = `${buildingData.x},${buildingData.y}`;
        // Remove existing building at this position
        if (this.buildings.has(key)) {
            this.scene.remove(this.buildings.get(key));
        }
        
        // Create and add new building
        const building = this.createBuilding(buildingData);
        this.buildings.set(key, building);
        this.scene.add(building);
        
        // If this is a road, update adjacent building orientations
        if (buildingData.type === 'road') {
            this.updateAdjacentBuildingOrientations(buildingData.x, buildingData.y);
        }
    }
    
    updateAdjacentBuildingOrientations(roadX, roadY) {
        if (!this.gameState || !this.gameState.buildings) return;
        
        const directions = [
            { dx: 0, dy: -1 }, // North
            { dx: 0, dy: 1 },  // South
            { dx: 1, dy: 0 },  // East
            { dx: -1, dy: 0 }  // West
        ];
        
        for (const { dx, dy } of directions) {
            const checkX = roadX + dx;
            const checkY = roadY + dy;
            const key = `${checkX},${checkY}`;
            const buildingData = this.gameState.buildings[key];
            
            if (buildingData && buildingData.type !== 'road') {
                // Rebuild this building with new orientation
                this.removeBuilding(checkX, checkY);
                this.addBuilding(buildingData);
            }
        }
    }
    
    removeBuilding(x, y) {
        const key = `${x},${y}`;
        if (this.buildings.has(key)) {
            this.scene.remove(this.buildings.get(key));
            this.buildings.delete(key);
        }
    }
    
    updateBuildingName(x, y, name) {
        const key = `${x},${y}`;
        const building = this.buildings.get(key);
        
        if (!building) {
            return;
        }
        
        // Update building userData
        building.userData.name = name;
        
        // Remove all existing labels
        const labelsToRemove = [];
        building.children.forEach((child, index) => {
            if (child.userData && child.userData.isBuildingLabel) {
                labelsToRemove.push(child);
            }
        });
        
        labelsToRemove.forEach(label => {
            building.remove(label);
            // Clean up resources
            if (label.material) {
                if (label.material.map) label.material.map.dispose();
                label.material.dispose();
            }
            if (label.geometry) label.geometry.dispose();
        });
        
        // Add new label if name provided
        if (name && name.trim()) {
            const playerColor = this.getPlayerColor(building.userData.owner_id);
            const newLabel = this.createBuildingLabel(name.trim(), playerColor);
            building.add(newLabel);
        }
    }
    
    updateCursor(playerId, x, y) {
        if (!this.cursors.has(playerId)) {
            const cursor = this.createCursor(playerId, 0xff0000);
            this.cursors.set(playerId, cursor);
            this.scene.add(cursor);
        }
        
        const cursor = this.cursors.get(playerId);
        cursor.position.x = x * this.TILE_SIZE;
        cursor.position.z = y * this.TILE_SIZE;
    }
    
    removeCursor(playerId) {
        if (this.cursors.has(playerId)) {
            this.scene.remove(this.cursors.get(playerId));
            this.cursors.delete(playerId);
        }
    }
    
    highlightTile(x, y) {
        // Remove previous highlight
        if (this.hoveredTile) {
            this.scene.remove(this.hoveredTile);
            this.hoveredTile = null;
        }
        
        // Create new highlight
        if (x !== null && y !== null) {
            this.hoveredTile = this.createTile(x, y, 0xFFFF00);
            this.scene.add(this.hoveredTile);
        }
    }
    
    screenToWorld(screenX, screenY) {
        const rect = this.canvas.getBoundingClientRect();
        const x = ((screenX - rect.left) / rect.width) * 2 - 1;
        const y = -((screenY - rect.top) / rect.height) * 2 + 1;
        
        const raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera);
        
        // Raycast to ground plane
        const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
        const intersection = new THREE.Vector3();
        raycaster.ray.intersectPlane(plane, intersection);
        
        return {
            x: Math.floor(intersection.x / this.TILE_SIZE),
            y: Math.floor(intersection.z / this.TILE_SIZE)
        };
    }
    
    moveCamera(dx, dy) {
        this.cameraPos.x += dx;
        this.cameraPos.z += dy;
        this.updateCameraPosition();
    }
    
    zoomCamera(delta) {
        // Adjust the zoom property. A positive delta (scroll up) increases zoom.
        this.cameraZoom += delta;
        // Clamp the zoom level to a reasonable range
        this.cameraZoom = Math.max(0.5, Math.min(2.5, this.cameraZoom));

        // Apply the zoom to the camera and update its projection matrix
        this.camera.zoom = this.cameraZoom;
        this.camera.updateProjectionMatrix();
    }
    
    updateCameraPosition() {
        // Transport Tycoon style isometric positioning
        this.camera.position.set(
            this.cameraPos.x + 50, 
            50, 
            this.cameraPos.z + 50
        );
        this.camera.lookAt(
            this.cameraPos.x, 
            0, 
            this.cameraPos.z
        );
    }
    
    startRenderLoop() {
        const animate = () => {
            requestAnimationFrame(animate);
            
            // Update billboard labels to face camera
            this.updateBillboards();
            
            this.renderer.render(this.scene, this.camera);
        };
        animate();
    }
    
    updateBillboards() {
        // Make every billboard label face the camera horizontally (yaw only)
        const camPos = this.camera.position;
        this.buildings.forEach(building => {
            building.traverse(child => {
                if (child.userData && child.userData.isBillboard) {
                    // Get world position of label
                    const worldPos = new THREE.Vector3();
                    child.getWorldPosition(worldPos);

                    // Compute angle to camera on XZ plane
                    const dx = camPos.x - worldPos.x;
                    const dz = camPos.z - worldPos.z;
                    const angle = Math.atan2(dx, dz); // radians

                    // Apply rotation: yaw = angle, keep flat (no pitch/roll)
                    child.rotation.set(0, angle, 0);
                }
            });
        });
    }
    
    onResize() {
        const aspect = window.innerWidth / window.innerHeight;
        this.camera.left = -40 * aspect;
        this.camera.right = 40 * aspect;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    }
}