Sprite dummy test

4 files changed, 69 insertions, 2 deletions

diff --git a/img/cat1.png b/img/cat1.png
new file mode 100644
index 0000000..226f272
--- /dev/null
+++ b/img/cat1.png
Binary files differdiff --git a/img/cat2.png b/img/cat2.png
new file mode 100644
index 0000000..8695825
--- /dev/null
+++ b/img/cat2.png
Binary files differdiff --git a/img/weird-woods.png b/img/weird-woods.png
new file mode 100644
index 0000000..528acf0
--- /dev/null
+++ b/img/weird-woods.png
Binary files differdiff --git a/index.js b/index.js
index 137fd44..e9cbfc7 100644
--- a/index.js
+++ b/index.js
@@ -2,6 +2,31 @@
 
 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() {
+    this.canvas.width = this.image.width
+    this.canvas.height = this.image.height
+    const ctx = this.canvas.getContext('2d')
+    ctx.drawImage(this.image, 0, 0)
+  }
+}
+
+class Backdrop extends Sprite {
+  constructor() {
+    super()
+    this.image.src = 'img/weird-woods.png'
+  }
+}
+
 class ATBBar {
   constructor(battleCharacter) {
     // Parts
@@ -140,7 +165,7 @@ class ActionMenu {
       ['Stun', 'Stunra', 'Stunga']
     ]
 
-    this.currentOptionIndex = 3
+    this.currentOptionIndex = 0
     this.uiLevel = 1 // 1-3 -- which of "fire", "fira", "firaga" is selected.
 
     // Drawing
@@ -245,11 +270,14 @@ class ActionMenu {
   }
 }
 
-class BattleCharacter {
+class BattleCharacter extends Sprite {
   constructor() {
+    super()
+
     // Parts
 
     this.atbBar = new ATBBar(this)
+    this.image.src = 'img/cat1.png'
 
     // State
 
@@ -286,13 +314,43 @@ class BattleCharacter {
   }
 }
 
+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 battleCharacter = new BattleCharacter()
+battleCharacter.x = 80
+battleCharacter.y = 80
 
 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()
 
+const camera = new Camera()
+camera.width = canvas.width
+camera.height = canvas.height
+camera.follow(battleCharacter)
+
+const backdrop = new Backdrop()
+
 let lastTime = Date.now()
 
 function drawLoop() {
@@ -300,12 +358,21 @@ function drawLoop() {
   lastTime = Date.now()
 
   battleCharacter.update(dt)
+  camera.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)
 
+  ctx.save()
+  ctx.translate(-camera.x, -camera.y)
+  for (const sprite of [backdrop, battleCharacter]) {
+    sprite.draw()
+    ctx.drawImage(sprite.canvas, sprite.x - sprite.canvas.width / 2, sprite.y - sprite.canvas.height / 2)
+  }
+  ctx.restore()
+
   let y = canvas.height - 20
   if (!battleCharacter.isExecutingChain) {
     y -= actionMenu.canvas.height