<!-- Пример HTML-структуры для игрового интерфейса -->
<div class="game-ui">
  <header class="top-bar">
    <div class="health-container">
      <div class="health-bar" style="width: 75%"></div>
    </div>
    <div class="resources">
      <span class="gold">1250</span>
      <span class="gems">7</span>
    </div>
  </header>
  
  <div class="inventory-grid">
    <!-- Ячейки инвентаря будут добавлены через JavaScript -->
  </div>
  
  <footer class="action-bar">
    <button class="action-button" data-action="attack">Атака</button>
    <button class="action-button" data-action="defend">Защита</button>
    <button class="action-button" data-action="special">Особый навык</button>
  </footer>
</div>

/* Пример CSS для игрового интерфейса */
.game-ui {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'GameFont', sans-serif;
  color: #e0e0e0;
}

.top-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
}

.health-container {
  width: 200px;
  height: 20px;
  background: #333;
  border: 2px solid #555;
  border-radius: 10px;
  overflow: hidden;
}

.health-bar {
  height: 100%;
  background: linear-gradient(to right, #f00, #f55);
  transition: width 0.3s ease-out;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 20px;
  flex-grow: 1;
}

.inventory-slot {
  aspect-ratio: 1;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid #555;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.action-bar {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
}

.action-button {
  padding: 10px 20px;
  background: linear-gradient(to bottom, #555, #333);
  border: 2px solid #777;
  border-radius: 5px;
  color: #e0e0e0;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

.action-button:hover {
  background: linear-gradient(to bottom, #666, #444);
  transform: scale(1.05);
}

.action-button:active {
  background: linear-gradient(to bottom, #444, #222);
  transform: scale(0.95);
}

// Создание сущности с веб-интерфейсом
Entity uiEntity = world.createEntity("InventoryUI");

// Добавление компонента WebUI
auto& webUI = uiEntity.addComponent<WebUIComponent>();
webUI.setSource("assets/ui/inventory.html");
webUI.setSize(800, 600);
webUI.setTransparent(true);
webUI.setInteractive(true);

// Настройка позиции и размера в 3D-пространстве
auto& transform = uiEntity.getComponent<TransformComponent>();
transform.position = Vector3(0.0f, 1.7f, 0.5f);
transform.rotation = Quaternion::fromEuler(0.0f, 180.0f, 0.0f);
transform.scale = Vector3(0.002f, 0.002f, 0.002f);

// Регистрация обработчиков событий
webUI.onLoadComplete([&uiEntity]() {
    Debug::log("UI загружен: {}", uiEntity.getName());
    
    // Инициализация UI после загрузки
    auto& webUI = uiEntity.getComponent<WebUIComponent>();
    webUI.callJavaScriptFunction("initializeUI", {
        {"playerName", "Герой"},
        {"level", 5},
        {"maxHealth", 100},
        {"currentHealth", 75}
    });
});

// Создание HUD
Entity hud = world.createEntity("PlayerHUD");
auto& webUI = hud.addComponent<WebUIComponent>();
webUI.setSource("assets/ui/hud.html");
webUI.setSize(1920, 1080);
webUI.setFullscreen(true);
webUI.setTransparent(true);
webUI.setInteractive(false);

// Система для обновления HUD
class HUDSystem : public ISystem {
private:
    World* m_world;
    Entity m_player;
    Entity m_hud;

public:
    HUDSystem(World* world) : m_world(world) {
        m_player = world->findEntityByName("Player");
        m_hud = world->findEntityByName("PlayerHUD");
    }

    void update(float deltaTime) override {
        if (!m_player.isValid() || !m_hud.isValid()) return;
        
        auto& health = m_player.getComponent<HealthComponent>();
        auto& inventory = m_player.getComponent<InventoryComponent>();
        auto& webUI = m_hud.getComponent<WebUIComponent>();
        
        // Обновление HUD
        webUI.callJavaScriptFunction("updateHUD", {
            {"health", health.currentHealth},
            {"maxHealth", health.maxHealth},
            {"stamina", m_player.getComponent<StaminaComponent>().currentStamina},
            {"maxStamina", m_player.getComponent<StaminaComponent>().maxStamina},
            {"gold", inventory.gold},
            {"ammo", inventory.getAmmoCount()}
        });
    }
};

// Создание инвентаря
Entity inventoryUI = world.createEntity("InventoryUI");
auto& webUI = inventoryUI.addComponent<WebUIComponent>();
webUI.setSource("assets/ui/inventory.html");
webUI.setSize(1200, 800);
webUI.setVisible(false); // Изначально скрыт
webUI.setInteractive(true);

// Регистрация обработчиков событий
webUI.registerFunction("useItem", [&inventoryUI](const json& args) -> json {
    int itemId = args["itemId"];
    
    // Получение игрока
    Entity player = world.findEntityByName("Player");
    if (!player.isValid()) {
        return {{"success", false}, {"error", "Player not found"}};
    }
    
    // Использование предмета
    bool success = player.getComponent<InventoryComponent>().useItem(itemId);
    
    return {{"success", success}};
});

// Система для открытия/закрытия инвентаря
class InventoryUISystem : public ISystem {
private:
    World* m_world;
    Entity m_inventoryUI;
    InputManager* m_inputManager;

public:
    InventoryUISystem(World* world, InputManager* inputManager) 
        : m_world(world), m_inputManager(inputManager) {
        m_inventoryUI = world->findEntityByName("InventoryUI");
        
        // Регистрация обработчика клавиши
        m_inputManager->registerKeyCallback(KeyCode::I, [this](bool pressed) {
            if (pressed) {
                toggleInventory();
            }
        });
    }

    void toggleInventory() {
        if (!m_inventoryUI.isValid()) return;
        
        auto& webUI = m_inventoryUI.getComponent<WebUIComponent>();
        bool isVisible = webUI.isVisible();
        
        webUI.setVisible(!isVisible);
        
        if (!isVisible) {
            // Обновление данных при открытии инвентаря
            Entity player = m_world->findEntityByName("Player");
            if (player.isValid()) {
                auto& inventory = player.getComponent<InventoryComponent>();
                webUI.callJavaScriptFunction("updateInventoryUI", {
                    {"items", inventory.getAllItems()},
                    {"maxSlots", inventory.getMaxSlots()}
                });
            }
        }
    }
};

// Пример оптимизации с использованием пулинга элементов
class ElementPool {
    constructor(tagName, className, parent, initialCount = 10) {
        this.pool = [];
        this.parent = parent;
        
        // Создание начального пула элементов
        for (let i = 0; i < initialCount; i++) {
            const element = document.createElement(tagName);
            element.className = className;
            element.style.display = 'none';
            parent.appendChild(element);
            this.pool.push(element);
        }
    }
    
    get() {
        // Получение элемента из пула или создание нового
        let element;
        if (this.pool.length > 0) {
            element = this.pool.pop();
        } else {
            element = document.createElement(tagName);
            element.className = className;
            this.parent.appendChild(element);
        }
        
        element.style.display = '';
        return element;
    }
    
    release(element) {
        // Возврат элемента в пул
        element.style.display = 'none';
        this.pool.push(element);
    }
}

// Использование пула для создания частиц
const particleContainer = document.querySelector('.particle-container');
const particlePool = new ElementPool('div', 'particle', particleContainer, 50);

function createParticle(x, y) {
    const particle = particlePool.get();
    particle.style.left = `${x}px`;
    particle.style.top = `${y}px`;
    
    // Анимация частицы
    setTimeout(() => {
        particlePool.release(particle);
    }, 1000);
}

// Включение инструментов разработчика для веб-интерфейса
auto& webUI = entity.getComponent<WebUIComponent>();
webUI.enableDevTools(true);

// Вывод сообщений в консоль JavaScript
webUI.executeJavaScript("console.log('Отладочное сообщение');");

// Получение ошибок JavaScript
webUI.onJavaScriptError([](const std::string& errorMessage, 
                          const std::string& sourceFile, 
                          int lineNumber) {
    Debug::logError("JavaScript Error: {} in {} at line {}", 
                   errorMessage, sourceFile, lineNumber);
});