Target menu

1 files changed, 63 insertions, 24 deletions

diff --git a/index.js b/index.js
index 6621c98..a39f314 100644
--- a/index.js
+++ b/index.js
@@ -34,6 +34,7 @@ class ATBBar {
     // Parts
 
     this.battleCharacter = battleCharacter
+    this.battle = this.battleCharacter.battle
 
     // State
 
@@ -120,6 +121,7 @@ class ATBBar {
         this.progress -= 1 / this.segmentCount * action.size
       } else {
         this.battleCharacter.isExecutingChain = false
+        this.battle.currentMenu = this.battle.actionMenu
       }
     }
   }
@@ -149,6 +151,7 @@ class ATBBar {
       }
       this.queuedActions.splice(cutoff)
 
+      this.battle.currentMenu = null
       this.battleCharacter.isExecutingChain = true
     }
   }
@@ -251,7 +254,11 @@ class BaseBattleMenu {
   }
 
   getOptionW(option) {
-    return this.canvas.width
+    return this.canvas.width - 2
+  }
+
+  getCurrentOption() {
+    return this.options[this.currentOptionIndex]
   }
 
   downOption() {
@@ -346,6 +353,18 @@ class ActionMenu extends BaseBattleMenu {
   }
 }
 
+class TargetMenu extends BaseBattleMenu {
+  constructor() {
+    super({options: []})
+  }
+
+  buildOptions(battle) {
+    this.options = battle.getAllBattleCharacters()
+      .filter(char => char.team !== battle.playerCharacter.team)
+      .map(char => ({label: char.name, battleCharacter: char}))
+  }
+}
+
 class BattleCharacter extends Sprite {
   constructor({team, battle}) {
     super()
@@ -365,6 +384,8 @@ class BattleCharacter extends Sprite {
 
     this.targetCharacter = null
 
+    this.name = 'Unnamed'
+
     this.hp = 500
     this.maxHP = 500
     this.hpBar = new HPBar(this)
@@ -421,6 +442,7 @@ class Battle {
     this.playerCharacter = this.teams[0].characters[0]
 
     this.actionMenu = new ActionMenu()
+    this.targetMenu = new TargetMenu(this)
 
     this.backdrop = new Backdrop()
 
@@ -428,11 +450,18 @@ class Battle {
     this.camera.follow(this.playerCharacter)
 
     this.canvas = document.createElement('canvas')
+
+    // State
+
+    this.currentMenu = this.actionMenu
   }
 
   draw() {
     const ctx = canvas.getContext('2d')
     let targetX = 0, targetY = 0
+    const targetCharacter = (
+      this.currentMenu === this.targetMenu && this.targetMenu.getCurrentOption().battleCharacter ||
+      this.playerCharacter.targetCharacter)
 
     ctx.save()
     ctx.translate(-camera.x, -camera.y)
@@ -442,7 +471,7 @@ class Battle {
       sprite.draw()
       ctx.drawImage(sprite.canvas, x, y)
 
-      if (this.playerCharacter.targetCharacter === sprite) {
+      if (targetCharacter === sprite) {
         targetX = sprite.x - camera.x
         targetY = y - camera.y
       }
@@ -452,10 +481,10 @@ class Battle {
     const { atbBar, hpBar } = this.playerCharacter
 
     let y = canvas.height - 20
-    if (!this.playerCharacter.isExecutingChain) {
-      this.actionMenu.draw()
-      y -= this.actionMenu.canvas.height
-      ctx.drawImage(this.actionMenu.canvas, 20, y)
+    if (this.currentMenu) {
+      this.currentMenu.draw()
+      y -= this.currentMenu.canvas.height
+      ctx.drawImage(this.currentMenu.canvas, 20, y)
       y -= 2
     }
     atbBar.draw()
@@ -467,8 +496,8 @@ class Battle {
     hpBar.draw()
     ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
 
-    if (this.playerCharacter.targetCharacter) {
-      const hpBar = this.playerCharacter.targetCharacter.hpBar
+    if (targetCharacter) {
+      const hpBar = targetCharacter.hpBar
       const x = targetX - hpBar.canvas.width / 2
       const y = targetY - hpBar.canvas.height
       hpBar.draw()
@@ -527,8 +556,8 @@ class Camera extends Sprite {
 
 const battle = new Battle()
 
-Object.assign(battle.teams[0].characters[0], {x: 0, y: 240})
-Object.assign(battle.teams[1].characters[0], {x: 0, y: 200})
+Object.assign(battle.teams[0].characters[0], {x: 0, y: 240, name: 'Ren'})
+Object.assign(battle.teams[1].characters[0], {x: 0, y: 200, name: 'Phooey'})
 
 // battleCharacter.targetCharacter = enemyCharacter
 
@@ -561,23 +590,33 @@ function drawLoop() {
 }
 
 canvas.addEventListener('keypress', evt => {
-  const { actionMenu } = battle
+  const { actionMenu, targetMenu, currentMenu } = battle
   const { atbBar } = battle.playerCharacter
-  if (!battle.playerCharacter.isExecutingChain) {
+  if (!battle.playerCharacter.isExecutingChain && battle.currentMenu) {
     if (evt.keyCode === 38) {
-      actionMenu.upOption()
+      currentMenu.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()
+      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') {
+        battle.currentMenu = targetMenu
+        targetMenu.buildOptions(battle)
+      }
+    } else if (currentMenu === targetMenu) {
+      if (evt.keyCode === 13 || evt.key.toLowerCase() === 'e' || evt.which === 32) {
+        battle.playerCharacter.targetCharacter = currentMenu.getCurrentOption().battleCharacter
+        atbBar.activate()
+      } else if (evt.keyCode === 8) {
+        battle.currentMenu = actionMenu
+      }
     }
   } else {
     // TODO: Backspace to cancel chain