REM-Client 1fca54f4: the sky between the systems, HUD system targets and jump fixes, nav map galaxy view and zones

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>
2026-11-13 15:48:27 +01:00
parent 218917a6c1
commit 1a1ed0d832
5 changed files with 195 additions and 30 deletions
@@ -134,6 +134,26 @@
        .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;
@@ -191,6 +211,8 @@
    </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">&#9650;</div><div class="t" id="sysarrow_text">{{ sysmark_name }}<span class="d">{{ sysmark_dist }}</span></div></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>
@@ -328,6 +350,8 @@
            <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>
@@ -14,9 +14,12 @@
        .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; }
-        #map .gcol, #map .gnum { position: absolute; font-family: "Saira SemiCondensed"; font-size: 13dp; letter-spacing: 1dp; color: #8fb3d0c0; }
-        #map .gcol { top: 4dp; width: 20dp; margin-left: -10dp; text-align: center; }
-        #map .gnum { left: 6dp; height: 16dp; margin-top: -8dp; line-height: 16dp; }
+        /* 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; }
@@ -44,6 +47,8 @@
        /* 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; }
@@ -104,6 +109,71 @@
        .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
@@ -120,23 +190,19 @@
        #map.own { background-color: #03070d; }
        #map.own.revealed { background-color: #03070d00; }
        #map.own .real .s { opacity: 0; }
-        /* LARGE SKIES: the system chart is round -- the corners are masked with the frame's colour, an
-           edge ring drawn over it */
-        .roundmask { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0;
-            decorator: radial-gradient(circle closest-side, #0d162200 99.2%, #0d1622ff 99.8%); }
-        .roundedge { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1dp #3d7fa8; border-radius: 380dp; }
-        #map.own .roundmask, #map.own .roundedge { display: block; }
-        #map.own .gcol, #map.own .gnum { display: none; }
+        /* 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 #5cc8f014; }
-        .gl.h.fine { border-top: 1dp #5cc8f014; }
-        .gl.v.sect { border-left: 1dp #5cc8f040; }
-        .gl.h.sect { border-top: 1dp #5cc8f040; }
+        .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;
@@ -152,9 +218,51 @@
            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%); }
-        #map.own .player .s { border-bottom-color: #7cf27c; }
+        /* 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">
@@ -168,7 +276,7 @@
    <div class="win-main">
        <div class="content">
            <div class="split">
-                <div class="mapframe"><div id="map" data-class-blank="universe &amp;&amp; uncharted">
+                <div class="mapframe"><div id="map" data-class-blank="universe &amp;&amp; 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>
@@ -177,14 +285,15 @@
                    <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="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="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="s" data-style-transform="i.rot"></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="roundedge"></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>
@@ -197,6 +306,13 @@
                        <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 &amp;&amp; !mark_locked" data-action="mark_del">Delete bookmark</div>
                    </div>
+                    <div class="pop" data-if="sec_pop &amp;&amp; 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>
@@ -207,14 +323,39 @@
                </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-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 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 &amp;&amp; !sector &amp;&amp; !galaxy" data-action="tool" data-arg="myship">System</div>
                    </div>
-                    <div class="pcard" data-if="has_pick">
+                    <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 &amp;&amp; !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 &amp;&amp; !sector &amp;&amp; !galaxy">
                        <div class="n">{{ pick_name }}</div>
                        <div class="k">{{ pick_kind }}</div>
                        <div class="acts">
@@ -273,7 +414,7 @@
                        <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"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
+                    <div class="pcard" data-if="!has_pick &amp;&amp; !sector &amp;&amp; !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 &gt; 0">
                        <div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp;">
                            <h3 style="flex: 1;">Route</h3>