improve ui

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

View file

@ -5,12 +5,17 @@ export interface ConfigState {
} }
const initialState: ConfigState = { const initialState: ConfigState = {
acrylicBlur: false acrylicBlur: true
} }
export const configProducer = createProducer(initialState, { export const configProducer = createProducer(initialState, {
toggleAcrylic: (state) => ({ enableAcrylic: (state) => ({
...state, ...state,
acrylicBlur: !state.acrylicBlur acrylicBlur: true
}),
disableAcrylic: (state) => ({
...state,
acrylicBlur: false
}) })
}) })

View file

@ -1,6 +1,7 @@
import Roact from "@rbxts/roact" import Roact from "@rbxts/roact"
import Padding from "ReplicatedStorage/ui/components/padding" import Padding from "ReplicatedStorage/ui/components/padding"
import Acrylic from "ReplicatedStorage/ui/components/acrylic" import Acrylic from "ReplicatedStorage/ui/components/acrylic"
import ToggleButton from "./toggleButton"
import { ContextActionService, HttpService } from "@rbxts/services" import { ContextActionService, HttpService } from "@rbxts/services"
import { Spring } from "@rbxts/flipper" import { Spring } from "@rbxts/flipper"
import { useGroupMotor } from "@rbxts/roact-hooked-plus" import { useGroupMotor } from "@rbxts/roact-hooked-plus"
@ -14,19 +15,22 @@ interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
Change?: Roact.JsxInstanceChangeEvents<Frame> Change?: Roact.JsxInstanceChangeEvents<Frame>
} }
const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 })] const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 }), new Spring(0, { frequency: 6 })]
const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 })] const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 }), new Spring(1, { frequency: 6 })]
function config(props: ConfigProps): Roact.Element { function config(props: ConfigProps): Roact.Element {
const { toggleAcrylic } = useRootProducer() const { disableAcrylic, enableAcrylic } = useRootProducer()
let { shown } = props let { shown } = props
const spreadableProps = { ...props } as Partial<ConfigProps> const spreadableProps = { ...props } as Partial<ConfigProps>
delete spreadableProps.shown delete spreadableProps.shown
const [slotPosYMap, setPosYGoal] = useGroupMotor([1.5, 6]) const [configPosYAndBorderColor, setConfigGoal] = useGroupMotor([1.5, 6])
const slotPosY = slotPosYMap.map((t) => t[0]) const configPosY = configPosYAndBorderColor.map((t) => t[0])
const configBorderColor = configPosYAndBorderColor.map((t) => t[1]).map((val) => {
return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
})
useEffect(() => { useEffect(() => {
const guid = HttpService.GenerateGUID(false) const guid = HttpService.GenerateGUID(false)
@ -36,9 +40,9 @@ function config(props: ConfigProps): Roact.Element {
if (Enum.UserInputState.Begin === userInputState) { if (Enum.UserInputState.Begin === userInputState) {
shown = !shown shown = !shown
if (shown) { if (shown) {
setPosYGoal(CONFIG_ACTIVE) setConfigGoal(CONFIG_ACTIVE)
} else { } else {
setPosYGoal(CONFIG_DEFAULT) setConfigGoal(CONFIG_DEFAULT)
} }
} }
}, },
@ -52,7 +56,7 @@ function config(props: ConfigProps): Roact.Element {
{...spreadableProps} {...spreadableProps}
AnchorPoint={new Vector2(.5, .5)} AnchorPoint={new Vector2(.5, .5)}
Position={ Position={
slotPosY.map((posY) => { configPosY.map((posY) => {
return new UDim2(.5, 0, posY, 0) return new UDim2(.5, 0, posY, 0)
}) })
} }
@ -68,7 +72,7 @@ function config(props: ConfigProps): Roact.Element {
AnchorPoint={new Vector2(0, 0)} AnchorPoint={new Vector2(0, 0)}
Position={new UDim2(0, 0, 0, 0)} Position={new UDim2(0, 0, 0, 0)}
Size={new UDim2(1, 0, 1, 0)} Size={new UDim2(1, 0, 1, 0)}
BackgroundTransparency={.7} BackgroundTransparency={.3}
BackgroundColor3={Color3.fromHex("#1e1e2e")} BackgroundColor3={Color3.fromHex("#1e1e2e")}
> >
<uilistlayout <uilistlayout
@ -80,31 +84,19 @@ function config(props: ConfigProps): Roact.Element {
<uicorner <uicorner
CornerRadius={new UDim(0, 5)} CornerRadius={new UDim(0, 5)}
/> />
<uistroke
Thickness={1}
Color={configBorderColor}
/>
<Padding <Padding
padding={new UDim(0, 5)} padding={new UDim(0, 5)}
/> />
<textbutton <ToggleButton
Size={new UDim2(1, 0, .1, 0)} Text="Toggle acrylic UI"
Font={Enum.Font.Gotham} active={false}
TextXAlignment={Enum.TextXAlignment.Left} disableCallback={disableAcrylic}
BackgroundTransparency={.5} enableCallback={enableAcrylic}
BackgroundColor3={Color3.fromHex("#11111b")} />
AutoButtonColor={false}
TextColor3={Color3.fromHex("#cdd6f4")}
TextScaled
Text={"Toggle acrylic UI"}
Event={{
Activated: (): void => {toggleAcrylic()}
}}
>
<Padding
paddingY={new UDim(.3, 0)}
paddingX={new UDim(0, 5)}
/>
<uicorner
CornerRadius={new UDim(0, 5)}
/>
</textbutton>
</frame> </frame>
</frame> </frame>
) )

View file

@ -0,0 +1,73 @@
import Roact from "@rbxts/roact"
import Padding from "ReplicatedStorage/ui/components/padding"
import { Spring } from "@rbxts/flipper"
import { useGroupMotor } from "@rbxts/roact-hooked-plus"
interface toggleButtonProps extends Roact.JsxInstanceProperties<TextButton> {
active: boolean
enableCallback: () => void
disableCallback: () => void
Event?: Roact.JsxInstanceEvents<TextButton>
Change?: Roact.JsxInstanceChangeEvents<TextButton>
}
const BUTTON_DEFAULT = [new Spring(0, { frequency: 6 })]
const BUTTON_ACTIVE = [new Spring(1, { frequency: 6 })]
function toggleButton(props: toggleButtonProps): Roact.Element {
let { active } = props
const { enableCallback, disableCallback, Text } = props
const spreadableProps = { ...props } as Partial<toggleButtonProps>
delete spreadableProps.active
delete spreadableProps.enableCallback
delete spreadableProps.disableCallback
const [buttonBorderColorMap, setButtonGoal] = useGroupMotor([0])
const buttonBorderColor = buttonBorderColorMap.map((t) => t[0]).map((val) => {
return Color3.fromHex("#6c7086").Lerp(Color3.fromHex("#b4befe"), val)
})
return (
<textbutton
{...spreadableProps}
Size={new UDim2(1, 0, .1, 0)}
Font={Enum.Font.Gotham}
TextXAlignment={Enum.TextXAlignment.Left}
BackgroundTransparency={.3}
BackgroundColor3={Color3.fromHex("#313244")}
AutoButtonColor={false}
TextColor3={Color3.fromHex("#cdd6f4")}
TextScaled
Text={Text as string}
Event={{
Activated: (): void => {
active = !active
if (active) {
setButtonGoal(BUTTON_ACTIVE)
enableCallback()
} else {
setButtonGoal(BUTTON_DEFAULT)
disableCallback()
}
}
}}
>
<Padding
paddingY={new UDim(.3, 0)}
paddingX={new UDim(0, 5)}
/>
<uicorner
CornerRadius={new UDim(0, 5)}
/>
<uistroke
Thickness={1}
Color={buttonBorderColor}
ApplyStrokeMode={Enum.ApplyStrokeMode.Border}
/>
</textbutton>
)
}
export default toggleButton

View file

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