chore: refractor

ReplicatedStorage/Client/LoadingScreen/Components/ProgressBar.lua

@@ -0,0 +1,101 @@
+--!native
+--!optimize 2
+
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Roact = require(ReplicatedStorage.Packages.roact)
+
+local theme = {
+	background = Color3.fromRGB(30, 30, 46),
+	text = Color3.fromHex("#cdd6f4"),
+	holder = Color3.fromRGB(17, 17, 27),
+	fill = Color3.fromRGB(255, 255, 255),
+	stroke = Color3.fromRGB(49, 50, 68),
+	holderStroke = Color3.fromRGB(108, 112, 134),
+}
+
+local function ProgressBar(props)
+	local function progressToTransparency(v: number)
+		local p = math.clamp(v or 0, 0, 1)
+		return NumberSequence.new({
+			NumberSequenceKeypoint.new(0, 0),
+			NumberSequenceKeypoint.new(p, 0),
+			NumberSequenceKeypoint.new(p, 1),
+			NumberSequenceKeypoint.new(1, 1),
+		})
+	end
+
+	local gradientTransparency: NumberSequence
+	if typeof(props.progress) == "table" and props.progress.map then
+		gradientTransparency = props.progress:map(progressToTransparency)
+	else
+		gradientTransparency = progressToTransparency(props.progress or 0)
+	end
+
+	return Roact.createElement("Frame", {
+		Name = "ProgressBar",
+		AnchorPoint = props.AnchorPoint or Vector2.new(0.5, 1),
+		Position = props.Position or UDim2.new(0.5, 0, 1, -32),
+		Size = props.Size or UDim2.new(0, 500, 0, 32),
+		BackgroundColor3 = theme.background,
+		BorderSizePixel = 0,
+	}, {
+		Label = Roact.createElement("TextLabel", {
+			AnchorPoint = Vector2.new(0, 0),
+			Position = UDim2.new(0, 16, 0, -32),
+			Size = UDim2.new(1, -32, 0, 18),
+			BackgroundTransparency = 1,
+			Font = Enum.Font.Code,
+			Text = props.detail,
+			TextColor3 = theme.text,
+			TextSize = 18,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextYAlignment = Enum.TextYAlignment.Top,
+		}),
+		Corner = Roact.createElement("UICorner", {
+			CornerRadius = UDim.new(0, 16),
+		}),
+		Stroke = Roact.createElement("UIStroke", {
+			Color = theme.stroke,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Thickness = 1,
+		}),
+		FillHolder = Roact.createElement("Frame", {
+			Name = "FillHolder",
+			AnchorPoint = Vector2.new(0, 1),
+			Position = UDim2.new(0, 8, 1, -8),
+			Size = UDim2.new(1, -16, 0, 16),
+			BackgroundColor3 = theme.holder,
+			BorderSizePixel = 0,
+		}, {
+			Corner = Roact.createElement("UICorner", {
+				CornerRadius = UDim.new(0, 8),
+			}),
+			Stroke = Roact.createElement("UIStroke", {
+				Color = theme.holderStroke,
+				ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+				Thickness = 1,
+			}),
+			Fill = Roact.createElement("Frame", {
+				AnchorPoint = Vector2.new(0, 0),
+				BackgroundColor3 = theme.fill,
+				BorderSizePixel = 0,
+				Size = UDim2.new(1, 0, 1, 0),
+			}, {
+				Corner = Roact.createElement("UICorner", {
+					CornerRadius = UDim.new(0, 8),
+				}),
+				Gradient = Roact.createElement("UIGradient", {
+					Color = ColorSequence.new({
+						ColorSequenceKeypoint.new(0, Color3.fromHex("#f5c2e7")),
+						ColorSequenceKeypoint.new(0.5, Color3.fromHex("#cba6f7")),
+						ColorSequenceKeypoint.new(1, Color3.fromHex("#89b4fa")),
+					}),
+					Transparency = gradientTransparency,
+					Rotation = 0,
+				}),
+			}),
+		}),
+	})
+end
+
+return ProgressBar