update ui
This commit is contained in:
parent
2a78f33239
commit
057efc9a8c
6 changed files with 39 additions and 93 deletions
|
|
@ -9,7 +9,7 @@ interface surfaceProps extends Roact.JsxInstanceProperties<Frame> {
|
|||
position: BindingOrValue<UDim2>
|
||||
ratio?: BindingOrValue<number>
|
||||
color?: BindingOrValue<Color3>
|
||||
blur?: BindingOrValue<boolean>
|
||||
anchor?: Vector2
|
||||
[Roact.Children]?: Roact.Children
|
||||
|
||||
Event?: Roact.JsxInstanceEvents<Frame>
|
||||
|
|
@ -17,14 +17,14 @@ interface surfaceProps extends Roact.JsxInstanceProperties<Frame> {
|
|||
}
|
||||
|
||||
function surface(props: surfaceProps): Roact.Element {
|
||||
const { size, position, ratio, color, blur } = props
|
||||
const { size, position, ratio, color, anchor } = props
|
||||
|
||||
const spreadableProps = { ...props } as Partial<surfaceProps>
|
||||
delete spreadableProps.size
|
||||
delete spreadableProps.position
|
||||
delete spreadableProps.ratio
|
||||
delete spreadableProps.color
|
||||
delete spreadableProps.blur
|
||||
delete spreadableProps.anchor
|
||||
delete spreadableProps[Roact.Children]
|
||||
|
||||
return (
|
||||
|
|
@ -33,24 +33,19 @@ function surface(props: surfaceProps): Roact.Element {
|
|||
Key={"surface container"}
|
||||
size={size}
|
||||
position={position}
|
||||
anchor={anchor}
|
||||
>
|
||||
<>
|
||||
{
|
||||
ratio !== undefined && <uiaspectratioconstraint
|
||||
AspectRatio={ratio}
|
||||
/>
|
||||
ratio !== undefined && <uiaspectratioconstraint AspectRatio={ratio}/>
|
||||
}
|
||||
</>
|
||||
|
||||
<>
|
||||
{
|
||||
blur !== false && <Acrylic
|
||||
Key={"acrylic"}
|
||||
radius={5}
|
||||
distance={0.001}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
<Acrylic
|
||||
Key={"acrylic"}
|
||||
radius={5}
|
||||
distance={0.001}
|
||||
/>
|
||||
|
||||
<Fill
|
||||
color={color ? color : Color3.fromHex("#1e1e2e")}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import Roact from "@rbxts/roact"
|
||||
import { withHookDetection } from "@rbxts/roact-hooked"
|
||||
import { ReflexProvider, useSelector } from "@rbxts/roact-reflex"
|
||||
import { producer } from "ReplicatedStorage/ui/store/producer"
|
||||
import Item from "./item"
|
||||
|
||||
export = (target: Frame) => {
|
||||
withHookDetection(Roact)
|
||||
|
||||
const tree = Roact.mount(
|
||||
<ReflexProvider producer={producer} initialState={{ }}>
|
||||
<Item
|
||||
size={new UDim2(1, 0, 1, 0)}
|
||||
position={new UDim2(0, 0, 0, 0)}
|
||||
text=""
|
||||
action="acrylicBlur"
|
||||
/>
|
||||
</ReflexProvider>,
|
||||
target
|
||||
)
|
||||
|
||||
return () => {
|
||||
Roact.unmount(tree)
|
||||
}
|
||||
}
|
||||
|
|
@ -29,12 +29,12 @@ function item(props: itemProps): Roact.Element {
|
|||
delete spreadableProps.action
|
||||
|
||||
return (
|
||||
<Canvas size={size} position={position}>
|
||||
<Canvas size={size} position={position} {...spreadableProps}>
|
||||
<Fill color={Color3.fromHex("#313244")} transparency={.3} radius={5}/>
|
||||
|
||||
<Text
|
||||
Size={new UDim2(1, 0, 1, 0)}
|
||||
Text={text + (active ? " enabled." : " disabled.")}
|
||||
Text={text + (active ? "| enabled." : "| disabled.")}
|
||||
TextXAlignment={Enum.TextXAlignment.Left}
|
||||
paddingX={new UDim(0, 5)}
|
||||
paddingY={new UDim(.3, 0)}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ function slot(props: SlotProps): Roact.Element {
|
|||
|
||||
return (
|
||||
<Surface
|
||||
{...spreadableProps}
|
||||
size={new UDim2(1, 0, 1, 0)}
|
||||
position={new UDim2(0, 0, 0, 0)}
|
||||
ratio={slotRatio}
|
||||
|
|
|
|||
|
|
@ -26,15 +26,9 @@ export default function main(props: MainProps): Roact.Element {
|
|||
}}
|
||||
>
|
||||
<Hotbar
|
||||
Position={new UDim2(0.5, 0, 1, 0)}
|
||||
AnchorPoint={new Vector2(0.5, 1)}
|
||||
Size={new UDim2(1, 0, 0.2, 0)}
|
||||
/>
|
||||
<Config
|
||||
shown={false}
|
||||
AnchorPoint={new Vector2(.5, .5)}
|
||||
Position={new UDim2(.5, 0, .5, 0)}
|
||||
Size={new UDim2(.4, 0, .7, 0)}
|
||||
/>
|
||||
</Canvas>
|
||||
</screengui>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue