New REM client: REM-Client 2ccb52f, 64-bit (construction sites: site window from the trade button, build map in the base manager)
This commit is contained in:
+22
-4
@@ -115,7 +115,19 @@
|
||||
.chips { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 8dp; }
|
||||
.chips .chip { margin: 0 6dp 6dp 0; }
|
||||
.chips .chip.on { color: #f2b13c; border-color: #f2b13c; }
|
||||
</style>
|
||||
/* BUILD: the system map the planned site is placed on (the nav map's look: 8 x 8 cells, north on top) */
|
||||
.sitemap { position: relative; width: 380dp; height: 380dp; margin: 6dp 0; background-color: #05080d; border: 1dp #5cc8f040; overflow: hidden; cursor: crosshair; }
|
||||
.sitemap .dot { position: absolute; width: 0; height: 0; pointer-events: none; }
|
||||
.sitemap .dot .s { position: absolute; left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #8197ad; }
|
||||
.sitemap .dot .l { position: absolute; left: 8dp; top: -7dp; white-space: nowrap; font-size: 11dp; color: #8197ad; }
|
||||
.sitemap .sun .s { left: -8dp; top: -8dp; width: 16dp; height: 16dp; border-radius: 8dp; background-color: #f2c94c; }
|
||||
.sitemap .planet .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border-radius: 6dp; background-color: #3d79b8; }
|
||||
.sitemap .station .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; border-radius: 0; background-color: #5cc8f0; }
|
||||
.sitemap .hole .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #ef6a5b; background-color: transparent; }
|
||||
.sitemap .mine .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 0; background-color: #7cf27c; }
|
||||
.sitemap .site .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 0; border: 1dp #7cf27c; background-color: transparent; }
|
||||
.sitemap .mark { position: absolute; width: 0; height: 0; pointer-events: none; }
|
||||
.sitemap .mark .m { position: absolute; left: -9dp; top: -9dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; background-color: #f2b13c40; }
|
||||
</head>
|
||||
<body class="window">
|
||||
<div class="win-head" data-model="base">
|
||||
@@ -365,11 +377,17 @@
|
||||
</div>
|
||||
<div class="hint sys-info">{{ type_info }}</div>
|
||||
<div data-if="sys_mine">
|
||||
<div class="amount"><span class="label">Distance</span><input class="range" type="range" min="50" max="2000" step="50" data-value="dist"/><span class="v">{{ dist_text }}</span></div>
|
||||
<!-- the system map (a nav map clone): click where the site shall stand, drag to move it -->
|
||||
<div id="sitemap" class="sitemap">
|
||||
<div class="dot" data-for="d : site_dots" data-class-sun="d.cls == 'sun'" data-class-planet="d.cls == 'planet'" data-class-station="d.cls == 'station'"
|
||||
data-class-hole="d.cls == 'hole' || d.cls == 'gate'" data-class-mine="d.cls == 'mine'" data-class-site="d.cls == 'site'"
|
||||
data-style-left="d.left" data-style-top="d.top"><div class="s"></div><span class="l" data-if="d.label != ''">{{ d.label }}</span></div>
|
||||
<div class="mark" data-if="mark_set" data-style-left="mark_left" data-style-top="mark_top"><div class="m" data-style-transform="mark_rot"></div></div>
|
||||
</div>
|
||||
<div class="hint">{{ mark_set ? 'Planned at ' + mark_text + ' - drag to move it.' : 'Click the map where the site shall stand.' }}</div>
|
||||
<div class="amount"><span class="label">Turn</span><input class="range" type="range" min="0" max="345" step="15" data-value="turn"/><span class="v">{{ turn_text }}</span></div>
|
||||
<div class="actions">
|
||||
<div class="btn" data-class-primary="show_site" data-action="show-site">{{ show_site ? 'Hide planned site' : 'Show site' }}<div class="tip">Shows the planned site as a ghost ahead of your ship; the sliders move it.</div></div>
|
||||
<div class="btn primary" data-action="site">{{ site_text }}<div class="tip">Builds a construction site of the picked type where the planned site is. Deliver its wares under Objects.</div></div>
|
||||
<div class="btn primary" data-class-disabled="!mark_set" data-action="site">{{ site_text }}<div class="tip">Builds a construction site of the picked type where it is planned on the map. Deliver its wares in space (target it, trade) or fund it - traders bring them.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" data-if="!sys_mine && sys_in">Claim the system to build here.</div>
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Construction site</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; }
|
||||
.sub { font-size: 12dp; margin-bottom: 6dp; color: #8197ad; }
|
||||
.lst { flex: 1; overflow-y: auto; background-color: #5cc8f008; }
|
||||
.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.dim { color: #8197ad; }
|
||||
.it .n { flex: 1; min-width: 0; font-size: 14dp; }
|
||||
.it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; margin-left: 8dp; }
|
||||
.it .o { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
|
||||
.bar { height: 6dp; background-color: #ffffff10; margin: 4dp 0 10dp 0; }
|
||||
.bar .fill { height: 6dp; background-color: #f2b13c; }
|
||||
.move { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #f2b13c; background-color: #5cc8f010; }
|
||||
.move .t { flex: 1; min-width: 0; }
|
||||
.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 .range { width: 220dp; margin: 0 10dp; }
|
||||
.move .btn { margin: 0 0 0 6dp; }
|
||||
.fund { margin-top: 12dp; padding: 12dp; display: flex; flex-direction: row; align-items: center; border-left: 3dp #5cc8f0; background-color: #5cc8f010; }
|
||||
.fund .t { flex: 1; min-width: 0; }
|
||||
.fund .t .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; }
|
||||
.fund .t .a { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
|
||||
.fund .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="sitetrade">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
|
||||
<span class="title">CONSTRUCTION SITE</span><span class="sl">\\\</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content" style="display: flex; flex-direction: column;">
|
||||
<div class="t" style="font-family: 'Saira SemiCondensed'; font-weight: 600; font-size: 18dp;">{{ title }}</div>
|
||||
<div class="hint">{{ line }}</div>
|
||||
<div class="bar"><div class="fill" data-style-width="progress + '%'"></div></div>
|
||||
<div class="cols">
|
||||
<div class="col">
|
||||
<h3>Your cargo</h3>
|
||||
<div class="sub">Click a ware the site needs</div>
|
||||
<div class="lst">
|
||||
<div class="hint" style="padding: 10dp;" data-if="hold.size == 0">Your hold is empty.</div>
|
||||
<div class="it" data-for="i : hold" data-class-picked="i.selected" data-class-dim="!i.useful" data-action="pick" data-attr-data-arg="i.key">
|
||||
<span class="n">{{ i.name }}</span><span class="c">{{ i.hold }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col last">
|
||||
<h3>The site needs</h3>
|
||||
<div class="sub">Delivered / needed - ordered from the traders</div>
|
||||
<div class="lst">
|
||||
<div class="hint" style="padding: 10dp;" data-if="needs.size == 0">Nothing - all wares are in.</div>
|
||||
<div class="it" data-for="i : needs" data-class-picked="i.selected" data-class-dim="!i.useful" data-action="pick" data-attr-data-arg="i.key">
|
||||
<span class="n">{{ i.name }}</span><span class="c">{{ i.need }}</span><span class="o" data-if="i.ordered != ''">{{ i.ordered }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="move" data-if="can_deliver">
|
||||
<div class="t"><div class="n">{{ pick_name }}</div><div class="a">{{ qty_text }}</div></div>
|
||||
<input class="range" type="range" min="1" step="1" data-attr-max="qty_max" data-value="qty"/>
|
||||
<div class="btn" data-action="all">Max</div>
|
||||
<div class="btn primary" data-action="deliver">Deliver<div class="tip">Hands the amount from your hold to the site.</div></div>
|
||||
</div>
|
||||
<div class="fund" data-if="owner">
|
||||
<div class="t"><div class="n">{{ fund_title }}</div><div class="a">{{ fund_line }}</div></div>
|
||||
<div class="btn" data-if="funded" data-action="unfund">Take orders back<div class="tip">Withdraws the site's buy orders - the escrow goes back to your bank.</div></div>
|
||||
<div class="btn primary" data-if="can_fund" data-action="fund">{{ fund_button }}<div class="tip">Places buy orders on the Galactic Market for what the site still lacks; the price is paid from your bank as escrow. Trader pilots fly the wares in.</div></div>
|
||||
</div>
|
||||
<div class="foot2">
|
||||
<span class="hint">{{ status }}</span>
|
||||
<div class="btn" data-action="close">Close</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
Reference in New Issue
Block a user