98 lines
No EOL
3.2 KiB
TypeScript
98 lines
No EOL
3.2 KiB
TypeScript
import Roact from "@rbxts/roact"
|
|
import Acrylic from "ReplicatedStorage/ui/components/acrylic"
|
|
import { ContextActionService, HttpService } from "@rbxts/services"
|
|
import { Spring } from "@rbxts/flipper"
|
|
import { useGroupMotor } from "@rbxts/roact-hooked-plus"
|
|
import { useEffect } from "@rbxts/roact-hooked"
|
|
import Item from "./item"
|
|
|
|
interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
|
|
shown: boolean
|
|
|
|
Event?: Roact.JsxInstanceEvents<Frame>
|
|
Change?: Roact.JsxInstanceChangeEvents<Frame>
|
|
}
|
|
|
|
const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 }), new Spring(0, { frequency: 6 })]
|
|
const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(1, { frequency: 6 })]
|
|
|
|
function config(props: ConfigProps): Roact.Element {
|
|
let { shown } = props
|
|
|
|
const spreadableProps = { ...props } as Partial<ConfigProps>
|
|
delete spreadableProps.shown
|
|
|
|
const [configPosYAndBorderColor, setConfigGoal] = useGroupMotor([1.5, 6])
|
|
const configPosY = configPosYAndBorderColor.map((t) => t[0])
|
|
const configBorderColor = configPosYAndBorderColor.map((t) => t[1]).map((val) => {
|
|
return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
|
|
})
|
|
|
|
useEffect(() => {
|
|
const guid = HttpService.GenerateGUID(false)
|
|
ContextActionService.BindAction(
|
|
guid,
|
|
(_, userInputState) => {
|
|
if (Enum.UserInputState.Begin === userInputState) {
|
|
shown = !shown
|
|
if (shown) {
|
|
setConfigGoal(CONFIG_ACTIVE)
|
|
} else {
|
|
setConfigGoal(CONFIG_DEFAULT)
|
|
}
|
|
}
|
|
},
|
|
false,
|
|
Enum.KeyCode.P
|
|
)
|
|
})
|
|
|
|
return (
|
|
<frame
|
|
{...spreadableProps}
|
|
AnchorPoint={new Vector2(.5, .5)}
|
|
Position={
|
|
configPosY.map((posY) => {
|
|
return new UDim2(.5, 0, posY, 0)
|
|
})
|
|
}
|
|
BackgroundTransparency={1}
|
|
Size={new UDim2(.4, 0, .7, 0)}
|
|
Key={"Config"}
|
|
>
|
|
<Acrylic
|
|
radius={5}
|
|
distance={0.001}
|
|
/>
|
|
<frame
|
|
AnchorPoint={new Vector2(0, 0)}
|
|
Position={new UDim2(0, 0, 0, 0)}
|
|
Size={new UDim2(1, 0, 1, 0)}
|
|
BackgroundTransparency={.3}
|
|
BackgroundColor3={Color3.fromHex("#1e1e2e")}
|
|
>
|
|
<uilistlayout
|
|
Padding={new UDim(0, 5)}
|
|
VerticalAlignment={Enum.VerticalAlignment.Top}
|
|
HorizontalAlignment={Enum.HorizontalAlignment.Left}
|
|
FillDirection={Enum.FillDirection.Vertical}
|
|
/>
|
|
<uicorner
|
|
CornerRadius={new UDim(0, 5)}
|
|
/>
|
|
<uistroke
|
|
Thickness={1}
|
|
Color={configBorderColor}
|
|
/>
|
|
<Item
|
|
size={new UDim2(1,0,.1,0)}
|
|
position={new UDim2(0,0,0,0)}
|
|
text="acrylic"
|
|
action="acrylicBlur"
|
|
/>
|
|
</frame>
|
|
</frame>
|
|
)
|
|
}
|
|
|
|
export default config |