src/main.lua

@@ -1014,7 +1014,7 @@ function playdate.update()
         drawMinimap()
     end
     drawScoreboard(0, Screen.H * 0.77, teams, outs, battingTeam, inning)
-    drawBallsAndStrikes(300, Screen.H * 0.77, balls, strikes)
+    drawBallsAndStrikes(290, Screen.H - 20, balls, strikes)
     announcer:draw(Center.x, 10)
 end
 

src/scoreboard.lua

@@ -6,6 +6,10 @@ local ScoreboardHeight <const> = 55
 local Indicator = "> "
 local IndicatorWidth <const> = ScoreFont:getTextWidth(Indicator)
 
+local BallStrikeMarginY <const> = 4
+local BallStrikeWidth <const> = 60
+local BallStrikeHeight <const> = (BallStrikeMarginY * 2) + ScoreFont:getHeight()
+
 ---@param teams any
 ---@param battingTeam any
 ---@return string, number, string, number
@@ -17,10 +21,21 @@ function getIndicators(teams, battingTeam)
 end
 
 function drawBallsAndStrikes(x, y, balls, strikes)
+    if balls == 0 and strikes == 0 then
+        return
+    end
+
     local gfx = playdate.graphics
-    print("" .. balls .. " - " .. strikes)
     gfx.setColor(gfx.kColorBlack)
-    gfx.fillRect(x, y, 20, ScoreboardHeight)
+    gfx.fillRect(x, y, BallStrikeWidth, BallStrikeHeight)
+    local originalDrawMode = gfx.getImageDrawMode()
+    gfx.setImageDrawMode(gfx.kDrawModeInverted)
+
+    local text = tostring(balls) .. " - " .. tostring(strikes)
+    local textWidth = ScoreFont:getTextWidth(text)
+    local widthDiff = BallStrikeWidth - textWidth
+    ScoreFont:drawText(text, x + (widthDiff / 2), y + BallStrikeMarginY)
+    gfx.setImageDrawMode(originalDrawMode)
 end
 
 function drawScoreboard(x, y, teams, outs, battingTeam, inning)