D4rkst3r/d4rk_divegear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: weggegebene Flasche beendet den Tauchgang + HUD-Feinschliff

Browse Source 
Bug: wer die getragene Flasche im Tauchgang weggab, konnte unbegrenzt
weiteratmen. Der Client hielt nur eine Slot-Nummer, die niemand mehr
gegenpruefte, und der Sync lief ins Leere. ox_inventory feuert clientseitig bei
jeder Inventar-Aenderung - dort wird jetzt beim Server nachgefragt. Ist die
Flasche weg, kommt die Ausruestung ab; wurde sie nur umsortiert, bindet der
Client auf den neuen Slot um, damit Aufraeumen im Inventar nichts kostet.

HUD:
- Werte aus den Uhren heraus in eine zweite Zeile: Druck, Lampe und Tiefe
  liegen jetzt auf einer Linie. In der Skala kollidierte die Zahl mit
  Strichen, Zeiger und rotem Bereich
- Skaliert mit der Bildschirmhoehe (entworfen auf 1080p), sonst waere das in
  festen Pixeln gebaute HUD auf 1440p und 4K deutlich zu klein.
  config.hudScale kommt als Geschmacksregler obendrauf
- Zustandsklassen sitzen jetzt am HUD statt an den Uhren, weil Instrument und
  Wert in getrennten Grid-Zellen liegen

README-Renderings nachgezogen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-08-11 10:04:08 +02:00
co-authored by Claude Opus 5
parent 30c40c9f69
commit fcca73bc7a
13 changed files with 223 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nui/index.html
+32 -28
View File
@@ -5,22 +5,20 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Zeile 1: die drei Instrumente. Zeile 2: ihre Werte, mit der Lampe
dazwischen - alles auf einer Linie. -->
<div id="hud" class="hidden">
<!-- Finimeter: Restdruck der Flasche, roter Bereich = Reserve -->
<div class="dial" id="pressure">
<div class="dial-face">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="face" cx="50" cy="50" r="46"></circle>
<path class="zone" id="pressure-zone"></path>
<g class="ticks" id="pressure-ticks"></g>
<g class="needle" id="pressure-needle">
<line x1="50" y1="58" x2="50" y2="17"></line>
<circle cx="50" cy="50" r="3.4"></circle>
</g>
</svg>
<div class="dial-value"><span id="pressure-value">0</span><span class="unit">bar</span></div>
</div>
<span id="pressure-label" class="caption">DRUCK</span>
<div class="dial-face" id="pressure-face">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="face" cx="50" cy="50" r="46"></circle>
<path class="zone" id="pressure-zone"></path>
<g class="ticks" id="pressure-ticks"></g>
<g class="needle" id="pressure-needle">
<line x1="50" y1="58" x2="50" y2="17"></line>
<circle cx="50" cy="50" r="3.4"></circle>
</g>
</svg>
</div>
<!-- Restluft als Ring, die Zahl auf die es ankommt -->
@@ -36,20 +34,21 @@
</div>
<!-- Tiefenmesser: roter Bereich = Tiefengrenze des Atemgases -->
<div class="dial" id="depth">
<div class="dial-face">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="face" cx="50" cy="50" r="46"></circle>
<path class="zone" id="depth-zone"></path>
<g class="ticks" id="depth-ticks"></g>
<g class="needle" id="depth-needle">
<line x1="50" y1="58" x2="50" y2="17"></line>
<circle cx="50" cy="50" r="3.4"></circle>
</g>
</svg>
<div class="dial-value"><span id="depth-value">0.0</span><span class="unit">m</span></div>
</div>
<span id="depth-label" class="caption">TIEFE</span>
<div class="dial-face" id="depth-face">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="face" cx="50" cy="50" r="46"></circle>
<path class="zone" id="depth-zone"></path>
<g class="ticks" id="depth-ticks"></g>
<g class="needle" id="depth-needle">
<line x1="50" y1="58" x2="50" y2="17"></line>
<circle cx="50" cy="50" r="3.4"></circle>
</g>
</svg>
</div>
<div class="readout" id="pressure-readout">
<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 id="lamp" class="lamp">
@@ -58,6 +57,11 @@
</svg>
<span id="lamp-label">LAMPE</span>
</div>
<div class="readout" id="depth-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>
<script src="script.js"></script>
nui/script.js
+22 -5
View File
@@ -10,20 +10,32 @@ const DIAL_SWEEP = 270;
const DIAL_R = 42;
const hud = document.getElementById('hud');
// Das HUD ist auf 1080p entworfen. Ohne Nachskalieren waere es auf 1440p und 4K
// deutlich zu klein, weil FiveM das NUI in der echten Bildschirmaufloesung
// rendert. Der Faktor aus der Config kommt obendrauf.
const DESIGN_HEIGHT = 1080;
let configScale = 1;
function applyScale() {
const scale = Math.min(2.5, Math.max(0.6, (window.innerHeight / DESIGN_HEIGHT) * configScale));
document.documentElement.style.setProperty('--hud-scale', scale.toFixed(3));
}
applyScale();
window.addEventListener('resize', applyScale);
const gaugeFill = document.getElementById('gauge-fill');
const airValue = document.getElementById('air-value');
const lamp = document.getElementById('lamp');
const dials = {
pressure: {
root: document.getElementById('pressure'),
needle: document.getElementById('pressure-needle'),
zone: document.getElementById('pressure-zone'),
ticks: document.getElementById('pressure-ticks'),
value: document.getElementById('pressure-value')
},
depth: {
root: document.getElementById('depth'),
needle: document.getElementById('depth-needle'),
zone: document.getElementById('depth-zone'),
ticks: document.getElementById('depth-ticks'),
@@ -127,14 +139,14 @@ function render(state) {
dials.pressure.value.textContent = String(Math.round(state.pressure ?? 0));
setNeedle(dials.pressure, state.pressure ?? 0, maxPressure);
setZone(dials.pressure, 0, state.reservePressure ?? 0, maxPressure);
dials.pressure.root.classList.toggle('alert', !!state.reserve);
hud.classList.toggle('pressure-alert', !!state.reserve);
const depthScale = state.depthScale || 100;
dials.depth.value.textContent = state.depth.toFixed(1);
setNeedle(dials.depth, state.depth, depthScale);
setZone(dials.depth, state.depthLimit, depthScale, depthScale);
dials.depth.root.classList.toggle('alert', !!state.overLimit);
dials.depth.root.classList.toggle('deep', !state.overLimit && !!state.deep);
hud.classList.toggle('depth-alert', !!state.overLimit);
hud.classList.toggle('depth-deep', !state.overLimit && !!state.deep);
lamp.classList.toggle('hidden', !state.hasLamp);
lamp.classList.toggle('on', !!state.lamp);
@@ -146,6 +158,11 @@ window.addEventListener('message', (event) => {
if (!data) return;
if (data.action === 'labels') {
if (typeof data.scale === 'number' && data.scale !== configScale) {
configScale = data.scale;
applyScale();
}
labels.air.textContent = data.air;
labels.depth.textContent = data.depth;
labels.pressure.textContent = data.pressure;
nui/style.css
+46 -47
View File
@@ -32,7 +32,12 @@ body {
position: absolute;
left: 50%;
bottom: 7vh;
transform: translateX(-50%) translateY(0);
/* Skaliert mit der Bildschirmhöhe, sonst wäre das in festen Pixeln
entworfene HUD auf 1440p und 4K winzig. --hud-scale setzt script.js.
transform-origin unten mittig, damit das Panel beim Skalieren zentriert
bleibt und der Abstand zum unteren Rand gleich wirkt. */
transform: translateX(-50%) scale(var(--hud-scale, 1));
transform-origin: bottom center;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
@@ -51,7 +56,7 @@ body {
#hud.hidden {
opacity: 0;
transform: translateX(-50%) translateY(14px);
transform: translateX(-50%) scale(var(--hud-scale, 1)) translateY(14px);
pointer-events: none;
}
@@ -65,21 +70,19 @@ body {
/* --- Zeigerinstrumente --- */
.dial {
grid-row: 1;
.dial-face {
width: 96px;
height: 96px;
}
/* Werte stehen unter den Uhren, nicht darin: auf 96 px kollidiert eine Zahl in
der Skala mit Strichen, Zeiger und rotem Bereich. Zusammen mit der Lampe
ergeben sie eine durchgehende zweite Zeile. */
.readout {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
#pressure { grid-column: 1; }
#depth { grid-column: 3; }
.dial-face {
position: relative;
width: 96px;
height: 96px;
gap: 2px;
}
.dial-face svg {
@@ -87,7 +90,7 @@ body {
height: 100%;
}
.dial .face {
.face {
fill: var(--dial-face);
stroke: rgba(148, 163, 184, 0.25);
stroke-width: 1.5;
@@ -95,32 +98,32 @@ body {
/* Skalenzahlen gibt es bewusst nicht: bei dieser Groesse liest die niemand.
Der Zeiger zeigt die Tendenz, die Zahl in der Mitte den genauen Wert. */
.dial .ticks line {
.ticks line {
stroke: #cbd5e1;
stroke-opacity: 0.4;
stroke-width: 1;
}
.dial .ticks line.major {
.ticks line.major {
stroke-opacity: 0.85;
stroke-width: 1.6;
}
.dial .zone {
.zone {
fill: none;
stroke: var(--danger);
stroke-width: 3.5;
stroke-opacity: 0.9;
}
.dial .needle line {
.needle line {
stroke: var(--text);
stroke-width: 2.6;
stroke-linecap: round;
transition: stroke 260ms ease;
}
.dial .needle circle {
.needle circle {
fill: var(--text);
transition: fill 260ms ease;
}
@@ -128,21 +131,15 @@ body {
/* Kein transform-origin hier: das rotate(winkel 50 50) im transform-Attribut
bringt den Drehpunkt schon mit. Beides zusammen verschiebt den Zeiger aus der
Uhr heraus - CSS rechnet die Origin nochmal obendrauf. */
.dial .needle {
.needle {
transition: transform 260ms ease-out;
}
.dial-value {
position: absolute;
inset: 0;
.value {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
/* In den offenen unteren Teil der Skala, damit die Zahl nicht am
Zeiger-Drehpunkt klebt - wie das Sichtfenster eines echten Instruments. */
padding-top: 36px;
font-size: 16px;
align-items: baseline;
gap: 3px;
font-size: 19px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1;
@@ -150,31 +147,35 @@ body {
}
.unit {
font-size: 10px;
font-size: 11px;
font-weight: 500;
color: var(--muted);
}
/* Zeiger und Wert faerben sich, sobald der rote Bereich erreicht ist. */
#pressure.alert .needle line,
#depth.alert .needle line { stroke: var(--danger); }
#pressure.alert .needle circle,
#depth.alert .needle circle { fill: var(--danger); }
#pressure.alert .dial-value,
#depth.alert .dial-value { color: var(--danger); }
/* Zeiger und Wert faerben sich, sobald der rote Bereich erreicht ist. Die
Klassen sitzen am HUD, weil Uhr und Wert in getrennten Grid-Zellen liegen. */
#hud.pressure-alert #pressure-needle line { stroke: var(--danger); }
#hud.pressure-alert #pressure-needle circle { fill: var(--danger); }
#hud.pressure-alert #pressure-readout .value { color: var(--danger); }
#depth.deep .dial-value { color: var(--warn); }
#depth.deep .needle line { stroke: var(--warn); }
#depth.deep .needle circle { fill: var(--warn); }
#hud.depth-alert #depth-needle line { stroke: var(--danger); }
#hud.depth-alert #depth-needle circle { fill: var(--danger); }
#hud.depth-alert #depth-readout .value { color: var(--danger); }
#hud.depth-deep #depth-needle line { stroke: var(--warn); }
#hud.depth-deep #depth-needle circle { fill: var(--warn); }
#hud.depth-deep #depth-readout .value { color: var(--warn); }
/* --- Luft-Ring --- */
/* Oben ausgerichtet: die 2px gleichen 96 gegen 92 Durchmesser aus, damit alle
drei Instrumente auf einer Achse liegen. */
.gauge {
position: relative;
width: 92px;
height: 92px;
grid-column: 2;
grid-row: 1;
align-self: start;
margin-top: 2px;
}
.gauge svg {
@@ -221,8 +222,6 @@ body {
/* --- Lampe --- */
.lamp {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
gap: 6px;
@@ -260,7 +259,7 @@ body {
#hud.danger .gauge { animation: pulse 1s ease-in-out infinite; }
/* Tiefengrenze des Atemgases ueberschritten - Tiefenrausch laeuft. */
#hud.overlimit #depth .dial-face { animation: pulse 1s ease-in-out infinite; }
#hud.overlimit #depth-face { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse {
0%, 100% { opacity: 1; }