New REM client: REM-Client 7891100, 64-bit (REM Coin page in the player window, item shop window with cart and depot picker, event buy-back, new character up to the server's limit, drones per Discord account; shipped RemGfx pipeline list)
This commit is contained in:
@@ -40,6 +40,9 @@
|
||||
.ware .n { margin-left: auto; font-family: "IBM Plex Mono"; }
|
||||
.sys-info { margin-bottom: 8dp; }
|
||||
|
||||
/* COURIERS */
|
||||
.row.mission { flex-wrap: wrap; }
|
||||
.row.mission .sub { width: 100%; font-size: 12dp; color: #8197ad; margin-top: 2dp; }
|
||||
/* DRONES */
|
||||
.dlist { flex: 1; overflow-y: auto; }
|
||||
.drone
|
||||
@@ -120,6 +123,7 @@
|
||||
<div class="sep"></div>
|
||||
<div class="item" data-class-active="page == 6" data-action="page" data-arg="6"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/><span>System</span></div>
|
||||
<div class="item" data-class-active="page == 7" data-action="page" data-arg="7"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/><span>Drones</span><span class="badge" data-if="drones.size > 0">{{ drones.size }}</span></div>
|
||||
<div class="item" data-class-active="page == 8" data-action="page" data-arg="8"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Couriers</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="blocked" data-if="blocked != 0">
|
||||
@@ -463,6 +467,59 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================= COURIERS -->
|
||||
<div class="page" data-if="blocked == 0 && page == 8">
|
||||
<div class="colm gap">
|
||||
<div class="col-h"><h3>Your transports</h3><span class="hint">couriers fly them for real</span></div>
|
||||
<div class="table grow">
|
||||
<div class="head"><span class="c1">Cargo</span><span class="c2">Route</span><span class="c4" style="width: 170dp;">Status</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="courier_rows.size == 0">No transports yet. Send couriers with cargo from a depot to another of your depots.</div>
|
||||
<div class="row mission" data-for="r : courier_rows">
|
||||
<span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c4" style="width: 170dp;">{{ r.c }}</span>
|
||||
<div class="sub" data-if="r.e != ''">{{ r.e }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">NPCs leave couriers alone - players and bots can shoot them down, and their cargo is lost.</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div class="col-h"><h3>Send couriers</h3><span class="hint">from your depot here</span></div>
|
||||
<div class="blocked" data-if="!courier_has_depot">
|
||||
<div class="t">No depot on this base</div>
|
||||
<div class="hint">Couriers take cargo from your depot on this base to one of your other depots.</div>
|
||||
</div>
|
||||
<div class="table grow" data-if="courier_has_depot">
|
||||
<div class="head"><span class="c1">Cargo in the depot</span><span class="c3">Amount</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="courier_items.size == 0">The depot is empty.</div>
|
||||
<div class="row" data-for="r : courier_items" data-class-selected="r.selected" data-action="pick-courier-item" data-attr-data-arg="r.key">
|
||||
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table" data-if="courier_has_depot" style="height: 150dp;">
|
||||
<div class="head"><span class="c1">To your depot on</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="courier_targets.size == 0">You have no other depot.</div>
|
||||
<div class="row" data-for="r : courier_targets" data-class-selected="r.selected" data-action="pick-courier-target" data-attr-data-arg="r.key">
|
||||
<span class="c1">{{ r.a }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="amount" data-if="courier_has_depot">
|
||||
<span class="label">Amount</span>
|
||||
<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" data-action="amount-max">Max</div>
|
||||
</div>
|
||||
<div class="hint" data-if="courier_msg != ''">{{ courier_msg }}</div>
|
||||
<div class="actions" data-if="courier_has_depot">
|
||||
<div class="btn primary" data-class-disabled="!can_send" data-action="send-couriers">Send couriers<div class="tip">The cargo leaves your depot now; couriers fly it to the depot you picked (several when it does not fit one hold).</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================= DRONES -->
|
||||
<div class="page" data-if="blocked == 0 && page == 7">
|
||||
<div class="colm side">
|
||||
|
||||
@@ -100,6 +100,7 @@
|
||||
</div>
|
||||
<span class="why" data-if="reason != ''">{{ reason }}</span>
|
||||
<span class="sum">{{ total }}</span>
|
||||
<div class="btn" style="margin-right: 10dp;" data-if="side == 1 && mount_label != ''" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div>
|
||||
<div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys it: onto a free hardpoint of your ship when there is one, else into the hold.' : 'Sells it; used equipment fetches less.' }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+34
-1
@@ -5,7 +5,7 @@
|
||||
<style>
|
||||
.grid { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||||
.stat { display: flex; flex-direction: row; align-items: center; width: 30%; margin: 0 3% 12dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; }
|
||||
.stat .stat-ico { width: 34dp; height: 34dp; margin-right: 12dp; image-color: #5cc8f0; }
|
||||
.stat .stat-ico { width: 34dp; height: auto; max-height: 34dp; margin-right: 12dp; } /* the icons' own colours, their own proportions (a blue tint and a forced square made them look washed out and squashed) */
|
||||
.stat .k { font-family: "Saira SemiCondensed"; font-size: 12dp; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; }
|
||||
.stat .v { font-family: "IBM Plex Mono"; font-size: 20dp; margin-top: 2dp; }
|
||||
.skill { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
||||
@@ -24,6 +24,11 @@
|
||||
.namefield .label { margin-right: 10dp; }
|
||||
.namefield input.text { flex: 1; }
|
||||
.xp { margin-left: auto; }
|
||||
.coin-log .row .c1 { width: 120dp; font-family: "IBM Plex Mono"; color: #8197ad; }
|
||||
.coin-log .row .c2 { width: 110dp; font-family: "IBM Plex Mono"; text-align: right; margin-right: 12dp; }
|
||||
.coin-log .row .c2.plus { color: #5fd08a; }
|
||||
.coin-log .row .c3 { width: 80dp; }
|
||||
.coin-log .row .c4 { flex: 1; color: #8197ad; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="player">
|
||||
@@ -32,6 +37,7 @@
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">XP <span class="v">{{ xp }}</span></span>
|
||||
<span class="chip">Bank <span class="v">{{ balance }}</span></span>
|
||||
<span class="chip">REM Coin <span class="v">{{ coins }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
@@ -39,6 +45,7 @@
|
||||
<div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_kill_icon_total.3db"/><span>Statistics</span></div>
|
||||
<div class="item" data-class-active="page == 1" data-action="page" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Skills</span></div>
|
||||
<div class="item" data-class-active="page == 2" data-action="page" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Account bank</span></div>
|
||||
<div class="item" data-class-active="page == 3" data-action="page" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/><span>REM Coin</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div data-if="page == 0">
|
||||
@@ -83,6 +90,32 @@
|
||||
<div class="actions" style="margin-top: 10dp;"><div class="btn primary" data-action="send">Send amount<div class="tip">Sends the amount from your account to the picked pilot's account.</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="split" data-if="page == 3">
|
||||
<div class="colm gap">
|
||||
<h3>REM Coin</h3>
|
||||
<div class="big-num">{{ coins }}</div>
|
||||
<div class="hint" data-if="coin_note != ''">{{ coin_note }}</div>
|
||||
<div class="hint" style="margin-bottom: 10dp;">{{ coin_drones }}</div>
|
||||
<div class="namefield"><span class="label">This character</span><span class="v">{{ coin_xp }}</span></div>
|
||||
<div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="coin_amount" maxlength="13"/></div>
|
||||
<div class="actions">
|
||||
<div class="btn primary" data-action="coin_xp">XP to REM Coin<div class="tip">{{ coin_xp_rule }}</div></div>
|
||||
<div class="btn" data-action="coin_all_xp">All XP<div class="tip">Turns all XP of this character into REM Coin.</div></div>
|
||||
<div class="btn primary" data-if="coin_exchange" data-action="coin_credits">REM Coin to credits<div class="tip">{{ coin_cr_rule }}</div></div>
|
||||
</div>
|
||||
<div class="hint">REM Coin belongs to your Discord account - all your characters share it. You earn it with XP and with your drones, and spend it in the shop.</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<h3 style="margin-bottom: 8dp;">Bookings</h3>
|
||||
<div class="table coin-log" style="flex: 1;">
|
||||
<div class="body">
|
||||
<div class="empty" data-if="coin_log.size == 0">No bookings yet.</div>
|
||||
<div class="row" data-for="l : coin_log"><span class="c1">{{ l.time }}</span><span class="c2" data-class-plus="l.plus">{{ l.delta }}</span><span class="c3">{{ l.kind }}</span><span class="c4">{{ l.note }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Radar</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the 3D radar (rem_ui_radar.cpp): the turnable sphere and symbols are the <radar> element's own geometry,
|
||||
frame, title, range buttons and names are this document's */
|
||||
body.radar { position: absolute; left: 16dp; top: 31%; width: 320dp; height: 346dp; background-color: transparent; pointer-events: none;
|
||||
font-family: "Saira SemiCondensed"; font-size: 14dp; color: #dbe6f0; }
|
||||
.frame { position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; background-color: #050a18c0;
|
||||
border: 1dp #3d6d96; border-radius: 4dp; pointer-events: auto; display: flex; flex-direction: column; }
|
||||
.head { display: flex; flex-direction: row; align-items: center; height: 26dp; padding: 0 10dp; border-bottom: 1dp #24405c; }
|
||||
.head .title { font-weight: 600; letter-spacing: 1.5dp; font-size: 14dp; color: #f2b13c; }
|
||||
.head .count { margin-left: 8dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; }
|
||||
.head .spacer { flex: 1; }
|
||||
.rng { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; padding: 1dp 5dp; margin-left: 3dp; border: 1dp #24405c; border-radius: 3dp; }
|
||||
.rng:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.rng.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c24; }
|
||||
#scope { position: relative; flex: 1; }
|
||||
radar { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; cursor: move; }
|
||||
.lbl { position: absolute; font-size: 12dp; white-space: nowrap; pointer-events: none; }
|
||||
.fwd { position: absolute; left: 50%; margin-left: -4dp; top: 4dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; pointer-events: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="radar" data-model="radar">
|
||||
<div class="frame">
|
||||
<div class="head">
|
||||
<span class="title">RADAR</span><span class="count">{{ count }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="rng" data-class-on="range == 0" data-action="range" data-arg="0">2.5K</span>
|
||||
<span class="rng" data-class-on="range == 1" data-action="range" data-arg="1">5K</span>
|
||||
<span class="rng" data-class-on="range == 2" data-action="range" data-arg="2">7.5K</span>
|
||||
<span class="rng" data-class-on="range == 3" data-action="range" data-arg="3">15K</span>
|
||||
</div>
|
||||
<div id="scope">
|
||||
<radar id="radar"></radar>
|
||||
<div class="lbl" data-for="l : labels" data-style-left="l.left" data-style-top="l.top" data-style-color="l.colour">{{ l.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,203 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Shop</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.grid-col { flex: 1; }
|
||||
.colm.side { flex: 0 0 30%; margin-left: 16dp; }
|
||||
.nav .item.sub { padding-left: 34dp; }
|
||||
.nav .item.sub2 { padding-left: 50dp; }
|
||||
.nav .item .n { flex: 1; }
|
||||
.nav .item .cnt { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; margin-left: 6dp; }
|
||||
.toolbar { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
||||
.toolbar h3 { flex: 1; }
|
||||
.toolbar input.text { width: 220dp; }
|
||||
.grid { flex: 1; overflow-y: auto; display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
|
||||
.icard { position: relative; width: 150dp; height: 186dp; margin: 0 10dp 10dp 0; padding: 10dp; border: 1dp #24405c; border-radius: 4dp; background-color: #122033; display: flex; flex-direction: column; align-items: center; }
|
||||
.icard:hover { border-color: #5cc8f0; background-color: #16283f; }
|
||||
.icard.selected { border-color: #f2b13c; background-color: #f2b13c14; }
|
||||
.icard.out { opacity: 0.55; }
|
||||
.icard .pic { width: 86dp; height: 86dp; margin: 4dp 0 8dp 0; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); }
|
||||
.icard .pic img { width: 64dp; height: 64dp; }
|
||||
.icard .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; text-align: center; height: 38dp; overflow: hidden; }
|
||||
.icard .q { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; position: absolute; top: 8dp; left: 8dp; }
|
||||
.icard .badge { position: absolute; top: 8dp; right: 8dp; padding: 1dp 6dp; font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 11dp; letter-spacing: 1dp; color: #160604; background-color: #f2b13c; border-radius: 2dp; }
|
||||
.icard .star { position: absolute; top: 30dp; right: 8dp; width: 16dp; height: 16dp; }
|
||||
.icard .incart { position: absolute; bottom: 52dp; right: 8dp; padding: 1dp 5dp; font-family: "IBM Plex Mono"; font-size: 11dp; color: #070b12; background-color: #5cc8f0; border-radius: 2dp; }
|
||||
.price { display: flex; flex-direction: row; justify-content: center; margin-top: auto; }
|
||||
.pb { font-family: "IBM Plex Mono"; font-size: 13dp; padding: 2dp 6dp; border-radius: 2dp; margin: 0 2dp; }
|
||||
.pb.coin { color: #f2b13c; border: 1dp #f2b13c66; }
|
||||
.pb.cr { color: #dbe6f0; border: 1dp #3d6d96; }
|
||||
.icard .note { font-size: 11dp; color: #8197ad; margin-top: 4dp; text-align: center; }
|
||||
.icard .note.warn { color: #ef6a5b; }
|
||||
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 4dp; background-color: #0d1622; margin-bottom: 12dp; }
|
||||
.detail .top { display: flex; flex-direction: row; align-items: center; }
|
||||
.detail .top .pic { width: 72dp; height: 72dp; margin-right: 12dp; display: flex; align-items: center; justify-content: center; border-radius: 4dp; decorator: vertical-gradient(#1a3150 #0b1524); }
|
||||
.detail .top .pic img { width: 56dp; height: 56dp; }
|
||||
.detail .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
||||
.detail .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; }
|
||||
.detail .txt { font-size: 13dp; line-height: 1.4; margin-top: 8dp; max-height: 110dp; overflow-y: auto; white-space: pre-line; color: #b9c8d6; }
|
||||
.detail .row { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
|
||||
.detail .row .l { flex: 1; font-size: 13dp; color: #8197ad; }
|
||||
.stepper { display: flex; flex-direction: row; align-items: center; }
|
||||
.stepper .sb { width: 26dp; text-align: center; padding: 2dp 0; border: 1dp #3d6d96; border-radius: 3dp; }
|
||||
.stepper .sb:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.stepper .v { width: 44dp; text-align: center; font-family: "IBM Plex Mono"; }
|
||||
.cart { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12dp; border: 1dp #24405c; border-radius: 4dp; background-color: #0d1622; }
|
||||
.cart .lines { flex: 1; overflow-y: auto; min-height: 60dp; }
|
||||
.cline { display: flex; flex-direction: row; align-items: center; padding: 5dp 0; border-bottom: 1dp #ffffff08; }
|
||||
.cline img { width: 26dp; height: 26dp; margin-right: 8dp; }
|
||||
.cline .n { flex: 1; font-size: 13dp; min-width: 0; }
|
||||
.cline .p { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; margin: 0 8dp; text-align: right; }
|
||||
.cline .x { color: #ef6a5b; padding: 0 4dp; }
|
||||
.sum { display: flex; flex-direction: row; font-size: 13dp; padding: 3dp 0; }
|
||||
.sum .l { flex: 1; color: #8197ad; }
|
||||
.sum .v { font-family: "IBM Plex Mono"; }
|
||||
.sum .v.bad { color: #ef6a5b; }
|
||||
.dpsel { display: flex; flex-direction: row; align-items: center; margin: 4dp 0 8dp 0; padding: 6dp 8dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; }
|
||||
.dpsel .dn { flex: 1; font-size: 13dp; color: #f2b13c; min-width: 0; }
|
||||
.dpsel .btn { margin: 0; padding: 2dp 10dp; }
|
||||
.dplist { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.dplist input.text { margin-bottom: 6dp; }
|
||||
.dprows { flex: 1; overflow-y: auto; min-height: 60dp; border: 1dp #24405c; border-radius: 3dp; }
|
||||
.dprow { display: flex; flex-direction: row; font-size: 13dp; padding: 5dp 8dp; border-bottom: 1dp #ffffff08; }
|
||||
.dprow:hover { background-color: #122033; color: #5cc8f0; }
|
||||
.dprow.selected { color: #f2b13c; background-color: #f2b13c14; }
|
||||
.dprow .n { flex: 1; }
|
||||
.dprow .here { font-size: 11dp; color: #5fd08a; }
|
||||
.sellrow { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 8dp; border: 1dp #24405c; border-radius: 4dp; background-color: #122033; }
|
||||
.sellrow:hover { border-color: #5cc8f0; }
|
||||
.sellrow.selected { border-color: #f2b13c; background-color: #f2b13c14; }
|
||||
.sellrow img { width: 44dp; height: 44dp; margin-right: 12dp; }
|
||||
.sellrow .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
|
||||
.sellrow .s { font-size: 12dp; color: #8197ad; margin-right: 14dp; text-align: right; }
|
||||
.banner { padding: 10dp 12dp; margin-bottom: 10dp; border: 1dp #3d6d96; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #122033; font-size: 13dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="shop">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/nn_traderequest.3db"/>
|
||||
<span class="title">SHOP</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">REM Coin <span class="v">{{ coins }}</span></span>
|
||||
<span class="chip">Bank <span class="v">{{ credits }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="nav">
|
||||
<div class="item" data-for="p : pages" data-class-active="p.active" data-class-sub="p.depth == 1" data-class-sub2="p.depth >= 2" data-action="page" data-attr-data-arg="p.id">
|
||||
<img class="ico" data-if="p.icon != ''" data-attr-src="p.icon"/><span class="n">{{ p.name }}</span><span class="cnt" data-if="p.count > 0">{{ p.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="banner" data-if="note != ''">{{ note }}</div>
|
||||
<div class="split">
|
||||
<div class="colm grid-col" data-if="!selling">
|
||||
<div class="toolbar">
|
||||
<h3>{{ page_title }}</h3>
|
||||
<input class="text" type="text" data-value="search" placeholder="Search..." maxlength="40"/>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="hint" data-if="cards.size == 0">{{ empty }}</div>
|
||||
<div class="icard" data-for="c : cards" data-class-selected="c.selected" data-class-out="c.out" data-action="pick" data-attr-data-arg="c.key">
|
||||
<span class="q" data-if="c.qty != ''">{{ c.qty }}</span>
|
||||
<span class="badge" data-if="c.badge != ''">{{ c.badge }}</span>
|
||||
<img class="star" data-if="c.featured" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
|
||||
<div class="pic"><img data-attr-src="c.icon"/></div>
|
||||
<div class="t">{{ c.title }}</div>
|
||||
<span class="incart" data-if="c.incart != ''">{{ c.incart }}</span>
|
||||
<div class="price">
|
||||
<span class="pb coin" data-if="c.coins != ''">{{ c.coins }}</span>
|
||||
<span class="pb cr" data-if="c.credits != ''">{{ c.credits }}</span>
|
||||
</div>
|
||||
<div class="note" data-class-warn="c.out" data-if="c.note != ''">{{ c.note }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm grid-col" data-if="selling">
|
||||
<div class="toolbar"><h3>Sell event items for REM Coin</h3></div>
|
||||
<div class="hint" style="margin-bottom: 10dp;">The items are taken out of the depot picked on the right. Each item has a daily limit.</div>
|
||||
<div class="hint" data-if="sells.size == 0">The shop buys nothing at the moment.</div>
|
||||
<div style="flex: 1; overflow-y: auto;">
|
||||
<div class="sellrow" data-for="s : sells" data-class-selected="s.selected" data-action="sellpick" data-attr-data-arg="s.key">
|
||||
<img data-attr-src="s.icon"/>
|
||||
<span class="n">{{ s.title }}</span>
|
||||
<span class="s">{{ s.today }}</span>
|
||||
<span class="pb coin">{{ s.coins }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div class="detail" data-if="has_pick && !selling">
|
||||
<div class="top">
|
||||
<div class="pic"><img data-attr-src="pick_icon"/></div>
|
||||
<div style="flex: 1; min-width: 0;"><div class="t">{{ pick_title }}</div><div class="k">{{ pick_kind }}</div></div>
|
||||
</div>
|
||||
<div class="txt" data-if="pick_text != ''">{{ pick_text }}</div>
|
||||
<div class="row"><span class="l">Price</span><span class="pb coin" data-if="pick_coins != ''">{{ pick_coins }}</span><span class="pb cr" data-if="pick_credits != ''">{{ pick_credits }}</span></div>
|
||||
<div class="row" data-if="pick_limit != ''"><span class="l">{{ pick_limit }}</span></div>
|
||||
<div class="row">
|
||||
<span class="l">Amount</span>
|
||||
<div class="stepper"><span class="sb" data-action="count" data-arg="-1">-</span><span class="v">{{ pick_count }}</span><span class="sb" data-action="count" data-arg="1">+</span><span class="sb" data-action="count" data-arg="10" style="margin-left: 4dp;">+10</span></div>
|
||||
</div>
|
||||
<div class="actions" style="margin-top: 10dp;"><div class="btn primary" data-class-disabled="!can_add" data-action="add">Add to cart<div class="tip">Into the cart - you buy everything in it at once.</div></div></div>
|
||||
</div>
|
||||
<div class="detail" data-if="selling">
|
||||
<div class="top" data-if="has_sell">
|
||||
<div class="pic"><img data-attr-src="sell_icon"/></div>
|
||||
<div style="flex: 1; min-width: 0;"><div class="t">{{ sell_title }}</div><div class="k">{{ sell_rule }}</div></div>
|
||||
</div>
|
||||
<div class="hint" data-if="!has_sell">Pick an item on the left.</div>
|
||||
<div class="row" data-if="has_sell"><span class="l">Units</span><input class="text" type="text" data-value="sell_amount" maxlength="7" style="width: 90dp;"/></div>
|
||||
<div class="row" data-if="has_sell"><span class="l">You get</span><span class="pb coin">{{ sell_total }}</span></div>
|
||||
<div class="actions" style="margin-top: 10dp;" data-if="has_sell"><div class="btn primary" data-action="sell">Sell<div class="tip">Takes the units out of the picked depot and pays REM Coin.</div></div></div>
|
||||
</div>
|
||||
<div class="cart">
|
||||
<div class="dplist" data-if="depot_picking">
|
||||
<h3 style="margin-bottom: 6dp;">Pick a depot <span class="hint">({{ depot_count }})</span></h3>
|
||||
<input class="text" type="text" data-value="depot_filter" placeholder="Search a base..." maxlength="30"/>
|
||||
<div class="dprows">
|
||||
<div class="hint" style="padding: 8dp;" data-if="depots.size == 0">No depot matches.</div>
|
||||
<div class="dprow" data-for="d : depots" data-class-selected="d.selected" data-action="depot" data-attr-data-arg="d.id"><span class="n">{{ d.name }}</span><span class="here" data-if="d.here">docked here</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 6dp;" data-if="!selling && !depot_picking">Cart</h3>
|
||||
<div class="lines" data-if="!selling && !depot_picking">
|
||||
<div class="hint" data-if="cart.size == 0">Your cart is empty. Pick something and add it.</div>
|
||||
<div class="cline" data-for="l : cart">
|
||||
<img data-attr-src="l.icon"/>
|
||||
<span class="n">{{ l.title }}</span>
|
||||
<div class="stepper"><span class="sb" data-action="cartdec" data-attr-data-arg="l.key">-</span><span class="v">{{ l.count }}</span><span class="sb" data-action="cartinc" data-attr-data-arg="l.key">+</span></div>
|
||||
<span class="p">{{ l.price }}</span>
|
||||
<span class="x" data-action="cartdel" data-attr-data-arg="l.key">×</span>
|
||||
</div>
|
||||
</div>
|
||||
<div data-if="!selling && !depot_picking">
|
||||
<div class="sum" data-if="sum_coins != ''"><span class="l">REM Coin</span><span class="v">{{ sum_coins }}</span></div>
|
||||
<div class="sum" data-if="sum_credits != ''"><span class="l">Bank credits</span><span class="v">{{ sum_credits }}</span></div>
|
||||
<div class="sum" data-if="after_coins != ''"><span class="l">REM Coin afterwards</span><span class="v" data-class-bad="short_coins">{{ after_coins }}</span></div>
|
||||
<div class="sum" data-if="after_credits != ''"><span class="l">Bank afterwards</span><span class="v" data-class-bad="short_credits">{{ after_credits }}</span></div>
|
||||
</div>
|
||||
<div data-if="(needs_depot || selling) && !depot_picking">
|
||||
<div class="hint" style="margin-top: 8dp;">{{ selling ? 'Sell out of depot' : 'Deliver to depot' }}</div>
|
||||
<div class="hint" data-if="depot_count == 0">You have no depot. Buy one at a base first (Base manager).</div>
|
||||
<div class="dpsel" data-if="depot_count > 0"><span class="dn">{{ depot_name }}</span><span class="btn" data-action="depotpick">Change</span></div>
|
||||
</div>
|
||||
<div class="actions" data-if="depot_picking"><div class="btn" data-action="depotpick">Back to the cart</div></div>
|
||||
<div class="actions" data-if="!selling && !depot_picking">
|
||||
<div class="btn primary" data-class-disabled="!can_buy" data-action="buy">Buy<div class="tip">{{ buy_tip }}</div></div>
|
||||
<div class="btn" data-action="clear">Empty cart</div>
|
||||
</div>
|
||||
</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>
|
||||
Reference in New Issue
Block a user