mirror of
https://github.com/EDCD/coriolis.git
synced 2025-12-09 14:45:35 +00:00
275 lines
13 KiB
HTML
275 lines
13 KiB
HTML
<div id="outfit">
|
|
|
|
<div id="overview">
|
|
<h1 ng-bind="ship.name"></h1>
|
|
<div id="build">
|
|
<input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" maxsize="50" />
|
|
<button ng-click="saveBuild()" ng-disabled="!buildName || savedCode && code == savedCode || !canSave">
|
|
<svg class="icon lg "><use xlink:href="#floppy-disk"></use></svg><span class="button-lbl">Save</span>
|
|
</button>
|
|
<button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">
|
|
<svg class="icon lg"><use xlink:href="#spinner11"></use></svg><span class="button-lbl">Reload</span>
|
|
</button>
|
|
<button class="danger" ng-click="deleteBuild()" ng-disabled="!savedCode">
|
|
<svg class="icon lg"><use xlink:href="#bin"></use></svg>
|
|
</button>
|
|
<button ui-sref="outfit({shipId: ship.id,code:null, bn: buildName})" ng-disabled="!code">
|
|
<svg class="icon lg"><use xlink:href="#switch"></use></svg><span class="button-lbl">Reset</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="summary">
|
|
<table id="summaryTable">
|
|
<thead>
|
|
<tr class="main">
|
|
<th rowspan="2">Size</th>
|
|
<th rowspan="2">Agility</th>
|
|
<th rowspan="2">Speed</th>
|
|
<th rowspan="2">Boost</th>
|
|
<th rowspan="2">Armour</th>
|
|
<th rowspan="2">Shields</th>
|
|
<th colspan="2">Mass</th>
|
|
<th rowspan="2">Cargo</th>
|
|
<th rowspan="2">Fuel</th>
|
|
<th colspan="3">Jump Range</th>
|
|
<th colspan="3">Total Range</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="lft">Unladen</th>
|
|
<th>Laden</th>
|
|
<th class="lft">Max</th>
|
|
<th>Full Tank</th>
|
|
<th>Laden</th>
|
|
<th class="lft">Jumps</th>
|
|
<th>Unladen</th>
|
|
<th>Laden</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td ng-bind="SZ[ship.class]"></td>
|
|
<td>{{ship.agility}}/10</td>
|
|
<td>{{fRound(ship.speed)}} <u>m/s</u></td>
|
|
<td>{{fRound(ship.boost)}} <u>m/s</u></td>
|
|
<td>{{ship.armourTotal}} <span ng-if="ship.armourAdded">({{ship.armour}} + {{ship.armourAdded}})</span></td>
|
|
<td>{{fRound(ship.shieldStrength)}} <u>MJ</u> <span ng-if="ship.shieldMultiplier > 1">({{fRPct(ship.shieldMultiplier)}})</span></td>
|
|
<td>{{fRound(ship.unladenMass)}} <u>T</u></td>
|
|
<td>{{fRound(ship.ladenMass)}} <u>T</u></td>
|
|
<td>{{fRound(ship.cargoCapacity)}} <u>T</u></td>
|
|
<td>{{fRound(ship.fuelCapacity)}} <u>T</u></td>
|
|
<td>{{fRound(ship.unladenRange)}} <u>LY</u></td>
|
|
<td>{{fRound(ship.fullTankRange)}} <u>LY</u></td>
|
|
<td>{{fRound(ship.ladenRange)}} <u>LY</u></td>
|
|
<td>{{fRound(ship.maxJumpCount)}}</td>
|
|
<td>{{fRound(ship.unladenTotalRange)}} <u>LY</u></td>
|
|
<td>{{fRound(ship.ladenTotalRange)}} <u>LY</u></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div id="standard" class="group">
|
|
<h1>Standard</h1>
|
|
<div class="slot" ng-click="selectSlot($event, ship.bulkheads)" ng-class="{selected: selectedSlot==ship.bulkheads}">
|
|
<div class="details">
|
|
<div class="sz"><span>8</span></div>
|
|
<div class="l">Bulkheads</div>
|
|
<div class="r">{{ship.bulkheads.c.mass}} <u>T</u></div>
|
|
<div class="cl l">{{ship.bulkheads.c.name}}</div>
|
|
</div>
|
|
<div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)">
|
|
<ul>
|
|
<li class="lc" ng-class="{active: ship.bulkheads.id=='0'}" cpid="0">Lightweight Alloy</li>
|
|
<li class="lc" ng-class="{active: ship.bulkheads.id=='1'}" cpid="1">Reinforced Alloy</li>
|
|
<li class="lc" ng-class="{active: ship.bulkheads.id=='2'}" cpid="2">Military Grade Composite</li>
|
|
<li class="lc" ng-class="{active: ship.bulkheads.id=='3'}" cpid="3">Mirrored Surface Composite</li>
|
|
<li class="lc" ng-class="{active: ship.bulkheads.id=='4'}" cpid="4">Reactive Surface Composite</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, pp)" ng-class="{selected: selectedSlot==pp}">
|
|
<div class="details">
|
|
<div class="sz">{{::pp.maxClass}}</div>
|
|
<div class="l">{{pp.id}} Power Plant</div>
|
|
<div class="r">{{pp.c.mass}} <u>T</u></div>
|
|
<div class="cb"></div>
|
|
<div class="l">Efficiency: {{pp.c.eff}}</div>
|
|
<div class="l">Power: {{pp.c.pGen}} <u>MW</u></div>
|
|
</div>
|
|
<div component-select class="select" s="pp" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, th)" ng-class="{selected: selectedSlot==th}">
|
|
<div class="details">
|
|
<div class="sz">{{::th.maxClass}}</div>
|
|
<div class="l">{{th.id}} Thrusters</div>
|
|
<div class="r">{{th.c.mass}} <u>T</u></div>
|
|
<div class="cb"></div>
|
|
<div class="l">Optimal Mass: {{th.c.optmass}} <u>T</u></div>
|
|
<div class="l">Max Mass: {{th.c.maxmass}} <u>T</u></div>
|
|
</div>
|
|
<div component-select class="select" s="th" mass="ship.unladenMass" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, fsd)" ng-class="{selected: selectedSlot==fsd}">
|
|
<div class="details">
|
|
<div class="sz">{{::fsd.maxClass}}</div>
|
|
<div class="l">{{fsd.id}} Frame Shift Drive</div>
|
|
<div class="r cr">{{fsd.c.mass}} <u>T</u></div>
|
|
<div class="cb"></div>
|
|
<div class="l">Optimal Mass: {{fsd.c.optmass}} <u>T</u></div>
|
|
<div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
|
|
</div>
|
|
<div component-select class="select" s="fsd" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, ls)" ng-class="{selected: selectedSlot==ls}">
|
|
<div class="details">
|
|
<div class="sz">{{::ls.maxClass}}</div>
|
|
<div class="l">{{ls.id}} Life Support</div>
|
|
<div class="r">{{ls.c.mass}} <u>T</u></div>
|
|
<div class="cb"></div>
|
|
<div class="l">Time: {{fTime(ls.c.time)}}</div>
|
|
</div>
|
|
<div component-select class="select" s="ls" opts="availCS.common[3]" ng-if="selectedSlot==ls" ng-click="select('c',ls,$event)"></div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, pd)" ng-class="{selected: selectedSlot==pd}">
|
|
<div class="details">
|
|
<div class="sz">{{::pd.maxClass}}</div>
|
|
<div class="l">{{pd.id}} Power Distributor</div>
|
|
<div class="r">{{pd.c.mass}} <u>T</u></div>
|
|
<div class="cb"></div>
|
|
<div class="l">WEP: {{pd.c.weaponcapacity}} <u>MJ</u> / {{pd.c.weaponrecharge}} <u>MW</u></div>
|
|
<div class="l">SYS: {{pd.c.systemcapacity}} <u>MJ</u> / {{pd.c.systemrecharge}} <u>MW</u></div>
|
|
<div class="l">ENG: {{pd.c.enginecapacity}} <u>MJ</u> / {{pd.c.enginerecharge}} <u>MW</u></div>
|
|
</div>
|
|
<div component-select class="select" s="pd" opts="availCS.common[4]" ng-if="selectedSlot==pd" ng-click="select('c',pd,$event)"></div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, ss)" ng-class="{selected: selectedSlot==ss}">
|
|
<div class="details">
|
|
<div class="sz">{{::ss.maxClass}}</div>
|
|
<div class="l">{{ss.id}} Sensors</div>
|
|
<div class="r">{{ss.c.mass}} <u>T</u></div>
|
|
<div class="cb"></div>
|
|
<div class="l">Range: {{ss.c.range}} <u>km</u></div>
|
|
</div>
|
|
<div component-select class="select" s="ss" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
|
|
</div>
|
|
<div class="slot" ng-click="selectSlot($event, ft)" ng-class="{selected: selectedSlot==ft}">
|
|
<div class="details">
|
|
<div class="sz">{{::ft.maxClass}}</div>
|
|
<div class="l">{{ft.id}} Fuel Tank</div>
|
|
<div class="r">{{ft.c.capacity}} <u>T</u></div>
|
|
</div>
|
|
<div component-select class="select" s="ft" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="internal" class="group">
|
|
<h1>Internal Compartments</h1>
|
|
<div class="slot" ng-repeat="i in ship.internal" ng-click="selectSlot($event, i)" ng-class="{selected: selectedSlot==i}">
|
|
<div slot-internal class="details" slot="i" lbl="GMAP[i.c.grp]" fuel="ship.fuelCapacity"></div>
|
|
<div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
|
|
<div component-select s="i" groups="availCS.getInts(i.maxClass)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hardpoints" class="group">
|
|
<h1>HardPoints</h1>
|
|
<div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '!0'}" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
|
|
<div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
|
|
<div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
|
|
<div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="utility" class="group">
|
|
<h1>Utility Mounts</h1>
|
|
<div class="slot" ng-repeat="h in ship.hardpoints | filter:{maxClass: '0'}" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
|
|
<div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="GMAP[h.c.grp]"></div>
|
|
<div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
|
|
<div component-select s="h" groups="availCS.getHps(h.maxClass)"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="group dbl" id="componentPriority">
|
|
<table style="width:100%">
|
|
<thead>
|
|
<tr class="main">
|
|
<th colspan="2" class="sortable le" ng-click="sortPwr(cName)">Component</th>
|
|
<th style="width:3em;" class="sortable" ng-click="sortPwr('type')">Type</th>
|
|
<th style="width:4em;" class="sortable" ng-click="sortPwr('priority')">Pri</th>
|
|
<th colspan="2" class="sortable" ng-click="sortPwr('c.power')">Pwr</th>
|
|
<th style="width:3em;" class="sortable" ng-click="sortPwr(statusRetracted)">Ret</th>
|
|
<th style="width:3em;" class="sortable" ng-click="sortPwr(statusDeployed)">Dep</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td ng-click="togglePwr(c)">{{pp.c.class}}{{pp.c.rating}}</td>
|
|
<td class="le shorten">Power Plant</td>
|
|
<td><u>SYS</u></td>
|
|
<td>1</td>
|
|
<td class="ri">{{fPwr(pp.c.pGen)}}</td>
|
|
<td class="ri"><u>100%</u></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr><td style="line-height:0;" colspan="8"><hr style="margin: 0 0 3px;background: #ff8c0d;border: 0;height: 1px;" /></td></tr>
|
|
<tr ng-repeat="c in powerList | orderBy:pwrPredicate:pwrDesc" ng-if="c.c.power" ng-class="{disabled:!c.enabled}">
|
|
<td style="width:1em;" ng-click="togglePwr(c)">{{c.c.class}}{{c.c.rating}}</td>
|
|
<td class="le shorten" ng-click="togglePwr(c)" ng-bind="cName(c)"></td>
|
|
<td ng-click="togglePwr(c)"><u ng-bind="c.type"></u></td>
|
|
<td><span ng-click="decPriority(c)" class="flip">►</span> {{c.priority + 1}} <span ng-click="incPriority(c)">►</span></td>
|
|
<td class="ri" style="width:3.25em;">{{fPwr(c.c.power)}}</td>
|
|
<td class="ri" style="width:3em;"><u>{{f1Pct(c.c.power/ship.powerAvailable)}}</u></td>
|
|
<td ng-if="!c.enabled" class="disabled" colspan="2">DISABLED</td>
|
|
<td ng-if="c.enabled" ng-class="STATUS_CLASS[statusRetracted(c)]">{{STATUS[statusRetracted(c)]}}</td>
|
|
<td ng-if="c.enabled" ng-class="STATUS_CLASS[statusDeployed(c)]">{{STATUS[statusDeployed(c)]}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="margin-top: 1em" power-bands bands="priorityBands" available="ship.powerAvailable"></div>
|
|
</div>
|
|
|
|
<div class="group dbl">
|
|
<table style="width:100%">
|
|
<thead>
|
|
<tr class="main">
|
|
<th colspan="2" class="sortable le" ng-click="sortCost(cName)">Component</th>
|
|
<th class="sortable le" ng-click="sortCost('c.cost')">Credits</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr ng-repeat="c in costList | orderBy:costPredicate:costDesc" ng-if="c.c.cost > 0" ng-class="{disabled:!c.incCost}">
|
|
<td class="toggleable" style="width:1em;" ng-click="toggleCost(c)">{{c.c.class}}{{c.c.rating}}</td>
|
|
<td class="le toggleable shorten" ng-bind="cName(c)" ng-click="toggleCost(c)"></td>
|
|
<td class="ri toggleable" ng-click="toggleCost(c)">{{fCrd(discounts.current.pct * c.c.cost)}} <u>CR</u></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<table class="total">
|
|
<tr class="ri">
|
|
<td class="lbl">Total</td>
|
|
<td>{{fCrd(ship.totalCost * discounts.current.pct)}} <u>CR</u></td>
|
|
</tr>
|
|
<tr class="ri">
|
|
<td class="lbl">Insurance</td>
|
|
<td>{{fCrd(ship.totalCost * discounts.current.pct * insurance.current.pct)}} <u>CR</u></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="group dbl">
|
|
<h1>Jump Range</h1>
|
|
<div class="cen">
|
|
<div area-chart config="jrChart" series="jrSeries"></div>
|
|
<div slider max="ship.fuelCapacity" unit="'T'" on-change="::fuelChange(val)" style="position:relative; margin: 0 auto;">
|
|
<svg class="icon xl primary-disabled" style="position:absolute;height: 100%;"><use xlink:href="#fuel"></use></svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|