add OOP for this code - "const canvas = document.getElementById('renderCanvas'); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

const buildings = []; // Array to track created buildings
const neutralVillages = []; // Array to track neutral villages
let resources = {
    gold: 100,
    wood: 100,
    food: 0
};

let soldiersCount = 0; // Track the number of hired soldiers

// Resource production rates
const productionRates = {
    factory: { foodPerMinute: 10, cost: { gold: 30, wood: 60 } },
    barrack: { foodPerMinute: 0, cost: { gold: 40, wood: 45 } }
};

// Soldier cost
const soldierCost = { gold: 20, wood: 10 };

// Neutral village properties
const villageCost = { gold: 30, wood: 20 }; // Cost to capture a village

// Create a scene
const createScene = function () {
    const scene = new BABYLON.Scene(engine);
    
    // Create and position a camera
    const camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2.5, 15, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);
    
    // Add a light to the scene
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Create a tile ground
    const tileGroundSize = { width: 10, height: 10 };
    const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: tileGroundSize.width * 2, height: tileGroundSize.height * 2 }, scene);
    const groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);
    groundMaterial.diffuseColor = new BABYLON.Color3(0.8, 0.8, 0.8);
    ground.material = groundMaterial;

    // Create a few neutral villages
    createNeutralVillages(scene);

    return scene;
};

// Create neutral villages in the scene
const createNeutralVillages = (scene) => {
    for (let i = 0; i < 3; i++) {
        const village = BABYLON.MeshBuilder.CreateBox(`village${i}`, { width: 2, height: 1, depth: 2 }, scene);
        village.position.y = 0.5; // Position above ground
        village.position.x = Math.random() * 20 - 10; // Random X position
        village.position.z = Math.random() * 20 - 10; // Random Z position

        // Add click event for capturing village
        village.actionManager = new BABYLON.ActionManager(scene);
        village.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, () => {
            captureVillage(i);
        }));

        neutralVillages.push(village);
    }
};

// Check for overlaps
const checkOverlap = (newBuilding) => {
    for (const building of buildings) {
        const overlap = BABYLON.Mesh.CheckCollision(newBuilding, building);
        if (overlap) {
            return true; // Return true if there is an overlap
        }
    }
    return false; // No overlap found
};

// Create buildings based on selected type
const createBuilding = (type, width, height, depth, positionX) => {
    const building = BABYLON.MeshBuilder.CreateBox(type, { width, height, depth }, scene);
    building.position.y = height / 2; // Elevate to sit on the ground
    building.position.x = positionX; 
    building.position.z = 0; // Center on Z

    // Check for overlaps
    if (checkOverlap(building)) {
        building.dispose(); // Remove building if it overlaps
        console.log(`Building ${type} overlaps with another building. It has been removed.`);
    } else {
        const canAfford = checkAffordability(type);
        if (canAfford) {
            deductResources(type);
            buildings.push(building); // Add building to the array only if affordable
            
            // Start production for the factory, if it's built
            if (type === "factory") {
                setInterval(() => produceFood(), 60000); // Produce food every minute
            } 
        } else {
            building.dispose(); // Remove building if not affordable
            console.log(`Not enough resources to build ${type}.`);
        }
    }
};

// Hires soldiers
const hireSoldier = () => {
    if (resources.gold >= soldierCost.gold && resources.wood >= soldierCost.wood) {
        resources.gold -= soldierCost.gold;
        resources.wood -= soldierCost.wood;
        soldiersCount++;
        updateResourceDisplay();
        console.log(`Soldier hired! Total soldiers: ${soldiersCount}`);
        document.getElementById('soldiersCount').textContent = soldiersCount;
    } else {
        console.log("Not enough resources to hire a soldier.");
    }
};

// Capture a neutral village
const captureVillage = (villageIndex) => {
    if (soldiersCount > 0 && neutralVillages[villageIndex]) {
        resources.gold += villageCost.gold; // Give resources for capturing
        resources.wood += villageCost.wood;
        neutralVillages[villageIndex].dispose(); // Remove the village from the scene
        neutralVillages.splice(villageIndex, 1); // Remove the village object from the array
        console.log(`Village captured! New resources: Gold - ${resources.gold}, Wood - ${resources.wood}`);
        updateResourceDisplay();
    } else {
        console.log("Not enough soldiers to capture a village or village does not exist.");
    }
};

// Check affordability for buildings
const checkAffordability = (type) => {
    const cost = productionRates[type].cost;
    return resources.gold >= cost.gold && resources.wood >= cost.wood;
};

// Deduct resources
const deductResources = (type) => {
    const cost = productionRates[type].cost;
    resources.gold -= cost.gold;
    resources.wood -= cost.wood;
    updateResourceDisplay();
};

const produceFood = () => {
    resources.food += productionRates.factory.foodPerMinute; // Only the factory produces food
    updateResourceDisplay();
};

// Update resource display
const updateResourceDisplay = () => {
    document.getElementById('gold').textContent = resources.gold;
    document.getElementById('wood').textContent = resources.wood;
    document.getElementById('foodProduced').textContent = resources.food;
    document.getElementById('soldiersCount').textContent = soldiersCount;
};

// Event listeners for UI buttons
document.getElementById("startGame").onclick = () => {
    document.getElementById("mainMenu").style.display = "none";
    document.getElementById("constructionMenu").style.display = "block";
};

document.getElementById("buildBarrack").onclick = () => {
    createBuilding("barrack", 4, 4, 3, Math.random() * 10 - 5);
};

document.getElementById("buildFactory").onclick = () => {
    createBuilding("factory", 4, 6, 3, Math.random() * 10 - 5);
};

document.getElementById("hireSoldier").onclick = () => {
    hireSoldier();
};

// Return to Main Menu
document.getElementById("backToMain").onclick = () => {
    document.getElementById("constructionMenu").style.display = "none";
    document.getElementById("mainMenu").style.display = "block";
};

// Tips Display
document.getElementById("showTips").onclick = () => {
    document.getElementById("tips").style.display = "block";
};

document.getElementById("closeTips").onclick = () => {
    document.getElementById("tips").style.display = "none";
};

// Help Display
document.getElementById("showHelp").onclick = () => {
    document.getElementById("help").style.display = "block";
};

document.getElementById("closeHelp").onclick = () => {
    document.getElementById("help").style.display = "none";
};

// Task Window
document.getElementById("showTasks").onclick = () => {
    document.getElementById("taskWindow").style.display = "block";
};

document.getElementById("closeTasks").onclick = () => {
    document.getElementById("taskWindow").style.display = "none";
};

// Initialize the scene
const scene = createScene();

// Render loop
engine.runRenderLoop(() => {
    scene.render();
});

// Resize the engine on window resize
window.addEventListener('resize', () => {
    engine.resize();
});"