192 lines
17 KiB
Plaintext
192 lines
17 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):
|
|
FL's panels, icons and bar colours, 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; background-color: #050a18e6; border: 3dp #3f9ad6; border-radius: 8dp; }
|
|
.fp.inner { border-color: #2b6f9e; }
|
|
.ico { width: 40dp; height: 40dp; margin: 0 3dp; }
|
|
.ib { display: inline-block; padding: 1dp; border: 2dp #00000000; border-radius: 4dp; }
|
|
.ib:hover { background-color: #f2b13c14; }
|
|
.ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
|
|
.ib.on { border-color: #f2b13c; background-color: #f2b13c1f; }
|
|
.ib.off { opacity: 0.35; }
|
|
|
|
/* --- the maneuver bar, top centre ------------------------------------------------- */
|
|
.mans { left: 50%; margin-left: -240dp; top: 8dp; width: 480dp; height: 88dp; padding: 0 10dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
|
|
.mans .ico { width: 64dp; height: 64dp; margin: 0 8dp; }
|
|
.cruise { left: 50%; margin-left: -206dp; top: 99dp; width: 74dp; height: 70dp; display: flex; justify-content: center; align-items: center; }
|
|
.cruise .ico { width: 52dp; height: 52dp; }
|
|
|
|
/* --- bottom centre: thrust | bars | speed ------------------------------------------- */
|
|
.thrust, .speed { bottom: 17dp; width: 78dp; height: 38dp; text-align: center; line-height: 38dp; font-size: 22dp; }
|
|
.thrust { left: 50%; margin-left: -222dp; }
|
|
.thrust.low { color: #ef6a5b; }
|
|
.speed { left: 50%; margin-left: 144dp; }
|
|
.bars { left: 50%; margin-left: -132dp; bottom: 8dp; width: 264dp; height: 56dp; padding: 0 8dp; display: flex; flex-direction: column; justify-content: center; }
|
|
.bar { position: relative; width: 242dp; height: 11dp; margin: 2dp 0; }
|
|
.chips { position: absolute; left: 0; top: 0; width: 242dp; height: 11dp; display: flex; flex-direction: row; }
|
|
.sg { flex: 1; height: 11dp; margin-right: 2dp; }
|
|
.sg:last-child { margin-right: 0; }
|
|
.fillbox { position: absolute; left: 0; top: 0; height: 11dp; overflow: hidden; }
|
|
.power .chips.dim .sg { background-color: #a7a15e33; }
|
|
.power .fillbox .sg { background-color: #c9c272; }
|
|
.shield .chips.dim .sg { background-color: #3e3db544; }
|
|
.shield .fillbox .sg { background-color: #5856dc; }
|
|
.hull .chips.dim .sg { background-color: #782a3355; }
|
|
.hull .fillbox .sg { background-color: #b53844; }
|
|
|
|
/* --- bottom left: target / contacts --------------------------------------------------- */
|
|
.lhead { left: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 6dp 0 10dp; }
|
|
.lhead .sp { flex: 1; }
|
|
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 12dp; }
|
|
.filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 4dp; }
|
|
.filters .ico { width: 36dp; height: 36dp; margin: 0 4dp; }
|
|
.rows { height: 200dp; }
|
|
.c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; }
|
|
.c:hover { background-color: #3a8fc822; }
|
|
.c img { width: 22dp; height: 22dp; margin-right: 6dp; }
|
|
.c .r { width: 52dp; text-align: right; margin-right: 10dp; font-size: 19dp; }
|
|
.c .n { flex: 1; white-space: nowrap; overflow: hidden; font-size: 19dp; }
|
|
.scroll { position: absolute; right: 6dp; bottom: 4dp; }
|
|
.scroll .btn { padding: 0 8dp; font-size: 14dp; margin-left: 4dp; }
|
|
.tname { font-size: 26dp; color: #e8f1fa; }
|
|
.tsub { font-size: 18dp; color: #8fb3d0; margin-bottom: 8dp; }
|
|
.tbar { display: flex; flex-direction: row; align-items: center; margin: 3dp 0; }
|
|
.tbar .l { width: 70dp; font-size: 17dp; color: #8fb3d0; }
|
|
.tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; }
|
|
.tbtns .ico { width: 44dp; height: 44dp; }
|
|
|
|
/* --- bottom right: status ------------------------------------------------------------- */
|
|
.rhead { right: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 10dp 0 8dp; }
|
|
.rhead .ico { width: 36dp; height: 36dp; margin: 0 4dp 0 10dp; }
|
|
.rhead .cnt { font-size: 22dp; margin-right: 10dp; }
|
|
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 16dp; }
|
|
.w { display: flex; flex-direction: row; height: 26dp; font-size: 23dp; color: #dbe6f0; }
|
|
.w:hover { background-color: #3a8fc822; }
|
|
.w.on { color: #7cf27c; }
|
|
.w .n { flex: 1; white-space: nowrap; overflow: hidden; }
|
|
.w .a { margin-left: 8dp; }
|
|
.special { color: #f2d23c; font-size: 18dp; margin-top: 6dp; }
|
|
/* 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 { border-color: #f2b13c; background-color: #2a1f0ae6; 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; }
|
|
.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: 250dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
|
|
<div class="fp 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"/></div>
|
|
</div>
|
|
<div class="fp 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: -132dp; bottom: 74dp;"><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 inner thrust" data-class-low="thrust_low">{{ thrust }}</div>
|
|
<div class="fp bars">
|
|
<div class="bar power"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="power"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
|
|
<div class="bar shield"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="shield"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
|
|
<div class="bar hull"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="hull"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
|
|
</div>
|
|
<div class="fp inner speed">{{ speed }}</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: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts & target</div>
|
|
<div data-if="panel || editing">
|
|
<div class="fp lhead">
|
|
<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 dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="target_hull"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div></div>
|
|
<div class="tbar shield" data-if="target_has_shield"><span class="l">Shield</span><div class="bar"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="target_shield"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></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="r">{{ c.range }}</span><span class="n">{{ c.name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="scroll">
|
|
<div class="btn" data-if="more_up" data-action="up">▲</div>
|
|
<div class="btn" data-if="more_down" data-action="down">▼</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: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons & equipment</div>
|
|
<div data-if="status || editing">
|
|
<div class="fp rhead">
|
|
<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="n">{{ w.key + 1 }} {{ w.name }}</span><span class="a">{{ w.ammo }}</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 to move it · mouse wheel over it to size it · Hide / Show on its label. Parts snap to their home place.</div>
|
|
<div class="eb">
|
|
<div class="btn" data-action="ed_reset">Reset HUD</div>
|
|
<div class="btn" data-action="ed_resetwin">Reset window places</div>
|
|
<div class="btn" data-action="ed_cancel">Cancel</div>
|
|
<div class="btn primary" data-action="ed_save">Save</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|