Battle class

1 files changed, 113 insertions, 62 deletions

diff --git a/index.js b/index.js
index 0789074..e6aae70 100644
--- a/index.js
+++ b/index.js
@@ -322,11 +322,13 @@ class ActionMenu {
 }
 
 class BattleCharacter extends Sprite {
-  constructor() {
+  constructor({team, battle}) {
     super()
 
     // Parts
 
+    this.team = team
+    this.battle = battle
     this.atbBar = new ATBBar(this)
     this.image.src = 'img/char.png'
 
@@ -382,6 +384,101 @@ class BattleCharacter extends Sprite {
   }
 }
 
+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.backdrop = new Backdrop()
+
+    this.camera = new Camera()
+    this.camera.follow(this.playerCharacter)
+
+    this.canvas = document.createElement('canvas')
+  }
+
+  draw() {
+    const ctx = canvas.getContext('2d')
+    let targetX = 0, targetY = 0
+
+    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 (this.playerCharacter.targetCharacter === sprite) {
+        targetX = sprite.x - camera.x
+        targetY = y - camera.y
+      }
+    }
+    ctx.restore()
+
+    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)
+      y -= 2
+    }
+    atbBar.draw()
+    y -= atbBar.canvas.height
+    ctx.drawImage(atbBar.canvas, 20, y)
+
+    y = canvas.height - 20
+    y -= hpBar.canvas.height
+    hpBar.draw()
+    ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
+
+    if (this.playerCharacter.targetCharacter) {
+      const hpBar = this.playerCharacter.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) {
+    for (const team of this.teams) {
+      team.update(dt)
+    }
+
+    this.camera.update(dt)
+  }
+
+  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})
+    ]
+  }
+
+  update(dt) {
+    for (const character of this.characters) {
+      character.update(dt)
+    }
+  }
+}
+
 class Camera extends Sprite {
   constructor() {
     super()
@@ -403,29 +500,21 @@ class Camera extends Sprite {
   }
 }
 
-const battleCharacter = new BattleCharacter()
-battleCharacter.x = 0
-battleCharacter.y = 240
-
-const enemyCharacter = new BattleCharacter()
-enemyCharacter.x = 0
-enemyCharacter.y = 200
+const battle = new Battle()
 
-battleCharacter.targetCharacter = enemyCharacter
+Object.assign(battle.teams[0].characters[0], {x: 0, y: 240})
+Object.assign(battle.teams[1].characters[0], {x: 0, y: 200})
 
-const atbBar = battleCharacter.atbBar
-const hpBar = battleCharacter.hpBar
-//atbBar.queuedActions = [{label: 'Fire', size: 1}, {label: 'Blizz', size: 1}, {label: 'Zap', size: 1}, {label: 'Firaga', size: 3}]
+// battleCharacter.targetCharacter = enemyCharacter
 
-const actionMenu = new ActionMenu()
-
-const camera = new Camera()
+const camera = battle.camera
 camera.width = canvas.width
 camera.height = canvas.height
-camera.follow(battleCharacter)
 
-const backdrop = new Backdrop()
-backdrop.y = 300 / 2
+battle.canvas.width = canvas.width
+battle.canvas.height = canvas.height
+
+battle.backdrop.y = 300 / 2
 
 let lastTime = Date.now()
 
@@ -433,61 +522,23 @@ function drawLoop() {
   const dt = (Date.now() - lastTime) / 1000
   lastTime = Date.now()
 
-  battleCharacter.update(dt)
-  enemyCharacter.update(dt)
-  camera.update(dt)
+  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)
 
-  let targetX = 0, targetY = 0
-
-  ctx.save()
-  ctx.translate(-camera.x, -camera.y)
-  for (const sprite of [backdrop, enemyCharacter, battleCharacter]) {
-    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 (battleCharacter.targetCharacter === sprite) {
-      targetX = sprite.x - camera.x
-      targetY = y - camera.y
-    }
-  }
-  ctx.restore()
-
-  let y = canvas.height - 20
-  if (!battleCharacter.isExecutingChain) {
-    actionMenu.draw()
-    y -= actionMenu.canvas.height
-    ctx.drawImage(actionMenu.canvas, 20, y)
-    y -= 2
-  }
-  atbBar.draw()
-  y -= atbBar.canvas.height
-  ctx.drawImage(atbBar.canvas, 20, y)
-
-  y = canvas.height - 20
-  y -= hpBar.canvas.height
-  hpBar.draw()
-  ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y)
-
-  if (battleCharacter.targetCharacter) {
-    const hpBar = battleCharacter.targetCharacter.hpBar
-    const x = targetX - hpBar.canvas.width / 2
-    const y = targetY - hpBar.canvas.height
-    hpBar.draw()
-    ctx.drawImage(hpBar.canvas, x, y)
-  }
+  battle.draw()
+  ctx.drawImage(battle.canvas, 0, 0)
 
   requestAnimationFrame(drawLoop)
 }
 
 canvas.addEventListener('keypress', evt => {
-  if (!battleCharacter.isExecutingChain) {
+  const { actionMenu } = battle
+  const { atbBar } = battle.playerCharacter
+  if (!battle.playerCharacter.isExecutingChain) {
     if (evt.keyCode === 38) {
       actionMenu.upOption()
     } else if (evt.keyCode === 40) {