Libraries
59 files
-
UI | Only HTML / CSS Design
This is a UI for food, drink, money... its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
1721 downloads
-
Inventory | Only HTML / CSS Design
This is a Inventory, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
842 downloads
(0 reviews)0 comments
Updated
-
Input Window | Only HTML / CSS Design
This is a Input Window, its only a design. maked with html and css,
you must script it on your server.
there are more windows for more options inside the html
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
197 downloads
(0 reviews)0 comments
Updated
-
PayCheck - Popup | Only HTML / CSS Design
This is a PayCheck - Popup, its only a design. maked with html and css,
you must script it on your server.
If your Server has more than 100 registered players, than you must make a link with my rage.mp profile on your website.
269 downloads
(0 reviews)0 comments
Updated
-
cefManager
By KifKick
A library to easier manage CEF windows.
Creating a CEF Window
Function is based on Promise because I need this in my own resources. Promise return a CEF window object.
cef window name (string)
url (string)
parameters to exec (array) - take a look on Executing a function into a CEF Window for parameters
cefManager.createCef(cef window name, url, parametersToExec).then(cef => {}) cefManager.createCef('hud', 'package://rage/browsers/hud/index.html').then(cef => {}) Executing a function into a CEF Window
Again function is based on Promise but returns nothing.
cef window name (string)
[function name (string), args how much you need(number, string, boolean etc.)]
cefManager.executeCef(cef window name, [function name, args]).then(() => {}) cefManager.executeCef('hud', ['console.log', mp.players.length]).then(() => {}) Checking if CEF with name exists
cef window name (string)
cefManager.existsCef(cef window name) const exists = cefManager.existsCef('hud') Get CEF window object
cef window name (string)
cefManager.getCef(cef window name) const cef = cefManager.getCef('hud') Get CEF window current URL
cef window name (string)
cefManager.getCurrentCefURL(cef window name) const url = cefManager.getCurrentCefURL('hud') Get CEF window URL which was set in creating CEF window
cef window name (string)
cefManager.getCefURL(cef window name) const url = cefManager.getCefURL('hud') Reload CEF window
Again Promise
cef window name (string)
ignore cache (boolean) - true to ignore cache (Browser::reload)
cefManager.reloadCef(cef window name, ignore cache) cefManager.reloadCef('hud', true).then(() => {})
ps. no support from me for this library, if something works bad fix it.
137 downloads
(0 reviews)0 comments
Updated
-
(0 reviews)0 comments
Submitted
-
RAGE MP + React
By ynhhoJ
To install all packages, use: yarn install or npm install.
For running this example, use: yarn run start or npm start.
For building project, use: yarn run build or npm run build.
In client_packages is an example of how you can use compiled RAGE MP functions and React.
Credits to Mispon(rage-mp-react-ui) for branch example.
The principal difference between our examples is hot reload and more understandable example of code in my version.
Repo: https://github.com/Corso-Project/RAGE-MP-React-Example
388 downloads
(0 reviews)0 comments
Submitted
-
Colshape Handler
By nns
Simple CommonJS singleton module to handle colshape entering and exiting.
Copy the Colshapes folder inside packages inside your packages folder. See the Examples folder for an example.
Simply create your colshape like this:
const colshape = mp.colshapes.newSphere(34, 15, 69, 15, 0) colshape.name = 'example' and then pull in the colshapeHandler singleton to add it to the array the following:
const colshapeHandler = require('../Colshapes/index').getInstance() colshapeHandler.addColshape('example') If a player enters the specified colshape, the colshape name will be pushed towards a colshapes array as a player property, like this. Definition of this is inside the "playerJoin" event in the Colshapes\index.js. The specified colshape name will then be removed from the array again if the player exits the colshape.
player.colshapes = [];
83 downloads
(0 reviews)0 comments
Submitted
-
ReactTS using NextUI and TailwindCSS template
By -Andreas
Template for ReactTS using NextUI and TailwindCSS
This project serves as a template for getting started with React on your RageMP server. It is using TypeScript, and comes with NextUI providing all necessary building blocks and TailwindCSS for additional styling. The idea is to have one UI project containing everything you need, with modals that can be toggled on demand.
I was struggling with getting what I needed from Vue, and decided to scrap that idea and went forward with React. I hope this will save others some time if you should choose the same. After browsing the forum a bit and seeing some of the valuable examples already existing for user interfaces, they didn't quite get me where I needed. So this is my take using, a globally exposed function invokeEvent that can be used to show, hide and toggle modals. This allows for as many modals to be displayed at the same time as you would like. I do want to mention https://rage.mp/forums/topic/2571-guide-creating-ui-with-react/ for having the idea of an EventManager to get the bridge between RageMP and the React instance. Though it is meant for JavaScript it was helpful to get things rolling.
Build
Run npm run build and grab the dist folder and put it inside your server client packages.
Client events
After instantiating your browser it will support three functions for toggling modals on demand. The template contains a login example, so invoking trigger('show', 'login'); will enable the login modal etc. More modals can easily be created by following the structure as seen in the code.
let browser = mp.browsers.new("http://package/gamemode/cef/index.html"); mp.events.add('ShowModal::Client', (modal) => { browser.execute(`invokeEvent('show', '${modal}');`); }); mp.events.add('ToggleModal::Client', (modal) => { browser.execute(`invokeEvent('toggle', '${modal}');`); }); mp.events.add('HideModal::Client', (modal) => { browser.execute(`invokeEvent('hide', '${modal}');`); });
Check out my GTARoleplay gamemode where this resource is actively being used.
Read more about it here: https://github.com/Andreas1331/ragemp-roleplay-readme
GitHub repository link
https://github.com/Andreas1331/ragemp-roleplay-ui
174 downloads
(0 reviews)0 comments
Updated