88 lines
5.1 KiB
Plaintext
88 lines
5.1 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Trade</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; margin-right: 14dp; }
|
|
.col.last { margin-right: 0; }
|
|
.col h3 { margin-bottom: 6dp; }
|
|
.state { font-size: 12dp; margin-bottom: 6dp; color: #ef6a5b; }
|
|
.state.ok { color: #7cf27c; }
|
|
.lst { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
|
.it { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
|
.it:hover { background-color: #122033; }
|
|
.it.picked { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.it.ro:hover { background-color: transparent; }
|
|
.it img { width: 28dp; height: 28dp; margin-right: 8dp; }
|
|
.it .n { flex: 1; min-width: 0; font-size: 14dp; }
|
|
.it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; }
|
|
.move { margin-top: 12dp; padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
|
|
.move .t { flex: 1; }
|
|
.move .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
|
.move .t .a { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
|
.move .btn { margin: 0 0 0 6dp; }
|
|
.foot2 { display: flex; flex-direction: row; align-items: center; margin-top: 12dp; }
|
|
.foot2 .hint { flex: 1; }
|
|
.foot2 .btn { margin: 0 0 0 8dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="trade">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
|
|
<span class="title">TRADE</span>
|
|
<span class="spacer"></span>
|
|
<span class="close" data-action="cancel">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content" style="display: flex; flex-direction: column;">
|
|
<div class="cols">
|
|
<div class="col">
|
|
<h3>They offer</h3>
|
|
<div class="state" data-class-ok="they_accept">{{ they_accept ? 'They accepted' : 'Not accepted yet' }}</div>
|
|
<div class="lst">
|
|
<div class="hint" style="padding: 10dp;" data-if="theirs.size == 0">Nothing offered yet.</div>
|
|
<div class="it ro" data-for="i : theirs">
|
|
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<h3>You offer</h3>
|
|
<div class="state" data-class-ok="i_accept">{{ i_accept ? 'You accepted' : 'Not accepted yet' }}</div>
|
|
<div class="lst">
|
|
<div class="hint" style="padding: 10dp;" data-if="mine.size == 0">Pick from your cargo to offer.</div>
|
|
<div class="it" data-for="i : mine" data-class-picked="i.picked" data-action="pickmine" data-attr-data-arg="i.key">
|
|
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col last">
|
|
<h3>Your cargo</h3>
|
|
<div class="state" style="color: #8197ad;">Click to offer</div>
|
|
<div class="lst">
|
|
<div class="it" data-for="i : cargo" data-class-picked="i.picked" data-action="pickcargo" data-attr-data-arg="i.key">
|
|
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="move" data-if="moving">
|
|
<div class="t"><div class="n">{{ moving_name }}</div><div class="a">{{ amount_text }}</div></div>
|
|
<div class="btn" data-action="none">Min</div>
|
|
<div class="btn" data-action="less">-</div>
|
|
<div class="btn" data-action="more">+</div>
|
|
<div class="btn" data-action="all">Max</div>
|
|
<div class="btn primary" data-action="move">{{ to_offer ? 'Offer' : 'Take back' }}</div>
|
|
<div class="btn" data-action="back">Cancel</div>
|
|
</div>
|
|
<div class="foot2">
|
|
<span class="hint">Both pilots accept to trade. Any change of an offer resets the acceptance.</span>
|
|
<div class="btn" data-action="cancel">End trade</div>
|
|
<div class="btn primary" data-class-disabled="i_accept" data-action="accept">Accept trade</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</rml>
|