diff --git a/default.project.json b/default.project.json index 0d2b792..8823bdf 100644 --- a/default.project.json +++ b/default.project.json @@ -1,5 +1,5 @@ { - "name": "goopler", + "name": "roblox-ts-game", "globIgnorePaths": [ "**/package.json", "**/tsconfig.json" diff --git a/package.json b/package.json index 606d177..b0a850d 100644 --- a/package.json +++ b/package.json @@ -36,11 +36,9 @@ "@rbxts/log": "^0.6.3", "@rbxts/matter": "^0.6.2-ts.6", "@rbxts/plasma": "^0.4.1-ts.1", - "@rbxts/reflex": "^4.2.0", "@rbxts/rewire": "^0.3.0", "@rbxts/roact": "^1.4.4-ts.0", - "@rbxts/roact-hooked": "^2.6.0", - "@rbxts/roact-reflex": "^2.1.0", + "@rbxts/roact-hooks": "^0.4.1-ts.3", "@rbxts/services": "^1.5.1", "@rbxts/testez": "^0.4.2-ts.0", "@rbxts/variant": "^1.0.2", diff --git a/readme.md b/readme.md index bfae4d1..6ff2aea 100644 --- a/readme.md +++ b/readme.md @@ -7,14 +7,14 @@ An in-dev game that I plan to make a shooter game out of. — 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) +# 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 * 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. # Todo -* __Work on next:__ Add hotbar animations and state, might need reflex +* __Work on next:__ Add hotbar animations, might need reflex || rodux * Add tests * Add guns * Add the bound tags in [`./src/ReplicatedStorage/ecs/boundTags.ts`](./src/ReplicatedStorage/ecs/boundTags.ts) diff --git a/src/ReplicatedStorage/reflex/uiStore/hooks/useRootProducer.ts b/src/ReplicatedStorage/reflex/uiStore/hooks/useRootProducer.ts deleted file mode 100644 index f64d7e8..0000000 --- a/src/ReplicatedStorage/reflex/uiStore/hooks/useRootProducer.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { UseProducerHook, useProducer } from "@rbxts/roact-reflex" -import { rootProducer } from "../producer" - -export const useRootProducer: UseProducerHook = useProducer \ No newline at end of file diff --git a/src/ReplicatedStorage/reflex/uiStore/producer/index.ts b/src/ReplicatedStorage/reflex/uiStore/producer/index.ts deleted file mode 100644 index 2646565..0000000 --- a/src/ReplicatedStorage/reflex/uiStore/producer/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex" - -export type rootProducer = typeof producer -export type rootState = InferState -export type rootDispatchers = InferDispatchers - -export const producer = combineProducers({ - -}).applyMiddleware(loggerMiddleware) \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/components/padding.tsx b/src/ReplicatedStorage/ui/components/padding.tsx deleted file mode 100644 index 326b46b..0000000 --- a/src/ReplicatedStorage/ui/components/padding.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import Hooks from "@rbxts/roact-hooked" -import Roact from "@rbxts/roact" - -interface paddingProps extends Roact.JsxInstanceProperties { - padding?: UDim | Roact.Binding - paddingX?: UDim | Roact.Binding - paddingY?: UDim | Roact.Binding - - Event?: Roact.JsxInstanceEvents - Change?: Roact.JsxInstanceChangeEvents -} - -function padding(props: paddingProps): Roact.Element { - const { padding, paddingX, paddingY } = props - - const spreadableProps = { ...props } as Partial - delete spreadableProps.padding - delete spreadableProps.paddingX - delete spreadableProps.paddingY - - return ( - - ) -} - -export default padding \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/padding.tsx b/src/ReplicatedStorage/ui/padding.tsx new file mode 100644 index 0000000..e3981b3 --- /dev/null +++ b/src/ReplicatedStorage/ui/padding.tsx @@ -0,0 +1,32 @@ +import Hooks from "@rbxts/roact-hooks" +import Roact from "@rbxts/roact" + +interface PaddingProps extends Roact.JsxInstanceProperties { + Padding?: UDim | Roact.Binding + PaddingX?: UDim | Roact.Binding + PaddingY?: UDim | Roact.Binding + + Event?: Roact.JsxInstanceEvents + Change?: Roact.JsxInstanceChangeEvents +} + +const padding: Hooks.FC = (props, _hooks) => { + const { Padding, PaddingX, PaddingY } = props + + const spreadableProps = { ...props } as Partial + delete spreadableProps.Padding + delete spreadableProps.PaddingX + delete spreadableProps.PaddingY + + return ( + + ) +} + +export default new Hooks(Roact)(padding) \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/percentageBar.tsx b/src/ReplicatedStorage/ui/percentageBar.tsx new file mode 100644 index 0000000..8f9f3d1 --- /dev/null +++ b/src/ReplicatedStorage/ui/percentageBar.tsx @@ -0,0 +1,64 @@ +import Hooks from "@rbxts/roact-hooks" +import Roact from "@rbxts/roact" +import Padding from "./padding" + +function colorBetween(startColor: Color3, endColor: Color3, degree: number): Color3 { + return startColor.Lerp(endColor, degree) +} + +interface percentageBarProps extends Roact.JsxInstanceProperties { + current: number + max: number + highColor: Color3 + lowColor: Color3 + bgColor: Color3 + text?: string + + Event?: Roact.JsxInstanceEvents + Change?: Roact.JsxInstanceChangeEvents +} + +const percentageBar: Hooks.FC = (props, _hooks) => { + const { current, max, highColor, lowColor, bgColor, text } = props + + const spreadableProps = { ...props } as Partial + delete spreadableProps.current + delete spreadableProps.max + delete spreadableProps.highColor + delete spreadableProps.lowColor + delete spreadableProps.bgColor + delete spreadableProps.text + + return ( + + + + + + + + {(text !== undefined) ? ( + + ) : undefined} + + + ) +} + +export default new Hooks(Roact)(percentageBar) \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts b/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts deleted file mode 100644 index 979e43c..0000000 --- a/src/ReplicatedStorage/ui/store/hooks/useUiProducer.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { UseProducerHook, useProducer } from "@rbxts/roact-reflex" -import { rootProducer } from "../producer" - -export const useUiProducer: UseProducerHook = useProducer \ No newline at end of file diff --git a/src/ReplicatedStorage/ui/store/producer/index.ts b/src/ReplicatedStorage/ui/store/producer/index.ts deleted file mode 100644 index 2646565..0000000 --- a/src/ReplicatedStorage/ui/store/producer/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { InferDispatchers, InferState, combineProducers, loggerMiddleware } from "@rbxts/reflex" - -export type rootProducer = typeof producer -export type rootState = InferState -export type rootDispatchers = InferDispatchers - -export const producer = combineProducers({ - -}).applyMiddleware(loggerMiddleware) \ No newline at end of file diff --git a/src/StarterPlayer/StarterPlayerScripts/showGUI.tsx b/src/StarterPlayer/StarterPlayerScripts/showGUI.tsx index e07a659..e415ff3 100644 --- a/src/StarterPlayer/StarterPlayerScripts/showGUI.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/showGUI.tsx @@ -1,19 +1,15 @@ import { World } from "@rbxts/matter" import { clientState } from "ReplicatedStorage/ecs/state" -import { WorldContext } from "./ui/contexts/worldContext" +import WorldProvider from "./ui/contexts/worldContext" import Roact from "@rbxts/roact" import Main from "./ui/main" -import { ReflexProvider } from "@rbxts/roact-reflex" -import { producer } from "ReplicatedStorage/ui/store/producer" const showGUI = (world: World, state: clientState): void => { const playerGui = state.player.WaitForChild("PlayerGui") as PlayerGui const tree = ( - - -
- - + +
+ ) Roact.mount(tree, playerGui, "gooplerGUI") } diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/contexts/worldContext.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/contexts/worldContext.tsx index 6912cfb..2d0812e 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/contexts/worldContext.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/contexts/worldContext.tsx @@ -1,16 +1,31 @@ import { World } from "@rbxts/matter" -import Roact from "@rbxts/roact" -import { useContext } from "@rbxts/roact-hooked" +import Roact, { createContext } from "@rbxts/roact" +import Hooks, { CoreHooks } from "@rbxts/roact-hooks" import { clientState } from "ReplicatedStorage/ecs/state" -interface worldContextProps { +interface WorldContextValue { world: World clientState: clientState } -export const WorldContext = Roact.createContext(undefined) +interface Props { + world: World + clientState: clientState +} -export function useWorldContext(): worldContextProps { +const WorldProviderWithoutHooks: Hooks.FC = (props) => { + const { world, clientState } = props + + return {props[Roact.Children]} +} + +const WorldProvider = new Hooks(Roact)(WorldProviderWithoutHooks) + +export default WorldProvider + +const WorldContext = createContext(undefined) + +export const useWorldContext = ({ useContext }: CoreHooks): WorldContextValue => { const context = useContext(WorldContext) if (!context) { error("useContext must be called within a Provider") diff --git a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx index e1a2b1b..a4f0863 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/hotbar.tsx @@ -1,7 +1,8 @@ import Roact from "@rbxts/roact" +import Hooks from "@rbxts/roact-hooks" import Slot from "./slot" import { useWorldContext } from "../contexts/worldContext" -import Padding from "ReplicatedStorage/ui/components/padding" +import Padding from "ReplicatedStorage/ui/padding" import { StarterGui } from "@rbxts/services" interface hotbarProps extends Roact.JsxInstanceProperties { @@ -9,12 +10,13 @@ interface hotbarProps extends Roact.JsxInstanceProperties { Change?: Roact.JsxInstanceChangeEvents } +// no fuck off StarterGui.SetCoreGuiEnabled(Enum.CoreGuiType.Backpack, false) -function hotbar(props: hotbarProps): Roact.Element { +const hotbar: Hooks.FC = (props, hooks) => { const spreadableProps = { ...props } as Partial - const { clientState } = useWorldContext() + const { clientState } = useWorldContext(hooks) const keycodes: Enum.KeyCode[] = [ Enum.KeyCode.One, @@ -28,18 +30,6 @@ function hotbar(props: hotbarProps): Roact.Element { Enum.KeyCode.Nine ] - const items: Roact.Element[] = [] - clientState.backpack.GetChildren().forEach((tool, i) => { - items.push( - - ) - }) - return ( - {...items} + { + clientState.backpack.GetChildren().map((tool, i) => ( + + )) + } ) } -export default hotbar \ No newline at end of file +export default new Hooks(Roact)(hotbar) \ 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 26c7504..926d8d0 100644 --- a/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx +++ b/src/StarterPlayer/StarterPlayerScripts/ui/hotbar/slot.tsx @@ -1,8 +1,8 @@ import Roact from "@rbxts/roact" -import { useEffect } from "@rbxts/roact-hooked" +import Hooks from "@rbxts/roact-hooks" import { useWorldContext } from "../contexts/worldContext" import { ContextActionService, HttpService } from "@rbxts/services" -import Padding from "ReplicatedStorage/ui/components/padding" +import Padding from "ReplicatedStorage/ui/padding" interface slotProps extends Roact.JsxInstanceProperties { index: number @@ -13,22 +13,21 @@ interface slotProps extends Roact.JsxInstanceProperties { Change?: Roact.JsxInstanceChangeEvents } -function slot(props: slotProps): Roact.Element { +const slot: Hooks.FC = (props, hooks) => { const { index, keycode, tool } = props + const { useEffect } = hooks const spreadableProps = { ...props } as Partial delete spreadableProps.index delete spreadableProps.keycode delete spreadableProps.tool - const { clientState } = useWorldContext() + const { clientState } = useWorldContext(hooks) const handleActivated = (): void => { - if (tool.Parent !== clientState.character) { - clientState.character.Humanoid.EquipTool(tool) - } else { - clientState.character.Humanoid.UnequipTools() - } + tool.Parent !== clientState.character + ? clientState.character.Humanoid.EquipTool(tool) + : clientState.character.Humanoid.UnequipTools() } // TODO: maybe opt this into our system for inputs? @@ -47,9 +46,7 @@ function slot(props: slotProps): Roact.Element { return ( { Event?: Roact.JsxInstanceEvents Change?: Roact.JsxInstanceChangeEvents } -export default function main(props: mainProps): Roact.Element { +const main: Hooks.FC = (props, _hooks) => { const spreadableProps = { ...props } as Partial - withHookDetection(Roact) - return ( ) -} \ No newline at end of file +} + +export default new Hooks(Roact)(main) \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d3ca8d5..22b4ad5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -113,25 +113,15 @@ resolved "https://registry.yarnpkg.com/@rbxts/plasma/-/plasma-0.4.1-ts.1.tgz#3d8db367c3220e6b6953cdddbf8af9f087165392" integrity sha512-RhLkC3GQW0KeyqjFwvOUbHhsIJOHmXg+BhcKLp0IgUDVgC5GktShi3zmW6GQ319yod+RlUDG1XHjOnP3Omo4bA== -"@rbxts/reflex@^4.2.0": - version "4.2.0" - resolved "https://registry.yarnpkg.com/@rbxts/reflex/-/reflex-4.2.0.tgz#10d064de5e293f1aea429846d4d8739821cb575a" - integrity sha512-zkoffeK86feq1cX3+Dd31UCVplI18L7PiD7MI2HRij4wz4jGzqEbpiE9fJT2g5DLxEcNvfgZZEHvxlM2IT7xTw== - "@rbxts/rewire@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@rbxts/rewire/-/rewire-0.3.0.tgz#47f0cd651fe405cf418936799d2a4dac6b1bb7ce" integrity sha512-wChhGZ3kEkEsMK9ZuwKpwRsC7OGVZlvxrYMR3beFgCIPXE58JKLziBLkDACmd709XCCEmsMAqv9HMCMhSTD08Q== -"@rbxts/roact-hooked@^2.6.0": - version "2.6.0" - resolved "https://registry.yarnpkg.com/@rbxts/roact-hooked/-/roact-hooked-2.6.0.tgz#cbe3e244e1d52d879083c62b6662c4d082c6d30b" - integrity sha512-2lVbmKVregnXjshCDWuU05mv7XphxBPzeqSXDZmGh9cLqR+9DihEzsGGQrorU5VbsoL//4cOhYEAt3lTyo3dAw== - -"@rbxts/roact-reflex@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@rbxts/roact-reflex/-/roact-reflex-2.1.0.tgz#fb0eebcccdaf7cfe1c030ed26ce119c4e8994780" - integrity sha512-2RKp9P4MQn2rxK6xk0lcaAZNlD9+X2zLvqkueFSuW4HvgrX3wWtk4RGKjRzRu+pvnszIhdgJpsUZT+lyTObsSQ== +"@rbxts/roact-hooks@^0.4.1-ts.3": + version "0.4.1-ts.3" + resolved "https://registry.yarnpkg.com/@rbxts/roact-hooks/-/roact-hooks-0.4.1-ts.3.tgz#af9b549f5912bd50640c2887aa698e21154fadd3" + integrity sha512-+8A42hDsSwZNnXDe1XIRpJhjSpxFvkBa8nB5QM1zuL2q5G6h6SGp7augY6vp6euze/gH4/Laho07PUM8bz0RKQ== "@rbxts/roact@^1.4.4-ts.0": version "1.4.4-ts.0"