path: root/index.js

'use strict'

const canvas = document.getElementById('canvas')

class ATBBar {
  constructor(battleCharacter) {
    // Parts

    this.battleCharacter = battleCharacter

    // State

    this.progress = 0
    this.visualProgress = 0
    this.segmentCount = 6
    this.queuedActions = []

    // Drawing

    this.canvas = document.createElement('canvas')
    this.canvas.width = 200
    this.canvas.height = 13
  }

  draw() {
    const ctx = this.canvas.getContext('2d')
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    ctx.save()

    ctx.beginPath()
    ctx.rect(0, 0, Math.round(this.canvas.width * this.visualProgress), this.canvas.height)
    ctx.clip()

    ctx.fillStyle = '#77F'
    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)

    ctx.restore()
    ctx.strokeStyle = '#000'
    ctx.strokeRect(0.5, 0.5, this.canvas.width - 1, this.canvas.height - 1)

    const segmentWidth = this.canvas.width / this.segmentCount

    for (let i = 1; i < this.segmentCount; i++) {
      const x = Math.round(segmentWidth * i) + 0.5
      ctx.beginPath()
      ctx.moveTo(x, 0)
      ctx.lineTo(x, this.canvas.height)
      ctx.stroke()
    }

    {
      let i = 0
      for (const action of this.queuedActions) {
        const rectX = Math.round(segmentWidth * i) + 2
        const rectW = Math.round(segmentWidth * (i + action.size)) - rectX - 2 - (i + action.size === this.segmentCount ? 1 : 0) // Ternary so it doesn't touch the right-edge of the entire ATB gauge box
        const textX = Math.round(rectX + rectW / 2)
        const rectH = this.canvas.height - 5
        const text = action.label
        const actionFilled = this.progress * this.segmentCount >= i + action.size
        if (actionFilled) {
          ctx.fillStyle = 'gold'
        } else {
          ctx.fillStyle = 'white'
        }
        ctx.fillRect(rectX, 2, rectW, rectH)
        ctx.strokeStyle = 'black'
        ctx.strokeRect(rectX + 0.5, 2.5, rectW, rectH)
        ctx.textAlign = 'center'
        ctx.fillStyle = 'black'
        ctx.font = '5px pixel-font'
        ctx.fillText(text, textX, this.canvas.height / 2 + 2.5)
        i += action.size
      }
    }
  }

  update(dt) {
    // ATB gauge progressing
    if (!this.battleCharacter.isExecutingChain) {
      this.progress = Math.min(1, this.progress + dt / this.segmentCount)
    }

    // ATB gauge visual update
    this.visualProgress += 8 * dt * (this.progress - this.visualProgress)

    // Action chaining
    if (this.battleCharacter.isExecutingChain && !this.battleCharacter.isExecutingAction) {
      if (this.queuedActions.length) {
        const action = this.queuedActions.shift()
        this.battleCharacter.executeAction(action)
        this.progress -= 1 / this.segmentCount * action.size
      } else {
        this.battleCharacter.isExecutingChain = false
      }
    }
  }

  getRemainingSpace() {
    return this.segmentCount - this.queuedActions.reduce((acc, { size }) => acc + size, 0)
  }

  dequeue() {
    this.queuedActions.pop()
  }

  activate() {
    if (this.queuedActions.length) {
      // Cut off the actions that we don't have enough ATB charge for
      let cutoff = 0, segment = 0
      while (cutoff < this.queuedActions.length) {
        segment += this.queuedActions[cutoff].size
        if (segment > this.progress * this.segmentCount) {
          break
        }
        cutoff++
      }
      if (cutoff === 0) {
        // If we don't have enough charge to execute even one action, just don't do anything
        return
      }
      this.queuedActions.splice(cutoff)

      this.battleCharacter.isExecutingChain = true
    }
  }
}

class ActionMenu {
  constructor() {
    this.canvas = document.createElement('canvas')

    // State

    this.options = [
      ['Fire', 'Fira', 'Firaga'],
      ['Blizz', 'Blizza', 'Blizzaga'],
      ['Aero', 'Aerora', 'Aeroga'],
      ['Zap', 'Zappa', 'Zappaga'],
      ['Bio', 'Biora'],
      ['Stun', 'Stunra', 'Stunga']
    ]

    this.currentOptionIndex = 3
    this.uiLevel = 1 // 1-3 -- which of "fire", "fira", "firaga" is selected.

    // Drawing

    // Button height is 9, with a margin of 1 between each plus 1 at the top and bottom.
    const visibleButtonCount = 3
    this.canvas.height = 9 * visibleButtonCount + 1 * (visibleButtonCount - 1) + 2

    // Should be the width of a 3-segment ATB bar.
    this.canvas.width = 100
  }

  draw() {
    const ctx = this.canvas.getContext('2d')
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    const startIndex = this.currentOptionIndex - 1
    const endIndex = startIndex + 3

    const len = this.options.length

    let y = 1
    for (let i = startIndex; i < endIndex; i++) {
      const option = this.options[i === -1 ? len - 1 : i === len ? 0 : i]
      const maxLevel = option.length
      const effectiveLevel = Math.min(maxLevel, this.uiLevel)
      const text = option[effectiveLevel - 1]
      const rectW = this.getRectW(effectiveLevel)
      if (effectiveLevel < maxLevel) {
        const ghostRectW = this.getRectW(maxLevel)
        ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'
        ctx.fillRect(1, y, ghostRectW, 9)
        ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)'
        ctx.strokeRect(1.5, y + 0.5, ghostRectW, 8)
      }
      if (i === this.currentOptionIndex) {
        const mul = Math.sin(Date.now() / 200) * 0.125 + 0.875
        ctx.fillStyle = `rgb(${mul * 255}, ${mul * 127}, 0)`
      } else {
        ctx.fillStyle = 'white'
      }
      ctx.fillRect(1, y, rectW, 9)
      ctx.strokeStyle = 'black'
      ctx.strokeRect(1.5, y + 0.5, rectW - 1, 8)
      ctx.textAlign = 'center'
      ctx.fillStyle = 'black'
      ctx.font = '5px pixel-font'
      ctx.fillText(text, 1 + Math.round(rectW / 2), y + 2 + 9 / 2)

      y += 10
    }
  }

  getRectW(level) {
    return Math.floor((this.canvas.width - 2) / 3 * level)
  }

  downOption() {
    this.currentOptionIndex++

    if (this.currentOptionIndex >= this.options.length) {
      this.currentOptionIndex = 0
    }
  }

  upOption() {
    this.currentOptionIndex--

    if (this.currentOptionIndex <= -1) {
      this.currentOptionIndex = this.options.length - 1
    }
  }

  increaseLevel() {
    this.uiLevel++
    if (this.uiLevel > 3) {
      this.uiLevel = 3
    }
  }

  decreaseLevel() {
    this.uiLevel--
    if (this.uiLevel < 1) {
      this.uiLevel = 1
    }
  }

  queueTo(atbBar) {
    const option = this.options[this.currentOptionIndex]
    const maxLevel = option.length
    const effectiveLevel = Math.min(maxLevel, this.uiLevel)
    const remainingSpace = atbBar.getRemainingSpace()

    if (effectiveLevel <= remainingSpace) {
      atbBar.queuedActions.push({
        label: option[effectiveLevel - 1],
        size: effectiveLevel
      })
    } else {
      // TODO: Feedback
    }
  }
}

class BattleCharacter {
  constructor() {
    // Parts

    this.atbBar = new ATBBar(this)

    // State

    this.isExecutingChain = false
    this.isExecutingAction = false
    this.actionExecuteTime = 0
  }

  executeAction(action) {
    if (this.isExecutingActions) {
      throw new Error('Called executeAction while already executing actions')
    }

    this.isExecutingChain = true
    this.isExecutingAction = true
    this.actionExecuteTime = 1
  }

  update(dt) {
    this.atbBar.update(dt)

    if (this.isExecutingChain && !this.isExecutingAction) {
      throw new Error('Executing chain but not action for more than one update.. ATB Bar should have queued an action or ended the chain')
    }

    if (this.actionExecuteTime) {
      this.actionExecuteTime -= dt

      if (this.actionExecuteTime <= 0) {
        this.actionExecuteTime = 0
        this.isExecutingAction = false
      }
    }
  }
}

const battleCharacter = new BattleCharacter()

const atbBar = battleCharacter.atbBar
//atbBar.queuedActions = [{label: 'Fire', size: 1}, {label: 'Blizz', size: 1}, {label: 'Zap', size: 1}, {label: 'Firaga', size: 3}]

const actionMenu = new ActionMenu()

let lastTime = Date.now()

function drawLoop() {
  const dt = (Date.now() - lastTime) / 1000
  lastTime = Date.now()

  battleCharacter.update(dt)

  const ctx = canvas.getContext('2d')
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.fillStyle = '#EEE'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  let y = canvas.height - 20
  if (!battleCharacter.isExecutingChain) {
    y -= actionMenu.canvas.height
    actionMenu.draw()
    ctx.drawImage(actionMenu.canvas, 20, y)
    y -= 2
  }
  atbBar.draw()
  ctx.drawImage(atbBar.canvas, 20, y - atbBar.canvas.height)

  requestAnimationFrame(drawLoop)
}

canvas.addEventListener('keypress', evt => {
  if (!battleCharacter.isExecutingChain) {
    if (evt.keyCode === 38) {
      actionMenu.upOption()
    } else if (evt.keyCode === 40) {
      actionMenu.downOption()
    } else if (evt.keyCode === 37) {
      actionMenu.decreaseLevel()
    } else if (evt.keyCode === 39) {
      actionMenu.increaseLevel()
    } else if (evt.which === 32) {
      actionMenu.queueTo(atbBar)
    } else if (evt.keyCode === 8) {
      atbBar.dequeue()
    } else if (evt.keyCode === 13 || evt.key.toLowerCase() === 'e') {
      atbBar.activate()
    }
  } else {
    // TODO: Backspace to cancel chain
  }
})

requestAnimationFrame(drawLoop)