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>
This commit is contained in:
+9
-14
@@ -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 >= 75" data-class-bad="hold_pct >= 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 >= 75" data-class-bad="hold_pct >= 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 <= 1">
|
||||
<div class="arail"><div class="afill" data-style-width="amount_max > 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 > 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
|
||||
<div class="aticks" data-if="amount_max > 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max >= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max >= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max >= 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>
|
||||
|
||||
Reference in New Issue
Block a user