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

feat(hud): Dreier-Konsole mit Finimeter und Tiefenmesser

Browse Source 
Statt zweier Zahlenfelder jetzt zwei Zeigerinstrumente links und rechts vom
Luft-Ring - wie eine echte Tauchkonsole. Der Ring bleibt in der Mitte, weil die
Restzeit die Zahl ist, auf die es ankommt.

- Finimeter 0-300 bar, roter Bereich = Reserve unter reservePressure
- Tiefenmesser 0-depthDialMax, roter Bereich = Tiefengrenze des Atemgases. Der
  faengt bei Pressluft bei 45 m an und bei Trimix erst bei 100 m - der
  Gefahrenbereich haengt also an der getragenen Flasche. Gibt es real nicht,
  hilft im Spiel aber sofort beim Einschaetzen
- Skalenzahlen bewusst weggelassen: bei 96 px kollidieren sie mit allem und
  liest ohnehin niemand. Zeiger zeigt die Tendenz, die Zahl in der Uhr den Wert
- Zeiger und Wert faerben sich rot, sobald der rote Bereich erreicht ist

Beim Bauen gefunden: CSS transform-origin auf dem Zeiger wird zusaetzlich zum
rotate(winkel 50 50) im Attribut angewendet, der Drehpunkt wandert dadurch
doppelt und der Zeiger landet ausserhalb der Uhr. transform-origin ist raus.

README-Renderings auf die Konsole umgebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-08-11 09:55:45 +02:00
co-authored by Claude Opus 5
parent 64b2549cf9
commit 30c40c9f69
10 changed files with 404 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nui/index.html
+31 -6
View File
@@ -6,11 +6,24 @@
</head>
<body>
<div id="hud" class="hidden">
<div class="readout readout--right">
<span id="depth-label" class="caption">TIEFE</span>
<div class="value"><span id="depth-value">0.0</span><span class="unit">m</span></div>
<!-- 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>
<!-- Restluft als Ring, die Zahl auf die es ankommt -->
<div class="gauge">
<svg viewBox="0 0 120 120" aria-hidden="true">
<circle class="gauge-track" cx="60" cy="60" r="52"></circle>
@@ -22,9 +35,21 @@
</div>
</div>
<div class="readout" id="pressure">
<span id="pressure-label" class="caption">DRUCK</span>
<div class="value"><span id="pressure-value">0</span><span class="unit">bar</span></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>
<div id="lamp" class="lamp">