update outer border and end turn button visuals

lib/simple_ui/element.lua

@@ -41,7 +41,8 @@ end
 --- @param type "outer" | "inner"
 --- @param width? number
 function uiElement:drawBorder(type, width)
-    love.graphics.setLineWidth(width or 4)
+    local w = width or 4
+    love.graphics.setLineWidth(w)
 
     if type == "inner" then
         love.graphics.setColor(0.2, 0.2, 0.2)
@@ -58,18 +59,37 @@ function uiElement:drawBorder(type, width)
             self.bounds.x, self.bounds.y + self.bounds.height,
         })
     else
-        love.graphics.setColor(0.2, 0.2, 0.2)
+        love.graphics.setColor(0.3, 0.3, 0.3)
+        -- love.graphics.line({
+        --     self.bounds.x, self.bounds.y + self.bounds.height,
+        --     self.bounds.x, self.bounds.y,
+        --     self.bounds.x + self.bounds.width, self.bounds.y,
+        -- })
         love.graphics.line({
-            self.bounds.x + self.bounds.width, self.bounds.y,
+            self.bounds.x, self.bounds.y + self.bounds.height - w,
-            self.bounds.x + self.bounds.width, self.bounds.y + self.bounds.height,
+            self.bounds.x, self.bounds.y + w,
-            self.bounds.x, self.bounds.y + self.bounds.height,
         })
 
-        love.graphics.setColor(0.3, 0.3, 0.3)
         love.graphics.line({
-            self.bounds.x, self.bounds.y + self.bounds.height,
+            self.bounds.x + w, self.bounds.y,
-            self.bounds.x, self.bounds.y,
+            self.bounds.x + self.bounds.width - w, self.bounds.y,
-            self.bounds.x + self.bounds.width, self.bounds.y,
+        })
+
+        love.graphics.setColor(0.2, 0.2, 0.2)
+        -- love.graphics.line({
+        --     self.bounds.x + self.bounds.width, self.bounds.y,
+        --     self.bounds.x + self.bounds.width, self.bounds.y + self.bounds.height,
+        --     self.bounds.x, self.bounds.y + self.bounds.height,
+        -- })
+
+        love.graphics.line({
+            self.bounds.x + self.bounds.width, self.bounds.y + w,
+            self.bounds.x + self.bounds.width, self.bounds.y + self.bounds.height - w,
+        })
+
+        love.graphics.line({
+            self.bounds.x + self.bounds.width - w, self.bounds.y + self.bounds.height,
+            self.bounds.x + w, self.bounds.y + self.bounds.height,
         })
     end
 

lib/simple_ui/level/cpanel.lua

@@ -71,12 +71,10 @@ function characterPanel:update(dt)
         height = self.bars.bounds.height + self.skillRow.bounds.height
     }
 
-    self.endTurnButton.bounds = Rect {
+    self.endTurnButton:layout()
-        x = self.bounds.x + self.bounds.width + 32,
+    self.endTurnButton.bounds.x = self.bounds.x + self.bounds.width + 32
-        y = self.bounds.y + 12,
+    self.endTurnButton.bounds.y = self.bounds.y + self.bounds.height / 2 - self.endTurnButton.bounds.height / 2
-        width = 150,
+
-        height = self.bounds.height - 24
-    }
     self.endTurnButton:update(dt)
 
     if not characterPanelCanvas then

lib/simple_ui/level/end_turn.lua

@@ -21,8 +21,15 @@ function endTurnButton:update(dt)
     end
 end
 
+function endTurnButton:layout()
+    local font = love.graphics.newFont(16)
+    self.text = love.graphics.newText(font, "end_turn")
+    self.bounds.width = self.text:getWidth() + 32
+    self.bounds.height = self.text:getHeight() + 16
+end
+
 function endTurnButton:draw()
-    love.graphics.setColor(38 / 255, 50 / 255, 56 / 255)
+    love.graphics.setColor(38 / 255, 50 / 255, 56 / 255, 0.9)
     love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
 
     if self.hovered then
@@ -30,14 +37,9 @@ function endTurnButton:draw()
         love.graphics.rectangle("fill", self.bounds.x, self.bounds.y, self.bounds.width, self.bounds.height)
     end
 
-
     love.graphics.setColor(0.95, 0.95, 0.95)
-    local font = love.graphics.newFont(16)
+    love.graphics.draw(self.text, self.bounds.x + 16, self.bounds.y + 8)
-    love.graphics.printf("end_turn", font, self.bounds.x,
-        (self.bounds.y + self.bounds.height / 2) - (font:getHeight() / 2), self.bounds.width, "center")
 
-
-    love.graphics.setLineWidth(2)
     self:drawBorder("outer")
     love.graphics.setColor(1, 1, 1)
 end