reidlab/goopler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve ui

Browse source
This commit is contained in:
Reid 2023-08-20 15:14:23 -07:00
parent 5a8c554bf1
commit c258363a03
4 changed files with 116 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx
View file

@ -1,6 +1,7 @@
import Roact from "@rbxts/roact"
import Padding from "ReplicatedStorage/ui/components/padding"
import Acrylic from "ReplicatedStorage/ui/components/acrylic"
import ToggleButton from "./toggleButton"
import { ContextActionService, HttpService } from "@rbxts/services"
import { Spring } from "@rbxts/flipper"
import { useGroupMotor } from "@rbxts/roact-hooked-plus"
@ -14,19 +15,22 @@ interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
Change?: Roact.JsxInstanceChangeEvents<Frame>
}
const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 })]
const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 })]
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 {
const { toggleAcrylic } = useRootProducer()
const { disableAcrylic, enableAcrylic } = useRootProducer()
let { shown } = props
const spreadableProps = { ...props } as Partial<ConfigProps>
delete spreadableProps.shown
const [slotPosYMap, setPosYGoal] = useGroupMotor([1.5, 6])
const slotPosY = slotPosYMap.map((t) => t[0])
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)
@ -36,9 +40,9 @@ function config(props: ConfigProps): Roact.Element {
if (Enum.UserInputState.Begin === userInputState) {
shown = !shown
if (shown) {
setPosYGoal(CONFIG_ACTIVE)
setConfigGoal(CONFIG_ACTIVE)
} else {
setPosYGoal(CONFIG_DEFAULT)
setConfigGoal(CONFIG_DEFAULT)
}
}
},
@ -52,7 +56,7 @@ function config(props: ConfigProps): Roact.Element {
{...spreadableProps}
AnchorPoint={new Vector2(.5, .5)}
Position={
slotPosY.map((posY) => {
configPosY.map((posY) => {
return new UDim2(.5, 0, posY, 0)
})
}
@ -68,7 +72,7 @@ function config(props: ConfigProps): Roact.Element {
AnchorPoint={new Vector2(0, 0)}
Position={new UDim2(0, 0, 0, 0)}
Size={new UDim2(1, 0, 1, 0)}
BackgroundTransparency={.7}
BackgroundTransparency={.3}
BackgroundColor3={Color3.fromHex("#1e1e2e")}
>
<uilistlayout
@ -80,31 +84,19 @@ function config(props: ConfigProps): Roact.Element {
<uicorner
CornerRadius={new UDim(0, 5)}
/>
<uistroke
Thickness={1}
Color={configBorderColor}
/>
<Padding
padding={new UDim(0, 5)}
/>
<textbutton
Size={new UDim2(1, 0, .1, 0)}
Font={Enum.Font.Gotham}
TextXAlignment={Enum.TextXAlignment.Left}
BackgroundTransparency={.5}
BackgroundColor3={Color3.fromHex("#11111b")}
AutoButtonColor={false}
TextColor3={Color3.fromHex("#cdd6f4")}
TextScaled
Text={"Toggle acrylic UI"}
Event={{
Activated: (): void => {toggleAcrylic()}
}}
>
<Padding
paddingY={new UDim(.3, 0)}
paddingX={new UDim(0, 5)}
/>
<uicorner
CornerRadius={new UDim(0, 5)}
/>
</textbutton>
<ToggleButton
Text="Toggle acrylic UI"
active={false}
disableCallback={disableAcrylic}
enableCallback={enableAcrylic}
/>
</frame>
</frame>
)