RadialImage.lua

--[[
	CC BY-SA 4.0 - creativecommons.org/licenses/by-sa/4.0

	Roact.createElement(RadialImage, {
		Clockwise = true,
		Progress = 0.6,

		Image = "rbxassetid://3942975478",
		ImageSize = Vector2.new(640, 624),

		Size = UDim2.new(0, 300, 0, 300),
		Position = UDim2.new(0.5, 0, 0.5, 0),
		AnchorPoint = Vector2.new(0.5, 0.5)
	})
]]

local Roact = require("Roact")

local SEQUENCE_CENTER_DELTA = 0.001
local TRANSPARENCY_SEQUENCE = NumberSequence.new({
	NumberSequenceKeypoint.new(0, 0),
	NumberSequenceKeypoint.new(0.5 - SEQUENCE_CENTER_DELTA, 0),
	NumberSequenceKeypoint.new(0.5 + SEQUENCE_CENTER_DELTA, 1),
	NumberSequenceKeypoint.new(1, 1)
})

local RadialImage = Roact.PureComponent:extend("RadialImage")

RadialImage.defaultProps = {
	Clockwise = true,
	Progress = 1
}

function RadialImage:render()
	assert(self.props.ImageSize, "ImageSize property not provided; Roblox doesn't make this available so it needs to be manually provided")
	local imageSize = self.props.ImageSize

	local isClockwise = self.props.Clockwise
	local progress = self.props.Progress

	-- Focused side = the side with the gradient on it
	local focusedSide
	if isClockwise then
		focusedSide =
			progress < 0.5 and "Right"
			or progress >= 0.5 and "Left"
	else
		-- Progress is still clockwise, it needs to be reversed
		progress = 1 - progress

		focusedSide =
			progress < 0.5 and "Left"
			or progress >= 0.5 and "Right"
	end

	return Roact.createElement("Frame", {
		Size = self.props.Size,
		Position = self.props.Position,
		AnchorPoint = self.props.AnchorPoint,
		Rotation = self.props.Rotation,

		ZIndex = self.props.ZIndex,
		Visible = progress > 0,
		BackgroundTransparency = 1
	}, {
		Left = Roact.createElement("ImageLabel", {
			Image = self.props.Image,
			ImageColor3 = self.props.ImageColor3,
			ImageTransparency = self.props.ImageTransparency,
			ImageRectSize = Vector2.new(imageSize.X / 2, imageSize.Y),

			Size = UDim2.new(0.5, 0, 1, 0),
			Position = UDim2.new(0.5, 0, 0.5, 0),
			AnchorPoint = Vector2.new(1, 0.5),

			-- If progress > 0.5, both sides are visible
			Visible = focusedSide == "Left" or progress > 0.5,
			BackgroundTransparency = 1
		}, {
			Gradient = focusedSide == "Left" and Roact.createElement("UIGradient", {
				Transparency = TRANSPARENCY_SEQUENCE,
				Rotation = progress * 360,
				Offset = Vector2.new(0.5, 0)
			})
		}),

		Right = Roact.createElement("ImageLabel", {
			Image = self.props.Image,
			ImageColor3 = self.props.ImageColor3,
			ImageTransparency = self.props.ImageTransparency,
			ImageRectSize = Vector2.new(imageSize.X / 2, imageSize.Y),
			ImageRectOffset = Vector2.new(imageSize.X / 2, 0),

			Size = UDim2.new(0.5, 0, 1, 0),
			Position = UDim2.new(0.5, 0, 0.5, 0),
			AnchorPoint = Vector2.new(0, 0.5),

			Visible = focusedSide == "Right" or progress > 0.5,
			BackgroundTransparency = 1
		}, {
			Gradient = focusedSide == "Right" and Roact.createElement("UIGradient", {
				Transparency = TRANSPARENCY_SEQUENCE,
				Rotation = progress * 360,
				Offset = Vector2.new(-0.5, 0)
			})
		})
	})
end

return RadialImage