Need feedback on how to correctly track GUI objects

FEEDBACK NEEDED

Alright so, I am still making the settings system (i have been doing so for like the last month, i’m so slow)

and now I kinda came across an issue,
my code that handles the settings GUI is a bit spaghetti


the problems are:

  • the settings (like gameplaysettings and uisettings), are stored in a folder in replicated storage and are then CLONED ONLY UPON clicking a filter button (see codeblock below)
  • Inside the UpdateColorResult function, i need to get 3 different color values from 3 different textboxes, the issue being is that they are stored inside replicated storage, and are not seen by the code since they are not defined anywhere

here are some explorer screenshots:

  • main menu:
    image

  • replicated storage (specifically the to-be-cloned elements):
    image

and of course, it’s time for the code

local tService = game:GetService("TweenService")
local rStorage = game:GetService("ReplicatedStorage")

-- Gui elements to clone;
local settingsGuiElements = rStorage:WaitForChild("SettingsGUIElements")
local gameplaySettingsToClone = settingsGuiElements:WaitForChild("GameplaySettings")
local uiSettingsToClone = settingsGuiElements:WaitForChild("UISettings")

local videoPreviewFrameToClone = settingsGuiElements:WaitForChild("VideoPreviewFrame")
local descriptionFrameToClone = settingsGuiElements:WaitForChild("DescriptionFrame")

-- Path to events;
local eventsFolder = rStorage:WaitForChild("Events")
local bindableEvents = eventsFolder:WaitForChild("Bindable")

-- Events;
local openSettings = bindableEvents.OpenSettings

-- Player variables;
local plr = game:GetService("Players").LocalPlayer
local mouse = plr:GetMouse()
local plrGui = plr.PlayerGui

-- Gui elements;
local mainMenuGui = plrGui:WaitForChild("MainMenu")
local settingsFrame = mainMenuGui:WaitForChild("SettingsFrame")

local settingsDiplay = settingsFrame:WaitForChild("SettingsDisplay")
local closeButton = settingsFrame:WaitForChild("CloseButton")

local settingsFiltersFrame = settingsFrame:WaitForChild("SettingsFiltersFrame")
local gameplayFilter = settingsFiltersFrame:WaitForChild("Gameplay")
local uiFilter = settingsFiltersFrame:WaitForChild("UI")

-- Tables;
local previews = {
	FieldOfView = {
		hasVideo = true,
		videoId = "",
		description = "Determines how much you can see."
	},
	
	ClassicADS = {
		hasVideo = false,
		videoId = "",
		description = "Determines your aim down sights style."
	},
	
	FPTracers = {
		hasVideo = false,
		description = "Determines whether tracers from your guns should be visible."
	},
	
	Crosshair = {
		hasVideo = false,
		description = "Determines whether your crosshair should be visible."
	},
	
	GUIColor = {
		hasVideo = true,
		videoId = "",
		description = "Changes the color of the borders on the given UI."
	}
}

-- Functions;
local function FilterSettings(filter: string)
	if filter == "Gameplay" then
		local gameplaySettings = gameplaySettingsToClone:Clone()		
		settingsDiplay:ClearAllChildren()
		
		gameplaySettings.Parent = settingsDiplay
		return gameplaySettings
		
	elseif filter == "Ui" then
		local uiSettings = uiSettingsToClone:Clone()
		settingsDiplay:ClearAllChildren()
		
		uiSettings.Parent = settingsDiplay
		return uiSettings
	end
end

local function ShowPreview(inputBox: GuiButton)
	local valueOf: string = inputBox:GetAttribute("ValueOf")
	
	if previews[valueOf].hasVideo then -- This will run if the hasVideo is true
		local videoId: string = previews[valueOf].videoId
		local description: string = previews[valueOf].description
		
		local videoPreviewFrame = videoPreviewFrameToClone:Clone()
		videoPreviewFrame.Parent = mainMenuGui
		
		videoPreviewFrame.VideoFrame.Video = videoId
		videoPreviewFrame.Description.Text = description
		
		task.spawn(function()
			-- Function that sticks the preview frame to the player's mouse
			-- for as long as it exists
			while videoPreviewFrame do
				local xPosition = mouse.X
				local yPosition = mouse.Y
				
				videoPreviewFrame.Position = UDim2.fromOffset(xPosition, yPosition)
				task.wait()
			end
		end)
		
	else -- If hasVideo is false
		local description: string = previews[valueOf].description
		local descriptionFrame = descriptionFrameToClone:Clone()
		
		descriptionFrame.Parent = mainMenuGui
		descriptionFrame.Description.Text = description
		
		task.spawn(function()
			-- Same as in hasVideo, just sticks it to the player's mouse
			-- for as long as it exists			
			while descriptionFrame do
				local xPosition = mouse.X
				local yPosition = mouse.Y
				
				descriptionFrame.Position = UDim2.fromOffset(xPosition, yPosition)
				task.wait()
			end
		end)
	end
end

local function UpdateColorResult()
	
end

local function OpenSettings()
	settingsFrame.Visible = true
end

I feel like i heavily overcomplicated this and all of this could’ve been done in a much simpler way,
please help me :sob:

I still don’t really understand your issue but this rdc talk could help: https://www.youtube.com/watch?v=OHqMLEL5QnY&t