102 lines
3.0 KiB
Lua
102 lines
3.0 KiB
Lua
--!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
|