add custom hotbar

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

@@ -0,0 +1,65 @@
+import Roact from "@rbxts/roact"
+import Hooks from "@rbxts/roact-hooks"
+import Slot from "./slot"
+import { useWorldContext } from "../contexts/worldContext"
+import Padding from "ReplicatedStorage/ui/padding"
+
+interface hotbarProps extends Roact.JsxInstanceProperties<Frame> {
+	Event?: Roact.JsxInstanceEvents<Frame>
+	Change?: Roact.JsxInstanceChangeEvents<Frame>
+}
+
+const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
+    const {} = hooks
+    const {} = props
+
+    const spreadableProps = { ...props } as Partial<hotbarProps>
+
+    const { world, clientState } = useWorldContext(hooks)
+
+    const keycodes: Enum.KeyCode[] = [
+        Enum.KeyCode.One,
+        Enum.KeyCode.Two,
+        Enum.KeyCode.Three,
+        Enum.KeyCode.Four,
+        Enum.KeyCode.Five,
+        Enum.KeyCode.Six,
+        Enum.KeyCode.Seven,
+        Enum.KeyCode.Eight,
+        Enum.KeyCode.Nine
+    ]
+
+    return (
+        <frame
+            {...spreadableProps}
+            AutomaticSize={Enum.AutomaticSize.X}
+            AnchorPoint={new Vector2(0.5, 1)}
+            BackgroundTransparency={1}
+            Key="Hotbar"
+        >
+            <frame Size={new UDim2(0, 0, 0.5, 0)} Position={new UDim2(0.5, 0, 0.5, 0)} BackgroundTransparency={1}>
+                <uilistlayout
+                    FillDirection={Enum.FillDirection.Horizontal}
+                    HorizontalAlignment={Enum.HorizontalAlignment.Center}
+                    VerticalAlignment={Enum.VerticalAlignment.Bottom}
+                    Padding={new UDim(0, 5)}
+                />
+                <Padding
+                    PaddingY={new UDim(0, 5)}
+                />
+                {
+                    clientState.backpack.GetChildren().map((tool, i) => (
+                        <Slot
+                            index={i + 1}
+                            Size={new UDim2(1, 0, 1, 0)}
+                            keycode={keycodes[i]}
+                            tool={tool as Tool}
+                        />
+                    ))
+                }
+            </frame>
+        </frame>
+    )
+}
+
+export default new Hooks(Roact)(hotbar)