top-down-action-adventure/src/message.js

export default class Message {
  constructor(game, text) {
    this.game = game
    this.text = text.split("\n")
    this.currentText = this.text.shift()
    this.textColor = "white"
    this.backgroundColor = "black"
    this.textIndex = 0
    this.textProgress = 0.0
    this.textSpeed = 0.08 // seconds per character
    this.backgroundHeight = 40
    this.textSize = 30
  }

  tick(dt) {
    this.textProgress += (dt / 1000.0) / this.textSpeed
    this.textIndex = Math.floor(this.textProgress)

    const ijp = this.game.input.isInputJustPressed("interact")
    if (ijp) {
      if (this.messageComplete()) {
	this.game.closeMessage(this)
      } else if (this.lineComplete()) {
	this.currentText = this.text.shift()
	this.textProgress = 0.0
	this.textIndex = 0
      } else {
	this.textProgress = this.currentText.length
      }
    }
  }

  draw(ctx) {
    ctx.fillStyle = this.backgroundColor
    ctx.fillRect(0, 0, ctx.canvas.width, this.backgroundHeight)
    ctx.font = `bold ${this.textSize}px sans-serif`
    ctx.textBaseline = "top"
    ctx.fillStyle = this.textColor
    ctx.fillText(this.currentText.substring(0, this.textIndex), 5, 5)
    if (this.messageComplete()) {
      ctx.fillRect(
	ctx.canvas.width - 20, 
	this.backgroundHeight - 20, 
	10, 10
      )
    } else if (this.lineComplete()) {
      ctx.beginPath()
      ctx.moveTo(ctx.canvas.width - 20, this.backgroundHeight - 20)
      ctx.lineTo(ctx.canvas.width - 20, this.backgroundHeight - 10)
      ctx.lineTo(ctx.canvas.width - 15, this.backgroundHeight - 15)
      ctx.lineTo(ctx.canvas.width - 20, this.backgroundHeight - 20)
      ctx.fill()
      ctx.closePath()
    }
  }

  lineComplete() {
    return this.textIndex >= this.currentText.length + 3
  }

  messageComplete() {
    return this.lineComplete() && !this.text.length
  }
}