204 lines
17 KiB
Plaintext
204 lines
17 KiB
Plaintext
<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>
|