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

update ui

Browse source
This commit is contained in:
Reid 2023-08-20 19:52:02 -07:00
parent 2a78f33239
commit 057efc9a8c
6 changed files with 39 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,10 @@
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"
import Surface from "ReplicatedStorage/ui/components/surface"
interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
shown: boolean
@ -13,8 +13,8 @@ interface ConfigProps extends Roact.JsxInstanceProperties<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 })]
const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 })]
const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 })]
function config(props: ConfigProps): Roact.Element {
let { shown } = props
@ -22,11 +22,8 @@ function config(props: ConfigProps): Roact.Element {
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)
})
const [configPosYMap, setConfigGoal] = useGroupMotor([1.5])
const configPosY = configPosYMap.map((t) => t[0])
useEffect(() => {
const guid = HttpService.GenerateGUID(false)
@ -48,50 +45,34 @@ function config(props: ConfigProps): Roact.Element {
})
return (
<frame
<Surface
{...spreadableProps}
AnchorPoint={new Vector2(.5, .5)}
Position={
anchor={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"}
size={new UDim2(.4, 0, .7, 0)}
Key={"config"}
>
<Acrylic
radius={5}
distance={0.001}
<uilistlayout
VerticalAlignment={Enum.VerticalAlignment.Top}
FillDirection={Enum.FillDirection.Vertical}
/>
<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>
<uipadding
PaddingTop={new UDim(0, 5)}
PaddingRight={new UDim(0, 5)}
PaddingBottom={new UDim(0, 5)}
PaddingLeft={new UDim(0, 5)}
/>
<Item
size={new UDim2(1, 0, .1, 0)}
position={new UDim2()}
text="Toggle Acrylic UI"
action="acrylicBlur"
/>
</Surface>
)
}