109 lines
8.9 KiB
Plaintext
109 lines
8.9 KiB
Plaintext
<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; }
|
|
.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; decorator: vertical-gradient(#0a1424 #05080d); margin-bottom: 12dp; }
|
|
.card { height: 180dp; overflow-y: auto; white-space: pre-line; line-height: 1.45; padding: 12dp; background-color: #5cc8f008; }
|
|
.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 .abar { margin-right: 10dp; }
|
|
/* as the equipment dealer's list: the ship's hardpoints (what sits on each, the empty ones dim), what is mounted
|
|
without one, the hold -- not mounted, an amber edge; the hold's bar over the list (rem.rcss .dstat) */
|
|
.sec { display: flex; flex-direction: row; align-items: center; margin: 12dp 0 4dp 0; padding-bottom: 3dp; border-bottom: 1dp #2b6f9e; font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 12dp; letter-spacing: 2dp; color: #5cc8f0; }
|
|
.sec:first-child { margin-top: 0; }
|
|
.sec .cnt { margin-left: auto; font-family: "IBM Plex Mono"; font-weight: 400; letter-spacing: 0; color: #8197ad; }
|
|
.sec.held { color: #f2b13c; border-bottom-color: #f2b13c66; }
|
|
.inv .slot { font-family: "Saira SemiCondensed"; font-weight: 600; font-size: 10dp; letter-spacing: 1dp; text-transform: uppercase; white-space: nowrap; color: #8fb3d0; }
|
|
.inv.empty .n { color: #5c7a94; }
|
|
.inv.empty .txt { margin-left: 40dp; }
|
|
.inv.held { border-left-color: #f2b13c66; }
|
|
.inv.held.selected { border-left-color: #f2b13c; }
|
|
.holdrow { display: flex; flex-direction: row; margin-bottom: 8dp; }
|
|
.holdrow .dstat { margin-left: 0; }
|
|
.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="sl">\\\</span>
|
|
<span class="spacer"></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">
|
|
<div class="holdrow"><div class="dstat"><span class="sk">HOLD</span><div class="hbar"><div class="hf" data-class-warn="hold_pct >= 75" data-class-bad="hold_pct >= 100" data-style-width="hold_pct + '%'"></div><span class="ht">{{ hold }}</span></div></div></div>
|
|
<input class="text search" type="text" data-value="search" maxlength="40" style="margin-bottom: 8dp;"/>
|
|
<div class="list">
|
|
<div class="sec" data-if="hps.size > 0">HARDPOINTS<span class="cnt">{{ hp_used }} / {{ hps.size }}</span></div>
|
|
<div class="inv" data-for="r : hps" data-class-empty="r.key == ''" 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.key == '' ? 'empty' : r.name }}</div><div class="slot">{{ r.slot }}</div></div>
|
|
<span class="c">{{ r.note }}</span>
|
|
</div>
|
|
<div class="sec" data-if="inside.size > 0">MOUNTED, NO HARDPOINT</div>
|
|
<div class="inv" data-for="r : inside" 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" data-if="r.note != ''">{{ r.note }}</div></div>
|
|
<span class="c">{{ r.count }}</span>
|
|
</div>
|
|
<div class="sec held">CARGO HOLD · NOT MOUNTED<span class="cnt">{{ items.size }}</span></div>
|
|
<div class="hint" style="padding: 10dp;" data-if="items.size == 0">Nothing in the hold.</div>
|
|
<div class="inv held" 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" data-if="r.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="mount_label != ''"><div class="btn primary" data-action="mount">{{ mount_label }}<div class="tip">{{ mount_tip }}</div></div></div>
|
|
<div class="jet" data-if="can_jettison">
|
|
<div class="abar" data-scrub="amount-at" data-class-off="amount_max <= 1">
|
|
<div class="arail"><div class="afill" data-style-width="amount_max > 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div><div class="tk" style="left: 25%;"></div><div class="tk" style="left: 50%;"></div><div class="tk" style="left: 75%;"></div><div class="aknob" data-style-left="amount_max > 1 ? (amount - 1) * 100 / (amount_max - 1) + '%' : '100%'"></div></div>
|
|
<div class="aticks" data-if="amount_max > 1"><span class="lo" style="left: 0;">1</span><span style="left: 25%;" data-if="amount_max >= 5">{{ 1 + (amount_max - 1) / 4 | format(0) }}</span><span style="left: 50%;" data-if="amount_max >= 3">{{ 1 + (amount_max - 1) / 2 | format(0) }}</span><span style="left: 75%;" data-if="amount_max >= 5">{{ 1 + (amount_max - 1) * 3 / 4 | format(0) }}</span><span class="hi">{{ amount_max }}</span></div>
|
|
</div>
|
|
<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>
|