add toggle for acrylic, fix roact fragments

src/ReplicatedStorage/ui/components/acrylic/index.tsx

@@ -3,6 +3,7 @@ import { useEffect, useCallback, useMemo, useMutable } from "@rbxts/roact-hooked
 import { acrylicInstance } from "./acrylicInstance"
 import { Lighting, Workspace } from "@rbxts/services"
 import Make from "@rbxts/make"
+import { useRootSelector } from "ReplicatedStorage/ui/store/hooks/useUiProducer"
 
 const cylinderAngleOffset = CFrame.Angles(0, math.rad(90), 0)
 
@@ -34,7 +35,7 @@ Make("DepthOfFieldEffect", {
 	Parent: Lighting
 })
 
-function acrylic(props: acrylicProps): Roact.Element {
+function AcrylicComponent(props: acrylicProps): Roact.Element {
 	const { radius, distance } = props
 
 	const spreadableProps = { ...props } as Partial<acrylicProps>
@@ -161,4 +162,20 @@ function acrylic(props: acrylicProps): Roact.Element {
 	)
 }
 
+function acrylic(props: acrylicProps): Roact.Element {
+	const { radius, distance } = props
+
+	const spreadableProps = { ...props } as Partial<acrylicProps>
+	delete spreadableProps.radius
+	delete spreadableProps.distance
+
+	const enabled = useRootSelector((state) => state.configProducer.acrylicBlur)
+
+	return <>
+		{
+			enabled && <AcrylicComponent radius={radius} distance={distance}/>
+		}
+	</>
+}
+
 export default acrylic

src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts

@@ -1,4 +1,5 @@
-import { UseProducerHook, useProducer } from "@rbxts/roact-reflex"
+import { UseProducerHook, UseSelectorHook, useProducer, useSelector } from "@rbxts/roact-reflex"
 import { rootProducer } from "../producer"
 
-export const useUiProducer: UseProducerHook<rootProducer> = useProducer
+export const useRootProducer: UseProducerHook<rootProducer> = useProducer
+export const useRootSelector: UseSelectorHook<rootProducer> = useSelector

src/ReplicatedStorage/ui/store/producer/config.ts

@@ -0,0 +1,16 @@
+import { createProducer } from "@rbxts/reflex"
+
+export interface ConfigState {
+    readonly acrylicBlur: boolean
+}
+
+const initialState: ConfigState = {
+    acrylicBlur: false
+}
+
+export const configProducer = createProducer(initialState, {
+    toggleAcrylic: (state) => ({
+        ...state,
+        acrylicBlur: !state.acrylicBlur
+    })
+})

src/ReplicatedStorage/ui/store/producer/index.ts

@@ -1,9 +1,10 @@
 import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex"
+import { configProducer } from "./config"
 
 export type rootProducer = typeof producer
 export type rootState = InferState<rootProducer>
 export type rootDispatchers = InferDispatchers<rootProducer>
 
 export const producer = combineProducers({
-    
+    configProducer
 }).applyMiddleware(loggerMiddleware)

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

@@ -0,0 +1,119 @@
+import Roact from "@rbxts/roact"
+import Padding from "ReplicatedStorage/ui/components/padding"
+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 { useRootProducer } from "ReplicatedStorage/ui/store/hooks/useUiProducer"
+
+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 })]
+const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 })]
+
+function config(props: ConfigProps): Roact.Element {
+    const { toggleAcrylic } = 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])
+
+    useEffect(() => {
+        const guid = HttpService.GenerateGUID(false)
+        ContextActionService.BindAction(
+            guid,
+            (_, userInputState) => {
+                if (Enum.UserInputState.Begin === userInputState) {
+                    shown = !shown
+                    if (shown) {
+                        setPosYGoal(CONFIG_ACTIVE)
+                    } else {
+                        setPosYGoal(CONFIG_DEFAULT)
+                    }
+                }
+            },
+            false,
+            Enum.KeyCode.P
+        )
+    })
+
+    return (
+        <frame
+            {...spreadableProps}
+            AnchorPoint={new Vector2(.5, .5)}
+            Position={
+                slotPosY.map((posY) => {
+                    return new UDim2(.5, 0, posY, 0)
+                })
+            }
+            BackgroundTransparency={1}
+            Size={new UDim2(.4, 0, .7, 0)}
+            Key={"Config"}
+        >
+            {/* u can move cursor in first person */}
+            <textbutton
+                Size={new UDim2(1, 0, 1 ,0)}
+                Modal={true}
+                Visible={false}
+            />
+            <Acrylic
+                radius={2}
+                distance={0.001}
+            />
+            <frame
+                AnchorPoint={new Vector2(0, 0)}
+                Position={new UDim2(0, 0, 0, 0)}
+                Size={new UDim2(1, 0, 1, 0)}
+                BackgroundTransparency={.7}
+                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, 2)}
+                />
+                <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, 2)}
+                    />
+                </textbutton>
+            </frame>
+        </frame>
+    )
+}
+
+export default config

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

@@ -62,7 +62,7 @@ function slot(props: SlotProps): Roact.Element {
 
     return (
         <frame
-            BackgroundColor3={Color3.fromHex("#11111b")}
+            BackgroundColor3={Color3.fromHex("#1e1e2e")}
             BackgroundTransparency={slotBgTransparency}
             Size={new UDim2(1, 0, 1, 0)}
         >

src/StarterPlayer/StarterPlayerScripts/ui/main.tsx

@@ -1,5 +1,6 @@
 import Roact from "@rbxts/roact"
 import Hotbar from "./hotbar/hotbar"
+import Config from "./config/config"
 import { withHookDetection } from "@rbxts/roact-hooked"
 
 interface MainProps extends Roact.JsxInstanceEvents<ScreenGui> {
@@ -19,6 +20,12 @@ export default function main(props: MainProps): Roact.Element {
                 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)}
+            />
         </screengui>
     )
 }

tsconfig.json

@@ -5,7 +5,7 @@
 		"downlevelIteration": true,
 		"jsx": "react",
 		"jsxFactory": "Roact.createElement",
-		"jsxFragmentFactory": "Roact.Fragment",
+		"jsxFragmentFactory": "Roact.createFragment",
 		"module": "commonjs",
 		"moduleResolution": "Node",
 		"noLib": true,