Leaderboard

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

Dorim sa va reamintim ca serverul s-a redeschis pe data de 14 aprilie 2023, la ora 18:00 (6 PM). In tot acest timp am lucrat din greu la imbunatatiri pentru a aduce server-ul la standardele pe care ni le doream atat noi cat si jucatorii, lista completa de update-uri putand fi citita in ⁠quick-updates. De asemenea, am pregatit si un mic roadmap pentru aceasta redeschidere in ⁠roadmap. Link-ul la serverul de discord este : https://discord.com/invite/U5zknsBZZ2 Suntem constienti ca pe langa inconsistenta update-urilor, un rol important in declinul server-ului l-a jucat lipsa unui staff si unui management bine organizat. Motiv pentru care @Potco a fost adus ca administrator, rolul lui fiind acela de a se ocupa de partea de management si marketing, dar si de a organiza o echipa de oameni care sa raspunda prompt la toate intrebarile si problemele jucatorilor. Lista completa a staff-ului poate fi vazuta in ⁠staff. Mai jos va voi prezenta doar cateva din lucrurile noi aduse pe server. Sistem de bonusuri A fost adaugat un nou NPC "Tailor", de la care veti putea lua Add Bonus Pass sau Change Bonus Pass odata la 5 ore. Aceste pass-uri pot fi folosite pentru a adauga sau schimba bonusuri pe orice bluza, pantaloni, pantofi, bratara sau ceas. In partea din stanga jos a caracterului din inventar puteti vedea totalul bonusurilor active provenite din haine si pet. Exista 4 raritati pentru fiecare tip de bonus, 57% sansa pentru un bonus common, 30% sansa pentru un bonus uncommon, 10% sansa pentru un bonus rare si 3% sansa pentru un bonus very rare. Lista cu bonusuri: Job boost (5-25%) Job tokens boost (2-12%) Payday bonus (2-12%) Treasure bonus (5-25%) Rob bonus (2-12%) RP bonus (2-12%) Sistem de Pet-uri Acum puteti detine un animalut ce va va urmari oriunde mergeti si caruia ii puteti pune si un nume personalizat. Aceste pet-uri sunt dropate din Pets Crate cu 2, 3 sau 4 bonusuri, sansa sa pice mai multe bonusuri fiind din ce in ce mai mica. Bonusurile ce pot pica sunt la fel ca cele de pe haine, dar valoarea acestora este de 3 ori mai mare si nu pot fi schimbate cu Change Bonus Pass. Durata unui pet este de 30 de zile, dupa care acesta va disparea din inventar. Lista cu pet-uri: Alien, Bigfoot, Mia, Bouncer, Panther, Mt. Lion, Coyote, Pig, Rabbit, Husky, Poodle, Pug, Retriever, Rottweiler, Westy, Shepherd, Cat Ordinea este in functie de raritate. Event de Paste Acest event este similar cu cel de Halloween. A fost adaugat un nou NPC numit "Easter Bunny" la care trebuie sa duceti 100 de oua de Paste odata pe zi. Aceste oua pot fi gasite pe harta jocului. Lista cu premii si sanse: Diamond Crate (1%) Gold Crate (1%) Silver Crate (1%) Clothes Crate (1%) Pets Crate (1%) 100 - 1000 tokens (2%) Speedo (5%) $100,000 - $500,000 (1%) $50,000 - $100,000 (2%) $20,000 - $50,000 (5%) $5,000 - $20,000 (80%) Sitem de licitatii automate imbunatatit Jucatorii vechi stiu cat de frustrante erau licitatiile automate facute de server. Multe case si afaceri amestecate ce erai licitate in acelasi timp, fara posibilitatea de a fi alertat cand cineva iti da overbid, facand imposibila urmarirea fiecarei licitatii in parte. Noul sistem automat de licitatii pune pana la 10 afaceri sau case la licitatie in fiecare zi la 5 dimineata, cu incheiere a acestora incepand cu ora 8 PM, la intervale de cate 15 minute intre ele pentru a permite jucatorilor sa viziteze fiecare proprietate din timp si sa liciteze pentru fiecare in parte. De asemenea, cand cineva iti da overbid acum primesti si un mesaj pe chat in joc care iti spune cine ti-a dat overbid, pentru ce obiect si cu ce suma de bani. Masini noi si handling imbunatatit Stim cu totii cat de importante sunt masinile reale in acest joc, motiv pentru care aproape am dublat numarul acestora si le-am imbunatatit handling-ul. Lista completa cu masini va putea fi vazuta in joc la Dealership. Va asteptam in numar cat mai mare pe server.