More comprehensive changes, UI tweaking

2025-12-08 22:33:24 +00:00 · 2015-05-03 13:23:30 -07:00
parent 71405e6cb7
commit 022836bde1
29 changed files with 339 additions and 374 deletions
--- a/app/images/bay-1920x1080.jpg
+++ b/app/images/bay-1920x1080.jpg
--- a/app/images/ed-logo-sm.png
+++ b/app/images/ed-logo-sm.png
--- a/app/index.html
+++ b/app/index.html
@@ -20,9 +20,9 @@
  <meta name="msapplication-TileImage" content="images/logo/mstile-144x144.png">
  <meta name="msapplication-config" content="images/logo/browserconfig.xml">
  <meta name="theme-color" content="#000000">
+  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 </head>
-<body>
-  <div id="bg"></div>
+<body ng-class="bodyClass">
  <shipyard-header></shipyard-header>
  <div id="main" ui-view ng-click="bgClicked($event)"></div>

@@ -30,7 +30,7 @@
    <div class="right">
      <a href="https://github.com/cmmcleod/ed-shipyard" target="_blank" title="Shipyard Github Project">Version <%= version %> - <%= date %></a>
    </div>
-    <div class="left">
+    <div class="l">
      Coriolis Shipyard was created using assets and imagery from Elite: Dangerous, with the permission of Frontier Developments plc, for non-commercial purposes.<br>
      It is not endorsed by nor reflects the views or opinions of Frontier Developments and no employee of Frontier Developments was involved in the making of it.
    </div>
--- a/app/js/config.js
+++ b/app/js/config.js
@@ -13,7 +13,7 @@ angular.module('app').config(['$provide','$stateProvider', '$urlRouterProvider',
      params: {
        // TODO: Squash:false not working due to UI-router issue
        shipId: { value: 'sidewinder', squash: false}, // Allow 'shipId' parameter to default to
-        code: { value: undefined, squash: true } // Allow 'code' parameter to be empty/optional
+        code: { value: null, squash: true } // Allow 'code' parameter to be empty/optional
      },
      templateUrl: 'views/page-outfit.html',
      controller: 'OutfitController',
--- a/app/js/controllers/controller-error.js
+++ b/app/js/controllers/controller-error.js
@@ -1,29 +1,32 @@
 angular.module('app')
-.controller('ErrorController', ['$rootScope','$scope','$stateParams', '$location', function ($rootScope, $scope, $p, $location) {
+.controller('ErrorController', ['$window','$rootScope','$scope','$stateParams', '$location', function ($window, $rootScope, $scope, $p, $location) {
  $rootScope.title = 'Error';
  $scope.path = $location.path();
  $scope.type = $p.type || 'unknown';
+  $scope.browser = $window.navigator.appVersion;

  switch ($scope.type) {
    case 404:
        $scope.msgPre = 'Page';
        $scope.msgHighlight = $scope.path;
        $scope.msgPost = 'Not Found';
-        $scope.image = 'deep-space';
+        $rootScope.bodyClass = 'deep-space';
      break;
    case 'no-ship':
        $scope.msgPre = 'Ship';
        $scope.msgHighlight = $p.message;
        $scope.msgPost = 'does not exist';
-        $scope.image = 'thargoid';
+        $rootScope.bodyClass = 'docking-bay';
      break;
    case 'build-fail':
        $scope.msgPre = 'Build Failure!';
        $scope.image = 'ship-explode';
+        $rootScope.bodyClass = 'docking-bay';
      break;
    default:
      $scope.msgPre = "Uh, this is bad..";
      $scope.image = 'thargoid';
+      $rootScope.bodyClass = null;
  }

 }]);
--- a/app/js/controllers/controller-outfit.js
+++ b/app/js/controllers/controller-outfit.js
@@ -11,7 +11,6 @@ angular.module('app').controller('OutfitController', ['$rootScope','$scope', '$s
  }

  $scope.buildName = $p.bn;
-  $rootScope.title = ship.name + ($scope.buildName? ' - ' + $scope.buildName: '');
  $scope.ship = ship;
  $scope.pp = ship.common[0];   // Power Plant
  $scope.th = ship.common[1];   // Thruster
@@ -25,6 +24,8 @@ angular.module('app').controller('OutfitController', ['$rootScope','$scope', '$s
  $scope.availCS = Components.forShip(ship.id);
  $scope.selectedSlot = null;
  $scope.savedCode = Persist.getBuild(ship.id, $scope.buildName);
+  $rootScope.title = ship.name + ($scope.buildName? ' - ' + $scope.buildName: '');
+  $rootScope.bodyClass = 'docking-bay';

  // for debugging
  window.myScope = $scope;
@@ -62,7 +63,7 @@ angular.module('app').controller('OutfitController', ['$rootScope','$scope', '$s
      } else if (type == 'i') {
        ship.use(slot, e.srcElement.id, Components.internal(e.srcElement.id));
      } else if (type == 'b') {
-        ship.useBulkhead(slot, e.srcElement.id);
+        ship.useBulkhead(e.srcElement.id);
      } else {
        ship.use(slot, null, null);
      }
@@ -88,9 +89,11 @@ angular.module('app').controller('OutfitController', ['$rootScope','$scope', '$s
   * for this ship & with the exact name.
   */
  $scope.saveBuild = function() {
-    if($scope.code != $scope.savedCode) {
+    if($scope.buildName && $scope.code != $scope.savedCode) {
      Persist.saveBuild(ship.id, $scope.buildName, $scope.code);
      $scope.savedCode = $scope.code;
+      // Edge case TODO: comment more
+      $state.go('outfit', {shipId: ship.id, code: $scope.savedCode, bn: $scope.buildName}, {location:'replace', notify:false});
    }
  }

@@ -104,6 +107,10 @@ angular.module('app').controller('OutfitController', ['$rootScope','$scope', '$s
    $state.go('outfit', {shipId: ship.id, code: null, bn: null}, {location:'replace', reload:true});
  }

+  $scope.bnChange = function(){
+    $scope.savedCode = Persist.getBuild(ship.id, $scope.buildName);
+  }
+
  $rootScope.$on('keyup', function (e, keyEvent) {
    // CTRL + S or CMD + S will override the default and save the build is possible
    if (keyEvent.keycode == 83 && keyEvent.ctrlKey) {
--- a/app/js/controllers/controller-shipyard.js
+++ b/app/js/controllers/controller-shipyard.js
@@ -1,3 +1,4 @@
 angular.module('app').controller('ShipyardController', ['$rootScope', function ($rootScope) {
  $rootScope.title = 'Coriolis - Shipyard';
+  $rootScope.bodyClass = 'docking-bay';
 }]);
--- a/app/js/directives/directive-meter.js
+++ b/app/js/directives/directive-meter.js
@@ -1,77 +0,0 @@
-angular.module('app').directive('meter', function () {
-  return {
-    restrict: 'A',
-    scope: {
-      labels: '=',
-      keys: '=',
-      obj: '=',
-      max: '='
-    },
-    link: function (scope, element) {
-      var max = scope.max,
-          w = 90,
-          pLeft = 1,
-          pBottom = 2,
-          labelWidth = 45,
-          bHeight = 16,
-          bWidth = ((w - labelWidth) / max) - pLeft,
-          h = bHeight * scope.keys.length;
-
-      var data = [];
-
-      for(var i = 0; i < scope.keys.length; i++) {
-        data.push({name:scope.labels[i], val: scope.obj[scope.keys[i]]});
-      }
-
-      var svg = d3.select(element[0])
-        .append('svg')
-        .attr('width', w)
-        .attr('height', h)
-        .attr('viewBox', '0 0 ' + w + ' ' + h)
-        .attr('class', 'meter')
-        .attr('preserveAspectRatio', 'xMinYMin');
-
-      svg.selectAll("g").data(data)
-        .enter()
-        .append("g")
-        .attr('transform', function(d, i) {
-          return 'translate(' + labelWidth + ' ' + (i * bHeight) + ')';
-        })
-        .each(function(d, k) {
-          var g = d3.select(this);
-          for (var i = 0; i < max; i++) {
-            g.append('rect')
-              .attr("x", i * (bWidth + pLeft))
-              .attr("y", 0)
-              .attr("width", bWidth)
-              .attr("height", bHeight - pBottom);
-          }
-        });
-
-      svg.selectAll("text").data(data)
-        .enter()
-        .append('text')
-        .text(function(d) {
-          return d.name;
-        })
-        .attr("text-anchor", "end")
-        .attr("x", labelWidth - 3)
-        .attr("y", function(d, i) {
-          return (i * bHeight) + (bHeight) / 2;
-        });
-
-      function update() {
-        for(var i = 0; i < data.length; i++) {
-          data[i].val = scope.obj[scope.keys[i]];
-        }
-
-        svg.selectAll("g").data(data)
-          .selectAll('rect').attr('class', function(d, i) {
-            return (i + 1 <= d.val) ? 'active' : '';
-          });
-      }
-
-      scope.$watch('obj',update);
-    }
-  };
-});
--- a/app/less/app.less
+++ b/app/less/app.less
@@ -9,7 +9,6 @@
@import 'outfit';
@import 'select';
@import 'charts';
-@import 'meters';
@import 'error';


@@ -24,24 +23,26 @@ body {
  padding: 0;
  font-family: @fStandard;
  overflow-x: hidden;
+  background-image: none;
+  background-repeat: no-repeat;
+  background-position: center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+
+  &.deep-space {
+     background-image: url(images/deep-space.jpg);
  }

-#bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  opacity: 0.3;
-  background-image: url(images/docking-bay.jpg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  &.docking-bay {
+    background-image: url(images/bay-1920x1080.jpg);
+  }
 }

 #main {
-  margin: 10px;
+  margin: 0;
+  padding: 0.5em 0.25em;
  min-height: 800px;
  clear: both;
 }
@@ -71,22 +72,14 @@ a, a:visited {
 }

 footer {
+  clear: both;
  font-size: 0.6em;
  color: #999;
-  padding: 10px 0;
-  width: 100%;
+  padding: 1em;
  overflow: hidden;
-}

-footer {
  .right {
    float: right;
    text-align: right;
-    margin-right: 10px;
-  }
-  .left {
-    float: left;
-    text-align: left;
-    margin-left: 10px;
  }
 }
--- a/app/less/colors.less
+++ b/app/less/colors.less
@@ -1,20 +1,21 @@
-@fg: #fff;
-@bg: #333;
-@primary: #FF8C0D; // Light Orange
-@secondary: #32DBDB;  // Light blue
-@warning: #FF3B00;  // Dark Orange
-
+// Constants for calculations
@bgDarken: 40%;
@disabledDarken: 15%;
@bgTransparency: 10%;

-@disabled: #888;
+// Foreground colors
+@fg: #fff;
+@primary: #FF8C0D; // Light Orange
+@secondary: #1FB0FF;  // Light blue
+@warning: #FF3B00;  // Dark Orange
+@disabled: #888;    // Light grey
@primary-disabled: darken(@primary, @disabledDarken);
@secondary-disabled: darken(@secondary, @disabledDarken);
@warning-disabled: darken(@warning, @disabledDarken);

+// Background colors
+@bg: rgba(70,70,70,0.95);
@bgBlack: rgba(0,0,0,0.9);
-
-@primary-bg: fadeout(darken(@primary, 45%), 30%);
+@primary-bg: fadeout(darken(@primary, 45%), 20%);
@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
@warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
--- a/app/less/header.less
+++ b/app/less/header.less
@@ -37,19 +37,19 @@ header {
  }

  .menu-list {
-    width: 200%;
+    width: 250%;
    font-family: @fStandard;
    position: absolute;
-    padding: 0 1em 1em 0;
+    margin-right: 1em;
+    padding: 0 0 1em 1em;
    overflow: hidden;
    background-color: @bgBlack;
    font-size: 0.8em;
  }

  ul {
-    margin: 0;
+    margin: 0.5em 1em 0 0;
    padding: 0;
-    margin-top: 0.5em;
    line-height: 2em;
  }

@@ -76,6 +76,11 @@ header {
    }
  }

+  .block {
+    display: block;
+    line-height: 1.5em;
+  }
+
  .title {
    font-size: 1.3em;
    display: inline-block;
--- a/app/less/meters.less
+++ b/app/less/meters.less
@@ -1,18 +0,0 @@
-
-svg.meter {
-  text {
-    fill: @warning;
-    font-size: 15px;
-    font-family: @fStandard;
-    text-transform:uppercase;
-    alignment-baseline: middle;
-  }
-
-  rect {
-    fill: @disabled;
-
-    &.active {
-      fill: @warning;
-    }
-  }
-}
--- a/app/less/outfit.less
+++ b/app/less/outfit.less
@@ -1,8 +1,13 @@

+#outfit {
+  //width: 62em;
+  //margin: 0 auto;
+}
+
 #overview {
  h1 {
    font-family: @fTitle;
-    margin: 5px 0;
+    margin: 0.2em 0;
    color: @primary;
    float: left;
  }
@@ -14,18 +19,22 @@

  input {
    background: @primary-bg;
-    color: @fg;
+    color: @secondary;
+    outline: none;
    border: none;
    font-size: 0.8em;
    line-height: 2em;
-    text-transform: uppercase;
+    text-align: right;
+    &:hover, &:focus {
+      background-color: @secondary-bg;
+    }
  }
 }

 #hardpoints {
  .slot:nth-child(2n) {
    clear: left;
-    margin-right: 10px;
+    margin-right: 0.5em;
  }
 }

@@ -41,34 +50,21 @@
  }
 }

+u { // Unit (Mj, Km, etc)
+  font-size: 0.8em;
+  text-decoration: none;
+}
+
 #summary {
  .user-select-none();
  float: right;
-  width: 40%;
+  min-width: 40em;
+  margin: 0.25em;
  border-top: 2px solid @primary;
  border-bottom: 2px solid @primary;
  background-color: @primary-bg;
 }

-legend {
-  text-transform: uppercase;
-  padding: 0 5px;
-  color: @warning;
-  font-family: @fTitle;
-}
-
-fieldset {
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  cursor: default;
-  border: 2px solid @warning-bg;
-  .border-radius(5px);
-  margin: 5px;
-  padding: 1px 5px 5px;
-}
-
 .toggle {
  cursor: pointer;
 }
--- a/app/less/shipyard.less
+++ b/app/less/shipyard.less
@@ -1,10 +1,12 @@

+#shipyard {
+  vertical-align: top;
+}
+
 a.ship {
-  display: block;
-  float: left;
+  display: inline-block;
  width: 22%;
-  height: 30%;
-  margin: 1% 1%;
+  margin: 1%;
  background-color: @bg;
  padding: 0.5%;
  text-decoration: none;
--- a/app/less/slot.less
+++ b/app/less/slot.less
@@ -1,7 +1,7 @@

 .slot-group {
  float: left;
-  margin: 0 5px;
+  margin: 0.25em;
  .user-select-none();
  cursor: default;

@@ -10,7 +10,7 @@
    color: @bgBlack;
    background-color: @primary-disabled;
    text-transform: uppercase;
-    margin: 2px 0;
+    margin: 0.1em 0;
    font-size: 0.8em;
    padding-left: 0.5em;
  }
@@ -18,9 +18,9 @@

 .slot {
  float: left;
-  width: 230px;
+  width: 20.5em;
  font-size: 0.75em;
-  margin-top: 3px;
+  margin-top: 0.5em;
  position: relative;
  z-index: 0;
  padding-right: 0.4em;
@@ -34,6 +34,7 @@
    overflow: hidden;
    height: 100%;
    cursor: pointer;
+    text-transform: none;
  }

  .cb {
--- a/app/views/_header.html
+++ b/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>
@@ -14,7 +21,6 @@
  </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>

--- a/app/views/costs.html
+++ b/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>
--- a/app/views/page-error.html
+++ b/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 /-->
--- a/app/views/page-outfit.html
+++ b/app/views/page-outfit.html
@@ -1,4 +1,4 @@
-
+<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}">
@@ -20,7 +20,7 @@
        <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 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>
@@ -37,8 +37,8 @@
        <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="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>
@@ -48,9 +48,9 @@
        <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="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>
@@ -60,9 +60,9 @@
        <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="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>
@@ -73,7 +73,7 @@
        <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="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>
@@ -83,8 +83,10 @@
        <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="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>
@@ -94,8 +96,8 @@
        <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="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>
@@ -104,7 +106,7 @@
        <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="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>
@@ -128,25 +130,28 @@
    <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>
+        <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 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">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">
-      <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>
+        <!-- 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>
@@ -161,19 +166,21 @@
    <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 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)}} 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">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>
--- a/app/views/page-shipyard.html
+++ b/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>
@@ -7,3 +7,4 @@
  </div>
  {{fCrd(s.properties.cost)}} CR
 </a>
+</div>
--- a/app/views/power.html
+++ b/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>
--- a/app/views/ship-range.html
+++ b/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>
--- a/app/views/slot-hardpoint.html
+++ b/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>
--- a/app/views/slot-internal.html
+++ b/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>
--- a/data/components/common/frame_shift_drive.json
+++ b/data/components/common/frame_shift_drive.json
@@ -164,6 +164,17 @@
    "fuelmul": 0.011,
    "fuelpower": 2.3
  },
+  "5A": {
+    "class": 5,
+    "rating": "A",
+    "cost": 5103953,
+    "mass": 20,
+    "power": 0.6,
+    "optmass": 1050,
+    "maxfuel": 5,
+    "fuelmul": 0.012,
+    "fuelpower": 2.45
+  },
  "5B": {
    "class": 5,
    "rating": "B",
@@ -262,16 +273,5 @@
    "maxfuel": 5.3,
    "fuelmul": 0.011,
    "fuelpower": 2.6
-  },
-  "5A": {
-    "class": 5,
-    "rating": "A",
-    "cost": 5103953,
-    "mass": 20,
-    "power": 0.6,
-    "optmass": 1050,
-    "maxfuel": 5,
-    "fuelmul": 0.012,
-    "fuelpower": 2.45
  }
 }
--- a/data/components/internal/scanners.json
+++ b/data/components/internal/scanners.json
@@ -2,7 +2,7 @@
  "Scanners": {
    "2f": {
      "group": "sc",
-      "name": "Advanced Discovery Scanner",
+      "name": "Adv. Discovery Scanner",
      "class": 1,
      "rating": "C",
      "cost": 1545000,
@@ -12,7 +12,7 @@
    },
    "2g": {
      "group": "sc",
-      "name": "Intermediate Discovery Scanner",
+      "name": "Inter. Discovery Scanner",
      "class": 1,
      "rating": "D",
      "cost": 505000,
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -11,7 +11,8 @@ var gulp            = require('gulp'),
    mainBowerFiles  = require('main-bower-files'),
    del             = require('del'),
    runSequence     = require('run-sequence'),
-    exec            = require('child_process').exec
+    exec            = require('child_process').exec,
+    RevAll          = require('gulp-rev-all'),
    pkg             = require('./package.json');

 gulp.task('less', function() {
@@ -148,8 +149,36 @@ gulp.task('watch', function() {
  gulp.watch('data/**/*.json', ['jsonToDB']);
 });

+gulp.task('cache-bust', function(done) {
+  var revAll = new RevAll({ dontRenameFile: ['.html','db.json'] });
+  var stream = gulp.src('build/**')
+    .pipe(revAll.revision())
+    .pipe(gulp.dest('build'))
+    .pipe(revAll.manifestFile())
+    .pipe(gulp.dest('build'));
+
+  stream.on('end', function() {
+    var manifest = require('./build/rev-manifest.json');
+    var arr = [];
+    for(var origFileName in manifest) {
+      if(origFileName != manifest[origFileName]) { // For all files busted/renamed
+        arr.push('./build/' + origFileName);       // Add the original filename to the list
+      }
+    }
+    del(arr, done);     // Delete all originals files the were not busted/renamed
+  });
+  stream.on('error', done);
+
+});
+
+gulp.task('upload', function(done) {
+  // Does nothing yet :P
+  done();
+});
+
 gulp.task('clean', function (done) { del(['build'], done); });
 gulp.task('build', function (done) { runSequence('clean', ['html2js','jsonToDB'], ['generateIndexHTML','bower','js','less','copy'], done); });
+gulp.task('deploy', function (done) { runSequence('build','cache-bust', 'upload', done); });
 gulp.task('dev', function (done) { runSequence('build', 'serve','watch', done); });
 gulp.task('default', ['dev']);

--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "gulp-jshint": "^1.10.0",
    "gulp-less": "^3.0.2",
    "gulp-minify-css": "^1.0.0",
+    "gulp-rev-all": "^0.8.18",
    "gulp-sourcemaps": "^1.5.1",
    "gulp-template": "^3.0.0",
    "gulp-uglify": "^1.2.0",