revamp hotbar ui

This commit is contained in:
Reid 2023-08-13 10:03:18 -07:00
parent f9403100de
commit d6af38eba1
3 changed files with 57 additions and 69 deletions

View file

@ -7,6 +7,8 @@ An in-dev game that I plan to make a shooter game out of.
— reidlab — reidlab
# Ui theming is based on Catppucin Mocha. You can find the colors [here](https://github.com/catppuccin/catppuccin) and the style guide [here](https://github.com/catppuccin/catppuccin/blob/main/docs/style-guide.md)
# Hacks # Hacks
* I get a strange error about private identifiers in [`./src/ReplicatedStorage/ecs/state.ts`](./src/ReplicatedStorage/ecs/state.ts) * I get a strange error about private identifiers in [`./src/ReplicatedStorage/ecs/state.ts`](./src/ReplicatedStorage/ecs/state.ts)
* I decided to omit the "TS" folder from [`./default.project.json:40`](./default.project.json) due to the script override not working in Health.server.ts in StarterCharacterScripts. * I decided to omit the "TS" folder from [`./default.project.json:40`](./default.project.json) due to the script override not working in Health.server.ts in StarterCharacterScripts.

View file

@ -27,38 +27,36 @@ const hotbar: Hooks.FC<hotbarProps> = (props, hooks) => {
Enum.KeyCode.Six, Enum.KeyCode.Six,
Enum.KeyCode.Seven, Enum.KeyCode.Seven,
Enum.KeyCode.Eight, Enum.KeyCode.Eight,
Enum.KeyCode.Nine Enum.KeyCode.Nine,
// idk if this works
Enum.KeyCode.Zero
] ]
return ( return (
<frame <frame
{...spreadableProps} {...spreadableProps}
AutomaticSize={Enum.AutomaticSize.X} AnchorPoint={new Vector2(0, 0)}
AnchorPoint={new Vector2(0.5, 1)} Position={new UDim2(0, 0, 0, 0)}
BackgroundTransparency={1} BackgroundTransparency={1}
Key="Hotbar" Size={new UDim2(.25, 0, 1, 0)}
Key={"Hotbar"}
> >
<frame Size={new UDim2(0, 0, 0.5, 0)} Position={new UDim2(0.5, 0, 0.5, 0)} BackgroundTransparency={1}> <uilistlayout
<uilistlayout Padding={new UDim(0, 5)}
FillDirection={Enum.FillDirection.Horizontal} VerticalAlignment={Enum.VerticalAlignment.Bottom}
HorizontalAlignment={Enum.HorizontalAlignment.Center} />
VerticalAlignment={Enum.VerticalAlignment.Bottom} <Padding
Padding={new UDim(0, 5)} Padding={new UDim(0, 10)}
/> />
<Padding {
PaddingY={new UDim(0, 5)} clientState.backpack.GetChildren().map((tool, i) => (
/> <Slot
{ index={i + 1}
clientState.backpack.GetChildren().map((tool, i) => ( keycode={keycodes[i]}
<Slot tool={tool as Tool}
index={i + 1} />
Size={new UDim2(1, 0, 1, 0)} ))
keycode={keycodes[i]} }
tool={tool as Tool}
/>
))
}
</frame>
</frame> </frame>
) )
} }

View file

@ -44,50 +44,38 @@ const slot: Hooks.FC<slotProps> = (props, hooks) => {
}) })
return ( return (
<frame {...spreadableProps} BackgroundTransparency={1} SizeConstraint={Enum.SizeConstraint.RelativeYY}> <frame
<textbutton BackgroundColor3={Color3.fromHex("#11111b")}
Position={new UDim2(0, 0, 0, 0)} BackgroundTransparency={.7}
Size={new UDim2(1, 0, 1, 0)} Size={new UDim2(1, 0, 1, 0)}
BackgroundColor3={new Color3()} >
BackgroundTransparency={0.3} <uiaspectratioconstraint
Text="" AspectRatio={6}
Event={{ />
Activated: (): void => { <uicorner
handleActivated() CornerRadius={new UDim(0, 8)}
} />
}} <Padding
> PaddingY={new UDim(.3, 0)}
<uicorner CornerRadius={new UDim(0.05, 0)}/> />
<uistroke <textlabel
Thickness={2} TextColor3={Color3.fromHex("#cdd6f4")}
Color={new Color3(0.1, 0.1, 0.1)} BackgroundTransparency={1}
ApplyStrokeMode={Enum.ApplyStrokeMode.Border} Size={new UDim2(.2, 0, 1, 0)}
/> Font={Enum.Font.GothamBold}
Text={tostring(index)}
<textlabel TextScaled
Size={new UDim2(1, 0, 0.2, 0)} />
Text={tostring(index)} <textlabel
TextXAlignment={Enum.TextXAlignment.Left} TextColor3={Color3.fromHex("#cdd6f4")}
BackgroundTransparency={1} BackgroundTransparency={1}
TextColor3={new Color3(1, 1, 1)} Size={new UDim2(.8, 0, 1, 0)}
TextScaled Position={new UDim2(.2, 0, 0, 0)}
> Font={Enum.Font.Gotham}
<uistroke Thickness={1}/> Text={tool.Name}
</textlabel> TextXAlignment={Enum.TextXAlignment.Left}
TextScaled
<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> </frame>
) )
} }