Search the Community

I have put together a example repository on how to use React with Redux and Typescript as UI (CEF). I was looking for something like this and the guides I could find felt outdated, not using current Rage APIs etc. https://github.com/Raademar/rage-react-starter Sending data from the Client to the UI (CEF) this.browser = mp.browsers.new("package://cef/index.html#"); this.browser.execute( `window.store.dispatch({type: "ADD", payload: ${data}})`) In order for the Redux store to be in the window scope we assign it like this in our root index.tsx import store from "./store" window["store"] = store After this point we're on "normal" React roads again. import { useAppSelector, useAppDispatch } from "../../store/hooks" const texts = useAppSelector(state => state.text.texts) const dispatch = useAppDispatch() const handleSubmit = () => { dispatch({ type: "ADD", payload: "Cool input here" }) } <div> {texts.map((text, index) => ( <p key={index}>{text}</p> ))} </div> Sending data from the UI to the Client and Server // React const handleSubmit = () => { mp.trigger("CallServerEvent", "Login", JSON.stringify(loginInfo)) } <form onSubmit={handleSubmit}> ... </form> // Client mp.events.add({ "CallServerEvent": (event: string, data: string) => { mp.events.callRemote(event, data); }, ... )} // Server mp.events.add({ "Login": (player: PlayerMp, data: string) => { ... Handle login }, }) Handling routing On the UI side we use React-Router with the HashRouter import { HashRouter, Route, Switch } from "react-router-dom" import { LoginScreen, CharacterSelection } from "./pages" const Routes = () => { return ( <HashRouter> <Switch> <Route path="/" exact component={HUD} /> <Route path="/login" component={LoginScreen} /> <Route path="/characterselection" component={CharacterSelection} /> </Switch> </HashRouter> ) } The routing is controlled from the Server/Client side const path = `location.hash = "#${url}"`; this.browser.execute(path); Building and bundling This example uses Tailwind for styling (Login page) and included are the minimum required setup to use Tailwind with React. This is not needed and can be replaced with any other styling solution. Craco can also be removed if Tailwind is not used. Craco The react-scripts for start, build and test are replaced by craco to allow for postcss handling. "start": "craco start", "build": "craco build", "test": "craco test", Gulp This example uses Gulp to bundle the built Javascript files to inline Javascript located in the build/index.html Example on how I handle bundling and then moving the build folder to the right location. // package.json in RAGE.mp server-files root "gulp": "cd app/react-cef && npx gulp", "move-cef": "cp -r app/react-cef/build client_packages/cef/"

Я пишу свой проект на TS и использую для интерфейсов VueCLI, что мне позволяет делать очень функциональные и реактивные UI. Я настроил там VueRouter для маршрутизации своих страниц. Например что бы показать планшет LSPD, я указываю следующий адрес package://cef/index.html#/faction/lspd/tablet. Если хочу показать страницу авторизации, то - package://cef/index.html#/auth/login. Как вы могли заметить, я работаю только с одним интерфейсом и одним экземпляром браузера, в котором много разных интерфейсов, для различных игровых процессов. Если я хочу показывать какие то интерфейсы, которые будут доступны из любой страницы, например чат и спидометр, то я такие компоненты размещаю в корневом компоненте Vue (App.vue). Что я видел в на форумах и в слитых игровых проектах с исходным кодом... Там обычно все пишется всё на классическом JS без каких либо препроцессоров или фреймворков, в интерфейсах встречает библиотека JQuery, кто-то конечно использовал React, что не может, не радовать. Везде каждый интерфейс в свой папке и нет никакой маршрутизации, поскольку она там не нужна. Если по какой то логике нужно показать другой интерфейс, то в существующем браузере меняю адрес, либо же, например для чата создают отдельный экземпляр и там уже отображают чат. В последних версиях RageMp вовсе сделали для браузера функцию makeAsChat, которая позволяет подменить чат сервера на ваш. Собственно со зависимые вопросы: 1. Правильное решение использовать несколько экземпляров BrowserMp для отображения различных интересов, в своём браузере? 2. Или может быть в действительности достаточно одного браузера, который откроет полноценный сайт с маршрутизацией по страницам и будет показывать нам чат, спидометр, меню игрок и другие вещи? English (interpreter)

Hey there, folks! I recently asked myself, how I can retrieve the current FPS of a client, because there is no inbuild function at all. Here's a small snippet for retrieving the current FPS in TypeScript (if you want to use it in JS just compile it with a TS transcompiler or adapt it 😐). /* Copyright 2019 Vincent Heins/TheMysteriousVincent Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ class FPSCalculator { private fps = 0; constructor() { let lastFrameCount = this.getFrameCount(); setInterval(() => { this.fps = this.getFrameCount() - lastFrameCount; lastFrameCount = this.getFrameCount(); }, 1000); } public get(): number { return this.fps; } private getFrameCount(): number { return mp.game.invoke('0xFC8202EFC642E6F2') as number; // '0xFC8202EFC642E6F2' is a method of GTA5 which returns the frame count since the game was started (see http://www.dev-c.com/nativedb/func/info/fc8202efc642e6f2 for ref.) } } export const FPS = new FPSCalculator(); Or, if you prefer a Gist: https://gist.github.com/TheMysteriousVincent/42a4b00b4c34b6dd27423e48bd5c6c52 Or additionally, if you prefer the download section of RageMP: Sincerely, ~Vincent

The command&events decorators (@command, @commandable, @event, @eventable) Information Installation Disadvantages Examples Sources Event decorator 1. Information: There is a snippet which helps to registry any commands/events to Rage API with the simple interface by using decorators. Library: rage-decorators [github] [npm-package] If you're using typescript, make sure there two options (experimentalDecorators, emitDecoratorMetadata) are true in your tsconfig.json: { "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true }, } 2. Installation: Via npm: $ npm i --save rage-decorators Via yarn: $ yarn add rage-decorators 3. Disadvantages: Disadvantage 1: the snippet requires rage-decorators package 4. Examples: Simple example: My example of command list: 5. Source: Sources is now allowed on github repository and as npm package: https://github.com/READYTOMASSACRE/rage-decorators the source of decorators.ts (server-side only, for supporting events, client-side usage npm package) the source of decorators.js (server-side only, for supporting events, client-side usage npm package) 6. Event decorator: Event decorator is now avaliable in npm package, here an usaging example: import { eventable, event } from 'rage-decorators' @eventable() class Foo { @event("playerJoin") playerJoin(player: PlayerMp): void { console.log(`Player[${player.id}]${player.name} has joined to the server`) } }

The print.ts snippet Information Problem Disadvantages Examples Sources 1. Information: Since 1.0 we have an object mp.console which helps us to send any information to the console (F11) There it's an interface interface ConsoleMp { logInfo(message: string, save?: boolean, saveAsync?: boolean): void; logWarning(message: string, save?: boolean, saveAsync?: boolean): void; logError(message: string, save?: boolean, saveAsync?: boolean): void; logFatal(message: string, save?: boolean, saveAsync?: boolean): void; clear(): void; reset(): void; verbosity: RageEnums.ConsoleVerbosity | string; } 2. Problem: We couldn't pass two or more params into the log functions and the first argument is waiting the string type. Snippet is extending usage of that interface by passing params like the function console.log. 3. Disadvantages: Disadvantage 1: this snippet is skipping two params: [save, saveAsync] which allows you to save logdata to ragemp folder. Disadvantage 2: snippet requires npm package: [util] $ npm i --save util // or $ yarn add util 4. Examples: Lets look to usage of the snippet print.ts index.ts import { print } from './print' // print helps you to send message for log information in way like this // and also you can pass any type to this function instead of logInfo which is waiting string argument print.info(mp.players.local, "any", "parameter", "you", ...["want", "just", "simple", { foo: 'Bar' }]) // instead of usaging the mp.console mp.console.logInfo(JSON.stringify(mp.players.local)) mp.console.logInfo("any") mp.console.logInfo("parameter") mp.console.logInfo("you") mp.console.logInfo(["want", "just", "simple"].join("\n")) 5. Sources: Snippet print.ts (typescript) Snippet print.js (javascript) In-game screenshot:

How i can call typescript function in selected component from client-side? ExecuteJs not found functions, because angular uses scopes.

Would anyone be able to help me with integrating NativeUI menu. I have tried but I just get an error. My setup is setup using typescript. I seem to get an error saying the following `TypeError: Point is not a constructor` import NativeUI from '../../libs/nativeui/index' const Menu = NativeUI.Menu; const UIMenuItem = NativeUI.UIMenuItem; const UIMenuListItem = NativeUI.UIMenuListItem; const UIMenuCheckboxItem = NativeUI.UIMenuCheckboxItem; const UIMenuSliderItem = NativeUI.UIMenuSliderItem; const BadgeStyle = NativeUI.BadgeStyle; const Point = NativeUI.Point; const ItemsCollection = NativeUI.ItemsCollection; const Color = NativeUI.Color; const ListItem = NativeUI.ListItem; mp.events.add({ 'player-creator': () => { init() } }) function init() { const ui = new Menu("Test UI", "Test UI Subtitle", new Point(50, 50)); ui.AddItem(new UIMenuListItem( "List Item", "Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.", new ItemsCollection(["Item 1", "Item 2", "Item 3"]) )); mp.keys.bind(0x71, false, () => { if (ui.Visible) ui.Close(); else ui.Open(); }); }

Доброго времени суток! Требуются дополнительные разработчики для запуска крупного проекта в GTA V (Rage MP). Требуемые специалисты : - Программист. Основные требования: Опыт работы с Rage MP, знание нативного JS для написания качественного мода, а также Typescript, Vue.js, SQL, Git, Jira. Знание RP и его основных механик, усидчивость, ответственность, умение находить и фиксить баги, умение работать с ТЗ. Приветствуется знание html, css; ВАЖНО: Если вы уже работаете в крупном проекте и вам не нравятся условия работы - также пишите! Возможно именно у нас для вас будут созданы самые благоприятные условия Требуются разработчики с хорошим запасом знаний, должным количеством времени, стрессоустойчивость, энтузиазмом и умением работать в команде! Планируется долгосрочное сотрудничество! Условия: - З/П (по факту/оклад); - Адекватное техническое задание; - При необходимости составление договора; Если вы хотите работать с нами, напишите!https://vk.com/timich_t

Всем привет, если кому-то интересно и кто хочет поучаствовать в разработке небольшого фреймворка, то прошу https://github.com/panarama360/rager Хотелось бы увидеть или услышать мнения тех кто имеет достаточный опыт в разработке под rage, может что-то не хватает или наоборот. Может кто-то и перейдет на typescript увидев декораторы и типы)

Hi, guys! I have one question. I would like to enable a language Typescript for my client-side. How I can do it? Wiki page don't help me: https://wiki.rage.mp/index.php?title=Using_Typescript (because there is an instruction for setting up vscode, but I want to use this language in my developed) Thanks for the answer!

Hi guys! Please tell me how to know. Can I start server-side development in C#? And in parallel to develop the client-side in JavaScript language? I want to use 2 languages simultaneously for development. Each side has its own. How can I implement this?

Всем привет! Пожалуйста, подскажите кто знает. Могу ли я начать разработку на стороне сервера на языке C#? И параллельно разрабатывать клиент на языке JavaScript? Я хочу использовать одновременно 2 языка для разработки. На каждой стороне свой. Как я могу это реализовать?

Hey guys! Originally wrote the code on the client in C#. Unfortunately it does not support some of the features that I need. Therefore, I decided to transfer the client's side to the language of JS. But the problem arose at the very beginning of the journey. I opened the tutorial (https://wiki.rage.mp/index.php?title=Getting_Started_with_Client-side) and did everything as written there. Then I started the server and joined it and I realized that nothing works. Based on the lesson materials, I have to get a chat message. But nothing works. I would like to appeal to the multiplayer community. Can you help me solve this problem?

Can someone explain how I can import a resource (NativeUI) to client. My current setup: I have been writing my gamemode using a typescript boiler plate (https://github.com/MarkCavalli/rage-server-start-template) So files in app folder client get compliled to client_packages and same for server into packages However when I try to require a third party script (NativeUI) I get an error TypeError Point is not a constructor I'm importing it into the client via: const NativeUi = require('../libs/nativeui.js') mp.events.add("PlayerJoin", () => { const Menu = NativeUI.Menu; const Point = NativeUI.Point; const UIMenuListItem = NativeUI.UIMenuListItem; const ItemsCollection = NativeUI.ItemsCollection; const ui = new Menu("Test UI", "Test UI Subtitle", new Point(50, 50)); ui.AddItem(new UIMenuListItem( "List Item", "Fugiat pariatur consectetur ex duis magna nostrud et dolor laboris est do pariatur amet sint.", new ItemsCollection(["Item 1", "Item 2", "Item 3"]) )); }) Can anyone help me? I'm completely stuck for ideas on how I can get this to work.

Requirements Rage MP server files NodeJS VS Code (or preferred IDE/text editor) Basic typescript knowledge typescript in 5 minutes typescript overview Basic js/nodeJs knowledge Rage:MP TypeScript type definition for Server-side (credit: CocaColaBear) Introduction We are going to setup a simple rage mp server using typescript Getting Started Install typescript globally > npm install -g typescript Verify that you installed typescript correctly > tsc -v //version 2.9.2 (or whatever version you installed) Download Rage MP Typescript type files from: https://github.com/CocaColaBear/types-ragemp-s Place the the following files inside server-files folder index.d.ts vehicle_hashes.d.ts ped_hashes.d.ts weapon_hashes.d.ts enums.d.ts Setting Up Environment Go inside server-files and initiate a new npm project > npm init keep pressing enter until it asks "is this ok" and type yes or press enter. Now you should have a package.json in your server-files folder. Next install typescript dev dependencies > npm install --save-dev typescript After the install is complete, open your package.json and you should see typescript under devDependencies Next create a tsconfig.json file by running the following command > tsc --init You should now have a tsconfig.json file in your server-files directory. Open tsconfig.json and replace with: { "compileOnSave": true, "compilerOptions": { /* Basic Options */ "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */ "module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "resolveJsonModule": true, /* needed to read json*/ "esModuleInterop": true, /* needed to read json*/ "outDir": "./packages/mygamemode", /* Redirect output structure to the directory. */ "strict": true /* Enable all strict type-checking options. */ }, "files": [ "index.d.ts", "vehicle_hashes.d.ts", "weapon_hashes.d.ts", "ped_hashes.d.ts", "enums.d.ts" ], "include": [ "src/**/*" ], "exclude": [ "node_modules", "**/*.spec.ts" ] } Next create a new folder called "src" inside server-files Inside of src folder create another folder called "mygamemode" or whatever your gamemode will be. Note*: make sure your "outDir": "./packages/[GAMEMODENAMEHERE]" matches your gamemode folder name in tsconfig.json Within the mygamemode create a typescript file called index.ts(this will be your initial index.js file) mygamemode/index.ts import './commands'; Next create a folder within mygamemode called commands and inside this new commands folder create a new typescript file called index.ts mygamemode/commands/index.ts function setArmour(player: PlayerMp) { player.armour = 100; } mp.events.addCommand('armour', setArmour); Compiling Now we will compile the typescript files to output to packages/mygamemode open command and type > tsc -w what this command does is it compiles your whole project first and then watches for all .ts file changes and compiles/outputs them to packages/mygamemode which is specified in the tsconfig.json. Note*: Whenever you edit a .ts file, the typescript watch (tsc -w) will automatically compile the files to packages/mygamemode. Finally run your server.exe and enjoy coding in typescript! GitHub link: https://github.com/tameemi/ragemp-typescript