More comprehensive changes, UI tweaking

app/views/_header.html

@@ -1,10 +1,17 @@
 <header>
   <div class="l" style="margin-right: 2em;"><a ui-sref="shipyard" class="logo shipyard"></a></div>
 
+  <div class="l menu">
+    <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu('s')">Ships</div>
+    <div class="menu-list" ng-if="openedMenu=='s'">
+      <a class="block" ng-repeat="(shipId,ship) in ships" ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:null, bn:null})">{{::ship.properties.name}}</a>
+    </div>
+  </div>
+
   <div class="l menu">
     <div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu('b')">Builds</div>
     <div class="menu-list" ng-if="openedMenu=='b'">
-      <ul class="left" ng-repeat="(shipId,builds) in allBuilds">
+      <ul class="l" ng-repeat="(shipId,builds) in allBuilds">
         {{ships[shipId].properties.name}}
         <li ng-repeat="(name, build) in builds">
           <a ui-sref-active="active" ui-sref="outfit({shipId:shipId, code:build, bn:name})" ng-bind="name"></a>
@@ -13,9 +20,8 @@
     </div>
   </div>
 
-    <div class="r">
-      <a class="logo github" href="https://github.com/cmmcleod/ed-shipyard" target="_blank" title="Shipyard Github Project"></a>
-      <a class="logo reddit" href="#" target="_blank" title="Reddit Thread"></a>
-    </div>
+  <div class="r">
+    <a class="logo reddit" href="#" target="_blank" title="Reddit Thread"></a>
+  </div>
 
 </header>

app/views/costs.html

@@ -10,7 +10,7 @@
     <div class="lbl">{{c.c.class}}{{c.c.rating}} {{$r.CArr[$index]}}</div><div class="val">{{$r.fCrd(c.c.cost)}}</div>
   </div>
   <div ng-repeat="c in ship.hardpoints" ng-if="c.c.cost" class="item hardpoints" ng-class="{enabled:c.incCost}" ng-click="toggle(c)">
-    <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name}}</div><div class="val">{{$r.fCrd(c.c.cost)}}</div>
+    <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || $r.hgMap[c.c.grp]}}</div><div class="val">{{$r.fCrd(c.c.cost)}}</div>
   </div>
   <div ng-repeat="c in ship.internal" ng-if="c.c.cost" class="item internal" ng-class="{enabled:c.incCost}" ng-click="toggle(c)">
     <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || $r.igMap[c.c.group]}}</div><div class="val">{{$r.fCrd(c.c.cost)}}</div>
@@ -20,10 +20,10 @@
 <div class="summary toggle" ng-click="toggleExpand()">
   <div class="item">
     <div class="lbl">Total</div>
-    <div class="val">{{$r.fCrd(ship.totalCost)}} CR</div>
+    <div class="val">{{$r.fCrd(ship.totalCost)}} <u>CR</u></div>
   </div>
   <div class="item">
     <div class="lbl">Insurance</div>
-    <div class="val">{{$r.fCrd(ship.totalCost * (1-insurance))}} CR</div>
+    <div class="val">{{$r.fCrd(ship.totalCost * (1-insurance))}} <u>CR</u></div>
   </div>
 </div>

app/views/page-error.html

@@ -7,8 +7,10 @@
 
   <!-- TODO: add awesome relevant SVG based on code /-->
 
-  <p ng-if="path" ng-bind="path"></p>
-  <p ng-if="type" ng-bind="type"></p>
+  <p ng-if="path" >Path: {{path}}</p>
+  <p ng-if="type">Error: {{type}}</p>
+  <p ng-if="details">Details: {{details | json}}</p>
+  <p>Browser: {{browser}}</p>
 </div>
 
 <!-- TODO: Add github issue link /-->

app/views/page-outfit.html

@@ -1,179 +1,186 @@
-
-<div id="hardpoints" class="slot-group">
-  <h1>HardPoints</h1>
-  <div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
-    <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
-    <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
-      <div class="empty-c" id="empty" ng-click="select(null, h, $event)">EMPTY</div>
-      <div ng-repeat="(grp, data) in availCS.getHps(h.maxClass)">
-        <div class="select-group">{{grp}}</div>
-        <div component-select opts="data"></div>
+<div id="outfit">
+  <div id="hardpoints" class="slot-group">
+    <h1>HardPoints</h1>
+    <div class="slot" ng-repeat="h in ship.hardpoints" ng-click="selectSlot($event, h)" ng-class="{selected: selectedSlot==h}">
+      <div slot-hardpoint class="details" hp="h" size="HPC[h.maxClass]" lbl="hgMap[h.c.grp]"></div>
+      <div class="select" ng-class="{hardpoint: h.maxClass > 0}" ng-if="selectedSlot==h" ng-click="select('h',h,$event)">
+        <div class="empty-c" id="empty" ng-click="select(null, h, $event)">EMPTY</div>
+        <div ng-repeat="(grp, data) in availCS.getHps(h.maxClass)">
+          <div class="select-group">{{grp}}</div>
+          <div component-select opts="data"></div>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<div id="standard" class="slot-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.class}}{{ship.bulkheads.c.rating}}</div>
-      <div class="cl l">{{ship.bulkheads.c.name}}</div>
-      <div class="r cr">{{ship.bulkheads.c.mass}} T</div>
+  <div id="standard" class="slot-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.class}}{{ship.bulkheads.c.rating}}</div>
+        <div class="cl l">{{ship.bulkheads.c.name}}</div>
+        <div class="r cr">{{ship.bulkheads.c.mass}} <u>T</u></div>
+      </div>
+      <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)"><ul>
+        <li class="lc" id="0">Lightweight Alloy</li>
+        <li class="lc" id="1">Reinforced Alloy</li>
+        <li class="lc" id="2">Military Grade Composite</li>
+        <li class="lc" id="3">Mirrored Surface Composite</li>
+        <li class="lc" id="4">Reactive Surface Composite</li>
+      </ul></div>
     </div>
-    <div class="select" ng-if="selectedSlot==ship.bulkheads" ng-click="select('b',ship.bulkheads,$event)"><ul>
-      <li class="lc" id="0">Lightweight Alloy</li>
-      <li class="lc" id="1">Reinforced Alloy</li>
-      <li class="lc" id="2">Military Grade Composite</li>
-      <li class="lc" id="3">Mirrored Surface Composite</li>
-      <li class="lc" id="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">Power Plant</div>
-      <div class="r">{{pp.id}}</div>
-      <div class="cb"></div>
-      <div class="l">Eff: {{pp.c.eff}}</div>
-      <div class="l">Power: {{pp.c.pGen}} MW</div>
-      <div class="r">{{pp.c.mass}} T</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">Power Plant</div>
+        <div class="r">{{pp.id}}</div>
+        <div class="cb"></div>
+        <div class="l">Eff: {{pp.c.eff}}</div>
+        <div class="l">Power: {{pp.c.pGen}} <u>MW</span></div>
+        <div class="r">{{pp.c.mass}} <u><u>T</u></span></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[0]" ng-if="selectedSlot==pp" ng-click="select('c',pp,$event)"></div>
     </div>
-    <div component-select class="select" 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">Thrusters</div>
-      <div class="r">{{th.id}}</div>
-      <div class="cb"></div>
-      <div class="l">Opt: {{th.c.optmass}} T</div>
-      <div class="l">Max: {{th.c.optmass}} T</div>
-      <div class="r">{{th.c.mass}} T</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">Thrusters</div>
+        <div class="r">{{th.id}}</div>
+        <div class="cb"></div>
+        <div class="l">Opt: {{th.c.optmass}} <u>T</u></div>
+        <div class="l">Max: {{th.c.maxmass}} <u>T</u></div>
+        <div class="r">{{th.c.mass}} <u>T</u></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[1]" ng-if="selectedSlot==th" ng-click="select('c',th,$event)"></div>
     </div>
-    <div component-select class="select" 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">Frame Shift Drive</div>
-      <div class="r">{{fsd.id}}</div>
-      <div class="cb"></div>
-      <div class="l">Opt: {{fsd.c.optmass}} T</div>
-      <div class="l">Max Fuel: {{fsd.c.maxfuel}} T</div>
-      <div class="r cr">{{fsd.c.mass}} T</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">Frame Shift Drive</div>
+        <div class="r">{{fsd.id}}</div>
+        <div class="cb"></div>
+        <div class="l">Opt: {{fsd.c.optmass}} <u>T</u></div>
+        <div class="l">Max Fuel: {{fsd.c.maxfuel}} <u>T</u></div>
+        <div class="r cr">{{fsd.c.mass}} <u>T</u></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[2]" ng-if="selectedSlot==fsd" ng-click="select('c',fsd,$event)"></div>
     </div>
-    <div component-select class="select" 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">Life Support</div>
-      <div class="r">{{ls.id}}</div>
-      <div class="cb"></div>
-      <div class="l">Time: {{fTime(ls.c.time)}}</div>
-      <div class="r cr">{{ls.c.mass}} T</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">Life Support</div>
+        <div class="r">{{ls.id}}</div>
+        <div class="cb"></div>
+        <div class="l">Time: {{fTime(ls.c.time)}}</div>
+        <div class="r cr">{{ls.c.mass}} <u>T</u></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[3]" ng-if="selectedSlot==ls" ng-click="select('c',ls,$event)"></div>
     </div>
-    <div component-select class="select" 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">Power Distributor</div>
-      <div class="r">{{pd.id}}</div>
-      <div class="cb"></div>
-      <!-- TODO: add power distributor stuff /-->
-      <div class="r cr">{{pd.c.mass}} T</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">Power Distributor</div>
+        <div class="r">{{pd.id}}</div>
+        <div class="cb"></div>
+        <div class="l">Sys: {{pd.c.weaponcapacity}} <u>Mj</u> {{pd.c.weaponrecharge}} <u>Mj/s</u></div>
+        <div class="l">Wep: {{pd.c.systemcapacity}} <u>Mj</u> {{pd.c.systemrecharge}} <u>Mj/s</u></div>
+        <div class="l">Eng: {{pd.c.enginecapacity}} <u>Mj</u> {{pd.c.enginerecharge}}<u>Mj/s</u></div>
+        <div class="r cr">{{pd.c.mass}} <u>T</u></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[4]" ng-if="selectedSlot==pd" ng-click="select('c',pd,$event)"></div>
     </div>
-    <div component-select class="select" 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">Sensors</div>
-      <div class="r">{{ss.id}}</div>
-      <div class="cb"></div>
-      <div class="l">{{ss.c.range}} KM</div>
-      <div class="r cr">{{ss.c.mass}} T</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">Sensors</div>
+        <div class="r">{{ss.id}}</div>
+        <div class="cb"></div>
+        <div class="l">{{ss.c.range}} <u>KM</u></div>
+        <div class="r cr">{{ss.c.mass}} <u>T</u></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[5]" ng-if="selectedSlot==ss" ng-click="select('c',ss,$event)"></div>
     </div>
-    <div component-select class="select" 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">Fuel Tank</div>
-      <div class="r">{{ft.id}}</div>
-      <div class="r cr">{{ft.c.capacity}} T</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">Fuel Tank</div>
+        <div class="r">{{ft.id}}</div>
+        <div class="r cr">{{ft.c.capacity}} <u>T</u></div>
+      </div>
+      <div component-select class="select" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
     </div>
-    <div component-select class="select" opts="availCS.common[6]" ng-if="selectedSlot==ft" ng-click="select('c',ft,$event)"></div>
   </div>
-</div>
 
-<div id="internal" class="slot-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="igMap[i.c.group]"></div>
-    <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
-      <div class="empty-c" id="empty" ng-click="select(null, i, $event)">EMPTY</div>
-      <div ng-repeat="(grp, data) in availCS.getInts(i.maxClass)">
-        <div class="select-group">{{grp}}</div>
-        <div component-select opts="data"></div>
+  <div id="internal" class="slot-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="igMap[i.c.group]"></div>
+      <div class="select" ng-if="selectedSlot==i" ng-click="select('i',i,$event)">
+        <div class="empty-c" id="empty" ng-click="select(null, i, $event)">EMPTY</div>
+        <div ng-repeat="(grp, data) in availCS.getInts(i.maxClass)">
+          <div class="select-group">{{grp}}</div>
+          <div component-select opts="data"></div>
+        </div>
       </div>
     </div>
   </div>
-</div>
 
-<div id="summary">
-  <div id="overview" class="list">
-    <h1 ng-bind="ship.name"></h1>
-    <div id="build">
-      <input ng-model="buildName" placeholder="Enter Build Name" />
-      <button ng-click="saveBuild()" ng-disabled="code == savedCode">Save</button>
-      <button ng-click="reloadBuild()" ng-disabled="!savedCode || code == savedCode">Reload</button>
-      <button ui-sref="outfit({shipId: ship.id,code:null})" ng-disabled="!code">Clear</button>
+  <div id="summary">
+    <div id="overview" class="list">
+      <h1 ng-bind="ship.name"></h1>
+      <div id="build">
+        <input ng-model="buildName" ng-change="bnChange()" placeholder="Enter Build Name" />
+        <button ng-click="saveBuild()" ng-disabled="!buildName && code == savedCode">Save</button>
+        <button ng-click="reloadBuild()" ng-disabled="!savedCode && code == savedCode">Reload</button>
+        <button ng-click="deleteBuild()" ng-disabled="!savedCode">Delete</button>
+        <button ui-sref="outfit({shipId: ship.id,code:null})" ng-disabled="!code">Reset</button>
+      </div>
     </div>
-  </div>
-  <div class="list">
-    <div class="header">Maneuverability</div>
-    <div class="summary">
-      <div class="item"><div class="lbl">Boost</div><div class="val">{{fRound(ship.boost)}} m/s</div></div>
-      <div class="item"><div class="lbl">Speed</div><div class="val">{{fRound(ship.speed)}} m/s</div></div>
-      <div class="item"><div class="lbl">Agility</div><div class="val">{{ship.agility}} / 10</div></div>
-    </div>
-  </div>
-  <div class="list">
-    <div class="header">Shields</div>
-    <div class="summary">
-      <div class="item"><div class="lbl">Recharge Rate</div><div class="val">{{fRound(0)}} Mj/s</div></div>
-      <div class="item"><div class="lbl">Strength</div><div class="val">{{fRound(ship.shieldStrength)}} Mj</div></div>
-      <div class="item"><div class="lbl">Multiplier</div><div class="val">{{fRPct(ship.shieldMultiplier)}}</div></div>
-    </div>
-  </div>
-  <div class="list">
-    <div class="header">Armor</div>
-    <div class="summary">
-      <div class="item"><div class="lbl">Total</div><div class="val">{{ship.armourTotal}}</div></div>
-      <div class="item"><div class="lbl">Added</div><div class="val">{{ship.armourAdded}}</div></div>
-      <div class="item"><div class="lbl">Base</div><div class="val">{{ship.armour}}</div></div>
-    </div>
-  </div>
-  <div class="list">
-    <div class="header">Mass</div>
-    <div class="summary">
-      <div class="item"><div class="lbl">Max</div><div class="val">{{fRound(ship.maxMass)}} T</div></div>
-      <div class="item"><div class="lbl">Laden</div><div class="val">{{fRound(ship.ladenMass)}} T</div></div>
-      <div class="item"><div class="lbl">Unladen</div><div class="val">{{fRound(ship.unladenMass)}} T</div></div>
-    </div>
-  </div>
-  <div class="list" power-list ship="ship"></div>
     <div class="list">
-    <div class="header">Capacity</div>
+      <div class="header">Maneuverability</div>
       <div class="summary">
-        <div class="item"><div class="lbl">Cargo</div><div class="val">{{fRound(ship.cargoCapacity)}} T</div></div>
-        <div class="item"><div class="lbl">Fuel</div><div class="val">{{fRound(ship.fuelCapacity)}} T</div></div>
+        <div class="item"><div class="lbl">Boost</div><div class="val">{{fRound(ship.boost)}} <u>m/s</u></div></div>
+        <div class="item"><div class="lbl">Speed</div><div class="val">{{fRound(ship.speed)}} <u>m/s</u></div></div>
+        <div class="item"><div class="lbl">Agility</div><div class="val">{{ship.agility}} / 10</div></div>
       </div>
+    </div>
+    <div class="list">
+      <div class="header">Shields</div>
+      <div class="summary">
+        <!-- TODO: Implement Shield Recharge rate
+        <div class="item"><div class="lbl">Recharge Rate</div><div class="val">{{fRound(0)}} <u>Mj/s</u></div></div>
+        /-->
+        <div class="item"><div class="lbl">Strength</div><div class="val">{{fRound(ship.shieldStrength)}} <u>Mj</u></div></div>
+        <div class="item"><div class="lbl">Multiplier</div><div class="val">{{fRPct(ship.shieldMultiplier)}}</div></div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="header">Armor</div>
+      <div class="summary">
+        <div class="item"><div class="lbl">Total</div><div class="val">{{ship.armourTotal}}</div></div>
+        <div class="item"><div class="lbl">Added</div><div class="val">{{ship.armourAdded}}</div></div>
+        <div class="item"><div class="lbl">Base</div><div class="val">{{ship.armour}}</div></div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="header">Mass</div>
+      <div class="summary">
+        <div class="item"><div class="lbl">Max</div><div class="val">{{fRound(ship.maxMass)}} <u>T</u></div></div>
+        <div class="item"><div class="lbl">Laden</div><div class="val">{{fRound(ship.ladenMass)}} <u>T</u></div></div>
+        <div class="item"><div class="lbl">Unladen</div><div class="val">{{fRound(ship.unladenMass)}} <u>T</u></div></div>
+      </div>
+    </div>
+    <div class="list" power-list ship="ship"></div>
+      <div class="list">
+      <div class="header">Capacity</div>
+        <div class="summary">
+          <div class="item"><div class="lbl">Cargo</div><div class="val">{{fRound(ship.cargoCapacity)}} <u>T</u></div></div>
+          <div class="item"><div class="lbl">Fuel</div><div class="val">{{fRound(ship.fuelCapacity)}} <u>T</u></div></div>
+        </div>
+    </div>
+    <div class="list" ship-range ship="ship"></div>
+    <div class="list" cost-list ship="ship"></div>
   </div>
-  <div class="list" ship-range ship="ship"></div>
-  <div class="list" cost-list ship="ship"></div>
+
 </div>

app/views/page-shipyard.html

@@ -1,4 +1,4 @@
-
+<div id="shipyard">
 <a ui-sref="outfit({shipId:id})" class="ship" ng-repeat="(id,s) in ships">
   <h2 ng-bind="s.properties.name"></h2>
   <small ng-bind="s.properties.manufacturer"></small>
@@ -6,4 +6,5 @@
     <div class="purpose" ng-bind="SP[s.properties.group]"></div>
   </div>
   {{fCrd(s.properties.cost)}} CR
-</a>
+</a>
+</div>

app/views/power.html

@@ -14,7 +14,7 @@
   </div>
 
   <div ng-repeat="c in ship.hardpoints" ng-if="c.c.power" class="item hardpoints" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="toggle(c)">
-    <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name}}</div><div class="val">{{$r.fPwr(c.c.power)}}</div>
+    <div class="lbl">{{c.c.class}}{{c.c.rating}} {{c.c.name || $r.hgMap[c.c.grp]}}</div><div class="val">{{$r.fPwr(c.c.power)}}</div>
   </div>
 
   <div ng-repeat="c in ship.internal" ng-if="c.c.power" class="item internal" ng-class="{enabled:c.enabled, consumer:c.c.power}" ng-click="toggle(c)">
@@ -24,14 +24,14 @@
 <div class="summary toggle" ng-click="toggleExpand()">
   <div class="item">
     <div class="lbl">Available</div>
-    <div class="val">{{$r.fPwr(ship.powerAvailable)}} MW</div>
+    <div class="val">{{$r.fPwr(ship.powerAvailable)}} <u>MW</u></div>
   </div>
   <div class="item">
     <div class="lbl">Deployed</div>
-    <div class="val">{{$r.fPwr(ship.powerDeployed)}} MW ({{$r.fPct(ship.powerDeployed/ship.powerAvailable)}})</div>
+    <div class="val">{{$r.fPwr(ship.powerDeployed)}} <u>MW</u> ({{$r.fPct(ship.powerDeployed/ship.powerAvailable)}})</div>
   </div>
   <div class="item">
     <div class="lbl">Retracted</div>
-    <div class="val">{{$r.fPwr(ship.powerRetracted)}} MW ({{$r.fPct(ship.powerRetracted/ship.powerAvailable)}})</div>
+    <div class="val">{{$r.fPwr(ship.powerRetracted)}} <u>MW</u> ({{$r.fPct(ship.powerRetracted/ship.powerAvailable)}})</div>
   </div>
 </div>

app/views/ship-range.html

@@ -6,10 +6,10 @@
 <div class="summary toggle" ng-click="toggleExpand()">
   <div class="item">
     <div class="lbl">Laden</div>
-    <div class="val">{{$r.fRound(ship.ladenJumpRange)}} Ly</div>
+    <div class="val">{{$r.fRound(ship.ladenJumpRange)}} <u>LY</u></div>
   </div>
   <div class="item">
     <div class="lbl">Unladen</div>
-    <div class="val">{{$r.fRound(ship.unladenJumpRange)}} Ly</div>
+    <div class="val">{{$r.fRound(ship.unladenJumpRange)}} <u>LY</u></div>
   </div>
 </div>

app/views/slot-hardpoint.html

@@ -3,14 +3,17 @@
 <div ng-if="hp.c">
   <div class="l">{{hp.c.name || lbl}}</div><div class="r">{{hp.c.class}}{{hp.c.rating}}<span ng-if="hp.c.mode">/{{hp.c.mode}}{{hp.c.missile}}</span></div>
   <div class="cb">
-    <div class="cb" ng-if="hp.c.damage" >
-      <div  class="l" meter max="10" obj="hp.c" labels="['dps','dmg']" keys="['dps','damage']" style="width: 75px;height: 30px;"></div>
-      <div class="l" meter max="10" obj="hp.c" labels="['pen','load']" keys="['armourpen','thermload']" style="width: 75px;height: 30px;"></div>
+    <div class="cb meters" ng-if="hp.c.damage" >
+      <div class="l">Damage: {{hp.c.damage}}</div>
+      <div class="l">DPS: {{hp.c.dps}}</div>
+      <div class="l">T-Load: {{hp.c.thermload}}</div>
     </div>
     <div class="l" ng-if="hp.c.ammo">Ammo: {{$r.fCrd(hp.c.clip)}}/{{$r.fCrd(hp.c.ammo)}}</div>
-    <div class="l" ng-if="h.c.rof != null">ROF: {{hp.c.rof}}/s</div>
+    <div class="l" ng-if="hp.c.rof">ROF: {{hp.c.rof}}<u>/s</u></div>
+    <div class="l" ng-if="hp.c.armourpen">Pen: {{hp.c.armourpen}}</div>
+    <div class="l" ng-if="hp.c.type">Type: {{hp.c.type}}</div>
     <div class="l" ng-if="hp.c.shieldmul">+{{$r.fRPct(hp.c.shieldmul)}}</div>
-    <div class="l" ng-if="hp.c.range">{{hp.c.range}} KM</div>
-    <div class="r">{{hp.c.mass}} T</div>
+    <div class="l" ng-if="hp.c.range">{{hp.c.range}} <u>KM</u></div>
+    <div class="r">{{hp.c.mass}} <u>T</u></div>
   </div>
 </div>

app/views/slot-internal.html

@@ -4,12 +4,14 @@
   <div class="l">{{c.c.name || lbl}}</div>
   <div class="r">{{c.c.class}}{{c.c.rating}}</div>
   <div class="cb"></div>
-  <div class="l" ng-if="c.c.optmass">Opt: {{c.c.optmass}} T</div>
-  <div class="l" ng-if="c.c.maxmass">Max: {{c.c.optmass}} T</div>
-  <div class="l" ng-if="c.c.bins">{{c.c.bins}} Bins</div>
-  <div class="l" ng-if="c.c.range">{{c.c.range}} KM</div>
-  <div class="l" ng-if="c.c.armouradd">+{{c.c.armouradd}} Armour</div>
-  <div class="r cr">{{c.c.mass || c.c.capacity || '0'}} T</div>
+  <div class="l" ng-if="c.c.optmass">Opt: {{c.c.optmass}} <u>T</u></div>
+  <div class="l" ng-if="c.c.maxmass">Max: {{c.c.optmass}} <u>T</u></div>
+  <div class="l" ng-if="c.c.bins">{{c.c.bins}} <u>Bins</u></div>
+  <div class="l" ng-if="c.c.ammo">Ammo: {{c.c.ammo}}</div>
+  <div class="l" ng-if="c.c.repair">Repair: {{c.c.repair}}</div>
+  <div class="l" ng-if="c.c.range">{{c.c.range}} <u>KM</u></div>
+  <div class="l" ng-if="c.c.armouradd">+{{c.c.armouradd}} <u>Armour</u></div>
+  <div class="r cr">{{c.c.mass || c.c.capacity || '0'}} <u>T</u></div>
 
   <!-- Rate add /-->
 </div>