finish hotbar (i think)

package.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@rbxts/character-promise": "^1.0.2",
+    "@rbxts/flipper": "^2.0.1",
     "@rbxts/log": "^0.6.3",
     "@rbxts/make": "^1.0.6",
     "@rbxts/matter": "^0.6.2-ts.6",
@@ -41,6 +42,7 @@
     "@rbxts/rewire": "^0.3.0",
     "@rbxts/roact": "^1.4.4-ts.0",
     "@rbxts/roact-hooked": "^2.6.0",
+    "@rbxts/roact-hooked-plus": "^1.8.1",
     "@rbxts/roact-reflex": "^2.1.0",
     "@rbxts/services": "^1.5.1",
     "@rbxts/testez": "^0.4.2-ts.0",

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

@@ -27,6 +27,13 @@ interface acrylicProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
+Make("DepthOfFieldEffect", {
+	FarIntensity: 0,
+	InFocusRadius: 0.1,
+	NearIntensity: 1,
+	Parent: Lighting
+})
+
 function acrylic(props: acrylicProps): Roact.Element {
 	const { radius, distance } = props
 
@@ -123,13 +130,6 @@ function acrylic(props: acrylicProps): Roact.Element {
 		const fovHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("FieldOfView").Connect(updateInstance)
 		const viewportHandle = Workspace.CurrentCamera!.GetPropertyChangedSignal("ViewportSize").Connect(updateInstance)
 
-		Make("DepthOfFieldEffect", {
-			FarIntensity: 0,
-			InFocusRadius: 0.1,
-			NearIntensity: 1,
-			Parent: Lighting
-		})
-
 		return () => {
 			posHandle.Disconnect()
 			fovHandle.Disconnect()

src/StarterPlayer/StarterPlayerScripts/main.client.ts

@@ -1,6 +1,6 @@
 import { CharacterRigR6 } from "@rbxts/character-promise"
 import Log, { Logger } from "@rbxts/log"
-import { Players, Workspace } from "@rbxts/services"
+import { Players } from "@rbxts/services"
 import { start } from "ReplicatedStorage/ecs"
 import { ClientState } from "ReplicatedStorage/ecs/state"
 import { Host } from "ReplicatedStorage/hosts"
@@ -26,7 +26,3 @@ const clientState = new ClientState(
 const worldAndClientState = start(HOST, clientState)
 showGUI(worldAndClientState[0], clientState)
 setEnvironment(HOST)
-
-task.delay(10, () => {
-    print(Workspace.CurrentCamera?.GetChildren())
-})

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

@@ -4,6 +4,8 @@ import { useWorldContext } from "../contexts/worldContext"
 import { ContextActionService, HttpService } from "@rbxts/services"
 import Padding from "ReplicatedStorage/ui/components/padding"
 import Acrylic from "ReplicatedStorage/ui/components/acrylic"
+import { Spring } from "@rbxts/flipper"
+import { useGroupMotor } from "@rbxts/roact-hooked-plus"
 
 interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
     index: number
@@ -14,6 +16,9 @@ interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
 	Change?: Roact.JsxInstanceChangeEvents<Frame>
 }
 
+const SLOT_DEFAULT = [new Spring(.7, { frequency: 6 }), new Spring(6, { frequency: 6 })]
+const SLOT_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(5, { frequency: 6 })]
+
 function slot(props: SlotProps): Roact.Element {
     const { index, keycode, tool } = props
 
@@ -22,13 +27,19 @@ function slot(props: SlotProps): Roact.Element {
     delete spreadableProps.keycode
     delete spreadableProps.tool
 
+    const [slotBgTransparencyAndSlotRatio, setSlotGoal] = useGroupMotor([.7, 6])
+    const slotBgTransparency = slotBgTransparencyAndSlotRatio.map((t) => t[0])
+    const slotRatio = slotBgTransparencyAndSlotRatio.map((t) => t[1])
+
     const { clientState } = useWorldContext()
 
     const handleActivated = (): void => {
         if (tool.Parent !== clientState.character) {
             clientState.character.Humanoid.EquipTool(tool)
+            setSlotGoal(SLOT_ACTIVE)
         } else {
             clientState.character.Humanoid.UnequipTools()
+            setSlotGoal(SLOT_DEFAULT)
         }
     }
 
@@ -43,25 +54,27 @@ function slot(props: SlotProps): Roact.Element {
             false,
             keycode
         )
+
+        tool.Unequipped.Connect(() => {
+            setSlotGoal(SLOT_DEFAULT)
+        })
     })
 
     return (
         <frame
             BackgroundColor3={Color3.fromHex("#11111b")}
-            BackgroundTransparency={
-                .75
-            }
+            BackgroundTransparency={slotBgTransparency}
             Size={new UDim2(1, 0, 1, 0)}
         >
             <Acrylic
-                radius={8}
-                distance={0.0001}
+                radius={2}
+                distance={0.001}
             />
             <uiaspectratioconstraint
-                AspectRatio={6}
+                AspectRatio={slotRatio}
             />
             <uicorner
-                CornerRadius={new UDim(0, 8)}
+                CornerRadius={new UDim(0, 2)}
             />
             <frame BackgroundTransparency={1} Size={new UDim2(1, 0, 1, 0)}>
                 <Padding

yarn.lock

@@ -96,6 +96,11 @@
   resolved "https://registry.yarnpkg.com/@rbxts/compiler-types/-/compiler-types-2.1.1-types.0.tgz#a1f02b57402dffec474dd6656ec1d8a897b9756b"
   integrity sha512-wBRma9MgPbOxvCaQEUvraHLHAmLFGW9R6fT65+MBu3uCYM6vUNWj8l4dHRxgkUK8lnGYdGWxsr/sZFk8sdvwog==
 
+"@rbxts/flipper@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@rbxts/flipper/-/flipper-2.0.1.tgz#25bd840441055da419c234a9d045309e40ac3ad2"
+  integrity sha512-kxb5AZizP05XSmo3waS/QkcfNMD5b6HX4gGwyHOyBow260R5MIT4L/ZUPLvleXXyb9b67X4NVmHoac1tPXOLNA==
+
 "@rbxts/log@^0.6.3":
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/@rbxts/log/-/log-0.6.3.tgz#65b51a897a2d646457db95b563ade3313e08d0be"
@@ -136,6 +141,14 @@
   resolved "https://registry.yarnpkg.com/@rbxts/rewire/-/rewire-0.3.0.tgz#47f0cd651fe405cf418936799d2a4dac6b1bb7ce"
   integrity sha512-wChhGZ3kEkEsMK9ZuwKpwRsC7OGVZlvxrYMR3beFgCIPXE58JKLziBLkDACmd709XCCEmsMAqv9HMCMhSTD08Q==
 
+"@rbxts/roact-hooked-plus@^1.8.1":
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/@rbxts/roact-hooked-plus/-/roact-hooked-plus-1.8.1.tgz#e0fa32b74c0f958430ae62f249f1b5b52ce27f3b"
+  integrity sha512-ipJf6pZcQZlx/0hyisQz2eoRECg38knUgjkEvx2dvAHfs0+IDgera7mcwv6zTMACqalaXu00inc4E5dpOrs54A==
+  dependencies:
+    "@rbxts/flipper" "^2.0.1"
+    "@rbxts/services" "^1.2.0"
+
 "@rbxts/roact-hooked@^2.6.0":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@rbxts/roact-hooked/-/roact-hooked-2.6.0.tgz#cbe3e244e1d52d879083c62b6662c4d082c6d30b"
@@ -151,7 +164,7 @@
   resolved "https://registry.yarnpkg.com/@rbxts/roact/-/roact-1.4.4-ts.0.tgz#7f297bec03dbea9473bd2d82b148d3ae6e4f6c00"
   integrity sha512-gn9mBoGG/Clzgv2kyOvLNVd9dh5t6z+jukC3ITv2HnfPqvf/sMbz/VMaBoiB7t5umuiIe0LjW0ctZrkrS+uTOA==
 
-"@rbxts/services@^1.5.1":
+"@rbxts/services@^1.2.0", "@rbxts/services@^1.5.1":
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/@rbxts/services/-/services-1.5.1.tgz#4536a87932f28797507ed591f0061277c52ea77f"
   integrity sha512-SRtfIjga0K4YYSXRpK+eH3kcTq7ZXo9OHOt0jszaOOoEOIJloMGlyuRPqesPHyhveh2AMXAZr3TYbRMSD+u+kQ==