233 lines
18 KiB
Plaintext
233 lines
18 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Market</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.goods { flex: 0 0 31%; display: flex; flex-direction: column; min-height: 0; margin-right: 18dp; }
|
|
.detail { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; }
|
|
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
|
|
.g { display: flex; flex-direction: row; align-items: center; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; font-size: 14dp; }
|
|
.g:hover { background-color: #122033; }
|
|
.g.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
|
.g .n { flex: 1; }
|
|
.g.quiet .n { color: #8197ad; }
|
|
.g .v { font-family: "IBM Plex Mono"; width: 62dp; text-align: right; font-size: 13dp; }
|
|
.g .v.s { color: #f2b13c; }
|
|
.g .v.b { color: #5fd08a; }
|
|
.g .v.npc { color: #5cc8f0; }
|
|
.ghead { display: flex; flex-direction: row; padding: 0 10dp 4dp 12dp; font-size: 12dp; color: #8197ad; }
|
|
.ghead .n { flex: 1; }
|
|
.ghead .v { width: 62dp; text-align: right; }
|
|
.tools { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
|
.tools input { flex: 1; margin-right: 8dp; }
|
|
.toggle { font-size: 13dp; color: #8197ad; padding: 4dp 8dp; border: 1dp #24405c; border-radius: 3dp; }
|
|
.toggle.on { color: #f2b13c; border-color: #f2b13c; }
|
|
.toggle:hover { color: #5cc8f0; }
|
|
.ihead { display: flex; flex-direction: row; align-items: flex-end; margin-bottom: 8dp; }
|
|
.ihead .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; color: #dbe6f0; flex: 1; }
|
|
.ihead .npc { font-size: 13dp; color: #5cc8f0; }
|
|
.chartbar { display: flex; flex-direction: row; align-items: center; margin-bottom: 6dp; }
|
|
.chartbar .toggle { margin-right: 6dp; }
|
|
.legend { margin-left: auto; font-size: 12dp; color: #8197ad; }
|
|
.legend .k { display: inline-block; width: 10dp; height: 10dp; margin: 0 4dp 0 12dp; border-radius: 2dp; }
|
|
.chart { position: relative; height: 190dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-left: 76dp; }
|
|
.chart .grid { position: absolute; left: 0; right: 0; height: 1dp; background-color: #24405c66; }
|
|
.chart .col { position: absolute; top: 0; bottom: 0; }
|
|
.chart .col:hover { background-color: #5cc8f014; }
|
|
.chart .mean { position: absolute; bottom: 0; left: 0; right: 0; background-color: #f2b13c55; border-top: 2dp #f2b13c; border-radius: 2dp 2dp 0 0; }
|
|
.chart .band { position: absolute; left: 35%; width: 30%; min-height: 2dp; background-color: #dbe6f0cc; border-radius: 1dp; }
|
|
.chart .npc { position: absolute; left: 20%; width: 60%; height: 3dp; margin-bottom: -1dp; background-color: #5cc8f0; border-radius: 2dp; }
|
|
.chart .empty { position: absolute; left: 0; right: 0; top: 80dp; text-align: center; color: #8197ad; }
|
|
.axis { position: relative; height: 0; }
|
|
.axis .y { position: absolute; left: 0; width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
|
|
.vol { position: relative; height: 34dp; margin-left: 76dp; margin-top: 3dp; }
|
|
.vol .vb { position: absolute; bottom: 0; background-color: #3d6d96; border-radius: 2dp 2dp 0 0; }
|
|
.dates { display: flex; flex-direction: row; margin-left: 76dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; margin-bottom: 12dp; }
|
|
.dates .r { margin-left: auto; }
|
|
.books { display: flex; flex-direction: row; min-height: 150dp; }
|
|
.book { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
|
.book.gap { margin-right: 14dp; }
|
|
.book .table { flex: 1; height: 160dp; }
|
|
.table .c2 { width: 60dp; text-align: right; font-family: "IBM Plex Mono"; }
|
|
.table .mine .c1 { color: #5cc8f0; }
|
|
.panel { margin-top: 12dp; padding: 10dp 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; }
|
|
.panel .row2 { display: flex; flex-direction: row; align-items: center; }
|
|
.panel .label { width: 120dp; }
|
|
.panel input.text { width: 120dp; margin-right: 10dp; }
|
|
.panel .sum { font-family: "IBM Plex Mono"; color: #f2b13c; margin: 0 14dp; }
|
|
.panel .info { font-size: 13dp; color: #8197ad; margin-top: 6dp; }
|
|
.panel .pick { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; color: #dbe6f0; margin-bottom: 6dp; }
|
|
.status { margin-top: 10dp; padding: 6dp 10dp; border-left: 3dp #5fd08a; background-color: #0d1622; }
|
|
.status.bad { border-left-color: #ef6a5b; }
|
|
.mine-split { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
.mine-split .table { flex: 1; }
|
|
.mt .c1 { flex: 1; }
|
|
.mt .cs { width: 70dp; }
|
|
.mt .cb { width: 24%; }
|
|
.mt .cn { width: 110dp; text-align: right; font-family: "IBM Plex Mono"; margin-right: 14dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="market">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
|
|
<span class="title">MARKET</span>
|
|
<span class="loc">{{ here }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">{{ fees }}<div class="tip">Broker fee: from your bank when you place an order or give it a new price. Sales tax: from what you get for a sale. Orders end after their days: goods back into the depot, escrow back to the bank.</div></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="subtabs">
|
|
<div class="tab" data-class-active="tab == 0" data-action="tab" data-arg="0">Market</div>
|
|
<div class="tab" data-class-active="tab == 1" data-action="tab" data-arg="1">My orders</div>
|
|
<div class="tab" style="margin-left: auto;" data-action="refresh">Refresh</div>
|
|
</div>
|
|
|
|
<!-- ================================================= MARKET -->
|
|
<div class="split" data-if="tab == 0">
|
|
<div class="goods">
|
|
<div class="tools">
|
|
<input class="text" type="text" data-value="filter" maxlength="40"/>
|
|
<span class="toggle" data-class-on="only_orders" data-action="only-orders">with orders<div class="tip">Only goods somebody offers or wants. Off: every commodity, to place a buy order for it.</div></span>
|
|
</div>
|
|
<div class="ghead"><span class="n">Good</span><span class="v">sell</span><span class="v">buy</span><span class="v">NPC</span></div>
|
|
<div class="list">
|
|
<div class="hint" style="padding: 10dp;" data-if="goods.size == 0">{{ received ? 'No good matches.' : 'Asking the server...' }}</div>
|
|
<div class="g" data-for="r : goods" data-class-selected="r.selected" data-class-quiet="!r.has_orders" data-action="good" data-attr-data-arg="r.key">
|
|
<span class="n">{{ r.name }}</span><span class="v s">{{ r.sell }}</span><span class="v b">{{ r.buy }}</span><span class="v npc">{{ r.npc }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="detail">
|
|
<div class="ihead">
|
|
<span class="t">{{ has_item ? item_name : 'Pick a good' }}</span>
|
|
<span class="npc">{{ item_npc }}</span>
|
|
</div>
|
|
<div class="chartbar">
|
|
<span class="toggle" data-class-on="!days90" data-action="days" data-arg="30">30 days</span>
|
|
<span class="toggle" data-class-on="days90" data-action="days" data-arg="90">90 days</span>
|
|
<span class="toggle" style="margin-left: 10dp;" data-class-on="!region_here" data-action="region" data-arg="all">all regions</span>
|
|
<span class="toggle" data-class-on="region_here" data-action="region" data-arg="here">{{ here_region != '' ? here_region : 'this region' }}</span>
|
|
<span class="legend"><span class="k" style="background-color: #f2b13c;"></span>market mean<span class="k" style="background-color: #dbe6f0;"></span>low - high<span class="k" style="background-color: #5cc8f0;"></span>NPC price<span class="k" style="background-color: #3d6d96;"></span>volume</span>
|
|
</div>
|
|
<div class="axis">
|
|
<span class="y" style="top: 0dp;">{{ chart_hi }}</span>
|
|
<span class="y" style="top: 176dp;">{{ chart_lo }}</span>
|
|
</div>
|
|
<div class="chart">
|
|
<div class="grid" style="top: 25%;"></div><div class="grid" style="top: 50%;"></div><div class="grid" style="top: 75%;"></div>
|
|
<div class="col" data-for="b : bars" data-style-left="b.x + '%'" data-style-width="b.w + '%'">
|
|
<div class="mean" data-if="b.trades" data-style-height="b.mean + '%'"></div>
|
|
<div class="band" data-if="b.trades" data-style-bottom="b.lo + '%'" data-style-height="(b.hi - b.lo) + '%'"></div>
|
|
<div class="npc" data-if="b.npc >= 0" data-style-bottom="b.npc + '%'"></div>
|
|
<div class="tip">{{ b.tip }}</div>
|
|
</div>
|
|
<div class="empty" data-if="chart_note != ''">{{ chart_note }}</div>
|
|
</div>
|
|
<div class="vol">
|
|
<div class="vb" data-for="b : bars" data-style-left="b.x + '%'" data-style-width="b.w + '%'" data-style-height="b.vol + '%'"></div>
|
|
</div>
|
|
<div class="dates"><span>{{ chart_from }}</span><span class="r">{{ chart_to }}</span></div>
|
|
|
|
<div class="books" data-if="has_item">
|
|
<div class="book gap">
|
|
<div class="label">Sell orders - buy from them</div>
|
|
<div class="table">
|
|
<div class="head"><span class="c1">Base</span><span class="c2">jumps</span><span class="c3">qty</span><span class="c4">price</span></div>
|
|
<div class="body">
|
|
<div class="hint" style="padding: 8dp;" data-if="sells.size == 0">Nobody sells this. Place a buy order.</div>
|
|
<div class="row" data-for="r : sells" data-class-selected="r.selected" data-class-mine="r.mine" data-action="pick-sell" data-attr-data-arg="r.id">
|
|
<span class="c1">{{ r.base }}</span><span class="c2">{{ r.jumps }}</span><span class="c3">{{ r.qty }}</span><span class="c4">{{ r.price }}</span>
|
|
<div class="tip">{{ r.who }} - ends in {{ r.expires }}{{ r.mine ? ' - your order' : '' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="book">
|
|
<div class="label">Buy orders - sell into them</div>
|
|
<div class="table">
|
|
<div class="head"><span class="c1">Base</span><span class="c2">jumps</span><span class="c3">qty</span><span class="c4">price</span></div>
|
|
<div class="body">
|
|
<div class="hint" style="padding: 8dp;" data-if="buys.size == 0">Nobody wants this yet. Place a sell order.</div>
|
|
<div class="row" data-for="r : buys" data-class-selected="r.selected" data-class-mine="r.mine" data-action="pick-buy" data-attr-data-arg="r.id">
|
|
<span class="c1">{{ r.base }}</span><span class="c2">{{ r.jumps }}</span><span class="c3">{{ r.qty }}</span><span class="c4">{{ r.price }}</span>
|
|
<div class="tip">{{ r.who }} - ends in {{ r.expires }}{{ r.mine ? ' - your order' : '' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" data-if="has_pick">
|
|
<div class="pick">{{ pick_text }}</div>
|
|
<div class="row2">
|
|
<input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
|
|
<span class="num" style="width: 80dp; text-align: right;">{{ amount_text }}</span>
|
|
<div class="btn" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
|
|
<span class="sum">{{ deal_total }}</span>
|
|
<div class="btn primary" data-action="deal">{{ pick_buy ? 'Sell' : 'Buy' }}<div class="tip">{{ pick_buy ? 'Sells from your depot on that base into the buy order; the credits go to your bank.' : 'Buys with your bank credits; the goods go into your depot on that base.' }}</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" data-if="has_item">
|
|
<div class="row2" style="margin-bottom: 8dp;">
|
|
<span class="toggle" data-class-on="!place_buy" data-action="place-mode" data-arg="sell">Sell order</span>
|
|
<span class="toggle" style="margin-left: 6dp;" data-class-on="place_buy" data-action="place-mode" data-arg="buy">Buy order</span>
|
|
<span class="hint" style="margin-left: 14dp;">{{ place_have }}</span>
|
|
</div>
|
|
<div class="row2">
|
|
<span class="label">Amount</span><input class="text" type="text" data-value="place_qty" maxlength="10"/>
|
|
<span class="label" style="width: 90dp;">Price / unit</span><input class="text" type="text" data-value="place_price" maxlength="12"/>
|
|
<span class="label" style="width: 50dp;">Days</span><input class="text" type="text" style="width: 50dp;" data-value="place_days" maxlength="2"/>
|
|
<div class="btn primary" data-class-disabled="!can_place" data-action="place">Place<div class="tip">Sell order: the goods leave your depot here and wait on the market. Buy order: the credits wait in escrow; what is sold into it goes into your depot here.</div></div>
|
|
</div>
|
|
<div class="info">{{ place_info }}</div>
|
|
</div>
|
|
|
|
<div class="status" data-class-bad="!status_ok" data-if="status != ''">{{ status }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= MY ORDERS -->
|
|
<div class="mine-split" data-if="tab == 1">
|
|
<div class="label">Your orders</div>
|
|
<div class="table mt" style="flex: 1 1 0;">
|
|
<div class="head"><span class="cs">Kind</span><span class="c1">Good</span><span class="cb">Base</span><span class="cn">qty</span><span class="cn">price</span><span class="cn">ends in</span></div>
|
|
<div class="body">
|
|
<div class="hint" style="padding: 8dp;" data-if="mine.size == 0">You have no orders on the market.</div>
|
|
<div class="row" data-for="r : mine" data-class-selected="r.selected" data-action="mine-pick" data-attr-data-arg="r.id">
|
|
<span class="cs" data-style-color="r.buy ? '#5fd08a' : '#f2b13c'">{{ r.kind }}</span><span class="c1">{{ r.item }}</span><span class="cb">{{ r.base }}</span>
|
|
<span class="cn">{{ r.qty }}</span><span class="cn">{{ r.price }}</span><span class="cn">{{ r.expires }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel" data-if="has_mine_pick">
|
|
<div class="row2">
|
|
<span class="label">New price</span><input class="text" type="text" data-value="reprice" maxlength="12"/>
|
|
<div class="btn primary" data-action="mine-price">Set price<div class="tip">A new price per unit; the broker fee is charged again. A buy order's escrow follows the price.</div></div>
|
|
<div class="btn danger" style="margin-left: 10dp;" data-action="mine-cancel">Take back<div class="tip">Sell order: the goods go back into your depot on that base. Buy order: the escrow goes back to your bank.</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="status" data-class-bad="!status_ok" data-if="status != ''">{{ status }}</div>
|
|
<div class="label" style="margin-top: 12dp;">Your last trades</div>
|
|
<div class="table mt" style="flex: 1 1 0;">
|
|
<div class="head"><span class="cb">When</span><span class="cs">Side</span><span class="c1">Good</span><span class="cn">qty</span><span class="cn">price</span><span class="cb">Base</span></div>
|
|
<div class="body">
|
|
<div class="hint" style="padding: 8dp;" data-if="trades.size == 0">No trades yet.</div>
|
|
<div class="row" data-for="r : trades">
|
|
<span class="cb">{{ r.when }}</span><span class="cs">{{ r.side }}</span><span class="c1">{{ r.item }}</span>
|
|
<span class="cn">{{ r.qty }}</span><span class="cn">{{ r.price }}</span><span class="cb">{{ r.base }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<span class="key">Esc</span><span class="hint">close</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|