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,184 @@
+/* Kein backdrop-filter: bricht nach FiveM-Updates zu einem schwarzen Kasten auf. */
+
+:root {
+    --accent: #38bdf8;
+    --accent-dim: rgba(56, 189, 248, 0.15);
+    --warn: #fbbf24;
+    --danger: #f87171;
+    --text: #e2e8f0;
+    --muted: #94a3b8;
+    --panel: rgba(9, 18, 28, 0.72);
+    --ring: 327; /* 2 * PI * 52, Umfang des Gauge-Kreises */
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    overflow: hidden;
+    background: transparent;
+    font-family: 'Segoe UI', 'Roboto', system-ui, sans-serif;
+    user-select: none;
+}
+
+#hud {
+    position: absolute;
+    left: 50%;
+    bottom: 7vh;
+    transform: translateX(-50%) translateY(0);
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    padding: 14px 22px 14px 14px;
+    border-radius: 16px;
+    background: var(--panel);
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+    color: var(--text);
+    transition: opacity 220ms ease, transform 220ms ease;
+}
+
+#hud.hidden {
+    opacity: 0;
+    transform: translateX(-50%) translateY(14px);
+    pointer-events: none;
+}
+
+/* --- Luft-Gauge --- */
+
+.gauge {
+    position: relative;
+    width: 92px;
+    height: 92px;
+    flex-shrink: 0;
+}
+
+.gauge svg {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+}
+
+.gauge circle {
+    fill: none;
+    stroke-width: 8;
+    stroke-linecap: round;
+}
+
+.gauge-track {
+    stroke: rgba(148, 163, 184, 0.16);
+}
+
+.gauge-fill {
+    stroke: var(--accent);
+    stroke-dasharray: var(--ring);
+    stroke-dashoffset: 0;
+    transition: stroke-dashoffset 260ms linear, stroke 260ms ease;
+}
+
+.gauge-inner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+}
+
+#air-value {
+    font-size: 21px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    letter-spacing: 0.5px;
+    line-height: 1;
+}
+
+.caption {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 1.4px;
+    color: var(--muted);
+    text-transform: uppercase;
+}
+
+/* --- Tiefe + Lampe --- */
+
+.readouts {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 92px;
+}
+
+.readout {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.value {
+    display: flex;
+    align-items: baseline;
+    gap: 3px;
+    font-size: 26px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    transition: color 260ms ease;
+}
+
+.unit {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--muted);
+}
+
+.lamp {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 9px;
+    border-radius: 8px;
+    background: rgba(148, 163, 184, 0.1);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 1.2px;
+    text-transform: uppercase;
+    color: var(--muted);
+    transition: background 200ms ease, color 200ms ease;
+}
+
+.lamp svg {
+    width: 13px;
+    height: 13px;
+    fill: currentColor;
+}
+
+.lamp.hidden {
+    display: none;
+}
+
+.lamp.on {
+    background: var(--accent-dim);
+    color: var(--accent);
+}
+
+/* --- Warnzustaende --- */
+
+#hud.warn .gauge-fill { stroke: var(--warn); }
+#hud.warn #air-value { color: var(--warn); }
+
+#hud.danger .gauge-fill { stroke: var(--danger); }
+#hud.danger #air-value { color: var(--danger); }
+#hud.danger .gauge { animation: pulse 1s ease-in-out infinite; }
+
+#hud.deep .value { color: var(--warn); }
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.45; }
+}