client/src/engine/core/ui/Button.ts - master - difight/ruEngine

client/src/engine/core/ui/Button.ts

74 строки2 KB

Andrey Bashkirev

Немного переделал архитектуру

05 авг 2025, 17:15

05 авг 2025, 17:15144f0db

import { InteractiveElement } from "./InteractiveElement";
import { Logger } from "../../utils/Logger";


/**
 * Кнопка UI, реализующая интерактивный элемент
 */
export class Button extends InteractiveElement {
  private readonly label: string;
  private _isHovered = false;

  private _onClickCallback?: () => void;

  /** Геттер для состояния наведения */
  public get isHovered(): boolean {
    return this._isHovered;
  }

  /**
   * @param x Координата X
   * @param y Координата Y
   * @param width Ширина
   * @param height Высота
   * @param label Текст кнопки
   */
  constructor(
    x: number,
    y: number,
    width: number,
    height: number,
    label: string
  ) {
    super(x, y, width, height);
    this.label = label;
  }

  /**
   * Отрисовать кнопку
   * @param ctx 2D-контекст канваса
   */
  render(ctx: CanvasRenderingContext2D): void {
    const color = this.isHovered ? "#444" : "#222";
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
    ctx.fillStyle = "#fff";
    ctx.font = "24px Arial";
    ctx.textAlign = "center";
    ctx.fillText(this.label, this.x + this.width / 2, this.y + this.height / 2);
  }

  /**
   * Установить состояние наведения
   * @param hovered Наведён ли курсор
   */
  setHovered(hovered: boolean): void {
    this._isHovered = hovered;
  }

  /** Обработчик клика по кнопке */
  onClick(): void {
    Logger.debug('click button');
    if (this._onClickCallback) {
      this._onClickCallback();
    }
  }

  /**
   * Установить обработчик клика по кнопке
   * @param callback Функция-обработчик
   */
  setOnClick(callback: () => void): void {
    this._onClickCallback = callback;
  }
}