N.create.ui — Advanced UI / Browser Manager

N.create.ui() lets you easily create, show, hide, and manage CEF-based UIs in your RAGE:MP project. It provides automatic cursor control, blur, input blocking, sound, callbacks, and safe destruction or hiding modes.

This is the core of all in-game menus, HUDs, and panels in NurJS.

⚡ Basic Example

const shopUI = N.create.ui({
  name: "ShopMenu",
  url: "package://ui/shop/index.html",
  keyUp: 0x45, // E
  keyDown: 0x1B, // ESC
  cursor: true,
  freezplayer: true,
  chataction: false,
  blurGame: true,
  soundOpen: "NAV_UP_DOWN",
  soundClose: "BACK",
  onShow: () => mp.gui.chat.push("🛍️ Shop opened"),
  onHide: () => mp.gui.chat.push("❌ Shop closed")
});

// open/close manually if needed:
shopUI.show();
shopUI.hide();

✅ Automatically:

• Shows the browser and cursor

• Freezes the player

• Hides chat & radar

• Applies blur

• Plays sound on open/close

• Locks ESC, M, TAB, and Pause Menu

• Runs your onShow / onHide callbacks

⚙️ Parameters

Option	Type	Default	Description
url	string	—	Browser page path (required)
name	string	same as url	Unique UI name
keyUp	int	—	Key to open UI (e.g. 0x45 for E)
keyDown	int	—	Key to close UI (e.g. 0x1B for ESC)
cursor	boolean	false	Show mouse cursor
freezplayer	boolean	false	Freeze player while UI is active
chataction	boolean	true	Hide chat when false
minmap	boolean	true	Hide minimap when false
blurGame	boolean	false	Blur screen & disable all controls
blockPause	boolean	true	Prevent opening pause menu
blockMenu	boolean	true	Prevent custom menu (M key)
mode	string	"destroy"	"destroy" or "hide" mode on close
allowInput	boolean	true	Allow browser input
devMode	boolean	false	Enable Ctrl+R UI reload
soundOpen	string	—	Play sound when UI opens
soundClose	string	—	Play sound when UI closes
onShow	function	—	Callback when UI is opened
onHide	function	—	Callback when UI is closed

🧱 Example — Fullscreen Menu

const mainMenu = N.create.ui({
  name: "MainMenu",
  url: "package://ui/menu/index.html",
  cursor: true,
  freezplayer: true,
  chataction: false,
  blurGame: true,
  soundOpen: "SELECT",
  soundClose: "BACK",
  devMode: true,
  onShow: () => mp.gui.chat.push("🌟 Menu active"),
  onHide: () => mp.gui.chat.push("🌑 Menu closed")
});

🧩 Controller Methods

Every UI created by N.create.ui() returns a controller object with useful methods:

const ui = N.create.ui({...});

ui.show();           // Show UI
ui.hide();           // Hide UI
ui.destroy();        // Alias for hide()
ui.isVisible();      // Returns true/false
ui.getBrowser();     // Returns the mp.browsers instance

🔍 Global Registry (N.uiRegistry)

All UIs created with N.create.ui() are stored globally in N.uiRegistry.

You can access or control them anywhere:

// Get UI by name
const shop = N.get.ui("ShopMenu");
if (shop) shop.hide();

// Toggle UI visibility
N.ui.toggle("ShopMenu");

// List all active UIs
const list = N.ui.list();
mp.gui.chat.push("🧭 Active UIs: " + list.join(", "));

// Close all UIs safely
N.ui.safeCloseAll();

🧠 Modes: "destroy" vs "hide"

Mode	Behavior
"destroy"	Fully destroys browser instance (default). Frees memory but reloads on reopen.
"hide"	Keeps browser loaded and only hides it. Faster reopening but higher memory usage.

💡 Developer Mode

Enable devMode: true to hot reload the UI with Ctrl+R while open.

N.create.ui({
  url: "package://ui/shop/index.html",
  devMode: true
});

✅ Perfect for frontend development:

• Instantly reloads CEF without restarting client.

• Shows “🔄 UI reloaded” message in chat.

---

🔒 Input & Control Lock

When UI is active:

• ESC, M, Pause, TAB, and camera controls are blocked.

• Player cannot move or shoot.

• Map and menu cannot open.

• If blurGame: true → world is blurred and input fully disabled.

---

🔊 Sound Integration

You can specify sounds that play automatically when the UI is shown or hidden:

soundOpen: "NAV_UP_DOWN",
soundClose: "BACK",

Use default GTA sound names or custom frontend sounds.

---

🔄 Global Helpers

Function	Description
N.ui.list()	Returns array of all created UI names
N.ui.toggle(name)	Toggles show/hide for a specific UI
N.ui.safeCloseAll()	Closes all open UIs and resets cursor/chat/radar
N.get.ui(name)	Returns a UI controller by name

---

⚙️ Internal Implementation (simplified)

N.create.ui = function (opts = {}) {
  const url = opts.url;
  const name = opts.name || url;
  let browser = null, visible = false;

  const showUI = () => { /* ... */ };
  const hideUI = () => { /* ... */ };

  const controller = {
    name,
    show: showUI,
    hide: hideUI,
    destroy: hideUI,
    isVisible: () => visible,
    getBrowser: () => browser
  };

  N.uiRegistry.set(name, controller);
  return controller;
};

N.create.ui() is the central system for managing CEF interfaces in NurJS:

• 🔹 Handles showing/hiding browser windows

• 🔹 Freezes players, hides chat/map, and blurs game

• 🔹 Blocks unwanted keys and controls

• 🔹 Plays sounds on open/close

• 🔹 Supports hot-reload in Dev Mode

• 🔹 Tracks all active UIs globally

It provides a universal, stable, and professional way to build any frontend interface — from login screens to HUDs and shop menus.