js/elements/modals/Modal.js - master - memoryspeak/UlamCodeWeb

js/elements/modals/Modal.js
159 строк5 KB
memoryspeak
refactor function parameters
17 фев 2026, 18:30
17 фев 2026, 18:30d5167b6
import ModalNewGame from "./ModalNewGame.js";

export default class Modal {
  MODAL_LEFT_CELL_SIZE_RATIO = 0.5;
  MODAL_TOP_CELL_SIZE_RATIO = 0.5;
  MODAL_RIGHT_CELL_SIZE_RATIO = 0.5;
  MODAL_BOTTOM_CELL_SIZE_RATIO = 0.5;

  BORDER_RADIUS_CELL_SIZE_RATIO = 0.1;

  BORDER_COLOR = "rgba(255, 255, 255, 0.8)";
  LINE_WIDTH_CELL_SIZE_RATIO = 0.02;

  FILL_COLOR = "rgba(0, 0, 0, 0.8)";

  CLOSE_BUTTON_COLOR = "rgba(255, 255, 255, 0.8)";
  CLOSE_BUTTON_CELL_SIZE_RATIO = 0.5;
  CLOSE_BUTTON_TEXT_VALUE = "×";
  CLOSE_BUTTON_TOP_CELL_SIZE_RATIO = 0.5;
  CLOSE_BUTTON_RIGHT_CELL_SIZE_RATIO = 0.5;

  DEFAULT_TYPE = "default";

  constructor(app) {
    this.layer = app.layer;
    this.input = app.input;
    this.database = app.database;

    this.isActive = false;

    this.closeButtonColor = this.CLOSE_BUTTON_COLOR;
    this.closeButtonCellSizeRatio = this.CLOSE_BUTTON_CELL_SIZE_RATIO;
    this.closeButtonTopCellSizeRatio = this.CLOSE_BUTTON_TOP_CELL_SIZE_RATIO;
    this.closeButtonRightCellSizeRatio =
      this.CLOSE_BUTTON_RIGHT_CELL_SIZE_RATIO;

    this.content = [];
    this.closeButtonWasDown = false;

    this.type = this.DEFAULT_TYPE; // newgame,

    this.modalNewGame = new ModalNewGame(this.input, this.layer, this.database);
  }

  update(correction) {
    if (!this.isActive) return;
    if (this.isMouseInCloseButton()) {
      this.closeButtonColor = "white";
      this.closeButtonCellSizeRatio = 0.55;
      this.closeButtonTopCellSizeRatio = 0.52;
      this.closeButtonRightCellSizeRatio = 0.52;
      if (this.input.mouse.isDown) {
        this.closeButtonWasDown = true;
      } else {
        if (this.closeButtonWasDown) {
          this.close();
        }
        this.closeButtonWasDown = false;
      }
    } else {
      if (!this.input.mouse.isDown) {
        this.closeButtonWasDown = false;
      }
      this.closeButtonColor = this.CLOSE_BUTTON_COLOR;
      this.closeButtonCellSizeRatio = this.CLOSE_BUTTON_CELL_SIZE_RATIO;
      this.closeButtonTopCellSizeRatio = this.CLOSE_BUTTON_TOP_CELL_SIZE_RATIO;
      this.closeButtonRightCellSizeRatio =
        this.CLOSE_BUTTON_RIGHT_CELL_SIZE_RATIO;
    }

    switch (this.type) {
      case "newgame": {
        this.modalNewGame.update();
        break;
      }
    }
  }

  isMouseInCloseButton() {
    return (
      this.input.mouse.x >
        this.layer.w -
          3 * this.MODAL_RIGHT_CELL_SIZE_RATIO * this.layer.cellSize &&
      this.input.mouse.x <
        this.layer.w - this.MODAL_RIGHT_CELL_SIZE_RATIO * this.layer.cellSize &&
      this.input.mouse.y >
        this.MODAL_RIGHT_CELL_SIZE_RATIO * this.layer.cellSize &&
      this.input.mouse.y <
        3 * this.MODAL_RIGHT_CELL_SIZE_RATIO * this.layer.cellSize
    );
  }

  draw() {
    if (!this.isActive) return;
    this.drawBasicRect();
    this.drawCloseButton();
    this.drawContent();
    switch (this.type) {
      case "newgame": {
        this.modalNewGame.draw();
        break;
      }
    }
  }

  drawBasicRect() {
    this.layer.context.beginPath();
    this.layer.context.roundRect(
      this.MODAL_LEFT_CELL_SIZE_RATIO * this.layer.cellSize,
      this.MODAL_TOP_CELL_SIZE_RATIO * this.layer.cellSize,
      this.layer.w -
        (this.MODAL_LEFT_CELL_SIZE_RATIO + this.MODAL_RIGHT_CELL_SIZE_RATIO) *
          this.layer.cellSize,
      this.layer.h -
        (this.MODAL_TOP_CELL_SIZE_RATIO + this.MODAL_BOTTOM_CELL_SIZE_RATIO) *
          this.layer.cellSize,
      this.layer.cellSize * this.BORDER_RADIUS_CELL_SIZE_RATIO,
    );
    this.layer.context.strokeStyle = this.BORDER_COLOR;
    this.layer.context.lineWidth =
      this.layer.cellSize * this.LINE_WIDTH_CELL_SIZE_RATIO;

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

    this.layer.context.stroke();
  }

  drawCloseButton() {
    this.layer.context.font = `bold ${this.layer.cellSize * this.closeButtonCellSizeRatio}px monospace`;
    this.layer.context.fillStyle = this.closeButtonColor;
    this.layer.context.fillText(
      this.CLOSE_BUTTON_TEXT_VALUE,
      this.layer.w -
        (this.MODAL_RIGHT_CELL_SIZE_RATIO +
          this.closeButtonRightCellSizeRatio) *
          this.layer.cellSize,
      (this.MODAL_TOP_CELL_SIZE_RATIO + this.closeButtonTopCellSizeRatio) *
        this.layer.cellSize,
    );
  }

  drawContent() {
    for (let i = 0; i < this.content.length; i++) {
      const item = this.content[i];
    }
  }

  show(type) {
    this.type = type ? type : this.DEFAULT_TYPE;
    this.isActive = true;
  }

  close() {
    this.content = [];
    this.isActive = false;
    this.type = "unknown";
  }
}