Help with UI creation via a script

Help and Feedback Scripting Support
,
#1

I am trying to make a rank donations center and when I try to make the buttons it has been very hard to get it correct. The code below shows nothing for be but I have no idea why. I know its a lot of code but if you could take a look and try to help that would be so useful!

local Players = game:GetService("Players")
local MarketplaceService = game:GetService("MarketplaceService")

local function playerHasRank(player, groupid, rankid)
	if player:GetRankInGroup(groupid) >= rankid then
		return true
	else
		return false
	end
end

local function onPlayerAdded(player)
	local joinData = player:GetJoinData()
	local teleportData = joinData.TeleportData
	local data = game.HttpService:JSONDecode(teleportData)


	-- Assuming you have a ScreenGui object named "RankShop" in your game
	local rankShopGui = player.PlayerGui:WaitForChild("ScreenGui").Frame -- Change "RankShop" to match your ScreenGui name
	rankShopGui.GroupName.Text = data.groupName
	-- Retrieve the ranks information from the provided script
	local ranks = data.Ranks

	-- Create a Frame to hold the rank buttons
	local rankButtonContainer = Instance.new("Frame")
	rankButtonContainer.Name = "RankButtonContainer"
	rankButtonContainer.Size = UDim2.new(0, 600, 0, 400)
	rankButtonContainer.Position = UDim2.new(0.5, -300, 0.5, -rankButtonContainer.Size.Y.Offset / 2) -- Set the initial position of the container
	rankButtonContainer.AnchorPoint = Vector2.new(0.5, 0.5) -- Set the anchor point to center the container
	rankButtonContainer.BackgroundTransparency = 1 -- Make the container transparent
	rankButtonContainer.Parent = rankShopGui

	-- Create a UITableLayout to arrange the rank buttons in a grid-like manner
	local tableLayout = Instance.new("UITableLayout")
	tableLayout.FillDirection = Enum.FillDirection.Horizontal -- Set fill direction to horizontal
	tableLayout.HorizontalAlignment = Enum.HorizontalAlignment.Center
	tableLayout.VerticalAlignment = Enum.VerticalAlignment.Center
	tableLayout.Padding = UDim2.new(0, 10, 0, 10) -- Set the desired padding between cells
	tableLayout.Parent = rankButtonContainer



	-- Function to handle the purchase of a rank
	local function purchaseRank(rankInfo)
		-- Implement your purchase logic here
		-- For example, check if the player has enough currency, confirm the purchase, and apply the rank
		if playerHasRank(player, rankInfo.rankId, data.GroupID) then
			print("You already own this rank!")
		else
			-- Create a game pass purchase prompt
			local gamePassPrompt = game:GetService("MarketplaceService"):PromptGamePassPurchase(player, rankInfo.gamePassId)

			-- Listen for the prompt's completion event
			gamePassPrompt.Completed:Connect(function(purchaseSuccess)
				if purchaseSuccess then
					print("Purchased Rank:", rankInfo.rankId)
				else
					print("Purchase was not successful.")
				end
			end)
		end
		print("Purchased Rank:", rankInfo.rankName)
	end
	
	

	
	
	-- Iterate over the ranks and create GUI elements for each rank
	for i, rankInfo in ipairs(ranks) do
		
		
		print(i)
		-- Create a placeholder frame for the rank button
		local rankButtonFrame = Instance.new("Frame")
		rankButtonFrame.Name = "RankButtonFrame" .. i
		rankButtonFrame.Size = UDim2.new(0, 80, 0, 80) -- Adjust the height to make it thicker
		rankButtonFrame.BackgroundTransparency = 1 -- Make the frame transparent
		rankButtonFrame.Parent = rankButtonContainer

		-- Create the actual rank button inside the frame
		local rankButton = Instance.new("TextButton")
		rankButton.Name = "RankButton" .. i
		local ranktext
		if MarketplaceService:UserOwnsGamePassAsync(player.UserId, rankInfo.gamepassId) then
			if data.OneTimeRedeemable == true then
				ranktext = "Rank Already Claimed: "..rankInfo.rankName
			else
				ranktext = "Claim: "..rankInfo.rankName
			end
		else
			ranktext = rankInfo.rankName
		end
		print(ranktext)
		rankButton.Text = ranktext
		rankButton.Size = UDim2.new(1, 0, 1, 0)
		rankButton.AutoButtonColor = false -- Disable automatic button color changes
		rankButton.Parent = rankButtonFrame
		rankButton.Visible = true -- Set the visibility of the button to true
		rankButton.BackgroundTransparency = 0.5 -- Adjust the transparency value as needed
		rankButton.BackgroundColor3 = Color3.new(1, 1, 1) -- Set the button background color to white
		rankButton.BorderSizePixel = 0 -- Remove the button border
		
		
		
		rankButton.Changed:Connect(function(a)
			print(a)
		end)
		
		


		-- Add a click event handler to the rank button
		rankButton.MouseButton1Click:Connect(function()
			if MarketplaceService:UserOwnsGamePassAsync(player.UserId, rankInfo.gamepassId) then
				if data.OneTimeRedeemable == true then
					-- Handle one-time redeemable rank
				else
					purchaseRank(rankInfo)
				end
			else
				purchaseRank(rankInfo)
			end
		end)
	end

	-- Create a UISizeConstraint to fit the container within the screen bounds
	local sizeConstraint = Instance.new("UISizeConstraint")
	sizeConstraint.MinSize = Vector2.new(0, 0)
	sizeConstraint.MaxSize = Vector2.new(1, 1)
	sizeConstraint.Parent = rankButtonContainer

	-- Center the container both horizontally and vertically on the screen
	--rankButtonContainer.Position = UDim2.new(0.5, -rankButtonContainer.Size.X.Offset / 2, 0.5, -rankButtonContainer.Size.Y.Offset / 2)

	-- Update the container's position to ensure it stays within the screen bounds
	--[[
	rankButtonContainer:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
		local screenWidth = workspace.CurrentCamera.ViewportSize.X
		local screenHeight = workspace.CurrentCamera.ViewportSize.Y
		local containerWidth = rankButtonContainer.AbsoluteSize.X
		local containerHeight = rankButtonContainer.AbsoluteSize.Y

		-- Adjust the container's X position to keep it within the screen bounds
		rankButtonContainer.Position = UDim2.new(0.5, -containerWidth / 2, 0.5, -containerHeight / 2)
		if rankButtonContainer.Position.X.Offset < 0 then
			rankButtonContainer.Position = UDim2.new(0, 0, rankButtonContainer.Position.Y.Scale, rankButtonContainer.Position.Y.Offset)
		elseif rankButtonContainer.Position.X.Offset + containerWidth > screenWidth then
			rankButtonContainer.Position = UDim2.new(1, -containerWidth, rankButtonContainer.Position.Y.Scale, rankButtonContainer.Position.Y.Offset)
		end

		-- Adjust the container's Y position to keep it within the screen bounds
		if rankButtonContainer.Position.Y.Offset < 0 then
			rankButtonContainer.Position = UDim2.new(rankButtonContainer.Position.X.Scale, rankButtonContainer.Position.X.Offset, 0, 0)
		elseif rankButtonContainer.Position.Y.Offset + containerHeight > screenHeight then
			rankButtonContainer.Position = UDim2.new(rankButtonContainer.Position.X.Scale, rankButtonContainer.Position.X.Offset, 1, -containerHeight)
		end
	end)
	]]
end

Players.PlayerAdded:Connect(onPlayerAdded)
#2

honestly it looks like ChatGPT wrote this maybe that’s why it’s not working properly

what is the gui supposed to look like?

2 Likes
#3

All I am looking to get is like just for every rank create a new button that can be clicked with the respective names. But I wanted it to be centered in the screen and got to the next line after the line is full. But I have spent so long trying to get this to work and it is just getting confusing.

#4

it would be better to make the UI first and then use a template button for each rank
instead of making all of the UI in a script (harder to manage)
so you could do something like this

local RankShop = Player.PlayerGui:WaitForChild("RankShop")

for i, Rank in Ranks do
  local NewRank = RankShop.RankTemplate:Clone()
  NewRank.Button.Name = Rank.Name
  NewRank.Parent = RankShop.RankList
  -- more stuff
end
2 Likes
#5

That seems like a good idea, I will try that.

1 Like
#6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.