So, I’m trying to move to react-lua to make my UI less buggy and janky. Issue is, I feel like this code is super messy and ugly. I’m struggling to read it/wrap my head around it, and it’s my own code. I’m wondering if any of y’all have advice on writing it.
For context, all this code is for 5 elements so far.
local player = game:GetService("Players").LocalPlayer
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Roact = ReplicatedStorage:WaitForChild("Roact")
local React = require(Roact:WaitForChild("React"))
local ReactRoblox = require(Roact:WaitForChild("ReactRoblox"))
local PRIMARY_TEXT_COLOR = Color3.new(0.0117647, 0.670588, 0)
local PRIMARY_FONT = Font.fromName("PressStart2P")
local function TerminalTextButton(props)
return React.createElement("TextButton", {
Text = "> "..props.text,
Size = props.size,
Position = props.position,
BorderSizePixel = 0,
FontFace = PRIMARY_FONT,
TextColor3 = PRIMARY_TEXT_COLOR,
TextXAlignment = Enum.TextXAlignment.Left,
BackgroundTransparency = 1,
TextScaled = true,
[React.Event.Activated] = function()
end
})
end
local function TitleScreen()
return React.createElement("Frame", {
Size = UDim2.new(1,0,1,0),
BackgroundColor3 = Color3.new(0, 0, 0),
BorderSizePixel = 0,
}, {
React.createElement("ImageLabel",{
Size = UDim2.fromScale(0.5,0.5),
Position = UDim2.fromScale(0.5,0),
AnchorPoint = Vector2.new(0.5,0),
BorderSizePixel = 0,
BackgroundTransparency = 1,
Image = "rbxassetid://134510408138841",
ImageColor3 = PRIMARY_TEXT_COLOR,
ScaleType = Enum.ScaleType.Fit,
ResampleMode = Enum.ResamplerMode.Pixelated,
}),
React.createElement("Frame", {
BackgroundTransparency = 1,
Size = UDim2.fromScale(0.25, .5),
Position = UDim2.fromScale(0,.5)
}, {React.createElement("UIGridLayout",{
CellPadding = UDim2.fromOffset(0,5),
CellSize = UDim2.fromScale(1,0.12),
FillDirection = Enum.FillDirection.Vertical
}),
React.createElement(TerminalTextButton,{
size = UDim2.fromScale(1,0.07),
text = "Play",
position = UDim2.fromScale(0,0)
}),
})
})
end
local handle = Instance.new("ScreenGui", player.PlayerGui)
handle.IgnoreGuiInset = true
local root = ReactRoblox.createRoot(handle)
root:render(React.createElement(TitleScreen, {}, {}))
That can’t be optimal code for something this basic, that doesn’t even have functionality yet. Right?
