D4rkst3randClaude Opus 5
fcca73bc7a
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>
70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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-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 -->
|
|
<div class="gauge">
|
|
<svg viewBox="0 0 120 120" aria-hidden="true">
|
|
<circle class="gauge-track" cx="60" cy="60" r="52"></circle>
|
|
<circle id="gauge-fill" class="gauge-fill" cx="60" cy="60" r="52"></circle>
|
|
</svg>
|
|
<div class="gauge-inner">
|
|
<span id="air-value">--:--</span>
|
|
<span id="air-label" class="caption">LUFT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tiefenmesser: roter Bereich = Tiefengrenze des Atemgases -->
|
|
<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">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M9 21h6v-1H9v1zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"></path>
|
|
</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>
|
|
</body>
|
|
</html>
|