Merge pull request #5 from shr0x/0.0.4

0.0.4
shr0x · May 28, 2024 · fc647c5 · fc647c5
2 parents e7f8483 + 0babd04
commit fc647c5
Show file tree

Hide file tree

Showing 14 changed files with 282 additions and 339 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
-# RAGEMP RP FRAMEWORK
+# RAGEMP RP GAMEMODE
 
-A RAGE MULTIPLAYER Roleplay framework.
+A RAGE MULTIPLAYER Roleplay game mode.
 
 # Introduction
 >
@@ -14,22 +14,24 @@ This game mode is still a work in progress, plenty features are planned to be ad
 | Client Side| Server Side | Frontend |
 |----------|----------|----------|
 | [Webpack](https://webpack.js.org/) | [Typescript](https://www.typescriptlang.org/)     | [React](https://react.dev/)    |
-| [Typescript](https://www.typescriptlang.org/) | [PostgreSQL](https://www.postgresql.org/)    | [React Rewire](https://www.npmjs.com/package/react-app-rewired)    |
+| [Typescript](https://www.typescriptlang.org/) | [PostgreSQL](https://www.postgresql.org/)    | [Vite](https://vitejs.dev/)    |
 |    | [TypeORM](https://typeorm.io/)    | [MobX](https://mobx.js.org/README.html)    |
 |    | [Webpack](https://webpack.js.org/)    | [Typescript](https://www.typescriptlang.org/)   |
 
 
 >
 # Credits<br>
-Thanks to rootcause for [Command Registry](https://rage.mp/files/file/375-improved-commands/)<br>
-Thanks to Morbo for [NoClip](https://rage.mp/files/file/163-noclip/)
+Thanks to rootcause for [Command Registry](https://rage.mp/files/file/375-improved-commands/) & [v-bettertorso](https://github.com/root-cause/v-besttorso)<br>
 
 # Current Features
  - Account system (Login/Register).
  - Character System (3 Available slots to create)
+ - Inventory system.
+ - HUD & Player data.
  - Notification system
  - Chat System
  - Command system
+ - Radial Interactive Menu
  #
 
 # Getting started with server development

diff --git a/client_packages/index.js b/client_packages/index.js
@@ -1,6 +1,5 @@
 try {
     require('./app');
-    require('./noclip')
 } catch (err) {
-    mp.game.ui.notification.show(JSON.stringify(err));
+    mp.console.logError(JSON.stringify(err));
 }
diff --git a/client_packages/noclip/index.js b/client_packages/noclip/index.js
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -29,7 +29,6 @@ const App: FC = () => {
     const [page, setPage] = useState<string>("");
 
     initializeEvents({ chatStore, playerStore, hudStore, inventoryStore });
-
     useEffect(() => {
         EventManager.addHandler("system", "setPage", setPage);
         EventManager.addHandler("notify", "show", (data: { type: any; message: string; skin: any }) => Notification.show(data.type, data.message, data.skin));

diff --git a/frontend/src/events/Chat.event.ts b/frontend/src/events/Chat.event.ts
@@ -5,6 +5,7 @@ import ChatStore from "../stores/Chat.store";
 export const InitChatEvents = (chatStore: ChatStore) => {
     return useEffect(() => {
         EventManager.addHandler("chat", "setActive", (data: boolean) => chatStore.setActive(data));
+        EventManager.addHandler("chat", "setCommands", (data: string[]) => chatStore.fetchCommandList(data));
 
         EventManager.stopAddingHandlers("chat");
         return () => EventManager.removeTargetHandlers("chat");

diff --git a/frontend/src/pages/hud/Chat/Chat.tsx b/frontend/src/pages/hud/Chat/Chat.tsx
@@ -3,7 +3,6 @@ import { observer } from "mobx-react-lite";
 import EventManager from "utils/EventManager.util";
 import ChatInput from "./components/ChatInput";
 import ChatStore from "store/Chat.store";
-
 import style from "./chat.module.scss";
 
 let chatHideTimeout: NodeJS.Timeout | null = null;

diff --git a/frontend/src/pages/hud/Chat/chat.module.scss b/frontend/src/pages/hud/Chat/chat.module.scss
@@ -3,8 +3,7 @@
     top: 0;
     left: 0;
     z-index: 0;
-    width: 55.55555555555555vh;
-    // border: 1px solid black;
+    width: 68vh;
 
     .content {
         height: 27.777777777777775vh;
@@ -26,12 +25,13 @@
 
         .message {
             width: 100%;
-            text-shadow: 0 0 4px black;
-            font-family: "TT Norms Medium", sans-serif;
+            font-family: Myriad Pro, Open Sans, sans-serif;
             color: #fff;
             font-size: 1.48888889vh;
             line-height: 2.222222222222222vh;
             word-wrap: break-word;
+            font-weight: 700;
+            text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black;
         }
 
     }

diff --git a/frontend/src/pages/hud/Chat/components/ChatInput.tsx b/frontend/src/pages/hud/Chat/components/ChatInput.tsx
@@ -9,12 +9,14 @@ import style from "./input.module.scss";
 const ChatInput: FC<{ store: ChatStore; chatFocusFunc: any; chatBlur: any }> = ({ store, chatFocusFunc, chatBlur }) => {
     const [isFocused, setFocused] = useState(false),
         [selection, setSelection] = useState<{ start: number; end: number }>({ start: 0, end: 0 }),
-        [inputText, setInputText] = useState("");
+        [inputText, setInputText] = useState(""),
+        [suggestedCommand, setSuggestedCommand] = useState("");
 
     const input = useRef<HTMLInputElement>(null);
 
     useEffect(() => {
-        const chatAPI = {
+        //@ts-ignore
+        window.chatAPI = {
             clear: () => {
                 store.messages = [];
             },
@@ -35,18 +37,22 @@ const ChatInput: FC<{ store: ChatStore; chatFocusFunc: any; chatBlur: any }> = (
         //@ts-ignore
         if (typeof mp !== "undefined") {
             const api: Record<string, Function> = {
-                "chat:push": chatAPI.push,
-                "chat:clear": chatAPI.clear,
-                "chat:activate": chatAPI.activate,
-                "chat:show": chatAPI.show
+                //@ts-ignore
+                "chat:push": window.chatAPI.push,
+                //@ts-ignore
+                "chat:clear": window.chatAPI.clear,
+                //@ts-ignore
+                "chat:activate": window.chatAPI.activate,
+                //@ts-ignore
+                "chat:show": window.chatAPI.show
             };
 
             for (const fn in api) {
                 //@ts-ignore
                 mp.events.add(fn, api[fn]);
             }
         }
-    }, []);
+    }, [store]);
 
     useEffect(() => {
         EventManager.addHandler("chat", "setTextInput", (text: string) => setInputText(text));
@@ -60,12 +66,6 @@ const ChatInput: FC<{ store: ChatStore; chatFocusFunc: any; chatBlur: any }> = (
             store.updateLastMessages(String(inputText));
             setInputText("");
         });
-
-        EventManager.addHandler("chat", "command", () => {
-            setFocused(true);
-            input.current?.focus();
-            setInputText(`/`);
-        });
     }, [inputText, store]);
 
     useEffect(() => {
@@ -97,7 +97,7 @@ const ChatInput: FC<{ store: ChatStore; chatFocusFunc: any; chatBlur: any }> = (
             store.historyCounter = -1;
             setFocused(false);
         },
-        [] //eslint-disable-line
+        [isFocused, store]
     );
 
     useEffect(() => {
@@ -136,13 +136,33 @@ const ChatInput: FC<{ store: ChatStore; chatFocusFunc: any; chatBlur: any }> = (
                     setTimeout(() => setSelection({ start: start + store.lastMessages[counter].length, end: end + store.lastMessages[counter].length }), 2);
                     return;
                 }
+                case "Tab": {
+                    if (suggestedCommand) {
+                        setInputText(suggestedCommand);
+                        setSelection({ start: suggestedCommand.length, end: suggestedCommand.length });
+                        event.preventDefault();
+                    }
+                    return;
+                }
                 default:
                     return;
             }
         },
-        [store.lastMessages, store.historyCounter, inputText, isFocused]
+        [store.lastMessages, store.historyCounter, inputText, isFocused, suggestedCommand]
     );
 
+    const handleInputChange = useCallback((e: { target: { value: any } }) => {
+        const value = e.target.value;
+        setInputText(value);
+
+        if (value.startsWith("/") && value.length > 3) {
+            const match = store.commandList.find((cmd) => cmd.startsWith(value));
+            setSuggestedCommand(match || "");
+        } else {
+            setSuggestedCommand("");
+        }
+    }, []);
+
     useEffect(() => {
         document.addEventListener("keydown", handleKeyPress);
         return () => document.removeEventListener("keydown", handleKeyPress);
@@ -162,10 +182,16 @@ const ChatInput: FC<{ store: ChatStore; chatFocusFunc: any; chatBlur: any }> = (
                         chatFocusFunc();
                     }}
                     onBlur={() => chatBlur()}
-                    onChange={(e) => setInputText(e.target.value)}
+                    onChange={handleInputChange}
                     maxLength={200}
                     tabIndex={-1}
                 />
+                {suggestedCommand && (
+                    <div className={style.suggestion}>
+                        <span className={style.suggestionHighlight}>{inputText}</span>
+                        <span className={style.suggestionRest}>{suggestedCommand.slice(inputText.length)}</span>
+                    </div>
+                )}
             </div>
         </div>
     );

diff --git a/frontend/src/pages/hud/Chat/components/input.module.scss b/frontend/src/pages/hud/Chat/components/input.module.scss
@@ -19,7 +19,7 @@
         border-radius: 0.46296296296296297vh;
 
         .input {
-            width: 90%;
+            width: 100%;
             border: none;
             outline: none;
             background: none;

diff --git a/frontend/src/stores/CharCreator.store.ts b/frontend/src/stores/CharCreator.store.ts
@@ -31,35 +31,28 @@ const defaultData = {
 };
 
 export default class CreatorStore {
-    data = defaultData;
+    @observable
+    data = observable.object(defaultData);
 
+    @observable
     lastFather = 0;
+
+    @observable
     lastMother = 0;
 
     constructor() {
-        makeObservable(this, {
-            data: observable,
-            lastFather: observable,
-            lastMother: observable,
-
-            fetchData: action.bound,
-            resetData: action.bound
-        });
+        makeObservable(this);
     }
 
+    @action.bound
     fetchData(data: any) {
         return (this.data = data);
     }
 
+    @action.bound
     resetData() {
         this.data = defaultData;
         this.lastFather = 0;
         this.lastMother = 0;
     }
-
-    destroy() {
-        this.data = defaultData;
-        this.lastFather = 0;
-        this.lastMother = 0;
-    }
 }