Add MultiMenu positioning and backgrounds

main.lua

@@ -1,4 +1,3 @@
-local Animation = require "animation"
 local Animator = require "animator"
 local Atlas = require "atlas"
 local Font = require "font"
@@ -59,25 +58,25 @@ function love.load()
 
     options[#options + 1] = {
       text = unit.name,
-      callback = function() StateMenu = MultiMenu(BlockyFont, state_menu) end,
+      callback = function()
+        StateMenu = MultiMenu(BlockyFont, state_menu, 32, 32, Window)
+      end,
     }
   end
 
-  UnitMenu = MultiMenu(BlockyFont, options)
+  UnitMenu = MultiMenu(BlockyFont, options, 16, 16, Window)
   ActiveUnit = Animator(Units[1].states, "idle")
 end
 
 function love.draw()
   push:start()
 
-  Window:draw(100, 100, 5, 5)
   BlockyFont:draw("Hello, world!")
-  ActiveUnit:draw()
+  ActiveUnit:draw(100, 100)
+  UnitMenu:draw()
 
   if StateMenu then
     StateMenu:draw()
-  else
-    UnitMenu:draw()
   end
 
   push:finish()

multimenu.lua

@@ -6,34 +6,55 @@ local MultiMenu = Object:extend()
 ---Creates a new multimenu.
 ---@param font Font
 ---@param options table
-function MultiMenu:new(font, options)
+function MultiMenu:new(font, options, x, y, bg)
   self.font = font
   self.options = options
   self.selected = 1
+  self.x = x
+  self.y = y
+  self.bg = bg
+  self.padding = 16
+
+  local inner_width = 0
+  local inner_height = #options * self.font.sh
+
+  for idx, option in ipairs(options) do
+    local text_width = string.len(option.text) * self.font.sw
+    inner_width = math.max(inner_width, text_width)
+  end
+
+  local bg_width = inner_width + self.padding * 2
+  local bg_height = inner_height + self.padding * 2
+
+  self.bg_width = math.ceil(bg_width / bg.atlas.sw)
+  self.bg_height = math.ceil(bg_height / bg.atlas.sh)
 end
 
 function MultiMenu:draw()
   -- option drawing constants
-  local x = 20
-  local y_anchor = 50
-  local spacing = 10
-  y_anchor = y_anchor - spacing
+  local x = self.x
+  local y = self.y
+  local spacing = self.font.sh
+  local padding = self.padding
+
+  --draw the background
+  self.bg:draw(x, y, self.bg_width, self.bg_height)
 
   -- draw all the options
   for idx, option in ipairs(self.options) do
-    local y = y_anchor + idx * spacing
-    self.font:draw(option.text, x, y)
+    local ty = y + (idx - 1) * spacing
+    self.font:draw(option.text, x + padding, ty + padding)
   end
 
   -- cursor metric constants
   local cursor_width = 4
   local cursor_depth = 8
-  local cursor_spacing = 8
+  local cursor_spacing = 4
   local cursor_offset = 4
 
   -- calculate the cursor's position
-  local cursor_x = x - cursor_spacing
-  local cursor_y = y_anchor + cursor_offset + spacing * self.selected
+  local cursor_x = x - cursor_spacing + padding
+  local cursor_y = y + cursor_offset + (self.selected - 1) * spacing + padding
 
   -- draw the cursor
   love.graphics.polygon("fill",