Ui Components

В этом разделе описываются готовые UI компоненты, которые можно использовать для быстрого создания веб-интерфейсов в Wudgine.

Введение

Wudgine предоставляет набор готовых UI компонентов, которые помогут вам быстро создавать профессиональные игровые интерфейсы. Эти компоненты оптимизированы для работы с движком и следуют лучшим практикам разработки игровых UI.

Базовые компоненты

Кнопки

<button class="wg-button wg-button-primary">Начать игру</button>
<button class="wg-button wg-button-secondary">Настройки</button>
<button class="wg-button wg-button-danger">Выход</button>

Доступные классы для кнопок:

wg-button-primary - основная кнопка
wg-button-secondary - второстепенная кнопка
wg-button-danger - кнопка для опасных действий
wg-button-small - маленькая кнопка
wg-button-large - большая кнопка
wg-button-disabled - отключенная кнопка

Панели

<div class="wg-panel">
  <div class="wg-panel-header">Заголовок панели</div>
  <div class="wg-panel-body">
    Содержимое панели
  </div>
  <div class="wg-panel-footer">
    <button class="wg-button wg-button-primary">OK</button>
    <button class="wg-button wg-button-secondary">Отмена</button>
  </div>
</div>

Индикаторы прогресса

<!-- Простой прогресс-бар -->
<div class="wg-progress">
  <div class="wg-progress-bar" style="width: 75%"></div>
</div>

<!-- Прогресс-бар с текстом -->
<div class="wg-progress">
  <div class="wg-progress-bar" style="width: 75%">75%</div>
</div>

<!-- Прогресс-бар с двумя значениями (например, здоровье/мана) -->
<div class="wg-progress wg-progress-dual">
  <div class="wg-progress-bar wg-progress-primary" style="width: 60%"></div>
  <div class="wg-progress-bar wg-progress-secondary" style="width: 40%"></div>
</div>

Слоты инвентаря

<div class="wg-inventory-grid">
  <div class="wg-inventory-slot">
    <div class="wg-item" data-item-id="sword_01">
      <img src="items/sword.png" alt="Меч">
      <span class="wg-item-count">1</span>
    </div>
  </div>
  <div class="wg-inventory-slot"></div>
  <div class="wg-inventory-slot">
    <div class="wg-item" data-item-id="potion_health">
      <img src="items/health_potion.png" alt="Зелье здоровья">
      <span class="wg-item-count">5</span>
    </div>
  </div>
  <!-- Дополнительные слоты -->
</div>

Диалоговые окна

<div class="wg-dialog" id="confirmDialog">
  <div class="wg-dialog-content">
    <div class="wg-dialog-header">
      <h3>Подтверждение</h3>
      <button class="wg-dialog-close">&times;</button>
    </div>
    <div class="wg-dialog-body">
      <p>Вы уверены, что хотите продолжить?</p>
    </div>
    <div class="wg-dialog-footer">
      <button class="wg-button wg-button-primary" id="confirmYes">Да</button>
      <button class="wg-button wg-button-secondary" id="confirmNo">Нет</button>
    </div>
  </div>
</div>

// Показать диалог
document.getElementById('confirmDialog').classList.add('wg-dialog-visible');

// Скрыть диалог
document.getElementById('confirmDialog').classList.remove('wg-dialog-visible');

Всплывающие подсказки

<div class="wg-tooltip-container">
  <button class="wg-button wg-button-primary">Навык</button>
  <div class="wg-tooltip">
    <h4>Огненный шар</h4>
    <p>Наносит 50-75 урона огнем</p>
    <p class="wg-tooltip-cooldown">Перезарядка: 30 сек</p>
  </div>
</div>

HUD компоненты

Миникарта

<div class="wg-minimap">
  <div class="wg-minimap-container">
    <!-- Здесь будет отображаться карта -->
  </div>
  <div class="wg-minimap-controls">
    <button class="wg-minimap-zoom-in">+</button>
    <button class="wg-minimap-zoom-out">-</button>
  </div>
</div>

class Minimap {
  constructor(options = {}) {
    this.container = document.querySelector(options.container || '.wg-minimap-container');
    this.scale = options.initialScale || 1.0;
    this.playerMarker = null;
    this.markers = new Map();
    
    this.initialize();
  }
  
  initialize() {
    // Создание маркера игрока
    this.playerMarker = document.createElement('div');
    this.playerMarker.className = 'wg-minimap-player-marker';
    this.container.appendChild(this.playerMarker);
    
    // Подписка на обновление позиции игрока
    engine.subscribe('playerPositionChanged', (data) => {
      this.updatePlayerPosition(data.x, data.y);
    });
    
    // Настройка элементов управления
    document.querySelector('.wg-minimap-zoom-in').addEventListener('click', () => {
      this.setScale(this.scale + 0.1);
    });
    
    document.querySelector('.wg-minimap-zoom-out').addEventListener('click', () => {
      this.setScale(this.scale - 0.1);
    });
  }
  
  updatePlayerPosition(x, y) {
    // Преобразование координат игрового мира в координаты миникарты
    const mapX = x * this.scale;
    const mapY = y * this.scale;
    
    this.playerMarker.style.transform = `translate(${mapX}px, ${mapY}px)`;
  }
  
  setScale(newScale) {
    // Ограничение масштаба
    this.scale = Math.max(0.5, Math.min(2.0, newScale));
    
    // Обновление отображения
    this.container.style.transform = `scale(${this.scale})`;
  }
  
  addMarker(id, x, y, type = 'default') {
    // Создание маркера на карте
    const marker = document.createElement('div');
    marker.className = `wg-minimap-marker wg-minimap-marker-${type}`;
    marker.style.transform = `translate(${x * this.scale}px, ${y * this.scale}px)`;
    
    this.container.appendChild(marker);
    this.markers.set(id, marker);
    
    return marker;
  }
  
  removeMarker(id) {
    const marker = this.markers.get(id);
    if (marker) {
      marker.remove();
      this.markers.delete(id);
    }
  }
}

Индикаторы здоровья и ресурсов

<div class="wg-player-stats">
  <div class="wg-stat-container">
    <div class="wg-stat-label">Здоровье</div>
    <div class="wg-progress">
      <div class="wg-progress-bar wg-health-bar" style="width: 75%">750/1000</div>
    </div>
  </div>
  
  <div class="wg-stat-container">
    <div class="wg-stat-label">Мана</div>
    <div class="wg-progress">
      <div class="wg-progress-bar wg-mana-bar" style="width: 50%">250/500</div>
    </div>
  </div>
  
  <div class="wg-stat-container">
    <div class="wg-stat-label">Выносливость</div>
    <div class="wg-progress">
      <div class="wg-progress-bar wg-stamina-bar" style="width: 90%">90/100</div>
    </div>
  </div>
</div>

class PlayerStatsUI {
  constructor() {
    this.healthBar = document.querySelector('.wg-health-bar');
    this.manaBar = document.querySelector('.wg-mana-bar');
    this.staminaBar = document.querySelector('.wg-stamina-bar');
    
    this.initialize();
  }
  
  initialize() {
    // Подписка на события изменения характеристик игрока
    engine.subscribe('playerStatsChanged', (data) => {
      this.updateStats(data);
    });
    
    // Начальное обновление
    this.updateStats(engine.call('getPlayerStats'));
  }
  
  updateStats(stats) {
    // Обновление полосы здоровья
    const healthPercent = (stats.currentHealth / stats.maxHealth) * 100;
    this.healthBar.style.width = `${healthPercent}%`;
    this.healthBar.textContent = `${stats.currentHealth}/${stats.maxHealth}`;
    
    // Изменение цвета при низком здоровье
    if (healthPercent < 25) {
      this.healthBar.classList.add('wg-critical');
    } else {
      this.healthBar.classList.remove('wg-critical');
    }
    
    // Обновление полосы маны
    const manaPercent = (stats.currentMana / stats.maxMana) * 100;
    this.manaBar.style.width = `${manaPercent}%`;
    this.manaBar.textContent = `${stats.currentMana}/${stats.maxMana}`;
    
    // Обновление полосы выносливости
    const staminaPercent = (stats.currentStamina / stats.maxStamina) * 100;
    this.staminaBar.style.width = `${staminaPercent}%`;
    this.staminaBar.textContent = `${stats.currentStamina}/${stats.maxStamina}`;
  }
}

Панель действий

<div class="wg-action-bar">
  <div class="wg-action-slot" data-slot="1">
    <img src="skills/fireball.png" alt="Огненный шар">
    <span class="wg-action-keybind">1</span>
    <div class="wg-action-cooldown" style="height: 30%"></div>
  </div>
  <div class="wg-action-slot" data-slot="2">
    <img src="skills/heal.png" alt="Исцеление">
    <span class="wg-action-keybind">2</span>
  </div>
  <!-- Дополнительные слоты -->
</div>

class ActionBar {
  constructor() {
    this.slots = document.querySelectorAll('.wg-action-slot');
    this.cooldowns = new Map();
    
    this.initialize();
  }
  
  initialize() {
    // Подписка на события изменения способностей
    engine.subscribe('abilityCooldownChanged', (data) => {
      this.updateCooldown(data.slotIndex, data.remainingCooldown, data.totalCooldown);
    });
    
    // Обработка нажатий на слоты
    this.slots.forEach(slot => {
      slot.addEventListener('click', () => {
        const slotIndex = parseInt(slot.dataset.slot);
        this.activateAbility(slotIndex);
      });
    });
    
    // Обработка нажатий клавиш
    document.addEventListener('keydown', (e) => {
      // Проверка, является ли нажатая клавиша цифрой от 1 до 9
      if (e.key >= '1' && e.key <= '9') {
        const slotIndex = parseInt(e.key);
        this.activateAbility(slotIndex);
      }
    });
  }
  
  activateAbility(slotIndex) {
    // Проверка, не на перезарядке ли способность
    if (this.cooldowns.has(slotIndex)) {
      return;
    }
    
    // Вызов способности через движок
    const result = engine.call('activateAbility', { slotIndex });
    
    if (result.success) {
      // Если способность успешно активирована, начинаем отсчет перезарядки
      if (result.cooldown > 0) {
        this.updateCooldown(slotIndex, result.cooldown, result.cooldown);
      }
    }
  }
  
  updateCooldown(slotIndex, remainingCooldown, totalCooldown) {
    const slot = document.querySelector(`.wg-action-slot[data-slot="${slotIndex}"]`);
    if (!slot) return;
    
    const cooldownOverlay = slot.querySelector('.wg-action-cooldown');
    
    if (remainingCooldown <= 0) {
      // Перезарядка завершена
      cooldownOverlay.style.height = '0%';
      this.cooldowns.delete(slotIndex);
    } else {
      // Обновление индикатора перезарядки
      const percent = (remainingCooldown / totalCooldown) * 100;
      cooldownOverlay.style.height = `${percent}%`;
      
      // Сохранение информации о перезарядке
      this.cooldowns.set(slotIndex, {
        remaining: remainingCooldown,
        total: totalCooldown
      });
      
      // Уменьшение оставшегося времени
      setTimeout(() => {
        this.updateCooldown(slotIndex, remainingCooldown - 0.1, totalCooldown);
      }, 100);
    }
  }
}

Меню и экраны

Главное меню

<div class="wg-main-menu">
  <div class="wg-menu-logo">
    <img src="logo.png" alt="Название игры">
  </div>
  
  <div class="wg-menu-buttons">
    <button class="wg-button wg-button-primary wg-button-large" id="btnPlay">Играть</button>
    <button class="wg-button wg-button-primary wg-button-large" id="btnContinue">Продолжить</button>
    <button class="wg-button wg-button-secondary wg-button-large" id="btnSettings">Настройки</button>
    <button class="wg-button wg-button-secondary wg-button-large" id="btnCredits">Авторы</button>
    <button class="wg-button wg-button-danger wg-button-large" id="btnExit">Выход</button>
  </div>
  
  <div class="wg-menu-footer">
    <p>Версия 1.0.0</p>
    <p>&copy; 2023 Wudgine Studios</p>
  </div>
</div>

class MainMenu {
  constructor() {
    this.initialize();
  }
  
  initialize() {
    // Проверка наличия сохранений
    const hasSaveGame = engine.call('checkSaveGame');
    
    // Показать/скрыть кнопку "Продолжить"
    const continueButton = document.getElementById('btnContinue');
    continueButton.style.display = hasSaveGame ? 'block' : 'none';
    
    // Настройка обработчиков событий
    document.getElementById('btnPlay').addEventListener('click', () => {
      engine.call('startNewGame');
    });
    
    document.getElementById('btnContinue').addEventListener('click', () => {
      engine.call('loadGame');
    });
    
    document.getElementById('btnSettings').addEventListener('click', () => {
      engine.call('showSettings');
    });
    
    document.getElementById('btnCredits').addEventListener('click', () => {
      engine.call('showCredits');
    });
    
    document.getElementById('btnExit').addEventListener('click', () => {
      engine.call('exitGame');
    });
  }
}

Экран настроек

<div class="wg-settings-screen">
  <div class="wg-panel">
    <div class="wg-panel-header">
      <h2>Настройки</h2>
      <button class="wg-panel-close" id="btnCloseSettings">&times;</button>
    </div>
    
    <div class="wg-panel-body">
      <div class="wg-tabs">
        <div class="wg-tab-buttons">
          <button class="wg-tab-button active" data-tab="graphics">Графика</button>
          <button class="wg-tab-button" data-tab="audio">Звук</button>
          <button class="wg-tab-button" data-tab="controls">Управление</button>
          <button class="wg-tab-button" data-tab="gameplay">Геймплей</button>
        </div>
        
        <div class="wg-tab-content">
          <div class="wg-tab-pane active" id="graphics">
            <!-- Настройки графики -->
            <div class="wg-setting-row">
              <label for="resolution">Разрешение:</label>
              <select id="resolution" class="wg-select">
                <option value="1920x1080">1920x1080</option>
                <option value="1280x720">1280x720</option>
                <!-- Другие варианты -->
              </select>
            </div>
            
            <div class="wg-setting-row">
              <label for="quality">Качество графики:</label>
              <select id="quality" class="wg-select">
                <option value="low">Низкое</option>
                <option value="medium">Среднее</option>
                <option value="high">Высокое</option>
                <option value="ultra">Ультра</option>
              </select>
            </div>
            
            <div class="wg-setting-row">
              <label for="fullscreen">Полноэкранный режим:</label>
              <input type="checkbox" id="fullscreen" class="wg-checkbox">
            </div>
          </div>
          
          <!-- Другие вкладки настроек -->
        </div>
      </div>
    </div>
    
    <div class="wg-panel-footer">
      <button class="wg-button wg-button-primary" id="btnSaveSettings">Сохранить</button>
      <button class="wg-button wg-button-secondary" id="btnResetSettings">Сбросить</button>
    </div>
  </div>
</div>

class SettingsScreen {
  constructor() {
    this.currentSettings = {};
    this.initialize();
  }
  
  async initialize() {
    // Загрузка текущих настроек
    this.currentSettings = await engine.call('getSettings');
    
    // Заполнение полей формы
    this.populateForm();
    
    // Настройка переключения вкладок
    const tabButtons = document.querySelectorAll('.wg-tab-button');
    tabButtons.forEach(button => {
      button.addEventListener('click', () => {
        // Удаление активного класса у всех кнопок и панелей
        document.querySelectorAll('.wg-tab-button').forEach(btn => {
          btn.classList.remove('active');
        });
        document.querySelectorAll('.wg-tab-pane').forEach(pane => {
          pane.classList.remove('active');
        });
        
        // Активация выбранной вкладки
        button.classList.add('active');
        const tabId = button.dataset.tab;
        document.getElementById(tabId).classList.add('active');
      });
    });
    
    // Обработчики кнопок
    document.getElementById('btnCloseSettings').addEventListener('click', () => {
      engine.call('hideSettings');
    });
    
    document.getElementById('btnSaveSettings').addEventListener('click', () => {
      this.saveSettings();
    });
    
    document.getElementById('btnResetSettings').addEventListener('click', () => {
      this.resetSettings();
    });
  }
  
  populateForm() {
    // Заполнение полей формы текущими настройками
    document.getElementById('resolution').value = this.currentSettings.resolution;
    document.getElementById('quality').value = this.currentSettings.quality;
    document.getElementById('fullscreen').checked = this.currentSettings.fullscreen;
    
    // Заполнение других настроек
    // ...
  }
  
  async saveSettings() {
    // Сбор данных из формы
    const newSettings = {
      resolution: document.getElementById('resolution').value,
      quality: document.getElementById('quality').value,
      fullscreen: document.getElementById('fullscreen').checked,
      // Другие настройки
    };
    
    // Сохранение настроек
    const result = await engine.call('saveSettings', newSettings);
    
    if (result.success) {
      // Показать уведомление об успешном сохранении
      this.showNotification('Настройки успешно сохранены');
      
      // Обновление текущих настроек
      this.currentSettings = newSettings;
    } else {
      // Показать ошибку
      this.showNotification('Ошибка при сохранении настроек', 'error');
    }
  }
  
  async resetSettings() {
    // Сброс настроек к значениям по умолчанию
    const defaultSettings = await engine.call('getDefaultSettings');
    
    // Обновление формы
    this.currentSettings = defaultSettings;
    this.populateForm();
    
    // Показать уведомление
    this.showNotification('Настройки сброшены к значениям по умолчанию');
  }
  
  showNotification(message, type = 'success') {
    // Создание элемента уведомления
    const notification = document.createElement('div');
    notification.className = `wg-notification wg-notification-${type}`;
    notification.textContent = message;
    
    // Добавление на страницу
    document.body.appendChild(notification);
    
    // Удаление через 3 секунды
    setTimeout(() => {
      notification.classList.add('wg-notification-hide');
      setTimeout(() => {
        notification.remove();
      }, 300);
    }, 3000);
  }
}

Javascript Api

Ui Examples

Documentation

Ui Components