Files
REM-Mod/EXE/remui/hud.rml
T

237 lines
22 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; }
.cruise { left: 50%; margin-left: -300dp; top: 90dp; width: 64dp; height: 56dp; display: flex; justify-content: center; align-items: center; }
.cruise .ico { width: 40dp; height: 40dp; }
/* --- bottom centre: thrust | shield / hull / power | speed, one panel ----------------- */
.core { left: 50%; margin-left: -240dp; bottom: 8dp; width: 480dp; height: 66dp; padding: 0 16dp; display: flex; flex-direction: row; align-items: center; }
.core .val { width: 76dp; text-align: center; font-weight: 600; font-size: 22dp; color: #e8f4ff; }
.core .val .u { font-weight: 400; font-size: 11dp; color: #8fb3d0; margin-left: 4dp; }
.core .cap { display: block; font-weight: 600; font-size: 9dp; letter-spacing: 1.5dp; color: #8fb3d0; }
.core .thrust.low { color: #ef6a5b; }
.core .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 --------------------------------------------------- */
.lhead { left: 8dp; bottom: 290dp; width: 310dp; height: 42dp; display: flex; flex-direction: row; align-items: center; padding: 0 8dp 0 22dp; }
.lhead .ico { width: 30dp; height: 30dp; }
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; 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: 196dp; margin-right: 22dp; }
.c { display: flex; flex-direction: row; align-items: center; height: 25dp; 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: 290dp; width: 310dp; height: 42dp; 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; }
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 12dp 16dp; }
.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; }
.special { color: #f2d23c; font-size: 16dp; letter-spacing: 1dp; margin-top: 8dp; }
/* 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">
<!-- 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" 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">
<div class="fp all core">
<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 > 0"></div><div class="sg" data-class-lit="power_n > 1"></div><div class="sg" data-class-lit="power_n > 2"></div><div class="sg" data-class-lit="power_n > 3"></div><div class="sg" data-class-lit="power_n > 4"></div><div class="sg" data-class-lit="power_n > 5"></div><div class="sg" data-class-lit="power_n > 6"></div><div class="sg" data-class-lit="power_n > 7"></div><div class="sg" data-class-lit="power_n > 8"></div><div class="sg" data-class-lit="power_n > 9"></div><div class="sg" data-class-lit="power_n > 10"></div><div class="sg" data-class-lit="power_n > 11"></div><div class="sg" data-class-lit="power_n > 12"></div><div class="sg" data-class-lit="power_n > 13"></div><div class="sg" data-class-lit="power_n > 14"></div><div class="sg" data-class-lit="power_n > 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 > 0"></div><div class="sg" data-class-lit="shield_n > 1"></div><div class="sg" data-class-lit="shield_n > 2"></div><div class="sg" data-class-lit="shield_n > 3"></div><div class="sg" data-class-lit="shield_n > 4"></div><div class="sg" data-class-lit="shield_n > 5"></div><div class="sg" data-class-lit="shield_n > 6"></div><div class="sg" data-class-lit="shield_n > 7"></div><div class="sg" data-class-lit="shield_n > 8"></div><div class="sg" data-class-lit="shield_n > 9"></div><div class="sg" data-class-lit="shield_n > 10"></div><div class="sg" data-class-lit="shield_n > 11"></div><div class="sg" data-class-lit="shield_n > 12"></div><div class="sg" data-class-lit="shield_n > 13"></div><div class="sg" data-class-lit="shield_n > 14"></div><div class="sg" data-class-lit="shield_n > 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 > 0"></div><div class="sg" data-class-lit="hull_n > 1"></div><div class="sg" data-class-lit="hull_n > 2"></div><div class="sg" data-class-lit="hull_n > 3"></div><div class="sg" data-class-lit="hull_n > 4"></div><div class="sg" data-class-lit="hull_n > 5"></div><div class="sg" data-class-lit="hull_n > 6"></div><div class="sg" data-class-lit="hull_n > 7"></div><div class="sg" data-class-lit="hull_n > 8"></div><div class="sg" data-class-lit="hull_n > 9"></div><div class="sg" data-class-lit="hull_n > 10"></div><div class="sg" data-class-lit="hull_n > 11"></div><div class="sg" data-class-lit="hull_n > 12"></div><div class="sg" data-class-lit="hull_n > 13"></div><div class="sg" data-class-lit="hull_n > 14"></div><div class="sg" data-class-lit="hull_n > 15"></div></div></div></div>
</div>
<div class="sep"></div>
<div class="val speed"><span class="cap">SPEED</span>{{ speed }}<span class="u">m/s</span></div>
</div>
</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: 340dp;"><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-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 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="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: 340dp;"><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="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_on ? 'ON' : 'OFF' }}</span></div>
<div class="special" data-if="special != ''">{{ special }}</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. Parts snap to their home place.</div>
<div class="eb">
<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>