172 lines
14 KiB
Plaintext
172 lines
14 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Nav map</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
/* the map box is clear: the nav map draws its own backgrounds under it (DrawUnder), so
|
|
the window's colour is laid around it instead of under the whole body */
|
|
body.window { background-color: transparent; }
|
|
.win-head { background-color: #0d1622eb; }
|
|
.win-main .content { padding: 0; }
|
|
.mapframe { display: flex; flex-direction: column; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
|
|
.mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
|
|
#map .region { position: absolute; width: 200dp; margin-left: -100dp; margin-top: -10dp; text-align: center; font-family: "Saira SemiCondensed"; font-size: 17dp; letter-spacing: 3dp; text-transform: uppercase; color: #dbe6f0b0; }
|
|
/* uncharted space has no map art: the whole box dark, never the scene through it */
|
|
#map.blank, #map.blank.revealed { background-color: #03070d; }
|
|
#map .uncharted-note { position: absolute; left: 0; right: 0; top: 360dp; text-align: center; color: #8197ad; font-size: 14dp; }
|
|
#map { position: relative; width: 760dp; height: 760dp; overflow: hidden; border: 1dp #24405c; cursor: pointer; background-color: #03070d; transition: background-color 0.3s cubic-out; }
|
|
/* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
|
|
#map.revealed { background-color: #03070d00; }
|
|
.side { flex: 1; margin-left: 0; padding: 18dp; background-color: #0d1622eb; display: flex; flex-direction: column; min-width: 0; }
|
|
.tbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10dp; }
|
|
.tbar .btn { display: block; margin: 0 6dp 6dp 0; }
|
|
.sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
|
|
.pcard { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
|
|
.pcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
|
.pcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
|
|
.pcard .btn { margin: 0 6dp 6dp 0; }
|
|
.pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
|
|
.pcard .acts .btn { display: block; }
|
|
.objs { padding: 10dp 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
|
|
.obj { white-space: pre-line; font-size: 13dp; line-height: 1.4; padding: 4dp 0; border-bottom: 1dp #ffffff08; }
|
|
.info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.zoom { position: absolute; right: 8dp; bottom: 8dp; display: flex; flex-direction: row; align-items: center; }
|
|
.zoom .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
|
|
.zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; }
|
|
|
|
/* map items: centred on their point */
|
|
.mi { position: absolute; width: 0; height: 0; }
|
|
.mi .s { position: absolute; }
|
|
.mi .lbl { position: absolute; left: 9dp; top: -8dp; white-space: nowrap; font-size: 11dp; color: #b9cbe0; }
|
|
.mi.sel .lbl { color: #f2b13c; }
|
|
.planet .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border-radius: 6dp; background-color: #3d79b8; border: 1dp #8fc2ff; }
|
|
.sun .s { left: -8dp; top: -8dp; width: 16dp; height: 16dp; border-radius: 8dp; background-color: #f2c94c; border: 1dp #fff2b0; }
|
|
.station .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #5cc8f0; border: 1dp #dbf3ff; }
|
|
.gate .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #b98cf2; transform: rotate(45deg); }
|
|
.hole .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #ef6a5b; border-radius: 6dp; }
|
|
.ring .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #2f6d8f; }
|
|
.platform .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; background-color: #ef6a5b; }
|
|
.object .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #8197ad; }
|
|
.system .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border-radius: 7dp; background-color: #f2c94c; border: 2dp #3d6d96; }
|
|
.system .lbl { font-size: 12dp; color: #dbe6f0; }
|
|
.player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
|
|
.hits, .marks { margin-bottom: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; max-height: 220dp; overflow-y: auto; }
|
|
.marks h3 { margin: 6dp 10dp 2dp 10dp; }
|
|
.hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
|
|
.hit:hover { background-color: #122033; color: #5cc8f0; }
|
|
.hit .hn { flex: 1; white-space: nowrap; overflow: hidden; }
|
|
.hit .hk { font-size: 12dp; color: #8197ad; }
|
|
.bookmark .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #f2b13c; border: 2dp #05080d; border-radius: 6dp; }
|
|
.bookmark .lbl { color: #f2b13c; }
|
|
.waypoint .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; border-radius: 2dp; }
|
|
.waypoint .lbl, .bestpath .lbl { left: -4dp; top: -7dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; }
|
|
.bestpath .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border: 2dp #5cc8f0; border-radius: 6dp; }
|
|
.bestpath .lbl { color: #5cc8f0; }
|
|
.group .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #7cf27c; }
|
|
.mi.sel .s { border-color: #f2b13c; }
|
|
.sel .ring2 { position: absolute; left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 1dp #f2b13c; border-radius: 12dp; }
|
|
|
|
/* the tools at the click point (as the classic map's ring of tools) */
|
|
.pop { position: absolute; width: 150dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 3dp; }
|
|
.pop .pt { font-size: 11dp; color: #f2b13c; padding: 2dp 6dp 4dp 6dp; white-space: nowrap; overflow: hidden; }
|
|
.pop .pb { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
|
|
.pop .pb:hover { background-color: #122033; color: #5cc8f0; }
|
|
|
|
/* lines: from their start, rotated */
|
|
.ln { position: absolute; height: 0; transform-origin: 0 0; }
|
|
.ln.jump { border-top: 2dp #3d6d96; }
|
|
.ln.lane { border-top: 3dp #2f6d8f; }
|
|
.ln.route { border-top: 3dp #5cc8f0; }
|
|
.ln.waypath { border-top: 3dp #f2b13c; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="navmap">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
|
|
<span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Waypoints <span class="v">{{ waypoints }}</span></span>
|
|
<span class="close" data-if="!briefing" data-action="tool" data-arg="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="split">
|
|
<div class="mapframe"><div id="map" data-class-blank="universe && uncharted">
|
|
<div class="region" data-for="r : regions" data-style-left="r.left" data-style-top="r.top">{{ r.name }}</div>
|
|
<div class="uncharted-note" data-if="universe && uncharted && items.size == 0">No uncharted system visited yet.</div>
|
|
<div class="ln" data-for="l : lines" data-class-jump="l.cls == 'jump'" data-class-lane="l.cls == 'lane'" data-class-route="l.cls == 'route'" data-class-waypath="l.cls == 'waypath'" data-style-left="l.left" data-style-top="l.top" data-style-width="l.width" data-style-transform="l.transform"></div>
|
|
<div class="mi" data-for="i : items" data-attr-class="'mi ' + i.cls + (i.selected ? ' sel' : '')" data-style-left="i.left" data-style-top="i.top">
|
|
<div class="ring2" data-if="i.selected"></div>
|
|
<div class="s" data-style-transform="i.rot"></div>
|
|
<div class="lbl" data-if="i.label != ''" data-style-left="i.lleft" data-style-top="i.ltop">{{ i.label }}</div>
|
|
</div>
|
|
<div class="pop" data-if="popup" data-style-left="pop_left" data-style-top="pop_top">
|
|
<div class="pt">{{ pick_name }}</div>
|
|
<div class="pb" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
|
|
<div class="pb" data-action="tool" data-arg="waypoint">Set waypoint</div>
|
|
<div class="pb" data-action="tool" data-arg="route">Plot route</div>
|
|
<div class="pb" data-if="can_target" data-action="tool" data-arg="target">Target</div>
|
|
<div class="pb" data-if="can_info" data-action="tool" data-arg="info">Info</div>
|
|
<div class="pb" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
|
|
</div>
|
|
<div class="zoom">
|
|
<span class="v">{{ zoom }}</span>
|
|
<div class="btn" data-action="zoomout">-</div>
|
|
<div class="btn" data-action="zoomin">+</div>
|
|
</div>
|
|
</div><div class="mapfill"></div></div>
|
|
<div class="side">
|
|
<div class="sysname">{{ system }}</div>
|
|
<div class="tbar">
|
|
<div class="btn" data-class-primary="universe" data-action="tool" data-arg="universe">Universe</div>
|
|
<div class="btn" data-if="has_uncharted" data-class-primary="uncharted" data-action="tool" data-arg="uncharted">Uncharted</div>
|
|
<div class="btn" data-action="tool" data-arg="myship">My system</div>
|
|
<div class="btn" data-class-primary="labels" data-action="labels">Names</div>
|
|
<div class="btn" data-action="tool" data-arg="clearall">Clear waypoints</div>
|
|
<div class="btn" data-if="can_abort" data-action="abort">Abort mission</div>
|
|
</div>
|
|
<div class="pcard" data-if="has_pick">
|
|
<div class="n">{{ pick_name }}</div>
|
|
<div class="k">{{ pick_kind }}</div>
|
|
<div class="acts">
|
|
<div class="btn" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
|
|
<div class="btn primary" data-action="tool" data-arg="waypoint">Set waypoint</div>
|
|
<div class="btn" data-action="tool" data-arg="route">Plot route</div>
|
|
<div class="btn" data-if="can_target" data-action="tool" data-arg="target">Target</div>
|
|
<div class="btn" data-if="can_info" data-action="tool" data-arg="info">Info</div>
|
|
<div class="btn" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
|
|
<div class="btn" data-if="can_mark" data-action="bookmark">Bookmark</div>
|
|
</div>
|
|
</div>
|
|
<input class="text" type="text" data-value="search" maxlength="40" style="margin-bottom: 6dp;"/>
|
|
<div class="hits" data-if="search != ''">
|
|
<div class="hint" style="padding: 6dp;" data-if="results.size == 0">Nothing on this map by that name.</div>
|
|
<div class="hit" data-for="r : results" data-action="result" data-attr-data-arg="r.key"><span class="hn">{{ r.name }}</span><span class="hk">{{ r.kind }}</span></div>
|
|
</div>
|
|
<div class="marks" data-if="bookmarks.size > 0 && search == ''">
|
|
<h3>Bookmarks</h3>
|
|
<div class="hit" data-for="b : bookmarks" data-action="gomark" data-ctx="mark" data-attr-data-arg="b.key"><span class="hn">{{ b.name }}</span></div>
|
|
</div>
|
|
<div class="pcard" data-if="!has_pick"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
|
|
<div class="objs" data-if="objectives.size > 0">
|
|
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp;">
|
|
<h3 style="flex: 1;">Route</h3>
|
|
<div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objup">↑</div>
|
|
<div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objdown">↓</div>
|
|
</div>
|
|
<div class="obj" data-for="o : objectives">{{ o }}</div>
|
|
</div>
|
|
<div class="info" data-if="show_info">{{ infocard }}</div>
|
|
<div class="tbar" data-if="show_info" style="margin-top: 8dp;">
|
|
<div class="btn" data-action="tool" data-arg="closeinfo">Close info</div>
|
|
</div>
|
|
<div style="flex: 1;" data-if="!show_info"></div>
|
|
<div class="btn primary" data-if="briefing" style="text-align: center;" data-action="tool" data-arg="continue">Continue</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|