path: root/index.js

'use strict'

const canvas = document.getElementById('canvas')

class Sprite {
  constructor() {
    this.x = 0
    this.y = 0
    this.canvas = document.createElement('canvas')
    this.image = document.createElement('img')
  }

  update(dt) {}

  draw() {
    if (this.image.complete) {
      this.canvas.width = this.image.width
      this.canvas.height = this.image.height
      const ctx = this.canvas.getContext('2d')
      this.applySpriteEffects(ctx)
      ctx.drawImage(this.image, 0, 0)
    }
  }

  applySpriteEffects(ctx) {}
}

class Backdrop extends Sprite {
  constructor() {
    super()
    this.image.src = 'img/bg.png'
  }
}

class ATBBar {
  constructor(battleCharacter) {
    // Parts

    this.battleCharacter = battleCharacter
    this.battle = this.battleCharacter.battle

    // 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.fillStyle = 'rgba(255, 255, 255, 0.2)'
    ctx.fillRect(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 * 1.5 / this.segmentCount)
    }

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

    // Start action chain once user has confirmed (willExecuteChain = true) and IP gauge is full enough to execute all actions
    if (this.battleCharacter.willExecuteChain && this.progress >= 1 - this.getRemainingSpace() / this.segmentCount) {
      this.battleCharacter.willExecuteChain = false
      this.battleCharacter.isExecutingChain = true // Will be acknowledged by next if statement
    }

    // 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
        this.battle.changeMenuAnim = {old: null, direction: 1, time: 1}
        this.battle.currentMenu = this.battle.actionMenu
      }
    }
  }

  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
      const cutoff = this.getCutoff()
      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.battle.hideCurrentMenu()
      this.battleCharacter.isExecutingChain = true
    }
  }

  activateOnceGaugeFull() {
    this.battle.hideCurrentMenu()
    this.battleCharacter.willExecuteChain = true
  }

  getCutoff() {
    // Cutoff point in the action queue where ATB does not fill the action
    let cutoff = 0, segment = 0
    while (cutoff < this.queuedActions.length) {
      segment += this.queuedActions[cutoff].size
      if (segment > this.progress * this.segmentCount) {
        break
      }
      cutoff++
    }
    return cutoff
  }
}

class HPBar {
  // Unlike ATBBar, HPBar does not actually deal with any logic.

  constructor(battleCharacter) {
    // Parts

    this.battleCharacter = battleCharacter

    // State

    this.progress = 0
    this.visualProgress = 0

    // Drawing

    this.canvas = document.createElement('canvas')
    this.canvas.width = 80
    this.canvas.height = 5
  }

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

    ctx.fillStyle = 'rgba(255, 255, 255, 0.2)'
    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
    ctx.save()

    ctx.beginPath()
    ctx.rect(1, 1, Math.ceil((this.canvas.width - 2) * this.visualProgress), this.canvas.height - 2)
    ctx.clip()

    ctx.fillStyle = '#5E5'
    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)
  }

  update(dt) {
    this.progress = this.battleCharacter.hp / this.battleCharacter.maxHP
    this.visualProgress += 8 * dt * (this.progress - this.visualProgress)
  }
}

class BaseBattleMenu {
  constructor({options}) {
    this.canvas = document.createElement('canvas')

    this.options = options
    this.currentOptionIndex = 0

    // 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)

    if (this.options.length === 0) {
      // ..Well..
      return
    }

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

    const len = this.options.length

    this.drawY = 1
    for (let i = startIndex; i < endIndex; i++) {
      const option = this.options[i === -1 ? len - 1 : i === len ? 0 : i]
      this.drawOption(option, ctx)
    }
  }

  drawOption(option, ctx) {
    const rectW = this.getOptionW(option)
    if (option === this.options[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, this.drawY, rectW, 9)
    ctx.strokeStyle = 'black'
    ctx.strokeRect(1.5, this.drawY + 0.5, rectW - 1, 8)
    ctx.textAlign = 'center'
    ctx.fillStyle = 'black'
    ctx.font = '5px pixel-font'
    ctx.fillText(option.label, 1 + Math.round(rectW / 2), this.drawY + 2 + 9 / 2)
    this.drawY += 10
  }

  getOptionW(option) {
    return this.canvas.width - 2
  }

  getCurrentOption() {
    return this.options[this.currentOptionIndex]
  }

  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
    }
  }
}

class ActionMenu extends BaseBattleMenu {
  constructor(battle) {
    super({options: [
      ['Fire', 'Fira', 'Firaga'],
      ['Blizz', 'Blizza', 'Blizzaga'],
      ['Aero', 'Aerora', 'Aeroga'],
      ['Zap', 'Zappa', 'Zappaga'],
      ['Bio', 'Biora'],
      ['Stun', 'Stunra', 'Stunga']
    ].map(arr => ({levelTexts: arr}))})

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

  drawOption(option, ctx) {
    const maxLevel = this.getMaxLevel(option)
    const effectiveLevel = this.getEffectiveLevel(option)
    option.label = option.levelTexts[effectiveLevel - 1]
    if (effectiveLevel < maxLevel) {
      const ghostRectW = this.getLevelW(maxLevel)
      ctx.fillStyle = 'rgba(255, 255, 255, 0.3)'
      ctx.fillRect(1.5, this.drawY + 0.5, ghostRectW, 8)
      ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)'
      ctx.strokeRect(1.5, this.drawY + 0.5, ghostRectW, 8)
    }
    super.drawOption(option, ctx)
  }

  getOptionW(option) {
    return this.getLevelW(this.getEffectiveLevel(option))
  }

  getEffectiveLevel(option) {
    return Math.min(option.levelTexts.length, this.uiLevel)
  }

  getMaxLevel(option) {
    return option.levelTexts.length
  }

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

  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 = this.getMaxLevel(option)
    const effectiveLevel = Math.min(maxLevel, this.uiLevel)
    const remainingSpace = atbBar.getRemainingSpace()

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

      if (effectiveLevel === remainingSpace) {
        this.battle.showTargetMenu()
      }
    } else {
      // TODO: Feedback
    }
  }
}

class TargetMenu extends BaseBattleMenu {
  constructor(battle) {
    super({options: []})
    this.battle = battle
  }

  buildOptions() {
    this.options = this.battle.playerCharacter.getValidOffenseTargets()
      .map(char => ({label: char.name, battleCharacter: char}))
  }
}

class BattleCharacter extends Sprite {
  constructor({team, battle}) {
    super()

    // Parts

    this.team = team
    this.battle = battle
    this.atbBar = new ATBBar(this)
    this.image.src = 'img/char.png'

    // State

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

    this.targetCharacter = null

    this.name = 'Unnamed'

    this.hp = 500
    this.maxHP = 500
    this.dead = false

    this.hpBar = new HPBar(this)
  }

  update(dt) {
    this.hpBar.update(dt)

    if (this.dead) {
      this.deadUpdate(dt)
    } else {
      this.aliveUpdate(dt)
    }
  }

  aliveUpdate(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
      }
    }
  }

  deadUpdate(dt) {
    // Do nothing, for now.
  }

  applySpriteEffects(ctx) {
    if (this.dead) {
      ctx.filter = 'grayscale(100%)'
    }
  }

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

    this.isExecutingChain = true
    this.isExecutingAction = true
    this.actionExecuteTime = 0.4 + 0.2 * action.size

    if (this.targetCharacter) {
      this.targetCharacter.takeDamage(action.size * 60)

      if (this.targetCharacter.dead) {
        this.determineNewOffenseTarget()
      }
    }
  }

  determineNewOffenseTarget() {
    const targets = this.getValidOffenseTargets()
    if (targets.length) {
      this.targetCharacter = targets[0]
    } else {
      this.targetCharacter = null
    }
  }

  getValidOffenseTargets() {
    return battle.getAllBattleCharacters()
      .filter(char => char.team !== battle.playerCharacter.team)
      .filter(char => !char.dead)
  }

  takeDamage(damage) {
    if (!this.dead) {
      this.hp -= damage
      if (this.hp <= 0) {
        this.hp = 0
        this.dead = true
      }
    }
  }
}

class Battle {
  constructor() {
    // Parts

    this.teams = [
      new Team({battle: this}),
      new Team({battle: this})
    ]

    this.playerCharacter = this.teams[0].characters[0]

    this.actionMenu = new ActionMenu(this)
    this.targetMenu = new TargetMenu(this)

    this.backdrop = new Backdrop()

    this.camera = new Camera()
    this.camera.follow(this.playerCharacter)

    this.canvas = document.createElement('canvas')

    // State

    this.gameState = 'battle' // battle, pre-win, win

    this.currentMenu = this.actionMenu
    this.changeMenuAnim = {time: 1, direction: 1, old: null}
    this.preWinAnim = null
  }

  draw() {
    const ctx = canvas.getContext('2d')
    let targetX = 0, targetY = 0
    const targetCharacter = (
      this.currentMenu === this.targetMenu && this.targetMenu.getCurrentOption() && this.targetMenu.getCurrentOption().battleCharacter ||
      this.playerCharacter.targetCharacter)

    ctx.save()
    ctx.translate(-camera.x, -camera.y)
    for (const sprite of [this.backdrop, ...this.getAllBattleCharacters()]) {
      const x = sprite.x - sprite.canvas.width / 2
      const y = sprite.y - sprite.canvas.height / 2
      sprite.draw()
      ctx.drawImage(sprite.canvas, x, y)

      if (targetCharacter === sprite) {
        targetX = sprite.x - camera.x
        targetY = y - camera.y
      }
    }
    ctx.restore()

    const { atbBar } = this.playerCharacter

    // TODO: transition y for menus.. let targetY
    let y = canvas.height - 20
    if (this.changeMenuAnim && this.changeMenuAnim.old) {
      const { old: oldMenu, time, direction } = this.changeMenuAnim
      oldMenu.draw()
      ctx.save()
      ctx.translate(Math.floor(10 * (time - 1) * direction), 0)
      ctx.filter = `opacity(${time * 100}%)`
      ctx.drawImage(oldMenu.canvas, 20, y - oldMenu.canvas.height)
      ctx.restore()
    }
    if (this.currentMenu) {
      this.currentMenu.draw()
      ctx.save()
      if (this.changeMenuAnim) {
        const { time, direction } = this.changeMenuAnim
        ctx.translate(Math.floor(10 * time * direction), 0)
        ctx.filter = `opacity(${(1 - time) * 100}%)`
      }
      ctx.drawImage(this.currentMenu.canvas, 20, y - this.currentMenu.canvas.height)
      ctx.restore()
    }
    const targetOffset = this.currentMenu ? this.currentMenu.canvas.height : 0
    const oldOffset = (this.changeMenuAnim && this.changeMenuAnim.old) ? this.changeMenuAnim.old.canvas.height : 0
    y -= oldOffset + (targetOffset - oldOffset) * (this.changeMenuAnim ? 1 - this.changeMenuAnim.time : 1)
    y -= 2
    ctx.save()
    if (this.preWinAnim || this.gameState === 'win') {
      const { time } = this.preWinAnim || {time: 0}
      ctx.translate(0, Math.floor(-20 * (time - 1)))
      ctx.filter = `opacity(${time * 100}%)`
    }
    atbBar.draw()
    ctx.drawImage(atbBar.canvas, 20, y - atbBar.canvas.height)

    y = canvas.height - 20
    for (const { hpBar } of this.playerCharacter.team.characters) {
      y -= hpBar.canvas.height
      hpBar.draw()
      ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
      y -= 2
    }
    ctx.restore()

    if (targetCharacter) {
      const hpBar = targetCharacter.hpBar
      const x = targetX - hpBar.canvas.width / 2
      const y = targetY - hpBar.canvas.height
      hpBar.draw()
      ctx.drawImage(hpBar.canvas, x, y)
    }
  }

  update(dt) {
    if (this.gameState === 'battle') {
      this.battleUpdate(dt)
    } else if (this.gameState === 'pre-win') {
      this.preWinUpdate(dt)
    }
  }

  battleUpdate(dt) {
    for (const team of this.teams) {
      team.update(dt)
    }

    this.camera.update(dt)

    if (this.changeMenuAnim) {
      this.changeMenuAnim.time -= 5 * dt
      if (this.changeMenuAnim.time <= 0) {
        this.changeMenuAnim = null
      }
    }

    if (!this.getAllBattleCharacters().find(c => c.team !== this.playerCharacter.team && !c.dead)) {
      this.gameState = 'pre-win'
      this.preWinAnim = {time: 1}
    }
  }

  preWinUpdate(dt) {
    this.preWinAnim.time -= dt * 3
    if (this.preWinAnim.time <= 0) {
      this.preWinAnim = null
      this.gameState = 'win'
    }
  }

  showTargetMenu() {
    this.changeMenuAnim = {old: this.currentMenu, direction: 1, time: 1}
    this.currentMenu = this.targetMenu
    this.targetMenu.buildOptions()
  }

  hideCurrentMenu() {
    this.changeMenuAnim = {old: this.currentMenu, direction: 1, time: 1}
    this.currentMenu = null
  }

  getAllBattleCharacters() {
    return this.teams.reduce((acc, team) => acc.concat(team.characters), [])
  }
}

class Team {
  constructor({battle}) {
    this.battle = battle
    this.characters = [
      new BattleCharacter({team: this, battle}),
      new BattleCharacter({team: this, battle}),
      new BattleCharacter({team: this, battle})
    ]
  }

  update(dt) {
    for (const character of this.characters) {
      character.update(dt)
    }
  }
}

class Camera extends Sprite {
  constructor() {
    super()

    this.spriteToFollow = null
    this.width = 200
    this.height = 200
  }

  update(dt) {
    if (this.spriteToFollow) {
      this.x = this.spriteToFollow.x - this.width / 2
      this.y = this.spriteToFollow.y - this.height / 2
    }
  }

  follow(sprite) {
    this.spriteToFollow = sprite
  }
}

const battle = new Battle()

for (let ti = 0; ti < battle.teams.length; ti++) {
  const team = battle.teams[ti]
  for (let ci = 0; ci < team.characters.length; ci++) {
    Object.assign(team.characters[ci], [
      [
        {x: 0, y: 240, name: 'Ren'},
        {x: -40, y: 240, name: 'Fie'},
        {x: 40, y: 240, name: 'Grat'}
      ],
      [
        {x: -40, y: 200, name: 'Nomber A'},
        {x: 0, y: 200, name: 'Nomber B'},
        {x: 40, y: 200, name: 'Flaprat'}
      ]
    ][ti][ci])
  }
}

const camera = battle.camera
camera.width = canvas.width
camera.height = canvas.height

battle.canvas.width = canvas.width
battle.canvas.height = canvas.height

battle.backdrop.y = 300 / 2

let lastTime = Date.now()

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

  battle.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)

  battle.draw()
  if (battle.preWinAnim) {
    ctx.filter = `grayscale(${(1 - battle.preWinAnim.time) * 100}%)`
  } else if (battle.gameState === 'win') {
    ctx.filter = 'grayscale(100%)'
  }
  ctx.drawImage(battle.canvas, 0, 0)

  requestAnimationFrame(drawLoop)
}

canvas.addEventListener('keypress', evt => {
  const { actionMenu, targetMenu, currentMenu } = battle
  const { atbBar } = battle.playerCharacter
  if (!battle.playerCharacter.isExecutingChain && battle.currentMenu) {
    if (evt.keyCode === 38) {
      currentMenu.upOption()
    } else if (evt.keyCode === 40) {
      currentMenu.downOption()
    } else if (currentMenu === actionMenu) {
      if (evt.keyCode === 37) {
        currentMenu.decreaseLevel()
      } else if (evt.keyCode === 39) {
        currentMenu.increaseLevel()
      } else if (evt.which === 32) {
        currentMenu.queueTo(atbBar)
      } else if (evt.keyCode === 8) {
        atbBar.dequeue()
      } else if (evt.keyCode === 13 || evt.key.toLowerCase() === 'e') {
        if (battle.playerCharacter.atbBar.queuedActions.length) {
          battle.showTargetMenu()
        }
      }
    } else if (currentMenu === targetMenu) {
      if (evt.keyCode === 13 || evt.key.toLowerCase() === 'e' || evt.which === 32) {
        battle.playerCharacter.targetCharacter = currentMenu.getCurrentOption().battleCharacter
        if (evt.key.toLowerCase() === 'e') {
          atbBar.activate()
        } else {
          atbBar.activateOnceGaugeFull()
        }
      } else if (evt.keyCode === 8) {
        battle.currentMenu = actionMenu
        battle.changeMenuAnim = {old: targetMenu, direction: -1, time: 1}
      }
    }
  } else {
    // TODO: Backspace to cancel chain
    // TODO: E to execute chain immediately
  }
})

canvas.focus()

requestAnimationFrame(drawLoop)