Files
REM-Mod/EXE/remui/hud.rml
T
flathackandClaude Fable 5.2 1a1ed0d832 REM-Client 1fca54f4: the sky between the systems, HUD system targets and jump fixes, nav map galaxy view and zones
Freelancer.exe, common.dll, remui/hud.rml and navmap.rml of REM-Client main 1fca54f4 (built on Linux with
tools/rem/build_linux.py; the other files of the package are unchanged since a1ca764a): the interstellar
sky (stars as points of light, the sector's nebulae), the system target's arrow at the screen's edge and
every system in the drive's reach as a contact, the own system as a jump target from far out, jump holes
moving with the floating origin, WorldPos from the first net state on, the nav map's galaxy view and its
zones at their true positions.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
2026-11-13 15:48:27 +01:00

372 lines
36 KiB
Plaintext

<rml>
<head>
<title>HUD</title>
<link type="text/rcss" href="rem.rcss"/>
<style>
/* the flight HUD in the shape of FL's own (bottom left / centre / right, the maneuver bar):
panels with cut corners (the hudframes sprites, rem.rcss), FL's icons,
labelled bars, drawn by RmlUi */
body.hud { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; pointer-events: none; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbe6f0; }
.fp { position: absolute; box-sizing: border-box; decorator: ninepatch(fa, fa-i); }
.fp.all { decorator: ninepatch(fb, fb-i); }
.fp.small { decorator: ninepatch(fs, fs-i); }
.ico { width: 40dp; height: 40dp; margin: 0 3dp; }
.ib { display: inline-block; padding: 1dp; border-radius: 4dp; }
.ib:hover { background-color: #f2b13c14; }
.ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
.ib.on { background-color: #f2b13c1f; }
.ib.off { opacity: 0.35; }
/* a panel's title: caps, spaced, three slashes after it */
.ttl { font-weight: 600; font-size: 16dp; letter-spacing: 2dp; color: #e8f4ff; white-space: nowrap; }
.ttl .sl { margin-left: 10dp; color: #5cc8f0; letter-spacing: -1dp; }
.sp { flex: 1; }
/* --- the maneuver bar, top centre: icon over its name, the active one amber ----------- */
.mans { left: 50%; margin-left: -300dp; top: 8dp; width: 600dp; height: 76dp; padding: 0 18dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
.mans .ib { flex: 1; display: flex; flex-direction: column; align-items: center; height: 62dp; padding: 6dp 4dp 0 4dp; border-left: 1dp #2b6f9e; border-radius: 0; }
.mans .ib:first-child { border-left-width: 0; }
.mans .ib.on { border-left-width: 0; }
.mans .ico { width: 34dp; height: 34dp; margin: 0; }
.mans .lb { margin-top: 2dp; font-weight: 600; font-size: 12dp; letter-spacing: 1dp; color: #b9d4ea; white-space: nowrap; text-transform: uppercase; }
.mans .ib.on .lb { color: #f2b13c; }
/* a tab hanging from the bar (fts: no top edge, its sides start on the bar's bottom edge), clear of its cut */
.cruise { left: 50%; margin-left: -286dp; top: 84dp; width: 64dp; height: 52dp; display: flex; justify-content: center; align-items: center; }
.fp.cruise { decorator: ninepatch(fts, fts-i); }
.cruise .ico { width: 40dp; height: 40dp; }
/* --- bottom centre: the ship in its shield ring (the hull the red ring inside); power and thrust as a
wing on the left, the speed as one on the right -- arcs of a large circle under the panel rising to the
ring; the rings and wings are lit segments, each turned about its circle's centre (seg16 / seg32) */
.fp.core { left: 50%; margin-left: -310dp; bottom: 8dp; width: 620dp; height: 170dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
.core .disc { position: absolute; left: 242dp; top: 24dp; width: 134dp; height: 134dp; border: 1dp #2b6f9e; border-radius: 68dp; }
.core .ship { display: block; position: absolute; left: 280dp; top: 58dp; width: 60dp; height: 56dp; }
.core .pc { position: absolute; left: 242dp; top: 114dp; width: 136dp; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 1dp; }
.core .pc .s { color: #4fc6ee; margin-right: 8dp; }
.core .pc .h { color: #e0484e; }
/* the segments as soft-edged geometry (<segarc>: centre, radius and size in dp from the panel's corner) */
.core segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
.core .side { position: absolute; top: 106dp; width: 180dp; }
.core .side.l { left: 50dp; text-align: right; }
.core .side.r { left: 390dp; text-align: left; }
.core .cap { font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #8fb3d0; margin: 0 6dp; }
.core .big { font-weight: 600; font-size: 26dp; color: #e8f4ff; }
.core .big.low { color: #ef6a5b; }
.core .big .u { font-weight: 400; font-size: 12dp; color: #8fb3d0; margin-left: 4dp; }
.core .pw { display: block; font-weight: 600; font-size: 13dp; color: #f0943c; }
.core .pw .cap { color: #f0943c; }
/* the other ship status (REM settings: Ship status "bars"): thrust | shield / hull / power | speed, one panel */
.fp.coreb { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
.coreb .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
.coreb .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
.coreb .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
.coreb .thrust.low { color: #ef6a5b; }
.coreb .sep { width: 1dp; height: 42dp; background-color: #2b6f9e; margin: 0 10dp; }
.bars { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.brow { display: flex; flex-direction: row; align-items: center; height: 15dp; }
.brow .l { width: 52dp; font-weight: 600; font-size: 10dp; letter-spacing: 1.5dp; color: #b9d4ea; }
.bar { position: relative; flex: 1; height: 8dp; }
.chips { position: absolute; left: 0; top: 0; right: 0; height: 8dp; display: flex; flex-direction: row; }
.sg { flex: 1; height: 8dp; margin-right: 2dp; }
.sg:last-child { margin-right: 0; }
/* each segment lit by the value (no clipped fill row: the HUD's scaled parts are not clipped) */
.power .sg { background-color: #f0943c26; }
.power .sg.lit { background-color: #f0943c; }
.shield .sg { background-color: #4fc6ee26; }
.shield .sg.lit { background-color: #4fc6ee; }
.hull .sg { background-color: #e0484e26; }
.hull .sg.lit { background-color: #e0484e; }
/* --- bottom left: target / contacts --------------------------------------------------- */
/* the head a tab on the body: its sides run on into the body's (fht / fbl, rem.rcss) */
.lhead { left: 8dp; bottom: 342dp; width: 310dp; height: 42dp; decorator: ninepatch(fht, fht-i); display: flex; flex-direction: row; align-items: center; padding: 0 8dp 0 22dp; }
.lhead .ico { width: 30dp; height: 30dp; }
/* as high as the weapons panel (symmetric): FL's eight contact rows a little taller */
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 334dp; decorator: ninepatch(fbl, fbl-i); padding: 12dp 16dp; }
.filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 6dp; padding-bottom: 6dp; border-bottom: 1dp #2b6f9e; }
.filters .ico { width: 32dp; height: 32dp; margin: 0 4dp; }
.rows { height: 246dp; margin-right: 22dp; }
.c { display: flex; flex-direction: row; align-items: center; height: 30dp; padding: 0 2dp; border-bottom: 1dp #24405c66; }
.c:hover { background-color: #3a8fc822; }
.c img { width: 20dp; height: 20dp; margin-right: 8dp; }
.c .n { flex: 1; white-space: nowrap; overflow: hidden; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; text-transform: uppercase; }
.c .r { width: 64dp; text-align: right; margin-left: 8dp; font-size: 16dp; }
/* a scroll bar at the right of the rows: the arrows and a click on the track above / below
the middle step a row (the classic list's own scroll); the thumb's place and size come from
the list (thumb_top / thumb_size), dragged it scrolls the list (rem_ui_hud.cpp) */
.sbar { position: absolute; right: 6dp; top: 66dp; bottom: 12dp; width: 20dp; display: flex; flex-direction: column; align-items: center; }
.sbar .ar { width: 20dp; height: 20dp; line-height: 20dp; text-align: center; font-size: 11dp; color: #5cc8f0; }
.sbar .ar:hover { color: #f2b13c; background-color: #f2b13c1f; }
.sbar .ar.off { color: #2b6f9e; }
.sbar .ar.off:hover { color: #2b6f9e; background-color: transparent; }
.sbar .track { position: relative; flex: 1; width: 20dp; margin: 2dp 0; }
.sbar .rail { position: absolute; left: 8dp; top: 0; bottom: 0; width: 4dp; background-color: #24405c; }
.sbar .thumb { position: absolute; left: 7dp; width: 6dp; background-color: #5cc8f0; drag: drag; }
.sbar .zu, .sbar .zd { position: absolute; left: 0; right: 0; height: 50%; }
.sbar .zu { top: 0; }
.sbar .zd { top: 50%; }
.sbar .track:hover .thumb { background-color: #f2b13c; }
.tname { font-weight: 600; font-size: 22dp; letter-spacing: 1dp; color: #e8f1fa; text-transform: uppercase; }
.tsub { font-size: 15dp; letter-spacing: 1dp; color: #8fb3d0; margin-bottom: 10dp; }
.tbar { display: flex; flex-direction: row; align-items: center; height: 20dp; margin: 3dp 0; }
.tbar .l { width: 74dp; font-weight: 600; font-size: 13dp; letter-spacing: 2dp; color: #b9d4ea; }
.tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 10dp; }
.tbtns .ico { width: 40dp; height: 40dp; }
/* --- bottom right: status ------------------------------------------------------------- */
.rhead { right: 8dp; bottom: 342dp; width: 310dp; height: 42dp; decorator: ninepatch(fht, fht-i); display: flex; flex-direction: row; align-items: center; padding: 0 12dp 0 22dp; }
.rhead .ico { width: 26dp; height: 26dp; margin: 0 4dp 0 10dp; }
.rhead .cnt { font-weight: 600; font-size: 18dp; }
/* 10 weapons fit (a ship may carry more: the list scrolls; it drew the 9th and on outside the frame) */
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 334dp; decorator: ninepatch(fbrt, fbrt-i); padding: 12dp 16dp; }
.rbody .wl { height: 100%; overflow-y: auto; }
.w { display: flex; flex-direction: row; align-items: center; height: 28dp; padding: 0 6dp 0 8dp; border-left: 3dp #00000000; border-bottom: 1dp #24405c66; font-weight: 500; font-size: 16dp; letter-spacing: 1dp; color: #8197ad; text-transform: uppercase; }
.w:hover { background-color: #3a8fc822; }
.w.on { color: #e8f4ff; border-left-color: #5cc8f0; background-color: #5cc8f014; }
.w .k { width: 30dp; font-size: 14dp; color: #5cc8f0; }
.w .n { flex: 1; white-space: nowrap; overflow: hidden; }
.w .a { margin-left: 8dp; color: #b9d4ea; }
.w.cloak { margin-top: 4dp; color: #8fb8d8; }
.w.cloak.on { color: #b98cf2; border-left-color: #b98cf2; }
/* the cloak's time left (rem-server [Native.Cloak] MaxSeconds) */
.cloakbar { height: 4dp; margin: 2dp 6dp 0 11dp; background-color: #b98cf222; }
.cloakbar .fill { height: 100%; background-color: #b98cf2; }
/* the jump drive (rem-server [Native.JumpDrive]): charging, cooling down */
.w.jump { color: #8fb8d8; }
.w.jump .f { margin-left: 8dp; font-size: 13dp; color: #9fb4c8; }
.w.jump.on { color: #f2b45c; border-left-color: #f2b45c; }
.w.jump.goal { color: #5cc8f0; border-left-color: #5cc8f0; }
.w.jump.wpelse { color: #8197ad; border-left-color: #8197ad; }
.w.jump.wpelse.reach { color: #f2b13c; border-left-color: #f2b13c; }
/* REM: the system picked as the target - a frame in space in its direction (as the target bracket) */
#sysmark { position: absolute; display: none; width: 0; height: 0; }
#sysmark.on { display: block; }
#sysmark .bk { position: absolute; width: 14dp; height: 14dp; border-color: #5cc8f0; }
#sysmark .tl { left: -26dp; top: -26dp; border-left: 2dp; border-top: 2dp; }
#sysmark .tr { left: 12dp; top: -26dp; border-right: 2dp; border-top: 2dp; }
#sysmark .bl { left: -26dp; top: 12dp; border-left: 2dp; border-bottom: 2dp; }
#sysmark .br { left: 12dp; top: 12dp; border-right: 2dp; border-bottom: 2dp; }
#sysmark .dot { position: absolute; left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #f2c94c; }
#sysmark .t { position: absolute; left: 32dp; top: -20dp; white-space: nowrap; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbf3ff; font-effect: shadow(1dp 1dp #03070d); }
#sysmark .t .d { display: block; font-size: 12dp; color: #5cc8f0; }
/* REM: ... out of the picture: an arrow at the screen's edge towards it */
#sysarrow { position: absolute; display: none; width: 0; height: 0; }
#sysarrow.on { display: block; }
#sysarrow .a { position: absolute; left: -14dp; top: -14dp; width: 28dp; height: 28dp; line-height: 28dp; text-align: center; font-size: 24dp; color: #5cc8f0; font-effect: shadow(1dp 1dp #03070d); transform-origin: 50% 50%; }
#sysarrow .t { position: absolute; width: 120dp; text-align: center; white-space: nowrap; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbf3ff; font-effect: shadow(1dp 1dp #03070d); }
#sysarrow .t .d { display: block; font-size: 12dp; color: #5cc8f0; }
.cloakbar.jumpbar { background-color: #f2b45c22; }
.cloakbar.jumpbar .fill { background-color: #f2b45c; }
.fp.special { left: 50%; margin-left: -300dp; width: 600dp; bottom: 250dp; decorator: none; pointer-events: none; text-align: center;
color: #f2d23c; font-size: 16dp; letter-spacing: 1dp; font-effect: shadow(1dp 1dp #000000cc); }
/* --- the cruise engine's countdown / charge (HUD_CruiseProgress). With the ring: an arc of 16 segments (-55 to +55 degrees) around
the top of the ring that fills from left to right, a glow riding its tip, caption and number above it;
the countdown shows the arc empty and the seconds pulsing; a full charge flashes the arc. With the bars:
a band of chevrons with a light running along it. It moves and sizes with the ship status but shows when
that is hidden (its own layer, the ship status' transform) */
.fp.cruisearc { left: 50%; margin-left: -310dp; bottom: 8dp; width: 620dp; height: 170dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
.grp .fp.cruisearc, .grp .fp.cruiseband { pointer-events: none; }
.cruisearc segarc { display: block; position: absolute; left: 0; top: 0; width: 1dp; height: 1dp; }
.cruisearc .glow { position: absolute; width: 44dp; height: 44dp; decorator: radial-gradient(circle, #ffe2a0e6 0%, #f2b13c80 30%, #f2b13c00 70%); animation: 0.9s sine-in-out infinite cr-glow; }
@keyframes cr-glow { 0% { opacity: 0.65; } 50% { opacity: 1; } 100% { opacity: 0.65; } }
.cruisearc .head { position: absolute; left: 160dp; width: 300dp; top: -58dp; text-align: center; }
.cruisearc .cv { display: block; font-family: "IBM Plex Mono"; font-size: 26dp; line-height: 30dp; color: #e8f4ff; }
.cruisearc .cc { display: block; margin-top: 2dp; font-weight: 600; font-size: 11dp; letter-spacing: 2.5dp; color: #f2b13c; text-transform: uppercase; white-space: nowrap; }
.cruisearc.count .cv { color: #f2b13c; font-size: 32dp; animation: 1s sine-in-out infinite cr-beat; }
@keyframes cr-beat { 0% { opacity: 1; } 50% { opacity: 0.35; } 100% { opacity: 1; } }
.cruisearc.count .glow { display: none; }
.cruisearc.done { animation: 0.35s sine-in-out 2 cr-flash; }
.cruisearc.done .cv, .cruisearc.done .cc { color: #5cc8f0; }
@keyframes cr-flash { 0% { opacity: 1; } 50% { opacity: 0.25; } 100% { opacity: 1; } }
.fp.cruiseband { left: 50%; margin-left: -200dp; bottom: 86dp; width: 400dp; height: 62dp; decorator: none; font-effect: shadow(1dp 1dp #000000cc); }
.cruiseband .cc { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-weight: 600; font-size: 11dp; letter-spacing: 2.5dp; color: #f2b13c; text-transform: uppercase; white-space: nowrap; }
.cruiseband .row { position: absolute; left: 20dp; right: 90dp; top: 22dp; height: 18dp; display: flex; flex-direction: row; overflow: hidden; }
.cruiseband .ch { flex: 1; height: 18dp; margin-right: 5dp; transform: skewX(-30deg); background-color: #f2b13c2a; }
.cruiseband .ch.lit { background-color: #f2b13c; }
.cruiseband .run { position: absolute; top: 0; width: 22%; height: 18dp; left: -22%; decorator: horizontal-gradient(#dcf6ff00 #dcf6ffcc); animation: 1.1s linear infinite cr-run; }
@keyframes cr-run { 0% { left: -22%; } 100% { left: 100%; } }
.cruiseband .cv { position: absolute; right: 0; top: 14dp; width: 80dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 24dp; color: #e8f4ff; }
.cruiseband.count .cv { color: #f2b13c; animation: 1s sine-in-out infinite cr-beat; }
.cruiseband.count .run { display: none; }
.cruiseband.done { animation: 0.35s sine-in-out 2 cr-flash; }
/* the HUD editor: four layers over the whole screen, each moved / sized as one */
.grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.grp .fp, .grp .tag { pointer-events: auto; }
.g0 { transform-origin: 50% 0%; }
.g1 { transform-origin: 50% 100%; }
.g2 { transform-origin: 0% 100%; }
.g3 { transform-origin: 100% 100%; }
.grp.gone { display: none; }
.grp.faded { opacity: 0.35; }
.editing .fp { decorator: ninepatch(fed, fed-i); drag: drag; cursor: move; }
.editing .tag { drag: drag; cursor: move; }
.editing .fp * { pointer-events: none; }
.tag { position: absolute; padding: 3dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-radius: 3dp; white-space: nowrap; }
.tag .eye { margin-right: 8dp; padding: 0 6dp; background-color: #05080d; color: #f2b13c; border-radius: 2dp; }
.tag .eye:hover { color: #ffffff; }
.edbar { position: absolute; left: 50%; margin-left: -300dp; top: 190dp; width: 600dp; padding: 14dp 18dp; background-color: #070b12f2; border: 2dp #f2b13c; border-radius: 6dp; text-align: center; pointer-events: auto; }
.edbar .et { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 20dp; letter-spacing: 2dp; color: #f2b13c; }
.edbar .eh { margin: 6dp 0 12dp 0; font-size: 14dp; color: #b9cbe0; }
.edbar .eb { display: flex; flex-direction: row; justify-content: center; }
.edbar .btn { margin: 0 4dp; }
</style>
</head>
<body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity">
<div id="sysmark"><div class="bk tl"></div><div class="bk tr"></div><div class="bk bl"></div><div class="bk br"></div><div class="dot"></div><div class="t">{{ sysmark_name }}<span class="d">{{ sysmark_dist }}</span></div></div>
<div id="sysarrow"><div class="a" id="sysarrow_tip">&#9650;</div><div class="t" id="sysarrow_text">{{ sysmark_name }}<span class="d">{{ sysmark_dist }}</span></div></div>
<!-- maneuvers -->
<div class="grp g0" data-grp="0" data-style-transform="grp[0].tf" data-class-gone="!grp[0].shown && !editing" data-class-faded="!grp[0].shown && editing">
<div class="tag" data-if="editing" style="left: 50%; margin-left: 310dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
<div class="fp all mans" data-if="maneuvers_shown || editing">
<div class="ib" data-for="m : maneuvers" data-class-on="m.active" data-class-off="m.disabled" data-action="maneuver" data-attr-data-arg="m.key"><img class="ico" data-attr-src="m.icon"/><span class="lb">{{ m.label }}</span></div>
</div>
<div class="fp small cruise" data-if="(maneuvers_shown && has_cruise) || editing" data-action="maneuver" data-arg="4">
<div class="ib" data-class-on="cruise_on"><img class="ico" src="3db:interface/HUD/hud_mnvrwarp.3db"/></div>
</div>
</div>
<!-- bottom centre -->
<div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing">
<div class="tag" data-if="editing &amp;&amp; core_ring" style="left: 50%; margin-left: -310dp; bottom: 184dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
<div class="tag" data-if="editing &amp;&amp; !core_ring" style="left: 50%; margin-left: -240dp; bottom: 82dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
<div data-if="(core || editing) &amp;&amp; core_ring">
<div class="fp all core">
<div class="disc"></div>
<shipwire class="ship"/>
<segarc cx="310" cy="92" r="60" w="10.5" h="7" n="32" a0="5.6" da="11.25" data-attr-lit="shield_n * 2" on="#4fc6ee" off="#4fc6ee26"/>
<segarc cx="310" cy="92" r="48" w="8" h="3" n="32" a0="5.6" da="11.25" data-attr-lit="hull_n * 2" on="#e0484e" off="#e0484e33"/>
<segarc cx="310" cy="420" r="370" w="10" h="8" n="16" a0="-42" da="2" data-attr-lit="power_n" on="#f0943c" off="#f0943c26"/>
<segarc cx="310" cy="420" r="384" w="10" h="4" n="16" a0="-42" da="2" data-attr-lit="thrust_n" data-attr-on="thrust_low ? '#ef6a5b' : '#dbe6f0'" off="#dbe6f026"/>
<segarc cx="310" cy="420" r="372" w="10" h="12" n="16" a0="42" da="-2" data-attr-lit="speed_n" on="#5cc8f0" off="#5cc8f026"/>
<div class="pc"><span class="s">{{ shield_t }}%</span><span class="h">{{ hull_t }}%</span></div>
<div class="side l">
<span class="cap">THRUST</span><span class="big" data-class-low="thrust_low">{{ thrust }}</span>
<span class="pw"><span class="cap">POWER</span>{{ power_t }}%</span>
</div>
<div class="side r">
<span class="big">{{ speed }}<span class="u">{{ speed_u }}</span></span><span class="cap">SPEED</span>
</div>
</div>
</div>
<div data-if="(core || editing) &amp;&amp; !core_ring">
<div class="fp all coreb">
<div class="val thrust" data-class-low="thrust_low"><span class="cap">THRUST</span>{{ thrust }}</div>
<div class="sep"></div>
<div class="bars">
<div class="brow power"><span class="l">POWER</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="power_n &gt; 0"></div><div class="sg" data-class-lit="power_n &gt; 1"></div><div class="sg" data-class-lit="power_n &gt; 2"></div><div class="sg" data-class-lit="power_n &gt; 3"></div><div class="sg" data-class-lit="power_n &gt; 4"></div><div class="sg" data-class-lit="power_n &gt; 5"></div><div class="sg" data-class-lit="power_n &gt; 6"></div><div class="sg" data-class-lit="power_n &gt; 7"></div><div class="sg" data-class-lit="power_n &gt; 8"></div><div class="sg" data-class-lit="power_n &gt; 9"></div><div class="sg" data-class-lit="power_n &gt; 10"></div><div class="sg" data-class-lit="power_n &gt; 11"></div><div class="sg" data-class-lit="power_n &gt; 12"></div><div class="sg" data-class-lit="power_n &gt; 13"></div><div class="sg" data-class-lit="power_n &gt; 14"></div><div class="sg" data-class-lit="power_n &gt; 15"></div></div></div></div>
<div class="brow shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="shield_n &gt; 0"></div><div class="sg" data-class-lit="shield_n &gt; 1"></div><div class="sg" data-class-lit="shield_n &gt; 2"></div><div class="sg" data-class-lit="shield_n &gt; 3"></div><div class="sg" data-class-lit="shield_n &gt; 4"></div><div class="sg" data-class-lit="shield_n &gt; 5"></div><div class="sg" data-class-lit="shield_n &gt; 6"></div><div class="sg" data-class-lit="shield_n &gt; 7"></div><div class="sg" data-class-lit="shield_n &gt; 8"></div><div class="sg" data-class-lit="shield_n &gt; 9"></div><div class="sg" data-class-lit="shield_n &gt; 10"></div><div class="sg" data-class-lit="shield_n &gt; 11"></div><div class="sg" data-class-lit="shield_n &gt; 12"></div><div class="sg" data-class-lit="shield_n &gt; 13"></div><div class="sg" data-class-lit="shield_n &gt; 14"></div><div class="sg" data-class-lit="shield_n &gt; 15"></div></div></div></div>
<div class="brow hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="hull_n &gt; 0"></div><div class="sg" data-class-lit="hull_n &gt; 1"></div><div class="sg" data-class-lit="hull_n &gt; 2"></div><div class="sg" data-class-lit="hull_n &gt; 3"></div><div class="sg" data-class-lit="hull_n &gt; 4"></div><div class="sg" data-class-lit="hull_n &gt; 5"></div><div class="sg" data-class-lit="hull_n &gt; 6"></div><div class="sg" data-class-lit="hull_n &gt; 7"></div><div class="sg" data-class-lit="hull_n &gt; 8"></div><div class="sg" data-class-lit="hull_n &gt; 9"></div><div class="sg" data-class-lit="hull_n &gt; 10"></div><div class="sg" data-class-lit="hull_n &gt; 11"></div><div class="sg" data-class-lit="hull_n &gt; 12"></div><div class="sg" data-class-lit="hull_n &gt; 13"></div><div class="sg" data-class-lit="hull_n &gt; 14"></div><div class="sg" data-class-lit="hull_n &gt; 15"></div></div></div></div>
</div>
<div class="sep"></div>
<div class="val speed"><span class="cap">SPEED</span>{{ speed }}<span class="u">{{ speed_u }}</span></div>
</div>
</div>
</div>
<!-- the cruise engine's countdown / charge (HUD_CruiseProgress): around the ship status' ring (or above its bars),
with the ship status' move and size, also while that is hidden -->
<div class="grp g1" data-style-transform="grp[1].tf">
<div class="fp cruisearc" data-if="cruise_bar &amp;&amp; core_ring" data-class-count="cruise_count" data-class-done="cruise_done">
<segarc cx="310" cy="92" r="84" w="9" h="7" n="16" a0="-55" da="7.3333" data-attr-lit="cruise_n" on="#f2b13c" off="#f2b13c30"/>
<segarc cx="310" cy="92" r="94" w="9" h="2" n="16" a0="-55" da="7.3333" data-attr-lit="cruise_n" on="#ffd27a99" off="#5cc8f026"/>
<segarc cx="310" cy="92" r="84" w="10" h="9" n="1" data-attr-a0="cruise_tip_a" da="0" data-attr-lit="cruise_n &gt; 0 ? 1 : 0" on="#fff1c8" off="#00000000"/>
<div class="glow" data-if="cruise_n &gt; 0" data-style-left="cruise_tip_l" data-style-top="cruise_tip_t"></div>
<div class="head"><span class="cv">{{ cruise_val }}</span><span class="cc">{{ cruise_cap }}</span></div>
</div>
<div class="fp cruiseband" data-if="cruise_bar &amp;&amp; !core_ring" data-class-count="cruise_count" data-class-done="cruise_done">
<span class="cc">&#187; {{ cruise_cap }} &#171;</span>
<div class="row"><div class="ch" data-class-lit="cruise_n &gt; 0"></div><div class="ch" data-class-lit="cruise_n &gt; 1"></div><div class="ch" data-class-lit="cruise_n &gt; 2"></div><div class="ch" data-class-lit="cruise_n &gt; 3"></div><div class="ch" data-class-lit="cruise_n &gt; 4"></div><div class="ch" data-class-lit="cruise_n &gt; 5"></div><div class="ch" data-class-lit="cruise_n &gt; 6"></div><div class="ch" data-class-lit="cruise_n &gt; 7"></div><div class="ch" data-class-lit="cruise_n &gt; 8"></div><div class="ch" data-class-lit="cruise_n &gt; 9"></div><div class="ch" data-class-lit="cruise_n &gt; 10"></div><div class="ch" data-class-lit="cruise_n &gt; 11"></div><div class="ch" data-class-lit="cruise_n &gt; 12"></div><div class="ch" data-class-lit="cruise_n &gt; 13"></div><div class="ch" data-class-lit="cruise_n &gt; 14"></div><div class="ch" data-class-lit="cruise_n &gt; 15"></div><div class="run"></div></div>
<span class="cv">{{ cruise_val }}</span>
</div>
<!-- the special view / flight mode (turret view, rear view, mouse flight ...: HUD_Status' SpecialModeText) as the original
shows it: centred above the ship status, not in the weapons list (Darki 2026-11-05) -->
<div class="fp special" data-if="special != ''">{{ special }}</div>
</div>
<!-- bottom left: contacts / target -->
<div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing">
<div class="tag" data-if="editing" style="left: 8dp; bottom: 390dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts &amp; target</div>
<div data-if="panel || editing">
<div class="fp lhead">
<span class="ttl">{{ mode == 1 ? 'TARGET' : 'CONTACTS' }}<span class="sl">\\\</span></span>
<span class="sp"></span>
<div class="ib" data-action="rts" title="Tactical view (F9)"><img class="ico" src="3db:interface/HUD/HUD_contactgroup.3db"/></div>
<div class="ib" data-for="t : tabs" data-class-on="t.active" data-action="tab" data-attr-data-arg="t.key"><img class="ico" data-attr-src="t.icon"/></div>
</div>
<div class="fp lbody"><div class="runner"><div class="p1"/><div class="p2"/><div class="p3"/><div class="p4"/><div class="p5"/><div class="p6"/></div>
<div data-if="mode == 1">
<div class="tsub" data-if="!has_target">No target</div>
<div data-if="has_target">
<div class="tname">{{ target_name }}</div>
<div class="tsub">{{ target_sub }} {{ target_rank }} {{ target_range }}</div>
<div class="tsub" data-if="target_crew != ''" style="color: #f2b13c; margin-top: -6dp;">{{ target_crew }}</div>
<div class="tbar hull"><span class="l">HULL</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_hull_n > 0"></div><div class="sg" data-class-lit="target_hull_n > 1"></div><div class="sg" data-class-lit="target_hull_n > 2"></div><div class="sg" data-class-lit="target_hull_n > 3"></div><div class="sg" data-class-lit="target_hull_n > 4"></div><div class="sg" data-class-lit="target_hull_n > 5"></div><div class="sg" data-class-lit="target_hull_n > 6"></div><div class="sg" data-class-lit="target_hull_n > 7"></div><div class="sg" data-class-lit="target_hull_n > 8"></div><div class="sg" data-class-lit="target_hull_n > 9"></div><div class="sg" data-class-lit="target_hull_n > 10"></div><div class="sg" data-class-lit="target_hull_n > 11"></div><div class="sg" data-class-lit="target_hull_n > 12"></div><div class="sg" data-class-lit="target_hull_n > 13"></div><div class="sg" data-class-lit="target_hull_n > 14"></div><div class="sg" data-class-lit="target_hull_n > 15"></div></div></div></div>
<div class="tbar shield" data-if="target_has_shield"><span class="l">SHIELD</span><div class="bar"><div class="chips"><div class="sg" data-class-lit="target_shield_n > 0"></div><div class="sg" data-class-lit="target_shield_n > 1"></div><div class="sg" data-class-lit="target_shield_n > 2"></div><div class="sg" data-class-lit="target_shield_n > 3"></div><div class="sg" data-class-lit="target_shield_n > 4"></div><div class="sg" data-class-lit="target_shield_n > 5"></div><div class="sg" data-class-lit="target_shield_n > 6"></div><div class="sg" data-class-lit="target_shield_n > 7"></div><div class="sg" data-class-lit="target_shield_n > 8"></div><div class="sg" data-class-lit="target_shield_n > 9"></div><div class="sg" data-class-lit="target_shield_n > 10"></div><div class="sg" data-class-lit="target_shield_n > 11"></div><div class="sg" data-class-lit="target_shield_n > 12"></div><div class="sg" data-class-lit="target_shield_n > 13"></div><div class="sg" data-class-lit="target_shield_n > 14"></div><div class="sg" data-class-lit="target_shield_n > 15"></div></div></div></div>
<div class="tbtns">
<div class="ib" data-for="b : target_buttons" data-action="tbutton" data-attr-data-arg="b.key"><img class="ico" data-attr-src="b.icon"/></div>
</div>
</div>
</div>
<div data-if="mode != 1 && contacts_shown">
<div class="filters">
<div class="ib" data-for="f : filters" data-class-on="f.active" data-action="filter" data-attr-data-arg="f.key"><img class="ico" data-attr-src="f.icon"/></div>
</div>
<div class="rows">
<div class="c" data-for="c : contacts" data-style-color="c.colour" data-action="row" data-ctx="contact" data-attr-data-arg="c.key">
<img data-attr-src="c.icon" data-style-image-color="c.colour"/><span class="n">{{ c.name }}</span><span class="r">{{ c.range }}</span>
</div>
</div>
<div class="sbar" data-if="more_up || more_down">
<div class="ar" data-class-off="!more_up" data-action="up">&#9650;</div>
<div class="track">
<div class="rail"></div>
<div class="zu" data-action="up"></div><div class="zd" data-action="down"></div>
<div class="thumb" data-style-top="thumb_top" data-style-height="thumb_size"></div>
</div>
<div class="ar" data-class-off="!more_down" data-action="down">&#9660;</div>
</div>
</div>
</div>
</div>
</div>
<!-- bottom right: the player's ship -->
<div class="grp g3" data-grp="3" data-style-transform="grp[3].tf" data-class-gone="!grp[3].shown && !editing" data-class-faded="!grp[3].shown && editing">
<div class="tag" data-if="editing" style="right: 8dp; bottom: 390dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons &amp; equipment</div>
<div data-if="status || editing">
<div class="fp rhead">
<span class="ttl">WEAPONS<span class="sl">\\\</span></span>
<span class="sp"></span>
<div class="ib" data-if="has_repair" data-action="repair"><img class="ico" src="3db:interface/hud/HUD_repairactivate.3db"/></div><span class="cnt" data-if="has_repair">{{ repair }}</span>
<div class="ib" data-if="has_battery" data-action="battery"><img class="ico" src="3db:interface/hud/HUD_shieldgaugeicon.3db"/></div><span class="cnt" data-if="has_battery">{{ battery }}</span>
<div class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
</div>
<div class="fp rbody"><div class="runner"><div class="p1"/><div class="p2"/><div class="p3"/><div class="p4"/><div class="p5"/><div class="p6"/></div><div class="wl">
<div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
<span class="k">{{ w.key + 1 }}</span><span class="n">{{ w.name }}</span><span class="a">{{ w.ammo }}</span>
</div>
<div class="w cloak" data-if="has_cloak" data-class-on="cloak_on" data-action="cloak"><span class="k"></span><span class="n">{{ cloak_name }}</span><span class="a">{{ cloak_bar ? cloak_left : (cloak_on ? 'ON' : 'OFF') }}</span></div>
<div class="cloakbar" data-if="has_cloak && cloak_bar"><div class="fill" data-style-width="cloak_width"></div></div>
<div class="w jump" data-if="jump_shown" data-class-on="jump_busy" data-action="jump"><span class="k"></span><span class="n">Jump Drive</span><span class="f">{{ jump_fuel }}</span><span class="a">{{ jump_text }}</span></div>
<div class="cloakbar jumpbar" data-if="jump_shown && jump_bar"><div class="fill" data-style-width="jump_width"></div></div>
<div class="w jump goal" data-if="jump_shown && jump_goal != ''"><span class="k"></span><span class="n">{{ jump_goal }}</span><span class="a">{{ jump_dist }}</span></div>
<div class="w jump wpelse" data-if="jump_shown && wp_else" data-class-reach="wp_else_reach" data-action="wpjump"><span class="k"></span><span class="n">{{ wp_else_text }}</span><span class="a">{{ wp_else_dist }}</span></div>
</div></div>
</div>
</div>
<!-- the HUD editor's bar -->
<div class="edbar" data-if="editing">
<div class="et">CUSTOMIZE HUD</div>
<div class="eh">Drag a part or its label to move it &#183; mouse wheel over it to size it &#183; Hide / Show on its label &#183; the REM bars, the radar and the chat by their tags &#183; Widgets: switch every part on or off. Parts snap to their home place.</div>
<div class="eb">
<div class="btn" data-action="ed_widgets">Widgets</div>
<div class="btn" data-action="ed_reset">Reset all</div>
<div class="btn" data-action="ed_cancel">Cancel</div>
<div class="btn primary" data-action="ed_save">Save</div>
</div>
</div>
</body>
</rml>