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)

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

@@ -0,0 +1,97 @@
+import Roact from "@rbxts/roact"
+import Hooks from "@rbxts/roact-hooks"
+import { useWorldContext } from "../contexts/worldContext"
+import { ContextActionService, HttpService } from "@rbxts/services"
+import Padding from "ReplicatedStorage/ui/padding"
+
+interface slotProps extends Roact.JsxInstanceProperties<Frame> {
+    index: number
+    keycode: Enum.KeyCode
+    tool: Tool
+
+    Event?: Roact.JsxInstanceEvents<Frame>
+	Change?: Roact.JsxInstanceChangeEvents<Frame>
+}
+
+const slot: Hooks.FC<slotProps> = (props, hooks) => {
+    const { useEffect } = hooks
+    const { index, keycode, tool } = props
+
+    const spreadableProps = { ...props } as Partial<slotProps>
+    delete spreadableProps.index
+    delete spreadableProps.keycode
+    delete spreadableProps.tool
+
+    const { world, clientState } = useWorldContext(hooks)
+
+    const handleActivated = () =>  {
+        if (tool.Parent !== clientState.character) {
+            clientState.character.Humanoid.EquipTool(tool)
+        } else {
+            clientState.character.Humanoid.UnequipTools()
+        }
+    }
+
+    // maybe opt this into our system for inputs?
+    useEffect(() => {
+        const guid = HttpService.GenerateGUID(false)
+        ContextActionService.BindAction(
+            guid,
+            (_, userInputState) => {
+                if (Enum.UserInputState.Begin === userInputState) handleActivated()
+            },
+            false,
+            keycode
+        )
+    })
+
+    return (
+        <frame {...spreadableProps} BackgroundTransparency={1} SizeConstraint={Enum.SizeConstraint.RelativeYY}>
+            <textbutton
+                Position={new UDim2(0, 0, 0, 0)}
+                Size={new UDim2(1, 0, 1, 0)}
+                BackgroundColor3={new Color3()}
+                BackgroundTransparency={0.3}
+                Text=""
+                Event={{
+                    Activated: () => {
+                        handleActivated()
+                    }
+                }}
+            >
+                <uicorner CornerRadius={new UDim(0.05, 0)}/>
+                <uistroke
+                    Thickness={2}
+                    Color={new Color3(0.1, 0.1, 0.1)}
+                    ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
+                />
+
+                <textlabel
+                    Size={new UDim2(1, 0, 0.2, 0)}
+					Text={tostring(index)}
+					TextXAlignment={Enum.TextXAlignment.Left}
+					BackgroundTransparency={1}
+					TextColor3={new Color3(1, 1, 1)}
+					TextScaled
+                >
+                    <uistroke Thickness={1}/>
+                </textlabel>
+
+                <textlabel
+                    Size={new UDim2(1, 0, 1, 0)}
+                    AnchorPoint={new Vector2(0.5, 0.5)}
+                    Position={new UDim2(0.5, 0, 0.5, 0)}
+                    BackgroundTransparency={1}
+                    TextScaled
+                    Text={tool.Name}
+                    TextColor3={Color3.fromRGB(255, 255, 255)}
+                >
+                    <uistroke Thickness={1}/>
+                    <Padding Padding={new UDim(0.05, 0)}/>
+                </textlabel>
+            </textbutton>
+        </frame>
+    )
+}
+
+export default new Hooks(Roact)(slot)