From 3d641b34cea55ee4bd780b99d6d9152af2cdcee4 Mon Sep 17 00:00:00 2001 From: reidlab Date: Sun, 20 Aug 2023 01:56:39 -0700 Subject: [PATCH 1/3] add toggle for acrylic, fix roact fragments --- .../ui/components/acrylic/index.tsx | 19 ++- .../ui/store/hooks/useUiProducer.ts | 5 +- .../ui/store/producer/config.ts | 16 +++ .../ui/store/producer/index.ts | 3 +- .../StarterPlayerScripts/ui/config/config.tsx | 119 ++++++++++++++++++ .../StarterPlayerScripts/ui/hotbar/slot.tsx | 2 +- .../StarterPlayerScripts/ui/main.tsx | 7 ++ tsconfig.json | 2 +- 8 files changed, 167 insertions(+), 6 deletions(-) create mode 100644 src/ReplicatedStorage/ui/store/producer/config.ts create mode 100644 src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx diff --git a/src/ReplicatedStorage/ui/components/acrylic/index.tsx b/src/ReplicatedStorage/ui/components/acrylic/index.tsx index 82cd98d..15116de 100644 --- a/src/ReplicatedStorage/ui/components/acrylic/index.tsx +++ b/src/ReplicatedStorage/ui/components/acrylic/index.tsx @@ -3,6 +3,7 @@ import { useEffect, useCallback, useMemo, useMutable } from "@rbxts/roact-hooked import { acrylicInstance } from "./acrylicInstance" import { Lighting, Workspace } from "@rbxts/services" import Make from "@rbxts/make" +import { useRootSelector } from "ReplicatedStorage/ui/store/hooks/useUiProducer" const cylinderAngleOffset = CFrame.Angles(0, math.rad(90), 0) @@ -34,7 +35,7 @@ Make("DepthOfFieldEffect", { Parent: Lighting }) -function acrylic(props: acrylicProps): Roact.Element { +function AcrylicComponent(props: acrylicProps): Roact.Element { const { radius, distance } = props const spreadableProps = { ...props } as Partial @@ -161,4 +162,20 @@ function acrylic(props: acrylicProps): Roact.Element { ) } +function acrylic(props: acrylicProps): Roact.Element { + const { radius, distance } = props + + const spreadableProps = { ...props } as Partial + delete spreadableProps.radius + delete spreadableProps.distance + + const enabled = useRootSelector((state) => state.configProducer.acrylicBlur) + + return <> + { + enabled && + } + +} + export default acrylic \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts b/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts index 979e43c..95c0bec 100644 --- a/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts +++ b/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts @@ -1,4 +1,5 @@ -import { UseProducerHook, useProducer } from "@rbxts/roact-reflex" +import { UseProducerHook, UseSelectorHook, useProducer, useSelector } from "@rbxts/roact-reflex" import { rootProducer } from "../producer" -export const useUiProducer: UseProducerHook = useProducer \ No newline at end of file +export const useRootProducer: UseProducerHook = useProducer +export const useRootSelector: UseSelectorHook = useSelector \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/store/producer/config.ts b/src/ReplicatedStorage/ui/store/producer/config.ts new file mode 100644 index 0000000..de831aa --- /dev/null +++ b/src/ReplicatedStorage/ui/store/producer/config.ts @@ -0,0 +1,16 @@ +import { createProducer } from "@rbxts/reflex" + +export interface ConfigState { + readonly acrylicBlur: boolean +} + +const initialState: ConfigState = { + acrylicBlur: false +} + +export const configProducer = createProducer(initialState, { + toggleAcrylic: (state) => ({ + ...state, + acrylicBlur: !state.acrylicBlur + }) +}) \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/store/producer/index.ts b/src/ReplicatedStorage/ui/store/producer/index.ts index 2646565..4ac2bdf 100644 --- a/src/ReplicatedStorage/ui/store/producer/index.ts +++ b/src/ReplicatedStorage/ui/store/producer/index.ts @@ -1,9 +1,10 @@ import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex" +import { configProducer } from "./config" export type rootProducer = typeof producer export type rootState = InferState export type rootDispatchers = InferDispatchers export const producer = combineProducers({ - + configProducer }).applyMiddleware(loggerMiddleware) \ No newline at end of file diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx new file mode 100644 index 0000000..2463b5b --- /dev/null +++ b/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx @@ -0,0 +1,119 @@ +import Roact from "@rbxts/roact" +import Padding from "ReplicatedStorage/ui/components/padding" +import Acrylic from "ReplicatedStorage/ui/components/acrylic" +import { ContextActionService, HttpService } from "@rbxts/services" +import { Spring } from "@rbxts/flipper" +import { useGroupMotor } from "@rbxts/roact-hooked-plus" +import { useEffect } from "@rbxts/roact-hooked" +import { useRootProducer } from "ReplicatedStorage/ui/store/hooks/useUiProducer" + +interface ConfigProps extends Roact.JsxInstanceProperties { + shown: boolean + + Event?: Roact.JsxInstanceEvents + Change?: Roact.JsxInstanceChangeEvents +} + +const CONFIG_DEFAULT = [new Spring(1.5, { frequency: 6 })] +const CONFIG_ACTIVE = [new Spring(.5, { frequency: 6 })] + +function config(props: ConfigProps): Roact.Element { + const { toggleAcrylic } = useRootProducer() + + let { shown } = props + + const spreadableProps = { ...props } as Partial + delete spreadableProps.shown + + const [slotPosYMap, setPosYGoal] = useGroupMotor([1.5, 6]) + const slotPosY = slotPosYMap.map((t) => t[0]) + + useEffect(() => { + const guid = HttpService.GenerateGUID(false) + ContextActionService.BindAction( + guid, + (_, userInputState) => { + if (Enum.UserInputState.Begin === userInputState) { + shown = !shown + if (shown) { + setPosYGoal(CONFIG_ACTIVE) + } else { + setPosYGoal(CONFIG_DEFAULT) + } + } + }, + false, + Enum.KeyCode.P + ) + }) + + return ( + { + return new UDim2(.5, 0, posY, 0) + }) + } + BackgroundTransparency={1} + Size={new UDim2(.4, 0, .7, 0)} + Key={"Config"} + > + {/* u can move cursor in first person */} + + + + + + + {toggleAcrylic()} + }} + > + + + + + + ) +} + +export default config \ No newline at end of file diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx index 27f718b..3c93d0f 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx @@ -62,7 +62,7 @@ function slot(props: SlotProps): Roact.Element { return ( diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/main.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/main.tsx index c6d78f4..755ea44 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/main.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/main.tsx @@ -1,5 +1,6 @@ import Roact from "@rbxts/roact" import Hotbar from "./hotbar/hotbar" +import Config from "./config/config" import { withHookDetection } from "@rbxts/roact-hooked" interface MainProps extends Roact.JsxInstanceEvents { @@ -19,6 +20,12 @@ export default function main(props: MainProps): Roact.Element { AnchorPoint={new Vector2(0.5, 1)} Size={new UDim2(1, 0, 0.2, 0)} /> + ) } \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 05870df..5a4e62b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -5,7 +5,7 @@ "downlevelIteration": true, "jsx": "react", "jsxFactory": "Roact.createElement", - "jsxFragmentFactory": "Roact.Fragment", + "jsxFragmentFactory": "Roact.createFragment", "module": "commonjs", "moduleResolution": "Node", "noLib": true, From be86712ede66ddbc1214e2d927d5b1c28063cab6 Mon Sep 17 00:00:00 2001 From: reidlab Date: Sun, 20 Aug 2023 01:59:35 -0700 Subject: [PATCH 2/3] update uicorner and update readme --- readme.md | 2 ++ src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx | 6 +++--- src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index d693a2a..d86df76 100644 --- a/readme.md +++ b/readme.md @@ -9,6 +9,8 @@ An in-dev game that I plan to make a shooter game out of. 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) +I should put this in the game sometime, but the option to open the configuration menu is O and the debug menu is F4. You can hold alt in the debug menu to get information when hovering over objects. + # Hacks * 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. diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx index 2463b5b..4629134 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx @@ -67,7 +67,7 @@ function config(props: ConfigProps): Roact.Element { Visible={false} /> diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx index 3c93d0f..203d9c9 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx @@ -67,14 +67,14 @@ function slot(props: SlotProps): Roact.Element { Size={new UDim2(1, 0, 1, 0)} > Date: Sun, 20 Aug 2023 02:00:36 -0700 Subject: [PATCH 3/3] remove something to fix mouse (it didnt) --- src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx index 4629134..92a05dc 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/config/config.tsx @@ -60,12 +60,6 @@ function config(props: ConfigProps): Roact.Element { Size={new UDim2(.4, 0, .7, 0)} Key={"Config"} > - {/* u can move cursor in first person */} -