Resizable UI

.luarc.json

@@ -21,6 +21,11 @@
 
     "hint.semicolon": "Disable",
 
+    "runtime.plugin": "common/lib/luaLsPlugin.lua",
+
+    // to support mixin union types where a table is both types rather than just one
+    "type.weakUnionCheck": true,
+
     "workspace.checkThirdParty": false,
     "workspace.ignoreDir": [
         ".vscode",
@@ -34,6 +39,9 @@
         "${3rd}/love2d/library",
         "common/lib/socket.lua",
         "common/lib/dkjson.lua",
-        "common/lib/csprng.lua"
+        "common/lib/csprng.lua",
+        "common/lib/luaLsPlugin.lua",
+        "common/lib/import.lua",
+        "${addons}/lsqlite3/module/library"
     ]
 }

.vscode/launch.json.template

@@ -24,6 +24,9 @@
           // the profiler itself preallocates a lot of memory to reduce the odds of it causing spikes in frame time / memory alloc on its own
           //,"profileFrameTimes"
           //,"profileMemory"
+
+          // to make the game take code branches intended specifically for mobile devices (e.g. increased font size)
+          //,"simulateMobileOS"
         ]
       },
       // using the testLauncher.lua file to only run tests

client/src/BattleRoom.lua

@@ -11,7 +11,7 @@ local ClientMatch = require("client.src.ClientMatch")
 local GameBase = require("client.src.scenes.GameBase")
 local BlackFadeTransition = require("client.src.scenes.Transitions.BlackFadeTransition")
 local Easings = require("client.src.Easings")
-local consts = require("common.engine.consts")
+local consts = require("client.src.consts")
 local system = require("client.src.system")
 local GeneratorSource = require("common.engine.GeneratorSource")
 
@@ -374,7 +374,7 @@ end
 
 function BattleRoom:createScene(match)
   -- for touch android players load a different scene
-  if (system.isMobileOS() or DEBUG_ENABLED) and self.gameScene.name ~= "PuzzleGame" and
+  if system.isMobileOS() 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/ClientMatch.lua

@@ -3,7 +3,7 @@ local class = require("common.lib.class")
 local logger = require("common.lib.logger")
 local StageLoader = require("client.src.mods.StageLoader")
 local ModController = require("client.src.mods.ModController")
-local consts = require("common.engine.consts")
+local consts = require("client.src.consts")
 local tableUtils = require("common.lib.tableUtils")
 local GameModes = require("common.data.GameModes")
 local ChallengeModePlayer = require("client.src.ChallengeModePlayer")
@@ -562,7 +562,7 @@ end
 function ClientMatch:drawCommunityMessage()
   -- Draw the community message
   if not config.debug_mode then
-    GraphicsUtil.printf(join_community_msg or "", 0, 668, consts.CANVAS_WIDTH, "center")
+    GraphicsUtil.printf(join_community_msg or "", 0, 668, love.graphics.getWidth(), "center")
   end
 end
 
@@ -593,8 +593,8 @@ function ClientMatch:render()
         -- let the spectator know the game is about to die
         local iconSize = 60
         local icon_width, icon_height = themes[config.theme].images.IMG_bug:getDimensions()
-        local x = (consts.CANVAS_WIDTH / 2) - (iconSize / 2)
-        local y = (consts.CANVAS_HEIGHT / 2) - (iconSize / 2)
+        local x = (love.graphics.getWidth() / 2) - (iconSize / 2)
+        local y = (love.graphics.getHeight() / 2) - (iconSize / 2)
         GraphicsUtil.draw(themes[config.theme].images.IMG_bug, x, y, 0, iconSize / icon_width, iconSize / icon_height)
       end
     end
@@ -660,20 +660,21 @@ end
 
   -- Draw the pause menu
 function ClientMatch:draw_pause()
+  local width, height = love.graphics.getDimensions()
   if not self.renderDuringPause then
     local image = themes[config.theme].images.pause
-    local scale = consts.CANVAS_WIDTH / math.max(image:getWidth(), image:getHeight()) -- keep image ratio
+    local scale = width / math.max(image:getWidth(), image:getHeight()) -- keep image ratio
     -- adjust coordinates to be centered
-    local x = consts.CANVAS_WIDTH / 2
-    local y = consts.CANVAS_HEIGHT / 2
+    local x = width / 2
+    local y = height / 2
     local xOffset = math.floor(image:getWidth() * 0.5)
     local yOffset = math.floor(image:getHeight() * 0.5)
 
     GraphicsUtil.draw(image, x, y, 0, scale, scale, xOffset, yOffset)
   end
   local y = 260
-  GraphicsUtil.printf(loc("pause"), 0, y, consts.CANVAS_WIDTH, "center", nil, 1, 10)
-  GraphicsUtil.printf(loc("pl_pause_help"), 0, y + 30, consts.CANVAS_WIDTH, "center", nil, 1)
+  GraphicsUtil.printf(loc("pause"), 0, y, width, "center", nil, 1, "big")
+  GraphicsUtil.printf(loc("pl_pause_help"), 0, y + 30, width, "center", nil, 1)
 end
 
 function ClientMatch:getWinners()

client/src/ClientStack.lua

@@ -1,5 +1,5 @@
 local class = require("common.lib.class")
-local consts = require("common.engine.consts")
+local consts = require("client.src.consts")
 local Signal = require("common.lib.signal")
 local GraphicsUtil = require("client.src.graphics.graphics_util")
 
@@ -201,14 +201,18 @@ function ClientStack:drawNumber(number, themePositionOffset, scale, cameFromLega
   GraphicsUtil.drawPixelFont(number, self.assets.numberPixelFont, x, y, scale, scale, "center", 0)
 end
 
-function ClientStack:drawString(string, themePositionOffset, cameFromLegacyScoreOffset, fontSize)
+---@param str string
+---@param themePositionOffset number[]
+---@param cameFromLegacyScoreOffset boolean
+---@param fontSize FontSize
+function ClientStack:drawString(str, themePositionOffset, cameFromLegacyScoreOffset, fontSize)
   if cameFromLegacyScoreOffset == nil then
     cameFromLegacyScoreOffset = false
   end
   local x = self:elementOriginXWithOffset(themePositionOffset, cameFromLegacyScoreOffset)
   local y = self:elementOriginYWithOffset(themePositionOffset, cameFromLegacyScoreOffset)
 
-  local limit = consts.CANVAS_WIDTH - x
+  local limit = love.graphics.getWidth() - x
   local alignment = "left"
   if themes[config.theme]:offsetsAreFixed() then
     if self.renderIndex == 1 then
@@ -218,12 +222,7 @@ function ClientStack:drawString(string, themePositionOffset, cameFromLegacyScore
     end
   end
 
-  if fontSize == nil then
-    fontSize = GraphicsUtil.fontSize
-  end
-  local fontDelta = fontSize - GraphicsUtil.fontSize
-
-  GraphicsUtil.printf(string, x, y, limit, alignment, nil, nil, fontDelta)
+  GraphicsUtil.printf(str, x, y, limit, alignment, nil, nil, fontSize)
 end
 
 -- Positions the stack draw position for the given player
@@ -237,7 +236,7 @@ function ClientStack:moveForRenderIndex(renderIndex)
     self.mirror_x = -1
     self.multiplication = 1
   end
-  local centerX = (GAME.globalCanvas:getWidth() / 2)
+  local centerX = love.graphics.getWidth() / 2
   local stackWidth = self:canvasWidth()
   local innerStackXMovement = 100
   local outerStackXMovement = stackWidth + innerStackXMovement
@@ -402,14 +401,14 @@ function ClientStack:drawAbsoluteMultibar(stop_time, shake_time, pre_stop_time)
     end
 
     if remainingSeconds > 0 then
-      self:drawString(string.format("%." .. themes[config.theme].multibar_LeftoverTime_Decimals .. "f", remainingSeconds), overtimePos, false, 20)
+      self:drawString(string.format("%." .. themes[config.theme].multibar_LeftoverTime_Decimals .. "f", remainingSeconds), overtimePos, false, "big")
     end
   end
 end
 
 function ClientStack:drawPlayerName()
   local username = (self.player.name or "")
-  self:drawString(username, themes[config.theme].name_Pos, true, themes[config.theme].name_Font_Size)
+  self:drawString(username, themes[config.theme].name_Pos, true, "big")
 end
 
 function ClientStack:drawWinCount()

client/src/Game.lua

@@ -1,3 +1,4 @@
+require("common.lib.stringExtensions")
 require("client.src.localization")
 require("common.lib.Queue")
 require("client.src.server_queue")
@@ -8,7 +9,7 @@ require("client.src.mods.Theme")
 
 -- The main game object for tracking everything in Panel Attack.
 -- Not to be confused with "Match" which is the current battle / instance of the game.
-local consts = require("common.engine.consts")
+local consts = require("client.src.consts")
 local GraphicsUtil = require("client.src.graphics.graphics_util")
 local class = require("common.lib.class")
 local logger = require("common.lib.logger")
@@ -42,7 +43,6 @@ end
 ---@class PanelAttack
 ---@field netClient NetClient
 ---@field battleRoom BattleRoom?
----@field globalCanvas love.Canvas
 ---@field muteSound boolean
 ---@field rich_presence table
 ---@field input table
@@ -66,7 +66,7 @@ local Game = class(
     self.backgroundImage = nil -- the background image for the game, should always be set to something with the proper dimensions
     self.netClient = NetClient()
     self.server_queue = ServerQueue()
-    self.main_menu_screen_pos = {consts.CANVAS_WIDTH / 2 - 108 + 50, consts.CANVAS_HEIGHT / 2 - 111}
+    self.main_menu_screen_pos = {love.graphics.getWidth() / 2 - 108 + 50, love.graphics.getHeight() / 2 - 111}
     self.config = config
     self.localization = Localization
     self.replay = {}
@@ -81,9 +81,6 @@ local Game = class(
     self.canvasYScale = 1
     self.backgroundColor = { 0.0, 0.0, 0.0 }
 
-    -- depends on canvasXScale
-    self.globalCanvas = love.graphics.newCanvas(consts.CANVAS_WIDTH, consts.CANVAS_HEIGHT, {dpiscale=newCanvasSnappedScale(self)})
-
     self.automaticScales = {1, 1.5, 2, 2.5, 3}
     -- specifies a time that is compared against self.timer to determine if GameScale should be shown
     self.showGameScaleUntil = 0
@@ -126,7 +123,6 @@ function Game:load()
 
   self.navigationStack = require("client.src.NavigationStack")
   self.navigationStack:push(StartUp({setupRoutine = self.setupRoutine}))
-  self.globalCanvas = love.graphics.newCanvas(consts.CANVAS_WIDTH, consts.CANVAS_HEIGHT, {dpiscale=GAME:newCanvasSnappedScale()})
 end
 
 local function detectHardwareProblems()
@@ -354,13 +350,26 @@ function Game:updateMouseVisibility(dt)
 end
 
 function Game:handleResize(newWidth, newHeight)
+  local activeScene = GAME.navigationStack:getActiveScene()
+  if activeScene then
+    local _, _, flags = love.window.getMode()
+    local screenWidth, screenHeight = love.window.getDesktopDimensions(flags.display)
+    newWidth = math.min(newWidth, screenWidth)
+    newHeight = math.min(newHeight, screenHeight)
+    activeScene.uiRoot.minWidth = newWidth
+    activeScene.uiRoot.minHeight = newHeight
+    activeScene.uiRoot.layout.resize(activeScene.uiRoot, newWidth, newHeight)
+    if activeScene.uiRoot.width ~= newWidth or activeScene.uiRoot.height ~= newHeight then
+      GraphicsUtil.updateMode(activeScene.uiRoot.width, activeScene.uiRoot.height)
+    end
+  end
   self:updateCanvasPositionAndScale(newWidth, newHeight)
   if self.battleRoom and self.battleRoom.match then
     self.needsAssetReload = true
   else
-    self:refreshCanvasAndImagesForNewScale()
+    --self:refreshCanvasAndImagesForNewScale()
   end
-  self.showGameScaleUntil = self.timer + 5
+  --self.showGameScaleUntil = self.timer + 5
 end
 
 -- Called every few fractions of a second to update the game
@@ -391,25 +400,13 @@ function Game:update(dt)
 end
 
 function Game:draw()
-  -- Setting the canvas means everything we draw is drawn to the canvas instead of the screen
-  love.graphics.setCanvas({self.globalCanvas, stencil = true})
   love.graphics.setBackgroundColor(unpack(self.backgroundColor))
   love.graphics.clear()
 
-  -- With this, self.globalCanvas is clear and set as our active canvas everything is being drawn to
   self.navigationStack:draw()
 
   self:drawFPS()
   self:drawScaleInfo()
-
-  -- resetting the canvas means everything we draw is drawn to the screen
-  love.graphics.setCanvas()
-
-  love.graphics.setBlendMode("alpha", "premultiplied")
-  -- now we draw the finished canvas at scale
-  -- this way we don't have to worry about scaling singular elements, just draw everything at 1280x720 to the canvas
-  love.graphics.draw(self.globalCanvas, self.canvasX, self.canvasY, 0, self.canvasXScale, self.canvasYScale, self.globalCanvas:getWidth() / 2, self.globalCanvas:getHeight() / 2)
-  love.graphics.setBlendMode("alpha", "alphamultiply")
 end
 
 function Game:drawFPS()
@@ -421,13 +418,13 @@ end
 
 function Game:drawScaleInfo()
   if self.showGameScaleUntil > self.timer then
-    local scaleString = "Scale: " .. self.canvasXScale .. " (" .. consts.CANVAS_WIDTH * self.canvasXScale .. " x " .. consts.CANVAS_HEIGHT * self.canvasYScale .. ")"
+    local scaleString = "Scale: " .. self.canvasXScale .. " (" .. love.graphics.getWidth() * self.canvasXScale .. " x " .. love.graphics.getHeight() * self.canvasYScale .. ")"
     local newPixelWidth = love.graphics.getWidth()
 
-    if consts.CANVAS_WIDTH * self.canvasXScale > newPixelWidth then
+    if love.graphics.getWidth() * self.canvasXScale > newPixelWidth then
       scaleString = scaleString .. " Clipped "
     end
-    love.graphics.printf(scaleString, GraphicsUtil.getGlobalFontWithSize(30), 5, 5, 2000, "left")
+    love.graphics.printf(scaleString, GraphicsUtil.getGlobalFontWithSize("huge"), 5, 5, 2000, "left")
   end
 end
 
@@ -570,7 +567,7 @@ function Game:updateCanvasPositionAndScale(newWindowWidth, newWindowHeight)
 
   if config.gameScaleType == "fit" then
     local w, h
-    local canvasWidth, canvasHeight = self.globalCanvas:getDimensions()
+    local canvasWidth, canvasHeight = love.graphics.getDimensions()
     if newWindowHeight / canvasHeight > newWindowWidth / canvasWidth then
       w = newWindowWidth
       h = canvasHeight * newWindowWidth / canvasWidth
@@ -589,7 +586,7 @@ function Game:updateCanvasPositionAndScale(newWindowWidth, newWindowHeight)
     local newScale = 0.5
     for i= #availableScales, 1, -1 do
       local scale = availableScales[i]
-      if (newWindowWidth >= self.globalCanvas:getWidth() * scale and newWindowHeight >= self.globalCanvas:getHeight() * scale) then
+      if (newWindowWidth >= love.graphics.getWidth() * scale and newWindowHeight >= love.graphics.getHeight() * scale) then
         newScale = scale
         break
       end
@@ -610,7 +607,6 @@ function Game:refreshCanvasAndImagesForNewScale()
   self:drawLoadingString(loc("ld_characters"))
   coroutine.yield()
 
-  self.globalCanvas = love.graphics.newCanvas(GAME.globalCanvas:getWidth(), GAME.globalCanvas:getHeight(), {dpiscale=self:newCanvasSnappedScale()})
   -- We need to reload all assets and fonts to get the new scaling info and filters
 
   -- Reload theme to get the new resolution assets
@@ -629,7 +625,7 @@ end
 
 -- Transform from window coordinates to game coordinates
 function Game:transform_coordinates(x, y)
-  local newX, newY = (x - self.canvasX) / self.canvasXScale + self.globalCanvas:getWidth() / 2, (y - self.canvasY) / self.canvasYScale + self.globalCanvas:getHeight() / 2
+  local newX, newY = (x - self.canvasX) / self.canvasXScale + love.graphics.getWidth() / 2, (y - self.canvasY) / self.canvasYScale + love.graphics.getHeight() / 2
   return newX, newY
 end
 
@@ -638,10 +634,10 @@ function Game:drawLoadingString(loadingString)
   local textMaxWidth = 300
   local textHeight = 40
   local x = 0
-  local y = consts.CANVAS_HEIGHT/2 - textHeight/2
+  local y = love.graphics.getHeight()/2 - textHeight/2
   local backgroundPadding = 10
-  GraphicsUtil.drawRectangle("fill", consts.CANVAS_WIDTH / 2 - (textMaxWidth / 2) , y - backgroundPadding, textMaxWidth, textHeight, 0, 0, 0, 0.5)
-  GraphicsUtil.printf(loadingString, x, y, consts.CANVAS_WIDTH, "center", nil, nil, 10)
+  GraphicsUtil.drawRectangle("fill", love.graphics.getWidth() / 2 - (textMaxWidth / 2) , y - backgroundPadding, textMaxWidth, textHeight, 0, 0, 0, 0.5)
+  GraphicsUtil.printf(loadingString, x, y, love.graphics.getWidth(), "center", nil, nil, "big")
 end
 
 function Game:setLanguage(lang_code)
@@ -653,14 +649,19 @@ function Game:setLanguage(lang_code)
   end
   config.language_code = Localization.codes[Localization.lang_index]
 
+  local baseOffset = 0
+  if system.isMobileOS() then
+    baseOffset = 4
+  end
+
   if themes[config.theme] and themes[config.theme].font and themes[config.theme].font.path then
-    GraphicsUtil.setGlobalFont(themes[config.theme].font.path, themes[config.theme].font.size, self:newCanvasSnappedScale())
+    GraphicsUtil.setGlobalFont(themes[config.theme].font.path, (themes[config.theme].font.size or 12) - 12 + baseOffset, self:newCanvasSnappedScale())
   elseif config.language_code == "JP" then
-    GraphicsUtil.setGlobalFont("client/assets/fonts/jp.ttf", 14, self:newCanvasSnappedScale())
+    GraphicsUtil.setGlobalFont("client/assets/fonts/jp.ttf", 2 + baseOffset, self:newCanvasSnappedScale())
   elseif config.language_code == "TH" then
-    GraphicsUtil.setGlobalFont("client/assets/fonts/th.otf", 14, self:newCanvasSnappedScale())
+    GraphicsUtil.setGlobalFont("client/assets/fonts/th.otf", 2 + baseOffset, self:newCanvasSnappedScale())
   else
-    GraphicsUtil.setGlobalFont(nil, 12, self:newCanvasSnappedScale())
+    GraphicsUtil.setGlobalFont(nil, baseOffset, self:newCanvasSnappedScale())
   end
 
   Localization:refresh_global_strings()

client/src/MatchParticipant.lua

@@ -1,5 +1,5 @@
 local class = require("common.lib.class")
-local consts = require("common.engine.consts")
+local consts = require("client.src.consts")
 local Signal = require("common.lib.signal")
 local logger = require("common.lib.logger")
 local CharacterLoader = require("client.src.mods.CharacterLoader")

client/src/Player.lua

@@ -3,7 +3,7 @@ local GameModes = require("common.data.GameModes")
 local LevelPresets = require("common.data.LevelPresets")
 local input = require("client.src.inputManager")
 local MatchParticipant = require("client.src.MatchParticipant")
-local consts = require("common.engine.consts")
+local consts = require("client.src.consts")
 local CharacterLoader = require("client.src.mods.CharacterLoader")
 local PlayerStack = require("client.src.PlayerStack")
 require("client.src.network.PlayerStack")