114 lines
7.7 KiB
Plaintext
114 lines
7.7 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Equipment dealer</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 34%; margin: 0 18dp; }
|
|
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
|
.col-h .hint { margin-left: auto; }
|
|
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
|
|
.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.disabled .n, .good.disabled .p { color: #8197ad; }
|
|
.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 .c { font-family: "IBM Plex Mono"; width: 40dp; text-align: right; color: #8197ad; }
|
|
.good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
|
|
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); }
|
|
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
|
|
.deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
|
|
.deal .what { width: 300dp; }
|
|
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
|
.deal .amount { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0 14dp; }
|
|
.deal .amount .v { font-family: "IBM Plex Mono"; width: 70dp; text-align: right; margin-left: 10dp; }
|
|
.deal .sum { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; width: 150dp; text-align: right; margin-right: 14dp; }
|
|
.deal .btn { margin: 0; }
|
|
.why { color: #ef6a5b; margin-right: 14dp; }
|
|
.search { margin-bottom: 8dp; }
|
|
.cmp { margin-top: 10dp; padding: 8dp 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.cmp .ch, .cmp .cr { display: flex; flex-direction: row; padding: 2dp 0; }
|
|
.cmp .ch { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-bottom: 1dp #24405c; margin-bottom: 4dp; }
|
|
.cmp .cl { flex: 1; white-space: nowrap; overflow: hidden; }
|
|
.cmp .cv { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 13dp; }
|
|
.cmp .ch .cv { font-family: "Saira SemiCondensed"; font-size: 12dp; color: #8197ad; }
|
|
.cmp .cv.up { color: #5fd08a; }
|
|
.cmp .cv.down { color: #ef6a5b; }
|
|
.cmp .cv.dim { color: #8197ad; }
|
|
.cmp .cn { margin-top: 4dp; font-size: 12dp; color: #8197ad; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="outfitter">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
|
|
<span class="title">EQUIPMENT DEALER</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="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="split">
|
|
<div class="colm">
|
|
<div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }}</span></div>
|
|
<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-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="p">{{ r.price }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm mid">
|
|
<div class="col-h"><h3>Your ship</h3></div>
|
|
<div id="ship"></div>
|
|
<div class="cmp" data-if="cmp.size > 0">
|
|
<div class="ch"><span class="cl">{{ pick.name }}</span><span class="cv">this</span><span class="cv" data-if="cmp_other != ''">mounted</span></div>
|
|
<div class="cr" data-for="c : cmp"><span class="cl">{{ c.label }}</span><span class="cv" data-class-up="c.better == 1" data-class-down="c.better == -1">{{ c.value }}</span><span class="cv dim" data-if="cmp_other != ''">{{ c.other }}</span></div>
|
|
<div class="cn" data-if="cmp_other != ''">compared with {{ cmp_other }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="col-h"><h3>Your equipment</h3><span class="hint">hold {{ hold }}</span></div>
|
|
<div class="list">
|
|
<div class="hint" style="padding: 10dp;" data-if="gear.size == 0">No equipment.</div>
|
|
<div class="good" data-for="r : gear" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-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>
|
|
<span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="deal">
|
|
<img data-if="has_pick && pick.icon != ''" data-attr-src="pick.icon"/>
|
|
<div class="what">
|
|
<div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
|
|
<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"/>
|
|
<span class="v">{{ amount_text }}</span>
|
|
<div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
|
|
</div>
|
|
<span class="why" data-if="reason != ''">{{ reason }}</span>
|
|
<span class="sum">{{ total }}</span>
|
|
<div class="btn" style="margin-right: 10dp;" data-if="side == 1 && mount_label != ''" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div>
|
|
<div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys it: onto a free hardpoint of your ship when there is one, else into the hold.' : 'Sells it; used equipment fetches less.' }}</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>
|