reidlab/goopler
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

swap to roact-hooked, init roact-reflex

Browse source
This commit is contained in:
Reid 2023-08-15 17:58:36 -07:00
parent 3530d84142
commit cfccbe4883
14 changed files with 109 additions and 141 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx
View file

@ -1,5 +1,4 @@
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"
@ -10,13 +9,12 @@ interface hotbarProps extends Roact.JsxInstanceProperties<Frame> {
Change?: Roact.JsxInstanceChangeEvents<Frame>
}
// no fuck off
StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false)
const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
function hotbar(props: hotbarProps): Roact.Element {
const spreadableProps = { ...props } as Partial<hotbarProps>
const { clientState } = useWorldContext(hooks)
const { clientState } = useWorldContext()
const keycodes: Enum.KeyCode[] = [
Enum.KeyCode.One,
@ -30,6 +28,18 @@ const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
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}
@ -44,19 +54,11 @@ const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
VerticalAlignment={Enum.VerticalAlignment.Bottom}
/>
<Padding
Padding={new UDim(0, 10)}
padding={new UDim(0, 10)}
/>
{
clientState.backpack.GetChildren().map((tool, i) => (
<Slot
index={i + 1}
keycode={keycodes[i]}
tool={tool as Tool}
/>
))
}
{...items}
</frame>
)
}
export default new Hooks(Roact)(hotbar)
export default hotbar

23
src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx
View file

@ -1,5 +1,5 @@
import Roact from "@rbxts/roact"
import Hooks from "@rbxts/roact-hooks"
import { useEffect } from "@rbxts/roact-hooked"
import { useWorldContext } from "../contexts/worldContext"
import { ContextActionService, HttpService } from "@rbxts/services"
import Padding from "ReplicatedStorage/ui/padding"
@ -13,21 +13,22 @@ interface slotProps extends Roact.JsxInstanceProperties<Frame> {
Change?: Roact.JsxInstanceChangeEvents<Frame>
}
const slot: Hooks.FC<slotProps> = (props, hooks) => {
function slot(props: slotProps): Roact.Element {
const { index, keycode, tool } = props
const { useEffect } = hooks
const spreadableProps = { ...props } as Partial<slotProps>
delete spreadableProps.index
delete spreadableProps.keycode
delete spreadableProps.tool
const { clientState } = useWorldContext(hooks)
const { clientState } = useWorldContext()
const handleActivated = (): void => {
tool.Parent !== clientState.character
? clientState.character.Humanoid.EquipTool(tool)
: clientState.character.Humanoid.UnequipTools()
if (tool.Parent !== clientState.character) {
clientState.character.Humanoid.EquipTool(tool)
} else {
clientState.character.Humanoid.UnequipTools()
}
}
// TODO: maybe opt this into our system for inputs?
@ -46,7 +47,9 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
return (
<frame
BackgroundColor3={Color3.fromHex("#11111b")}
BackgroundTransparency={.7}
BackgroundTransparency={
.7
}
Size={new UDim2(1, 0, 1, 0)}
>
<uiaspectratioconstraint
@ -56,7 +59,7 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
CornerRadius={new UDim(0, 8)}
/>
<Padding
PaddingY={new UDim(.3, 0)}
paddingY={new UDim(.3, 0)}
/>
<textlabel
TextColor3={Color3.fromHex("#cdd6f4")}
@ -80,4 +83,4 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
)
}
export default new Hooks(Roact)(slot)
export default slot