REM-Client 35d5ebdf: native system navigation, jump-drive HUD and nearby suns
This commit is contained in:
flathack committed
1 parent
3bce4e7b3e
commit
9f67091863
5 files changed
+97
-34
No files matched your search
+26
-34
@@ -22,15 +22,34 @@
|
||||
.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 { left: 50%; margin-left: -370dp; top: 8dp; width: 740dp; 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; }
|
||||
.mans .jump-control { position: relative; }
|
||||
.mans .jump-control.off { pointer-events: none; }
|
||||
.mans .jump-control .ico { image-color: #b9d4ea; }
|
||||
.mans .jump-control.on .ico { image-color: #f2b13c; }
|
||||
.mans .jump-control .state { font-size: 10dp; color: #b9d4ea; white-space: nowrap; }
|
||||
.jump-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2dp; background-color: #2b6f9e; }
|
||||
.jump-progress .fill { height: 2dp; background-color: #f2b13c; }
|
||||
.jump-info { position: absolute; top: 84dp; left: 50%; margin-left: -220dp; width: 440dp; text-align: center; color: #b9d4ea; font-size: 12dp; font-effect: shadow(1dp 1dp #03070d); pointer-events: none; }
|
||||
.system-pick { position: absolute; width: 24dp; height: 24dp; margin-left: -12dp; margin-top: -12dp; pointer-events: auto; cursor: pointer; color: #b9d4ea; text-align: center; }
|
||||
/* REM: geometric contact corners, independent of font glyph coverage. */
|
||||
.system-pick .corner { position: absolute; width: 4dp; height: 4dp; border-color: #b9d4eaaa; }
|
||||
.system-pick .tl { left: 6dp; top: 6dp; border-left: 1dp; border-top: 1dp; }
|
||||
.system-pick .tr { right: 6dp; top: 6dp; border-right: 1dp; border-top: 1dp; }
|
||||
.system-pick .bl { left: 6dp; bottom: 6dp; border-left: 1dp; border-bottom: 1dp; }
|
||||
.system-pick .br { right: 6dp; bottom: 6dp; border-right: 1dp; border-bottom: 1dp; }
|
||||
.system-pick:hover .corner { border-color: #ffffff; }
|
||||
.system-pick .name { display: none; position: absolute; top: 24dp; left: -88dp; width: 200dp; font-size: 14dp; font-effect: shadow(1dp 1dp #03070d); }
|
||||
.system-pick:hover .name { display: block; }
|
||||
.system-pick:hover { color: #ffffff; }
|
||||
/* 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; }
|
||||
.cruise { left: 50%; margin-left: -356dp; 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; }
|
||||
|
||||
@@ -130,32 +149,8 @@
|
||||
/* 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
|
||||
@@ -211,14 +206,15 @@
|
||||
</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">▲</div><div class="t" id="sysarrow_text">{{ sysmark_name }}<span class="d">{{ sysmark_dist }}</span></div></div>
|
||||
<div class="system-pick" data-for="s : system_picks" data-style-left="s.left" data-style-top="s.top" data-action="system_pick" data-attr-data-arg="s.id"><span class="corner tl"></span><span class="corner tr"></span><span class="corner bl"></span><span class="corner br"></span><span class="name">{{ s.name }}</span></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="tag" data-if="editing" style="left: 50%; margin-left: 380dp; 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 class="ib jump-control" data-class-off="!jump_shown" data-class-on="jump_busy" data-action="jump" title="Jump to the selected system or waypoint. Click again to cancel."><img class="ico" src="img/jump-drive.png"/><span class="lb">Jump Drive</span><span class="state">{{ jump_text }}</span><div class="jump-progress" data-if="jump_shown && jump_bar"><div class="fill" data-style-width="jump_width"></div></div></div>
|
||||
</div>
|
||||
<div class="jump-info" data-if="jump_shown && jump_goal != ''">{{ jump_goal }} · {{ jump_dist }} {{ jump_fuel }}</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>
|
||||
@@ -300,7 +296,7 @@
|
||||
<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 hull" data-if="!target_system"><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>
|
||||
@@ -348,10 +344,6 @@
|
||||
</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>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128">
|
||||
<!-- REM: a ship crossing an open jump ring; monochrome for HUD tinting. -->
|
||||
<g fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M53 19C80 4 104 24 104 64s-24 60-51 45"/>
|
||||
<path d="M61 30c16-9 30 6 30 34s-14 43-30 34" stroke-width="3" opacity=".65"/>
|
||||
<path d="M13 46h26M7 64h24M13 82h26" stroke-width="4"/>
|
||||
</g>
|
||||
<path fill="#fff" d="M37 36l47 28-47 28 8-22 21-6-21-6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 536 B |
Reference in new issue
Block a user