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

64 lines
No EOL
1.7 KiB
TypeScript

import Roact from "@rbxts/roact"
import Slot from "./slot"
import { useWorldContext } from "../contexts/worldContext"
import Padding from "ReplicatedStorage/ui/components/padding"
import { StarterGui } from "@rbxts/services"
interface HotbarProps extends Roact.JsxInstanceProperties<Frame> {
Event?: Roact.JsxInstanceEvents<Frame>
Change?: Roact.JsxInstanceChangeEvents<Frame>
}
StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
function hotbar(props: HotbarProps): Roact.Element {
const spreadableProps = { ...props } as Partial<HotbarProps>
const { clientState } = useWorldContext()
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
]
const items: Roact.Element[] = []
clientState.backpack.GetChildren().forEach((tool, i) => {
items.push(
<Slot
Key={`Item${i}`}
index={i + 1}
keycode={keycodes[i]}
tool={tool as Tool}
/>
)
})
return (
<frame
{...spreadableProps}
AnchorPoint={new Vector2(0, 0)}
Position={new UDim2(0, 0, 0, 0)}
BackgroundTransparency={1}
Size={new UDim2(.25, 0, 1, 0)}
Key={"Hotbar"}
>
<uilistlayout
Padding={new UDim(0, 5)}
VerticalAlignment={Enum.VerticalAlignment.Bottom}
/>
<Padding
padding={new UDim(0, 10)}
/>
{...items}
</frame>
)
}
export default hotbar