EMS UI Template

Interface medicale NUI pour FiveM, pensee comme un template configurable.

Le but du projet est simple:

• personnaliser rapidement le branding et les couleurs
• brancher facilement l'UI sur n'importe quel script EMS / medical
• garder un contrat NUI clair pour envoyer les donnees et recuperer les actions

Apercu

Stack

• FiveM / NUI
• React 18
• Vite
• JavaScript / JSX
• TailwindCSS v4

Structure

EMS_UI/
|-- fxmanifest.lua
|-- README.md
|-- screens/
`-- ui/
    |-- package.json
    |-- src/
    |   |-- App.jsx
    |   |-- MedicalUI.jsx
    |   |-- components/
    |   |-- config/
    |   |   |-- boneMap.js
    |   |   `-- config.js
    |   `-- utils/
    `-- dist/

Installation

1. Place la ressource dans le dossier resources de ton serveur.
2. Installe les dependances front:

cd ui
npm install

3. Build la NUI:

npm run build

4. Ajoute la ressource dans ton server.cfg:

ensure <nom-de-ton-dossier>

Configuration Simple

Le fichier principal a modifier est:

• ui/src/config/config.js

Tu peux y changer:

• le nom du serveur
• le nom du service EMS
• le titre de la fenetre
• toutes les couleurs de l'interface
• les labels affiches
• les boutons de soin
• les noms des events NUI
• le mode showcase pour tester l'UI sans FiveM

Exemple:

export const templateConfig = {
  branding: {
    serverName: "Mon Serveur",
    serviceName: "SAMS",
    panelTitle: "Examen medical",
  },
  theme: {
    colors: {
      primary: "#F97316",
      accent: "#DC2626",
      success: "#22C55E",
      bgPrimary: "rgba(17, 24, 39, 0.96)",
    },
  },
};

Apres modification de la config:

cd ui
npm run build

Override Runtime Depuis Lua

Tu peux aussi envoyer une config partielle au moment de l'ouverture de l'UI avec uiConfig.

Cette config est fusionnee avec celle du fichier ui/src/config/config.js.

Exemple:

SendNUIMessage({
  action = "openUI",
  uiConfig = {
    branding = {
      serverName = "Mon Serveur",
      serviceName = "EMS",
      panelTitle = "Diagnostic medical"
    },
    theme = {
      colors = {
        primary = "#0EA5E9",
        accent = "#EF4444"
      }
    }
  }
})

Messages Lua -> UI

Par defaut, l'interface ecoute ces actions:

• openUI
• updateInjuries
• closeUI

Les noms peuvent etre modifies dans ui/src/config/config.js via nui.incomingActions.

1. Ouvrir l'interface

SetNuiFocus(true, true)

SendNUIMessage({
  action = "openUI",
  targetId = 27,
  gender = "male",
  injuries = {
    {
      boneName = "tete",
      type = "Contusion",
      severity = "Legere",
      description = "Choc frontal",
      bleeding = false
    },
    {
      boneName = "bras gauche",
      type = "Fracture",
      severity = "Grave",
      description = "Suspicion de fracture du radius",
      bleeding = true
    },
    {
      boneName = "abdomen",
      type = "Hemorragie",
      severity = "Critique",
      description = "Saignement interne suspecte",
      bleeding = true
    }
  }
})

Champs utiles:

• action: nom de l'action NUI
• targetId: id du joueur examine
• gender: male ou female
• injuries: liste simple de blessures
• bodyParts: format avance si tu veux envoyer l'etat deja groupe par zone
• selectedPart: zone a preselectionner
• uiConfig: override runtime optionnel

2. Mettre a jour les blessures sans rouvrir l'UI

SendNUIMessage({
  action = "updateInjuries",
  injuries = {
    {
      boneName = "jambe droite",
      type = "Brulure",
      severity = "Moyenne",
      description = "Brulure du mollet",
      bleeding = false
    }
  }
})

3. Fermer l'interface

SetNuiFocus(false, false)

SendNUIMessage({
  action = "closeUI"
})

Format Des Blessures

Le format recommande est une liste simple:

injuries = {
  {
    boneName = "bras gauche",
    type = "Fracture",
    severity = "Grave",
    description = "Fracture ouverte",
    bleeding = true
  }
}

Champs supportes:

• boneName: nom de la zone envoyee depuis ton script
• type: nom de la blessure
• severity: gravite affichee dans l'UI
• description: detail libre
• bleeding: true ou false

Le mapping des zones est gere dans:

• ui/src/config/boneMap.js

Exemples de noms reconnus:

• tete
• abdomen
• bras gauche
• bras droit
• jambe gauche
• jambe droite
• corps entier

Si besoin, ajoute simplement tes propres alias dans boneMap.js.

Format Avance: bodyParts

Si ton script possede deja les donnees groupees par zone, tu peux envoyer directement bodyParts:

SendNUIMessage({
  action = "openUI",
  bodyParts = {
    head = {
      name = "Tete",
      injuries = {
        {
          type = "Contusion",
          severity = "Legere",
          description = "Choc temporal",
          bleeding = false
        }
      }
    },
    leftArm = {
      name = "Bras gauche",
      injuries = {
        {
          type = "Fracture",
          severity = "Grave",
          description = "Radius touche",
          bleeding = true
        }
      }
    }
  }
})

Cles supportees:

• fullBody
• head
• chest
• abdomen
• leftArm
• rightArm
• leftLeg
• rightLeg

Callbacks UI -> Lua

Par defaut, la NUI renvoie ces callbacks:

• nuiReady
• closeUI
• useCare

Les noms peuvent etre modifies dans ui/src/config/config.js via nui.callbacks.

nuiReady

Envoye au chargement initial de l'UI.

Payload:

{ "ready": true }

closeUI

Envoye quand le joueur ferme l'interface depuis le bouton ou Escape.

Payload:

{}

useCare

Envoye quand le joueur clique sur un soin.

Payload exemple:

{
  "careId": "bandage",
  "careLabel": "Bandage",
  "targetId": 27,
  "bodyPart": "leftArm",
  "injuryIndex": 1,
  "injury": {
    "type": "Fracture",
    "severity": "Grave",
    "description": "Suspicion de fracture du radius",
    "bleeding": true,
    "sourceLabel": "bras gauche"
  }
}

Exemple Lua:

RegisterNUICallback("nuiReady", function(data, cb)
  cb({ ok = true })
end)

RegisterNUICallback("closeUI", function(data, cb)
  SetNuiFocus(false, false)
  cb({ ok = true })
end)

RegisterNUICallback("useCare", function(data, cb)
  print(("Soin demande: %s sur %s"):format(data.careId, data.bodyPart))

  -- data.targetId
  -- data.injuryIndex
  -- data.injury.type
  -- data.injury.severity
  -- data.injury.description
  -- data.injury.bleeding

  cb({ ok = true })
end)

Dev UI

Pour lancer l'interface en local:

cd ui
npm run dev

Pour afficher l'UI sans FiveM:

1. active showcase.enabled = true dans ui/src/config/config.js
2. lance npm run dev

Qualite

Verification utile avant publication:

cd ui
npm run lint
npm run build

Notes

• ui/dist est genere par Vite: ne pas le modifier a la main.
• fxmanifest.lua charge ui/dist/index.html comme page NUI.
• L'UI est volontairement orientee template: la logique medicale et les validations doivent rester dans ton script Lua.

Credits

• Auteur: NRW