asdfsddfgsdrfg

Grid.lua

shared()

local Roact = require("Roact")
local Math = require("Math")
local Dictionary = require("Dictionary")

local PIXELS_PER_STUD = 20
local TRANSPARENCY = 0.25

local function GridAxis(props)
	local lines = {}

	for index = 0, props.Size[props.Axis], props.Increment do
		table.insert(lines, Roact.createElement("Frame", {
			BackgroundColor3 = Color3.new(1, 1, 1),
			BackgroundTransparency = props.Position:map(function(value)
				local distance = math.abs(value[props.Axis] - index)
				local visibility = math.clamp(distance / props.Radius, 0, 1)
				return Math.Lerp(TRANSPARENCY, 1, visibility)
			end),

			Size = props.Axis == "X" and UDim2.new(0, 1, 1, 0) or props.Axis == "Y" and UDim2.new(1, 0, 0, 1),
			Position = props.Axis == "X" and UDim2.new(0, index * PIXELS_PER_STUD, 0, 0) or UDim2.new(0, 0, 0, index * PIXELS_PER_STUD),

			BorderSizePixel = 0
		}, {
			Gradient = Roact.createElement("UIGradient", {
				Rotation = props.Axis == "X" and 90 or 0,
		
				Offset = props.Position:map(function(value)
					local relativePosition = value[props.OtherAxis] / props.Size[props.OtherAxis]
					local offset = relativePosition - 0.5
		
					return props.Axis == "X" and Vector2.new(0, offset) or Vector2.new(offset, 0)
				end),
		
				Transparency = NumberSequence.new({
					NumberSequenceKeypoint.new(0, 1),
		
					NumberSequenceKeypoint.new(0.5 - props.Radius / props.Size[props.OtherAxis], 1),
					NumberSequenceKeypoint.new(0.5, TRANSPARENCY),
					NumberSequenceKeypoint.new(0.5 + props.Radius / props.Size[props.OtherAxis], 1),
		
					NumberSequenceKeypoint.new(1, 1)
				})
			})
		}))
	end

	return Roact.createElement("Frame", {
		Size = UDim2.new(1, 0, 1, 0),
		BackgroundTransparency = 1
	}, lines)
end

local GridRenderer = Roact.Component:extend("GridRenderer")

function GridRenderer:render()
	local size = self.props.Size

	return Roact.createElement("Part", {
		Size = Vector3.new(size.X, 1, size.Y),
		CFrame = self.props.Origin
			* CFrame.new(size.X / 2, -0.5, size.Y / 2)
			* CFrame.Angles(0, -math.pi / 2, 0),

		Anchored = true,
		CanCollide = false,
		Locked = true,

		Transparency = 1
	}, {
		SurfaceGui = Roact.createElement("SurfaceGui", {
			Face = Enum.NormalId.Top,
			SizingMode = Enum.SurfaceGuiSizingMode.PixelsPerStud,
			PixelsPerStud = PIXELS_PER_STUD
		}, {
			X = Roact.createElement(GridAxis, Dictionary.Merge(self.props, {
				Axis = "X",
				OtherAxis = "Y"
			})),
	
			Y = Roact.createElement(GridAxis, Dictionary.Merge(self.props, {
				Axis = "Y",
				OtherAxis = "X"
			}))
		})
	})
end

return GridRenderer