92 lines
5.9 KiB
Plaintext
92 lines
5.9 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Ship dealer</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.colm { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.colm.side { flex: 0 0 30%; margin-right: 18dp; }
|
|
.colm.view { flex: 1; }
|
|
.colm.facts { flex: 0 0 28%; margin-left: 18dp; }
|
|
.scard { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
|
.scard:hover { border-color: #5cc8f0; }
|
|
.scard.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
|
.scard.locked .n, .scard.locked .p { color: #8197ad; }
|
|
.scard img { width: 48dp; height: 48dp; margin-right: 12dp; }
|
|
.scard .txt { flex: 1; min-width: 0; }
|
|
.scard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
|
.scard .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
|
.scard .p { font-family: "IBM Plex Mono"; color: #f2b13c; text-align: right; }
|
|
.scard .lock { font-family: "IBM Plex Mono"; font-size: 11dp; color: #ef6a5b; text-align: right; margin-top: 2dp; }
|
|
.scard.own { border-left-color: #5cc8f0; }
|
|
.scard.own .p { color: #5cc8f0; }
|
|
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); }
|
|
.view-head { margin-bottom: 8dp; }
|
|
.view-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
|
|
.view-head .c { font-size: 13dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
|
|
.info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-top: 10dp; }
|
|
.stat { display: flex; flex-direction: row; padding: 3dp 0; border-bottom: 1dp #ffffff08; font-size: 13dp; }
|
|
.stat .l { flex: 1; color: #8197ad; }
|
|
.stat .v { font-family: "IBM Plex Mono"; text-align: right; }
|
|
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
|
|
.deal .txt { flex: 1; min-width: 0; }
|
|
.deal .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
|
.deal .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
|
.deal .btn { margin: 0 0 0 14dp; }
|
|
.why { color: #ef6a5b; margin-left: 14dp; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="shipdealer">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
|
|
<span class="title">SHIP DEALER</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
|
<span class="chip">Worth <span class="v">{{ worth }}</span></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="content">
|
|
<div class="split">
|
|
<div class="colm side">
|
|
<h3 style="margin-bottom: 8dp;">For sale here</h3>
|
|
<div class="hint" data-if="ships.size == 0">No ships for sale here.</div>
|
|
<div class="scard" data-for="r : ships" data-class-selected="r.selected" data-class-locked="r.locked" data-action="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="k">{{ r.class }}</div></div>
|
|
<div><div class="p">{{ r.price }}</div><div class="lock" data-if="r.lock != ''">{{ r.lock }}</div></div>
|
|
</div>
|
|
<h3 style="margin: 14dp 0 8dp 0;" data-if="has_own">Your ship</h3>
|
|
<div class="scard own" data-if="has_own" data-class-selected="own.selected" data-action="pick" data-arg="-2">
|
|
<img data-if="own.icon != ''" data-attr-src="own.icon"/>
|
|
<div class="txt"><div class="n">{{ own.name }}</div><div class="k">{{ own.class }}</div></div>
|
|
<div><div class="p">{{ own.price }}</div><div class="k" style="text-align: right;">trade-in</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="colm view">
|
|
<div class="view-head" data-if="has_pick"><div class="t">{{ pick_name }}</div><div class="c">{{ pick_class }}</div></div>
|
|
<div class="view-head" data-if="!has_pick"><div class="t">Pick a ship</div><div class="c">a second click on a ship buys it</div></div>
|
|
<div id="ship"></div>
|
|
</div>
|
|
<div class="colm facts">
|
|
<h3 style="margin-bottom: 8dp;">Specifications</h3>
|
|
<div class="stat" data-for="s : stats"><span class="l">{{ s.label }}</span><span class="v">{{ s.value }}</span></div>
|
|
<div class="info">{{ pick_info }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="deal">
|
|
<div class="txt">
|
|
<div class="t">{{ deal_title }}</div>
|
|
<div class="d">{{ is_own ? 'It is traded in when you buy a new ship.' : deal }}</div>
|
|
</div>
|
|
<span class="why" data-if="why != ''">{{ why }}</span>
|
|
<div class="btn primary" data-class-disabled="!can_buy" data-action="buy">Buy ship<div class="tip">Goes on to the dealer, where the new ship is bought and your old one traded in. Your cargo moves over.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="win-foot">
|
|
<span class="key">Esc</span><span class="hint">close</span>
|
|
</div>
|
|
</body>
|
|
</rml>
|