New REM client: REM-Client ff5decc, 64-bit (ship dealer: the trade for the ship as a modern window - what stays with the old ship left, the new ship in the middle, its loadout right, pieces moved by a double click, the bill and Buy ship)
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5.1
@@ -0,0 +1,169 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Ship trade</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.mid { flex: 0 0 32%; margin: 0 18dp; }
|
||||
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.col-h .hint { margin-left: 10dp; }
|
||||
.col-h .tools { margin-left: auto; display: flex; flex-direction: row; align-items: center; }
|
||||
.col-h .tools .btn { margin: 0 0 0 8dp; padding: 3dp 10dp; }
|
||||
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
|
||||
.good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.good:hover { background-color: #122033; }
|
||||
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.good img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.good .txt { flex: 1; min-width: 0; }
|
||||
.good .n { font-size: 14dp; }
|
||||
.good .note { font-size: 12dp; color: #8197ad; }
|
||||
.good .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
|
||||
.good .c { font-family: "IBM Plex Mono"; width: 44dp; text-align: right; color: #8197ad; }
|
||||
.good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
|
||||
/* what the trade takes off the price (left), what was brought along (right, nothing to pay) */
|
||||
.good .p.off { color: #5fd08a; }
|
||||
.good .p.own { color: #8197ad; }
|
||||
/* the ship's own parts: they stay where they are */
|
||||
.good.fixed .n, .good.fixed .p { color: #5c7a94; }
|
||||
.good.fixed:hover { background-color: #00000000; }
|
||||
.good.empty .n { color: #5c7a94; }
|
||||
.good.empty .txt { margin-left: 40dp; } /* in line with the rows that have an icon (30 + 10 dp) */
|
||||
.good.held { border-left-color: #f2b13c66; }
|
||||
.good.held.selected { border-left-color: #f2b13c; }
|
||||
.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; }
|
||||
#ship { flex: 1; decorator: vertical-gradient(#0a1424 #05080d); }
|
||||
.holdrow { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
|
||||
.holdrow .dstat { margin-left: 0; }
|
||||
/* the move strip under the ship: the picked piece, its amount, the button */
|
||||
.move { margin-top: 10dp; padding: 10dp 12dp; background-color: #5cc8f008; }
|
||||
.move .mrow { display: flex; flex-direction: row; align-items: center; }
|
||||
.move .mrow.second { margin-top: 10dp; }
|
||||
.move img { width: 40dp; height: 40dp; margin-right: 12dp; }
|
||||
.move .what { flex: 1; min-width: 0; }
|
||||
.move .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
||||
.move .v { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-left: 10dp; }
|
||||
.move .btn { margin: 0 0 0 10dp; }
|
||||
.move .small { padding: 3dp 10dp; }
|
||||
.why { color: #ef6a5b; }
|
||||
.move .why { flex: 1; min-width: 0; font-size: 13dp; }
|
||||
/* the bill */
|
||||
.deal { margin-top: 14dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; background-color: #5cc8f010; }
|
||||
.deal .fig { margin-right: 26dp; }
|
||||
.deal .fig .k { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; text-transform: uppercase; }
|
||||
.deal .fig .v { display: block; font-family: "IBM Plex Mono"; font-size: 16dp; margin-top: 2dp; }
|
||||
.deal .fig .v.off { color: #5fd08a; }
|
||||
.deal .gap { flex: 1; }
|
||||
.deal .why { margin-right: 18dp; }
|
||||
.deal .sumbox { margin-right: 18dp; text-align: right; }
|
||||
.deal .sumbox .k { display: block; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #8197ad; text-transform: uppercase; }
|
||||
.deal .sumbox .sum { display: block; font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; margin-top: 2dp; }
|
||||
.deal .btn { margin: 0 0 0 10dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="shiptrade">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
|
||||
<span class="title">SHIP DEALER</span><span class="sl">\\\</span>
|
||||
<span class="loc">Buy the {{ ship_name }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm">
|
||||
<div class="col-h"><h3>Stays with the old ship</h3><span class="hint">sold with the trade</span></div>
|
||||
<div class="list">
|
||||
<div class="sec">EQUIPMENT<span class="cnt">{{ old_gear.size }}</span></div>
|
||||
<div class="hint" style="padding: 10dp;" data-if="old_gear.size == 0">Nothing stays behind.</div>
|
||||
<div class="good" data-for="r : old_gear" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-old" data-dbl="move" 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><span class="p off">{{ r.price }}</span>
|
||||
</div>
|
||||
<div class="sec held">CARGO AND SUPPLIES<span class="cnt">{{ old_cargo.size }}</span></div>
|
||||
<div class="hint" style="padding: 10dp;" data-if="old_cargo.size == 0">Nothing stays behind.</div>
|
||||
<div class="good held" data-for="r : old_cargo" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-old" data-dbl="move" 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><span class="p off">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm mid">
|
||||
<div class="col-h"><h3>{{ ship_name }}</h3><span class="tools"><div class="btn" data-action="ship-reset">Reset view<div class="tip">Turns the ship back to its start view and zoom.</div></div></span></div>
|
||||
<div id="ship"></div>
|
||||
<div class="holdrow">
|
||||
<div class="dstat"><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>
|
||||
<div class="move">
|
||||
<div class="mrow">
|
||||
<img data-if="pick_icon != ''" data-attr-src="pick_icon"/>
|
||||
<div class="what">
|
||||
<div class="label">{{ move_title }}</div>
|
||||
<div class="t">{{ has_pick ? pick_name : 'Pick a piece to move it' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mrow second" data-if="amount_max > 1">
|
||||
<div class="abar" data-scrub="amount-at">
|
||||
<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"><span class="lo" style="left: 0;">1</span><span style="left: 50%;" data-if="amount_max >= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
|
||||
</div>
|
||||
<span class="v">{{ amount_text }}</span>
|
||||
<div class="btn small" data-action="max">Max</div>
|
||||
</div>
|
||||
<div class="mrow second">
|
||||
<span class="why">{{ reason }}</span>
|
||||
<div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="move">{{ move_label }}<div class="tip">Moves the picked piece to the other side. What stays with the old ship is sold with it; a double click on a piece moves it too.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div class="col-h"><h3>New ship</h3><span class="hint">what you fly away with</span></div>
|
||||
<div class="list">
|
||||
<div class="sec" data-if="hps.size > 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
|
||||
<div class="good" data-for="r : hps" data-class-empty="r.name == ''" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-new" data-dbl="move" data-attr-data-arg="r.key">
|
||||
<img data-if="r.icon != ''" data-attr-src="r.icon"/>
|
||||
<div class="txt"><div class="n">{{ r.name == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
|
||||
<span class="p" data-class-own="!r.package">{{ r.price }}</span>
|
||||
</div>
|
||||
<div class="sec" data-if="inside.size > 0">MOUNTED, NO HARDPOINT</div>
|
||||
<div class="good" data-for="r : inside" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-new" data-dbl="move" 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><span class="p" data-class-own="!r.package">{{ r.price }}</span>
|
||||
</div>
|
||||
<div class="sec held">CARGO HOLD · NOT MOUNTED<span class="cnt">{{ hold }}</span></div>
|
||||
<div class="hint" style="padding: 10dp;" data-if="held.size == 0">Nothing in the hold.</div>
|
||||
<div class="good held" data-for="r : held" data-class-selected="r.selected" data-class-fixed="r.fixed" data-action="pick-new" data-dbl="move" 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><span class="p" data-class-own="!r.package">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deal">
|
||||
<div class="fig"><span class="k">Ship</span><span class="v">{{ c_ship }}</span><div class="tip">The bare hull at this base.</div></div>
|
||||
<div class="fig"><span class="k">Package parts</span><span class="v">{{ c_package }}</span><div class="tip">The parts of the ship package that are on the new ship. Leave one behind and you do not pay for it.</div></div>
|
||||
<div class="fig"><span class="k">Old ship</span><span class="v off">{{ c_oldship }}</span><div class="tip">What your ship fetches as a trade-in: 80 % of its price here, less for damage.</div></div>
|
||||
<div class="fig"><span class="k">Sold</span><span class="v off">{{ c_sold }}</span><div class="tip">What stays with the old ship is sold: used equipment at 30 % of its price, cargo at the market price.</div></div>
|
||||
<span class="gap"></span>
|
||||
<span class="why" data-if="why != ''">{{ why }}</span>
|
||||
<div class="sumbox"><span class="k">{{ total_label }}</span><span class="sum">{{ total }}</span></div>
|
||||
<div class="btn" data-action="back">Back<div class="tip">Back to the ship dealer's list. Nothing is traded.</div></div>
|
||||
<div class="btn primary" data-class-disabled="!can_buy" data-action="buy">Buy ship<div class="tip">Buys the ship with what is listed on the right. Your old ship and what stays with it are traded in.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">close</span>
|
||||
<span class="status">{{ status }}</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
Reference in New Issue
Block a user