допиши код, добавь противника бота , который строит форты улучшает здания , захватывает теретории, проработай механику битвы вот мой код игры <!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Гексагональная Стратегия</title>
    <link rel="stylesheet" href="styles.css">
  <style>/* styles.css */

/* Общие стили */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #2c3e50;
    color: #ecf0f1;
}

#gameContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Верхняя Панель */
#topPanel {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #34495e;
    padding: 10px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.resource {
    margin: 0 15px;
    font-size: 16px;
}

/* Основное Игровое Поле */
#mainGame {
    position: relative;
    width: 1200px;
    height: 800px;
    border: 2px solid #34495e;
    background-color: #1abc9c;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 10px;
}

/* Мини-Карта */
#miniMap {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid #ecf0f1;
    background-color: #95a5a6;
    border-radius: 5px;
}

/* Нижняя Панель */
#bottomPanel {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    background-color: #34495e;
    padding: 15px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
    border-radius: 0 0 10px 10px;
    margin-top: 10px;
}

.controls, .technologies {
    width: 48%;
}

.controls button, .technologies button {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: none;
    border-radius: 5px;
    background-color: #1abc9c;
    color: #2c3e50;
    cursor: pointer;
    font-size: 14px;
}

.controls button:hover, .technologies button:hover {
    background-color: #16a085;
}

.technologies h3 {
    text-align: center;
    margin-top: 10px;
}

.technologies ul {
    list-style: none;
    padding: 0;
}

.technologies li {
    margin-bottom: 10px;
}

.technologies span {
    display: inline-block;
    width: 250px;
}

/* Лог Событий */
#log {
    width: 1200px;
    background-color: #34495e;
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

#log h3 {
    text-align: center;
    margin-top: 0;
}

#log ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#log li {
    margin-bottom: 5px;
    font-size: 14px;
}

/* Контекстное Меню */
#contextMenu {
    position: absolute;
    display: none;
    background-color: #34495e;
    border: 1px solid #2c3e50;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
    z-index: 1000;
    width: 200px;
}

#contextMenu ul {
    list-style: none;
    padding: 5px 0;
    margin: 0;
}

#contextMenu li {
    padding: 8px 12px;
    cursor: pointer;
    color: #ecf0f1;
}

#contextMenu li:hover {
    background-color: #2c3e50;
}

/* Модальное Окно */
.modal {
    display: none; /* Скрыто по умолчанию */
    position: fixed; /* Остаётся на месте */
    z-index: 2000; /* Сверху остальных элементов */
    left: 0;
    top: 0;
    width: 100%; /* Ширина экрана */
    height: 100%; /* Высота экрана */
    overflow: auto; /* Включить прокрутку если необходимо */
    background-color: rgba(0,0,0,0.5); /* Чёрный фон с прозрачностью */
}

.modal-content {
    background-color: #34495e;
    margin: 15% auto; /* 15% сверху и центровка */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 8px;
    width: 300px; /* Ширина модального окна */
    color: #ecf0f1;
}

.close {
    color: #ecf0f1;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #f1c40f;
    text-decoration: none;
}

/* Всплывающая Подсказка */
.tooltip {
    position: absolute;
    display: none;
    background-color: rgba(44, 62, 80, 0.9);
    color: #ecf0f1;
    padding: 5px 10px;
    border-radius: 4px;
    pointer-events: none;
    font-size: 12px;
    z-index: 1000;
}</style>
</head>
<body>
    <div id="gameContainer">
        <!-- Верхняя Панель с Ресурсами -->
        <div id="topPanel">
            <div class="resource" id="wood">Дерево: 0</div>
            <div class="resource" id="iron">Железо: 0</div>
            <div class="resource" id="food">Еда: 0</div>
            <div class="resource" id="copper">Медь: 0</div>
            <div class="resource" id="gold">Золото: 0</div>
            <div class="resource" id="population">Жители: 1</div>
            <div class="resource" id="castleLevel">Уровень Замка: 1</div>
        </div>

        <!-- Основное Игровое Поле и Мини-Карта -->
        <div id="mainGame">
            <canvas id="gameCanvas" width="1200" height="800"></canvas>
            <!-- Мини-Карта -->
            <canvas id="miniMap" width="200" height="200"></canvas>
        </div>

        <!-- Нижняя Панель с Улучшениями и Технологиями -->
        <div id="bottomPanel">
            <div class="controls">
                <button id="upgradeCastle">Улучшить Замок (Стоимость: 100 золота)</button>
                <button id="buildBarracks">Построить Казарму (Стоимость: 150 дерева, 100 железа)</button>
                <button id="saveGame">Сохранить игру</button>
                <button id="loadGame">Загрузить игру</button>
            </div>
            <div class="technologies">
                <h3>Технологии</h3>
                <ul>
                    <li>
                        <span>Лесопилка (+5 Дерева/сек)</span>
                        <button id="upgradeWood">Улучшить (50 Дерева)</button>
                    </li>
                    <li>
                        <span>Железная Шахта (+5 Железа/сек)</span>
                        <button id="upgradeIron">Улучшить (50 Железа)</button>
                    </li>
                    <li>
                        <span>Ферма (+5 Еды/сек)</span>
                        <button id="upgradeFood">Улучшить (50 Еды)</button>
                    </li>
                    <li>
                        <span>Медная Шахта (+5 Меди/сек)</span>
                        <button id="upgradeCopper">Улучшить (50 Меди)</button>
                    </li>
                    <li>
                        <span>Золотая Шахта (+5 Золота/сек)</span>
                        <button id="upgradeGold">Улучшить (50 Золота)</button>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Лог Событий -->
        <div id="log">
            <h3>Лог Событий</h3>
            <ul id="logList"></ul>
        </div>

        <!-- Контекстное Меню -->
        <div id="contextMenu">
            <ul id="contextMenuList">
                <!-- Пункты меню будут добавляться динамически через JS -->
            </ul>
        </div>

        <!-- Модальное Окно для Покупки Войск -->
        <div id="troopModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <h2>Разместить Войска</h2>
                <label for="troopAmount">Количество войск:</label>
                <input type="number" id="troopAmount" min="1" value="1">
                <button id="buyTroops">Купить Войска</button>
            </div>
        </div>

        <!-- Всплывающая Подсказка -->
        <div class="tooltip" id="tooltip"></div>
    </div>

    <!-- Подключение игрового скрипта. Убедитесь, что он подключен только один раз. -->
    <script >// game.js
// Использование ES6 модулей

class ResourceManager {
    constructor(ui) {
        this.resources = {
            wood: 500,
            iron: 300,
            food: 200,
            copper: 100,
            gold: 500
        };
        this.ui = ui;
    }

    add(resource, amount) {
        if (this.resources.hasOwnProperty(resource)) {
            this.resources[resource] += amount;
            this.ui.updateResource(resource, this.resources[resource]);
        }
    }

    subtract(resource, amount) {
        if (this.resources.hasOwnProperty(resource) && this.resources[resource] >= amount) {
            this.resources[resource] -= amount;
            this.ui.updateResource(resource, this.resources[resource]);
            return true;
        }
        return false;
    }

    get(resource) {
        return this.resources[resource] || 0;
    }

    getAll() {
        return { ...this.resources };
    }

    setAll(newResources) {
        this.resources = { ...newResources };
        this.ui.updateAllResources(this.resources);
    }
}

class Hex {
    constructor(row, col, x, y, size) {
        this.row = row;
        this.col = col;
        this.x = x;
        this.y = y;
        this.size = size;
        this.owned = false;
        this.captured = false;
        this.isCastle = false;
        this.hasFort = false;
        this.resources = this.generateRandomResources();
        this.troops = 0; // Количество войск на гексе
    }

    generateRandomResources() {
        // Генерация рандомных значений для ресурсов
        return {
            wood: (Math.random() * 5 + 1).toFixed(1),    // 1.0 - 6.0
            iron: (Math.random() * 5 + 1).toFixed(1),
            food: (Math.random() * 5 + 1).toFixed(1),
            copper: (Math.random() * 5 + 1).toFixed(1),
            gold: (Math.random() * 5 + 1).toFixed(1)
        };
    }

    draw(ctx) {
        const HEX_SIZE = this.size;
        const angle = Math.PI / 3;
        ctx.beginPath();
        for (let i = 0; i < 6; i++) {
            ctx.lineTo(
                this.x + HEX_SIZE * Math.cos(angle * i),
                this.y + HEX_SIZE * Math.sin(angle * i)
            );
        }
        ctx.closePath();
        if (this.isCastle) {
            ctx.fillStyle = '#e74c3c'; // Красный для замка
        } else if (this.hasFort) {
            ctx.fillStyle = '#f1c40f'; // Желтый для форта
        } else if (this.owned) {
            ctx.fillStyle = '#2ecc71'; // Зеленый для захваченных гексов
        } else {
            ctx.fillStyle = '#ecf0f1'; // Белый для свободных гексов
        }
        ctx.fill();
        ctx.strokeStyle = '#95a5a6';
        ctx.stroke();

        // Рисуем количество войск, если есть
        if (this.troops > 0) {
            ctx.fillStyle = '#fff';
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(this.troops, this.x, this.y + 4);
        }
    }

    isClicked(clickX, clickY) {
        const dx = clickX - this.x;
        const dy = clickY - this.y;
        const distance = Math.sqrt(dx * dx + dy * dy);
        return distance <= this.size;
    }
}

class Castle {
    constructor(hex, ui) {
        this.hex = hex;
        this.hex.isCastle = true;
        this.level = 1;
        this.population = 1;
        this.goldIncome = 10;
        this.ui = ui;
        this.barracks = 0; // Количество казарм
        this.castleHealth = 500; // Начальное здоровье замка
    }

    upgrade(resourceManager) {
        const upgradeCost = 100 * this.level;
        if (resourceManager.subtract('gold', upgradeCost)) {
            this.level += 1;
            this.population += 2;
            this.goldIncome += 10;
            this.ui.updateCastle(this.level, this.population);
            this.ui.logEvent(`Замок улучшен до уровня ${this.level}. Жители: ${this.population}, доход золота: ${this.goldIncome}`);
        } else {
            this.ui.displayAlert('Недостаточно золота для улучшения замка!');
        }
    }

    buildBarracks(resourceManager) {
        const costWood = 150;
        const costIron = 100;
        if (resourceManager.subtract('wood', costWood) && resourceManager.subtract('iron', costIron)) {
            this.barracks += 1;
            this.ui.logEvent(`Казарма построена. Всего казарм: ${this.barracks}`);
        } else {
            this.ui.displayAlert('Недостаточно ресурсов для строительства казармы!');
        }
    }

    collectResources(resourceManager) {
        resourceManager.add('gold', this.goldIncome);
        this.ui.updateResource('gold', resourceManager.get('gold'));
    }
}

class Building {
    constructor(name, resource, increment, costResource, costAmount, ui) {
        this.name = name;
        this.resource = resource;
        this.increment = increment;
        this.costResource = costResource;
        this.costAmount = costAmount;
        this.level = 1;
        this.ui = ui;
    }

    upgrade(resourceManager) {
        const totalCost = this.costAmount * this.level;
        if (resourceManager.subtract(this.costResource, totalCost)) {
            this.level += 1;
            this.increment += 5;
            this.ui.logEvent(`${this.name} улучшена до уровня ${this.level}. Производство: ${this.increment} ${this.resource}/сек`);
        } else {
            this.ui.displayAlert(`Недостаточно ${this.costResource} для улучшения ${this.name}!`);
        }
    }
}

class UIManager {
    constructor() {
        this.resourcesElements = {
            wood: document.getElementById('wood'),
            iron: document.getElementById('iron'),
            food: document.getElementById('food'),
            copper: document.getElementById('copper'),
            gold: document.getElementById('gold')
        };
        this.populationElement = document.getElementById('population');
        this.castleLevelElement = document.getElementById('castleLevel');
        this.logList = document.getElementById('logList');
        this.tooltip = document.getElementById('tooltip');
        this.contextMenu = document.getElementById('contextMenu');
        this.contextMenuList = document.getElementById('contextMenuList');
        this.troopModal = document.getElementById('troopModal');
        this.closeModal = document.querySelector('.close');
        this.buyTroopsButton = document.getElementById('buyTroops');
        
        // Закрыть модальное окно при клике на крестик
        this.closeModal.onclick = () => {
            this.hideTroopModal();
        };

        // Закрыть модальное окно при клике вне его
        window.onclick = (event) => {
            if (event.target == this.troopModal) {
                this.hideTroopModal();
            }
        };
    }

    updateResource(resource, value) {
        if (this.resourcesElements[resource]) {
            this.resourcesElements[resource].innerText = `${this.capitalize(resource)}: ${Math.floor(value)}`;
        }
    }

    updateAllResources(resources) {
        for (const [key, value] of Object.entries(resources)) {
            this.updateResource(key, value);
        }
    }

    updatePopulation(population) {
        this.populationElement.innerText = `Жители: ${population}`;
    }

    updateCastle(level, population) {
        this.castleLevelElement.innerText = `Уровень Замка: ${level}`;
        this.updatePopulation(population);
    }

    logEvent(message) {
        const li = document.createElement('li');
        li.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
        this.logList.prepend(li);
    }

    displayAlert(message) {
        alert(message);
    }

    showContextMenu(options, x, y) {
        // Очистить текущее содержание меню
        this.contextMenuList.innerHTML = '';

        // Добавить новые опции
        options.forEach(option => {
            const li = document.createElement('li');
            li.id = option.id;
            li.textContent = option.label;
            this.contextMenuList.appendChild(li);
        });

        // Позиционировать и отображать меню
        this.contextMenu.style.left = `${x}px`;
        this.contextMenu.style.top = `${y}px`;
        this.contextMenu.style.display = 'block';
    }

    hideContextMenu() {
        this.contextMenu.style.display = 'none';
    }

    showTooltip(content, x, y) {
        this.tooltip.innerHTML = content;
        this.tooltip.style.left = `${x + 10}px`;
        this.tooltip.style.top = `${y + 10}px`;
        this.tooltip.style.display = 'block';
    }

    hideTooltip() {
        this.tooltip.style.display = 'none';
    }

    showTroopModal() {
        this.troopModal.style.display = 'block';
    }

    hideTroopModal() {
        this.troopModal.style.display = 'none';
    }

    capitalize(word) {
        return word.charAt(0).toUpperCase() + word.slice(1);
    }
}

class MiniMap {
    constructor(mainCanvas, miniCanvas, grid) {
        this.mainCanvas = mainCanvas;
        this.miniCanvas = miniCanvas;
        this.ctx = miniCanvas.getContext('2d');
        this.grid = grid;
        // Расчет масштаба для 50x50 карты, предполагая размер каждого гекса 40px
        this.scale = this.miniCanvas.width / (50 * Math.sqrt(3) * 40); // Пропорция для 50x50 карты
        this.draw();
    }

    draw() {
        this.ctx.clearRect(0, 0, this.miniCanvas.width, this.miniCanvas.height);
        for (const hex of this.grid) {
            if (hex.owned) {
                this.ctx.fillStyle = hex.isCastle ? '#e74c3c' : (hex.hasFort ? '#f1c40f' : '#2ecc71');
                // Пропустить гексы вне 50x50
                if (hex.row >= 50 || hex.col >= 50) continue;
                const x = hex.col * (this.miniCanvas.width / 50) + (hex.row % 2) * (this.miniCanvas.width / 100);
                const y = hex.row * (this.miniCanvas.height / 50) * 0.75 + 10; // Добавлен отступ сверху
                this.ctx.beginPath();
                const size = (this.miniCanvas.width / 50) / 2;
                const angle = Math.PI / 3;
                for (let i = 0; i < 6; i++) {
                    this.ctx.lineTo(
                        x + size * Math.cos(angle * i),
                        y + size * Math.sin(angle * i)
                    );
                }
                this.ctx.closePath();
                this.ctx.fill();
                this.ctx.strokeStyle = '#ffffff';
                this.ctx.stroke();
            }
        }
    }
}

class ModalManager {
    constructor(ui, game) {
        this.ui = ui;
        this.game = game;
        this.buyTroopsButton = document.getElementById('buyTroops');
        this.troopAmountInput = document.getElementById('troopAmount');

        this.buyTroopsButton.addEventListener('click', () => {
            this.buyTroops();
        });
    }

    buyTroops() {
        const amount = parseInt(this.troopAmountInput.value);
        if (isNaN(amount) || amount < 1) {
            this.ui.displayAlert('Пожалуйста, введите корректное количество войск.');
            return;
        }

        const troopCost = 10 * amount; // Стоимость 10 еды за каждое войско

        if (this.game.resourceManager.subtract('food', troopCost)) {
            this.game.selectedHex.troops += amount;
            this.ui.logEvent(`Размещено ${amount} войск на гексе (${this.game.selectedHex.row}, ${this.game.selectedHex.col}). Всего войск: ${this.game.selectedHex.troops}`);
            this.ui.hideTroopModal();
        } else {
            this.ui.displayAlert('Недостаточно еды для покупки войск!');
        }
    }
}

class Game {
    constructor() {
        this.canvas = document.getElementById('gameCanvas');
        this.ctx = this.canvas.getContext('2d');
        this.ui = new UIManager();
        this.resourceManager = new ResourceManager(this.ui);
        this.hexSize = 40;
        this.grid = [];
        this.castle = null;
        this.buildings = [];
        this.selectedHex = null; // Для контекстного меню
        this.tooltipHex = null; // Для подсказок
        this.miniMapInstance = null;
        this.panOffset = { x: 0, y: 0 };
        this.viewport = { scale: 1 };
        this.isPanning = false;
        this.startPan = { x: 0, y: 0 };
        this.modalManager = null;
        this.setup();
    }

    setup() {
        this.createGrid(50, 50); // 50x50 карта
        this.placeStartingCastle();
        this.initBuildings();
        this.setupUIControls();
        this.setupContextMenuHandlers();
        this.mouseEvents();
        this.initModalManager();
        this.startResourceGeneration();
        this.initMiniMap();
        this.gameLoop();
    }

    createGrid(rows, cols) {
        const HEX_SIZE = this.hexSize;
        const HEX_WIDTH = Math.sqrt(3) * HEX_SIZE;
        const HEX_HEIGHT = 2 * HEX_SIZE;
        const HEX_HORZ_SPACING = HEX_WIDTH;
        const HEX_VERT_SPACING = 1.5 * HEX_SIZE;

        for (let row = 0; row < rows; row++) {
            for (let col = 0; col < cols; col++) {
                let x = HEX_WIDTH * col + (row % 2) * (HEX_WIDTH / 2);
                let y = HEX_HEIGHT * 0.75 * row + HEX_SIZE;
                this.grid.push(new Hex(row, col, x, y, HEX_SIZE));
            }
        }
    }

    placeStartingCastle() {
        const availableHexes = this.grid.filter(hex => !hex.owned);
        const randomHex = availableHexes[Math.floor(Math.random() * availableHexes.length)];
        randomHex.owned = true;
        this.castle = new Castle(randomHex, this.ui);
        this.resourceManager.add('gold', this.castle.goldIncome);
        this.ui.logEvent(`Замок размещен на гексе (${randomHex.row}, ${randomHex.col}).`);
    }

    initBuildings() {
        this.buildings.push(new Building('Лесопилка', 'wood', 5, 'wood', 50, this.ui));
        this.buildings.push(new Building('Железная Шахта', 'iron', 5, 'iron', 50, this.ui));
        this.buildings.push(new Building('Ферма', 'food', 5, 'food', 50, this.ui));
        this.buildings.push(new Building('Медная Шахта', 'copper', 5, 'copper', 50, this.ui));
        this.buildings.push(new Building('Золотая Шахта', 'gold', 5, 'gold', 50, this.ui));
    }

    setupUIControls() {
        // Кнопки улучшения замка
        document.getElementById('upgradeCastle').addEventListener('click', () => {
            this.castle.upgrade(this.resourceManager);
        });

        // Кнопки строительства казарм
        document.getElementById('buildBarracks').addEventListener('click', () => {
            this.castle.buildBarracks(this.resourceManager);
        });

        // Кнопки сохранения и загрузки игры
        document.getElementById('saveGame').addEventListener('click', () => {
            this.saveGame();
        });

        document.getElementById('loadGame').addEventListener('click', () => {
            this.loadGame();
        });

        // Кнопки улучшения зданий
        document.getElementById('upgradeWood').addEventListener('click', () => {
            const building = this.buildings.find(b => b.name === 'Лесопилка');
            building.upgrade(this.resourceManager);
        });

        document.getElementById('upgradeIron').addEventListener('click', () => {
            const building = this.buildings.find(b => b.name === 'Железная Шахта');
            building.upgrade(this.resourceManager);
        });

        document.getElementById('upgradeFood').addEventListener('click', () => {
            const building = this.buildings.find(b => b.name === 'Ферма');
            building.upgrade(this.resourceManager);
        });

        document.getElementById('upgradeCopper').addEventListener('click', () => {
            const building = this.buildings.find(b => b.name === 'Медная Шахта');
            building.upgrade(this.resourceManager);
        });

        document.getElementById('upgradeGold').addEventListener('click', () => {
            const building = this.buildings.find(b => b.name === 'Золотая Шахта');
            building.upgrade(this.resourceManager);
        });
    }

    setupContextMenuHandlers() {
        // Обработка выбора пунктов контекстного меню
        this.ui.contextMenuList.addEventListener('click', (e) => {
            if (e.target && e.target.nodeName === 'LI') {
                const action = e.target.id;
                if (action === 'buildFort') {
                    if (this.selectedHex) {
                        this.buildFort(this.selectedHex);
                        this.ui.hideContextMenu();
                    }
                } else if (action === 'placeTroops') {
                    if (this.selectedHex) {
                        this.openTroopModal(this.selectedHex);
                        this.ui.hideContextMenu();
                    }
                } else if (action === 'upgradeCastleOption') {
                    this.castle.upgrade(this.resourceManager);
                    this.ui.hideContextMenu();
                } else if (action === 'buildBarracksOption') {
                    this.castle.buildBarracks(this.resourceManager);
                    this.ui.hideContextMenu();
                }
            }
        });
    }

    mouseEvents() {
        // Обработка обычного клика для захвата гекса
        this.canvas.addEventListener('click', (e) => {
            const rect = this.canvas.getBoundingClientRect();
            const clickX = (e.clientX - rect.left - this.panOffset.x) / this.viewport.scale;
            const clickY = (e.clientY - rect.top - this.panOffset.y) / this.viewport.scale;

            const clickedHex = this.getHexAt(clickX, clickY);
            if (clickedHex && !clickedHex.owned && !clickedHex.isCastle) {
                // Захват территории требует затрат ресурсов
                const captureCost = {
                    wood: 50,
                    iron: 30,
                    gold: 20
                };

                const canCapture = Object.keys(captureCost).every(resource => this.resourceManager.get(resource) >= captureCost[resource]);

                if (canCapture && this.isAdjacentToOwnedHex(clickedHex)) {
                    // Вычесть ресурсы
                    Object.keys(captureCost).forEach(resource => {
                        this.resourceManager.subtract(resource, captureCost[resource]);
                    });
                    this.captureHex(clickedHex);
                } else if (!this.isAdjacentToOwnedHex(clickedHex)) {
                    this.ui.logEvent('Вы можете захватить только соседние гексы!');
                } else {
                    this.ui.logEvent('Недостаточно ресурсов для захвата территории!');
                }
            }
        });

        // Обработка правого клика для контекстного меню
        this.canvas.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            const rect = this.canvas.getBoundingClientRect();
            const clickX = (e.clientX - rect.left - this.panOffset.x) / this.viewport.scale;
            const clickY = (e.clientY - rect.top - this.panOffset.y) / this.viewport.scale;

            const clickedHex = this.getHexAt(clickX, clickY);
            if (clickedHex && clickedHex.owned) {
                this.selectedHex = clickedHex; // Сохранить выбранный гекс

                if (clickedHex.isCastle) {
                    // Если это замок, показать контекстное меню для замка
                    this.ui.showContextMenu([
                        { id: 'upgradeCastleOption', label: 'Улучшить Замок' },
                        { id: 'buildBarracksOption', label: 'Построить Казарму' }
                    ], e.clientX, e.clientY);
                } else {
                    // Иначе, показать обычное контекстное меню
                    this.ui.showContextMenu([
                        { id: 'buildFort', label: 'Построить Форт' },
                        { id: 'placeTroops', label: 'Разместить Войска' }
                    ], e.clientX, e.clientY);
                }
            }
        });

        // Обработка наведения курсора для показа подсказок
        this.canvas.addEventListener('mousemove', (e) => {
            const rect = this.canvas.getBoundingClientRect();
            const moveX = (e.clientX - rect.left - this.panOffset.x) / this.viewport.scale;
            const moveY = (e.clientY - rect.top - this.panOffset.y) / this.viewport.scale;

            const hoveredHex = this.getHexAt(moveX, moveY);
            if (hoveredHex) {
                const resources = hoveredHex.resources;
                let content = `<strong>Ресурсы:</strong><br>`;
                content += `Дерево: ${(resources.wood * 10).toFixed(1)} / сек<br>`;
                content += `Железо: ${(resources.iron * 10).toFixed(1)} / сек<br>`;
                content += `Еда: ${(resources.food * 10).toFixed(1)} / сек<br>`;
                content += `Медь: ${(resources.copper * 10).toFixed(1)} / сек<br>`;
                content += `Золото: ${(resources.gold * 10).toFixed(1)} / сек<br>`;
                if (hoveredHex.hasFort) {
                    content += `<strong>Форт:</strong> Размещено войск: ${hoveredHex.troops}`;
                }
                this.ui.showTooltip(content, e.clientX, e.clientY);
                this.tooltipHex = hoveredHex;
            } else {
                this.ui.hideTooltip();
                this.tooltipHex = null;
            }
        });

        // При уходе курсора с холста скрываем подсказку
        this.canvas.addEventListener('mouseleave', () => {
            this.ui.hideTooltip();
            this.tooltipHex = null;
        });

        // Обработка перемещения по карте (панорамирование)
        this.canvas.addEventListener('mousedown', (e) => {
            if (e.button === 1 || (e.button === 0 && e.shiftKey)) { // Средняя кнопка или Shift + Левый
                this.isPanning = true;
                this.startPan.x = e.clientX;
                this.startPan.y = e.clientY;
            }
        });

        document.addEventListener('mouseup', (e) => {
            this.isPanning = false;
        });

        document.addEventListener('mousemove', (e) => {
            if (this.isPanning) {
                const dx = e.clientX - this.startPan.x;
                const dy = e.clientY - this.startPan.y;
                this.panOffset.x += dx;
                this.panOffset.y += dy;
                this.startPan.x = e.clientX;
                this.startPan.y = e.clientY;
            }
        });

        // Обработка колесика мыши для масштабирования
        this.canvas.addEventListener('wheel', (e) => {
            e.preventDefault();
            const zoomIntensity = 0.1;
            const delta = e.deltaY < 0 ? 1 : -1;
            const factor = 1 + delta * zoomIntensity;
            this.viewport.scale *= factor;
            this.viewport.scale = Math.min(Math.max(this.viewport.scale, 0.5), 2);
        });
    }

    initModalManager() {
        this.modalManager = new ModalManager(this.ui, this);
    }

    openTroopModal(hex) {
        if (hex.hasFort) {
            this.ui.showTroopModal();
        } else {
            this.ui.displayAlert('На этом гексе не построен форт!');
        }
    }

    getHexAt(x, y) {
        return this.grid.find(hex => hex.isClicked(x, y));
    }

    isAdjacentToOwnedHex(targetHex) {
        const neighbors = this.getNeighbors(targetHex);
        return neighbors.some(hex => hex.owned);
    }

    getNeighbors(hex) {
        const directions = [
            { dr: -1, dc: 0 }, { dr: -1, dc: 1 }, { dr: 0, dc: -1 },
            { dr: 0, dc: 1 }, { dr: 1, dc: -1 }, { dr: 1, dc: 0 }
        ];
        const neighbors = [];
        for (const dir of directions) {
            const neighbor = this.grid.find(h => h.row === hex.row + dir.dr && h.col === hex.col + dir.dc);
            if (neighbor) {
                neighbors.push(neighbor);
            }
        }
        return neighbors;
    }

    captureHex(hex) {
        hex.owned = true;
        this.ui.logEvent(`Гекс захвачен на (${hex.row}, ${hex.col}).`);
        // Можно добавить дополнительные преимущества от захвата гекса
    }

    buildFort(hex) {
        if (!hex.hasFort) {
            const costWood = 50;
            const costIron = 25;
            if (this.resourceManager.subtract('wood', costWood) && this.resourceManager.subtract('iron', costIron)) {
                hex.hasFort = true;
                this.ui.logEvent(`Форт построен на гексе (${hex.row}, ${hex.col}).`);
            } else {
                this.ui.displayAlert('Недостаточно ресурсов для строительства форта!');
            }
        } else {
            this.ui.displayAlert('На этом гексе уже построен форт!');
        }
    }

    placeTroops(hex) {
        if (hex.hasFort) {
            if (this.castle.barracks > 0) {
                this.openTroopModal(hex);
            } else {
                this.ui.displayAlert('Необходимо построить казармы в замке для размещения войск!');
            }
        } else {
            this.ui.displayAlert('На этом гексе не построен форт!');
        }
    }

    startResourceGeneration() {
        // Генерация ресурсов каждые 1 секунду
        setInterval(() => {
            for (const building of this.buildings) {
                this.resourceManager.add(building.resource, building.increment);
            }
            this.castle.collectResources(this.resourceManager);
        }, 1000);

        // Рост населения каждые 10 секунд в зависимости от уровня замка
        setInterval(() => {
            const newResidents = this.castle.level;
            this.castle.population += newResidents;
            this.ui.updatePopulation(this.castle.population);
            this.ui.logEvent(`Население выросло на ${newResidents}. Всего жителей: ${this.castle.population}`);
        }, 10000);
    }

    initMiniMap() {
        this.miniMapInstance = new MiniMap(this.canvas, document.getElementById('miniMap'), this.grid);
    }

    gameLoop() {
        this.ctx.save();
        this.ctx.translate(this.panOffset.x, this.panOffset.y);
        this.ctx.scale(this.viewport.scale, this.viewport.scale);
        this.ctx.clearRect(-this.panOffset.x / this.viewport.scale, -this.panOffset.y / this.viewport.scale, this.canvas.width / this.viewport.scale, this.canvas.height / this.viewport.scale);
        this.drawGrid();
        this.ctx.restore();
        this.drawMiniMap();
        requestAnimationFrame(() => this.gameLoop());
    }

    drawGrid() {
        for (const hex of this.grid) {
            hex.draw(this.ctx);
        }
    }

    drawMiniMap() {
        // Обновление мини-карты
        if (this.miniMapInstance) {
            this.miniMapInstance.draw();
        }
    }

    saveGame() {
        const gameState = {
            resources: this.resourceManager.getAll(),
            castle: {
                level: this.castle.level,
                population: this.castle.population,
                goldIncome: this.castle.goldIncome,
                barracks: this.castle.barracks,
                location: {
                    row: this.castle.hex.row,
                    col: this.castle.hex.col
                },
                castleHealth: this.castle.castleHealth
            },
            buildings: this.buildings.map(b => ({
                name: b.name,
                level: b.level,
                increment: b.increment
            })),
            grid: this.grid.map(hex => ({
                row: hex.row,
                col: hex.col,
                owned: hex.owned,
                isCastle: hex.isCastle,
                hasFort: hex.hasFort,
                troops: hex.troops,
                resources: hex.resources
            }))
        };
        localStorage.setItem('hexGameSave', JSON.stringify(gameState));
        this.ui.logEvent('Игра сохранена.');
    }

    loadGame() {
        const savedState = localStorage.getItem('hexGameSave');
        if (savedState) {
            const parsedState = JSON.parse(savedState);
            this.resourceManager.setAll(parsedState.resources);
            // Восстановление замка
            const castleLocation = parsedState.castle.location;
            const castleHex = this.grid.find(hex => hex.row === castleLocation.row && hex.col === castleLocation.col);
            if (castleHex) {
                this.castle = new Castle(castleHex, this.ui);
                this.castle.level = parsedState.castle.level;
                this.castle.population = parsedState.castle.population;
                this.castle.goldIncome = parsedState.castle.goldIncome;
                this.castle.barracks = parsedState.castle.barracks;
                this.castle.castleHealth = parsedState.castle.castleHealth;
                this.ui.updateCastle(this.castle.level, this.castle.population);
            }
            // Восстановление зданий
            for (let i = 0; i < this.buildings.length; i++) {
                const savedBuilding = parsedState.buildings.find(b => b.name === this.buildings[i].name);
                if (savedBuilding) {
                    this.buildings[i].level = savedBuilding.level;
                    this.buildings[i].increment = savedBuilding.increment;
                }
            }
            // Восстановление гексов
            for (let i = 0; i < this.grid.length; i++) {
                const savedHex = parsedState.grid[i];
                this.grid[i].owned = savedHex.owned;
                this.grid[i].isCastle = savedHex.isCastle;
                this.grid[i].hasFort = savedHex.hasFort;
                this.grid[i].troops = savedHex.troops;
                this.grid[i].resources = savedHex.resources;
                if (this.grid[i].isCastle) {
                    this.castle.hex = this.grid[i];
                }
            }
            this.ui.updateAllResources(this.resourceManager.getAll());
            this.ui.logEvent('Игра загружена.');
        } else {
            this.ui.displayAlert('Сохранения не найдены!');
        }
    }
}


// Запуск игры при загрузке страницы
window.onload = () => {
    const game = new Game();
};</script>
</body>
</html>