Add Debug Settings Architecture (#718)

* Add Debug Settings Architecture

Repost of this commit since it was reverted.

The Debug Settings system provides runtime-configurable debug features through a UI overlay. Settings are persisted to config.debug and can be accessed anywhere via the DebugSettings singleton.

Also provide a way to generate the debug menu and surface it from a debug button.

To support this new button and future overlays, add a root element to the game so we can order overlays

Updated Bool Selector to size correctly
Updated Style Selector creation to make sure sizing and layout is right
Reload main menu when you come back to it
Make navigation stack a UIElement so it works with touch handling

Fixes #697

Also restore the custom name after saving for debug username

Author: JamesVanBoxtel

client/src/BattleRoom.lua

@@ -12,6 +12,7 @@ local BlackFadeTransition = require("client.src.scenes.Transitions.BlackFadeTran
 local Easings = require("client.src.Easings")
 local system = require("client.src.system")
 local GeneratorSource = require("common.engine.GeneratorSource")
+local DebugSettings = require("client.src.debug.DebugSettings")
 
 -- A Battle Room is a session of matches, keeping track of the room number, player settings, wins / losses etc
 ---@class BattleRoom : Signal
@@ -383,7 +384,7 @@ function BattleRoom:createScene(match)
   end
 
   -- for touch android players load a different scene
-  if (system.isMobileOS() or DEBUG_ENABLED) and self.gameScene.name ~= "PuzzleGame" and
+  if (system.isMobileOS() or DebugSettings.simulateMobileOS()) and self.gameScene.name ~= "PuzzleGame" and
   --but only if they are the only local player cause for 2p vs local using portrait mode would be bad
       tableUtils.count(self.players, function(p) return p.isLocal and p.human end) == 1 then
     for _, player in ipairs(self.players) do

client/src/ChallengeModePlayerStack.lua

@@ -1,6 +1,7 @@
 local class = require("common.lib.class")
 local ClientStack = require("client.src.ClientStack")
 local GraphicsUtil = require("client.src.graphics.graphics_util")
+local DebugSettings = require("client.src.debug.DebugSettings")
 
 ---@class ChallengeModePlayerStack : ClientStack
 ---@field engine SimulatedStack
@@ -198,7 +199,7 @@ function ChallengeModePlayerStack:drawMultibar()
 end
 
 function ChallengeModePlayerStack:drawDebug()
-  if config.debug_mode then
+  if DebugSettings.showStackDebugInfo() then
     local drawX = self.frameOriginX + self:canvasWidth() / 2
     local drawY = 10
     local padding = 14

client/src/ClientMatch.lua

@@ -16,6 +16,7 @@ local Telegraph = require("client.src.graphics.Telegraph")
 local MatchParticipant = require("client.src.MatchParticipant")
 local ChallengeModePlayerStack = require("client.src.ChallengeModePlayerStack")
 local NetworkProtocol = require("common.network.NetworkProtocol")
+local DebugSettings = require("client.src.debug.DebugSettings")
 ---@module "client.src.ChallengeModePlayerStack"
 
 ---@class ClientMatch
@@ -84,7 +85,7 @@ function ClientMatch.createFromGameMode(players, gameMode, panelSource, ranked,
   clientMatch.panelSource = panelSource
   clientMatch.supportsPause = #players == 1 and players[1].isLocal
 
-  clientMatch:setup()
+  clientMatch:setupFromGameMode()
 
   return clientMatch
 end
@@ -140,10 +141,12 @@ function ClientMatch.createFromReplay(replay, players)
     clientMatch.stacks[i] = clientStack
   end
 
+  clientMatch:sharedSetup()
+
   return clientMatch
 end
 
-function ClientMatch:setup()
+function ClientMatch:setupFromGameMode()
   self.engine = Match(self.panelSource, self.matchRules)
 
   self.stacks = {}
@@ -189,9 +192,16 @@ function ClientMatch:setup()
     end
   end
 
+  self:sharedSetup()
+
   self.replay = self.engine:createNewReplay()
 end
 
+
+function ClientMatch:sharedSetup()
+  self.engine.debug.vsFramesBehind = DebugSettings.getVSFramesBehind()
+end
+
 function ClientMatch:run()
   if self.isPaused or self.engine:hasEnded() then
     self:runGameOver()
@@ -559,7 +569,7 @@ end
 
 function ClientMatch:drawCommunityMessage()
   -- Draw the community message
-  if not config.debug_mode then
+  if not DebugSettings.showStackDebugInfo() then
     GraphicsUtil.printf(join_community_msg or "", 0, 668, consts.CANVAS_WIDTH, "center")
   end
 end
@@ -598,7 +608,7 @@ function ClientMatch:render()
     end
   end
 
-  if config.debug_mode then
+  if DebugSettings.showStackDebugInfo() then
     local padding = 14
     local drawX = 500
     local drawY = -4

client/src/Game.lua

@@ -33,6 +33,14 @@ local system = require("client.src.system")
 local ModController = require("client.src.mods.ModController")
 
 local RichPresence = require("client.lib.rich_presence.RichPresence")
+local DebugSettings = require("client.src.debug.DebugSettings")
+local Button = require("client.src.ui.Button")
+local TextButton = require("client.src.ui.TextButton")
+local OverlayContainer = require("client.src.ui.OverlayContainer")
+local DebugMenu = require("client.src.debug.DebugMenu")
+local Label = require("client.src.ui.Label")
+local UIElement = require("client.src.ui.UIElement")
+local NavigationStack = require("client.src.NavigationStack")
 
 -- Provides a scale that is on .5 boundary to make sure it renders well.
 -- Useful for creating new canvas with a solid DPI
@@ -106,12 +114,19 @@ local Game = class(
 
     -- time in seconds, can be used by other elements to track the passing of time beyond dt
     self.timer = love.timer.getTime()
+
+    self.debugOverlay = nil
+    self.debugButton = nil
+
+    -- Root UI element that contains all UI (scenes + overlays + debug)
+    self.uiRoot = UIElement({x = 0, y = 0, width = consts.CANVAS_WIDTH, height = consts.CANVAS_HEIGHT})
   end
 )
 
 Game.newCanvasSnappedScale = newCanvasSnappedScale
 
 function Game:load()
+  DebugSettings.init()
   PuzzleLibrary.cleanupDefaultPuzzles(consts.PUZZLES_SAVE_DIRECTORY)
 
   -- move to constructor
@@ -131,8 +146,11 @@ function Game:load()
     self.input:importConfigurations(user_input_conf)
   end
 
-  self.navigationStack = require("client.src.NavigationStack")
+  self.navigationStack = NavigationStack({})
   self.navigationStack:push(StartUp({setupRoutine = self.setupRoutine}))
+
+  -- Add navigation stack to root UI
+  self.uiRoot:addChild(self.navigationStack)
   self.globalCanvas = love.graphics.newCanvas(consts.CANVAS_WIDTH, consts.CANVAS_HEIGHT, {dpiscale=GAME:newCanvasSnappedScale()})
 end
 
@@ -253,6 +271,8 @@ function Game:setupRoutine()
 
   self:initializeLocalPlayer()
   ModController:loadModFor(characters[GAME.localPlayer.settings.characterId], GAME.localPlayer, true)
+
+  self:initializeDebugOverlay()
 end
 
 -- GAME.localPlayer is the standard player for battleRooms that don't get started from replays/spectate
@@ -366,9 +386,9 @@ function Game:update(dt)
 
   handleShortcuts()
 
-  prof.push("navigationStack update")
-  self.navigationStack:update(dt)
-  prof.pop("navigationStack update")
+  prof.push("uiRoot update")
+  self.uiRoot:update(dt)
+  prof.pop("uiRoot update")
 
   if self.backgroundImage then
     self.backgroundImage:update(dt)
@@ -386,7 +406,7 @@ function Game:draw()
   love.graphics.clear()
 
   -- With this, self.globalCanvas is clear and set as our active canvas everything is being drawn to
-  self.navigationStack:draw()
+  self.uiRoot:draw()
 
   self:drawFPS()
   self:drawScaleInfo()
@@ -402,8 +422,7 @@ function Game:draw()
 end
 
 function Game:drawFPS()
-  -- Draw the FPS if enabled
-  if self.config.show_fps then
+  if self.config.show_fps or DebugSettings.forceFPS() then
     love.graphics.print("FPS: " .. love.timer.getFPS(), 1, 1)
   end
 end
@@ -666,4 +685,40 @@ function Game:setLanguage(lang_code)
   Localization:refresh_global_strings()
 end
 
+function Game:initializeDebugOverlay()
+  if not DEBUG_ENABLED then
+    return
+  end
+
+  self.debugButton = TextButton({
+    x = consts.CANVAS_WIDTH - 50,
+    y = consts.CANVAS_HEIGHT - 50,
+    label = Label({
+      text = "Debug",
+      translate = false,
+      hAlign = "center",
+      vAlign = "center"
+    }),
+    width = 40,
+    height = 40,
+    onClick = function()
+      if self.debugOverlay then
+        if not self.debugOverlay:isActive() then
+          self.debugOverlay:open()
+        end
+      end
+    end
+  })
+
+  local debugMenu = DebugMenu.makeDebugMenu({height = consts.CANVAS_HEIGHT - 40})
+  self.debugOverlay = OverlayContainer({
+    content = debugMenu
+  })
+
+  -- Add debug UI to root
+  self.uiRoot:addChild(self.debugButton)
+  self.uiRoot:addChild(self.debugOverlay)
+end
+
+
 return Game

client/src/NavigationStack.lua

@@ -1,11 +1,23 @@
 local DirectTransition = require("client.src.scenes.Transitions.DirectTransition")
 local logger = require("common.lib.logger")
-
-local NavigationStack = {
-  scenes = {},
-  transition = nil,
-  callback = nil,
-}
+local UIElement = require("client.src.ui.UIElement")
+local class = require("common.lib.class")
+local consts = require("common.engine.consts")
+
+---@class NavigationStack : UiElement
+---@field scenes Scene[]
+---@field transition table?
+---@field callback function?
+local NavigationStack = class(
+  function(self)
+    self.scenes = {}
+    self.transition = nil
+    self.callback = nil
+    self.width = consts.CANVAS_WIDTH
+    self.height = consts.CANVAS_HEIGHT
+  end,
+  UIElement
+)
 
 function NavigationStack:push(newScene, transition)
   local activeScene = self.scenes[#self.scenes]
@@ -142,7 +154,7 @@ function NavigationStack:getActiveScene()
   end
 end
 
-function NavigationStack:update(dt)
+function NavigationStack:updateSelf(dt)
   if self.transition then
     self.transition:update(dt)
 
@@ -163,7 +175,7 @@ function NavigationStack:update(dt)
   end
 end
 
-function NavigationStack:draw()
+function NavigationStack:drawSelf()
   if self.transition then
     self.transition:draw()
   else
@@ -174,4 +186,12 @@ function NavigationStack:draw()
   end
 end
 
+function NavigationStack:getTouchedElement(x, y)
+  local activeScene = self:getActiveScene()
+  if activeScene and activeScene.uiRoot then
+    return activeScene.uiRoot:getTouchedElement(x, y)
+  end
+  return nil
+end
+
 return NavigationStack

client/src/PlayerStack.lua

@@ -15,6 +15,7 @@ local logger = require("common.lib.logger")
 require("client.src.analytics")
 local KeyDataEncoding = require("common.data.KeyDataEncoding")
 local MatchRules      = require("common.data.MatchRules")
+local DebugSettings = require("client.src.debug.DebugSettings")
 ---@module "common.data.LevelData"
 
 local floor, min, max = math.floor, math.min, math.max
@@ -767,7 +768,7 @@ function PlayerStack:drawPopBurstParticle(atlas, quad, frameIndex, atlasDimensio
 end
 
 function PlayerStack:drawDebug()
-  if config.debug_mode then
+  if DebugSettings.showStackDebugInfo() then
     local engine = self.engine
 
     local x = self.origin_x + 480
@@ -863,7 +864,7 @@ function PlayerStack:drawDebug()
 end
 
 function PlayerStack:drawDebugPanels(shakeOffset)
-  if not config.debug_mode then
+  if not DebugSettings.showStackDebugInfo() then
     return
   end
 
@@ -952,7 +953,7 @@ function PlayerStack:drawRating()
   local rating
   if self.player.rating and tonumber(self.player.rating) then
     rating = self.player.rating
-  elseif config.debug_mode then
+  elseif DebugSettings.showStackDebugInfo() then
     rating = 1544 + self.player.playerNumber
   end
 

client/src/Shortcuts.lua

@@ -7,7 +7,13 @@ local logger = require("common.lib.logger")
 local function runSystemCommands()
   -- toggle debug mode
   if input.allKeys.isDown["d"] then
-    config.debug_mode = not config.debug_mode
+    if GAME.debugOverlay then
+      if GAME.debugOverlay.active then
+        GAME.debugOverlay:close()
+      else
+        GAME.debugOverlay:open()
+      end
+    end
   -- reload characters
   elseif input.allKeys.isDown["c"] then
     characters_reload_graphics()