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>
438 lines
40 KiB
Plaintext
438 lines
40 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 */
|
|
/* the frame's edge alone over the whole window (hudframes fo); the head and the side bring
|
|
their fills with the cut corners, just inside the edge -- no fill over the map. The map
|
|
box is 760 dp (rem_ui_navmap.cpp kMapDp): the window only as big as map and side */
|
|
body.window { decorator: ninepatch(fo, fo-i); left: 19%; top: 7%; width: 1180dp; height: 880dp; max-width: none; }
|
|
.win-head { decorator: ninepatch(fh, fh-i); margin: 2dp 2dp 0 2dp; }
|
|
.win-main .content { padding: 0; }
|
|
.mapframe { display: flex; flex-direction: column; margin: 0 0 2dp 2dp; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
|
|
.mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
|
|
/* REM nav map: the grid's letters and numbers, large and clear over the chart (a dark shadow keeps them
|
|
readable on nebulae and fields) */
|
|
#map .gcol, #map .gnum { position: absolute; font-family: "Saira SemiCondensed"; font-size: 20dp; font-weight: bold; letter-spacing: 1dp;
|
|
color: #cfe6f8; font-effect: shadow(1dp 1dp #03070d); }
|
|
#map .gcol { top: 6dp; width: 28dp; margin-left: -14dp; text-align: center; }
|
|
#map .gnum { left: 8dp; height: 24dp; margin-top: -12dp; line-height: 24dp; }
|
|
#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: 0 2dp 2dp 0; padding: 18dp; decorator: ninepatch(fbr, fbr-i); 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; margin-bottom: 10dp; background-color: #5cc8f008; }
|
|
.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; margin-bottom: 10dp; border-left: 3dp #f2b13c; background-color: #5cc8f008; }
|
|
.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; background-color: #5cc8f008; }
|
|
.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; }
|
|
/* REM nav map: the symbol scaled about the item's point (its real size, at least the class's least size) */
|
|
.mi .sz { position: absolute; left: 0; top: 0; width: 0; height: 0; }
|
|
.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; max-height: 220dp; overflow-y: auto; background-color: #5cc8f008; }
|
|
.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; }
|
|
.bookmark.locked .s { border-color: #f2b13c; background-color: #8a6420; }
|
|
.bookmark.sel .s { border-color: #ffffff; }
|
|
/* REM: a bookmark's own colour over its dot; the group's shared waypoints */
|
|
.mi .bc { position: absolute; left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; }
|
|
.gwp .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #6fd08c; border: 2dp #05080d; transform: rotate(45deg); }
|
|
.gwp .lbl { color: #6fd08c; }
|
|
.clanm .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; border-radius: 5dp; background-color: #5cc8f0; border: 2dp #05080d; }
|
|
.clanm .lbl { color: #5cc8f0; }
|
|
.hit.fold { padding: 6dp 10dp 2dp 10dp; color: #f2b13c; font-size: 12dp; border-bottom: 0; }
|
|
.hit .dot { width: 8dp; height: 8dp; border-radius: 4dp; margin: 5dp 8dp 0 0; }
|
|
.hit .hw { font-size: 11dp; color: #8197ad; margin-left: 6dp; white-space: nowrap; }
|
|
.mtools { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin: 2dp 10dp 4dp 10dp; }
|
|
.mtools .mk { margin: 0 6dp 0 0; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
|
|
.mtools .mk:hover, .mtools .mk.on { color: #f2b13c; border-color: #f2b13c; }
|
|
.sw { width: 14dp; height: 14dp; border-radius: 7dp; margin: 0 5dp 0 0; border: 1dp #24405c; }
|
|
.sw:hover { border-color: #ffffff; }
|
|
.hit .mk { margin-left: 6dp; padding: 0 6dp; font-size: 11dp; color: #8197ad; border: 1dp #24405c; border-radius: 2dp; }
|
|
.hit .mk:hover { color: #f2b13c; border-color: #f2b13c; }
|
|
.hit .mk.del:hover { color: #ef6a5b; border-color: #ef6a5b; }
|
|
.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; decorator: ninepatch(fw, fw-i); }
|
|
.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; }
|
|
.ln.hole { border-top: 2dp #ef6a5b90; }
|
|
/* REM nav map (step 5): the sector view - each visited system's chart at its true size (at least 10 dp) */
|
|
.sshape { position: absolute; border: 1dp #5cc8f080; background-color: #5cc8f00a; }
|
|
.sshape.own { border-color: #7cf27cc0; background-color: #7cf27c10; }
|
|
.sshape.goal { border: 2dp #f2b13c; background-color: #f2b13c14; }
|
|
.ln.course { border-top: 2dp #f2b13c; }
|
|
.ln.border { border-top: 1dp #5cc8f040; }
|
|
.sshape.range { border: 1dp #f2b13c70; background-color: transparent; }
|
|
#map.sectorview .ln { display: block; }
|
|
#map.sectorview .mi .s { opacity: 1; }
|
|
/* REM nav map: the sector view as a game's star map - suns with a glow, borders that light up under the mouse,
|
|
the picked system ringed */
|
|
#map.sectorview .sshape { border-color: #5cc8f030; background-color: #5cc8f006; }
|
|
#map.sectorview .sshape.own { border-color: #7cf27c70; }
|
|
#map.sectorview .system .s { left: -12dp; top: -12dp; width: 24dp; height: 24dp; border-radius: 12dp; border-width: 0; background-color: #00000000;
|
|
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff3b8 16%, #f2c94cd8 30%, #f2a93c55 56%, #f2a93c00 100%);
|
|
transition: transform 0.25s cubic-out; }
|
|
#map.sectorview .system.hot .s { transform: scale(1.45); }
|
|
#map.sectorview .system.unvisited .s { opacity: 0.55; }
|
|
#map.sectorview .system .lbl { left: 14dp; top: -10dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1dp;
|
|
color: #cfe0f0; font-effect: shadow(1dp 1dp #03070d); transition: color 0.2s linear-in-out; }
|
|
#map.sectorview .system.own .lbl { color: #9df29d; }
|
|
#map.sectorview .system.hot .lbl { color: #ffffff; }
|
|
#map.sectorview .system.sel .lbl { color: #f2b13c; }
|
|
#map.sectorview .sel .ring2 { left: -20dp; top: -20dp; width: 36dp; height: 36dp; border-radius: 20dp; border: 2dp #f2b13c00;
|
|
border-top-color: #f2b13c; border-bottom-color: #f2b13c; animation: 3s infinite linear spin; }
|
|
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
|
@keyframes pulse { from { opacity: 0.45; } to { opacity: 1; } }
|
|
.ln.border { border-top: 1dp #5cc8f066; }
|
|
.ln.bhot { border-top: 2dp #8fdcff; animation: 0.9s infinite alternate pulse; }
|
|
.ln.bsel { border-top: 2dp #f2b13c; }
|
|
|
|
/* REM nav map: the side - the view switch, the tools, the picked system's card with its jump */
|
|
.seg { display: flex; flex-direction: row; margin-bottom: 8dp; border: 1dp #24405c; }
|
|
.seg .sg { flex: 1; text-align: center; padding: 7dp 0; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; letter-spacing: 2dp;
|
|
text-transform: uppercase; color: #8fb8d8; background-color: #0d1622; transition: background-color 0.15s linear-in-out; }
|
|
.seg .sg:hover { background-color: #122a40; color: #dbf3ff; }
|
|
.seg .sg.on { background-color: #f2b13c; color: #10161d; }
|
|
.tools { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; }
|
|
.tools .tl { margin: 0 6dp 6dp 0; padding: 3dp 10dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8fb8d8; border: 1dp #24405c; }
|
|
.tools .tl:hover { color: #dbf3ff; border-color: #5cc8f0; }
|
|
.tools .tl.on { color: #f2b13c; border-color: #f2b13c; }
|
|
.tools .tl.warn:hover { color: #ef6a5b; border-color: #ef6a5b; }
|
|
.scard { padding: 14dp; margin-bottom: 10dp; background-color: #5cc8f00c; border-left: 3dp #f2b13c; }
|
|
.scard .sh { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
|
.scard .sun { width: 34dp; height: 34dp; border-radius: 17dp; margin-right: 12dp;
|
|
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff3b8 18%, #f2c94cd0 36%, #f2a93c40 64%, #f2a93c00 100%); }
|
|
.scard .n { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 22dp; letter-spacing: 1dp; }
|
|
.scard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
|
|
.scard .row { display: flex; flex-direction: row; font-size: 13dp; color: #8197ad; margin-bottom: 10dp; }
|
|
.scard .row .v { flex: 1; text-align: right; font-family: "IBM Plex Mono"; color: #dbe6f0; }
|
|
.scard .why { font-size: 12dp; color: #ef9a5b; margin: 6dp 0 2dp 0; }
|
|
.scard .acts { display: flex; flex-direction: row; margin-top: 8dp; }
|
|
.scard .acts .btn { display: block; margin: 0 6dp 0 0; }
|
|
.scard.hintc { border-left-color: #24405c; font-size: 13dp; color: #8197ad; }
|
|
.jumpbtn { padding: 9dp 0; text-align: center; font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 17dp; letter-spacing: 3dp;
|
|
color: #10161d; background-color: #f2b13c; transition: background-color 0.15s linear-in-out; }
|
|
.jumpbtn:hover { background-color: #ffd27a; }
|
|
.jumpbtn.off, .jumpbtn.off:hover { color: #6b7d90; background-color: #1a2533; }
|
|
.wcard { padding: 12dp 14dp; margin-bottom: 10dp; background-color: #5cc8f00c; border-left: 3dp #8197ad; }
|
|
.wcard.reach { border-left-color: #f2b13c; }
|
|
.wcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
|
|
.wcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; margin: 2dp 0; }
|
|
.wcard .v { font-size: 13dp; color: #9fb4c8; margin-bottom: 8dp; }
|
|
.wcard.reach .v { color: #f2b13c; }
|
|
|
|
/* the original's look (player's wish): lanes, jump links, the route and every marker are drawn by
|
|
the original map under the box (NeuroNetNavMap::RemDrawBackground); ours stay as names, the
|
|
selection ring and the bookmarks (REM's own) */
|
|
.ln { display: none; }
|
|
.mi .s { opacity: 0; }
|
|
.bookmark .s { opacity: 1; }
|
|
|
|
/* LARGE SKIES: a system view is drawn by this window alone (#map.own, set by the window): a dark
|
|
chart with a grid that follows the zoom, the lanes as lines, and markers of a fixed size on
|
|
the screen, shaded to look like bodies -- lit from the upper left */
|
|
/* the box is cleared and the real objects are drawn under it (rem_navmap_models): see-through
|
|
once the window stands */
|
|
#map.own { background-color: #03070d; }
|
|
#map.own.revealed { background-color: #03070d00; }
|
|
#map.own .real .s { opacity: 0; }
|
|
/* REM nav map (step 4): the chart's shape and edge are drawn under the box (rem_navmap_models DrawChartMask:
|
|
a square for Sirius, a circle for Sol); a square chart has its A..H / 1..8 again (a round one has none) */
|
|
#map.own .ln { display: block; }
|
|
#map.own .mi .s { opacity: 1; }
|
|
#map.own .ln.lane { border-top: 2dp #2a8fc2c0; }
|
|
.gl { position: absolute; }
|
|
.gl.v { width: 0; }
|
|
.gl.h { height: 0; }
|
|
.gl.v.fine { border-left: 1dp #5cc8f024; }
|
|
.gl.h.fine { border-top: 1dp #5cc8f024; }
|
|
/* REM nav map: the 8 x 8 grid clear over the darkened backdrop */
|
|
.gl.v.sect { border-left: 2dp #5cc8f090; }
|
|
.gl.h.sect { border-top: 2dp #5cc8f090; }
|
|
#map.own .planet .s { left: -9dp; top: -9dp; width: 18dp; height: 18dp; border-radius: 9dp; border-width: 0; background-color: #3d79b8;
|
|
decorator: radial-gradient(circle at 34% 30%, #e4f2ff 0%, #6fb0ea 22%, #2f67a6 55%, #102744 85%, #050c16 100%); }
|
|
#map.own .sun .s { left: -17dp; top: -17dp; width: 34dp; height: 34dp; border-radius: 17dp; border-width: 0; background-color: #00000000;
|
|
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff3b8 18%, #f2c94cd0 34%, #f2a93c50 60%, #f2a93c00 100%); }
|
|
#map.own .station .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #3f9fd0;
|
|
border-width: 2dp; border-top-color: #e6f7ff; border-left-color: #b9e6fb; border-right-color: #1f5f86; border-bottom-color: #0e3550;
|
|
decorator: linear-gradient(135deg, #8fd6f5 0%, #3f9fd0 50%, #1d6a94 100%); }
|
|
#map.own .gate .s { border-top-color: #e3ceff; border-left-color: #c9a8f5; border-right-color: #6a45a0; border-bottom-color: #432a6b; }
|
|
#map.own .hole .s { border-top-color: #ffc1b8; border-left-color: #f58e80; border-right-color: #9b3528; border-bottom-color: #5f1c14; }
|
|
#map.own .platform .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; background-color: #d9584a;
|
|
border-width: 1dp; border-top-color: #ffc9c2; border-left-color: #f59a8f; border-right-color: #8f2c21; border-bottom-color: #591710; }
|
|
#map.own .object .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #8197ad;
|
|
decorator: radial-gradient(circle at 34% 30%, #f1f6fb 0%, #9db1c6 40%, #47586b 100%); }
|
|
#map.own .ring .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #2a8fc2;
|
|
decorator: radial-gradient(circle at 34% 30%, #d6f1ff 0%, #2a8fc2 55%, #0f3f5c 100%); }
|
|
/* REM nav map: the own ship is drawn as its model (rem_navmap_models); the window rings it, a notch to its heading */
|
|
#map.own .player .s { left: -17dp; top: -17dp; width: 30dp; height: 30dp; border-radius: 17dp; border: 2dp #7cf27c55;
|
|
border-top-color: #7cf27c; border-bottom-color: #7cf27c55; }
|
|
#map.own .mi .lbl { color: #c9d9ea; font-size: 12dp; }
|
|
#map.own .planet .lbl, #map.own .sun .lbl { left: 14dp; top: -9dp; font-size: 13dp; color: #e6f0fa; }
|
|
/* REM nav map (step 6): the galaxy view - a dark sky (the Orion arm's veil), the nearest stars as scenery, each
|
|
sector as its main star (colour by spectral type; Sirius with its companion on its orbit), a ring of its
|
|
systems (the discovered ones lit), the distance between the sectors; the Milky Way small in the corner */
|
|
#map.galaxyview, #map.galaxyview.revealed, #map.galaxyview.own.revealed, #map.plainsec, #map.plainsec.revealed, #map.plainsec.own.revealed { background-color: #02040a;
|
|
decorator: radial-gradient(circle at 70% 85%, #1a2c5238 0%, #0b142a20 40%, #02040a00 75%); }
|
|
#map.galaxyview .ln, #map.galaxyview .mi .s, #map.galaxyview.own .mi .s { display: block; opacity: 1; }
|
|
#map .mi .b2, #map .mi .ring3 { display: none; }
|
|
#map .gstar .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #cfe0f0; }
|
|
#map .gstar .lbl { left: 7dp; top: -7dp; font-size: 11dp; color: #6f8296; }
|
|
#map .gsector .s { left: -12dp; top: -12dp; width: 24dp; height: 24dp; border-radius: 12dp; border-width: 0; background-color: #00000000;
|
|
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #fff6c8 16%, #f2c94cd0 32%, #f2a93c50 58%, #f2a93c00 100%); }
|
|
#map .gsector.sA .s, #map .gsector.sB .s { decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #e8f4ff 18%, #9cc8ffd8 34%, #5c8cf050 60%, #5c8cf000 100%); }
|
|
#map .gsector.sM .s, #map .gsector.sK .s { decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffd9b0 16%, #f28c4cd0 32%, #e0603c50 58%, #e0603c00 100%); }
|
|
#map .gsector .lbl { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 18dp; letter-spacing: 2dp; color: #e6f0fa;
|
|
font-effect: shadow(1dp 1dp #03070d); }
|
|
#map .gsector.here .lbl { color: #9df29d; }
|
|
#map .gsector.binary .b2 { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; animation: 14s infinite linear spin; }
|
|
#map .gsector .b2 .bb { position: absolute; left: 20dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #ffffff;
|
|
decorator: radial-gradient(circle at 50% 50%, #ffffff 0%, #dbeaff 50%, #9cc8ff00 100%); }
|
|
#map .gsector.here .ring3 { display: block; position: absolute; left: -46dp; top: -46dp; width: 88dp; height: 88dp; border-radius: 46dp;
|
|
border: 2dp #7cf27c; animation: 1.6s infinite alternate pulse; }
|
|
#map .gdot .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #3d5a78; }
|
|
#map .gdot.on .s { background-color: #8fdcff; }
|
|
#map .gdist .lbl { width: 60dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8fb8d8; }
|
|
#map .ln.gline { border-top: 1dp #8fb8d870; }
|
|
.ginset { position: absolute; left: 10dp; bottom: 10dp; width: 180dp; height: 180dp; border: 1dp #24405c; background-color: #02040ae0; }
|
|
.ginset img { position: absolute; left: 0; top: 0; width: 180dp; height: 180dp; }
|
|
.ginset .ghere { position: absolute; left: 83dp; top: 125dp; width: 10dp; height: 10dp; border-radius: 6dp; border: 2dp #7cf27c;
|
|
animation: 1.2s infinite alternate pulse; }
|
|
.ginset .gcap { position: absolute; left: 0; right: 0; bottom: 4dp; text-align: center; font-size: 11dp; letter-spacing: 1dp; color: #9df29d;
|
|
text-transform: uppercase; }
|
|
.ginset .gname { position: absolute; left: 0; right: 0; top: 4dp; text-align: center; font-size: 11dp; letter-spacing: 2dp; color: #8197ad;
|
|
text-transform: uppercase; }
|
|
.gcard { padding: 12dp 14dp; margin-bottom: 8dp; background-color: #5cc8f00c; border-left: 3dp #8fb8d8; }
|
|
.gcard.own { border-left-color: #7cf27c; }
|
|
.gcard .n { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 19dp; letter-spacing: 1dp; }
|
|
.gcard .k { font-size: 12dp; color: #8197ad; margin: 2dp 0 8dp 0; }
|
|
/* the sector view has no models: the ship stays the green arrow there */
|
|
#map.sectorview.own .player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-radius: 0; border-width: 0;
|
|
border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
|
|
</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="sl">\\\</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" data-class-sectorview="sector" data-class-galaxyview="galaxy">
|
|
<div class="region" data-for="r : regions" data-style-left="r.left" data-style-top="r.top">{{ r.name }}</div>
|
|
<div class="gl v fine" data-for="g : grid_fv" data-style-left="g.left" data-style-top="g.top" data-style-height="g.name"></div>
|
|
<div class="gl h fine" data-for="g : grid_fh" data-style-top="g.top" data-style-left="g.left" data-style-width="g.name"></div>
|
|
<div class="gl v sect" data-for="g : grid_sv" data-style-left="g.left" data-style-top="g.top" data-style-height="g.name"></div>
|
|
<div class="gl h sect" data-for="g : grid_sh" data-style-top="g.top" data-style-left="g.left" data-style-width="g.name"></div>
|
|
<div class="gcol" data-for="g : grid_cols" data-style-left="g.left">{{ g.name }}</div>
|
|
<div class="gnum" data-for="g : grid_rows" data-style-top="g.top">{{ g.name }}</div>
|
|
<div class="uncharted-note" data-if="universe && uncharted && items.size == 0">No uncharted system visited yet.</div>
|
|
<div class="sshape" data-for="h : sector_shapes" data-class-own="h.own" data-class-goal="h.goal" data-class-range="h.range" data-style-left="h.left" data-style-top="h.top" data-style-width="h.size" data-style-height="h.size" data-style-border-radius="h.radius"></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-class-hole="l.cls == 'hole'" data-class-course="l.cls == 'course'" data-class-border="l.cls == 'border'" data-class-bhot="l.cls == 'bhot'" data-class-bsel="l.cls == 'bsel'" 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' : '') + (i.real ? ' real' : '')" data-style-left="i.left" data-style-top="i.top">
|
|
<div class="ring2" data-if="i.selected"></div>
|
|
<div class="ring3"></div><div class="b2"><div class="bb"></div></div>
|
|
<div class="sz" data-style-transform="i.scale"><div class="s" data-style-transform="i.rot"></div></div>
|
|
<div class="bc" data-if="i.color != ''" data-style-background-color="i.color"></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 class="pb" data-if="can_mark" data-action="bookmark">Set bookmark</div>
|
|
<div class="pb" data-if="pick_mark" data-action="mark_lock">{{ mark_locked ? 'Unlock bookmark' : 'Lock bookmark' }}</div>
|
|
<div class="pb" data-if="pick_mark && !mark_locked" data-action="mark_del">Delete bookmark</div>
|
|
</div>
|
|
<div class="pop" data-if="sec_pop && sector" data-style-left="sec_pop_left" data-style-top="sec_pop_top">
|
|
<div class="pt">{{ sec_pick_name }}</div>
|
|
<div class="pt" style="color: #9fb4c8;" data-if="sec_pick_info != ''">{{ sec_pick_info }}</div>
|
|
<div class="pb" data-action="sec_open">Open system</div>
|
|
<div class="pb" data-if="sec_can_jump" data-action="sec_jump">Jump Drive here</div>
|
|
</div>
|
|
<div class="ginset" data-if="galaxy"><img src="img/galaxy.png"/><div class="gname">Milky Way</div><div class="ghere"></div><div class="gcap">You are here</div></div>
|
|
<div class="zoom">
|
|
<span class="v">{{ zoom }}</span>
|
|
<div class="btn" data-action="zoomall">All</div>
|
|
<div class="btn" data-action="zoomship">Ship</div>
|
|
<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="seg">
|
|
<div class="sg" data-class-on="galaxy" data-action="galaxy">Galaxy</div>
|
|
<div class="sg" data-class-on="sector" data-action="sector">Sector</div>
|
|
<div class="sg" data-class-on="!universe && !sector && !galaxy" data-action="tool" data-arg="myship">System</div>
|
|
</div>
|
|
<div class="tools">
|
|
<div class="tl" data-class-on="labels" data-action="labels">Names</div>
|
|
<div class="tl warn" data-if="waypoints != '0'" data-action="tool" data-arg="clearall">Clear waypoints</div>
|
|
<div class="tl warn" data-if="can_abort" data-action="abort">Abort mission</div>
|
|
</div>
|
|
<div class="scard" data-if="sec_card">
|
|
<div class="sh"><div class="sun"></div><div><div class="n">{{ sec_pick_name }}</div><div class="k">{{ sec_pick_info }}</div></div></div>
|
|
<div class="row" data-if="sec_pick_dist != ''"><span>Distance</span><span class="v">{{ sec_pick_dist }}</span></div>
|
|
<div class="jumpbtn" data-class-off="!sec_can_jump" data-action="sec_jump">Jump drive</div>
|
|
<div class="why" data-if="!sec_can_jump">{{ sec_jump_why }}</div>
|
|
<div class="acts"><div class="btn" data-action="sec_open">Open system</div></div>
|
|
</div>
|
|
<div data-if="galaxy">
|
|
<div class="gcard" data-for="g : gal_cards" data-class-own="g.own">
|
|
<div class="n">{{ g.name }}</div>
|
|
<div class="k">{{ g.info }}</div>
|
|
<div class="btn" data-action="gal_open" data-attr-data-arg="g.key">Open sector</div>
|
|
</div>
|
|
<div class="scard hintc">Sectors show once you have been to one of their systems. Click a star or wheel in to open its sector; wheel out of a sector to come back here.</div>
|
|
</div>
|
|
<div class="scard hintc" data-if="sector && !sec_card">Click a system to pick it - its jump is here and in the HUD (the jump drive key). Wheel zooms, drag moves, double click opens a system.</div>
|
|
<div class="wcard" data-if="wp_else" data-class-reach="wp_else_reach">
|
|
<div class="k">Waypoint in another system</div>
|
|
<div class="n">{{ wp_else_text }}</div>
|
|
<div class="v">{{ wp_else_dist }} - {{ wp_else_reach ? 'in jump range' : 'out of jump range' }}</div>
|
|
<div class="jumpbtn" data-if="wp_else_reach" data-action="wpjump">Jump to waypoint</div>
|
|
</div>
|
|
<div class="pcard" data-if="has_pick && !sector && !galaxy">
|
|
<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="universe && uncharted_list.size > 0 && search == ''">
|
|
<h3>Known uncharted systems</h3>
|
|
<div class="hit" data-for="u : uncharted_list"><span class="hn">{{ u.name }}</span><span class="hk">{{ u.kind }}</span></div>
|
|
</div>
|
|
<div class="marks" data-if="search == ''">
|
|
<h3>Bookmarks</h3>
|
|
<div class="mtools">
|
|
<span class="mk" data-class-on="marks_all" data-action="marks_all">All systems<span class="tip">Every bookmark, of every system - a click goes there, a double click sets a waypoint (the route).</span></span>
|
|
<span class="mk" data-action="marks_export">Export<span class="tip">Copies the bookmarks as text (REM-BOOKMARK lines) - to paste into Discord or a file.</span></span>
|
|
<span class="mk" data-action="marks_import">Import<span class="tip">Adds the REM-BOOKMARK lines of the clipboard (someone's export).</span></span>
|
|
</div>
|
|
<div class="hint" style="padding: 2dp 10dp;" data-if="marks_note != ''">{{ marks_note }}</div>
|
|
<div class="hint" style="padding: 2dp 10dp;" data-if="bookmarks.size == 0">No bookmarks here. Pick a place and press Bookmark.</div>
|
|
<div data-for="b : bookmarks">
|
|
<div class="hit fold" data-if="b.kind == 'folder'">{{ b.name }}</div>
|
|
<div class="hit" data-if="b.kind != 'folder'" data-action="gomark" data-dbl="markroute" data-ctx="mark" data-attr-data-arg="b.key"><span class="dot" data-style-background-color="b.color"></span><span class="hn">{{ b.name }}</span><span class="hw" data-if="b.where != ''">{{ b.where }}</span><span class="mk" data-action="mark_lock" data-attr-data-arg="b.key">{{ b.kind == 'locked' ? 'Unlock' : 'Lock' }}<span class="tip">{{ b.kind == 'locked' ? 'Locked: it can be neither moved nor deleted. Click to unlock.' : 'Lock it in place: no moving, no deleting.' }}</span></span><span class="mk del" data-if="b.kind != 'locked'" data-action="mark_del" data-attr-data-arg="b.key">×</span><span class="tip">Click: go there. Double click: a waypoint there (the route). Right click: more.</span></div>
|
|
</div>
|
|
<div data-if="pick_mark" style="margin: 6dp 10dp;">
|
|
<div style="display: flex; flex-direction: row; align-items: center;">
|
|
<span class="hint" style="margin-right: 6dp;">Folder</span>
|
|
<input class="text" type="text" data-value="mark_folder" maxlength="32" style="flex: 1; margin-right: 6dp;"/>
|
|
<div class="btn" style="margin: 0; padding: 1dp 8dp;" data-action="mark_folder_set">Set</div>
|
|
</div>
|
|
<div style="display: flex; flex-direction: row; align-items: center; margin-top: 6dp;">
|
|
<span class="hint" style="margin-right: 6dp;">Colour</span>
|
|
<span class="sw" style="background-color: #f2b13c;" data-action="mark_color" data-arg=""></span>
|
|
<span class="sw" style="background-color: #5cc8f0;" data-action="mark_color" data-arg="#5cc8f0"></span>
|
|
<span class="sw" style="background-color: #6fd08c;" data-action="mark_color" data-arg="#6fd08c"></span>
|
|
<span class="sw" style="background-color: #ef6a5b;" data-action="mark_color" data-arg="#ef6a5b"></span>
|
|
<span class="sw" style="background-color: #b48cf2;" data-action="mark_color" data-arg="#b48cf2"></span>
|
|
<span class="sw" style="background-color: #f2e85c;" data-action="mark_color" data-arg="#f2e85c"></span>
|
|
<span class="sw" style="background-color: #ffffff;" data-action="mark_color" data-arg="#ffffff"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="marks" data-if="search == ''">
|
|
<h3>Group route</h3>
|
|
<div class="mtools"><span class="mk" data-class-on="wp_sharing" data-action="wp_share">{{ wp_sharing ? 'Stop sharing' : 'Share my waypoints' }}<span class="tip">Your group sees your waypoints on its map (green diamonds) and can follow them.</span></span></div>
|
|
<div class="hint" style="padding: 2dp 10dp;">{{ wp_note }}</div>
|
|
<div class="hit" data-for="g : group_wps"><span class="hn">{{ g.name }}</span><span class="hw">{{ g.where }}</span><span class="mk" data-action="wp_follow" data-attr-data-arg="g.name">{{ g.kind == 'following' ? 'Stop following' : 'Follow' }}<span class="tip">Following: that pilot's waypoints become yours (and change with theirs) - the HUD shows them.</span></span></div>
|
|
</div>
|
|
<div class="pcard" data-if="!has_pick && !sector && !galaxy"><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>
|