UI: Added Combo Cards (#1511)

Added Combo-Cards. They act like combo boxes (only one of them can be
selected at any time), but they are clickable boxes:


![image](https://github.com/TTT-2/TTT2/assets/13639408/8cbf4009-df2a-477e-a879-b91e9a712969)

```lua
local form = vgui.CreateTTT2Form(parent, "header_maps_select")

-- Create combo boxes to select element from
comboBase = form:MakeIconLayout()

for i = 1, #maps do
    local mapName = maps[i]
    local prefix = map.GetPrefix(mapName)

    form:MakeComboCard({
        icon = map.GetIcon(mapName),
        label = mapName,
        tag = prefix,
        colorTag = util.StringToColor(prefix or ""),
    }, comboBase)
end
```

Similar to other tileable elements in our UI system, this needs an icon
layout as well. This is then used as a base for these combo cards. There
is no limit to combo cards. All cards that have the same icon layout as
a base are tied together.

`comboBase.checked` contains the checked element. It is `nil` if none is
checked.

Example where these boxes are used: #1512

**Note:** I previously added different cards. To make it more clear I
renamed those. Maybe there is the possibility to merge them in the
future, but right now I'm not in favor of that because that would make
the code more convoluted.

CHANGELOG.md

@@ -28,6 +28,7 @@ All notable changes to TTT2 will be documented here. Inspired by [keep a changel
   - Push-to-Mute
   - Toggle
   - Toggle (Activate on Join)
+- Added combo cards to the UI, clickable cards that act like combo boxes (by @TimGoll)
 
 ### Changed
 

gamemodes/terrortown/gamemode/client/cl_main.lua

@@ -57,7 +57,8 @@ ttt_include("cl_vskin__vgui__dmenubutton")
 ttt_include("cl_vskin__vgui__dsubmenubutton")
 ttt_include("cl_vskin__vgui__dnavpanel")
 ttt_include("cl_vskin__vgui__dcontentpanel")
-ttt_include("cl_vskin__vgui__dcard")
+ttt_include("cl_vskin__vgui__dshopcard")
+ttt_include("cl_vskin__vgui__dcombocard")
 ttt_include("cl_vskin__vgui__dbuttonpanel")
 ttt_include("cl_vskin__vgui__dcategoryheader")
 ttt_include("cl_vskin__vgui__dcategorycollapse")

gamemodes/terrortown/gamemode/client/cl_vskin/default_skin.lua

@@ -55,6 +55,7 @@ local drawSimpleText = draw.SimpleText
 local drawLine = draw.Line
 local drawGetWrappedText = draw.GetWrappedText
 local drawGetTextSize = draw.GetTextSize
+local drawGetLimitedLengthText = draw.GetLimitedLengthText
 
 local alphaDisabled = 100
 
@@ -1467,7 +1468,7 @@ local MODE_INHERIT_REMOVED = ShopEditor.MODE_INHERIT_REMOVED
 -- @param number w
 -- @param number h
 -- @realm client
-function SKIN:PaintCardTTT2(panel, w, h)
+function SKIN:PaintShopCardTTT2(panel, w, h)
     local widthBorder = 2
     local widthBorder2 = widthBorder * 2
     local sizeIcon = 64
@@ -1564,6 +1565,97 @@ function SKIN:PaintCardTTT2(panel, w, h)
     )
 end
 
+---
+-- @param Panel panel
+-- @param number w
+-- @param number h
+-- @realm client
+function SKIN:PaintComboCardTTT2(panel, w, h)
+    local widthBorder = 2
+    local widthBorder2 = widthBorder * 2
+    local widthBorder4 = widthBorder2 * 2
+    local shift = 0
+
+    local colorBackground = utilGetChangedColor(colors.background, 75)
+    local colorBox = colors.settingsBox
+    local opacity = 255
+
+    if panel:GetChecked() then
+        colorBox = colors.accent
+    end
+
+    if panel.Hovered then
+        colorBox = utilGetHoverColor(colorBox)
+        opacity = 230
+    end
+
+    if panel.Depressed then
+        opacity = 240
+        shift = 1
+    end
+
+    local colorText = utilGetDefaultColor(colorBox)
+
+    drawRoundedBox(sizes.cornerRadius, 0, 0, w, h, colorBackground)
+
+    drawRoundedBox(
+        sizes.cornerRadius,
+        widthBorder,
+        widthBorder,
+        w - widthBorder2,
+        h - widthBorder2,
+        colorBox
+    )
+
+    if panel:GetIcon() then
+        draw.FilteredTexture(
+            widthBorder2,
+            widthBorder2 + shift,
+            w - widthBorder4,
+            w - widthBorder4,
+            panel:GetIcon(),
+            opacity,
+            COLOR_WHITE
+        )
+    end
+
+    local tagText = panel:GetTagText()
+
+    if tagText then
+        local width = drawGetTextSize(tagText, panel:GetFont())
+        local colorTag = panel:GetTagColor() or COLOR_WARMGRAY
+
+        width = width + 20
+
+        drawRoundedBox(sizes.cornerRadius, widthBorder4, widthBorder4, width, 20, colorTag)
+
+        drawSimpleText(
+            TryT(tagText),
+            panel:GetFont(),
+            widthBorder4 + 0.5 * width,
+            widthBorder4 + 10,
+            utilGetDefaultColor(colorTag),
+            TEXT_ALIGN_CENTER,
+            TEXT_ALIGN_CENTER
+        )
+    end
+
+    drawSimpleText(
+        drawGetLimitedLengthText(
+            TryT(panel:GetText()),
+            w - 2 * widthBorder4,
+            panel:GetFont(),
+            "..."
+        ),
+        panel:GetFont(),
+        widthBorder4,
+        w + shift,
+        colorText,
+        TEXT_ALIGN_LEFT,
+        TEXT_ALIGN_TOP
+    )
+end
+
 ---
 -- @param Panel panel
 -- @param number w

gamemodes/terrortown/gamemode/client/cl_vskin/vgui/dcombocard_ttt2.lua

@@ -0,0 +1,154 @@
+---
+-- @class PANEL
+-- @section DComboCardTTT2
+
+local PANEL = {}
+
+---
+-- @ignore
+function PANEL:Init()
+    self:SetContentAlignment(5)
+
+    self:SetTall(22)
+    self:SetMouseInputEnabled(true)
+    self:SetKeyboardInputEnabled(true)
+
+    self:SetCursor("hand")
+    self:SetFont("DermaTTT2TextLarge")
+
+    -- remove label and overwrite function
+    self:SetText("")
+    self.SetText = function(slf, text)
+        slf.data.text = text
+    end
+
+    self.data = {
+        title = "",
+        icon = nil,
+        checked = false,
+    }
+end
+
+---
+-- @return string
+-- @realm client
+function PANEL:GetText()
+    return self.data.text
+end
+
+---
+-- @param Material icon
+-- @realm client
+function PANEL:SetIcon(icon)
+    self.data.icon = icon
+end
+
+---
+-- @return Matieral
+-- @realm client
+function PANEL:GetIcon()
+    return self.data.icon
+end
+
+---
+-- @param string text
+-- @realm client
+function PANEL:SetTagText(text)
+    self.data.tagtext = text
+end
+
+---
+-- @return string
+-- @realm client
+function PANEL:GetTagText()
+    return self.data.tagtext
+end
+
+---
+-- @param Color color
+-- @realm client
+function PANEL:SetTagColor(color)
+    self.data.tagcolor = color
+end
+
+---
+-- @return Color
+-- @realm client
+function PANEL:GetTagColor()
+    return self.data.tagcolor
+end
+
+---
+-- @param number mode
+-- @realm client
+function PANEL:SetChecked(mode)
+    self.data.checked = mode or false
+end
+
+---
+-- @return number
+-- @realm client
+function PANEL:GetChecked()
+    return self.data.checked
+end
+
+---
+-- @param number keyCode
+-- @realm client
+function PANEL:OnMouseReleased(keyCode)
+    self.BaseClass.OnMouseReleased(self, keyCode)
+
+    if keyCode ~= MOUSE_LEFT then
+        return
+    end
+
+    local parent = self:GetParent()
+
+    if not IsValid(parent) then
+        return
+    end
+
+    local oldChecked = self:GetChecked()
+
+    self:SetChecked(true)
+
+    local checked = parent.checked
+
+    parent.checked = self
+
+    self:OnClick(oldChecked, true)
+
+    if not IsValid(checked) or checked == self then
+        return
+    end
+
+    checked:SetChecked(false)
+end
+
+---
+-- @param number old
+-- @param number new
+-- @realm client
+function PANEL:OnClick(old, new) end
+
+---
+-- @return boolean
+-- @realm client
+function PANEL:IsDown()
+    return self.Depressed
+end
+
+---
+-- @ignore
+function PANEL:Paint(w, h)
+    derma.SkinHook("Paint", "ComboCardTTT2", self, w, h)
+
+    return false
+end
+
+derma.DefineControl(
+    "DComboCardTTT2",
+    "A special button where only one can be set at a time",
+    PANEL,
+    "DButtonTTT2"
+)

gamemodes/terrortown/gamemode/client/cl_vskin/vgui/dform_ttt2.lua

@@ -576,13 +576,13 @@ function PANEL:MakePanel()
 end
 
 ---
--- Adds a new card to the form.
+-- Adds a new shop card to the form.
 -- @param table data The data for the card
 -- @param PANEL base The base Panel (DIconLayout) where this card will be added
 -- @return Panel The created card
 -- @realm client
-function PANEL:MakeCard(data, base)
-    local card = base:Add("DCardTTT2")
+function PANEL:MakeShopCard(data, base)
+    local card = base:Add("DShopCardTTT2")
 
     card:SetSize(238, 78)
     card:SetIcon(data.icon)
@@ -598,6 +598,33 @@ function PANEL:MakeCard(data, base)
     return card
 end
 
+---
+-- Adds a new combo card to the form. A combo card is a card where only one
+-- can be selected at any time.
+-- @param table data The data for the card
+-- @param PANEL base The base Panel (DIconLayout) where this card will be added
+-- @return Panel The created card
+-- @realm client
+function PANEL:MakeComboCard(data, base)
+    local card = base:Add("DComboCardTTT2")
+
+    -- todo smaller, higher - square?
+    card:SetSize(175, 205)
+    card:SetIcon(data.icon)
+    card:SetText(data.label)
+    card:SetTagText(data.tag)
+    card:SetTagColor(data.colorTag)
+    card:SetChecked(data.initial)
+
+    card.OnClick = function(slf, old, new)
+        if data and isfunction(data.OnClick) then
+            data.OnClick(slf, old, new)
+        end
+    end
+
+    return card
+end
+
 ---
 -- Adds a new image check box to the form.
 -- @param table data The data for the image check box

gamemodes/terrortown/gamemode/client/cl_vskin/vgui/dcard_ttt2.lua → gamemodes/terrortown/gamemode/client/cl_vskin/vgui/dshopcard_ttt2.lua

@@ -1,6 +1,6 @@
 ---
 -- @class PANEL
--- @section DCardTTT2
+-- @section DShopCardTTT2
 
 local PANEL = {}
 
@@ -109,9 +109,14 @@ end
 ---
 -- @ignore
 function PANEL:Paint(w, h)
-    derma.SkinHook("Paint", "CardTTT2", self, w, h)
+    derma.SkinHook("Paint", "ShopCardTTT2", self, w, h)
 
     return false
 end
 
-derma.DefineControl("DCardTTT2", "A special button used for the shop editor", PANEL, "DButtonTTT2")
+derma.DefineControl(
+    "DShopCardTTT2",
+    "A special button used for the shop editor",
+    PANEL,
+    "DButtonTTT2"
+)

gamemodes/terrortown/gamemode/shared/sh_include.lua

@@ -99,7 +99,8 @@ TTTFiles = {
     },
     cl_vskin__vgui__dnavpanel = { file = "cl_vskin/vgui/dnavpanel_ttt2.lua", on = "client" },
     cl_vskin__vgui__dcontentpanel = { file = "cl_vskin/vgui/dcontentpanel_ttt2.lua", on = "client" },
-    cl_vskin__vgui__dcard = { file = "cl_vskin/vgui/dcard_ttt2.lua", on = "client" },
+    cl_vskin__vgui__dshopcard = { file = "cl_vskin/vgui/dshopcard_ttt2.lua", on = "client" },
+    cl_vskin__vgui__dcombocard = { file = "cl_vskin/vgui/dcombocard_ttt2.lua", on = "client" },
     cl_vskin__vgui__dbuttonpanel = { file = "cl_vskin/vgui/dbuttonpanel_ttt2.lua", on = "client" },
     cl_vskin__vgui__dcategoryheader = {
         file = "cl_vskin/vgui/dcategoryheader_ttt2.lua",

lua/terrortown/menus/gamemode/shops/base_shops.lua

@@ -113,7 +113,7 @@ function CLGAMEMODESUBMENU:Populate(parent)
     for i = 1, #sortedEquipmentList do
         local item = sortedEquipmentList[i]
 
-        form:MakeCard({
+        form:MakeShopCard({
             label = item.shopTitle,
             icon = item.iconMaterial,
             initial = item.CanBuy[roleIndex] and MODE_ADDED or MODE_DEFAULT, -- todo: this should be the current mode