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

js/elements/controls/CenterButton.js
141 строка4 KB
memoryspeak
refactor function parameters
17 фев 2026, 18:30
17 фев 2026, 18:30d5167b6
export default class CenterButton {
  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.2;

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

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

  ON_LONG_INPUT_DELAY = 0.5;

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

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

    if (this.app.input.isPressSpace()) {
      this.onShortClick();
      return;
    }

    if (!this.app.areControls) return;

    if (this.app.input.mouse.isDown && this.isMouseInButton()) {
      if (this.onLongInputDelay > 0) {
        this.onLongInputDelay -= correction;
      } else {
        this.onLongClick();
        return;
      }
    }

    if (this.app.input.mouse.isUp && this.isMouseInButton()) {
      this.onShortClick();
    }
  }

  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.BUTTON_WIDTH_CELL_SIZE_RATIO) *
            this.app.layer.cellSize +
          this.BUTTON_WIDTH_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.BUTTON_HEIGHT_CELL_SIZE_RATIO) *
            this.app.layer.cellSize +
          this.BUTTON_HEIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize
    );
  }

  draw() {
    if (this.app.areControls) {
      this.drawBasicRect();
      this.drawCenterCircle();
    }
  }

  drawBasicRect() {
    this.app.layer.context.beginPath();
    this.app.layer.context.roundRect(
      this.app.layer.w -
        (this.BUTTON_RIGHT_CELL_SIZE_RATIO +
          this.BUTTON_WIDTH_CELL_SIZE_RATIO) *
          this.app.layer.cellSize,
      this.app.layer.h -
        (this.BUTTON_BOTTOM_CELL_SIZE_RATIO +
          this.BUTTON_HEIGHT_CELL_SIZE_RATIO) *
          this.app.layer.cellSize,
      this.BUTTON_WIDTH_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.BUTTON_HEIGHT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      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();
  }

  drawCenterCircle() {
    const centerX =
      this.app.layer.w -
      (this.BUTTON_RIGHT_CELL_SIZE_RATIO +
        this.BUTTON_WIDTH_CELL_SIZE_RATIO / 2) *
        this.app.layer.cellSize;
    const centerY =
      this.app.layer.h -
      (this.BUTTON_BOTTOM_CELL_SIZE_RATIO +
        this.BUTTON_HEIGHT_CELL_SIZE_RATIO / 2) *
        this.app.layer.cellSize;
    const radius = this.app.layer.cellSize * 0.066;

    this.app.layer.context.beginPath();
    this.app.layer.context.arc(centerX, centerY, radius, 0, 2 * Math.PI);

    const bgColor = "white";
    this.app.layer.context.fillStyle = bgColor;
    this.app.layer.context.fill();
    this.app.layer.context.lineWidth =
      this.app.layer.cellSize * this.LINE_WIDTH_CELL_SIZE_RATIO;
    this.app.layer.context.strokeStyle = this.BORDER_COLOR;
    this.app.layer.context.stroke();
  }

  onShortClick() {
    this.app.map.dx = 0;
    this.app.map.dy = 0;
    this.onLongInputDelay = this.ON_LONG_INPUT_DELAY;
  }

  onLongClick() {
    this.app.areControls = false;
    this.onLongInputDelay = this.ON_LONG_INPUT_DELAY;
  }
}