Different sprites, minor camera adjustments

5 files changed, 44 insertions, 35 deletions

diff --git a/img/bg.kra b/img/bg.kra
index c798aac..818828c 100644
--- a/img/bg.kra
+++ b/img/bg.kra
Binary files differdiff --git a/img/bg.png b/img/bg.png
index 22d1413..58a82d5 100644
--- a/img/bg.png
+++ b/img/bg.png
Binary files differdiff --git a/img/bg.kra~ b/img/warmech.kra
index 24b56d1..fa58950 100644
--- a/img/bg.kra~
+++ b/img/warmech.kra
Binary files differdiff --git a/img/warmech.png b/img/warmech.png
new file mode 100644
index 0000000..add7c1d
--- /dev/null
+++ b/img/warmech.png
Binary files differdiff --git a/index.js b/index.js
index 00b35b8..94701c3 100644
--- a/index.js
+++ b/index.js
@@ -687,13 +687,10 @@ class BattleCharacter extends Sprite {
 }
 
 class Battle {
-  constructor() {
+  constructor({teamData}) {
     // Parts
 
-    this.teams = [
-      new Team({battle: this}),
-      new Team({battle: this})
-    ]
+    this.teams = teamData.map(obj => new Team(Object.assign({battle: this}, obj)))
 
     this.playerCharacter = this.teams[0].characters[0]
 
@@ -706,7 +703,7 @@ class Battle {
 
     this.backdrop = new Backdrop()
 
-    this.camera = new Camera()
+    this.camera = new BattleCamera()
     this.camera.follow(this.playerCharacter)
 
     this.slideacrossMessage = new SlideacrossMessage()
@@ -916,13 +913,13 @@ class Battle {
 }
 
 class Team {
-  constructor({battle}) {
+  constructor({battle, characterData = []}) {
+    if (!battle) {
+      throw new Error('Team created without being passed a Battle')
+    }
+
     this.battle = battle
-    this.characters = [
-      new BattleCharacter({team: this, battle}),
-      new BattleCharacter({team: this, battle}),
-      new BattleCharacter({team: this, battle})
-    ]
+    this.characters = characterData.map(obj => Object.assign(new BattleCharacter({battle, team: this}), obj))
   }
 
   update(dt) {
@@ -943,7 +940,7 @@ class Camera extends Sprite {
 
   update(dt) {
     if (this.spriteToFollow) {
-      const target = this.getCenteredCoords(this.spriteToFollow)
+      const target = this.getCenteredCoords(this.getSpriteFollowCoords(this.spriteToFollow))
       this.x += 5 * dt * (target.x - this.x)
       this.y += 5 * dt * (target.y - this.y)
     }
@@ -954,19 +951,38 @@ class Camera extends Sprite {
   }
 
   warpTo(sprite) {
-    const target = this.getCenteredCoords(sprite)
+    const target = this.getCenteredCoords(this.getSpriteFollowCoords(sprite))
     this.x = target.x
     this.y = target.y
   }
 
+  getSpriteFollowCoords(sprite) {
+    return {x: sprite.x, y: sprite.y}
+  }
+
   getCenteredCoords(sprite) {
     return {
-      x: this.spriteToFollow.x - this.width / 2,
-      y: this.spriteToFollow.y - this.height / 2
+      x: sprite.x - this.width / 2,
+      y: sprite.y - this.height / 2
     }
   }
 }
 
+class BattleCamera extends Camera {
+  constructor() {
+    super()
+
+    this.battlefieldCenterX = 20
+    this.battlefieldCenterY = 200
+  }
+
+  getSpriteFollowCoords(sprite) {
+    const bx = this.battlefieldCenterX
+    const by = this.battlefieldCenterY
+    return {x: bx + (sprite.x - bx) / 5, y: by + (sprite.y - by) / 5}
+  }
+}
+
 class MagicProjectile {
   constructor(caster, target, action) {
     this.x = caster.x
@@ -1050,25 +1066,18 @@ class SlideacrossMessage {
   }
 }
 
-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 battle = new Battle({
+  teamData: [
+    {characterData: [
+      {x: -70, y: 200, name: 'Ren'}
+    ]},
+    {characterData: [
+      {x: 70, y: 200, name: 'Manasvin Warmech'}
+    ]}
+  ]
+})
+
+battle.teams[1].characters[0].image.src = 'img/warmech.png'
 
 const camera = battle.camera
 camera.width = canvas.width