New REM client: REM-Client 8cf8582, 64-bit (inventory by hardpoint with Mount / Unmount when docked; the equipment dealer's offers show their target hardpoint, AMMO, INTERNAL or INCOMPATIBLE; hold bar and credits at the commodity trader; the dealers' amount as a wide bar with a scale; the ship dealer's stats laid out again)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-06 08:56:38 +01:00
parent a4057593d5
commit c10e4953ac
5 changed files with 77 additions and 23 deletions
@@ -21,7 +21,20 @@
        .pick-head img { width: 40dp; height: 40dp; margin-right: 12dp; }
        .pick-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
        .jet { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
-        .jet input.range { margin-right: 10dp; }
+        .jet .abar { margin-right: 10dp; }
+        /* as the equipment dealer's list: the ship's hardpoints (what sits on each, the empty ones dim), what is mounted
+           without one, the hold -- not mounted, an amber edge; the hold's bar over the list (rem.rcss .dstat) */
+        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
+        .sec:first-child { margin-top: 0; }
+        .sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
+        .sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
+        .inv .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
+        .inv.empty .n { color: #5c7a94; }
+        .inv.empty .txt { margin-left: 40dp; }
+        .inv.held { border-left-color: #f2b13c66; }
+        .inv.held.selected { border-left-color: #f2b13c; }
+        .holdrow { display: flex; flex-direction: row; margin-bottom: 8dp; }
+        .holdrow .dstat { margin-left: 0; }
        .jet .btn { margin: 0; }
    </style>
 </head>
@@ -30,7 +43,6 @@
        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
        <span class="title">INVENTORY</span><span class="sl">\\\</span>
        <span class="spacer"></span>
-        <span class="chip">Hold <span class="v">{{ hold }}</span></span>
        <span class="close" data-action="close">&#215;</span>
    </div>
    <div class="win-main">
@@ -44,12 +56,26 @@
        <div class="content">
            <div class="split">
                <div class="colm list-col">
+                    <div class="holdrow"><div class="dstat"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div></div>
                    <input class="text search" type="text" data-value="search" maxlength="40" style="margin-bottom: 8dp;"/>
                    <div class="list">
-                        <div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing here.</div>
-                        <div class="inv" data-for="r : items" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                        <div class="sec" data-if="hps.size &gt; 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
+                        <div class="inv" data-for="r : hps" data-class-empty="r.key == ''" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
-                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note">{{ r.note }}</div></div>
+                            <div class="txt"><div class="n">{{ r.key == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
+                            <span class="c">{{ r.note }}</span>
+                        </div>
+                        <div class="sec" data-if="inside.size &gt; 0">MOUNTED, NO HARDPOINT</div>
+                        <div class="inv" data-for="r : inside" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <span class="c">{{ r.count }}</span>
+                        </div>
+                        <div class="sec held">CARGO HOLD &#183; NOT MOUNTED<span class="cnt">{{ items.size }}</span></div>
+                        <div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing in the hold.</div>
+                        <div class="inv held" data-for="r : items" data-class-selected="r.selected" data-action="pick" data-attr-data-arg="r.key">
+                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
                            <span class="c">{{ r.count }}</span>
                        </div>
                    </div>
@@ -59,8 +85,12 @@
                    <div data-if="has_pick">
                        <div class="pick-head"><img data-if="pick.icon != ''" data-attr-src="pick.icon"/><div><div class="t">{{ pick.name }}</div><div class="hint">{{ pick.note }}</div></div></div>
                        <div class="card">{{ info }}</div>
+                        <div class="jet" data-if="mount_label != ''"><div class="btn primary" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div></div>
                        <div class="jet" data-if="can_jettison">
-                            <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                            <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                                <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                                <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                            </div>
                            <span class="num" style="width: 60dp; text-align: right; margin-right: 12dp;">{{ amount }}</span>
                            <div class="btn danger" data-action="jettison">Jettison<div class="tip">Throws the amount overboard. It floats in space as loot.</div></div>
                        </div>
@@ -13,6 +13,7 @@
        .good:hover { background-color: #122033; }
        .good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
        .good.disabled .n, .good.disabled .p { color: #8197ad; }
+        .good.misfit { opacity: 0.45; } /* fits no hardpoint of the ship: still for sale, into the hold */
        .good img { width: 30dp; height: 30dp; margin-right: 10dp; }
        .good .txt { flex: 1; min-width: 0; }
        .good .n { font-size: 14dp; }
@@ -59,15 +60,6 @@
        .panel .pfoot { display: flex; flex-direction: row; margin-top: 10dp; }
        .panel .pfoot .btn { margin: 0 8dp 0 0; padding: 3dp 10dp; }
        .content { position: relative; }
-        /* hold and credits in the tabs' row, large: the hold a bar that fills with the load, amber from 3/4, red full */
-        .stat { display: flex; flex-direction: row; align-items: center; align-self: center; margin-left: 24dp; }
-        .stat .sk { margin-right: 10dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; }
-        .stat .sv { font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; }
-        .hbar { position: relative; width: 200dp; height: 24dp; border: 1dp #2b6f9e; background-color: #00000066; }
-        .hbar .hf { position: absolute; left: 0; top: 0; bottom: 0; background-color: #3a8fc899; }
-        .hbar .hf.warn { background-color: #f2b13c99; }
-        .hbar .hf.bad { background-color: #ef6a5bcc; }
-        .hbar .ht { position: relative; display: block; line-height: 24dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 15dp; color: #e8f4ff; }
        /* your equipment in three parts: the ship's hardpoints (what sits on each, the empty ones dim), what is
           mounted without a hardpoint, the hold -- not mounted, an amber edge */
        .sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
@@ -98,8 +90,8 @@
                <div class="tab" data-class-active="category == 1" data-action="category" data-arg="1">Ammo</div>
                <div class="tab" data-class-active="category == 2" data-action="category" data-arg="2">Equipment</div>
                <div class="tab" data-class-active="category == 3" data-action="category" data-arg="3">Cargo bay</div>
-                <div class="stat" style="margin-left: auto;"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
-                <div class="stat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div>
+                <div class="dstat" style="margin-left: auto;"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
+                <div class="dstat"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div>
            </div>
            <div class="split">
                <div class="colm">
@@ -109,9 +101,9 @@
                    <input class="text search" type="text" data-value="filter" maxlength="40"/>
                    <div class="list">
                        <div class="hint" style="padding: 10dp;" data-if="market.size == 0">No equipment for sale here.</div>
-                        <div class="good" data-for="r : market" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="buy-pick" data-dbl="deal" data-attr-data-arg="r.key">
+                        <div class="good" data-for="r : market" data-class-selected="r.selected" data-class-disabled="r.disabled" data-class-misfit="r.slot == 'Incompatible'" data-action="buy-pick" data-dbl="deal" data-attr-data-arg="r.key">
                            <img data-if="r.icon != ''" data-attr-src="r.icon"/>
-                            <div class="txt"><div class="n">{{ r.name }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
+                            <div class="txt"><div class="n">{{ r.name }}</div><div class="slot" data-if="r.slot != ''">{{ r.slot }}</div><div class="note" data-if="r.note != ''">{{ r.note }}</div></div>
                            <span class="p">{{ r.price }}</span>
                        </div>
                    </div>
@@ -181,7 +173,10 @@
                    <div class="t">{{ has_pick ? pick.name : 'Pick a piece of equipment' }}</div>
                </div>
                <div class="amount">
-                    <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                    <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                        <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                        <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                    </div>
                    <span class="v">{{ amount_text }}</span>
                    <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
                </div>
@@ -355,6 +355,19 @@ input.range slidertrack { height: 4dp; margin-top: 7dp; background-color: #24405
 input.range sliderbar { width: 14dp; height: 18dp; background-color: #f2b13c; border-radius: 3dp; }
 input.range sliderbar:hover { background-color: #5cc8f0; }
 input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
+/* the dealers' amount: a wide bar clicked or dragged anywhere (data-scrub, its scale too) -- the fill and the knob at
+   the amount, a scale 1 / quarters / the most under it */
+.abar { flex: 1; position: relative; padding-top: 6dp; }
+.abar.off { opacity: 0.4; }
+.abar .arail { position: relative; height: 12dp; border: 1dp #2b6f9e; background-color: #0a1424; }
+.abar .afill { position: absolute; left: 0; top: 0; bottom: 0; background-color: #f2b13c55; }
+.abar .tk { position: absolute; top: 0; bottom: 0; width: 1dp; background-color: #2b6f9e; }
+.abar .aknob { position: absolute; top: -6dp; width: 12dp; height: 22dp; margin-left: -6dp; background-color: #f2b13c; border-radius: 2dp; }
+.abar:hover .aknob { background-color: #ffd27a; }
+.abar .aticks { position: relative; height: 14dp; margin-top: 7dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
+.abar .aticks span { position: absolute; top: 0; width: 60dp; margin-left: -30dp; text-align: center; }
+.abar .aticks .lo { margin-left: 0; text-align: left; }
+.abar .aticks .hi { left: auto; right: 0; margin-left: 0; text-align: right; }
 .table .empty { padding: 12dp 10dp; color: #8197ad; }

 /* ---------------------------------------------------------------- cards, stats */
@@ -451,3 +464,14 @@ input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
    fh: 768px 0px 96px 96px;  fh-i: 800px 32px 32px 32px;
    fbr: 864px 0px 96px 96px; fbr-i: 896px 32px 32px 32px;
 }
+
+/* a dealer's hold and credits, large (the tabs' row of the equipment dealer, the commodity trader's row): the hold a
+   bar that fills with the load, amber from 3/4, red full */
+.dstat { display: flex; flex-direction: row; align-items: center; align-self: center; margin-left: 24dp; }
+.dstat .sk { margin-right: 10dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; }
+.dstat .sv { font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; }
+.hbar { position: relative; width: 200dp; height: 24dp; border: 1dp #2b6f9e; background-color: #00000066; }
+.hbar .hf { position: absolute; left: 0; top: 0; bottom: 0; background-color: #3a8fc899; }
+.hbar .hf.warn { background-color: #f2b13c99; }
+.hbar .hf.bad { background-color: #ef6a5bcc; }
+.hbar .ht { position: relative; display: block; line-height: 24dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 15dp; color: #e8f4ff; }
@@ -35,13 +35,15 @@
        <img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
        <span class="title">COMMODITY TRADER</span><span class="sl">\\\</span>
        <span class="spacer"></span>
-        <span class="chip">Hold <span class="v">{{ hold }}</span></span>
-        <span class="chip">Credits <span class="v">{{ credits }}</span></span>
        <span class="chip" data-if="tax != ''">{{ tax }}<div class="tip">The server takes this share of what you sell to the base. It follows the region's trade of the last days: the busiest region pays the most.</div></span>
        <span class="close" data-action="close">&#215;</span>
    </div>
    <div class="win-main">
        <div class="content">
+            <div class="subtabs">
+                <div class="dstat" style="margin-left: auto; padding-bottom: 6dp;"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct &gt;= 75" data-class-bad="hold_pct &gt;= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div>
+                <div class="dstat" style="padding-bottom: 6dp;"><span class="sk">CREDITS</span><span class="sv">{{ credits }}</span></div>
+            </div>
            <div class="split">
                <div class="colm gap">
                    <div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }} goods</span></div>
@@ -70,7 +72,10 @@
                    <div class="t">{{ has_pick ? pick.name : 'Pick a good' }}</div>
                </div>
                <div class="amount">
-                    <input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
+                    <div class="abar" data-scrub="amount-at" data-class-off="amount_max &lt;= 1">
+                        <div class="arail"><div class="afill" data-style-width="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max &gt; 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
+                        <div class="aticks" data-if="amount_max &gt; 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max &gt;= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max &gt;= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
+                    </div>
                    <span class="v">{{ amount_text }}</span>
                    <div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
                </div>