629 lines
46 KiB
Plaintext
629 lines
46 KiB
Plaintext
<rml>
|
|
<head>
|
|
<title>Base manager</title>
|
|
<link type="text/rcss" href="rem.rcss"/>
|
|
<style>
|
|
/* pages: one or two columns that fill the content area */
|
|
.page { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
|
.page.col { flex-direction: column; }
|
|
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
|
.colm.side { flex: 0 0 340dp; margin-right: 18dp; }
|
|
.colm.gap { margin-right: 18dp; }
|
|
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
|
.col-h .hint { margin-left: auto; }
|
|
.grow { flex: 1; min-height: 0; }
|
|
.search { margin-bottom: 8dp; }
|
|
.panel { border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 12dp; margin-bottom: 12dp; }
|
|
.panel .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 4dp; }
|
|
.amount { display: flex; flex-direction: row; align-items: center; margin: 8dp 0 10dp 0; }
|
|
.amount .label { margin-right: 10dp; }
|
|
.amount .v { font-family: "IBM Plex Mono"; width: 90dp; text-align: right; margin-left: 10dp; }
|
|
.amount .btn { margin: 0 0 0 10dp; padding: 3dp 10dp; }
|
|
.jobs .job { margin-bottom: 8dp; }
|
|
.jobs .line { display: flex; flex-direction: row; font-size: 14dp; margin-bottom: 3dp; }
|
|
.jobs .line .left { margin-left: auto; font-family: "IBM Plex Mono"; color: #8197ad; }
|
|
.slots { display: flex; flex-direction: row; margin-bottom: 12dp; }
|
|
.slot { flex: 1; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp; margin-right: 10dp; }
|
|
.slot.last { margin-right: 0; }
|
|
.slot .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin: 4dp 0 8dp 0; }
|
|
.row.short .c2, .row.short .c3 { color: #ef6a5b; }
|
|
|
|
/* SYSTEM */
|
|
.sys-head { display: flex; flex-direction: row; align-items: center; }
|
|
.sys-head .sys-claim { margin-left: auto; }
|
|
.sys-view { display: flex; flex-direction: row; margin-bottom: 8dp; }
|
|
.model { flex: 0 0 55%; height: 260dp; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); margin-right: 14dp; }
|
|
.sys-type { flex: 1; min-width: 0; }
|
|
.sys-type .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; }
|
|
.sys-type .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
|
.ware { display: flex; flex-direction: row; font-size: 14dp; padding: 3dp 0; border-bottom: 1dp #ffffff08; }
|
|
.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
|
|
{
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 9dp 10dp;
|
|
margin-bottom: 6dp;
|
|
border: 1dp #24405c;
|
|
border-radius: 3dp;
|
|
background-color: #122033;
|
|
}
|
|
.drone:hover { border-color: #5cc8f0; }
|
|
.drone.selected { border-color: #f2b13c; }
|
|
.drone .ico
|
|
{
|
|
width: 34dp;
|
|
height: 34dp;
|
|
line-height: 32dp;
|
|
text-align: center;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 17dp;
|
|
font-family: "Saira SemiCondensed";
|
|
font-size: 13dp;
|
|
color: #5cc8f0;
|
|
margin-right: 10dp;
|
|
}
|
|
.drone .mid { flex: 1; min-width: 0; }
|
|
.drone .line1 { display: flex; flex-direction: row; align-items: center; }
|
|
.drone .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; flex: 1; }
|
|
.drone .s { font-size: 13dp; color: #8197ad; margin: 2dp 0 5dp 0; white-space: nowrap; overflow: hidden; }
|
|
.add
|
|
{
|
|
text-align: center;
|
|
padding: 9dp;
|
|
border: 2dp #3d6d96;
|
|
border-radius: 3dp;
|
|
color: #5cc8f0;
|
|
font-family: "Saira SemiCondensed";
|
|
letter-spacing: 1.1dp;
|
|
text-transform: uppercase;
|
|
font-size: 14dp;
|
|
margin-top: 4dp;
|
|
}
|
|
.add:hover { background-color: #122033; }
|
|
.d-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
|
|
.d-head .kind { margin: 0 14dp; }
|
|
.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
|
.pane .table { flex: 1; margin: 8dp 0 10dp 0; }
|
|
.route { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
|
.stop { flex: 1; border: 1dp #24405c; border-radius: 3dp; padding: 8dp 10dp; background-color: #122033; }
|
|
.stop .v { font-family: "Saira SemiCondensed"; font-size: 16dp; margin-bottom: 4dp; }
|
|
.arrow { color: #f2b13c; font-family: "IBM Plex Mono"; margin: 0 10dp; }
|
|
.namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
|
.namefield .label { margin-right: 10dp; }
|
|
.namefield input.text { flex: 1; }
|
|
</style>
|
|
</head>
|
|
<body class="window" data-model="base">
|
|
<div class="win-head">
|
|
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_base.3db"/><span class="title">BASE MANAGER</span>
|
|
<span class="loc">{{ base_name }}</span>
|
|
<span class="spacer"></span>
|
|
<span class="chip">Credits <span class="v">{{ money }}</span></span>
|
|
<span class="chip">Drones <span class="v">{{ count }}</span></span>
|
|
<span class="close" data-action="close">×</span>
|
|
</div>
|
|
<div class="win-main">
|
|
<div class="nav">
|
|
<div class="item" data-class-active="page == 0" data-action="page" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Depot</span><span class="badge" data-if="depot.size > 0">{{ depot.size }}</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_cargo.3db"/><span>All depots</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>Market</span></div>
|
|
<div class="item" data-class-active="page == 3" data-action="page" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/><span>Sell</span></div>
|
|
<div class="sep"></div>
|
|
<div class="item" data-class-active="page == 4" data-action="page" data-arg="4"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_crafting.3db"/><span>Crafting</span><span class="badge" data-if="craft_jobs.size > 0">{{ craft_jobs.size }}</span></div>
|
|
<div class="item" data-class-active="page == 5" data-action="page" data-arg="5"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_rank.3db"/><span>Research</span><span class="badge" data-if="research_jobs.size > 0">{{ research_jobs.size }}</span></div>
|
|
<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">
|
|
<div class="t">{{ blocked_title }}</div>
|
|
<div>{{ blocked_text }}</div>
|
|
</div>
|
|
|
|
<!-- ================================================= DEPOT -->
|
|
<div class="page" data-if="blocked == 0 && page == 0">
|
|
<div class="blocked" data-if="depot_state == 0">
|
|
<div class="t">No depot on this base</div>
|
|
<div class="hint">A depot keeps goods on this base, beside your cargo hold. Paid from the account bank.</div>
|
|
<div class="actions" style="margin-top: 14dp;"><div class="btn primary" data-action="buy-depot">Buy a depot here</div></div>
|
|
</div>
|
|
<div class="colm gap" data-if="depot_state != 0">
|
|
<div class="col-h"><h3>Depot on this base</h3><span class="hint">{{ depot.size }} kinds</span></div>
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Item</span><span class="c2">Type</span><span class="c3">Amount</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="depot.size == 0">{{ depot_state < 0 ? 'Waiting for the server...' : 'The depot is empty.' }}</div>
|
|
<div class="row" data-for="r : depot" data-class-selected="r.selected" data-action="pick-depot" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm" data-if="depot_state != 0">
|
|
<div class="col-h"><h3>Cargo hold</h3><span class="hint">free {{ hold_free }}</span></div>
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Item</span><span class="c3">Amount</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="cargo.size == 0">Nothing in the hold.</div>
|
|
<div class="row" data-for="r : cargo" data-class-selected="r.selected" data-action="pick-cargo" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="amount">
|
|
<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="actions">
|
|
<div class="btn primary" data-action="withdraw">Withdraw to hold<div class="tip">Moves the amount of the depot item you picked into your cargo hold.</div></div>
|
|
<div class="btn primary" data-action="deposit">Deposit to depot<div class="tip">Moves the amount of the cargo you picked into the depot on this base.</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= ALL DEPOTS -->
|
|
<div class="page col" data-if="blocked == 0 && page == 1">
|
|
<div class="col-h"><h3>Your depots</h3><span class="hint">{{ depots.size }} bases</span></div>
|
|
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Base</span><span class="c3">Items</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="depots.size == 0">No depots yet.</div>
|
|
<div class="row" data-for="r : depots"><span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= MARKET -->
|
|
<div class="page col" data-if="blocked == 0 && page == 2">
|
|
<div class="blocked" data-if="market_state == 0">
|
|
<div class="t">No galactic market here</div>
|
|
<div class="hint">The galactic market is open on trade hubs only.</div>
|
|
</div>
|
|
<div class="colm" data-if="market_state != 0">
|
|
<div class="col-h"><h3>Galactic market</h3><span class="hint">{{ listings.size }} offers</span></div>
|
|
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Item</span><span class="c3">Amount</span><span class="c4">Price / unit</span><span class="c2">Seller</span><span class="c2">Trade hub</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="listings.size == 0">{{ market_state < 0 ? 'Waiting for the server...' : 'No offers.' }}</div>
|
|
<div class="row" data-for="r : listings" data-class-selected="r.selected" data-action="pick-listing" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.b }}</span><span class="c4">{{ r.c }}</span><span class="c2">{{ r.d }}</span><span class="c2">{{ r.e }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hint" style="margin-top: 8dp;">{{ listing_pick == '' ? 'Pick an offer in the table.' : listing_pick }}</div>
|
|
<div class="amount">
|
|
<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="actions"><div class="btn primary" data-action="market-buy">Buy<div class="tip">Buys the amount; it goes into the depot on the seller's trade hub.</div></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= SELL -->
|
|
<div class="page" data-if="blocked == 0 && page == 3">
|
|
<div class="colm gap">
|
|
<div class="col-h"><h3>Depot items</h3></div>
|
|
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Item</span><span class="c3">Amount</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="depot.size == 0">{{ market_state == 0 ? 'No galactic market here (trade hubs only).' : 'The depot is empty.' }}</div>
|
|
<div class="row" data-for="r : depot" data-class-selected="r.selected" data-action="pick-sell" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm side">
|
|
<div class="panel">
|
|
<div class="label">Offer on the galactic market</div>
|
|
<div class="t">{{ sell_pick == '' ? 'Pick a depot item' : sell_pick }}</div>
|
|
<div class="amount">
|
|
<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>
|
|
<div class="namefield"><span class="label">Price / unit</span><input class="text" type="text" data-value="price" maxlength="12"/></div>
|
|
<div class="actions"><div class="btn primary" data-action="market-list">List for sale<div class="tip">Puts the amount on the galactic market at that price per unit.</div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= CRAFTING -->
|
|
<div class="page" data-if="blocked == 0 && page == 4">
|
|
<div class="colm side">
|
|
<div class="col-h"><h3>Recipes</h3><span class="hint">{{ recipes.size }}</span></div>
|
|
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="table grow">
|
|
<div class="body">
|
|
<div class="empty" data-if="recipes.size == 0">Waiting for the server...</div>
|
|
<div class="row" data-for="r : recipes" data-class-selected="r.selected" data-action="pick-recipe" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="panel" data-if="has_recipe">
|
|
<div class="t">{{ recipe_name }}</div>
|
|
<div class="hint">{{ recipe_meta }}</div>
|
|
</div>
|
|
<div class="panel" data-if="!has_recipe">
|
|
<div class="t">Pick a recipe</div>
|
|
<div class="hint">Materials come from the depot on this base.</div>
|
|
</div>
|
|
<div class="table" data-if="has_recipe">
|
|
<div class="head"><span class="c1">Material</span><span class="c2">Needed</span><span class="c3">In depot</span></div>
|
|
<div class="row" data-for="r : materials" data-class-short="r.short">
|
|
<span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="amount" data-if="has_recipe">
|
|
<span class="label">How many</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="actions" data-if="has_recipe"><div class="btn primary" data-action="craft">Craft<div class="tip">Starts a crafting job; the materials leave the depot now, the result arrives there when the job is done.</div></div></div>
|
|
<div class="col-h" style="margin-top: 10dp;"><h3>Crafting jobs</h3></div>
|
|
<div class="jobs grow scroll">
|
|
<div class="hint" data-if="craft_jobs.size == 0">No crafting jobs.</div>
|
|
<div class="job" data-for="j : craft_jobs">
|
|
<div class="line"><span>{{ j.name }}</span><span class="left">{{ j.left }}</span></div>
|
|
<div class="bar"><div class="fill" data-style-width="j.percent + '%'"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= RESEARCH -->
|
|
<div class="page" data-if="blocked == 0 && page == 5">
|
|
<div class="colm side">
|
|
<div class="col-h"><h3>Research materials</h3><span class="hint">{{ research_goods.size }}</span></div>
|
|
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="table grow">
|
|
<div class="body">
|
|
<div class="empty" data-if="research_goods.size == 0">Waiting for the server...</div>
|
|
<div class="row" data-for="r : research_goods" data-class-selected="r.selected" data-class-current="r.current" data-action="pick-research" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="slots">
|
|
<div class="slot"><div class="label">Weapon base</div><div class="v">{{ weapon }}</div><div class="btn" data-action="research-slot" data-arg="weapon">Use picked</div></div>
|
|
<div class="slot"><div class="label">Material 1</div><div class="v">{{ mat1 }}</div><div class="btn" data-action="research-slot" data-arg="1">Use picked</div></div>
|
|
<div class="slot last"><div class="label">Material 2</div><div class="v">{{ mat2 }}</div><div class="btn" data-action="research-slot" data-arg="2">Use picked</div></div>
|
|
</div>
|
|
<div class="namefield"><span class="label">New weapon's name</span><input class="text" type="text" data-value="research_name" maxlength="32"/></div>
|
|
<div class="actions"><div class="btn primary" data-action="research">Start research<div class="tip">Researches a new weapon from the weapon base and the two materials. The name needs at least 5 letters.</div></div></div>
|
|
<div class="col-h" style="margin-top: 10dp;"><h3>Research jobs</h3></div>
|
|
<div class="jobs grow scroll">
|
|
<div class="hint" data-if="research_jobs.size == 0">No research jobs.</div>
|
|
<div class="job" data-for="j : research_jobs">
|
|
<div class="line"><span>{{ j.name }}</span><span class="left">{{ j.left }}</span></div>
|
|
<div class="bar"><div class="fill" data-style-width="j.percent + '%'"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ================================================= SYSTEM -->
|
|
<div class="page col" data-if="blocked == 0 && page == 6">
|
|
<div class="panel sys-head">
|
|
<div><div class="t">{{ sys_title }}</div><div class="hint">{{ sys_line }}</div></div>
|
|
<div class="actions sys-claim" data-if="sys_can_claim"><div class="btn primary" data-action="claim">{{ claim_text }}<div class="tip">Claims this system for you, for good. You can build here then.</div></div></div>
|
|
</div>
|
|
<div class="subtabs">
|
|
<div class="tab" data-class-active="sys_sub == 0" data-action="sys-sub" data-arg="0">Build</div>
|
|
<div class="tab" data-class-active="sys_sub == 1" data-action="sys-sub" data-arg="1">Objects</div>
|
|
</div>
|
|
|
|
<!-- BUILD: the catalog, the type's model and wares, placing a site -->
|
|
<div class="page" data-if="sys_sub == 0">
|
|
<div class="colm side">
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Catalog</span><span class="c3">Built</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="catalog.size == 0">Nothing to build yet.</div>
|
|
<div class="row" data-for="r : catalog" data-class-selected="r.selected" data-action="pick-type" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="sys-view">
|
|
<div id="sys-model" class="model"></div>
|
|
<div class="sys-type" data-if="has_type">
|
|
<div class="t">{{ type_name }}</div>
|
|
<div class="p">{{ type_meta }}</div>
|
|
<div class="label" style="margin-top: 8dp;">Wares</div>
|
|
<div class="hint" data-if="type_wares.size == 0">No wares needed.</div>
|
|
<div class="ware" data-for="w : type_wares"><span>{{ w.a }}</span><span class="n">{{ w.b }}</span></div>
|
|
</div>
|
|
</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>
|
|
<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>
|
|
</div>
|
|
<div class="hint" data-if="!sys_mine && sys_in">Claim the system to build here.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OBJECTS: the system's objects, the picked one -->
|
|
<div class="page" data-if="sys_sub == 1">
|
|
<div class="colm side">
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Object</span><span class="c4">State</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="objects.size == 0">{{ sys_in ? 'Nothing built yet.' : 'Not in an uncharted system.' }}</div>
|
|
<div class="row" data-for="r : objects" data-class-selected="r.selected" data-action="pick-object" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c4">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="actions" style="margin-top: 10dp;">
|
|
<div class="btn" data-action="target">Target<div class="tip">Targets the picked object in space.</div></div>
|
|
<div class="btn" data-action="waypoint">Waypoint<div class="tip">Sets a waypoint to the picked object.</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="panel">
|
|
<div class="t">{{ obj_title }}</div>
|
|
<div class="hint">{{ obj_line }}</div>
|
|
<div class="bar" data-if="obj_bar >= 0" style="margin-top: 8dp;"><div class="fill" data-style-width="obj_bar + '%'"></div></div>
|
|
</div>
|
|
<div class="subtabs" data-if="obj_picked && (obj_site || obj_edit)">
|
|
<div class="tab" data-if="obj_site" data-class-active="sys_view == 0" data-action="sys-view" data-arg="0">Wares</div>
|
|
<div class="tab" data-class-active="sys_view == 1" data-action="sys-view" data-arg="1">Rules</div>
|
|
<div class="tab" data-if="!obj_site && obj_edit" data-class-active="sys_view == 2" data-action="sys-view" data-arg="2">Loadout</div>
|
|
</div>
|
|
<!-- wares of a site -->
|
|
<div class="pane" data-if="obj_site && sys_view == 0">
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Ware</span><span class="c2">Delivered</span><span class="c3">In hold</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="needs.size == 0">No wares needed.</div>
|
|
<div class="row" data-for="r : needs" data-class-selected="r.selected" data-action="pick-need" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-if="can_deliver">
|
|
<div class="amount"><span class="label">Amount</span><input class="range" type="range" min="1" step="1" data-attr-max="qty_max" data-value="qty"/><span class="v">{{ qty_text }}</span></div>
|
|
<div class="actions"><div class="btn primary" data-action="deliver">Deliver<div class="tip">Hands the amount of the picked ware from your hold to the site.</div></div></div>
|
|
</div>
|
|
</div>
|
|
<!-- rules: who it fires at / lets dock / lets deliver -->
|
|
<div class="pane" data-if="obj_picked && sys_view == 1">
|
|
<div class="actions" data-if="obj_edit"><div class="btn primary" data-action="rule-mode">{{ rule_mode }}<div class="tip">Switches the rule mode: everybody, the list only, nobody.</div></div></div>
|
|
<div class="hint" data-if="!obj_edit">{{ rule_mode }} - only the owner sets rules.</div>
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Pilot</span><span class="c3">Rule</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="pilots.size == 0">No pilots online.</div>
|
|
<div class="row" data-for="r : pilots" data-class-selected="r.selected" data-action="pick-pilot" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c3">{{ r.b }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div data-if="obj_edit">
|
|
<div class="namefield" style="margin-top: 8dp;"><span class="label">Pilot</span><input class="text" type="text" data-value="sys_pilot" maxlength="32"/></div>
|
|
<div class="actions">
|
|
<div class="btn" data-action="rule" data-arg="allow">{{ allow_text }}</div>
|
|
<div class="btn" data-action="rule" data-arg="deny">{{ deny_text }}</div>
|
|
<div class="btn danger" data-action="rule" data-arg="clear">Remove</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- loadout of a built object (its owner) -->
|
|
<div class="page" data-if="obj_picked && !obj_site && obj_edit && sys_view == 2">
|
|
<div class="colm gap">
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">Hardpoint</span><span class="c2">Equipped</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="slots.size == 0">Nothing to equip.</div>
|
|
<div class="row" data-for="r : slots" data-class-selected="r.selected" data-action="pick-slot" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="actions" style="margin-top: 8dp;"><div class="btn" data-action="unmount">Take off</div></div>
|
|
</div>
|
|
<div class="colm">
|
|
<div class="table grow">
|
|
<div class="head"><span class="c1">In your hold</span><span class="c3">#</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="gear.size == 0">No weapons or shields in the hold.</div>
|
|
<div class="row" data-for="r : gear" data-class-selected="r.selected" data-action="pick-gear" data-attr-data-arg="r.key"><span class="c1">{{ r.a }}</span><span class="c3">{{ r.c }}</span></div>
|
|
</div>
|
|
</div>
|
|
<div class="actions" style="margin-top: 8dp;"><div class="btn primary" data-action="mount">Mount</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<div class="col-h"><h3>Your drones</h3><span class="hint">{{ count }}</span></div>
|
|
<div class="dlist">
|
|
<div class="hint" data-if="drones.size == 0">{{ empty_text }}</div>
|
|
<div class="drone" data-for="d : drones" data-class-selected="d.selected" data-action="pick" data-attr-data-arg="d.slot">
|
|
<div class="ico">{{ d.icon }}</div>
|
|
<div class="mid">
|
|
<div class="line1"><span class="n">{{ d.name }}</span><span data-attr-class="'state ' + d.state_class">{{ d.state }}</span></div>
|
|
<div class="s">{{ d.kind }} · {{ d.plan }}</div>
|
|
<div class="bar"><div data-attr-class="'fill ' + d.hull_class" data-style-width="d.hull + '%'"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="add" data-action="buy-page">+ Buy a drone</div>
|
|
</div>
|
|
|
|
<div class="colm">
|
|
<div class="d-head" data-if="has_pick">
|
|
<span class="big">{{ cur.name }}</span>
|
|
<span class="kind">{{ cur.kind }} drone</span>
|
|
<span data-attr-class="'state ' + cur.state_class">{{ cur.state }}</span>
|
|
</div>
|
|
<div class="actions" data-if="has_pick">
|
|
<div class="btn primary" data-action="start">{{ cur_active ? 'Stop' : 'Start' }}<div class="tip">{{ cur_active ? 'Calls the drone back; it waits at its home base.' : 'Sends the drone out from ' + cur_home + '.' }}</div></div>
|
|
<div class="btn" data-action="repair">Repair<span class="small" data-if="cur_repair != ''">{{ cur_repair }}</span><div class="tip">Repairs the hull to 100 %. Paid from your credits.</div></div>
|
|
<div class="btn" data-action="home">Station here<div class="tip">Makes this base the drone's home; deliveries go into the depot here.</div></div>
|
|
<div class="btn danger" data-class-armed="scrap_armed" data-action="scrap">{{ scrap_armed ? 'Really scrap?' : 'Scrap' }}<div class="tip">Scraps the drone for a part of its price. A second click within 3 s confirms.</div></div>
|
|
</div>
|
|
<div class="subtabs">
|
|
<div class="tab" data-class-active="sub == 0" data-action="sub" data-arg="0" data-if="has_pick">Overview</div>
|
|
<div class="tab" data-class-active="sub == 1" data-action="sub" data-arg="1" data-if="has_pick">Orders</div>
|
|
<div class="tab" data-class-active="sub == 2" data-action="sub" data-arg="2">Buy</div>
|
|
</div>
|
|
|
|
<div class="pane" data-if="has_pick && sub == 0">
|
|
<div class="stats">
|
|
<div class="cell"><div class="k">Hull</div><div class="v">{{ cur.hull }} %</div></div>
|
|
<div class="cell"><div class="k">Cargo</div><div class="v">{{ cur_cargo }}</div></div>
|
|
<div class="cell"><div class="k">Runs</div><div class="v">{{ cur_runs }}</div></div>
|
|
<div class="cell last"><div class="k">Delivered</div><div class="v">{{ cur_delivered }}</div></div>
|
|
</div>
|
|
<div class="hint">Plan: {{ cur.plan }}</div>
|
|
<div class="hint">Home base: {{ cur_home }}</div>
|
|
</div>
|
|
|
|
<div class="pane" data-if="has_pick && sub == 1">
|
|
<div data-if="cur.kind == 'Trade'">
|
|
<div class="route">
|
|
<div class="stop"><div class="label">Buys at</div><div class="v">{{ route_from }}</div><div class="label">Good out</div><div class="v">{{ route_good }}</div></div>
|
|
<span class="arrow"><></span>
|
|
<div class="stop"><div class="label">Sells at</div><div class="v">{{ route_to }}</div><div class="label">Good back</div><div class="v">{{ route_back }}</div></div>
|
|
</div>
|
|
<div class="subtabs">
|
|
<div class="tab" data-class-active="trade_page == 0" data-action="trade-page" data-arg="0">Buy at</div>
|
|
<div class="tab" data-class-active="trade_page == 1" data-action="trade-page" data-arg="1">Sell at</div>
|
|
<div class="tab" data-class-active="trade_page == 2" data-action="trade-page" data-arg="2">Good out</div>
|
|
<div class="tab" data-class-active="trade_page == 3" data-action="trade-page" data-arg="3">Good back</div>
|
|
</div>
|
|
</div>
|
|
<div class="actions" data-if="cur.kind == 'Escort'">
|
|
<div class="btn" data-class-primary="cur_mode == 'defensive'" data-action="mode" data-arg="defensive">Defensive<div class="tip">Attacks only who attacks the protected pilot.</div></div>
|
|
<div class="btn" data-class-primary="cur_mode == 'aggressive'" data-action="mode" data-arg="aggressive">Aggressive<div class="tip">Attacks hostile targets in reach.</div></div>
|
|
</div>
|
|
<input class="text" type="text" data-value="filter" maxlength="40"/>
|
|
<div class="table">
|
|
<div class="head"><span class="c1">{{ col_a }}</span><span class="c2">{{ col_b }}</span><span class="c3">{{ col_c }}</span></div>
|
|
<div class="body">
|
|
<div class="empty" data-if="list.size == 0">{{ list_empty }}</div>
|
|
<div class="row" data-for="r : list" data-class-selected="r.selected" data-class-current="r.current" data-action="row" data-attr-data-arg="r.key">
|
|
<span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span><span class="c3">{{ r.c }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="actions">
|
|
<div class="btn primary" data-action="apply">{{ cur.kind == 'Mining' ? 'Use this field' : cur.kind == 'Escort' ? 'Protect this pilot' : 'Use this' }}</div>
|
|
<div class="btn" data-if="cur.kind == 'Mining'" data-action="field-auto">Nearest field<div class="tip">The server picks the nearest field with ware.</div></div>
|
|
<div class="btn" data-if="cur.kind == 'Trade'" data-action="trade-auto">Best<div class="tip">The server picks the best trade for this part of the route.</div></div>
|
|
<div class="btn" data-if="cur.kind == 'Trade' && trade_page == 3" data-action="trade-none">Return empty</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pane" data-if="sub == 2">
|
|
<div class="cards">
|
|
<div class="card" data-for="b, i : buy" data-class-last="i == 2">
|
|
<div class="t">{{ b.title }}</div>
|
|
<div class="p">{{ b.price }}</div>
|
|
<div class="d">{{ b.text }}</div>
|
|
<div class="btn primary" data-action="buy" data-attr-data-arg="b.kind">Buy {{ b.title }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="namefield"><span class="label">Name</span><input class="text" type="text" data-value="new_name" maxlength="23"/></div>
|
|
<div class="hint">The name is given at the purchase and cannot be changed later. Letters, digits and . - _ only.</div>
|
|
<div class="hint">{{ rules }}</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>
|