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/"

This is 100% a client side issue, and absolutely nothing I do solved it. I've tried every available driver for my graphics card at this point, I've reinstalled RAGE every single time because if I don't it doesn't start up properly. I have fully deleted GTA itself, Rage as well, downloaded both fresh and it STILL hasn't worked. I even dug out my old 2016 1080p monitor just to see if that was the issue, with no luck. I've just spent a bunch of money on a server I liked and within the day this bug happened and it's game breaking. Please helpppppp.

Hello everyone. I have the following kind of problem. When I log into the server I'm developing, I should have a browser with authorization, but it doesn't find the index.html file. Some time ago, it worked. After checking the alert() in the script, it is revealed that the file actually exists and is being executed. Also, the user interface appears for a moment. What can be wrong? I'm use Vue framework for UI.

Good day to all! I recently started developing my server and decided to try doing all UI on React. Today I want to share how to set up a project for convenient work with this framework! I loaded the finished example on github: https://github.com/Mispon/rage-mp-react-ui There are also collected files in the archive server-files.rar for quick test. And now in order: First you need to initialize the project by running the command npm init Then install all the necessary packages. That is my packege.json file { "name": "rage-mp-react-ui", "version": "1.0.0", "description": "Example repo to explain how use react in rage mp servers", "main": "index.js", "scripts": { "start": "npm run dev", "dev": "set NODE_ENV=development && webpack", "prod": "set NODE_ENV=production && webpack" }, "repository": { "type": "git", "url": "git+https://github.com/Mispon/rage-mp-react-ui.git" }, "keywords": [ "rage-mp", "react", "rage", "mispon", "gta5", "gtav" ], "author": "Mispon", "license": "ISC", "bugs": { "url": "https://github.com/Mispon/rage-mp-react-ui/issues" }, "homepage": "https://github.com/Mispon/rage-mp-react-ui#readme", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^1.0.0", "node-sass": "^4.9.3", "sass-loader": "^7.1.0", "style-loader": "^0.23.0", "webpack": "^4.20.2", "webpack-cli": "^3.1.2" }, "dependencies": { "react": "^16.5.2", "react-dom": "^16.5.2" } } You can do it by command npm i packetname --save (or --save-dev if packet will use only in developing, like babel-core and etc). Next you need to create webpack.config.js and paste the following settings into it: const webpack = require('webpack') const path = require('path') let NODE_ENV = 'production' if (process.env.NODE_ENV) { NODE_ENV = process.env.NODE_ENV.replace(/^\s+|\s+$/g, "") } module.exports = { entry: { index: './index.js', app: './ui/app/app.js' }, output: { path: path.resolve(__dirname, 'build'), filename: '[name].js' }, watch: NODE_ENV == 'development', module: { rules: [{ test: /\.js$/, exclude: [/node_modules/], loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { test: /\.scss$/, use: ["style-loader", "css-loader", "sass-loader"] } ] }, resolve: { extensions: ['.js', '.json'] }, optimization: { minimize: true }, mode: NODE_ENV, plugins: [ new webpack.EnvironmentPlugin('NODE_ENV') ] } I will not go into details, there is documentation for this. In short, the webpack will collect all the files of our application into one (or several) ready-made files (and styles too!). Then create clients index.js file, a separate folder for the UI with single index.html, app.js, bridge.js and some style file. In my case I use .scss. After you got something like that: In index.js add simple code for test how events works: let browser mp.events.add('guiReady', () => { browser = mp.browsers.new('package://ui/index.html') }) // Handle event from server and send data to react app mp.events.add('onMessageFromServer', (value) => { browser.execute(`trigger('onMessage', '${value}')`) }) // Handle event from react app mp.events.add('showUrl', (url) => { mp.gui.chat.push(url) }) // F12 - trigger cursor mp.keys.bind(0x7B, true, () => { let state = !mp.gui.cursor.visible mp.gui.cursor.show(state, state) }) In app.js we'll add our example react component and render it in index.html: import '../styles/app.scss' import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { constructor(props) { super(props) this.state = { time: new Date(), message: 'default message' } } componentDidMount() { EventManager.addHandler('onMessage', this.onMessage.bind(this)) this.timerId = setInterval(() => { this.setState({time: new Date()}) }, 1000) } componentWillUnmount() { clearInterval(this.timerId) EventManager.removeHandler('onMessage', this.onMessage) } onMessage(value) { this.setState({message: value}) } // send current url to client click() { let currentUrl = window.location.pathname mp.trigger('showUrl', currentUrl) } render() { return( <div className="app"> <h1>Make UI on React!</h1> <p className="current-time">{this.state.time.toLocaleTimeString()}</p> <p className="message">{this.state.message}</p> <button className="send-button" onClick={this.click}>Send</button> </div> ) } } ReactDOM.render(<App />, document.getElementById('root')) Here everything is as in normal work with the react. At the very beginning we connect our styles. You can define them to your taste. Next, create the component, define the default state, write the HTML code that will be rendered in the browser, and add the necessary handlers in the component. But there is one very important point! In the componentDidMount method, using the EventManager which is global space, we subscribe to the event that will be passed from the client to our react-application. At its core, EventManager is a bridge between client multiplayer code and our UI. Let's define EventManager in our bridge.js: // Global variable for describe on events from react components var EventManager = { events: {}, addHandler: function(eventName, handler) { if (eventName in this.events) { this.events[eventName].push(handler); } else { this.events[eventName] = [handler]; } }, removeHandler: function(eventName, handler) { if (eventName in this.events) { var index = this.events[eventName].indexOf(handler); this.events[eventName].splice(index, 1); } } } // Handle events from client function trigger(eventName, args) { var handlers = EventManager.events[eventName]; handlers.forEach(handler => handler(JSON.parse(args))); } The trigger function serves as the only point of access to our UI from the client and delegates execution to the accessible handler by the name of the event. That is, in any component we can create a handler, subscribe to an event interesting to us and update its state depending on what happens in the game. In client code we will only use browser.execute(`trigger('eventName')`). In addition as simple as possible index.html and my app.scss: <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Don't forget to change paths after copy in server packages --> <script src="app/bridge.js" defer></script> <script src="../build/app.js" defer></script> </head> <body> <div id="root"></div> </body> </html> .app { h1 { text-align: center; font-weight: bold; padding-top: 2vh; } .message { text-align: center; font-size: 2vw; padding-top: 2vh; } .current-time { display: block; position: absolute; right: 1vw; bottom: 0; } .send-button { display: block; width: 100px; height: 50px; margin: 15% auto; outline: none; } position: relative; width: 30%; height: 40vh; margin: 20vh auto; border-radius: 10px; box-shadow: 1px 1px 2px black; background-color: black; color: white; } Now you can run the npm start or npm run dev in the root directory to build the project. Check full example usage on my github, link above. Hope it's help for someone. Be good in developing! Mispon (discord: Mispon#8498)

Я пишу свой проект на 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 everyone, I´m completely new to all that server and Scripting stuff. Yesterday I tried to create an interaction menu with that NativeUI . When I finally managed to load that NativeUI stuff into my Server files and I tried to start the server, it said: Error: Error: Cannot find module 'nativeui' I´m sittng here for about 20 hours, but I really don´t know, what I´m doing wrong! I don´t even know how to learn that stuff, because I did´t find anything on the internet. Maybe anyone can help me 😞

Hey everyone, now i publish my register login ui developed for an roleplay Server that i was make but never be finished and i dont want to finish .. This is a simple login or register ui with "wished" tabs animation with tilt plugin for jquery. the items of register content its dynamic and javascript functions must not need to be changed. Login View: https://streamable.com/fackq Register View: https://streamable.com/o0x8h // example for a big text on the left side: (the white box goes to the right side) <div class="item left big"> <h6>Charakternamen Richtlinien</h6> <p> [any text here] <br /> <strong>Beispiel von nutzbaren Namen: <span class="green-text">Max Mustermann</span></strong> <br /> [any text here] </p> </div> // example for small text to the right side: (the white box goes automaticly to the left side) <div class="item right big"> <h6>User Werben User</h6> <p> [any text here ...]<br/><br/> <strong>Charaktername des Spielers:</strong> <input id="recruit_name" type="text" class="white-text" value="Max Mustermann"> </p> </div> use cef.execute to call the javascript function: show(0, "usernamehere"); // for login view show(1, "usernamehere"); // for register view Javascript Library's and CSS Frameworks i used: jquery (jquery.color-2.1.2) materialize tilt.jquery noty use it, change if you like and do anything you want with it. Download: https://mega.nz/#!VdFkFISK Kryptokey: FLkKpmP3nQbK48Tl4fW4mDxb2FwJGbpzW2NcNfnGVGE Greetz, Concil

So everytime I join an RP server my map and phone are missing and when I open the main menu to get the full screen map Its broken. It says my character is completely off the map and it doesnt let me click around. I don't see the main Los Santos map it looks really zoomed in and there are no icons for locations. I've tried uninstalling and reinstalling four times now and still have the same issue. Any suggestions are much appreciated!

В целях изучения разбираю примеры уже готовых серверов, и появился вопрос, как лучше поступать с UI через CEF ? Использовать единый html в котором собрать все элементы интерфейса и управлять ими изнутри, те в одном html будет к примеру компонент и чата и спидометра. Или инициализировать несколько CEF, допустим в один элемент CEF закинуть chat.html, и по верх него еще один элемент с CEF только уже с spedometr.html ? В чем плюсы и минуты того и другого?

Hello. I'd like to send in a couple of suggestions that, despite requiring programming, don't massively alter the engine or anything — they are aimed at improving the UX (user experience) of RAGE Multiplayer. Add a sub-list called "Favorites" to "Servers". The hamburguer menu next to "Servers" should be an actual menu where you can choose between a list of Public and Favorite servers. Keep the RAGE Multiplayer program open and launch the game in a separate window. When a user decides to quit the game, the RAGE Multiplayer program window will still be open. There are no big advantages in doing this, but then again this is aimed at improving the UX, which should always be considered.