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

js/elements/modals/ModalNewGame.js
99 строк3 KB
memoryspeak
create modal window : new game
08 фев 2026, 10:48
08 фев 2026, 10:48585ac31
export default class ModalNewGame {

  CONFIRM_BUTTON_WIDTH_CELL_SIZE_RATIO = 3;
  CONFIRM_BUTTON_HEIGHT_CELL_SIZE_RATIO = 1;
  CONFIRM_BUTTON_TOP_BY_CENTER_CELL_SIZE_RATIO = 0.5;

  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.3;

  FILL_COLOR = "rgba(62, 136, 62, 0.9)";

  QUESTION_TEXT = 'Start a new game?';
  CONFIRM_BUTTON_TEXT = 'Ok';

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

    this.confirmButtonWasDown = false;
  };

  update() {
    if (this.isMouseInConfirmButton()) {
      if (this.input.mouse.isDown) {
        this.confirmButtonWasDown = true;
      } else {
        if (this.confirmButtonWasDown) {
          this.onConfirm();
        };
        this.confirmButtonWasDown = false;
      };
    } else {
      if (!this.input.mouse.isDown) {
        this.confirmButtonWasDown = false;
      };
    };
  };

  isMouseInConfirmButton() {
    return this.input.mouse.x > (this.layer.w - this.CONFIRM_BUTTON_WIDTH_CELL_SIZE_RATIO * this.layer.cellSize) / 2 &&
      this.input.mouse.x < (this.layer.w + this.CONFIRM_BUTTON_WIDTH_CELL_SIZE_RATIO * this.layer.cellSize) / 2 &&
      this.input.mouse.y > this.layer.h / 2 + this.CONFIRM_BUTTON_TOP_BY_CENTER_CELL_SIZE_RATIO * this.layer.cellSize &&
      this.input.mouse.y < this.layer.h / 2 + (this.CONFIRM_BUTTON_TOP_BY_CENTER_CELL_SIZE_RATIO + this.CONFIRM_BUTTON_HEIGHT_CELL_SIZE_RATIO) * this.layer.cellSize;
  };

  onConfirm() {
    this.database.clear();
    window.location.reload();
  };

  draw() {
    this.drawQuestion();
    this.drawConfirmBasicRect();
    this.drawConfirmText();
  };

  drawQuestion() {
    this.layer.context.font = `bold ${this.layer.cellSize * this.TEXT_CELL_SIZE_RATIO}px monospace`;
    this.layer.context.fillStyle = this.TEXT_COLOR;
    this.layer.context.fillText(
      this.QUESTION_TEXT,
      this.layer.w / 2 - this.QUESTION_TEXT.length * this.layer.cellSize * this.TEXT_CELL_SIZE_RATIO / 3.3,
      this.layer.h / 2 + this.layer.cellSize * this.TEXT_CELL_SIZE_RATIO / 3
    );
  };

  drawConfirmBasicRect() {
    this.layer.context.beginPath();
    this.layer.context.roundRect(
      (this.layer.w - this.CONFIRM_BUTTON_WIDTH_CELL_SIZE_RATIO * this.layer.cellSize) / 2,
      this.layer.h / 2 + this.CONFIRM_BUTTON_TOP_BY_CENTER_CELL_SIZE_RATIO * this.layer.cellSize,
      this.CONFIRM_BUTTON_WIDTH_CELL_SIZE_RATIO * this.layer.cellSize,
      this.CONFIRM_BUTTON_HEIGHT_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();
  };

  drawConfirmText() {
    this.layer.context.font = `bold ${this.layer.cellSize * this.TEXT_CELL_SIZE_RATIO}px monospace`;
    this.layer.context.fillStyle = this.TEXT_COLOR;
    this.layer.context.fillText(
      this.CONFIRM_BUTTON_TEXT,
      this.layer.w / 2 - this.CONFIRM_BUTTON_TEXT.length * this.layer.cellSize * this.TEXT_CELL_SIZE_RATIO / 3.3,
      this.layer.h / 2 + (this.CONFIRM_BUTTON_TOP_BY_CENTER_CELL_SIZE_RATIO + this.CONFIRM_BUTTON_HEIGHT_CELL_SIZE_RATIO / 2) * this.layer.cellSize + this.layer.cellSize * this.TEXT_CELL_SIZE_RATIO / 3
    );
  };
};