Implement charge meter.

src/kani.lua

@@ -4,6 +4,7 @@ import "CoreLibs/graphics"
 import "CoreLibs/sprites"
 import "CoreLibs/timer"
 import "bullet"
+import "ui"
 
 local gfx <const> = playdate.graphics
 
@@ -20,7 +21,7 @@ local MAX_CHARGE <const> = 100
 
 class("Kani").extends(gfx.sprite)
 
-function Kani:init()
+function Kani:init(ui)
    local img = gfx.image.new("images/kani.png")
    Kani.super.init(self, img)
    print(self)
@@ -33,6 +34,9 @@ function Kani:init()
    self.weaponPower = 0
    self.firingMode = false
 
+   -- the UI gets passed in to Kani so that we can update pieces of it easily.
+   self.ui = ui
+
    -- input handlers
    self.inputHandlers = {
       upButtonDown =    function() self.vector.y = -1 end,
@@ -54,7 +58,7 @@ end
 function Kani:chargeReserve(change)
    if change < 0 then return end
    self.reserveCharge = math.min(self.reserveCharge + change / 15, 100)
-   print("Reserve charge at " .. self.reserveCharge)
+   self.ui.chargeMeter:setValue(self.reserveCharge)
 end
 
 function Kani:chargeShot()
@@ -66,6 +70,7 @@ function Kani:chargeShot()
       self.reserveCharge -= requiredPower
       self.weaponPower += 1
       print("Shot charged to size " .. self.weaponPower)
+      self.ui.chargeMeter:setValue(self.reserveCharge)
    end
 end
 

src/main.lua

@@ -13,13 +13,18 @@ import "kani"
 local gfx <const> = playdate.graphics
 
 local player = nil
+local ui = nil
 
 function setup()
-   player = Kani()
+   ui = UI()
+   player = Kani(ui)
    player:moveTo(16, 120)
    player:addInputHandlers()
    player:add()
+   ui:add()
+
    makeWalls()
+   
    drawBackground()
 end
 

src/meter.lua

@@ -0,0 +1,42 @@
+import "CoreLibs/graphics"
+import "CoreLibs/object"
+import "CoreLibs/math"
+
+local gfx <const> = playdate.graphics
+
+class("Meter").extends(gfx.sprite)
+
+function Meter:init(value, w, h, vertical)
+   Meter.super.init(self)
+
+   self.vertical = vertical or true
+   self:setSize(w, h)
+   self:setZIndex(999)
+   self:setValue(value)
+end
+
+function Meter:setValue(value)
+   local img = gfx.image.new(self:getSize())
+   gfx.pushContext(img)
+      gfx.drawRect(0, 0, self:getSize())
+      local x, y, w, h = 0
+      if self.vertical then
+         x = 0
+         w = self.width
+         y = self.height - playdate.math.lerp(0, self.height, value / 100)
+         print(y)
+         h = self.height - y
+         print(h)
+      else
+         y = 0
+         h = self.height
+         x = 0
+         w = self.width - playdate.math.lerp(0, self.width, value / 100)
+      end
+      gfx.setColor(gfx.kColorWhite)
+      gfx.fillRect(1, 1, self.width-2, self.height-2)
+      gfx.setColor(gfx.kColorBlack)
+      gfx.fillRect(x, y, w, h)
+   gfx.popContext()
+   self:setImage(img)
+end

src/ui.lua

@@ -0,0 +1,23 @@
+-- Wrapper class for UI elements. Barely a class, mostly just a table, but
+-- we'll keep the OO semantics.
+import "CoreLibs/object"
+import "meter"
+-- import "weaponpowermeter"
+
+class("UI", {}).extends(playdate.object)
+
+function UI:init()
+   self.chargeMeter = Meter(100, 10, 60)
+   -- self.healthMeter = Meter(100, 60, 10, false)
+   -- self.weaponPowerMeter = WeaponPowerMeter()
+   self:moveTo(394, 159)
+end
+
+function UI:add()
+   self.chargeMeter:add()
+end
+
+function UI:moveTo(x, y)
+   -- figure out correct offsets later
+   self.chargeMeter:moveTo(x, y + 50)
+end