improve ui
This commit is contained in:
parent
5a8c554bf1
commit
c258363a03
4 changed files with 116 additions and 40 deletions
|
@ -5,12 +5,17 @@ export interface ConfigState {
|
|||
}
|
||||
|
||||
const initialState: ConfigState = {
|
||||
acrylicBlur: false
|
||||
acrylicBlur: true
|
||||
}
|
||||
|
||||
export const configProducer = createProducer(initialState, {
|
||||
toggleAcrylic: (state) => ({
|
||||
enableAcrylic: (state) => ({
|
||||
...state,
|
||||
acrylicBlur: !state.acrylicBlur
|
||||
acrylicBlur: true
|
||||
}),
|
||||
|
||||
disableAcrylic: (state) => ({
|
||||
...state,
|
||||
acrylicBlur: false
|
||||
})
|
||||
})
|
|
@ -1,6 +1,7 @@
|
|||
import Roact from "@rbxts/roact"
|
||||
import Padding from "ReplicatedStorage/ui/components/padding"
|
||||
import Acrylic from "ReplicatedStorage/ui/components/acrylic"
|
||||
import ToggleButton from "./toggleButton"
|
||||
import { ContextActionService, HttpService } from "@rbxts/services"
|
||||
import { Spring } from "@rbxts/flipper"
|
||||
import { useGroupMotor } from "@rbxts/roact-hooked-plus"
|
||||
|
@ -14,19 +15,22 @@ interface ConfigProps extends Roact.JsxInstanceProperties<Frame> {
|
|||
Change?: Roact.JsxInstanceChangeEvents<Frame>
|
||||
}
|
||||
|
||||
const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 })]
|
||||
const CONFIG_ACTIVE = [new Spring(.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 }), new Spring(1, { frequency: 6 })]
|
||||
|
||||
function config(props: ConfigProps): Roact.Element {
|
||||
const { toggleAcrylic } = useRootProducer()
|
||||
const { disableAcrylic, enableAcrylic } = useRootProducer()
|
||||
|
||||
let { shown } = props
|
||||
|
||||
const spreadableProps = { ...props } as Partial<ConfigProps>
|
||||
delete spreadableProps.shown
|
||||
|
||||
const [slotPosYMap, setPosYGoal] = useGroupMotor([1.5, 6])
|
||||
const slotPosY = slotPosYMap.map((t) => t[0])
|
||||
const [configPosYAndBorderColor, setConfigGoal] = useGroupMotor([1.5, 6])
|
||||
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(() => {
|
||||
const guid = HttpService.GenerateGUID(false)
|
||||
|
@ -36,9 +40,9 @@ function config(props: ConfigProps): Roact.Element {
|
|||
if (Enum.UserInputState.Begin === userInputState) {
|
||||
shown = !shown
|
||||
if (shown) {
|
||||
setPosYGoal(CONFIG_ACTIVE)
|
||||
setConfigGoal(CONFIG_ACTIVE)
|
||||
} else {
|
||||
setPosYGoal(CONFIG_DEFAULT)
|
||||
setConfigGoal(CONFIG_DEFAULT)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
@ -52,7 +56,7 @@ function config(props: ConfigProps): Roact.Element {
|
|||
{...spreadableProps}
|
||||
AnchorPoint={new Vector2(.5, .5)}
|
||||
Position={
|
||||
slotPosY.map((posY) => {
|
||||
configPosY.map((posY) => {
|
||||
return new UDim2(.5, 0, posY, 0)
|
||||
})
|
||||
}
|
||||
|
@ -68,7 +72,7 @@ function config(props: ConfigProps): Roact.Element {
|
|||
AnchorPoint={new Vector2(0, 0)}
|
||||
Position={new UDim2(0, 0, 0, 0)}
|
||||
Size={new UDim2(1, 0, 1, 0)}
|
||||
BackgroundTransparency={.7}
|
||||
BackgroundTransparency={.3}
|
||||
BackgroundColor3={Color3.fromHex("#1e1e2e")}
|
||||
>
|
||||
<uilistlayout
|
||||
|
@ -80,31 +84,19 @@ function config(props: ConfigProps): Roact.Element {
|
|||
<uicorner
|
||||
CornerRadius={new UDim(0, 5)}
|
||||
/>
|
||||
<uistroke
|
||||
Thickness={1}
|
||||
Color={configBorderColor}
|
||||
/>
|
||||
<Padding
|
||||
padding={new UDim(0, 5)}
|
||||
/>
|
||||
<textbutton
|
||||
Size={new UDim2(1, 0, .1, 0)}
|
||||
Font={Enum.Font.Gotham}
|
||||
TextXAlignment={Enum.TextXAlignment.Left}
|
||||
BackgroundTransparency={.5}
|
||||
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)}
|
||||
<ToggleButton
|
||||
Text="Toggle acrylic UI"
|
||||
active={false}
|
||||
disableCallback={disableAcrylic}
|
||||
enableCallback={enableAcrylic}
|
||||
/>
|
||||
<uicorner
|
||||
CornerRadius={new UDim(0, 5)}
|
||||
/>
|
||||
</textbutton>
|
||||
</frame>
|
||||
</frame>
|
||||
)
|
||||
|
|
|
@ -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
|
|
@ -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)}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue