js/elements/controls/UpButton.js - master - memoryspeak/UlamCodeWeb

js/elements/controls/UpButton.js
109 строк3 KB
memoryspeak
refactor function parameters
17 фев 2026, 18:30
17 фев 2026, 18:30d5167b6
export default class UpButton {
  BORDER_RADIUS_CELL_SIZE_RATIO = 0.1;
  LINE_WIDTH_CELL_SIZE_RATIO = 0.02;
  BORDER_COLOR = "white";

  TEXT_COLOR = "white";
  TEXT_CELL_SIZE_RATIO = 0.25;

  FILL_COLOR = "rgba(60, 60, 60, 0.9)";

  TEXT_BUTTON = "▲";

  BUTTON_WIDTH_CELL_SIZE_RATIO = 1;
  BUTTON_HEIGHT_CELL_SIZE_RATIO = 1;
  BUTTON_RIGHT_CELL_SIZE_RATIO = 1.5;
  BUTTON_BOTTOM_CELL_SIZE_RATIO = 2.75;

  constructor(app) {
    this.app = app;
  }

  update(correction) {
    if (this.app.modal.isActive) return;

    if (this.app.input.isPressArrowUp()) {
      this.onClick();
      return;
    }

    if (!this.app.areControls) return;

    if (this.app.input.mouse.isDown && this.isMouseInButton()) this.onClick();
  }

  isMouseInButton() {
    return (
      this.app.input.mouse.x >
        this.app.layer.w -
          (this.BUTTON_RIGHT_CELL_SIZE_RATIO +
            this.BUTTON_WIDTH_CELL_SIZE_RATIO) *
            this.app.layer.cellSize &&
      this.app.input.mouse.x <
        this.app.layer.w -
          this.BUTTON_RIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize &&
      this.app.input.mouse.y >
        this.app.layer.h -
          (this.BUTTON_BOTTOM_CELL_SIZE_RATIO +
            this.BUTTON_HEIGHT_CELL_SIZE_RATIO) *
            this.app.layer.cellSize &&
      this.app.input.mouse.y <
        this.app.layer.h - this.BUTTON_BOTTOM_CELL_SIZE_RATIO * this.app.layer.cellSize
    );
  }

  draw() {
    if (!this.app.areControls) return;

    // Рассчитываем координаты кнопки один раз
    const buttonX =
      this.app.layer.w -
      (this.BUTTON_RIGHT_CELL_SIZE_RATIO + this.BUTTON_WIDTH_CELL_SIZE_RATIO) *
        this.app.layer.cellSize;
    const buttonY =
      this.app.layer.h -
      (this.BUTTON_BOTTOM_CELL_SIZE_RATIO +
        this.BUTTON_HEIGHT_CELL_SIZE_RATIO) *
        this.app.layer.cellSize;
    const buttonWidth = this.BUTTON_WIDTH_CELL_SIZE_RATIO * this.app.layer.cellSize;
    const buttonHeight =
      this.BUTTON_HEIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize;

    // Рисуем кнопку
    this.app.layer.context.beginPath();
    this.app.layer.context.roundRect(
      buttonX,
      buttonY,
      buttonWidth,
      buttonHeight,
      this.app.layer.cellSize * this.BORDER_RADIUS_CELL_SIZE_RATIO,
    );
    this.app.layer.context.strokeStyle = this.BORDER_COLOR;
    this.app.layer.context.lineWidth =
      this.app.layer.cellSize * this.LINE_WIDTH_CELL_SIZE_RATIO;

    this.app.layer.context.fillStyle = this.FILL_COLOR;
    this.app.layer.context.fill();
    this.app.layer.context.stroke();

    // Настраиваем шрифт и центрируем текст
    this.app.layer.context.font = `${this.app.layer.cellSize * this.TEXT_CELL_SIZE_RATIO}px monospace`;
    this.app.layer.context.fillStyle = this.TEXT_COLOR;
    this.app.layer.context.textAlign = "center"; // Центрирование по горизонтали
    this.app.layer.context.textBaseline = "middle"; // Центрирование по вертикали

    // Центр кнопки
    const centerX = buttonX + buttonWidth / 2;
    const centerY = buttonY + buttonHeight / 2;

    this.app.layer.context.fillText(this.TEXT_BUTTON, centerX, centerY);

    // Восстанавливаем настройки текста (если нужно)
    this.app.layer.context.textAlign = "start";
    this.app.layer.context.textBaseline = "alphabetic";
  }

  onClick() {
    this.app.map.dy += 0.44 * this.app.layer.cellSize;
  }
}