Skin selection UI overhaul

src/callbacks.lua

@@ -134,6 +134,7 @@ local function init_data(player, info)
 	data.player_name     = name
 	data.filter          = ""
 	data.pagenum         = 1
+	data.skin_pagenum    = 1
 	data.items           = i3.init_items
 	data.items_raw       = i3.init_items
 	data.favs            = {}

src/fields.lua

@@ -19,12 +19,6 @@ local function inv_fields(player, data, fields)
 		return
 	end
 
-	if fields.skins then
-		local id = tonumber(fields.skins)
-		local _skins = skins.get_skinlist_for_player(name)
-		skins.set_player_skin(player, _skins[id])
-	end
-
 	if fields.drop_items then
 		local items = split(fields.drop_items, ",")
 		data.drop_items = items
@@ -46,6 +40,11 @@ local function inv_fields(player, data, fields)
 		elseif sub(field, 1, 8) == "setting_" then
 			data.show_setting = match(field, "_(%w+)$")
 
+		elseif sub(field, 1, 9) == "skin_btn_" then
+			local id = tonumber(field:match("%d+"))
+			local _skins = skins.get_skinlist_for_player(name)
+			skins.set_player_skin(player, _skins[id])
+
 		elseif find(field, "waypoint_%d+") then
 			local id, action = match(field, "_(%d+)_(%w+)$")
 			      id = tonumber(id)
@@ -344,6 +343,16 @@ local function rcp_fields(player, data, fields)
 			data.pagenum = data.pagemax
 		end
 
+	elseif fields.prev_skin or fields.next_skin then
+		if data.skin_pagemax == 1 then return end
+		data.skin_pagenum -= (fields.prev_skin and 1 or -1)
+
+		if data.skin_pagenum > data.skin_pagemax then
+			data.skin_pagenum = 1
+		elseif data.skin_pagenum == 0 then
+			data.skin_pagenum = data.skin_pagemax
+		end
+
 	elseif fields.prev_recipe or fields.next_recipe then
 		local num = data.rnum + (fields.prev_recipe and -1 or 1)
 		data.rnum = data.recipes[num] and num or (fields.prev_recipe and #data.recipes or 1)

src/gui.lua

@@ -494,20 +494,41 @@ local function get_container(fs, data, player, yoffset, ctn_len, award_list, awa
 
 		local _skins = skins.get_skinlist_for_player(name)
 		local skin_name = skins.get_player_skin(player).name
-		local sks, id = {}, 1
+		local btn_y = yextra + 0.75
+		local spp = 24
 
-		for i, skin in ipairs(_skins) do
-			if skin.name == skin_name then
-				id = i
+		data.skin_pagemax = max(1, ceil(#_skins / spp))
+
+		fs("image_button", 1.5, btn_y, 0.35, 0.35, "", "prev_skin", "")
+		fs("image_button", 3.85, btn_y, 0.35, 0.35, "", "next_skin", "")
+
+		fs"style[skin_page;font=bold;font_size=18]"
+		fs("button", 1.85, btn_y - 0.23, 2, 0.8, "skin_page",
+			fmt("%s / %u", clr(colors.yellow, data.skin_pagenum), data.skin_pagemax))
+
+		local first = (data.skin_pagenum - 1) * spp
+		local last = first + spp - 1
+
+		for i = first, last do
+			local skin = _skins[i + 1]
+			if not skin then break end
+			local btn_name = fmt("skin_btn_%u", i + 1)
+
+			fs(fmt([[ style[%s;padding=10;
+					fgimg=%s;bgimg=%s;bgimg_hovered=i3_btn9_hovered.png;
+					bgimg_pressed=i3_btn9_pressed.png;bgimg_middle=4,6] ]],
+				btn_name, skin:get_preview(),
+				skin.name == skin_name and "i3_btn9_hovered.png" or "i3_btn9.png"))
+
+			local X = (i % 3) * 1.93
+
+			local Y = ceil((i % spp - X) / 3 + 1)
+			      Y += (Y * 2.45) + yextra - 2.15
+
+			fs("image_button", X, Y, 1.86, 3.4, "", btn_name, "")
+			fs(fmt("tooltip[%s;%s]", btn_name, ESC(skin.name)))
 		end
 
-			insert(sks, skin.name)
-		end
-
-		sks = concat(sks, ","):gsub(";", "")
-		fs("label", 0, yextra + 0.85, fmt("%s:", ES"Select a skin"))
-		fs(fmt("dropdown[0,%f;4,0.6;skins;%s;%u;true]", yextra + 1.1, sks, id))
-
 	elseif data.subcat == 4 then
 		if not i3.modules.awards then
 			return not_installed "awards"
@@ -579,9 +600,6 @@ local function show_popup(fs, data)
 		elseif show_sorting then
 			fs("button", 2.1, 9.7, 6, 0.8, "select_sorting", ES"Select the inventory sorting method:")
 
-			fs(fmt("style[prev_sort;fgimg=%s;fgimg_hovered=%s]", PNG.prev, PNG.prev_hover),
-			   fmt("style[next_sort;fgimg=%s;fgimg_hovered=%s]", PNG.next, PNG.next_hover))
-
 			fs("image_button", 2.2, 10.6, 0.35, 0.35, "",  "prev_sort", "")
 			fs("image_button", 7.65, 10.6, 0.35, 0.35, "", "next_sort", "")
 
@@ -667,6 +685,13 @@ local function get_inventory_fs(player, data, fs)
 
 		max_val += 10
 
+	elseif i3.modules.skins and data.subcat == 3 then
+		local spp = 24
+		local _skins = skins.get_skinlist_for_player(data.player_name)
+		local num = max(1, min(spp, #_skins - ((data.skin_pagenum - 1) * spp)))
+
+		max_val += ceil(num / 3) * 34
+
 	elseif i3.modules.awards and data.subcat == 4 then
 		award_list = awards.get_award_states(data.player_name)
 		award_list_nb = #award_list

src/styles.lua

@@ -79,12 +79,8 @@ local styles = string.format([[
 	style[exit;fgimg=%s;fgimg_hovered=%s;content_offset=0]
 	style[cancel;fgimg=%s;fgimg_hovered=%s;content_offset=0]
 	style[search;fgimg=%s;fgimg_hovered=%s;content_offset=0]
-	style[prev_page;fgimg=%s;fgimg_hovered=%s]
-	style[next_page;fgimg=%s;fgimg_hovered=%s]
-	style[prev_recipe;fgimg=%s;fgimg_hovered=%s]
-	style[next_recipe;fgimg=%s;fgimg_hovered=%s]
-	style[prev_usage;fgimg=%s;fgimg_hovered=%s]
-	style[next_usage;fgimg=%s;fgimg_hovered=%s]
+	style[prev_page,prev_recipe,prev_usage,prev_sort,prev_skin;fgimg=%s;fgimg_hovered=%s]
+	style[next_page,next_recipe,next_usage,next_sort,next_skin;fgimg=%s;fgimg_hovered=%s]
 	style[waypoint_add;fgimg=%s;fgimg_hovered=%s;content_offset=0]
 	style[bag_rename;fgimg=%s;fgimg_hovered=%s;content_offset=0]
 	style[btn_bag,btn_armor,btn_skins;font=bold;font_size=18;content_offset=0;sound=i3_click]
@@ -102,10 +98,6 @@ PNG.cancel,   PNG.cancel_hover,
 PNG.search,   PNG.search_hover,
 PNG.prev,     PNG.prev_hover,
 PNG.next,     PNG.next_hover,
-PNG.prev,     PNG.prev_hover,
-PNG.next,     PNG.next_hover,
-PNG.prev,     PNG.prev_hover,
-PNG.next,     PNG.next_hover,
 PNG.add,      PNG.add_hover,
 PNG.edit,     PNG.edit_hover)