-
-
-
-
0bar
-
-
DRUCK
+
@@ -36,20 +34,21 @@
-
-
-
-
0.0m
-
-
TIEFE
+
+
+
@@ -58,6 +57,11 @@
LAMPE
+
+
diff --git a/nui/script.js b/nui/script.js
index 8ce979c..0a45cfb 100644
--- a/nui/script.js
+++ b/nui/script.js
@@ -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;
diff --git a/nui/style.css b/nui/style.css
index 3bd94b2..1a1b4ba 100644
--- a/nui/style.css
+++ b/nui/style.css
@@ -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; }
diff --git a/server/main.lua b/server/main.lua
index cc5a52f..2ccceca 100644
--- a/server/main.lua
+++ b/server/main.lua
@@ -118,6 +118,22 @@ end
lib.callback.register('d4rk_divegear:server:getTanks', getTankList)
+--- Prüft, ob der Spieler die getragene Flasche überhaupt noch hat.
+--- Ohne das konnte man die Flasche im Tauchgang weggeben und trotzdem
+--- weiteratmen - der Client hielt nur eine Slot-Nummer, die niemand mehr prüfte.
+--- @return number? slot aktueller Slot, nil wenn die Flasche weg ist
+lib.callback.register('d4rk_divegear:server:verifyTank', function(source, slotId, name)
+ local slot = getTankSlot(source, slotId)
+
+ if slot and slot.name == name then return slotId end
+
+ -- Nur umsortiert? Dann dieselbe Flaschensorte woanders im Inventar suchen,
+ -- sonst kostet jedes Verschieben im Inventar die Ausrüstung.
+ local found = shared.tankByName[name] and exports.ox_inventory:Search(source, 'slots', name)
+
+ return found and found[1] and found[1].slot or nil
+end)
+
lib.callback.register('d4rk_divegear:server:syncTank', function(source, slotId, oxygen)
return syncTank(source, slotId, oxygen)
end)