88 lines
5.6 KiB
Plaintext
88 lines
5.6 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Commodity trader</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.gap { margin-right: 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 .n { flex: 1; font-size: 15dp; }
|
|
.good .note { font-size: 12dp; color: #8197ad; margin-right: 10dp; }
|
|
.good .c { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; color: #8197ad; }
|
|
.good .p { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; }
|
|
.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: 260dp; }
|
|
.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: 80dp; 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; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="trader">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
|
|
<span class="title">COMMODITY TRADER</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 gap">
|
|
<div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }} goods</span></div>
|
|
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="list">
|
|
<div class="empty hint" style="padding: 10dp;" data-if="market.size == 0">Nothing for sale here.</div>
|
|
<div class="good" data-for="r : market" data-class-selected="r.selected" data-action="buy-pick" data-attr-data-arg="r.key">
|
|
<img data-if="r.icon != ''" data-attr-src="r.icon"/><span class="n">{{ r.name }}</span><span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="col-h"><h3>Your cargo</h3><span class="hint">hold {{ hold }}</span></div>
|
|
<div class="list">
|
|
<div class="empty hint" style="padding: 10dp;" data-if="cargo.size == 0">Your hold carries no goods.</div>
|
|
<div class="good" data-for="r : cargo" 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"/><span class="n">{{ r.name }}</span><span class="note">{{ r.note }}</span><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 good' }}</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 primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys the amount into your cargo hold.' : 'Sells the amount from your cargo hold.' }}</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>
|