D4rkst3randClaude Opus 5
5a59fc513f
Lint / Lint Resource (push) Has been cancelled
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>
76 lines
2.7 KiB
JavaScript
76 lines
2.7 KiB
JavaScript
// Das HUD ist reine Anzeige - es sendet nichts zurueck an den Client.
|
|
// Der Lua-Client schickt den kompletten Zustand, damit die Locale-Texte an einer
|
|
// Stelle bleiben und hier nichts uebersetzt werden muss.
|
|
|
|
const RING = 327; // 2 * PI * 52, muss zu --ring in style.css passen
|
|
|
|
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')
|
|
};
|
|
|
|
function formatTime(seconds) {
|
|
const total = Math.max(0, Math.floor(seconds));
|
|
const mm = String(Math.floor(total / 60)).padStart(2, '0');
|
|
const ss = String(total % 60).padStart(2, '0');
|
|
return `${mm}:${ss}`;
|
|
}
|
|
|
|
function render(state) {
|
|
hud.classList.toggle('hidden', !state.visible);
|
|
|
|
if (!state.visible) return;
|
|
|
|
const capacity = state.capacity > 0 ? state.capacity : 1;
|
|
const ratio = Math.min(1, Math.max(0, state.oxygen / capacity));
|
|
|
|
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.
|
|
hud.classList.toggle('warn', state.level === 'warn');
|
|
hud.classList.toggle('danger', state.level === 'danger');
|
|
hud.classList.toggle('deep', !!state.deep);
|
|
|
|
lamp.classList.toggle('hidden', !state.hasLamp);
|
|
lamp.classList.toggle('on', !!state.lamp);
|
|
}
|
|
|
|
window.addEventListener('message', (event) => {
|
|
const data = event.data;
|
|
|
|
if (!data) return;
|
|
|
|
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;
|
|
}
|
|
|
|
if (data.action === 'state') render(data);
|
|
});
|
|
|
|
// Damit sich das HUD im Browser ohne FiveM anschauen laesst.
|
|
if (typeof GetParentResourceName !== 'function') {
|
|
render({
|
|
visible: true, oxygen: 372, capacity: 600, depth: 12.4, pressure: 186,
|
|
level: 'ok', hasLamp: true, lamp: true
|
|
});
|
|
}
|