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

docs: vollstaendige README mit HUD-Renderings, Luft-Ring mittig
Lint / Lint Resource (push) Has been cancelled
Details

Browse Source 
HUD-Layout symmetrisch: Tiefe links, Luft-Ring mittig, Druck rechts, Lampe
zentriert darunter. Umgestellt auf Grid, damit die drei Werte garantiert auf
einer Mittelachse sitzen und die Lampen-Leiste ohne Ausgleichs-Margins in einer
zweiten Zeile haengt.

README:
- Drei HUD-Renderings (normal, Warnung, kritisch) als SVG. Keine In-Game-Bilder -
  hier laeuft kein GTA -, sondern massstabsgetreu aus denselben Werten wie
  style.css erzeugt, per docs/gen-hud-svg.mjs reproduzierbar
- Vollstaendige Config-Referenz fuer client.lua und shared.lua
- Item-Tabelle mit Laufzeit, Fuelldruck, Gewicht, dazu die Metadata-Keys und
  warum kein decay gesetzt werden darf
- Installation, Bedienung, Exports, Balancing-Hinweis
- Bekannte Unsicherheiten offen benannt

Item-Snippet mit klarem Copy-Paste-Header. Bewusst keine fertige items.lua zum
Ersetzen: die wuerde die restlichen Items des Servers mitloeschen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-08-11 00:13:06 +02:00
co-authored by Claude Opus 5
parent 5a59fc513f
commit ce0f693266
8 changed files with 445 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nui/index.html
+14 -18
View File
@@ -6,6 +6,11 @@
</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>
</div>
<div class="gauge">
<svg viewBox="0 0 120 120" aria-hidden="true">
<circle class="gauge-track" cx="60" cy="60" r="52"></circle>
@@ -17,25 +22,16 @@
</div>
</div>
<div class="readouts">
<div class="readout-row">
<div class="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 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>
</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>
</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 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>
nui/style.css
+32 -17
View File
@@ -24,15 +24,22 @@ body {
user-select: none;
}
/* Grid statt Flex: so sitzen Tiefe, Ring und Druck garantiert auf einer
gemeinsamen Mittelachse, und die Lampen-Leiste hängt in einer zweiten Zeile
mittig unter dem Ring - ohne Ausgleichs-Margins. */
#hud {
position: absolute;
left: 50%;
bottom: 7vh;
transform: translateX(-50%) translateY(0);
display: flex;
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto;
align-items: center;
gap: 18px;
padding: 14px 22px 14px 14px;
justify-items: center;
column-gap: 22px;
row-gap: 8px;
padding: 14px 22px;
border-radius: 16px;
background: var(--panel);
border: 1px solid rgba(148, 163, 184, 0.18);
@@ -53,7 +60,8 @@ body {
position: relative;
width: 92px;
height: 92px;
flex-shrink: 0;
grid-column: 2;
grid-row: 1;
}
.gauge svg {
@@ -107,22 +115,28 @@ body {
/* --- Tiefe + Lampe --- */
.readouts {
display: flex;
flex-direction: column;
gap: 10px;
}
.readout-row {
display: flex;
gap: 18px;
}
.readout {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 76px;
min-width: 84px;
grid-row: 1;
}
/* Tiefe spiegelt den Druck: Werte zeigen jeweils zum Ring hin. */
.readout--right {
align-items: flex-end;
grid-column: 1;
justify-self: end;
}
.readout--right .value {
justify-content: flex-end;
}
#pressure {
grid-column: 3;
justify-self: start;
}
.value {
@@ -143,9 +157,10 @@ body {
}
.lamp {
grid-column: 2;
grid-row: 2;
display: flex;
align-items: center;
align-self: flex-start; /* sonst zieht der Flex-Container die Leiste auf volle Breite */
gap: 6px;
padding: 5px 9px;
border-radius: 8px;