import { Sprite } from './entity.js';

class ScoreUiTextValue extends Sprite {
  constructor(title, x, y) {
    super(x, y)
    this.title = title;
  }

  setTitle(newTitle) {
    this.title = newTitle;
  }

  draw(val) {
    fill(255);

    textSize(18);
    text(this.title, this.x, this.y - 48)
    
    textSize(48);
    text(val, this.x, this.y)
  }
}

export class ScoreUi extends Sprite {
  constructor() {
    super((width / 2) + 175, height - 40);
    this.score = new ScoreUiTextValue("SCORE", this.x, this.y);
    this.combo = new ScoreUiTextValue("COMBO", this.x, this.y - 86);
  }

  draw() {
    this.combo.draw(window.gameScreen.score.combo);
    this.score.draw(window.gameScreen.score.score);
  }
}

export class CurrentSongUi extends Sprite {
  static draw(img, name, artist) {
    fill(255);

    textSize(18);
    text(artist, (width / 2) + 175 + 40, 40 + 24)
    
    textSize(24);
    text(name, (width / 2) + 175 + 40, 40)
  }
}

export class KeyHint extends Sprite {
  static draw(innerText, x, y) {
    stroke(255)
    noFill()
    textSize(16)
    rect(x - 8, y - 20, textWidth(innerText) + 16, 28)
    fill(255)
    noStroke()
    text(innerText, x, y)
  }
}