New REM client: REM-Client 8db8f8c, 64-bit (modern REM UI for all windows, switchable with modern_ui: main menu, options, dealers, nav map, inventory, chat with history and settings, PM windows, notifications, flight HUD in FL's shape with HUD editor, colour themes; NeuroNet icons fly to the screen's middle; cursor / crosshair colour presets; dealers open at bases with real dealer rooms; text fields take typed keys)
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Account</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.explain { white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 14dp; }
|
||||
.label { margin-bottom: 6dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="account">
|
||||
<div class="win-head">
|
||||
<span class="title">MULTIPLAYER ACCOUNT</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="explain">{{ explain }}</div>
|
||||
<div class="label">Account key</div>
|
||||
<input class="text" type="text" data-value="key" maxlength="40"/>
|
||||
<div class="actions" style="margin-top: 14dp;">
|
||||
<div class="btn primary" data-class-disabled="key == ''" data-action="go">Continue<div class="tip">Checks the key and goes on to the server list.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<div class="btn" data-action="back">Back</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,571 @@
|
||||
<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; }
|
||||
|
||||
/* 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>
|
||||
<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>
|
||||
|
||||
<!-- ================================================= 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>
|
||||
@@ -0,0 +1,88 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>New pilot</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.list { flex: 1; }
|
||||
.colm.side { flex: 0 0 32%; margin-left: 18dp; }
|
||||
.colm.fig { flex: 0 0 24%; margin-left: 18dp; }
|
||||
#figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
||||
.fig .hint { text-align: center; margin-top: 6dp; }
|
||||
.starts { flex: 1; overflow-y: auto; }
|
||||
.region { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 10dp 0 6dp 0; }
|
||||
.start { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
||||
.start:hover { border-color: #5cc8f0; }
|
||||
.start.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.start img { width: 38dp; height: 38dp; margin-right: 12dp; }
|
||||
.start .txt { flex: 1; min-width: 0; }
|
||||
.start .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 17dp; }
|
||||
.start.selected .n { color: #f2b13c; }
|
||||
.start .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
||||
.start .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
|
||||
.namebox { margin-bottom: 14dp; }
|
||||
.namebox .label { margin-bottom: 6dp; }
|
||||
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; }
|
||||
.detail .k { font-size: 14dp; color: #8197ad; margin-top: 2dp; }
|
||||
.detail .facts { display: flex; flex-direction: row; margin: 10dp 0; }
|
||||
.detail .facts div { margin-right: 24dp; }
|
||||
.detail .facts .v { font-family: "IBM Plex Mono"; color: #f2b13c; font-size: 16dp; }
|
||||
.detail .d { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="charcreate">
|
||||
<div class="win-head">
|
||||
<span class="title">NEW PILOT</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Starts <span class="v">{{ count }}</span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm list">
|
||||
<h3 style="margin-bottom: 4dp;">Where do you start?</h3>
|
||||
<div class="hint" data-if="count == 0">The server offers no start.</div>
|
||||
<div class="starts">
|
||||
<div data-for="r : regions">
|
||||
<div class="region">{{ r.name }}</div>
|
||||
<div class="start" data-for="s : r.starts" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
|
||||
<img data-if="s.icon != ''" data-attr-src="s.icon"/>
|
||||
<div class="txt"><div class="n">{{ s.base }}</div><div class="k">{{ s.ship }}</div></div>
|
||||
<span class="m">{{ s.money }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm fig">
|
||||
<h3 style="margin-bottom: 8dp;">Your pilot</h3>
|
||||
<div id="figure"></div>
|
||||
<div class="hint">drag to turn</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div class="namebox">
|
||||
<div class="label">Pilot name</div>
|
||||
<input class="text" type="text" data-value="name" maxlength="23" placeholder="Your name in Sirius"/>
|
||||
</div>
|
||||
<div class="detail" data-if="has_pick">
|
||||
<div class="n">{{ pick.base }}</div>
|
||||
<div class="k">{{ pick_region }}</div>
|
||||
<div class="facts">
|
||||
<div><div class="label">Ship</div><div class="v">{{ pick.ship }}</div></div>
|
||||
<div><div class="label">Credits</div><div class="v">{{ pick.money }}</div></div>
|
||||
</div>
|
||||
<div class="d">{{ pick_desc }}</div>
|
||||
</div>
|
||||
<div class="actions" style="margin-top: 12dp;">
|
||||
<div class="btn primary" data-class-disabled="name == '' || !has_pick || !ready" data-action="create">Create pilot<div class="tip">Creates the pilot at the picked start; the server may refuse a name that is taken.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<div class="btn" data-action="back">Back</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,84 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Characters</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.list { flex: 1; }
|
||||
.colm.side { flex: 0 0 32%; margin-left: 18dp; }
|
||||
.colm.fig { flex: 0 0 22%; margin-left: 18dp; }
|
||||
#figure { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
||||
.fig .hint { text-align: center; margin-top: 6dp; }
|
||||
.roster { flex: 1; overflow-y: auto; }
|
||||
.pilot { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
||||
.pilot:hover { border-color: #5cc8f0; }
|
||||
.pilot.selected { border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.pilot img { width: 44dp; height: 44dp; margin-right: 14dp; }
|
||||
.pilot .txt { flex: 1; min-width: 0; }
|
||||
.pilot .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
||||
.pilot.selected .n { color: #f2b13c; }
|
||||
.pilot .k { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
||||
.pilot .r { text-align: right; }
|
||||
.pilot .m { font-family: "IBM Plex Mono"; color: #f2b13c; }
|
||||
.pilot .lv { font-family: "IBM Plex Mono"; font-size: 12dp; color: #5cc8f0; margin-top: 2dp; }
|
||||
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; }
|
||||
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 4dp; }
|
||||
.detail .k { font-size: 14dp; color: #8197ad; }
|
||||
.detail .s { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; margin-top: 8dp; }
|
||||
.motd { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.empty-roster { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="charselect">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ server }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Characters <span class="v">{{ chars.size }}</span> / <span class="v">5</span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm list">
|
||||
<h3 style="margin-bottom: 8dp;">Your pilots</h3>
|
||||
<div class="empty-roster" data-if="chars.size == 0">
|
||||
<div class="hint">No pilot on this server yet. Create one to begin.</div>
|
||||
</div>
|
||||
<div class="roster" data-if="chars.size > 0">
|
||||
<div class="pilot" data-for="c : chars" data-class-selected="c.selected" data-action="pick" data-attr-data-arg="c.key">
|
||||
<img data-if="c.icon != ''" data-attr-src="c.icon"/>
|
||||
<div class="txt"><div class="n">{{ c.name }}</div><div class="k">{{ c.ship }} - {{ c.place }}</div></div>
|
||||
<div class="r"><div class="m">{{ c.money }}</div><div class="lv">{{ c.level }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions" style="margin-top: 10dp;">
|
||||
<div class="btn primary" data-class-disabled="!has_pick || !ready" data-action="load">Launch<div class="tip">Plays the picked pilot. A double click on a pilot does the same.</div></div>
|
||||
<div class="btn" data-class-disabled="!can_new || !ready" data-action="new">New pilot<div class="tip">Creates a new pilot (at most five per account).</div></div>
|
||||
<div class="btn" data-class-disabled="!has_pick || !ready" data-action="delete">Delete<div class="tip">Deletes the picked pilot for good (you are asked first).</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm fig">
|
||||
<h3 style="margin-bottom: 8dp;">Pilot</h3>
|
||||
<div id="figure"></div>
|
||||
<div class="hint">drag to turn</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div class="detail" data-if="has_pick">
|
||||
<div class="n">{{ pick.name }}</div>
|
||||
<div class="k">{{ pick.level }} - {{ pick.money }}</div>
|
||||
<div class="k">{{ pick.ship }}, {{ pick.place }}</div>
|
||||
<div class="s">{{ pick_stats }}</div>
|
||||
</div>
|
||||
<div class="detail" data-if="!has_pick"><div class="k">Pick a pilot.</div></div>
|
||||
<h3 style="margin-bottom: 8dp;">Message of the day</h3>
|
||||
<div class="motd">{{ motd }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<div class="btn" data-action="back">Back to servers</div>
|
||||
<div class="btn" data-action="menu">Main menu</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,26 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Chat</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the running chat as FL shows it: lines at the left edge without a frame, the newest at
|
||||
the bottom; the chat line below while one is typed */
|
||||
body.feed { position: absolute; left: 16dp; top: 25%; width: 46%; height: 42%; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; font-family: "Saira SemiCondensed"; font-size: 19dp; color: #dbe6f0; }
|
||||
.lines { pointer-events: none; overflow: hidden; line-height: 1.25; font-effect: shadow(1dp 1dp #000000d0); }
|
||||
.line { margin-top: 8dp; padding: 5dp 10dp; background-color: #050a18d9; border: 2dp #3f9ad6; border-radius: 6dp; display: flex; flex-direction: row; }
|
||||
.line .p { white-space: nowrap; margin-right: 6dp; }
|
||||
.line .t { flex: 1; white-space: pre; overflow: hidden; }
|
||||
.gear { width: 22dp; height: 22dp; margin-left: 8dp; image-color: #8fb8d8; }
|
||||
.gear:hover { image-color: #f2b13c; }
|
||||
.caret { color: #f2d23c; animation: 1s steps(1) infinite blink; }
|
||||
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="feed" data-model="chatfeed">
|
||||
<div class="lines" data-if="feed_shown" data-rml="feed"></div>
|
||||
<div class="line" data-if="typing">
|
||||
<span class="p" data-rml="prefix"></span><span class="t">{{ text }}<span class="caret">|</span></span>
|
||||
<img class="gear" src="img/gear.png" data-action="settings"/>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,58 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Chat history</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.histcol { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.ctabs { display: flex; flex-direction: row; margin-bottom: 8dp; }
|
||||
.ct { padding: 4dp 12dp; margin-right: 4dp; border: 1dp #24405c; border-radius: 3dp; font-size: 13dp; color: #8197ad; }
|
||||
.ct:hover { color: #dbe6f0; border-color: #3d6d96; }
|
||||
.ct.on { color: #f2b13c; border-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.hl { padding: 1dp 4dp; border-radius: 2dp; }
|
||||
.hl.mention { background-color: #f2b13c26; border-left: 2dp #f2b13c; }
|
||||
.hl .tm { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 8dp; }
|
||||
#hist { flex: 1; overflow-y: auto; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; line-height: 1.35; }
|
||||
.gear { width: 22dp; height: 22dp; margin: 0 10dp; image-color: #8fb8d8; }
|
||||
.gear:hover { image-color: #f2b13c; }
|
||||
.targets { width: 260dp; margin-left: 14dp; display: flex; flex-direction: column; min-height: 0; }
|
||||
.tl { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.tg { padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; white-space: nowrap; overflow: hidden; }
|
||||
.tg:hover { background-color: #122033; }
|
||||
.tg.cur { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.tg.ch { font-family: "Saira SemiCondensed"; font-weight: 600; letter-spacing: 0.6dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="chathistory">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Chat.3db"/>
|
||||
<span class="title">CHAT</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Targets <span class="v">{{ count }}</span></span>
|
||||
<img class="gear" src="img/gear.png" data-action="settings"/>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content" style="display: flex; flex-direction: column;">
|
||||
<div class="cols">
|
||||
<div class="histcol">
|
||||
<div class="ctabs">
|
||||
<div class="ct" data-for="t : tabs" data-class-on="t.on" data-action="tab" data-attr-data-arg="t.key">{{ t.label }}</div>
|
||||
</div>
|
||||
<div id="hist">
|
||||
<div class="hint" data-if="lines.size == 0">No messages yet.</div>
|
||||
<div class="hl" data-for="l : lines" data-class-mention="l.mention"><span class="tm" data-if="stamps">{{ l.time }}</span><span data-rml="l.rml"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="targets">
|
||||
<h3>Write to</h3>
|
||||
<div class="tl">
|
||||
<div class="tg" data-for="t : targets" data-class-cur="t.current" data-class-ch="t.channel" data-action="target" data-ctx="target" data-attr-data-arg="t.key" data-rml="t.name"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" style="margin-top: 10dp;">Pick whom to write to, then press Enter in flight or on a base to type.</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,60 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Chat settings</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
body.window.chatset { left: 50%; margin-left: -330dp; top: 12%; width: 660dp; height: 640dp; }
|
||||
.sec { margin-bottom: 16dp; }
|
||||
.tgl { display: flex; flex-direction: row; align-items: center; padding: 10dp 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.tgl:hover { background-color: #122033; }
|
||||
.tgl .box { width: 18dp; height: 18dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
|
||||
.tgl .box.on { border-color: #f2b13c; background-color: #f2b13c; }
|
||||
.tgl .l { flex: 1; font-size: 16dp; }
|
||||
.info { margin-top: 6dp; font-size: 13dp; color: #8197ad; }
|
||||
.row { display: flex; flex-direction: row; align-items: center; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
|
||||
.row .l { width: 130dp; font-size: 15dp; }
|
||||
.row .sample { width: 170dp; font-family: "Saira SemiCondensed"; font-size: 16dp; white-space: nowrap; overflow: hidden; }
|
||||
.sw { width: 22dp; height: 22dp; margin-right: 6dp; border: 2dp #00000000; border-radius: 4dp; }
|
||||
.sw .c { width: 100%; height: 100%; border-radius: 2dp; }
|
||||
.sw:hover { border-color: #5cc8f0; }
|
||||
.sw.on { border-color: #f2b13c; }
|
||||
.sw.fl { margin-right: 12dp; }
|
||||
.foot2 { display: flex; flex-direction: row; align-items: center; margin-top: 16dp; }
|
||||
.foot2 .hint { flex: 1; }
|
||||
.foot2 .btn { margin: 0 0 0 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window chatset" data-model="chatsettings">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="img/gear.png"/>
|
||||
<span class="title">CHAT SETTINGS</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="cancel">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="sec">
|
||||
<h3>Players</h3>
|
||||
<div class="tgl" data-action="npc"><div class="box" data-class-on="hide_npc"></div><span class="l">Hide NPC pilots</span></div>
|
||||
<div class="info">Hides the server's NPC pilots ([NPC] names) from the chat, the player list of the chat window, the chat targets and the contact list.</div>
|
||||
<div class="tgl" style="margin-top: 8dp;" data-action="stamps"><div class="box" data-class-on="stamps"></div><span class="l">Show times in the chat history</span></div>
|
||||
</div>
|
||||
<div class="sec">
|
||||
<h3>Colours</h3>
|
||||
<div class="row" data-for="r : rows">
|
||||
<span class="l">{{ r.label }}</span>
|
||||
<span class="sample" data-style-color="r.colour">Pilot: Hello Sirius!</span>
|
||||
<div class="sw" data-for="w : r.swatches" data-class-on="w.on" data-class-fl="w.key == 0" data-action="pick" data-attr-data-arg="w.arg"><div class="c" data-style-background-color="w.colour"></div></div>
|
||||
</div>
|
||||
<div class="info">The first colour of a row is FL's own. Server messages (new players, server notices) run as Admin / Server.</div>
|
||||
</div>
|
||||
<div class="foot2">
|
||||
<span class="hint">{{ dirty ? 'Unsaved changes' : '' }}</span>
|
||||
<div class="btn" data-action="reset">FL colours</div>
|
||||
<div class="btn" data-action="cancel">Cancel</div>
|
||||
<div class="btn primary" data-action="save">Save settings</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,58 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Contracts</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.gap { margin-right: 18dp; }
|
||||
.colm.side { flex: 0 0 360dp; }
|
||||
.banner { height: 120dp; margin-bottom: 14dp; border: 1dp #24405c; border-radius: 3dp; decorator: image(3db:INTERFACE/REM/IMAGES/contracts_banner.3db cover); }
|
||||
.target { display: flex; flex-direction: row; align-items: center; margin-bottom: 14dp; }
|
||||
.target img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
||||
.target.off img { opacity: 0.3; }
|
||||
.namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
||||
.namefield .label { margin-right: 10dp; }
|
||||
.namefield input.text { flex: 1; }
|
||||
.row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="contracts">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_contracts.3db"/>
|
||||
<span class="title">CONTRACT NETWORK</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Bounties <span class="v">{{ bounties.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="banner"></div>
|
||||
<div class="split">
|
||||
<div class="colm gap">
|
||||
<div class="col-h" style="display: flex; flex-direction: row; margin-bottom: 8dp;"><h3>Bounty contracts</h3></div>
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head"><span class="c1">Pilot</span><span class="c4">Reward</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="bounties.size == 0">{{ has_list ? 'No bounties open.' : 'Waiting for the server...' }}</div>
|
||||
<div class="row" data-for="r : bounties"><span class="c1"><img src="3db:INTERFACE/REM/IMAGES/icon_bounty.3db"/>{{ r.a }}</span><span class="c4">{{ r.b }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions" style="margin-top: 10dp;"><div class="btn" data-action="refresh">Refresh list</div></div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<h3 style="margin-bottom: 10dp;">Place a bounty</h3>
|
||||
<div class="target" data-class-off="target != 1"><img src="3db:INTERFACE/REM/IMAGES/icon_skull.3db"/><span>{{ target_text }}</span></div>
|
||||
<div class="namefield"><span class="label">Credits</span><input class="text" type="text" data-value="credits" maxlength="13"/></div>
|
||||
<div class="actions"><div class="btn primary" data-action="place">On my target<div class="tip">Puts a bounty of these credits on the player you have targeted. Paid from your credits.</div></div></div>
|
||||
<div class="hint">Whoever destroys the pilot gets the reward.</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>
|
||||
@@ -0,0 +1,22 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Menu</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the whole screen: a click beside the menu closes it */
|
||||
body.ctx { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; }
|
||||
.menu { position: absolute; width: 220dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 4dp; }
|
||||
.menu .t { font-size: 12dp; color: #f2b13c; padding: 4dp 8dp 6dp 8dp; white-space: nowrap; overflow: hidden; border-bottom: 1dp #24405c; margin-bottom: 3dp; }
|
||||
.menu .r { padding: 6dp 10dp; font-size: 15dp; border-radius: 3dp; }
|
||||
.menu .r:hover { background-color: #122033; color: #5cc8f0; }
|
||||
.menu .r.disabled { color: #5d6e80; }
|
||||
.menu .r.disabled:hover { background-color: transparent; color: #5d6e80; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="ctx" data-model="ctxmenu" data-action="dismiss">
|
||||
<div class="menu" data-style-left="left" data-style-top="top">
|
||||
<div class="t" data-if="title != ''">{{ title }}</div>
|
||||
<div class="r" data-for="r : rows" data-class-disabled="r.disabled" data-action="pick" data-attr-data-arg="r.key">{{ r.label }}</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,43 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Message</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
body.box
|
||||
{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 520dp;
|
||||
margin-left: -260dp;
|
||||
margin-top: -140dp;
|
||||
background-color: #0d1622f5;
|
||||
border: 2dp #3d6d96;
|
||||
border-top: 2dp #f2b13c;
|
||||
border-radius: 4dp;
|
||||
display: block;
|
||||
}
|
||||
.box-head { display: flex; flex-direction: row; align-items: center; padding: 12dp 18dp; border-bottom: 1dp #24405c; }
|
||||
.box-head .title { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; letter-spacing: 1.2dp; text-transform: uppercase; flex: 1; }
|
||||
.box-body { padding: 16dp 18dp; }
|
||||
.box-body .text { white-space: pre-line; line-height: 1.5; font-size: 15dp; max-height: 320dp; overflow-y: auto; }
|
||||
.box-body input.text { margin-top: 12dp; }
|
||||
.box-foot { display: flex; flex-direction: row; justify-content: flex-end; padding: 0 18dp 14dp 18dp; }
|
||||
.box-foot .btn { margin: 0 0 0 8dp; min-width: 90dp; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="box" data-model="dialog">
|
||||
<div class="box-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="close" data-action="button" data-arg="-1">×</span>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="text">{{ text }}</div>
|
||||
<input class="text" type="text" data-if="has_edit && !secret" data-value="edit" maxlength="64"/>
|
||||
<input class="text" type="password" data-if="has_edit && secret" data-value="edit" maxlength="64"/>
|
||||
</div>
|
||||
<div class="box-foot">
|
||||
<div class="btn" data-for="b, i : buttons" data-class-primary="i == 0" data-action="button" data-attr-data-arg="i">{{ b }}</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,93 @@
|
||||
Copyright 2017 The Barlow Project Authors (https://github.com/jpt/barlow)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
|
||||
This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Saira Project Authors (omnibus.type@gmail.com), with reserved font name "Saira".
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,46 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Group</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.members { margin-bottom: 14dp; }
|
||||
.member { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #5cc8f0; border-radius: 3dp; background-color: #122033; font-size: 15dp; }
|
||||
.request { padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
|
||||
.request .t { white-space: pre-line; line-height: 1.5; font-size: 15dp; }
|
||||
.request .w { font-size: 12dp; color: #8197ad; margin-top: 6dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="group">
|
||||
<div class="win-head">
|
||||
<span class="title">GROUP</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Members <span class="v">{{ members.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<h3 style="margin-bottom: 8dp;">Requests</h3>
|
||||
<div class="hint" data-if="!has_request" style="margin-bottom: 14dp;">No invitation or trade request is waiting.</div>
|
||||
<div class="request" data-if="has_request">
|
||||
<div class="t">{{ request }}</div>
|
||||
<div class="w" data-if="waiting != ''">{{ waiting }}</div>
|
||||
<div class="actions" style="margin-top: 10dp;">
|
||||
<div class="btn primary" data-action="accept">{{ is_trade ? 'Accept trade' : 'Join group' }}</div>
|
||||
<div class="btn" data-action="decline">Decline</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 8dp;">Your group</h3>
|
||||
<div class="hint" data-if="members.size == 0">You are not in a group. Invite a pilot from the chat (/invite name).</div>
|
||||
<div class="members">
|
||||
<div class="member" data-for="m : members">{{ m }}</div>
|
||||
</div>
|
||||
<div class="actions" data-if="can_leave">
|
||||
<div class="btn" data-action="leave">Leave group</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">close</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,25 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Information</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 14dp 16dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="help">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="card">{{ text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">close</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,191 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>HUD</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the flight HUD in the shape of FL's own (bottom left / centre / right, the maneuver bar):
|
||||
FL's panels, icons and bar colours, drawn by RmlUi */
|
||||
body.hud { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: transparent; pointer-events: none; font-family: "Saira SemiCondensed"; font-size: 15dp; color: #dbe6f0; }
|
||||
.fp { position: absolute; box-sizing: border-box; background-color: #050a18e6; border: 3dp #3f9ad6; border-radius: 8dp; }
|
||||
.fp.inner { border-color: #2b6f9e; }
|
||||
.ico { width: 40dp; height: 40dp; margin: 0 3dp; }
|
||||
.ib { display: inline-block; padding: 1dp; border: 2dp #00000000; border-radius: 4dp; }
|
||||
.ib:hover { background-color: #f2b13c14; }
|
||||
.ib:hover .ico, .ib.on .ico { image-color: #f2b13c; }
|
||||
.ib.on { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.ib.off { opacity: 0.35; }
|
||||
|
||||
/* --- the maneuver bar, top centre ------------------------------------------------- */
|
||||
.mans { left: 50%; margin-left: -240dp; top: 8dp; width: 480dp; height: 88dp; padding: 0 10dp; display: flex; flex-direction: row; justify-content: center; align-items: center; }
|
||||
.mans .ico { width: 64dp; height: 64dp; margin: 0 8dp; }
|
||||
.cruise { left: 50%; margin-left: -206dp; top: 99dp; width: 74dp; height: 70dp; display: flex; justify-content: center; align-items: center; }
|
||||
.cruise .ico { width: 52dp; height: 52dp; }
|
||||
|
||||
/* --- bottom centre: thrust | bars | speed ------------------------------------------- */
|
||||
.thrust, .speed { bottom: 17dp; width: 78dp; height: 38dp; text-align: center; line-height: 38dp; font-size: 22dp; }
|
||||
.thrust { left: 50%; margin-left: -222dp; }
|
||||
.thrust.low { color: #ef6a5b; }
|
||||
.speed { left: 50%; margin-left: 144dp; }
|
||||
.bars { left: 50%; margin-left: -132dp; bottom: 8dp; width: 264dp; height: 56dp; padding: 0 8dp; display: flex; flex-direction: column; justify-content: center; }
|
||||
.bar { position: relative; width: 242dp; height: 11dp; margin: 2dp 0; }
|
||||
.chips { position: absolute; left: 0; top: 0; width: 242dp; height: 11dp; display: flex; flex-direction: row; }
|
||||
.sg { flex: 1; height: 11dp; margin-right: 2dp; }
|
||||
.sg:last-child { margin-right: 0; }
|
||||
.fillbox { position: absolute; left: 0; top: 0; height: 11dp; overflow: hidden; }
|
||||
.power .chips.dim .sg { background-color: #a7a15e33; }
|
||||
.power .fillbox .sg { background-color: #c9c272; }
|
||||
.shield .chips.dim .sg { background-color: #3e3db544; }
|
||||
.shield .fillbox .sg { background-color: #5856dc; }
|
||||
.hull .chips.dim .sg { background-color: #782a3355; }
|
||||
.hull .fillbox .sg { background-color: #b53844; }
|
||||
|
||||
/* --- bottom left: target / contacts --------------------------------------------------- */
|
||||
.lhead { left: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 6dp 0 10dp; }
|
||||
.lhead .sp { flex: 1; }
|
||||
.lbody { left: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 12dp; }
|
||||
.filters { display: flex; flex-direction: row; justify-content: center; margin-bottom: 4dp; }
|
||||
.filters .ico { width: 36dp; height: 36dp; margin: 0 4dp; }
|
||||
.rows { height: 200dp; }
|
||||
.c { display: flex; flex-direction: row; align-items: center; height: 25dp; padding: 0 2dp; }
|
||||
.c:hover { background-color: #3a8fc822; }
|
||||
.c img { width: 22dp; height: 22dp; margin-right: 6dp; }
|
||||
.c .r { width: 52dp; text-align: right; margin-right: 10dp; font-size: 19dp; }
|
||||
.c .n { flex: 1; white-space: nowrap; overflow: hidden; font-size: 19dp; }
|
||||
.scroll { position: absolute; right: 6dp; bottom: 4dp; }
|
||||
.scroll .btn { padding: 0 8dp; font-size: 14dp; margin-left: 4dp; }
|
||||
.tname { font-size: 26dp; color: #e8f1fa; }
|
||||
.tsub { font-size: 18dp; color: #8fb3d0; margin-bottom: 8dp; }
|
||||
.tbar { display: flex; flex-direction: row; align-items: center; margin: 3dp 0; }
|
||||
.tbar .l { width: 70dp; font-size: 17dp; color: #8fb3d0; }
|
||||
.tbtns { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 8dp; }
|
||||
.tbtns .ico { width: 44dp; height: 44dp; }
|
||||
|
||||
/* --- bottom right: status ------------------------------------------------------------- */
|
||||
.rhead { right: 46dp; bottom: 289dp; width: 291dp; height: 52dp; display: flex; flex-direction: row; align-items: center; padding: 0 10dp 0 8dp; }
|
||||
.rhead .ico { width: 36dp; height: 36dp; margin: 0 4dp 0 10dp; }
|
||||
.rhead .cnt { font-size: 22dp; margin-right: 10dp; }
|
||||
.rbody { right: 8dp; bottom: 8dp; width: 367dp; height: 284dp; padding: 10dp 16dp; }
|
||||
.w { display: flex; flex-direction: row; height: 26dp; font-size: 23dp; color: #dbe6f0; }
|
||||
.w:hover { background-color: #3a8fc822; }
|
||||
.w.on { color: #7cf27c; }
|
||||
.w .n { flex: 1; white-space: nowrap; overflow: hidden; }
|
||||
.w .a { margin-left: 8dp; }
|
||||
.special { color: #f2d23c; font-size: 18dp; margin-top: 6dp; }
|
||||
/* the HUD editor: four layers over the whole screen, each moved / sized as one */
|
||||
.grp { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
|
||||
.grp .fp, .grp .tag { pointer-events: auto; }
|
||||
.g0 { transform-origin: 50% 0%; }
|
||||
.g1 { transform-origin: 50% 100%; }
|
||||
.g2 { transform-origin: 0% 100%; }
|
||||
.g3 { transform-origin: 100% 100%; }
|
||||
.grp.gone { display: none; }
|
||||
.grp.faded { opacity: 0.35; }
|
||||
.editing .fp { border-color: #f2b13c; background-color: #2a1f0ae6; drag: drag; cursor: move; }
|
||||
.editing .fp * { pointer-events: none; }
|
||||
.tag { position: absolute; padding: 3dp 8dp; background-color: #f2b13c; color: #05080d; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-radius: 3dp; white-space: nowrap; }
|
||||
.tag .eye { margin-right: 8dp; padding: 0 6dp; background-color: #05080d; color: #f2b13c; border-radius: 2dp; }
|
||||
.tag .eye:hover { color: #ffffff; }
|
||||
.edbar { position: absolute; left: 50%; margin-left: -300dp; top: 190dp; width: 600dp; padding: 14dp 18dp; background-color: #070b12f2; border: 2dp #f2b13c; border-radius: 6dp; text-align: center; }
|
||||
.edbar .et { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 20dp; letter-spacing: 2dp; color: #f2b13c; }
|
||||
.edbar .eh { margin: 6dp 0 12dp 0; font-size: 14dp; color: #b9cbe0; }
|
||||
.edbar .eb { display: flex; flex-direction: row; justify-content: center; }
|
||||
.edbar .btn { margin: 0 4dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="hud" data-model="hud" data-class-editing="editing" data-style-opacity="opacity">
|
||||
<!-- maneuvers -->
|
||||
<div class="grp g0" data-grp="0" data-style-transform="grp[0].tf" data-class-gone="!grp[0].shown && !editing" data-class-faded="!grp[0].shown && editing">
|
||||
<div class="tag" data-if="editing" style="left: 50%; margin-left: 250dp; top: 40dp;"><span class="eye" data-action="eye" data-arg="0">{{ grp[0].shown ? 'Hide' : 'Show' }}</span>Maneuvers</div>
|
||||
<div class="fp mans" data-if="maneuvers_shown || editing">
|
||||
<div class="ib" data-for="m : maneuvers" data-class-on="m.active" data-class-off="m.disabled" data-action="maneuver" data-attr-data-arg="m.key"><img class="ico" data-attr-src="m.icon"/></div>
|
||||
</div>
|
||||
<div class="fp cruise" data-if="(maneuvers_shown && has_cruise) || editing" data-action="maneuver" data-arg="4">
|
||||
<div class="ib" data-class-on="cruise_on"><img class="ico" src="3db:interface/HUD/hud_mnvrwarp.3db"/></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- bottom centre -->
|
||||
<div class="grp g1" data-grp="1" data-style-transform="grp[1].tf" data-class-gone="!grp[1].shown && !editing" data-class-faded="!grp[1].shown && editing">
|
||||
<div class="tag" data-if="editing" style="left: 50%; margin-left: -132dp; bottom: 74dp;"><span class="eye" data-action="eye" data-arg="1">{{ grp[1].shown ? 'Hide' : 'Show' }}</span>Ship status</div>
|
||||
<div data-if="core || editing">
|
||||
<div class="fp inner thrust" data-class-low="thrust_low">{{ thrust }}</div>
|
||||
<div class="fp bars">
|
||||
<div class="bar power"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="power"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
|
||||
<div class="bar shield"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="shield"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
|
||||
<div class="bar hull"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="hull"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div>
|
||||
</div>
|
||||
<div class="fp inner speed">{{ speed }}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- bottom left: contacts / target -->
|
||||
<div class="grp g2" data-grp="2" data-style-transform="grp[2].tf" data-class-gone="!grp[2].shown && !editing" data-class-faded="!grp[2].shown && editing">
|
||||
<div class="tag" data-if="editing" style="left: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="2">{{ grp[2].shown ? 'Hide' : 'Show' }}</span>Contacts & target</div>
|
||||
<div data-if="panel || editing">
|
||||
<div class="fp lhead">
|
||||
<div class="ib" data-for="t : tabs" data-class-on="t.active" data-action="tab" data-attr-data-arg="t.key"><img class="ico" data-attr-src="t.icon"/></div>
|
||||
</div>
|
||||
<div class="fp lbody">
|
||||
<div data-if="mode == 1">
|
||||
<div class="tsub" data-if="!has_target">No target</div>
|
||||
<div data-if="has_target">
|
||||
<div class="tname">{{ target_name }}</div>
|
||||
<div class="tsub">{{ target_sub }} {{ target_rank }} {{ target_range }}</div>
|
||||
<div class="tbar hull"><span class="l">Hull</span><div class="bar"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="target_hull"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div></div>
|
||||
<div class="tbar shield" data-if="target_has_shield"><span class="l">Shield</span><div class="bar"><div class="chips dim"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div><div class="fillbox" data-style-width="target_shield"><div class="chips"><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div><div class="sg"></div></div></div></div></div>
|
||||
<div class="tbtns">
|
||||
<div class="ib" data-for="b : target_buttons" data-action="tbutton" data-attr-data-arg="b.key"><img class="ico" data-attr-src="b.icon"/></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-if="mode != 1 && contacts_shown">
|
||||
<div class="filters">
|
||||
<div class="ib" data-for="f : filters" data-class-on="f.active" data-action="filter" data-attr-data-arg="f.key"><img class="ico" data-attr-src="f.icon"/></div>
|
||||
</div>
|
||||
<div class="rows">
|
||||
<div class="c" data-for="c : contacts" data-style-color="c.colour" data-action="row" data-ctx="contact" data-attr-data-arg="c.key">
|
||||
<img data-attr-src="c.icon" data-style-image-color="c.colour"/><span class="r">{{ c.range }}</span><span class="n">{{ c.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll">
|
||||
<div class="btn" data-if="more_up" data-action="up">▲</div>
|
||||
<div class="btn" data-if="more_down" data-action="down">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- bottom right: the player's ship -->
|
||||
<div class="grp g3" data-grp="3" data-style-transform="grp[3].tf" data-class-gone="!grp[3].shown && !editing" data-class-faded="!grp[3].shown && editing">
|
||||
<div class="tag" data-if="editing" style="right: 46dp; bottom: 350dp;"><span class="eye" data-action="eye" data-arg="3">{{ grp[3].shown ? 'Hide' : 'Show' }}</span>Weapons & equipment</div>
|
||||
<div data-if="status || editing">
|
||||
<div class="fp rhead">
|
||||
<div class="ib" data-if="has_repair" data-action="repair"><img class="ico" src="3db:interface/hud/HUD_repairactivate.3db"/></div><span class="cnt" data-if="has_repair">{{ repair }}</span>
|
||||
<div class="ib" data-if="has_battery" data-action="battery"><img class="ico" src="3db:interface/hud/HUD_shieldgaugeicon.3db"/></div><span class="cnt" data-if="has_battery">{{ battery }}</span>
|
||||
<div class="ib" data-if="loot" data-action="loot"><img class="ico" src="3db:interface/HUD/HUD_loot_bw.3db"/></div>
|
||||
</div>
|
||||
<div class="fp rbody">
|
||||
<div class="w" data-for="w : weapons" data-class-on="w.active" data-action="weapon" data-attr-data-arg="w.key">
|
||||
<span class="n">{{ w.key + 1 }} {{ w.name }}</span><span class="a">{{ w.ammo }}</span>
|
||||
</div>
|
||||
<div class="special" data-if="special != ''">{{ special }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- the HUD editor's bar -->
|
||||
<div class="edbar" data-if="editing">
|
||||
<div class="et">CUSTOMIZE HUD</div>
|
||||
<div class="eh">Drag a part to move it · mouse wheel over it to size it · Hide / Show on its label. Parts snap to their home place.</div>
|
||||
<div class="eb">
|
||||
<div class="btn" data-action="ed_reset">Reset HUD</div>
|
||||
<div class="btn" data-action="ed_resetwin">Reset window places</div>
|
||||
<div class="btn" data-action="ed_cancel">Cancel</div>
|
||||
<div class="btn primary" data-action="ed_save">Save</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,78 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Inventory</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.list-col { flex: 0 0 38%; margin-right: 18dp; }
|
||||
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
|
||||
.inv { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.inv:hover { background-color: #122033; }
|
||||
.inv.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.inv img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.inv .txt { flex: 1; min-width: 0; }
|
||||
.inv .n { font-size: 14dp; }
|
||||
.inv .note { font-size: 12dp; color: #8197ad; }
|
||||
.inv .c { font-family: "IBM Plex Mono"; color: #8197ad; margin-left: 8dp; }
|
||||
#ship { flex: 1; min-height: 200dp; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; }
|
||||
.card { height: 180dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.pick-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.pick-head img { width: 40dp; height: 40dp; margin-right: 12dp; }
|
||||
.pick-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
.jet { display: flex; flex-direction: row; align-items: center; margin-top: 10dp; }
|
||||
.jet input.range { margin-right: 10dp; }
|
||||
.jet .btn { margin: 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="inventory">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
|
||||
<span class="title">INVENTORY</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Hold <span class="v">{{ hold }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="nav">
|
||||
<div class="item" data-class-active="filter == 5" data-action="filter" data-arg="5"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/><span>Everything</span></div>
|
||||
<div class="item" data-class-active="filter == 0" data-action="filter" data-arg="0"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_bounty.3db"/><span>Weapons</span></div>
|
||||
<div class="item" data-class-active="filter == 1" data-action="filter" data-arg="1"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_arrow.3db"/><span>Ammunition</span></div>
|
||||
<div class="item" data-class-active="filter == 2" data-action="filter" data-arg="2"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/><span>Equipment</span></div>
|
||||
<div class="item" data-class-active="filter == 3" data-action="filter" data-arg="3"><img class="ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/><span>Cargo</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm list-col">
|
||||
<input class="text search" type="text" data-value="search" maxlength="40" style="margin-bottom: 8dp;"/>
|
||||
<div class="list">
|
||||
<div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing here.</div>
|
||||
<div class="inv" data-for="r : items" data-class-selected="r.selected" 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="note">{{ r.note }}</div></div>
|
||||
<span class="c">{{ r.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div id="ship"></div>
|
||||
<div data-if="has_pick">
|
||||
<div class="pick-head"><img data-if="pick.icon != ''" data-attr-src="pick.icon"/><div><div class="t">{{ pick.name }}</div><div class="hint">{{ pick.note }}</div></div></div>
|
||||
<div class="card">{{ info }}</div>
|
||||
<div class="jet" data-if="can_jettison">
|
||||
<input class="range" type="range" min="1" step="1" data-attr-max="amount_max" data-value="amount"/>
|
||||
<span class="num" style="width: 60dp; text-align: right; margin-right: 12dp;">{{ amount }}</span>
|
||||
<div class="btn danger" data-action="jettison">Jettison<div class="tip">Throws the amount overboard. It floats in space as loot.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint" data-if="!has_pick">Pick an item to see what it is.</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>
|
||||
@@ -0,0 +1,56 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Load game</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
body.window.lg { left: 50%; margin-left: -460dp; top: 12%; width: 920dp; height: 600dp; }
|
||||
.cols { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.savelist { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.sv { display: flex; flex-direction: row; align-items: center; padding: 9dp 12dp; border-bottom: 1dp #ffffff08; border-left: 3dp #00000000; }
|
||||
.sv:hover { background-color: #122033; }
|
||||
.sv.sel { border-left-color: #f2b13c; background-color: #f2b13c1a; }
|
||||
.sv .n { flex: 1; font-size: 16dp; white-space: nowrap; overflow: hidden; }
|
||||
.sv .t { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 12dp; }
|
||||
.det { width: 300dp; margin-left: 16dp; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.det .row { display: flex; flex-direction: row; padding: 7dp 0; border-bottom: 1dp #ffffff08; }
|
||||
.det .row .k { width: 90dp; color: #8197ad; font-size: 13dp; text-transform: uppercase; letter-spacing: 1dp; }
|
||||
.det .row .v { flex: 1; font-size: 15dp; }
|
||||
.acts { display: flex; flex-direction: row; justify-content: flex-end; margin-top: 14dp; }
|
||||
.acts .btn { margin-left: 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window lg" data-model="loadgame">
|
||||
<div class="win-head">
|
||||
<span class="title">LOAD GAME</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content" style="display: flex; flex-direction: column;">
|
||||
<div class="cols">
|
||||
<div class="savelist">
|
||||
<div class="hint" style="padding: 12dp;" data-if="saves.size == 0">No saved games.</div>
|
||||
<div class="sv" data-for="s : saves" data-class-sel="s.selected" data-action="pick" data-attr-data-arg="s.key">
|
||||
<span class="n">{{ s.name }}</span><span class="t">{{ s.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="det">
|
||||
<h3>Saved game</h3>
|
||||
<div class="hint" data-if="!has_pick">Pick a saved game.</div>
|
||||
<div data-if="has_pick">
|
||||
<div class="row"><span class="k">Credits</span><span class="v">{{ money }}</span></div>
|
||||
<div class="row"><span class="k">Rank</span><span class="v">{{ rank }}</span></div>
|
||||
<div class="row"><span class="k">Place</span><span class="v">{{ place }}</span></div>
|
||||
<div class="row"><span class="k">Ship</span><span class="v">{{ ship }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="acts">
|
||||
<div class="btn" data-class-disabled="busy" data-action="menu">Main menu</div>
|
||||
<div class="btn" data-class-disabled="!has_pick || busy" data-action="delete">Delete</div>
|
||||
<div class="btn primary" data-class-disabled="!has_pick || busy" data-action="load">Load game</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,19 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Loading</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
body.loaddoc { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; background-color: transparent; }
|
||||
.load { position: absolute; left: 50%; bottom: 60dp; transform: translateX(-50%); width: 420dp; padding: 10dp 16dp 12dp 16dp; background-color: #070b12d9; border: 2dp #3d6d96; border-top: 2dp #f2b13c; border-radius: 4dp; }
|
||||
.load .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 18dp; letter-spacing: 4dp; color: #dbe6f0; text-align: center; margin-bottom: 8dp; }
|
||||
.load .track { position: relative; height: 4dp; background-color: #24405c; border-radius: 2dp; }
|
||||
.load .sweep { position: absolute; top: 0; width: 25%; height: 4dp; background-color: #f2b13c; border-radius: 2dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="loaddoc" data-model="loading">
|
||||
<div class="load" data-if="shown">
|
||||
<div class="t">LOADING</div>
|
||||
<div class="track"><div class="sweep" data-style-left="sweep"></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,55 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Saved games</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.list { flex: 1; }
|
||||
.colm.side { flex: 0 0 36%; margin-left: 18dp; }
|
||||
.table .c2 { width: 40%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; text-align: right; }
|
||||
.detail { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 12dp; }
|
||||
.detail .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; margin-bottom: 6dp; }
|
||||
.detail .s { white-space: pre; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.6; }
|
||||
.namebox { margin-bottom: 12dp; }
|
||||
.namebox .label { margin-bottom: 6dp; }
|
||||
.side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="loadsave">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Saves <span class="v">{{ saves.size }}</span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm list">
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head"><span class="c1">Name</span><span class="c2">Saved</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="saves.size == 0">No saved games.</div>
|
||||
<div class="row" data-for="s : saves" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
|
||||
<span class="c1">{{ s.name }}</span><span class="c2">{{ s.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div class="namebox" data-if="is_save">
|
||||
<div class="label">Save as</div>
|
||||
<input class="text" type="text" data-value="save_name" maxlength="30" placeholder="A new save (empty: numbered)"/>
|
||||
</div>
|
||||
<div class="detail" data-if="has_pick"><div class="s">{{ info }}</div></div>
|
||||
<div class="detail" data-if="!has_pick"><div class="hint">{{ is_save ? 'Pick a save to overwrite it, or name a new one.' : 'Pick a save.' }}</div></div>
|
||||
<div class="btn" data-for="b : buttons" data-class-primary="b.primary" data-class-disabled="!b.enabled" data-action="button" data-attr-data-arg="b.key">{{ b.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">back to the game</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,46 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Main menu</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* a panel down the left edge over the menu scene */
|
||||
body.menu
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 20%;
|
||||
width: 420dp;
|
||||
height: 80%;
|
||||
background-color: #070b12d9;
|
||||
border-right: 1dp #3d6d96;
|
||||
border-top: 1dp #3d6d96;
|
||||
border-top-right-radius: 4dp;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 36dp;
|
||||
}
|
||||
.brand { margin-top: 30dp; margin-bottom: 30dp; }
|
||||
.brand .t { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 46dp; letter-spacing: 6dp; color: #dbe6f0; }
|
||||
.brand .s { font-family: "Saira SemiCondensed"; font-size: 15dp; letter-spacing: 4dp; text-transform: uppercase; color: #f2b13c; margin-top: -4dp; }
|
||||
.entry { padding: 13dp 16dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #0d1622; }
|
||||
.entry:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.entry.primary { border-left-color: #f2b13c; }
|
||||
.entry .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 20dp; letter-spacing: 2dp; text-transform: uppercase; }
|
||||
.entry.primary .l { color: #f2b13c; }
|
||||
.entry:hover .l { color: #5cc8f0; }
|
||||
.entry .h { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
||||
.foot { margin-top: auto; margin-bottom: 24dp; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="menu" data-model="mainmenu">
|
||||
<div class="brand">
|
||||
<div class="t">REMNANT</div>
|
||||
<div class="s">Freelancer</div>
|
||||
</div>
|
||||
<div class="entry" data-for="e : entries" data-class-primary="e.primary" data-action="command" data-attr-data-arg="e.command">
|
||||
<div class="l">{{ e.label }}</div>
|
||||
<div class="h" data-if="e.hint != ''">{{ e.hint }}</div>
|
||||
</div>
|
||||
<div class="foot">{{ version }}</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,74 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Mission board</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 46%; margin-right: 18dp; }
|
||||
.list { flex: 1; overflow-y: auto; }
|
||||
.offer { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
||||
.offer:hover { border-color: #5cc8f0; }
|
||||
.offer.selected { border-color: #f2b13c; }
|
||||
.offer img { width: 40dp; height: 40dp; margin-right: 12dp; }
|
||||
.offer .mid { flex: 1; min-width: 0; }
|
||||
.offer .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; }
|
||||
.offer .d { font-size: 13dp; color: #8197ad; margin-top: 2dp; }
|
||||
.offer .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-left: 12dp; text-align: right; }
|
||||
.brief-head { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
||||
.brief-head img { width: 54dp; height: 54dp; margin-right: 14dp; }
|
||||
.brief-head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
|
||||
.brief-head .r { font-family: "IBM Plex Mono"; color: #f2b13c; margin-top: 2dp; }
|
||||
/* the offer's picture (NN_MissionVendor's video screen) */
|
||||
.photo { display: block; width: 300dp; height: 225dp; margin: 0 0 10dp 0; border: 2dp #3d6d96; border-radius: 3dp; }
|
||||
.briefing { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.empty-board { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
||||
.empty-board img { width: 64dp; height: 64dp; margin-bottom: 12dp; opacity: 0.6; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="missionboard">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
|
||||
<span class="title">MISSION BOARD</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Offers <span class="v">{{ offers.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="empty-board" data-if="offers.size == 0">
|
||||
<img src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
|
||||
<div class="hint">{{ empty_text }}</div>
|
||||
</div>
|
||||
<div class="split" data-if="offers.size > 0">
|
||||
<div class="colm side">
|
||||
<h3 style="margin-bottom: 8dp;">Offers</h3>
|
||||
<div class="list">
|
||||
<div class="offer" data-for="o : offers" data-class-selected="o.selected" data-action="pick" data-attr-data-arg="o.key">
|
||||
<img data-attr-src="o.icon"/>
|
||||
<div class="mid"><div class="t">{{ o.title }}</div><div class="d">{{ o.text }}</div></div>
|
||||
<span class="r">{{ o.reward }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div class="brief-head" data-if="has_pick">
|
||||
<img data-attr-src="pick.icon"/>
|
||||
<div><div class="t">{{ pick.title }}</div><div class="r">{{ pick.reward }}</div></div>
|
||||
</div>
|
||||
<img class="photo" data-if="has_pick && photo != ''" data-attr-src="photo"/>
|
||||
<div class="briefing" data-if="has_pick">{{ briefing }}</div>
|
||||
<div class="hint" data-if="!has_pick">{{ status == '' ? 'Pick an offer.' : status }}</div>
|
||||
<div class="actions" style="margin-top: 12dp;" data-if="has_pick">
|
||||
<div class="btn primary" data-class-disabled="waiting" data-action="accept">Accept mission<div class="tip">Takes the mission; the board closes when the mission giver agrees.</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>
|
||||
@@ -0,0 +1,36 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Mission log</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.now { border: 1dp #f2b13c; border-radius: 3dp; background-color: #f2b13c14; padding: 12dp 14dp; margin-bottom: 14dp; }
|
||||
.now .t { font-size: 16dp; line-height: 1.45; white-space: pre-line; margin-top: 4dp; }
|
||||
.list { flex: 1; overflow-y: auto; }
|
||||
.entry { padding: 8dp 12dp; margin-bottom: 6dp; border-left: 2dp #24405c; white-space: pre-line; line-height: 1.4; font-size: 14dp; color: #8197ad; }
|
||||
.entry.objective { border-left-color: #5cc8f0; color: #dbe6f0; background-color: #122033; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="missionlog">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
|
||||
<span class="title">MISSION LOG</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Entries <span class="v">{{ entries.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="colm">
|
||||
<div class="now" data-if="current != ''"><div class="label">Current objective</div><div class="t">{{ current }}</div></div>
|
||||
<h3 style="margin-bottom: 8dp;">History</h3>
|
||||
<div class="list">
|
||||
<div class="hint" data-if="entries.size == 0">Nothing logged yet.</div>
|
||||
<div class="entry" data-for="e : entries" data-class-objective="e.objective">{{ e.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,50 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Missions</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.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: 18dp; margin-bottom: 4dp; }
|
||||
.row .c1 img { width: 16dp; height: 16dp; margin-right: 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="missions">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_missions.3db"/>
|
||||
<span class="title">MISSIONS</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Story <span class="v">{{ story.size }}</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_contracts.3db"/><span>Story progress</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_waypoint.3db"/><span>Race</span></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="colm" data-if="page == 0">
|
||||
<div class="panel"><div class="t">Completed story missions: {{ story.size }}</div><div class="hint">Missions are offered at the bars and on the mission boards of the bases.</div></div>
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head"><span class="c3" style="text-align: left; width: 50dp;">#</span><span class="c1">Mission</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="story.size == 0">No story mission completed yet.</div>
|
||||
<div class="row" data-for="r : story"><span class="c3" style="text-align: left; width: 50dp;">{{ r.a }}</span><span class="c1">{{ r.b }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm" data-if="page == 1">
|
||||
<div class="panel"><div class="t">{{ race_status }}</div><div class="hint">{{ race_info }}</div></div>
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head"><span class="c1">Pilot</span><span class="c2">Lap, checkpoint, time</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="leaders.size == 0">No leaderboard yet.</div>
|
||||
<div class="row" data-for="r : leaders" data-class-current="r.current"><span class="c1">{{ r.a }}</span><span class="c2">{{ r.b }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,43 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Nav bar</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* only as big as the bar, centred at the top: the mouse beside it goes to the game */
|
||||
body.navstrip
|
||||
{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4dp;
|
||||
width: auto;
|
||||
transform: translateX(-50%);
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
.navbar { display: flex; flex-direction: row; align-items: center; padding: 3dp 6dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
|
||||
.nb { display: flex; flex-direction: row; align-items: center; padding: 4dp 10dp 4dp 6dp; margin: 0 2dp; border: 1dp #00000000; border-radius: 3dp; }
|
||||
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.nb.disabled { opacity: 0.4; }
|
||||
.nb.disabled:hover { border-color: #00000000; background-color: transparent; }
|
||||
.nb img { width: 28dp; height: 28dp; margin-right: 6dp; }
|
||||
.nb span { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; text-transform: uppercase; color: #dbe6f0; }
|
||||
.nb.active span { color: #f2b13c; }
|
||||
.nb:hover span { color: #5cc8f0; }
|
||||
.nb.tab img { width: 22dp; height: 22dp; }
|
||||
.nb.tab span { font-size: 12dp; color: #8197ad; }
|
||||
.sep { width: 1dp; height: 28dp; background-color: #3d6d96; margin: 0 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="navstrip" data-model="navbar">
|
||||
<div class="navbar" data-if="shown">
|
||||
<div class="nb" data-for="b : rooms" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
|
||||
<img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
|
||||
</div>
|
||||
<div class="sep" data-if="tabs.size > 0"></div>
|
||||
<div class="nb tab" data-for="b : tabs" data-class-active="b.active" data-class-disabled="b.disabled" data-action="click" data-attr-data-arg="b.key">
|
||||
<img data-if="b.icon != ''" data-attr-src="b.icon"/><span>{{ b.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,171 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Nav map</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
/* the map box is clear: the nav map draws its own backgrounds under it (DrawUnder), so
|
||||
the window's colour is laid around it instead of under the whole body */
|
||||
body.window { background-color: transparent; }
|
||||
.win-head { background-color: #0d1622eb; }
|
||||
.win-main .content { padding: 0; }
|
||||
.mapframe { display: flex; flex-direction: column; border: 18dp #0d1622eb; border-right-width: 0; border-bottom-width: 0; }
|
||||
.mapfill { flex: 1; min-height: 18dp; background-color: #0d1622eb; }
|
||||
#map .region { position: absolute; width: 200dp; margin-left: -100dp; margin-top: -10dp; text-align: center; font-family: "Saira SemiCondensed"; font-size: 17dp; letter-spacing: 3dp; text-transform: uppercase; color: #dbe6f0b0; }
|
||||
/* uncharted space has no map art: the whole box dark, never the scene through it */
|
||||
#map.blank, #map.blank.revealed { background-color: #03070d; }
|
||||
#map .uncharted-note { position: absolute; left: 0; right: 0; top: 360dp; text-align: center; color: #8197ad; font-size: 14dp; }
|
||||
#map { position: relative; width: 760dp; height: 760dp; overflow: hidden; border: 1dp #24405c; cursor: pointer; background-color: #03070d; transition: background-color 0.3s cubic-out; }
|
||||
/* the map art (drawn under the window) shows once the window stands: it fades in inside the box */
|
||||
#map.revealed { background-color: #03070d00; }
|
||||
.side { flex: 1; margin-left: 0; padding: 18dp; background-color: #0d1622eb; display: flex; flex-direction: column; min-width: 0; }
|
||||
.tbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10dp; }
|
||||
.tbar .btn { display: block; margin: 0 6dp 6dp 0; }
|
||||
.sysname { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 24dp; letter-spacing: 2dp; margin-bottom: 8dp; }
|
||||
.pcard { padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
|
||||
.pcard .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 19dp; }
|
||||
.pcard .k { font-size: 12dp; color: #8197ad; letter-spacing: 1dp; text-transform: uppercase; margin-bottom: 8dp; }
|
||||
.pcard .btn { margin: 0 6dp 6dp 0; }
|
||||
.pcard .acts { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
|
||||
.pcard .acts .btn { display: block; }
|
||||
.objs { padding: 10dp 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; margin-bottom: 10dp; }
|
||||
.obj { white-space: pre-line; font-size: 13dp; line-height: 1.4; padding: 4dp 0; border-bottom: 1dp #ffffff08; }
|
||||
.info { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; font-size: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.zoom { position: absolute; right: 8dp; bottom: 8dp; display: flex; flex-direction: row; align-items: center; }
|
||||
.zoom .btn { margin: 0 0 0 4dp; padding: 2dp 10dp; }
|
||||
.zoom .v { font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-right: 4dp; }
|
||||
|
||||
/* map items: centred on their point */
|
||||
.mi { position: absolute; width: 0; height: 0; }
|
||||
.mi .s { position: absolute; }
|
||||
.mi .lbl { position: absolute; left: 9dp; top: -8dp; white-space: nowrap; font-size: 11dp; color: #b9cbe0; }
|
||||
.mi.sel .lbl { color: #f2b13c; }
|
||||
.planet .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border-radius: 6dp; background-color: #3d79b8; border: 1dp #8fc2ff; }
|
||||
.sun .s { left: -8dp; top: -8dp; width: 16dp; height: 16dp; border-radius: 8dp; background-color: #f2c94c; border: 1dp #fff2b0; }
|
||||
.station .s { left: -5dp; top: -5dp; width: 10dp; height: 10dp; background-color: #5cc8f0; border: 1dp #dbf3ff; }
|
||||
.gate .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #b98cf2; transform: rotate(45deg); }
|
||||
.hole .s { left: -6dp; top: -6dp; width: 10dp; height: 10dp; border: 2dp #ef6a5b; border-radius: 6dp; }
|
||||
.ring .s { left: -2dp; top: -2dp; width: 4dp; height: 4dp; border-radius: 2dp; background-color: #2f6d8f; }
|
||||
.platform .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; background-color: #ef6a5b; }
|
||||
.object .s { left: -3dp; top: -3dp; width: 6dp; height: 6dp; border-radius: 3dp; background-color: #8197ad; }
|
||||
.system .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border-radius: 7dp; background-color: #f2c94c; border: 2dp #3d6d96; }
|
||||
.system .lbl { font-size: 12dp; color: #dbe6f0; }
|
||||
.player .s { left: -8dp; top: -8dp; width: 0; height: 0; border-left: 8dp #00000000; border-right: 8dp #00000000; border-bottom: 16dp #7cf27c; }
|
||||
.hits, .marks { margin-bottom: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; max-height: 220dp; overflow-y: auto; }
|
||||
.marks h3 { margin: 6dp 10dp 2dp 10dp; }
|
||||
.hit { display: flex; flex-direction: row; padding: 5dp 10dp; border-bottom: 1dp #ffffff08; }
|
||||
.hit:hover { background-color: #122033; color: #5cc8f0; }
|
||||
.hit .hn { flex: 1; white-space: nowrap; overflow: hidden; }
|
||||
.hit .hk { font-size: 12dp; color: #8197ad; }
|
||||
.bookmark .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; background-color: #f2b13c; border: 2dp #05080d; border-radius: 6dp; }
|
||||
.bookmark .lbl { color: #f2b13c; }
|
||||
.waypoint .s { left: -7dp; top: -7dp; width: 14dp; height: 14dp; border: 2dp #f2b13c; border-radius: 2dp; }
|
||||
.waypoint .lbl, .bestpath .lbl { left: -4dp; top: -7dp; font-family: "IBM Plex Mono"; font-size: 10dp; color: #f2b13c; }
|
||||
.bestpath .s { left: -6dp; top: -6dp; width: 12dp; height: 12dp; border: 2dp #5cc8f0; border-radius: 6dp; }
|
||||
.bestpath .lbl { color: #5cc8f0; }
|
||||
.group .s { left: -4dp; top: -4dp; width: 8dp; height: 8dp; border-radius: 4dp; background-color: #7cf27c; }
|
||||
.mi.sel .s { border-color: #f2b13c; }
|
||||
.sel .ring2 { position: absolute; left: -12dp; top: -12dp; width: 20dp; height: 20dp; border: 1dp #f2b13c; border-radius: 12dp; }
|
||||
|
||||
/* the tools at the click point (as the classic map's ring of tools) */
|
||||
.pop { position: absolute; width: 150dp; padding: 4dp; background-color: #070b12f2; border: 2dp #3d6d96; border-radius: 3dp; }
|
||||
.pop .pt { font-size: 11dp; color: #f2b13c; padding: 2dp 6dp 4dp 6dp; white-space: nowrap; overflow: hidden; }
|
||||
.pop .pb { padding: 4dp 6dp; font-size: 12dp; border-radius: 2dp; }
|
||||
.pop .pb:hover { background-color: #122033; color: #5cc8f0; }
|
||||
|
||||
/* lines: from their start, rotated */
|
||||
.ln { position: absolute; height: 0; transform-origin: 0 0; }
|
||||
.ln.jump { border-top: 2dp #3d6d96; }
|
||||
.ln.lane { border-top: 3dp #2f6d8f; }
|
||||
.ln.route { border-top: 3dp #5cc8f0; }
|
||||
.ln.waypath { border-top: 3dp #f2b13c; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="navmap">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_Map.3db"/>
|
||||
<span class="title">{{ briefing ? 'MISSION BRIEFING' : 'NAVIGATION' }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Waypoints <span class="v">{{ waypoints }}</span></span>
|
||||
<span class="close" data-if="!briefing" data-action="tool" data-arg="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="mapframe"><div id="map" data-class-blank="universe && uncharted">
|
||||
<div class="region" data-for="r : regions" data-style-left="r.left" data-style-top="r.top">{{ r.name }}</div>
|
||||
<div class="uncharted-note" data-if="universe && uncharted && items.size == 0">No uncharted system visited yet.</div>
|
||||
<div class="ln" data-for="l : lines" data-class-jump="l.cls == 'jump'" data-class-lane="l.cls == 'lane'" data-class-route="l.cls == 'route'" data-class-waypath="l.cls == 'waypath'" data-style-left="l.left" data-style-top="l.top" data-style-width="l.width" data-style-transform="l.transform"></div>
|
||||
<div class="mi" data-for="i : items" data-attr-class="'mi ' + i.cls + (i.selected ? ' sel' : '')" data-style-left="i.left" data-style-top="i.top">
|
||||
<div class="ring2" data-if="i.selected"></div>
|
||||
<div class="s" data-style-transform="i.rot"></div>
|
||||
<div class="lbl" data-if="i.label != ''" data-style-left="i.lleft" data-style-top="i.ltop">{{ i.label }}</div>
|
||||
</div>
|
||||
<div class="pop" data-if="popup" data-style-left="pop_left" data-style-top="pop_top">
|
||||
<div class="pt">{{ pick_name }}</div>
|
||||
<div class="pb" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
|
||||
<div class="pb" data-action="tool" data-arg="waypoint">Set waypoint</div>
|
||||
<div class="pb" data-action="tool" data-arg="route">Plot route</div>
|
||||
<div class="pb" data-if="can_target" data-action="tool" data-arg="target">Target</div>
|
||||
<div class="pb" data-if="can_info" data-action="tool" data-arg="info">Info</div>
|
||||
<div class="pb" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
|
||||
</div>
|
||||
<div class="zoom">
|
||||
<span class="v">{{ zoom }}</span>
|
||||
<div class="btn" data-action="zoomout">-</div>
|
||||
<div class="btn" data-action="zoomin">+</div>
|
||||
</div>
|
||||
</div><div class="mapfill"></div></div>
|
||||
<div class="side">
|
||||
<div class="sysname">{{ system }}</div>
|
||||
<div class="tbar">
|
||||
<div class="btn" data-class-primary="universe" data-action="tool" data-arg="universe">Universe</div>
|
||||
<div class="btn" data-if="has_uncharted" data-class-primary="uncharted" data-action="tool" data-arg="uncharted">Uncharted</div>
|
||||
<div class="btn" data-action="tool" data-arg="myship">My system</div>
|
||||
<div class="btn" data-class-primary="labels" data-action="labels">Names</div>
|
||||
<div class="btn" data-action="tool" data-arg="clearall">Clear waypoints</div>
|
||||
<div class="btn" data-if="can_abort" data-action="abort">Abort mission</div>
|
||||
</div>
|
||||
<div class="pcard" data-if="has_pick">
|
||||
<div class="n">{{ pick_name }}</div>
|
||||
<div class="k">{{ pick_kind }}</div>
|
||||
<div class="acts">
|
||||
<div class="btn" data-if="can_open" data-action="tool" data-arg="open">Open system</div>
|
||||
<div class="btn primary" data-action="tool" data-arg="waypoint">Set waypoint</div>
|
||||
<div class="btn" data-action="tool" data-arg="route">Plot route</div>
|
||||
<div class="btn" data-if="can_target" data-action="tool" data-arg="target">Target</div>
|
||||
<div class="btn" data-if="can_info" data-action="tool" data-arg="info">Info</div>
|
||||
<div class="btn" data-if="can_clear" data-action="tool" data-arg="clearwp">Remove waypoint</div>
|
||||
<div class="btn" data-if="can_mark" data-action="bookmark">Bookmark</div>
|
||||
</div>
|
||||
</div>
|
||||
<input class="text" type="text" data-value="search" maxlength="40" style="margin-bottom: 6dp;"/>
|
||||
<div class="hits" data-if="search != ''">
|
||||
<div class="hint" style="padding: 6dp;" data-if="results.size == 0">Nothing on this map by that name.</div>
|
||||
<div class="hit" data-for="r : results" data-action="result" data-attr-data-arg="r.key"><span class="hn">{{ r.name }}</span><span class="hk">{{ r.kind }}</span></div>
|
||||
</div>
|
||||
<div class="marks" data-if="bookmarks.size > 0 && search == ''">
|
||||
<h3>Bookmarks</h3>
|
||||
<div class="hit" data-for="b : bookmarks" data-action="gomark" data-ctx="mark" data-attr-data-arg="b.key"><span class="hn">{{ b.name }}</span></div>
|
||||
</div>
|
||||
<div class="pcard" data-if="!has_pick"><div class="k">Click the map to pick a place. Wheel zooms, drag moves, double click opens a system.</div></div>
|
||||
<div class="objs" data-if="objectives.size > 0">
|
||||
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 4dp;">
|
||||
<h3 style="flex: 1;">Route</h3>
|
||||
<div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objup">↑</div>
|
||||
<div class="btn" style="margin: 0 0 0 4dp; padding: 1dp 8dp;" data-action="objdown">↓</div>
|
||||
</div>
|
||||
<div class="obj" data-for="o : objectives">{{ o }}</div>
|
||||
</div>
|
||||
<div class="info" data-if="show_info">{{ infocard }}</div>
|
||||
<div class="tbar" data-if="show_info" style="margin-top: 8dp;">
|
||||
<div class="btn" data-action="tool" data-arg="closeinfo">Close info</div>
|
||||
</div>
|
||||
<div style="flex: 1;" data-if="!show_info"></div>
|
||||
<div class="btn primary" data-if="briefing" style="text-align: center;" data-action="tool" data-arg="continue">Continue</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,53 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>News</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 40%; margin-right: 18dp; }
|
||||
.list { flex: 1; overflow-y: auto; }
|
||||
.story { display: flex; flex-direction: row; align-items: center; padding: 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
||||
.story:hover { border-color: #5cc8f0; }
|
||||
.story.selected { border-color: #f2b13c; }
|
||||
.story img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
||||
.story .t { flex: 1; font-size: 14dp; }
|
||||
.head { display: flex; flex-direction: row; align-items: center; margin-bottom: 12dp; }
|
||||
.head img { width: 54dp; height: 54dp; margin-right: 14dp; }
|
||||
/* the story's picture (NN_News' video screen) */
|
||||
.photo { display: block; width: 360dp; height: 270dp; margin: 4dp 0 12dp 0; border: 2dp #3d6d96; border-radius: 3dp; }
|
||||
.head .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; }
|
||||
.text { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; padding: 14dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; font-size: 16dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="news">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_contracts.3db"/>
|
||||
<span class="title">NEWS</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Stories <span class="v">{{ stories.size }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="hint" data-if="stories.size == 0">No news here.</div>
|
||||
<div class="split" data-if="stories.size > 0">
|
||||
<div class="colm side">
|
||||
<h3 style="margin-bottom: 8dp;">Headlines</h3>
|
||||
<div class="list">
|
||||
<div class="story" data-for="s : stories" data-class-selected="s.selected" data-action="pick" data-attr-data-arg="s.key">
|
||||
<img data-attr-src="s.icon"/><span class="t">{{ s.headline }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm" data-if="has_pick">
|
||||
<div class="head"><img data-attr-src="pick.icon"/><div class="t">{{ pick.headline }}</div></div>
|
||||
<img class="photo" data-if="photo != ''" data-attr-src="photo"/>
|
||||
<div class="text">{{ story }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,30 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>NeuroNet</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* only as big as the bar, at the top right: the mouse beside it goes to the game */
|
||||
body.nnstrip { position: absolute; right: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
|
||||
.nnbar { pointer-events: auto; position: absolute; top: 0; right: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
|
||||
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
|
||||
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
|
||||
.nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
|
||||
/* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
|
||||
.nb { transition: background-color border-color 0.15s cubic-out; }
|
||||
.nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
|
||||
.nb.active img { image-color: #f2b13c; }
|
||||
.nb .tip { top: 40dp; right: 0; left: auto; bottom: auto; width: 230dp; white-space: normal; text-align: right; }
|
||||
.nb:hover .tip { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="nnstrip" data-model="nnbar">
|
||||
<div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'">
|
||||
<div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
|
||||
<img data-attr-src="i.icon"/>
|
||||
<div class="tip" data-if="i.label != ''">{{ i.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,17 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Bar icon flight</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the clicked bar icon on its way to the screen's middle, where its window opens (as FL's
|
||||
NeuroNet buttons fly in before their panel grows); no box, no clicks */
|
||||
body.flydoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
|
||||
#fly { position: absolute; display: none; image-color: #f2b13c; transform: perspective(600dp) rotateY(0deg); }
|
||||
#fly.on { display: block; animation: 0.32s cubic-in-out 1 fly-spin; }
|
||||
@keyframes fly-spin { from { transform: perspective(600dp) rotateY(0deg); } to { transform: perspective(600dp) rotateY(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="flydoc">
|
||||
<img id="fly"/>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,29 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Notifications</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* cards at the right edge, above the HUD's right panel; the empty strip is the game's */
|
||||
body.notify { position: absolute; right: 16dp; top: 120dp; width: 340dp; height: 520dp; background-color: transparent; display: flex; flex-direction: column; }
|
||||
.card { margin-bottom: 8dp; padding: 9dp 12dp 9dp 14dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #5cc8f0; border-radius: 4dp; }
|
||||
.card:hover { background-color: #0d1622f5; }
|
||||
.card .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 0.6dp; }
|
||||
.card .x { float: right; color: #8197ad; font-size: 13dp; }
|
||||
.card .b { margin-top: 2dp; font-size: 14dp; color: #b9cbe0; }
|
||||
.card.good { border-left-color: #5fd08a; }
|
||||
.card.warn { border-left-color: #ef6a5b; }
|
||||
.card.group { border-left-color: #ff7efd; }
|
||||
.card.trade { border-left-color: #f2b13c; }
|
||||
.card.mail { border-left-color: #87c3e0; }
|
||||
.card { animation: 0.25s cubic-out slidein; }
|
||||
@keyframes slidein { from { opacity: 0; margin-left: 40dp; } to { opacity: 1; margin-left: 0; } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="notify" data-model="notify">
|
||||
<div class="card" data-for="c : cards" data-attr-class="'card ' + c.kind" data-action="dismiss" data-attr-data-arg="c.key">
|
||||
<span class="x">×</span>
|
||||
<div class="t">{{ c.title }}</div>
|
||||
<div class="b" data-if="c.text != ''">{{ c.text }}</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,33 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Objective</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* no box of its own: only the banner, centred under the top bars */
|
||||
body.objdoc { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; background-color: transparent; }
|
||||
.obj
|
||||
{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 70dp;
|
||||
transform: translateX(-50%);
|
||||
max-width: 900dp;
|
||||
padding: 8dp 22dp;
|
||||
background-color: #070b12d9;
|
||||
border: 2dp #3d6d96;
|
||||
border-top: 2dp #f2b13c;
|
||||
border-radius: 4dp;
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-weight: 600;
|
||||
font-size: 17dp;
|
||||
letter-spacing: 1.5dp;
|
||||
color: #f2b13c;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="objdoc" data-model="objective">
|
||||
<div class="obj" data-if="shown" data-style-opacity="opacity">{{ text }}</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,111 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Options</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.side { flex: 0 0 200dp; margin-right: 18dp; display: flex; flex-direction: column; }
|
||||
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.page { padding: 11dp 14dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; letter-spacing: 1.5dp; text-transform: uppercase; }
|
||||
.page:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.page.active { border-left-color: #f2b13c; color: #f2b13c; background-color: #f2b13c14; }
|
||||
.subtabs { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 10dp; }
|
||||
.subtab { padding: 5dp 12dp; margin: 0 6dp 6dp 0; border: 1dp #24405c; border-radius: 12dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
|
||||
.subtab:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.subtab.active { border-color: #f2b13c; color: #f2b13c; }
|
||||
.rows { flex: 1; overflow-y: auto; }
|
||||
.head { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 12dp 0 6dp 0; }
|
||||
.opt { display: flex; flex-direction: row; align-items: center; padding: 8dp 12dp; border-bottom: 1dp #ffffff08; }
|
||||
.opt:hover { background-color: #122033; }
|
||||
.opt .l { flex: 1; min-width: 0; font-size: 16dp; }
|
||||
.opt.locked .l, .opt.locked .v { color: #5d6e80; }
|
||||
.opt.changed { border-left: 2dp #f2b13c; }
|
||||
.opt.changed .l { color: #f2b13c; }
|
||||
/* nothing of the window's content until NN_Preferences stands on its page */
|
||||
.win-main, .win-head .title { transition: opacity 0.18s; }
|
||||
.settling .win-main, .settling .win-head .title { opacity: 0; }
|
||||
.rows.settle { opacity: 0; transition: opacity 0.15s; }
|
||||
.rows.settle.shown { opacity: 1; }
|
||||
.switch { width: 58dp; padding: 3dp 0; text-align: center; border: 2dp #3d6d96; border-radius: 4dp; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1dp; color: #8197ad; }
|
||||
.switch.on { border-color: #f2b13c; color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.switch:hover { border-color: #5cc8f0; }
|
||||
.slide { display: flex; flex-direction: row; align-items: center; width: 330dp; }
|
||||
.slide .step { width: 26dp; padding: 2dp 0; text-align: center; border: 1dp #24405c; border-radius: 3dp; color: #dbe6f0; }
|
||||
.slide .step:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.slide .track { flex: 1; height: 6dp; margin: 0 8dp; background-color: #24405c; border-radius: 3dp; }
|
||||
.slide .fill { height: 6dp; background-color: #f2b13c; border-radius: 3dp; }
|
||||
.opt .v { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; margin-left: 10dp; }
|
||||
.ask { padding: 12dp; margin-bottom: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #0d1622; display: flex; flex-direction: row; align-items: center; }
|
||||
.ask .t { flex: 1; }
|
||||
.ask .btn { margin: 0 0 0 8dp; }
|
||||
.side .btn { display: block; margin: 0 0 8dp 0; text-align: center; }
|
||||
.kb { width: 150dp; margin-left: 10dp; padding: 4dp 8dp; text-align: center; font-family: "IBM Plex Mono"; font-size: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.kb:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.kb.fixed { color: #5d6e80; }
|
||||
.kb.fixed:hover { border-color: #24405c; color: #5d6e80; }
|
||||
.credits { flex: 1; overflow-y: auto; white-space: pre-line; text-align: center; line-height: 1.6; font-size: 14dp; padding: 12dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="options" data-class-settling="!settled">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="side">
|
||||
<div class="page" data-for="p : pages" data-class-active="p.active" data-action="page" data-attr-data-arg="p.key">{{ p.label }}</div>
|
||||
<div style="flex: 1;"></div>
|
||||
<div class="btn primary" data-if="is_rem" data-class-disabled="!unsaved" data-action="save">Save settings<div class="tip">Writes the changed REM settings (marked) to rem.ini.</div></div>
|
||||
<div class="btn" data-if="can_defaults" data-action="defaults">Defaults<div class="tip">Every setting of this page back to its default.</div></div>
|
||||
<div class="btn" data-class-disabled="!can_cancel" data-action="cancel">Undo changes<div class="tip">Back to the values the page opened with.</div></div>
|
||||
<div class="btn primary" data-action="close">{{ in_game ? 'Back to the game' : 'Main menu' }}</div>
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="ask" data-if="asking">
|
||||
<span class="t">{{ question }}</span>
|
||||
<div class="btn primary" data-if="can_yes" data-action="yes">{{ yes_label }}</div>
|
||||
<div class="btn" data-action="no">{{ no_label }}</div>
|
||||
</div>
|
||||
<div class="subtabs" data-if="is_rem">
|
||||
<div class="subtab" data-for="t : subtabs" data-class-active="t.active" data-action="subtab" data-attr-data-arg="t.key">{{ t.label }}</div>
|
||||
</div>
|
||||
<div class="subtabs" data-if="is_keys">
|
||||
<div class="subtab" data-for="t : keygroups" data-class-active="t.active" data-action="keygroup" data-attr-data-arg="t.key">{{ t.label }}</div>
|
||||
</div>
|
||||
<div class="rows" data-if="is_keys">
|
||||
<div class="opt keyrow" data-for="k : keys" data-class-locked="!k.editable">
|
||||
<span class="l">{{ k.name }}</span>
|
||||
<span class="kb" data-class-fixed="!k.editable" data-action="bind" data-attr-data-arg="k.row">{{ k.key == '' ? '-' : k.key }}</span>
|
||||
<span class="kb" data-class-fixed="!k.editable" data-action="bindalt" data-attr-data-arg="k.row">{{ k.alt == '' ? '-' : k.alt }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="credits" data-if="is_credits">{{ credits }}</div>
|
||||
<div class="rows settle" data-if="!is_keys && !is_credits" data-class-shown="settled">
|
||||
<div data-for="r : rows">
|
||||
<div class="head" data-if="r.kind == 0">{{ r.label }}</div>
|
||||
<div class="opt" data-if="r.kind != 0" data-class-locked="r.kind == 3" data-class-changed="r.changed">
|
||||
<span class="l">{{ r.label }}</span>
|
||||
<div class="switch" data-if="r.kind == 1" data-class-on="r.on" data-action="toggle" data-attr-data-arg="r.key">{{ r.value }}</div>
|
||||
<div class="slide" data-if="r.kind == 2">
|
||||
<span class="step" data-action="dec" data-attr-data-arg="r.key">-</span>
|
||||
<div class="track"><div class="fill" data-style-width="r.fill + '%'"></div></div>
|
||||
<span class="step" data-action="inc" data-attr-data-arg="r.key">+</span>
|
||||
<span class="v">{{ r.value }}</span>
|
||||
</div>
|
||||
<span class="v" data-if="r.kind == 3">{{ r.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">back</span>
|
||||
<span class="status">{{ unsaved ? 'REM settings changed - not saved yet.' : 'Settings marked * take effect after a restart.' }}</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,112 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Equipment dealer</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.mid { flex: 0 0 34%; margin: 0 18dp; }
|
||||
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.col-h .hint { margin-left: auto; }
|
||||
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
|
||||
.good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.good:hover { background-color: #122033; }
|
||||
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.good.disabled .n, .good.disabled .p { color: #8197ad; }
|
||||
.good img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.good .txt { flex: 1; min-width: 0; }
|
||||
.good .n { font-size: 14dp; }
|
||||
.good .note { font-size: 12dp; color: #8197ad; }
|
||||
.good .c { font-family: "IBM Plex Mono"; width: 40dp; text-align: right; color: #8197ad; }
|
||||
.good .p { font-family: "IBM Plex Mono"; width: 100dp; text-align: right; color: #f2b13c; }
|
||||
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); }
|
||||
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
|
||||
.deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
|
||||
.deal .what { width: 300dp; }
|
||||
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
.deal .amount { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0 14dp; }
|
||||
.deal .amount .v { font-family: "IBM Plex Mono"; width: 70dp; text-align: right; margin-left: 10dp; }
|
||||
.deal .sum { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; width: 150dp; text-align: right; margin-right: 14dp; }
|
||||
.deal .btn { margin: 0; }
|
||||
.why { color: #ef6a5b; margin-right: 14dp; }
|
||||
.search { margin-bottom: 8dp; }
|
||||
.cmp { margin-top: 10dp; padding: 8dp 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.cmp .ch, .cmp .cr { display: flex; flex-direction: row; padding: 2dp 0; }
|
||||
.cmp .ch { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 14dp; border-bottom: 1dp #24405c; margin-bottom: 4dp; }
|
||||
.cmp .cl { flex: 1; white-space: nowrap; overflow: hidden; }
|
||||
.cmp .cv { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; font-size: 13dp; }
|
||||
.cmp .ch .cv { font-family: "Saira SemiCondensed"; font-size: 12dp; color: #8197ad; }
|
||||
.cmp .cv.up { color: #5fd08a; }
|
||||
.cmp .cv.down { color: #ef6a5b; }
|
||||
.cmp .cv.dim { color: #8197ad; }
|
||||
.cmp .cn { margin-top: 4dp; font-size: 12dp; color: #8197ad; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="outfitter">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_ships.3db"/>
|
||||
<span class="title">EQUIPMENT DEALER</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Hold <span class="v">{{ hold }}</span></span>
|
||||
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm">
|
||||
<div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }}</span></div>
|
||||
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
||||
<div class="list">
|
||||
<div class="hint" style="padding: 10dp;" data-if="market.size == 0">No equipment for sale here.</div>
|
||||
<div class="good" data-for="r : market" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="buy-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="note" data-if="r.note != ''">{{ r.note }}</div></div>
|
||||
<span class="p">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm mid">
|
||||
<div class="col-h"><h3>Your ship</h3></div>
|
||||
<div id="ship"></div>
|
||||
<div class="cmp" data-if="cmp.size > 0">
|
||||
<div class="ch"><span class="cl">{{ pick.name }}</span><span class="cv">this</span><span class="cv" data-if="cmp_other != ''">mounted</span></div>
|
||||
<div class="cr" data-for="c : cmp"><span class="cl">{{ c.label }}</span><span class="cv" data-class-up="c.better == 1" data-class-down="c.better == -1">{{ c.value }}</span><span class="cv dim" data-if="cmp_other != ''">{{ c.other }}</span></div>
|
||||
<div class="cn" data-if="cmp_other != ''">compared with {{ cmp_other }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div class="col-h"><h3>Your equipment</h3><span class="hint">hold {{ hold }}</span></div>
|
||||
<div class="list">
|
||||
<div class="hint" style="padding: 10dp;" data-if="gear.size == 0">No equipment.</div>
|
||||
<div class="good" data-for="r : gear" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-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="note">{{ r.note }}</div></div>
|
||||
<span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deal">
|
||||
<img data-if="has_pick && pick.icon != ''" data-attr-src="pick.icon"/>
|
||||
<div class="what">
|
||||
<div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
|
||||
<div class="t">{{ has_pick ? pick.name : 'Pick a piece of equipment' }}</div>
|
||||
</div>
|
||||
<div class="amount">
|
||||
<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" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
|
||||
</div>
|
||||
<span class="why" data-if="reason != ''">{{ reason }}</span>
|
||||
<span class="sum">{{ total }}</span>
|
||||
<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>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">close</span>
|
||||
<span class="status">{{ status }}</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,43 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Pause</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the whole screen dimmed, the menu in the middle */
|
||||
body.dim
|
||||
{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #02050acc;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.menu { width: 440dp; background-color: #0d1622f5; border: 2dp #3d6d96; border-top: 2dp #f2b13c; border-radius: 4dp; padding: 18dp 22dp 12dp 22dp; }
|
||||
.menu .title { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 4dp; text-transform: uppercase; margin-bottom: 14dp; }
|
||||
.row { padding: 11dp 14dp; margin-bottom: 8dp; border: 1dp #24405c; border-left: 3dp #3d6d96; border-radius: 3dp; background-color: #122033; }
|
||||
.row:hover { border-color: #5cc8f0; background-color: #16283d; }
|
||||
.row.primary { border-left-color: #f2b13c; }
|
||||
.row.danger { border-left-color: #ef6a5b; }
|
||||
.row .l { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; letter-spacing: 1.5dp; text-transform: uppercase; }
|
||||
.row.primary .l { color: #f2b13c; }
|
||||
.row:hover .l { color: #5cc8f0; }
|
||||
.row .h { font-size: 12dp; color: #8197ad; margin-top: 2dp; }
|
||||
.foot { margin-top: 6dp; text-align: center; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="dim" data-model="pause">
|
||||
<div class="menu">
|
||||
<div class="title">{{ title }}</div>
|
||||
<div class="row" data-for="r : rows" data-class-primary="r.primary" data-class-danger="r.danger" data-action="row" data-attr-data-arg="r.key">
|
||||
<div class="l">{{ r.label }}</div>
|
||||
<div class="h" data-if="r.hint != ''">{{ r.hint }}</div>
|
||||
</div>
|
||||
<div class="foot"><span class="key">Esc</span><span class="hint"> resume</span></div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,93 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Player</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<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 .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; }
|
||||
.skill:hover { border-color: #5cc8f0; }
|
||||
.skill.selected { border-color: #f2b13c; }
|
||||
.skill .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; width: 220dp; }
|
||||
.skill .lvl { font-family: "IBM Plex Mono"; width: 60dp; text-align: right; margin-right: 14dp; color: #8197ad; }
|
||||
.skill .bar { flex: 1; margin-right: 14dp; }
|
||||
.skill .next { font-family: "IBM Plex Mono"; width: 120dp; text-align: right; }
|
||||
.skill .next.max { color: #5fd08a; }
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.gap { margin-right: 18dp; }
|
||||
.big-num { font-family: "IBM Plex Mono"; font-size: 30dp; color: #f2b13c; margin: 6dp 0 14dp 0; }
|
||||
.namefield { display: flex; flex-direction: row; align-items: center; margin-bottom: 10dp; }
|
||||
.namefield .label { margin-right: 10dp; }
|
||||
.namefield input.text { flex: 1; }
|
||||
.xp { margin-left: auto; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="player">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_player.3db"/><span class="title">PLAYER</span>
|
||||
<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="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/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>
|
||||
<div class="content">
|
||||
<div data-if="page == 0">
|
||||
<h3 style="margin-bottom: 10dp;">Statistics</h3>
|
||||
<div class="grid">
|
||||
<div class="stat" data-for="s : stats"><img class="stat-ico" data-attr-src="s.icon"/><div class="sv"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="colm" data-if="page == 1">
|
||||
<div class="win-head" style="padding: 0 0 10dp 0; border-bottom-width: 0;"><h3>Skills</h3><span class="hint xp">Level up with your experience points</span></div>
|
||||
<div class="skill" data-for="k : skills" data-class-selected="k.selected" data-action="skill" data-attr-data-arg="k.key">
|
||||
<span class="n">{{ k.name }}</span>
|
||||
<span class="lvl">{{ k.level }} / 10</span>
|
||||
<div class="bar"><div class="fill" data-style-width="k.percent + '%'"></div></div>
|
||||
<span class="next" data-class-max="k.max">{{ k.next }}</span>
|
||||
</div>
|
||||
<div class="hint" style="margin: 6dp 0 10dp 0;">{{ skill_info }}</div>
|
||||
<div class="actions"><div class="btn primary" data-action="levelup">Level up<div class="tip">Spends the experience points shown beside the skill on its next level.</div></div></div>
|
||||
</div>
|
||||
|
||||
<div class="split" data-if="page == 2">
|
||||
<div class="colm gap">
|
||||
<h3>Account balance</h3>
|
||||
<div class="big-num">{{ balance }}</div>
|
||||
<div class="hint" data-if="bank_note != ''">{{ bank_note }}</div>
|
||||
<div class="namefield"><span class="label">Amount</span><input class="text" type="text" data-value="amount" maxlength="13"/></div>
|
||||
<div class="actions">
|
||||
<div class="btn primary" data-action="deposit">Deposit<div class="tip">Moves the amount from your ship's credits into the account.</div></div>
|
||||
<div class="btn primary" data-action="withdraw">Withdraw<div class="tip">Moves the amount from the account to your ship's credits.</div></div>
|
||||
</div>
|
||||
<div class="hint">Deposit and withdraw move credits between your ship and the account. The account is shared by your characters.</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<h3 style="margin-bottom: 8dp;">Send to</h3>
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="body">
|
||||
<div class="empty" data-if="recipients.size == 0">Nobody online.</div>
|
||||
<div class="row" data-for="r : recipients" data-class-selected="r.selected" data-action="recipient" data-attr-data-arg="r.name"><span class="c1">{{ r.name }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">close</span>
|
||||
<span class="status">{{ status }}</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,70 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Player status</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 42%; margin-right: 18dp; overflow-y: auto; }
|
||||
.grid { display: block; margin-bottom: 8dp; }
|
||||
.stat { display: inline-block; box-sizing: border-box; width: 48%; margin: 0 2% 8dp 0; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 8dp 12dp; }
|
||||
.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: 17dp; margin-top: 2dp; }
|
||||
.list { flex: 1; overflow-y: auto; }
|
||||
.faction { display: flex; flex-direction: row; align-items: center; padding: 7dp 10dp; margin-bottom: 5dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
||||
.faction:hover { border-color: #5cc8f0; }
|
||||
.faction.selected { border-color: #f2b13c; }
|
||||
.faction.own .n { color: #f2b13c; }
|
||||
.faction .n { width: 40%; font-size: 14dp; }
|
||||
.faction .rep { flex: 1; display: flex; flex-direction: row; height: 6dp; margin: 0 12dp; }
|
||||
.faction .half { width: 50%; height: 6dp; background-color: #00000066; display: flex; flex-direction: row; }
|
||||
.faction .half.l { justify-content: flex-end; border-right: 1dp #8197ad; }
|
||||
.faction .neg { height: 6dp; background-color: #ef6a5b; }
|
||||
.faction .pos { height: 6dp; background-color: #5fd08a; }
|
||||
.faction .s { width: 90dp; text-align: right; font-size: 12dp; color: #8197ad; font-family: "Saira SemiCondensed"; text-transform: uppercase; letter-spacing: 1dp; }
|
||||
.card { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="playerinfo">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/stat_rating_icon.3db"/>
|
||||
<span class="title">PLAYER STATUS</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="hint" data-if="!received">Waiting for the server...</div>
|
||||
<div class="split" data-if="received">
|
||||
<div class="colm side">
|
||||
<h3 style="margin-bottom: 8dp;">Career</h3>
|
||||
<div class="grid"><div class="stat" data-for="s : stats"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
|
||||
<h3 style="margin-bottom: 8dp;">Kills</h3>
|
||||
<div class="grid"><div class="stat" data-for="s : kills"><div class="k">{{ s.label }}</div><div class="v">{{ s.value }}</div></div></div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div data-if="!has_card" class="colm">
|
||||
<h3 style="margin-bottom: 8dp;">Reputation</h3>
|
||||
<div class="list">
|
||||
<div class="hint" data-if="factions.size == 0">You have met no factions yet.</div>
|
||||
<div class="faction" data-for="f : factions" data-class-own="f.own" data-class-selected="f.selected" data-action="faction" data-attr-data-arg="f.key">
|
||||
<span class="n">{{ f.name }}</span>
|
||||
<div class="rep">
|
||||
<div class="half l"><div class="neg" data-style-width="(f.left * 2) + '%'"></div></div>
|
||||
<div class="half"><div class="pos" data-style-width="(f.right * 2) + '%'"></div></div>
|
||||
</div>
|
||||
<span class="s">{{ f.standing }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div data-if="has_card" class="colm">
|
||||
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>{{ card_title }}</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="card-close">Back</div></div>
|
||||
<div class="card">{{ card }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,41 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Private message</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
body.window.pmwin { left: auto; right: 250dp; top: auto; bottom: 360dp; width: 480dp; height: 440dp; }
|
||||
#pmhist { flex: 1; overflow-y: auto; padding: 10dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.ln { margin: 4dp 0; display: block; }
|
||||
.ln .b { display: block; width: 80%; padding: 6dp 10dp; border-radius: 6dp; background-color: #122033; font-size: 15dp; line-height: 1.3; text-align: left; }
|
||||
.ln.mine .b { margin-left: auto; }
|
||||
.ln.mine .tm { text-align: right; }
|
||||
.ln.mine .b { background-color: #f2b13c1f; border: 1dp #f2b13c55; }
|
||||
.ln .tm { display: block; font-family: "IBM Plex Mono"; font-size: 10dp; color: #8197ad; margin: 1dp 4dp; }
|
||||
.send { display: flex; flex-direction: row; margin-top: 10dp; }
|
||||
.send input.text { flex: 1; margin: 0 8dp 0 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window pmwin" data-model="pm">
|
||||
<div class="win-head">
|
||||
<span class="title" style="font-size: 18dp;">{{ name }}</span>
|
||||
<span class="loc">private</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; padding: 12dp;">
|
||||
<div id="pmhist">
|
||||
<div class="hint" data-if="lines.size == 0">No messages yet.</div>
|
||||
<div class="ln" data-for="l : lines" data-class-mine="l.mine">
|
||||
<div class="b" data-rml="l.rml"></div>
|
||||
<span class="tm">{{ l.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="send">
|
||||
<input class="text" type="text" data-value="edit" maxlength="200"/>
|
||||
<div class="btn primary" data-action="send">Send</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,28 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Messages</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* the open conversations docked at the right edge, above the HUD's right panel */
|
||||
body.pmdock { position: absolute; right: 16dp; bottom: 360dp; width: 220dp; height: 300dp; background-color: transparent; display: flex; flex-direction: column; justify-content: flex-end; }
|
||||
.tab { display: flex; flex-direction: row; align-items: center; margin-top: 6dp; padding: 7dp 10dp; background-color: #070b12eb; border: 2dp #3d6d96; border-left: 4dp #87c3e0; border-radius: 4dp; }
|
||||
.tab:hover { background-color: #122033; }
|
||||
.tab.open { border-color: #f2b13c; }
|
||||
.tab .ic { font-size: 15dp; margin-right: 8dp; color: #87c3e0; }
|
||||
.tab .n { flex: 1; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 15dp; white-space: nowrap; overflow: hidden; }
|
||||
.tab .u { min-width: 20dp; height: 20dp; line-height: 20dp; text-align: center; border-radius: 10dp; background-color: #ef6a5b; color: #ffffff; font-size: 12dp; margin-right: 6dp; }
|
||||
.tab .x { color: #8197ad; padding: 0 4dp; }
|
||||
.tab .x:hover { color: #ef6a5b; }
|
||||
.tab.new { animation: 1.2s sine-in-out infinite pulse; }
|
||||
@keyframes pulse { 0% { border-left-color: #87c3e0; } 50% { border-left-color: #f2b13c; } 100% { border-left-color: #87c3e0; } }
|
||||
</style>
|
||||
</head>
|
||||
<body class="pmdock" data-model="pmdock">
|
||||
<div class="tab" data-for="t : tabs" data-class-open="t.open" data-class-new="t.unread > 0" data-action="open" data-attr-data-arg="t.key">
|
||||
<span class="ic">PM</span>
|
||||
<span class="n">{{ t.name }}</span>
|
||||
<span class="u" data-if="t.unread > 0">{{ t.unread }}</span>
|
||||
<span class="x" data-action="close" data-attr-data-arg="t.key">×</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,443 @@
|
||||
/* REM: the modern UI's design (docs/rem/ui-modern.md, "Design") -- shared by every window.
|
||||
RmlUi has no CSS variables: the tokens are written out, keep them in step with the table.
|
||||
space #070b12 page ground behind full-screen pages
|
||||
glass #0d1622 window fill (slightly see-through: #0d1622eb)
|
||||
glass2 #122033 rows, fields, cards
|
||||
line #24405c quiet lines (FL wire blue)
|
||||
linehi #3d6d96 window and button frames
|
||||
text #dbe6f0 muted #8197ad
|
||||
amber #f2b13c active / selected cyan #5cc8f0 hover, focus
|
||||
good #5fd08a warn #f2b13c bad #ef6a5b
|
||||
Fonts: Saira SemiCondensed (headings, buttons, tabs), Barlow (text), IBM Plex Mono (numbers). */
|
||||
|
||||
/* RmlUi has no browser defaults: the block elements are set here */
|
||||
div, p, h1, h2, h3, h4, section, header, footer, ul, li, form { display: block; }
|
||||
strong, b { font-weight: bold; }
|
||||
.btn, .close, .chip, .state, .key { display: inline-block; }
|
||||
em, i { font-style: italic; }
|
||||
|
||||
body
|
||||
{
|
||||
font-family: Barlow;
|
||||
font-weight: 500; /* Barlow Medium: the regular cut reads thin at high resolutions */
|
||||
font-size: 15dp;
|
||||
color: #dbe6f0;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- window frame */
|
||||
|
||||
body.window
|
||||
{
|
||||
position: absolute;
|
||||
left: 9%;
|
||||
top: 7%;
|
||||
width: 82%;
|
||||
height: 86%;
|
||||
max-width: 1680dp;
|
||||
background-color: #0d1622eb;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 4dp;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* a window opens with a short fade and lift (the host sets .rem-in for one frame) */
|
||||
/* the transform only while the window moves in (.rem-anim): a transformed window's scrolled
|
||||
content is not clipped by the renderer (no clip mask), so a resting window has none */
|
||||
body.window { opacity: 1; transition: opacity transform 0.22s cubic-out; }
|
||||
body.window.rem-anim { transform: translateY(0dp) scale(1); }
|
||||
body.window.rem-in { opacity: 0; transform: translateY(14dp) scale(0.985); }
|
||||
/* after a bar icon flew to the middle: the window grows out of it */
|
||||
body.window.rem-in.rem-zoom { opacity: 0; transform: translateY(0dp) scale(0.3); }
|
||||
|
||||
/* a smaller window (player, contracts, waypoints) */
|
||||
body.window.medium { left: 18%; top: 12%; width: 64%; height: 76%; max-width: 1300dp; }
|
||||
body.window.small { left: 28%; top: 18%; width: 44%; height: 64%; max-width: 900dp; }
|
||||
|
||||
.win-head
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12dp 18dp;
|
||||
border-bottom: 1dp #24405c;
|
||||
drag: drag; /* the grip: a window moves by its head (rem_ui_host.cpp, rem.ini win_<name>) */
|
||||
cursor: move;
|
||||
}
|
||||
.win-head .title
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-weight: 600;
|
||||
font-size: 21dp;
|
||||
letter-spacing: 1.2dp;
|
||||
margin-right: 16dp;
|
||||
}
|
||||
.win-head .loc { color: #8197ad; font-size: 15dp; }
|
||||
.win-head .spacer { flex: 1; }
|
||||
.chip
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 14dp;
|
||||
letter-spacing: 0.6dp;
|
||||
color: #8197ad;
|
||||
padding: 2dp 11dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 11dp;
|
||||
margin-left: 10dp;
|
||||
}
|
||||
.chip .v { font-family: "IBM Plex Mono"; color: #dbe6f0; }
|
||||
.close
|
||||
{
|
||||
width: 28dp;
|
||||
height: 28dp;
|
||||
line-height: 26dp;
|
||||
text-align: center;
|
||||
margin-left: 14dp;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
color: #8197ad;
|
||||
font-size: 17dp;
|
||||
}
|
||||
.close:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
|
||||
.win-main
|
||||
{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.nav
|
||||
{
|
||||
width: 200dp;
|
||||
border-right: 1dp #24405c;
|
||||
padding: 10dp 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.nav .item
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 16dp;
|
||||
letter-spacing: 1.1dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
padding: 9dp 18dp;
|
||||
border-left: 2dp #00000000;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.nav .item .badge
|
||||
{
|
||||
margin-left: auto;
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 11dp;
|
||||
color: #dbe6f0;
|
||||
background-color: #24405c;
|
||||
border-radius: 3dp;
|
||||
padding: 0 5dp;
|
||||
}
|
||||
.nav .item:hover { color: #5cc8f0; background-color: #122033; }
|
||||
.nav .item img.ico { width: 20dp; height: 20dp; margin-right: 10dp; opacity: 0.7; }
|
||||
.nav .item:hover img.ico, .nav .item.active img.ico { opacity: 1; }
|
||||
.win-head img.head-ico { width: 26dp; height: 26dp; margin-right: 10dp; image-color: #f2b13c; }
|
||||
.nav .item.active { color: #f2b13c; border-left-color: #f2b13c; background-color: #122033; }
|
||||
.nav .sep { height: 1dp; background-color: #24405c; margin: 8dp 18dp; }
|
||||
|
||||
.content
|
||||
{
|
||||
flex: 1;
|
||||
padding: 18dp;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.win-foot
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-top: 1dp #24405c;
|
||||
padding: 8dp 18dp;
|
||||
font-size: 13dp;
|
||||
color: #8197ad;
|
||||
}
|
||||
.win-foot .key
|
||||
{
|
||||
font-family: "IBM Plex Mono";
|
||||
font-size: 11dp;
|
||||
color: #dbe6f0;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 0 4dp;
|
||||
margin-right: 5dp;
|
||||
}
|
||||
.win-foot .hint { margin-right: 18dp; }
|
||||
.win-foot .status { margin-left: auto; color: #dbe6f0; }
|
||||
|
||||
/* ---------------------------------------------------------------- headings, text */
|
||||
|
||||
h3, .label
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 14dp;
|
||||
letter-spacing: 1.2dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
}
|
||||
.muted { color: #8197ad; }
|
||||
.hint { font-size: 13dp; color: #8197ad; }
|
||||
.num { font-family: "IBM Plex Mono"; }
|
||||
.big
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-weight: 600;
|
||||
font-size: 27dp;
|
||||
}
|
||||
.kind
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
letter-spacing: 1dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- state chips, bars */
|
||||
|
||||
.state
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 12dp;
|
||||
letter-spacing: 0.8dp;
|
||||
text-transform: uppercase;
|
||||
padding: 1dp 7dp;
|
||||
border-width: 1dp;
|
||||
border-radius: 2dp;
|
||||
}
|
||||
.st-good { color: #5fd08a; border-color: #5fd08a; }
|
||||
.st-warn { color: #f2b13c; border-color: #f2b13c; }
|
||||
.st-bad { color: #ef6a5b; border-color: #ef6a5b; }
|
||||
.st-idle { color: #8197ad; border-color: #8197ad; }
|
||||
|
||||
.bar { height: 4dp; background-color: #00000066; border-radius: 2dp; }
|
||||
.bar .fill { height: 4dp; border-radius: 2dp; background-color: #5fd08a; }
|
||||
.bar .fill.warn { background-color: #f2b13c; }
|
||||
.bar .fill.bad { background-color: #ef6a5b; }
|
||||
|
||||
/* ---------------------------------------------------------------- buttons */
|
||||
|
||||
.btn
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 14dp;
|
||||
letter-spacing: 1.1dp;
|
||||
text-transform: uppercase;
|
||||
color: #dbe6f0;
|
||||
background-color: #122033;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 7dp 16dp;
|
||||
margin-right: 8dp;
|
||||
margin-bottom: 8dp;
|
||||
position: relative;
|
||||
transition: color border-color 0.12s;
|
||||
}
|
||||
.btn:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.btn:active { background-color: #1a2d47; }
|
||||
.btn.primary { color: #f2b13c; border-color: #f2b13c; }
|
||||
.btn.primary:hover { color: #5cc8f0; border-color: #5cc8f0; }
|
||||
.btn.danger { color: #ef6a5b; border-color: #7a3f3e; }
|
||||
.btn.armed { color: #160604; background-color: #ef6a5b; border-color: #ef6a5b; }
|
||||
.btn.disabled { color: #8197ad66; border-color: #24405c; }
|
||||
.btn .small { font-family: "IBM Plex Mono"; font-size: 11dp; color: #8197ad; text-transform: none; letter-spacing: 0; margin-left: 6dp; }
|
||||
|
||||
/* a tooltip: a .tip child, shown while the button is hovered */
|
||||
.tip
|
||||
{
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 8dp;
|
||||
width: 260dp;
|
||||
z-index: 10;
|
||||
font-family: Barlow;
|
||||
font-size: 13dp;
|
||||
text-transform: none;
|
||||
letter-spacing: 0;
|
||||
color: #dbe6f0;
|
||||
background-color: #05090f;
|
||||
border: 2dp #3d6d96;
|
||||
border-radius: 3dp;
|
||||
padding: 6dp 9dp;
|
||||
}
|
||||
.btn:hover .tip { display: block; }
|
||||
|
||||
.actions { display: flex; flex-direction: row; flex-wrap: wrap; }
|
||||
|
||||
/* ---------------------------------------------------------------- tabs inside a page */
|
||||
|
||||
.subtabs
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1dp #24405c;
|
||||
margin-bottom: 12dp;
|
||||
}
|
||||
.subtabs .tab
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 14dp;
|
||||
letter-spacing: 1.2dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
padding: 7dp 14dp;
|
||||
border-bottom: 2dp #00000000;
|
||||
}
|
||||
.subtabs .tab:hover { color: #5cc8f0; }
|
||||
.subtabs .tab.active { color: #f2b13c; border-bottom-color: #f2b13c; }
|
||||
|
||||
/* ---------------------------------------------------------------- lists and tables */
|
||||
|
||||
.scroll { overflow-y: auto; }
|
||||
scrollbarvertical { width: 8dp; margin-left: 4dp; }
|
||||
scrollbarvertical slidertrack { background-color: #0d1622; border-radius: 4dp; }
|
||||
scrollbarvertical sliderbar { background-color: #3d6d96; border-radius: 4dp; min-height: 24dp; }
|
||||
scrollbarvertical sliderbar:hover { background-color: #5cc8f0; }
|
||||
scrollbarvertical sliderarrowdec, scrollbarvertical sliderarrowinc { height: 0; }
|
||||
|
||||
input.text
|
||||
{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 7dp 10dp;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
color: #dbe6f0;
|
||||
font-size: 14dp;
|
||||
cursor: text;
|
||||
}
|
||||
input.text:focus { border-color: #5cc8f0; }
|
||||
input.text .placeholder, input.text:placeholder { color: #8197ad; }
|
||||
|
||||
.table
|
||||
{
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
}
|
||||
.table .head, .table .row
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 6dp 10dp;
|
||||
}
|
||||
.table .head
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 12dp;
|
||||
letter-spacing: 1.2dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
background-color: #0d1622;
|
||||
border-bottom: 1dp #24405c;
|
||||
}
|
||||
.table .body { flex: 1; overflow-y: auto; }
|
||||
.table .row { font-size: 14dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.table .row:hover { background-color: #122033; }
|
||||
.table .row.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.table .row.current .c1 { color: #f2b13c; }
|
||||
.table .c1 { flex: 1; }
|
||||
.table .c2 { width: 30%; }
|
||||
.table .c3 { width: 70dp; text-align: right; font-family: "IBM Plex Mono"; }
|
||||
.table .c4 { width: 120dp; text-align: right; font-family: "IBM Plex Mono"; margin-right: 16dp; }
|
||||
.table .head .c3, .table .head .c4 { font-family: "Saira SemiCondensed"; }
|
||||
|
||||
/* the amount slider (as Freelancer's quantity slider at the dealers) */
|
||||
input.range { flex: 1; height: 18dp; }
|
||||
input.range slidertrack { height: 4dp; margin-top: 7dp; background-color: #24405c; border-radius: 2dp; }
|
||||
input.range sliderbar { width: 14dp; height: 18dp; background-color: #f2b13c; border-radius: 3dp; }
|
||||
input.range sliderbar:hover { background-color: #5cc8f0; }
|
||||
input.range sliderarrowdec, input.range sliderarrowinc { width: 0; height: 0; }
|
||||
.table .empty { padding: 12dp 10dp; color: #8197ad; }
|
||||
|
||||
/* ---------------------------------------------------------------- cards, stats */
|
||||
|
||||
.stats
|
||||
{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
margin-bottom: 12dp;
|
||||
}
|
||||
.stats .cell { flex: 1; padding: 8dp 12dp; border-right: 1dp #24405c; }
|
||||
.stats .cell.last { border-right-width: 0; }
|
||||
.stats .k
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 12dp;
|
||||
letter-spacing: 1.1dp;
|
||||
text-transform: uppercase;
|
||||
color: #8197ad;
|
||||
}
|
||||
.stats .v { font-family: "IBM Plex Mono"; font-size: 16dp; }
|
||||
|
||||
.cards { display: flex; flex-direction: row; margin-bottom: 12dp; }
|
||||
.card
|
||||
{
|
||||
flex: 1;
|
||||
border: 2dp #24405c;
|
||||
border-radius: 3dp;
|
||||
background-color: #122033;
|
||||
padding: 12dp;
|
||||
margin-right: 10dp;
|
||||
}
|
||||
.card.last { margin-right: 0; }
|
||||
.card .t
|
||||
{
|
||||
font-family: "Saira SemiCondensed";
|
||||
font-size: 16dp;
|
||||
letter-spacing: 1dp;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.card .p { font-family: "IBM Plex Mono"; color: #f2b13c; margin: 4dp 0; }
|
||||
.card .d { font-size: 13dp; color: #8197ad; margin-bottom: 10dp; }
|
||||
|
||||
.blocked
|
||||
{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #8197ad;
|
||||
}
|
||||
.blocked .t { font-family: "Saira SemiCondensed"; font-size: 22dp; color: #dbe6f0; margin-bottom: 6dp; }
|
||||
|
||||
/* the running light along an open window's frame (FL's windows have one): four strips the host
|
||||
adds to every body.window (rem_ui_host.cpp), each lit in turn -- top left to right, right top
|
||||
to bottom, bottom right to left, left bottom to top */
|
||||
@keyframes run-top { 0% { left: 0%; opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { left: 76%; opacity: 0; } 100% { left: 76%; opacity: 0; } }
|
||||
@keyframes run-right { 0% { top: 0%; opacity: 0; } 25% { top: 0%; opacity: 0; } 27% { opacity: 1; } 48% { opacity: 1; } 50% { top: 76%; opacity: 0; } 100% { top: 76%; opacity: 0; } }
|
||||
@keyframes run-bottom { 0% { left: 76%; opacity: 0; } 50% { left: 76%; opacity: 0; } 52% { opacity: 1; } 73% { opacity: 1; } 75% { left: 0%; opacity: 0; } 100% { left: 0%; opacity: 0; } }
|
||||
@keyframes run-left { 0% { top: 76%; opacity: 0; } 75% { top: 76%; opacity: 0; } 77% { opacity: 1; } 98% { opacity: 1; } 100% { top: 0%; opacity: 0; } }
|
||||
.runner { position: absolute; left: -1dp; top: -1dp; right: -1dp; bottom: -1dp; pointer-events: none; }
|
||||
.runner .rt, .runner .rr, .runner .rb, .runner .rl { position: absolute; opacity: 0; }
|
||||
.runner .rt { top: 0; height: 3dp; width: 24%; left: 0%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
|
||||
.runner .rr { right: 0; width: 3dp; height: 24%; top: 0%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
|
||||
.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 76%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
|
||||
.runner .rl { left: 0; width: 3dp; height: 24%; top: 76%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
|
||||
.runner .rt { top: 0; height: 3dp; width: 24%; left: -24%; decorator: horizontal-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-top; }
|
||||
.runner .rr { right: 0; width: 3dp; height: 24%; top: -24%; decorator: vertical-gradient(#5cc8f000 #dcf6ff); animation: 8s linear infinite run-right; }
|
||||
.runner .rb { bottom: 0; height: 3dp; width: 24%; left: 100%; decorator: horizontal-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-bottom; }
|
||||
.runner .rl { left: 0; width: 3dp; height: 24%; top: 100%; decorator: vertical-gradient(#dcf6ff #5cc8f000); animation: 8s linear infinite run-left; }
|
||||
|
||||
/* a hovered bar icon turning (nnbar, rembar) */
|
||||
@keyframes nb-spin { from { transform: perspective(240dp) rotateY(0deg) scale(1.12); } to { transform: perspective(240dp) rotateY(360deg) scale(1.12); } }
|
||||
@@ -0,0 +1,30 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>REM bar</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* only as big as the bar, at the top left: the mouse beside it goes to the game */
|
||||
body.nnstrip { position: absolute; left: 8dp; top: 4dp; width: 400dp; height: 60dp; display: block; background-color: transparent; pointer-events: none; }
|
||||
.nnbar { pointer-events: auto; position: absolute; top: 0; left: 0; display: flex; flex-direction: row; align-items: center; padding: 3dp 4dp; background-color: #070b12e6; border: 2dp #3d6d96; border-radius: 4dp; }
|
||||
.nb { width: 40dp; padding: 3dp 5dp; margin: 0 1dp; border: 1dp #00000000; border-radius: 3dp; position: relative; }
|
||||
.nb:hover { border-color: #5cc8f0; background-color: #122033; }
|
||||
.nb.active { border-color: #f2b13c; background-color: #f2b13c1f; }
|
||||
.nb img { width: 30dp; height: 30dp; display: block; image-color: #8fb8d8; }
|
||||
.nb:hover img { image-color: #5cc8f0; animation: 1.6s linear infinite nb-spin; }
|
||||
/* REM: as FL's NeuroNet icons, the hovered one turns about its upright axis */
|
||||
.nb { transition: background-color border-color 0.15s cubic-out; }
|
||||
.nb img { transform: perspective(240dp) rotateY(0deg) scale(1); transition: transform 0.2s cubic-out; }
|
||||
.nb.active img { image-color: #f2b13c; }
|
||||
.nb .tip { top: 40dp; left: 0; right: auto; bottom: auto; width: 230dp; white-space: normal; }
|
||||
.nb:hover .tip { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="nnstrip" data-model="rembar">
|
||||
<div class="nnbar" data-if="shown" data-style-width="icons.size * 42 + 12 + 'dp'">
|
||||
<div class="nb" data-for="i : icons" data-class-active="i.active" data-action="nn" data-attr-data-arg="i.cmd">
|
||||
<img data-attr-src="i.icon"/>
|
||||
<div class="tip" data-if="i.label != ''">{{ i.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,63 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Repair</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-height: 0; }
|
||||
.item { display: flex; flex-direction: row; align-items: center; padding: 8dp 10dp; margin-bottom: 6dp; border: 1dp #24405c; border-left: 2dp #24405c; border-radius: 3dp; background-color: #122033; }
|
||||
.item:hover { border-color: #5cc8f0; }
|
||||
.item.selected { border-left-color: #f2b13c; }
|
||||
.item .check { width: 16dp; height: 16dp; border: 2dp #3d6d96; border-radius: 3dp; margin-right: 12dp; }
|
||||
.item.selected .check { background-color: #f2b13c; border-color: #f2b13c; }
|
||||
.item img { width: 34dp; height: 34dp; margin-right: 12dp; }
|
||||
.item .mid { flex: 1; min-width: 0; }
|
||||
.item .n { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 16dp; margin-bottom: 5dp; }
|
||||
.item .hp { font-family: "IBM Plex Mono"; color: #8197ad; width: 60dp; text-align: right; margin-right: 14dp; }
|
||||
.item .cost { font-family: "IBM Plex Mono"; color: #f2b13c; width: 130dp; text-align: right; }
|
||||
.list { flex: 1; overflow-y: auto; }
|
||||
.sum { display: flex; flex-direction: row; align-items: center; border-top: 1dp #24405c; padding-top: 12dp; margin-top: 8dp; }
|
||||
.sum .k { font-family: "Saira SemiCondensed"; letter-spacing: 1.1dp; text-transform: uppercase; color: #8197ad; margin-right: 10dp; }
|
||||
.sum .v { font-family: "IBM Plex Mono"; font-size: 20dp; color: #f2b13c; margin-right: 24dp; }
|
||||
.sum .btn { margin: 0 0 0 auto; }
|
||||
.warn { color: #ef6a5b; margin-right: 14dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="repair">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_construction.3db"/>
|
||||
<span class="title">REPAIR</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="colm">
|
||||
<div style="display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp;"><h3>What needs repair</h3><div class="btn" style="margin: 0 0 0 auto;" data-action="all">All / none</div></div>
|
||||
<div class="list">
|
||||
<div class="hint" data-if="rows.size == 0">Your ship is in perfect shape.</div>
|
||||
<div class="item" data-for="r : rows" data-class-selected="r.selected" data-action="toggle" data-attr-data-arg="r.key">
|
||||
<div class="check"></div>
|
||||
<img data-attr-src="r.icon"/>
|
||||
<div class="mid">
|
||||
<div class="n">{{ r.name }}</div>
|
||||
<div class="bar"><div class="fill" data-class-warn="r.health < 75" data-class-bad="r.health < 40" data-style-width="r.health + '%'"></div></div>
|
||||
</div>
|
||||
<span class="hp">{{ r.health }} %</span>
|
||||
<span class="cost">{{ r.cost }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sum">
|
||||
<span class="k">Total</span><span class="v">{{ total }}</span>
|
||||
<span class="warn" data-if="too_much">Not enough credits</span>
|
||||
<div class="btn primary" data-class-disabled="too_much || nothing" data-action="repair">Repair<div class="tip">Repairs the checked parts and pays the total.</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>
|
||||
@@ -0,0 +1,59 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Scanner</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.view { flex: 0 0 40%; margin-right: 18dp; }
|
||||
.colm.list { flex: 1; }
|
||||
#ship { flex: 1; border: 1dp #24405c; border-radius: 3dp; decorator: vertical-gradient(#0a1424 #05080d); cursor: move; }
|
||||
.ship-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 22dp; margin-bottom: 6dp; }
|
||||
.items { flex: 1; overflow-y: auto; }
|
||||
.grp { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 13dp; letter-spacing: 1.5dp; text-transform: uppercase; color: #f2b13c; margin: 8dp 0 6dp 0; }
|
||||
.item { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; }
|
||||
.item img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.item .n { flex: 1; min-width: 0; font-size: 14dp; }
|
||||
.item .x { font-family: "IBM Plex Mono"; font-size: 12dp; color: #ef6a5b; margin-right: 10dp; }
|
||||
.item .c { font-family: "IBM Plex Mono"; width: 50dp; text-align: right; color: #8197ad; }
|
||||
.item .v { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="scanner">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
|
||||
<span class="title">SCAN</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Value <span class="v">{{ total }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm view">
|
||||
<div class="ship-name">{{ ship }}</div>
|
||||
<div id="ship"></div>
|
||||
</div>
|
||||
<div class="colm list">
|
||||
<div class="items">
|
||||
<div class="grp">Cargo ({{ cargo.size }})</div>
|
||||
<div class="hint" data-if="cargo.size == 0">The hold is empty.</div>
|
||||
<div class="item" data-for="i : cargo">
|
||||
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span>
|
||||
<span class="x" data-if="i.note != ''">{{ i.note }}</span><span class="c">{{ i.count }}</span><span class="v">{{ i.value }}</span>
|
||||
</div>
|
||||
<div class="grp">Mounted ({{ mounted.size }})</div>
|
||||
<div class="item" data-for="i : mounted">
|
||||
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span>
|
||||
<span class="x" data-if="i.note != ''">{{ i.note }}</span><span class="c">{{ i.count }}</span><span class="v">{{ i.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<span class="key">Esc</span><span class="hint">close</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,83 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Servers</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; margin-top: 10dp; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.side { flex: 0 0 34%; margin-left: 18dp; }
|
||||
.bar { display: flex; flex-direction: row; align-items: center; min-height: 36dp; margin-bottom: 6dp; }
|
||||
.bar .search { flex: 1; margin-right: 10dp; min-width: 0; }
|
||||
.bar .search input.text { display: block; width: 100%; }
|
||||
.bar .chip { margin-left: 6dp; }
|
||||
.chip.on { border-color: #f2b13c; color: #f2b13c; }
|
||||
.table .c1 img { width: 14dp; height: 14dp; margin-left: 6dp; }
|
||||
.table .c2 { width: 26%; font-family: "IBM Plex Mono"; font-size: 12dp; color: #8197ad; }
|
||||
.table .c3 { width: 90dp; }
|
||||
.table .c4 { width: 80dp; margin-right: 0; }
|
||||
.table .head span { cursor: pointer; }
|
||||
.table .head span:hover { color: #5cc8f0; }
|
||||
.table .head span.sorted { color: #f2b13c; }
|
||||
.table .row.old { color: #5d6e80; }
|
||||
.table .row.full .c3 { color: #e05a4f; }
|
||||
.table .row .tag { font-family: "IBM Plex Mono"; font-size: 11dp; color: #5cc8f0; margin-left: 8dp; }
|
||||
.facts { white-space: pre-line; font-family: "IBM Plex Mono"; font-size: 13dp; line-height: 1.5; color: #8197ad; margin-bottom: 10dp; }
|
||||
.desc { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.pick-name { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 21dp; margin-bottom: 6dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="serverlist">
|
||||
<div class="win-head">
|
||||
<span class="title">{{ title }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Shown <span class="v">{{ rows.size }}</span> / <span class="v">{{ total }}</span></span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="bar">
|
||||
<div class="search"><input class="text" type="text" data-value="search" placeholder="Search name or address" maxlength="48"/></div>
|
||||
<span class="chip" data-class-on="hide_full" data-action="toggle" data-arg="full">Hide full</span>
|
||||
<span class="chip" data-class-on="hide_locked" data-action="toggle" data-arg="locked">Hide locked</span>
|
||||
<span class="chip" data-class-on="known_only" data-action="toggle" data-arg="known">My servers</span>
|
||||
</div>
|
||||
<div class="split">
|
||||
<div class="colm">
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head">
|
||||
<span class="c1" data-class-sorted="sort == 1 || sort == -1" data-action="sort" data-arg="1">Server</span>
|
||||
<span class="c2">Address</span>
|
||||
<span class="c3" data-class-sorted="sort == 2 || sort == -2" data-action="sort" data-arg="2">Players</span>
|
||||
<span class="c4" data-class-sorted="sort == 3 || sort == -3" data-action="sort" data-arg="3">Ping</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="rows.size == 0">No servers yet. {{ status }}</div>
|
||||
<div class="row" data-for="r : rows" data-class-selected="r.selected" data-class-old="r.old" data-class-full="r.full" data-action="pick" data-attr-data-arg="r.key">
|
||||
<span class="c1">{{ r.name }}<span class="tag" data-if="r.locked">LOCK</span><span class="tag" data-if="r.known">CHAR</span></span>
|
||||
<span class="c2">{{ r.address }}</span>
|
||||
<span class="c3">{{ r.players }}</span>
|
||||
<span class="c4">{{ r.ping }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm side">
|
||||
<div data-if="has_pick">
|
||||
<div class="pick-name">{{ pick_name }}</div>
|
||||
<div class="facts">{{ pick_facts }}</div>
|
||||
</div>
|
||||
<div class="desc" data-if="has_pick">{{ pick_text }}</div>
|
||||
<div class="hint" data-if="!has_pick">Pick a server. A double click joins it.</div>
|
||||
<div class="actions" style="margin-top: 12dp;">
|
||||
<div class="btn primary" data-class-disabled="!can_connect" data-action="connect">Connect<div class="tip">Joins the picked server; a locked one asks for its password.</div></div>
|
||||
<div class="btn" data-action="refresh">Refresh<div class="tip">Asks the list server again.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot">
|
||||
<div class="btn" data-action="back">Back</div>
|
||||
<span class="status">{{ status }}</span>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,91 @@
|
||||
<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>
|
||||
@@ -0,0 +1,36 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Story</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.tabs { display: flex; flex-direction: row; margin-bottom: 10dp; }
|
||||
.tab { padding: 5dp 14dp; margin-right: 6dp; border: 1dp #24405c; border-radius: 12dp; font-size: 12dp; letter-spacing: 1dp; text-transform: uppercase; color: #8197ad; }
|
||||
.tab:hover { border-color: #5cc8f0; color: #5cc8f0; }
|
||||
.tab.primary { border-color: #f2b13c; color: #f2b13c; }
|
||||
.story { flex: 1; overflow-y: auto; white-space: pre-line; line-height: 1.5; font-size: 15dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.dead { font-family: "Saira SemiCondensed"; font-weight: 700; font-size: 26dp; letter-spacing: 3dp; color: #ef6a5b; margin-bottom: 10dp; }
|
||||
.acts { display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 12dp; }
|
||||
.acts .btn { margin: 0 8dp 8dp 0; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window medium" data-model="storystar">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/NN_storystar.3db"/>
|
||||
<span class="title">{{ dead ? 'SHIP LOST' : 'MISSION LOG' }}</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-if="can_close" data-action="btn" data-arg="8">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content" style="display: flex; flex-direction: column;">
|
||||
<div class="dead" data-if="dead">Your ship was destroyed.</div>
|
||||
<div class="tabs" data-if="tabs.size > 0">
|
||||
<div class="tab" data-for="t : tabs" data-class-primary="t.primary" data-action="btn" data-attr-data-arg="t.key">{{ t.label }}</div>
|
||||
</div>
|
||||
<div class="story">{{ text }}</div>
|
||||
<div class="acts" data-if="buttons.size > 0">
|
||||
<div class="btn" data-for="b : buttons" data-class-primary="b.primary" data-action="btn" data-attr-data-arg="b.key">{{ b.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,28 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Tool tip</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
/* no box of its own: only the tip, at the point NN_ToolTip gives */
|
||||
body.tipdoc { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: block; background-color: transparent; pointer-events: none; }
|
||||
.ftip
|
||||
{
|
||||
position: absolute;
|
||||
max-width: 380dp;
|
||||
padding: 5dp 9dp;
|
||||
background-color: #0d1622f2;
|
||||
border: 2dp #3d6d96;
|
||||
border-left: 2dp #f2b13c;
|
||||
border-radius: 3dp;
|
||||
font-size: 13dp;
|
||||
color: #dbe6f0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ftip.roll { border-left-color: #5cc8f0; font-size: 14dp; white-space: pre-line; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="tipdoc" data-model="tooltip">
|
||||
<div class="ftip" data-if="tip_shown" data-style-left="tip_left" data-style-top="tip_top">{{ tip_text }}</div>
|
||||
<div class="ftip roll" data-if="roll_shown" data-style-left="roll_left" data-style-top="roll_top">{{ roll_text }}</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,87 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Trade</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; }
|
||||
.state { font-size: 12dp; margin-bottom: 6dp; color: #ef6a5b; }
|
||||
.state.ok { color: #7cf27c; }
|
||||
.lst { flex: 1; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; background-color: #0d1622; }
|
||||
.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.ro:hover { background-color: transparent; }
|
||||
.it img { width: 28dp; height: 28dp; margin-right: 8dp; }
|
||||
.it .n { flex: 1; min-width: 0; font-size: 14dp; }
|
||||
.it .c { font-family: "IBM Plex Mono"; font-size: 12dp; color: #f2b13c; }
|
||||
.move { margin-top: 12dp; padding: 12dp; border: 1dp #24405c; border-left: 3dp #f2b13c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
|
||||
.move .t { flex: 1; }
|
||||
.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 .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="trade">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_cargo.3db"/>
|
||||
<span class="title">TRADE</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="close" data-action="cancel">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content" style="display: flex; flex-direction: column;">
|
||||
<div class="cols">
|
||||
<div class="col">
|
||||
<h3>They offer</h3>
|
||||
<div class="state" data-class-ok="they_accept">{{ they_accept ? 'They accepted' : 'Not accepted yet' }}</div>
|
||||
<div class="lst">
|
||||
<div class="hint" style="padding: 10dp;" data-if="theirs.size == 0">Nothing offered yet.</div>
|
||||
<div class="it ro" data-for="i : theirs">
|
||||
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h3>You offer</h3>
|
||||
<div class="state" data-class-ok="i_accept">{{ i_accept ? 'You accepted' : 'Not accepted yet' }}</div>
|
||||
<div class="lst">
|
||||
<div class="hint" style="padding: 10dp;" data-if="mine.size == 0">Pick from your cargo to offer.</div>
|
||||
<div class="it" data-for="i : mine" data-class-picked="i.picked" data-action="pickmine" data-attr-data-arg="i.key">
|
||||
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col last">
|
||||
<h3>Your cargo</h3>
|
||||
<div class="state" style="color: #8197ad;">Click to offer</div>
|
||||
<div class="lst">
|
||||
<div class="it" data-for="i : cargo" data-class-picked="i.picked" data-action="pickcargo" data-attr-data-arg="i.key">
|
||||
<img data-if="i.icon != ''" data-attr-src="i.icon"/><span class="n">{{ i.name }}</span><span class="c">{{ i.count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="move" data-if="moving">
|
||||
<div class="t"><div class="n">{{ moving_name }}</div><div class="a">{{ amount_text }}</div></div>
|
||||
<div class="btn" data-action="none">Min</div>
|
||||
<div class="btn" data-action="less">-</div>
|
||||
<div class="btn" data-action="more">+</div>
|
||||
<div class="btn" data-action="all">Max</div>
|
||||
<div class="btn primary" data-action="move">{{ to_offer ? 'Offer' : 'Take back' }}</div>
|
||||
<div class="btn" data-action="back">Cancel</div>
|
||||
</div>
|
||||
<div class="foot2">
|
||||
<span class="hint">Both pilots accept to trade. Any change of an offer resets the acceptance.</span>
|
||||
<div class="btn" data-action="cancel">End trade</div>
|
||||
<div class="btn primary" data-class-disabled="i_accept" data-action="accept">Accept trade</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</rml>
|
||||
@@ -0,0 +1,87 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Commodity trader</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.split { flex: 1; display: flex; flex-direction: row; min-height: 0; }
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.colm.gap { margin-right: 18dp; }
|
||||
.col-h { display: flex; flex-direction: row; align-items: center; margin-bottom: 8dp; }
|
||||
.col-h .hint { margin-left: auto; }
|
||||
.list { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 1dp #24405c; border-radius: 3dp; }
|
||||
.good { display: flex; flex-direction: row; align-items: center; padding: 6dp 10dp; border-bottom: 1dp #ffffff08; border-left: 2dp #00000000; }
|
||||
.good:hover { background-color: #122033; }
|
||||
.good.selected { background-color: #f2b13c24; border-left-color: #f2b13c; }
|
||||
.good.disabled .n, .good.disabled .p { color: #8197ad; }
|
||||
.good img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.good .n { flex: 1; font-size: 15dp; }
|
||||
.good .note { font-size: 12dp; color: #8197ad; margin-right: 10dp; }
|
||||
.good .c { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; color: #8197ad; }
|
||||
.good .p { font-family: "IBM Plex Mono"; width: 110dp; text-align: right; color: #f2b13c; }
|
||||
.deal { margin-top: 14dp; padding: 12dp; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; display: flex; flex-direction: row; align-items: center; }
|
||||
.deal img { width: 48dp; height: 48dp; margin-right: 14dp; }
|
||||
.deal .what { width: 260dp; }
|
||||
.deal .what .t { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 18dp; }
|
||||
.deal .amount { flex: 1; display: flex; flex-direction: row; align-items: center; margin: 0 14dp; }
|
||||
.deal .amount .v { font-family: "IBM Plex Mono"; width: 80dp; text-align: right; margin-left: 10dp; }
|
||||
.deal .sum { font-family: "IBM Plex Mono"; font-size: 18dp; color: #f2b13c; width: 150dp; text-align: right; margin-right: 14dp; }
|
||||
.deal .btn { margin: 0; }
|
||||
.why { color: #ef6a5b; margin-right: 14dp; }
|
||||
.search { margin-bottom: 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window" data-model="trader">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/REM/IMAGES/icon_economy.3db"/>
|
||||
<span class="title">COMMODITY TRADER</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Hold <span class="v">{{ hold }}</span></span>
|
||||
<span class="chip">Credits <span class="v">{{ credits }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="split">
|
||||
<div class="colm gap">
|
||||
<div class="col-h"><h3>For sale here</h3><span class="hint">{{ market.size }} goods</span></div>
|
||||
<input class="text search" type="text" data-value="filter" maxlength="40"/>
|
||||
<div class="list">
|
||||
<div class="empty hint" style="padding: 10dp;" data-if="market.size == 0">Nothing for sale here.</div>
|
||||
<div class="good" data-for="r : market" data-class-selected="r.selected" data-action="buy-pick" data-attr-data-arg="r.key">
|
||||
<img data-if="r.icon != ''" data-attr-src="r.icon"/><span class="n">{{ r.name }}</span><span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colm">
|
||||
<div class="col-h"><h3>Your cargo</h3><span class="hint">hold {{ hold }}</span></div>
|
||||
<div class="list">
|
||||
<div class="empty hint" style="padding: 10dp;" data-if="cargo.size == 0">Your hold carries no goods.</div>
|
||||
<div class="good" data-for="r : cargo" data-class-selected="r.selected" data-class-disabled="r.disabled" data-action="sell-pick" data-attr-data-arg="r.key">
|
||||
<img data-if="r.icon != ''" data-attr-src="r.icon"/><span class="n">{{ r.name }}</span><span class="note">{{ r.note }}</span><span class="c">{{ r.count }}</span><span class="p">{{ r.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="deal">
|
||||
<img data-if="has_pick && pick.icon != ''" data-attr-src="pick.icon"/>
|
||||
<div class="what">
|
||||
<div class="label">{{ side == 0 ? 'Buy' : 'Sell' }}</div>
|
||||
<div class="t">{{ has_pick ? pick.name : 'Pick a good' }}</div>
|
||||
</div>
|
||||
<div class="amount">
|
||||
<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" style="margin-left: 10dp; padding: 3dp 10dp;" data-action="max">Max</div>
|
||||
</div>
|
||||
<span class="why" data-if="reason != ''">{{ reason }}</span>
|
||||
<span class="sum">{{ total }}</span>
|
||||
<div class="btn primary" data-class-disabled="!has_pick || reason != ''" data-action="deal">{{ side == 0 ? 'Buy' : 'Sell' }}<div class="tip">{{ side == 0 ? 'Buys the amount into your cargo hold.' : 'Sells the amount from your cargo hold.' }}</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>
|
||||
@@ -0,0 +1,51 @@
|
||||
<rml>
|
||||
<head>
|
||||
<title>Waypoints</title>
|
||||
<link type="text/rcss" href="rem.rcss"/>
|
||||
<style>
|
||||
.colm { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
|
||||
.state-line { display: flex; flex-direction: row; margin-bottom: 12dp; }
|
||||
.state-box { flex: 1; border: 1dp #24405c; border-radius: 3dp; background-color: #122033; padding: 10dp 12dp; margin-right: 10dp; display: flex; flex-direction: row; align-items: center; }
|
||||
.state-box.last { margin-right: 0; }
|
||||
.state-box img { width: 30dp; height: 30dp; margin-right: 10dp; }
|
||||
.state-box .v { font-family: "Saira SemiCondensed"; font-size: 17dp; }
|
||||
.state-box.on .v { color: #5fd08a; }
|
||||
.row .c1 img { width: 18dp; height: 18dp; margin-right: 8dp; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="window small" data-model="waypoints">
|
||||
<div class="win-head">
|
||||
<img class="head-ico" src="3db:INTERFACE/NEURONET/ICONS/rem_waypoints.3db"/>
|
||||
<span class="title">GROUP WAYPOINTS</span>
|
||||
<span class="spacer"></span>
|
||||
<span class="chip">Mine <span class="v">{{ my_count }}</span></span>
|
||||
<span class="close" data-action="close">×</span>
|
||||
</div>
|
||||
<div class="win-main">
|
||||
<div class="content">
|
||||
<div class="colm">
|
||||
<div class="state-line">
|
||||
<div class="state-box" data-class-on="sharing"><img src="3db:INTERFACE/REM/IMAGES/icon_waypoint_own.3db"/><div><div class="label">Sharing</div><div class="v">{{ sharing ? 'On - the group sees yours' : 'Off' }}</div></div></div>
|
||||
<div class="state-box last" data-class-on="following != ''"><img src="3db:INTERFACE/REM/IMAGES/icon_waypoint.3db"/><div><div class="label">Following</div><div class="v">{{ following == '' ? 'Nobody' : following }}</div></div></div>
|
||||
</div>
|
||||
<h3 style="margin-bottom: 8dp;">Group members</h3>
|
||||
<div class="table" style="flex: 1;">
|
||||
<div class="head"><span class="c1">Pilot</span><span class="c2">Shared</span></div>
|
||||
<div class="body">
|
||||
<div class="empty" data-if="members.size == 0">Nobody in your group shares waypoints.</div>
|
||||
<div class="row" data-for="r : members" data-class-selected="r.selected" data-class-current="r.current" data-action="pick" data-attr-data-arg="r.key">
|
||||
<span class="c1"><img src="3db:INTERFACE/REM/IMAGES/icon_waypoint.3db"/>{{ r.a }}</span><span class="c2">{{ r.b }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="actions" style="margin-top: 10dp;">
|
||||
<div class="btn primary" data-action="share">{{ sharing ? 'Stop sharing' : 'Share mine' }}<div class="tip">Your waypoints go to your group while sharing is on.</div></div>
|
||||
<div class="btn" data-action="load">Take over<div class="tip">Takes the picked member's waypoints over once.</div></div>
|
||||
<div class="btn" data-action="follow">{{ following == '' ? 'Follow' : 'Stop following' }}<div class="tip">Keeps taking the picked member's waypoints over every 2 seconds.</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="win-foot"><span class="key">Esc</span><span class="hint">close</span></div>
|
||||
</body>
|
||||
</rml>
|
||||
Reference in New Issue
Block a user