ux: Add icons to Socket Group skill list based on the item slot (Path…

…OfBuildingCommunity#6339) * Add icons for various item types * Add icon support for ListControl * Display icon based on socket group's slot * Add some padding between text / icon * Fix weapon swap * Remove dev leftover * Change Glove image * Change Shield + Fix loading * Change icons based on weapon type Adds the code to change the weapon based on type, Only uses a bow, quiver and shield as the alternate icon art for slots * Fix colour changing --------- Co-authored-by: LocalIdentity <localidentity2@gmail.com>
shafouz · Dec 5, 2023 · 3ee6058 · 3ee6058
1 parent 0327c76
commit 3ee6058
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 1 deletion.
diff --git a/src/Assets/icon_amulet.png b/src/Assets/icon_amulet.png
diff --git a/src/Assets/icon_belt.png b/src/Assets/icon_belt.png
diff --git a/src/Assets/icon_body_armour.png b/src/Assets/icon_body_armour.png
diff --git a/src/Assets/icon_boots.png b/src/Assets/icon_boots.png
diff --git a/src/Assets/icon_bow.png b/src/Assets/icon_bow.png
diff --git a/src/Assets/icon_gloves.png b/src/Assets/icon_gloves.png
diff --git a/src/Assets/icon_helmet.png b/src/Assets/icon_helmet.png
diff --git a/src/Assets/icon_quiver.png b/src/Assets/icon_quiver.png
diff --git a/src/Assets/icon_ring_left.png b/src/Assets/icon_ring_left.png
diff --git a/src/Assets/icon_ring_right.png b/src/Assets/icon_ring_right.png
diff --git a/src/Assets/icon_shield.png b/src/Assets/icon_shield.png
diff --git a/src/Assets/icon_shield_swap.png b/src/Assets/icon_shield_swap.png
diff --git a/src/Assets/icon_weapon.png b/src/Assets/icon_weapon.png
diff --git a/src/Assets/icon_weapon_2.png b/src/Assets/icon_weapon_2.png
diff --git a/src/Assets/icon_weapon_2_swap.png b/src/Assets/icon_weapon_2_swap.png
diff --git a/src/Assets/icon_weapon_swap.png b/src/Assets/icon_weapon_swap.png
diff --git a/src/Classes/ListControl.lua b/src/Classes/ListControl.lua
@@ -8,6 +8,7 @@
 -- .dragTargetList  [List of controls that can receive drag events from this list control]
 -- .showRowSeparators  [Shows separators between rows]
 -- :GetRowValue(column, index, value)  [Required; called to retrieve the text for the given column of the given list value]
+-- :GetRowIcon(column, index, value)  [Called to retrieve the icon for the given column of the given list value]
 -- :AddValueTooltip(index, value)  [Called to add the tooltip for the given list value]
 -- :GetDragValue(index, value)  [Called to retrieve the drag type and object for the given list value]
 -- :CanReceiveDrag(type, value)  [Called on drag target to determine if it can receive this value]
@@ -210,6 +211,10 @@ function ListClass:Draw(viewPort, noTooltip)
 			local lineY = rowHeight * (index - 1) - scrollOffsetV + (self.colLabels and 18 or 0)
 			local value = list[index]
 			local text = self:GetRowValue(colIndex, index, value)
+			local icon = nil
+			if self.GetRowIcon then 
+				icon = self:GetRowIcon(colIndex, index, value)
+			end
 			local textWidth = DrawStringWidth(textHeight, colFont, text)
 			if textWidth > colWidth - 2 then
 				local clipIndex = DrawStringCursorIndex(textHeight, colFont, text, colWidth - clipWidth - 2, 0)
@@ -263,7 +268,13 @@ function ListClass:Draw(viewPort, noTooltip)
 			if not self.SetHighlightColor or not self:SetHighlightColor(index, value) then
 				SetDrawColor(1, 1, 1)
 			end
-			DrawString(colOffset, lineY + textOffsetY, "LEFT", textHeight, colFont, text)
+			-- TODO: handle icon size properly, for now assume they are 16x16
+			if icon == nil then
+				DrawString(colOffset, lineY + textOffsetY, "LEFT", textHeight, colFont, text)
+			else
+				DrawImage(icon, colOffset, lineY + 1, 16, 16)
+				DrawString(colOffset + 16 + 2, lineY + textOffsetY, "LEFT", textHeight, colFont, text)
+			end
 		end
 		if self.colLabels then
 			local mOver = relX >= colOffset and relX <= colOffset + colWidth and relY >= 0 and relY <= 18

diff --git a/src/Classes/SkillListControl.lua b/src/Classes/SkillListControl.lua
@@ -6,6 +6,24 @@
 local ipairs = ipairs
 local t_insert = table.insert
 local t_remove = table.remove
+local slot_map = {
+	["Weapon 1"] 		= { icon = NewImageHandle(), path = "Assets/icon_weapon.png" },
+	["Weapon 2"] 		= { icon = NewImageHandle(), path = "Assets/icon_weapon_2.png" },
+	["Weapon 1 Swap"] 	= { icon = NewImageHandle(), path = "Assets/icon_weapon_swap.png" },
+	["Weapon 2 Swap"] 	= { icon = NewImageHandle(), path = "Assets/icon_weapon_2_swap.png" },
+	["Bow"] 			= { icon = NewImageHandle(), path = "Assets/icon_bow.png" },
+	["Quiver"] 			= { icon = NewImageHandle(), path = "Assets/icon_quiver.png" },
+	["Shield"] 			= { icon = NewImageHandle(), path = "Assets/icon_shield.png" },
+	["Shield Swap"] 	= { icon = NewImageHandle(), path = "Assets/icon_shield_swap.png" },
+	["Helmet"] 			= { icon = NewImageHandle(), path = "Assets/icon_helmet.png" },
+	["Body Armour"] 	= { icon = NewImageHandle(), path = "Assets/icon_body_armour.png" },
+	["Gloves"] 			= { icon = NewImageHandle(), path = "Assets/icon_gloves.png" },
+	["Boots"] 			= { icon = NewImageHandle(), path = "Assets/icon_boots.png" },
+	["Amulet"] 			= { icon = NewImageHandle(), path = "Assets/icon_amulet.png" },
+	["Ring 1"] 			= { icon = NewImageHandle(), path = "Assets/icon_ring_left.png" },
+	["Ring 2"] 			= { icon = NewImageHandle(), path = "Assets/icon_ring_right.png" },
+	["Belt"] 			= { icon = NewImageHandle(), path = "Assets/icon_belt.png" },
+}
 
 local SkillListClass = newClass("SkillListControl", "ListControl", function(self, anchor, x, y, width, height, skillsTab)
 	self.ListControl(anchor, x, y, width, height, 16, "VERTICAL", true, skillsTab.socketGroupList)
@@ -44,6 +62,9 @@ local SkillListClass = newClass("SkillListControl", "ListControl", function(self
 		skillsTab.build.buildFlag = true
 		return skillsTab.gemSlots[1].nameSpec
 	end)
+	for k, x in pairs(slot_map) do
+		x.icon:Load(x.path)
+	end
 end)
 
 function SkillListClass:GetRowValue(column, index, socketGroup)
@@ -178,3 +199,43 @@ function SkillListClass:OnHoverKeyUp(key)
 		end
 	end
 end
+
+
+function SkillListClass:Draw(viewPort)
+	self.ListControl.Draw(self, viewPort)
+end
+
+function SkillListClass:GetRowIcon(column, index, socketGroup)
+	if column == 1 then
+		local slot = socketGroup.slot or nil
+		local color = "^7"
+		local currentMainSkill = self.skillsTab.build.mainSocketGroup == index
+		local disabled = not socketGroup.enabled or not socketGroup.slotEnabled
+		local itemsTab = self.skillsTab.build.itemsTab
+		local weapon1Sel = itemsTab.activeItemSet["Weapon 1"].selItemId or 0
+		local weapon1Type = itemsTab.items[weapon1Sel] and itemsTab.items[weapon1Sel].base.type or "None"
+		local weapon1SwapSel = itemsTab.activeItemSet["Weapon 1 Swap"].selItemId or 0
+		local weapon1SwapType = itemsTab.items[weapon1SwapSel] and itemsTab.items[weapon1SwapSel].base.type or "None"
+		local weapon2Sel = itemsTab.activeItemSet["Weapon 2"].selItemId or 0
+		local weapon2Type = itemsTab.items[weapon2Sel] and itemsTab.items[weapon2Sel].base.type or "None"
+		local weapon2SwapSel = itemsTab.activeItemSet["Weapon 2 Swap"].selItemId or 0
+		local weapon2SwapType = itemsTab.items[weapon2SwapSel] and itemsTab.items[weapon2SwapSel].base.type or "None"
+		if slot == "Weapon 1" and weapon1Type == "Bow" then
+			slot = weapon1Type
+		end
+		if slot == "Weapon 1 Swap" and weapon1SwapType == "Bow" then
+			slot = weapon1SwapType.." Swap"
+		end
+		if slot == "Weapon 2" and (weapon2Type == "Quiver" or weapon2Type == "Shield") then
+			slot = weapon2Type
+		end
+		if slot == "Weapon 2 Swap" and (weapon2SwapType == "Quiver" or weapon2SwapType == "Shield") then
+			slot = weapon2SwapType.." Swap"
+		end
+		if slot_map[slot] then
+			return slot_map[slot].icon
+		else
+			return nil
+		end
+	end
+end