update ui

src/ReplicatedStorage/ui/components/surface.tsx

@@ -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 
+                    ratio !== undefined && <uiaspectratioconstraint AspectRatio={ratio}/>
-                        AspectRatio={ratio}
-                    />
                 }
             </>
 
-            <>
+            <Acrylic
-                {
+                Key={"acrylic"}
-                    blur !== false && <Acrylic
+                radius={5}
-                        Key={"acrylic"}
+                distance={0.001}
-                        radius={5}
+            />
-                        distance={0.001}
-                    />
-                }
-            </>
 
             <Fill
                 color={color ? color : Color3.fromHex("#1e1e2e")}

src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx

@@ -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_DEFAULT = [new Spring(1.5, { frequency: 6 })]
-const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(1, { 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 [configPosYMap, setConfigGoal] = useGroupMotor([1.5])
-    const configPosY = configPosYAndBorderColor.map((t) => t[0])
+    const configPosY = configPosYMap.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)
@@ -48,50 +45,34 @@ function config(props: ConfigProps): Roact.Element {
     })
 
     return (
-        <frame
+        <Surface
             {...spreadableProps}
-            AnchorPoint={new Vector2(.5, .5)}
+            anchor={new Vector2(.5, .5)}
-            Position={
+            position={
                 configPosY.map((posY) => {
                     return new UDim2(.5, 0, posY, 0)
                 })
             }
-            BackgroundTransparency={1}
+            size={new UDim2(.4, 0, .7, 0)}
-            Size={new UDim2(.4, 0, .7, 0)}
+            Key={"config"}
-            Key={"Config"}
         >
-            <Acrylic
+            <uilistlayout
-                radius={5}
+                VerticalAlignment={Enum.VerticalAlignment.Top}
-                distance={0.001}
+                FillDirection={Enum.FillDirection.Vertical}
             />
-            <frame
+            <uipadding
-                AnchorPoint={new Vector2(0, 0)}
+                PaddingTop={new UDim(0, 5)}
-                Position={new UDim2(0, 0, 0, 0)}
+                PaddingRight={new UDim(0, 5)}
-                Size={new UDim2(1, 0, 1, 0)}
+                PaddingBottom={new UDim(0, 5)}
-                BackgroundTransparency={.3}
+                PaddingLeft={new UDim(0, 5)}
-                BackgroundColor3={Color3.fromHex("#1e1e2e")}
+            />
-            >
+            <Item
-                <uilistlayout
+                size={new UDim2(1, 0, .1, 0)}
-                    Padding={new UDim(0, 5)}
+                position={new UDim2()}
-                    VerticalAlignment={Enum.VerticalAlignment.Top}
+                text="Toggle Acrylic UI"
-                    HorizontalAlignment={Enum.HorizontalAlignment.Left}
+                action="acrylicBlur"
-                    FillDirection={Enum.FillDirection.Vertical}
+            />
-                />
+        </Surface>
-                <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>
     )
 }
 

src/StarterPlayer/StarterPlayerScripts/ui/config/item.story.tsx

@@ -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)
-	}
-}

src/StarterPlayer/StarterPlayerScripts/ui/config/item.tsx

@@ -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)}

src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx

@@ -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}

src/StarterPlayer/StarterPlayerScripts/ui/main.tsx

@@ -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>