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

improve ui

Browse source
This commit is contained in:
Reid 2023-08-20 15:14:23 -07:00
parent 5a8c554bf1
commit c258363a03
4 changed files with 116 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,8 +16,8 @@ interface SlotProps extends Roact.JsxInstanceProperties<Frame> {
Change?: Roact.JsxInstanceChangeEvents<Frame>
}
const SLOT_DEFAULT = [new Spring(.7, { frequency: 6 }), new Spring(6, { frequency: 6 })]
const SLOT_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(5, { frequency: 6 })]
const SLOT_DEFAULT = [new Spring(0, { frequency: 6 }), new Spring(6, { frequency: 6 })]
const SLOT_ACTIVE = [new Spring(1, { frequency: 6 }), new Spring(5, { frequency: 6 })]
function slot(props: SlotProps): Roact.Element {
const { index, keycode, tool } = props
@ -27,9 +27,11 @@ function slot(props: SlotProps): Roact.Element {
delete spreadableProps.keycode
delete spreadableProps.tool
const [slotBgTransparencyAndSlotRatio, setSlotGoal] = useGroupMotor([.7, 6])
const slotBgTransparency = slotBgTransparencyAndSlotRatio.map((t) => t[0])
const slotRatio = slotBgTransparencyAndSlotRatio.map((t) => t[1])
const [slotBorderColorAndSlotRatio, setSlotGoal] = useGroupMotor([0, 6])
const slotBorderColor = slotBorderColorAndSlotRatio.map((t) => t[0]).map((val) => {
return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
})
const slotRatio = slotBorderColorAndSlotRatio.map((t) => t[1])
const { clientState } = useWorldContext()
@ -63,7 +65,7 @@ function slot(props: SlotProps): Roact.Element {
return (
<frame
BackgroundColor3={Color3.fromHex("#1e1e2e")}
BackgroundTransparency={slotBgTransparency}
BackgroundTransparency={.3}
Size={new UDim2(1, 0, 1, 0)}
>
<Acrylic
@ -76,6 +78,10 @@ function slot(props: SlotProps): Roact.Element {
<uicorner
CornerRadius={new UDim(0, 5)}
/>
<uistroke
Thickness={1}
Color={slotBorderColor}
/>
<frame BackgroundTransparency={1} Size={new UDim2(1, 0, 1, 0)}>
<Padding
paddingY={new UDim(.3, 0)}