feat(hud): NUI-Overlay mit Luft und Tauchtiefe

Ersetzt die qbx.drawText2d-Anzeige (rohe Zahl plus Uhr-Emoji in der Ecke, jeden Frame neu gezeichnet) durch ein NUI-Overlay. - Luft als Ring mit mm:ss, Farbstufen aus config.warnAtSeconds abgeleitet, Pulsieren im kritischen Bereich - Tiefe in Metern ueber GetWaterHeight, geglaettet damit Wellengang die Zahl nicht zappeln laesst; Einfaerbung ab config.deepWarningDepth - Platz fuer den Lampen-Status, wird in Phase 5 befuellt - Sichtbar nur mit angelegter Ausruestung unter Wasser, mit Fade - Updates gedrosselt auf 4/s statt jeden Frame - Kein backdrop-filter (bekannter FiveM-Bug) Die geglaettete Tiefe speist auch den tiefenabhaengigen Verbrauch, der bisher bei jedem Tick neu und ungeglaettet gemessen wurde. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-10 23:49:03 +02:00
parent d661152bc9
commit 28ab8e796c
9 changed files with 384 additions and 10 deletions
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id="hud" class="hidden">
+        <div class="gauge">
+            <svg viewBox="0 0 120 120" aria-hidden="true">
+                <circle class="gauge-track" cx="60" cy="60" r="52"></circle>
+                <circle id="gauge-fill" class="gauge-fill" cx="60" cy="60" r="52"></circle>
+            </svg>
+            <div class="gauge-inner">
+                <span id="air-value">--:--</span>
+                <span id="air-label" class="caption">LUFT</span>
+            </div>
+        </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>
+
+            <div id="lamp" class="lamp">
+                <svg viewBox="0 0 24 24" aria-hidden="true">
+                    <path d="M9 21h6v-1H9v1zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"></path>
+                </svg>
+                <span id="lamp-label">LAMPE</span>
+            </div>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>