New UI (#367)

* Add Flipper

* Remove old UI

* Add boilerplate UI

* Change plugin version

* Merge upstream

* Bunch of new UI changes

Too lazy to list them all in individual commits

* Touch ripple for buttons and a few other things

* Make the close button on the PluginGui work

* Set button state to guiEnabled

* Implement Connecting, NotConnected; add Header; don't update plugin button on render

* Replace mapLerpColor with mapLerp

* Update blendAlpha to be 0 without any values

* Add ActionFillTransparency to Theme.Button

* Suffix all Theme entries

* Update Flipper

* Add disconnect button

* Remove cancel button

* Add settings page

* Add scrollbar and dark theme support to settings

* Include settings in startSession

* Set context default value to nil

I always thought this was the name, lol...

* Add Error page

* Fix preloadAssets

* Fix preloadAssets import

* Update checkbox colors a little

* Add setting descriptions

* Fix scrolling frame in settings panel

* Remove .vscode

* Rename Throbber to Spinner

* Update merge

* Move Spinner images to assets

* Change casing of directories

* Remove old directories

* Add comments to getDerivedStateFromProps

* Account for offset in host TextBox size

* Turn width variables into constants

* Attempt to fix the comments

* Add a missing comma in Settings

* Remove a double space

* Remove Dummy object

* Move most of the Studio logic out of render

* Don't truncate port input

* Replace merge with Dictionary.merge

* Replace "Got it!" with "Okay"

* Add projectName to setStatus call

* Add Flipper to build.rs

plugin/src/App/Components/TouchRipple.lua

@@ -0,0 +1,145 @@
+local Rojo = script:FindFirstAncestor("Rojo")
+local Plugin = Rojo.Plugin
+
+local Roact = require(Rojo.Roact)
+local Flipper = require(Rojo.Flipper)
+
+local Assets = require(Plugin.Assets)
+local bindingUtil = require(Plugin.App.bindingUtil)
+
+local EXPAND_SPRING = {
+	frequency = 7,
+	dampingRatio = 2,
+}
+
+local TouchRipple = Roact.Component:extend("TouchRipple")
+
+function TouchRipple:init()
+	self.ref = Roact.createRef()
+
+	self.motor = Flipper.GroupMotor.new({
+		scale = 0,
+		opacity = 0,
+	})
+	self.binding = bindingUtil.fromMotor(self.motor)
+
+	self.position, self.setPosition = Roact.createBinding(
+		Vector2.new(0, 0)
+	)
+end
+
+function TouchRipple:reset()
+	self.motor:setGoal({
+		scale = Flipper.Instant.new(0),
+		opacity = Flipper.Instant.new(0),
+	})
+
+	-- Forces motor to update
+	self.motor:step(0)
+end
+
+function TouchRipple:calculateRadius(position)
+	local container = self.ref.current
+
+	if container then
+		local corner = Vector2.new(
+			math.floor((1 - position.X) + 0.5),
+			math.floor((1 - position.Y) + 0.5)
+		)
+
+		local size = container.AbsoluteSize
+		local ratio = size / math.min(size.X, size.Y)
+
+		return ((corner * ratio) - (position * ratio)).Magnitude
+	else
+		return 0
+	end
+end
+
+function TouchRipple:render()
+	local scale = bindingUtil.deriveProperty(self.binding, "scale")
+	local transparency = bindingUtil.deriveProperty(self.binding, "opacity"):map(function(value)
+		return 1 - value
+	end)
+
+	transparency = Roact.joinBindings({
+		transparency,
+		self.props.transparency,
+	}):map(bindingUtil.blendAlpha)
+
+	return Roact.createElement("Frame", {
+		ClipsDescendants = true,
+		Size = UDim2.new(1, 0, 1, 0),
+		ZIndex = self.props.zIndex,
+		BackgroundTransparency = 1,
+
+		[Roact.Ref] = self.ref,
+
+		[Roact.Event.InputBegan] = function(object, input)
+			if input.UserInputType == Enum.UserInputType.MouseButton1 then
+				self:reset()
+
+				local position = Vector2.new(input.Position.X, input.Position.Y)
+				local relativePosition = (position - object.AbsolutePosition) / object.AbsoluteSize
+
+				self.setPosition(relativePosition)
+
+				self.motor:setGoal({
+					scale = Flipper.Spring.new(1, EXPAND_SPRING),
+					opacity = Flipper.Spring.new(1, EXPAND_SPRING),
+				})
+
+				input:GetPropertyChangedSignal("UserInputState"):Connect(function()
+					local userInputState = input.UserInputState
+
+					if
+						userInputState == Enum.UserInputState.Cancel
+						or userInputState == Enum.UserInputState.End
+					then
+						self.motor:setGoal({
+							opacity = Flipper.Spring.new(0, {
+								frequency = 5,
+								dampingRatio = 1,
+							}),
+						})
+					end
+				end)
+			end
+		end,
+	}, {
+		Circle = Roact.createElement("ImageLabel", {
+			Image = Assets.Images.Circles[500],
+			ImageColor3 = self.props.color,
+			ImageTransparency = transparency,
+
+			Size = Roact.joinBindings({
+				scale = scale,
+				position = self.position,
+			}):map(function(values)
+				local targetSize = self:calculateRadius(values.position) * 2
+				local currentSize = targetSize * values.scale
+
+				local container = self.ref.current
+
+				if container then
+					local containerSize = container.AbsoluteSize
+					local containerAspect = containerSize.X / containerSize.Y
+
+					return UDim2.new(
+						currentSize / math.max(containerAspect, 1), 0,
+						currentSize * math.min(containerAspect, 1), 0
+					)
+				end
+			end),
+
+			Position = self.position:map(function(value)
+				return UDim2.new(value.X, 0, value.Y, 0)
+			end),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+
+			BackgroundTransparency = 1,
+		}),
+	})
+end
+
+return TouchRipple