js/elements/Score.js - master - memoryspeak/UlamCodeWeb

js/elements/Score.js
109 строк3 KB
memoryspeak
add 25 mathematics
18 фев 2026, 00:38
18 фев 2026, 00:38006baaa
export default class Score {
  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.27;

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

  LABEL_HEIGHT_CELL_SIZE_RATIO = 1;
  LABEL_LEFT_CELL_SIZE_RATIO = 1.5;
  LABEL_BOTTOM_CELL_SIZE_RATIO = 0.25;

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

    const savedData = this.app.database.getAll();
    this.value = savedData ? savedData.scoreValue || 0 : 0;
    this.holes = savedData ? savedData.scoreHoles || 0 : 0;
  }

  update(correction) {
    if (this.app.modal.isActive) return;
    if (this.app.input.mouse.isDown && this.isMouseInButton()) this.onClick();
  }

  isMouseInButton() {
    return (
      this.app.input.mouse.x >
        this.LABEL_LEFT_CELL_SIZE_RATIO * this.app.layer.cellSize &&
      this.app.input.mouse.x < this.app.layer.w - 2.75 * this.app.layer.cellSize &&
      this.app.input.mouse.y >
        this.app.layer.h -
          (this.LABEL_BOTTOM_CELL_SIZE_RATIO +
            this.LABEL_HEIGHT_CELL_SIZE_RATIO) *
            this.app.layer.cellSize &&
      this.app.input.mouse.y <
        this.app.layer.h - this.LABEL_BOTTOM_CELL_SIZE_RATIO * this.app.layer.cellSize
    );
  }

  draw() {
    this.drawBasicRect();
    this.drawText();
  }

  drawBasicRect() {
    this.app.layer.context.beginPath();
    this.app.layer.context.roundRect(
      this.LABEL_LEFT_CELL_SIZE_RATIO * this.app.layer.cellSize,
      this.app.layer.h -
        (this.LABEL_BOTTOM_CELL_SIZE_RATIO +
          this.LABEL_HEIGHT_CELL_SIZE_RATIO) *
          this.app.layer.cellSize,
      this.app.layer.w - 4.25 * this.app.layer.cellSize,
      this.LABEL_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();
  }

  drawText() {
    this.app.layer.context.font = `bold ${this.app.layer.cellSize * this.TEXT_CELL_SIZE_RATIO}px monospace`;
    this.app.layer.context.fillStyle = this.TEXT_COLOR;
    const textLabel = `∴ ${this.value} · ⊠ ${this.holes}`;
    this.app.layer.context.fillText(
      textLabel,
      this.app.layer.w / 2 -
        0.66 * this.app.layer.cellSize -
        (textLabel.length * this.app.layer.cellSize * this.TEXT_CELL_SIZE_RATIO) /
          3.3,
      this.app.layer.h -
        (this.LABEL_BOTTOM_CELL_SIZE_RATIO +
          this.LABEL_HEIGHT_CELL_SIZE_RATIO / 2) *
          this.app.layer.cellSize +
        (this.app.layer.cellSize * this.TEXT_CELL_SIZE_RATIO) / 3,
    );
  }

  onClick() {
    this.app.modal.show("newgame");
  }

  decrementHoles() {
    if (this.holes > 1) {
      this.holes -= 2;
    } else if (this.holes > 0) {
      this.holes -= 1;
    } else {
      this.holes = 0;
    }
  }

  incrementHoles() {
    this.holes += 2;
  }
}