Implement UI scaling in Derma UIs

gamemodes/terrortown/entities/weapons/weapon_tttbase.lua

@@ -19,13 +19,15 @@ end
 
 if CLIENT then
     -- hud help font
-    surface.CreateAdvancedFont(
+    fonts.AddFont(
         "weapon_hud_help",
-        { font = "Tahoma", size = 16, weight = 600, extended = true }
+        16,
+        { font = "Tahoma", weight = 600, extended = true }
     )
-    surface.CreateAdvancedFont(
+    fonts.AddFont(
         "weapon_hud_help_key",
-        { font = "Tahoma", size = 13, weight = 1200, extended = true }
+        13,
+        { font = "Tahoma", weight = 1200, extended = true }
     )
 end
 
@@ -563,7 +565,8 @@ if CLIENT then
                 -- attempt to translate binding in case it can be translated
                 bindig = TryT(binding)
 
-                local wKey, hKey = draw.GetTextSize(binding, "weapon_hud_help_key", scale)
+                local kfont, kfscale = fonts.ScaledFont("weapon_hud_help_key", scale)
+                local wKey, hKey = draw.GetTextSize(binding, kfont, kfscale)
 
                 wBinding = wKey + 2 * padXKey * scale
                 hBinding = hKey + 2 * padYKey * scale
@@ -578,7 +581,8 @@ if CLIENT then
             end
 
             local translatedDescription = TryT(description)
-            local wDescription = draw.GetTextSize(translatedDescription, "weapon_hud_help", scale)
+            local font, fscale = fonts.ScaledFont("weapon_hud_help", scale)
+            local wDescription = draw.GetTextSize(translatedDescription, font, fscale)
 
             processedData[i] = {
                 w = wBinding,
@@ -774,7 +778,8 @@ if CLIENT then
             end
         end
 
-        local width = draw.GetTextSize(text, "weapon_hud_help")
+        local font, fscale = fonts.ScaledFont("weapon_hud_help")
+        local width = draw.GetTextSize(text, font, fscale)
 
         self.HUDHelp.bindingLines[#self.HUDHelp.bindingLines + 1] =
             { text = text, binding = materialOrBinding }

gamemodes/terrortown/gamemode/client/cl_help.lua

@@ -175,18 +175,20 @@ local MAIN_MENU = "main"
 -- @realm client
 function HELPSCRN:ShowMainMenu()
     local frame = self.menuFrame
+    local scale = appearance.GetGlobalScale()
 
     -- IF MENU ELEMENT DOES NOT ALREADY EXIST, CREATE IT
     if IsValid(frame) then
         frame:ClearFrame(nil, nil, "help_title")
     else
-        frame = vguihandler.GenerateFrame(width, height, "help_title")
+        frame = vguihandler.GenerateFrame(width * scale, height * scale, "help_title")
     end
 
     self.menuFrame = frame
 
     -- INIT MAIN MENU SPECIFIC STUFF
-    frame:SetPadding(self.padding, self.padding, self.padding, self.padding)
+    local padding = self.padding * scale
+    frame:SetPadding(padding, padding, padding, padding)
 
     -- MARK AS MAIN MENU
     self.currentMenuId = MAIN_MENU
@@ -198,8 +200,8 @@ function HELPSCRN:ShowMainMenu()
     -- SPLIT FRAME INTO A GRID LAYOUT
     local dsettings = vgui.Create("DIconLayout", scrollPanel)
     dsettings:Dock(FILL)
-    dsettings:SetSpaceX(self.padding)
-    dsettings:SetSpaceY(self.padding)
+    dsettings:SetSpaceX(padding)
+    dsettings:SetSpaceY(padding)
 
     -- SPLIT INTO NORMAL AND ADMIN MENUS
     local menusNormal, menusAdmin = {}, {}
@@ -219,16 +221,24 @@ function HELPSCRN:ShowMainMenu()
     end
 
     local rows = math.ceil(#menusNormal / 3) + math.ceil(#menusAdmin / 3)
-    local maxHeight = rows * heightMainMenuButton
-        + (rows - 1) * self.padding
-        + ((#menusAdmin == 0) and 0 or heightAdminSeperator)
-    local heightScroll = height - vskin.GetHeaderHeight() - vskin.GetBorderSize() - 2 * self.padding
-
-    local scrollSize = (heightScroll < maxHeight and 20 or 0)
-
-    local widthMainMenuButton = (width - 4 * self.padding - scrollSize) / 3
-
-    AddMenuButtons(menusNormal, dsettings, widthMainMenuButton, heightMainMenuButton)
+    local maxHeight = rows * heightMainMenuButton * scale
+        + (rows - 1) * padding
+        + ((#menusAdmin == 0) and 0 or heightAdminSeperator * scale)
+    local heightScroll = height * scale
+        - vskin.GetHeaderHeight()
+        - vskin.GetBorderSize()
+        - 2 * padding
+
+    local scrollSize = (heightScroll < maxHeight and 20 or 0) * scale
+
+    local widthMainMenuButton = (width - 4 * padding - scrollSize) / 3
+
+    AddMenuButtons(
+        menusNormal,
+        dsettings,
+        widthMainMenuButton * scale,
+        heightMainMenuButton * scale
+    )
 
     -- only show admin section if player is admin and
     -- there are menues to be shown
@@ -239,15 +249,15 @@ function HELPSCRN:ShowMainMenu()
     local labelSpacer = dsettings:Add("DLabelTTT2")
     labelSpacer.OwnLine = true
     labelSpacer:SetText("label_menu_admin_spacer")
-    labelSpacer:SetSize(width - 2 * self.padding - scrollSize, heightAdminSeperator)
+    labelSpacer:SetSize(width * scale - 2 * padding - scrollSize, heightAdminSeperator * scale)
     labelSpacer:SetFont("DermaTTT2TextLarge")
     labelSpacer.Paint = function(slf, w, h)
         derma.SkinHook("Paint", "LabelSpacerTTT2", slf, w, h)
 
         return true
     end
 
-    AddMenuButtons(menusAdmin, dsettings, widthMainMenuButton, heightMainMenuButton)
+    AddMenuButtons(menusAdmin, dsettings, widthMainMenuButton * scale, heightMainMenuButton * scale)
 end
 
 ---
@@ -293,6 +303,8 @@ function HELPSCRN:BuildContentArea()
         return
     end
 
+    local scale = appearance.GetGlobalScale()
+
     ---
     -- @realm client
     if
@@ -314,7 +326,7 @@ function HELPSCRN:BuildContentArea()
 
     -- CALCULATE SIZE BASED ON EXISTENCE OF BUTTON PANEL
     if self.submenuClass:HasButtonPanel() then
-        height2 = height2 - heightButtonPanel
+        height2 = height2 - heightButtonPanel * scale
     end
 
     -- ADD CONTENT BOX AND CONTENT
@@ -328,7 +340,7 @@ function HELPSCRN:BuildContentArea()
     -- ADD BUTTON BOX AND BUTTONS
     if self.submenuClass:HasButtonPanel() then
         local buttonArea = vgui.Create("DButtonPanelTTT2", parent)
-        buttonArea:SetSize(width2, heightButtonPanel)
+        buttonArea:SetSize(width2, heightButtonPanel * scale)
         buttonArea:Dock(BOTTOM)
 
         self.submenuClass:PopulateButtonPanel(buttonArea)
@@ -341,12 +353,17 @@ end
 -- @realm client
 function HELPSCRN:ShowSubmenu(menuClass)
     local frame = self.menuFrame
+    local scale = appearance.GetGlobalScale()
 
     -- IF MENU ELEMENT DOES NOT ALREADY EXIST, CREATE IT
     if IsValid(frame) then
         frame:ClearFrame(nil, nil, menuClass.title or menuClass.type)
     else
-        frame = vguihandler.GenerateFrame(width, height, menuClass.title or menuClass.type)
+        frame = vguihandler.GenerateFrame(
+            width * scale,
+            height * scale,
+            menuClass.title or menuClass.type
+        )
     end
 
     -- INIT SUB MENU SPECIFIC STUFF
@@ -360,26 +377,28 @@ function HELPSCRN:ShowSubmenu(menuClass)
     -- MARK AS SUBMENU
     self.currentMenuId = menuClass.type
 
+    local padding = self.padding * scale
+
     -- BUILD GENERAL BOX STRUCTURE
     local navArea = vgui.Create("DNavPanelTTT2", frame)
-    navArea:SetWide(widthNav)
+    navArea:SetWide(widthNav * scale)
     navArea:SetPos(0, 0)
-    navArea:DockPadding(0, self.padding, 1, self.padding)
+    navArea:DockPadding(0, padding, 1, padding)
     navArea:Dock(LEFT)
 
     local contentArea = vgui.Create("DContentPanelTTT2", frame)
     contentArea:SetSize(
-        widthContent,
-        heightContent - vskin.GetHeaderHeight() - vskin.GetBorderSize()
+        widthContent * scale,
+        heightContent * scale - vskin.GetHeaderHeight() - vskin.GetBorderSize()
     )
-    contentArea:SetPos(widthNav, 0)
-    contentArea:DockPadding(self.padding, self.padding, self.padding, self.padding)
+    contentArea:SetPos(widthNav * scale, 0)
+    contentArea:DockPadding(padding, padding, padding, padding)
     contentArea:Dock(TOP)
 
     -- MAKE SEPARATE SUBMENULIST ON THE NAVAREA WITH A CONTENT AREA
     local submenuList = vgui.Create("DSubmenuListTTT2", navArea)
     submenuList:Dock(FILL)
-    submenuList:SetPadding(self.padding)
+    submenuList:SetPadding(padding)
     submenuList:SetBasemenuClass(menuClass, contentArea)
     submenuList:EnableSearchBar(menuClass:HasSearchbar())
 

gamemodes/terrortown/gamemode/client/cl_scoring.lua

@@ -95,12 +95,13 @@ CLSCORE.sizes = {}
 -- @internal
 -- @realm client
 function CLSCORE:CalculateSizes()
-    self.sizes.width = 1200
-    self.sizes.height = 700
-    self.sizes.padding = 10
+    local scale = appearance.GetGlobalScale()
+    self.sizes.width = 1200 * scale
+    self.sizes.height = 700 * scale
+    self.sizes.padding = 10 * scale
     self.sizes.paddingSmall = 0.5 * self.sizes.padding
 
-    self.sizes.widthMenu = 50 + vskin.GetBorderSize()
+    self.sizes.widthMenu = 50 * scale + vskin.GetBorderSize()
 
     local doublePadding = 2 * self.sizes.padding
 
@@ -110,28 +111,29 @@ function CLSCORE:CalculateSizes()
         - vskin.GetBorderSize()
     self.sizes.widthMainArea = self.sizes.width - self.sizes.widthMenu - doublePadding
 
-    self.sizes.heightHeaderPanel = 120
-    self.sizes.widthTopButton = 140
-    self.sizes.heightTopButton = 30
+    self.sizes.heightHeaderPanel = 120 * scale
+    self.sizes.widthTopButton = 140 * scale
+    self.sizes.heightTopButton = 30 * scale
     self.sizes.widthTopLabel = 0.5 * self.sizes.widthMainArea
         - self.sizes.widthTopButton
         - self.sizes.padding
     self.sizes.heightTopButtonPanel = self.sizes.heightTopButton + doublePadding
-    self.sizes.heightRow = 25
-    self.sizes.heightTitleRow = 30
+    self.sizes.heightRow = 25 * scale
+    self.sizes.heightTitleRow = 30 * scale
 
-    self.sizes.heightButton = 45
-    self.sizes.widthButton = 175
-    self.sizes.heightBottomButtonPanel = self.sizes.heightButton + self.sizes.padding + 1
+    self.sizes.heightButton = 45 * scale
+    self.sizes.widthButton = 175 * scale
+    self.sizes.heightBottomButtonPanel = self.sizes.heightButton + self.sizes.padding + 1 * scale
     self.sizes.heightContentLarge = self.sizes.heightMainArea
         - self.sizes.heightBottomButtonPanel
         - self.sizes.heightTopButtonPanel
         - 3 * self.sizes.padding
     self.sizes.heightContent = self.sizes.heightContentLarge - self.sizes.heightHeaderPanel
-    self.sizes.heightMenuButton = 50
+    self.sizes.heightMenuButton = 50 * scale
 
-    self.sizes.widthKarma = 50
-    self.sizes.widthScore = 35
+    self.sizes.widthKarma = 50 * scale
+    self.sizes.widthScore = 35 * scale
+    self.sizes.scale = scale
 end
 
 ---
@@ -197,7 +199,10 @@ function CLSCORE:CreatePanel()
     local buttonClose = vgui.Create("DButtonTTT2", buttonArea)
     buttonClose:SetText("close")
     buttonClose:SetSize(self.sizes.widthButton, self.sizes.heightButton)
-    buttonClose:SetPos(self.sizes.widthMainArea - self.sizes.widthButton, self.sizes.padding + 1)
+    buttonClose:SetPos(
+        self.sizes.widthMainArea - self.sizes.widthButton,
+        self.sizes.padding + 1 * self.sizes.scale
+    )
     buttonClose.DoClick = function(btn)
         self:HidePanel()
     end
@@ -209,7 +214,7 @@ function CLSCORE:CreatePanel()
         local data = subMenusIndexed[i]
 
         local menuButton = menuBoxGrid:Add("DSubmenuButtonTTT2")
-        menuButton:SetSize(self.sizes.widthMenu - 1, self.sizes.heightMenuButton)
+        menuButton:SetSize(self.sizes.widthMenu - 1 * self.sizes.scale, self.sizes.heightMenuButton)
         menuButton:SetIcon(data.icon)
         menuButton:SetTooltip(data.title)
         menuButton.DoClick = function(slf)