chore: refractor

ReplicatedStorage/Client/LoadingScreen/App.lua

@@ -0,0 +1,70 @@
+--!native
+--!optimize 2
+
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Roact = require(ReplicatedStorage.Packages.roact)
+
+local ProgressBar = require(script.Parent.Components.ProgressBar)
+
+local theme = {
+	background = Color3.fromRGB(17, 17, 27),
+	text = Color3.fromRGB(255, 255, 255),
+	subtext = Color3.fromRGB(205, 214, 244),
+}
+
+local function LoadingScreen(props)
+	local status = props.status or "Loading game..."
+	local detail = props.detail or "Preloading..."
+	local progress = props.progress or 0
+	local visible = props.visible
+
+	return Roact.createElement("ScreenGui", {
+		Name = "LoadingScreen",
+		DisplayOrder = 9999,
+		IgnoreGuiInset = true,
+		ResetOnSpawn = false,
+		ZIndexBehavior = Enum.ZIndexBehavior.Sibling,
+		Enabled = visible ~= false,
+	}, {
+		Root = Roact.createElement("Frame", {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.background,
+			BorderSizePixel = 0,
+		}, {
+			Title = Roact.createElement("TextLabel", {
+				AnchorPoint = Vector2.new(0.5, 0.5),
+				Position = UDim2.new(0.5, 0, 0.5, 0),
+				BackgroundTransparency = 1,
+				Font = Enum.Font.Code,
+				Text = status,
+				TextColor3 = theme.text,
+				TextSize = 32,
+				TextWrapped = true,
+				AutomaticSize = Enum.AutomaticSize.XY,
+				TextXAlignment = Enum.TextXAlignment.Center,
+				TextYAlignment = Enum.TextYAlignment.Center,
+			}, {
+				Gradient = Roact.createElement("UIGradient", {
+					Color = ColorSequence.new({
+						ColorSequenceKeypoint.new(0, Color3.fromRGB(245, 194, 231)),
+						ColorSequenceKeypoint.new(0.5, Color3.fromRGB(203, 166, 247)),
+						ColorSequenceKeypoint.new(1, Color3.fromRGB(137, 180, 250)),
+					}),
+					Rotation = 30,
+					Transparency = NumberSequence.new({
+						NumberSequenceKeypoint.new(0, 0),
+						NumberSequenceKeypoint.new(1, 0),
+					}),
+				}),
+			}),
+			Progress = Roact.createElement(ProgressBar, {
+				AnchorPoint = Vector2.new(0.5, 1),
+				Position = UDim2.new(0.5, 0, 1, -32),
+				progress = progress,
+				detail = detail,
+			}),
+		}),
+	})
+end
+
+return LoadingScreen

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

ReplicatedStorage/Client/LoadingScreen/init.lua

@@ -0,0 +1,55 @@
+--!native
+--!optimize 2
+
+local ReplicatedStorage = game:GetService("ReplicatedStorage")
+local Roact = require(ReplicatedStorage.Packages.roact)
+local Players = game:GetService("Players")
+
+local App = require(script.App)
+
+local LoadingScreen = {}
+
+function LoadingScreen.mount(target: Instance?)
+	local playerGui = target or Players.LocalPlayer:WaitForChild("PlayerGui")
+	local statusBinding, setStatus = Roact.createBinding("Loading...")
+	local detailBinding, setDetail = Roact.createBinding("Preparing client")
+	local progressBinding, setProgress = Roact.createBinding(0)
+	local visibleBinding, setVisible = Roact.createBinding(true)
+
+	local handle = Roact.mount(Roact.createElement(App, {
+		status = statusBinding,
+		detail = detailBinding,
+		progress = progressBinding,
+		visible = visibleBinding,
+	}), playerGui, "RoactLoadingScreen")
+
+	local closed = false
+	local function close()
+		if closed then
+			return
+		end
+		closed = true
+		setVisible(false)
+		Roact.unmount(handle)
+		handle = nil
+	end
+
+	return {
+		setStatus = function(text: string)
+			setStatus(text)
+		end,
+		setDetail = function(text: string)
+			setDetail(text)
+		end,
+		setProgress = function(value: number)
+			setProgress(math.clamp(value or 0, 0, 1))
+		end,
+		show = function()
+			setVisible(true)
+		end,
+		hide = close,
+		close = close,
+	}
+end
+
+return LoadingScreen