feat(hud): Manometer in bar und ausblendbares HUD

Druckanzeige:
- pressure * (Restluft / capacity). Bei konstantem Volumen ist der Druck
  proportional zur verbliebenen Gasmenge, die lineare Abbildung stimmt also
- Fuelldruck pro Flasche in config/shared.lua, alle bei 300 bar. Dass die grosse
  Flasche denselben Druck zeigt wie die kleine ist gewollt - in echt macht das
  Volumen die Laufzeit, nicht der Druck
- Unter config.reservePressure (50 bar) rot: in der Tauchpraxis die Schwelle,
  ab der man den Aufstieg einleitet

HUD ausblenden fuer Unterwasser-Screenshots. qbx_core hat selbst keinen
HUD-Toggle, es feuert nur hud:client:* an eine separate HUD-Resource - deshalb
drei voneinander unabhaengige Wege:
- IsHudHidden() folgen, greift bei allem was DisplayHud(false) setzt
- eigene Taste, standardmaessig unbelegt
- Export setHudVisible(bool) / isHudVisible() fuer andere Resources

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

nui/index.html

@@ -18,9 +18,16 @@
         </div>
 
         <div class="readouts">
-            <div class="readout">
-                <span id="depth-label" class="caption">TIEFE</span>
-                <div class="value"><span id="depth-value">0.0</span><span class="unit">m</span></div>
+            <div class="readout-row">
+                <div class="readout">
+                    <span id="depth-label" class="caption">TIEFE</span>
+                    <div class="value"><span id="depth-value">0.0</span><span class="unit">m</span></div>
+                </div>
+
+                <div class="readout" id="pressure">
+                    <span id="pressure-label" class="caption">DRUCK</span>
+                    <div class="value"><span id="pressure-value">0</span><span class="unit">bar</span></div>
+                </div>
             </div>
 
             <div id="lamp" class="lamp">

nui/script.js

@@ -8,11 +8,14 @@ const hud = document.getElementById('hud');
 const gaugeFill = document.getElementById('gauge-fill');
 const airValue = document.getElementById('air-value');
 const depthValue = document.getElementById('depth-value');
+const pressure = document.getElementById('pressure');
+const pressureValue = document.getElementById('pressure-value');
 const lamp = document.getElementById('lamp');
 
 const labels = {
     air: document.getElementById('air-label'),
     depth: document.getElementById('depth-label'),
+    pressure: document.getElementById('pressure-label'),
     lamp: document.getElementById('lamp-label')
 };
 
@@ -34,6 +37,8 @@ function render(state) {
     gaugeFill.style.strokeDashoffset = String(RING * (1 - ratio));
     airValue.textContent = formatTime(state.oxygen);
     depthValue.textContent = state.depth.toFixed(1);
+    pressureValue.textContent = String(Math.round(state.pressure ?? 0));
+    pressure.classList.toggle('reserve', !!state.reserve);
 
     // Warnstufen kommen als Restsekunden vom Client, damit sie zu
     // config.warnAtSeconds passen statt hier nochmal definiert zu werden.
@@ -53,6 +58,7 @@ window.addEventListener('message', (event) => {
     if (data.action === 'labels') {
         labels.air.textContent = data.air;
         labels.depth.textContent = data.depth;
+        labels.pressure.textContent = data.pressure;
         labels.lamp.textContent = data.lamp;
         return;
     }
@@ -62,5 +68,8 @@ window.addEventListener('message', (event) => {
 
 // Damit sich das HUD im Browser ohne FiveM anschauen laesst.
 if (typeof GetParentResourceName !== 'function') {
-    render({ visible: true, oxygen: 372, capacity: 600, depth: 12.4, level: 'ok', hasLamp: true, lamp: true });
+    render({
+        visible: true, oxygen: 372, capacity: 600, depth: 12.4, pressure: 186,
+        level: 'ok', hasLamp: true, lamp: true
+    });
 }

nui/style.css

@@ -111,13 +111,18 @@ body {
     display: flex;
     flex-direction: column;
     gap: 10px;
-    min-width: 92px;
+}
+
+.readout-row {
+    display: flex;
+    gap: 18px;
 }
 
 .readout {
     display: flex;
     flex-direction: column;
     gap: 3px;
+    min-width: 76px;
 }
 
 .value {
@@ -140,6 +145,7 @@ body {
 .lamp {
     display: flex;
     align-items: center;
+    align-self: flex-start; /* sonst zieht der Flex-Container die Leiste auf volle Breite */
     gap: 6px;
     padding: 5px 9px;
     border-radius: 8px;
@@ -176,7 +182,10 @@ body {
 #hud.danger #air-value { color: var(--danger); }
 #hud.danger .gauge { animation: pulse 1s ease-in-out infinite; }
 
-#hud.deep .value { color: var(--warn); }
+#hud.deep #depth-value { color: var(--warn); }
+
+/* Reservedruck: in der Tauchpraxis die Schwelle zum Aufstieg. */
+#pressure.reserve .value { color: var(--danger); }
 
 @keyframes pulse {
     0%, 100% { opacity: 1; }