Initial Commit for React

app/js/components/Header.jsx

@@ -0,0 +1,118 @@
+import { Component } from 'react';
+
+export default class Header extends Component {
+
+
+  render() {
+    let openedMenu = this.state.openedMenu;
+    if (this.props.appCacheUpdate) {
+      return <div id="app-update" onClick={window.location.reload}>{ 'PHRASE_UPDATE_RDY' | translate }</div>;
+    }
+
+    return (
+      <header>
+        <a class="l" ui-sref="shipyard" style="margin-right: 1em;" title="Ships"><svg class="icon xl"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#coriolis"></use></svg></a>
+
+        <div class="l menu">
+          <div class="menu-header" ng-class="{selected: openedMenu=='s'}" ng-click="openMenu($event,'s')">
+            <svg class="icon warning"><use xlink:href="#rocket"></use></svg><span class="menu-item-label"> {{'ships' | translate}}</span>
+          </div>
+          {openedMenu == 's' ? this.getShipsMenu() : null}
+        </div>
+
+        <div class="l menu">
+          <div class="menu-header" ng-class="{selected: openedMenu=='b', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'b')">
+            <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#hammer"></use></svg><span class="menu-item-label"> {{'builds' | translate}}</span>
+          </div>
+          {openedMenu == 'b' ? this.getBuildsMenu() : null}
+        </div>
+
+        <div class="l menu">
+          <div class="menu-header" ng-class="{selected: openedMenu=='comp', disabled: !bs.hasBuilds}" ng-click="openMenu($event,'comp')">
+            <svg class="icon warning" ng-class="{'warning-disabled': !bs.hasBuilds}"><use xlink:href="#stats-bars"></use></svg><span class="menu-item-label"> {{'compare' | translate}}</span>
+          </div>
+          {openedMenu == 'comp' ? this.getComparisonsMenu() : null}
+        </div>
+
+        <div class="r menu">
+          <div class="menu-header" ng-class="{selected: openedMenu=='settings'}" ng-click="openMenu($event,'settings')">
+            <svg class="icon xl warning"><use xlink:href="#cogs"></use></svg><span class="menu-item-label"> {{'settings' | translate}}</span>
+          </div>
+          {openedMenu == 'settings' ? this.getSettingsMenu() : null}
+        </div>
+      </header>
+    );
+  }
+
+  getShipsMenu() {
+    return (<div class="menu-list dbl no-wrap">
+            <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>);
+  }
+
+  getBuildsMenu() {
+    return (<div class="menu-list" ng-if="openedMenu=='b'" ng-click="$event.stopPropagation();">
+            <div class="dbl" >
+              <div><ul ng-repeat="shipId in buildsList">
+                {{ships[shipId].properties.name}}
+                <li ng-repeat="(i, name) in cleanedBuildList(shipId)">
+                  <a ui-sref-active="active" class="name" ui-sref="outfit({shipId:shipId, code:allBuilds[shipId][name], bn:name})" ng-bind="name"></a>
+                </li>
+              </ul></div>
+            </div>
+          </div>);
+  }
+
+  getComparisonsMenu() {
+    return (<div class="menu-list" ng-if="openedMenu=='comp'" ng-click="$event.stopPropagation();" style="white-space: nowrap;">
+            <span class="cap" ng-if="!bs.hasComparisons" translate="none created"></span>
+            <a ng-repeat="(i, name) in allComparisons" ui-sref-active="active" class="block name" ui-sref="compare({name:name})" ng-bind="name"></a>
+            <hr />
+            <a ui-sref="compare({name: 'all'})" class="block cap" translate="compare all"></a>
+            <a ui-sref="compare({name: null})" class="block cap" translate="create new"></a>
+          </div>);
+  }
+
+  getSettingsMenu() {
+    return (<div class="menu-list no-wrap cap" ng-if="openedMenu=='settings'" ng-click="$event.stopPropagation();">
+            <ul>
+              {{'language' | translate}}
+              <li><select class="cap" ng-model="language.current" ng-options="langCode as langName for (langCode,langName) in language.opts" ng-change="changeLanguage()"></select></li>
+            </ul><br>
+            <ul>
+              {{'insurance' | translate}}
+              <li><select class="cap" ng-model="insurance.current" ng-options="ins.name | translate for (i,ins) in insurance.opts" ng-change="updateInsurance()"></select></li>
+            </ul><br>
+            <ul>
+              {{'ship' | translate}} {{'discount' | translate}}
+              <li><select class="cap" ng-model="discounts.ship" ng-options="i for (i,d) in discounts.opts" ng-change="updateDiscount()"></select></li>
+            </ul><br>
+            <ul>
+              {{'component' | translate}} {{'discount' | translate}}
+              <li><select class="cap" ng-model="discounts.components" ng-options="i for (i,d) in discounts.opts" ng-change="updateDiscount()"></select></li>
+            </ul>
+            <hr />
+            <ul>
+              {{'builds' | translate}} & {{'comparisons' | translate}}
+              <li><a href="#" class="block" ng-click="backup($event)" translate="backup"></a></li>
+              <li><a href="#" class="block" ng-click="detailedExport($event)" translate="detailed export"></a></li>
+              <li><a href="#" class="block" ui-sref="modal.import" translate="import"></a></li>
+              <li><a href="#" class="block" ui-sref="modal.delete" translate="delete all"></a></li>
+            </ul>
+            <hr />
+            <table style="width: 300px;background-color:transparent">
+              <tr>
+                <td style="width: 20px"><u>A</u></td>
+                <td slider min="0.65" def="sizeRatio" max="1.2" on-change="textSizeChange(val)" ignore-resize="true"></td>
+                <td style="width: 20px"><span style="font-size: 30px">A</span></td>
+              </tr>
+              <tr>
+               <td></td><td style="text-align:center" class="primary-disabled cap" ng-click="resetTextSize()" translate="reset"></td><td></td>
+              </tr>
+            </table>
+            <hr />
+            <a href="#" ui-sref="modal.about" class="block" translate="about"></a>
+          </div>);
+  }
+
+}

app/js/components/directive-area-chart.js

@@ -0,0 +1,164 @@
+angular.module('app').directive('areaChart', ['$window', '$translate', function($window, $translate) {
+  return {
+    restrict: 'A',
+    scope: {
+      config: '=',
+      series: '='
+    },
+    link: function(scope, element) {
+      var series = scope.series,
+          config = scope.config,
+          labels = config.labels,
+          margin = { top: 15, right: 15, bottom: 35, left: 60 },
+          fmt = d3.format('.3r'),
+          fmtLong = d3.format('.2f'),
+          func = series.func,
+          drag = d3.behavior.drag(),
+          dragging = false,
+          // Define Axes
+          xAxis = d3.svg.axis().outerTickSize(0).orient('bottom').tickFormat(d3.format('.2r')),
+          yAxis = d3.svg.axis().ticks(6).outerTickSize(0).orient('left').tickFormat(fmt),
+          x = d3.scale.linear(),
+          y = d3.scale.linear(),
+          data = [];
+
+      // Create chart
+      var svg = d3.select(element[0]).append('svg');
+      var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+      // Define Area
+      var area = d3.svg.area();
+
+      var gradient = vis.append('defs')
+        .append('linearGradient')
+        .attr('id', 'gradient')
+        .attr('x1', '0%').attr('y1', '0%')
+        .attr('x2', '100%').attr('y2', '100%')
+        .attr('spreadMethod', 'pad');
+      gradient.append('stop')
+        .attr('offset', '0%')
+        .attr('stop-color', '#ff8c0d')
+        .attr('stop-opacity', 1);
+      gradient.append('stop')
+        .attr('offset', '100%')
+        .attr('stop-color', '#ff3b00')
+        .attr('stop-opacity', 1);
+
+      // Create Y Axis SVG Elements
+      var yTxt = vis.append('g').attr('class', 'y axis')
+        .append('text')
+          .attr('class', 'cap')
+          .attr('transform', 'rotate(-90)')
+          .attr('y', -50)
+          .attr('dy', '.1em')
+          .style('text-anchor', 'middle')
+          .text($translate.instant(labels.yAxis.title) + ' (' + $translate.instant(labels.yAxis.unit) + ')');
+      // Create X Axis SVG Elements
+      var xLbl = vis.append('g').attr('class', 'x axis');
+      var xTxt = xLbl.append('text')
+          .attr('y', 30)
+          .attr('dy', '.1em')
+          .style('text-anchor', 'middle')
+          .text($translate.instant(labels.xAxis.title) + ' (' + $translate.instant(labels.xAxis.unit) + ')');
+
+      // Create and Add tooltip
+      var tip = vis.append('g').style('display', 'none');
+      tip.append('rect').attr('width', '4.5em').attr('height', '2em').attr('x', '0.5em').attr('y', '-1em').attr('class', 'tip');
+      tip.append('circle')
+        .attr('class', 'marker')
+        .attr('r', 4);
+      tip.append('text').attr('class', 'label x').attr('y', '-0.25em');
+      tip.append('text').attr('class', 'label y').attr('y', '0.85em');
+
+      vis.insert('path', ':first-child')   // Area/Path to appear behind everything else
+        .data([data])
+        .attr('class', 'area')
+        .attr('fill', 'url(#gradient)')
+        .attr('d', area)
+        .on('mouseover', showTip)
+        .on('mouseout', hideTip)
+        .on('mousemove', moveTip)
+        .call(drag);
+
+      drag
+        .on('dragstart', function() {
+          dragging = true;
+          moveTip.call(this);
+          showTip();
+        })
+        .on('dragend', function() {
+          dragging = false;
+          hideTip();
+        })
+        .on('drag', moveTip);
+
+      /**
+       * Watch for changes in the series data (mass changes, etc)
+       */
+      scope.$watchCollection('series', render);
+      angular.element($window).bind('orientationchange resize render', render);
+
+      function render() {
+        var width = element[0].parentElement.offsetWidth,
+            height = width * 0.5,
+            w = width - margin.left - margin.right,
+            h = height - margin.top - margin.bottom;
+
+        data.length = 0;  // Reset Data array
+
+        if (series.xMax == series.xMin) {
+          var yVal = func(series.xMin);
+          data.push([ series.xMin, yVal ]);
+          data.push([ series.xMin, yVal ]);
+          area.x(function(d, i) { return i * w; }).y0(h).y1(function(d) { return y(d[1]); });
+        } else {
+          for (var val = series.xMin; val <= series.xMax; val += 1) {
+            data.push([ val, func(val) ]);
+          }
+          area.x(function(d) { return x(d[0]); }).y0(h).y1(function(d) { return y(d[1]); });
+        }
+
+        // Update Chart Size
+        svg.attr('width', width).attr('height', height);
+        // Update domain and scale for axes
+        x.range([0, w]).domain([series.xMin, series.xMax]).clamp(true);
+        xAxis.scale(x);
+        xLbl.attr('transform', 'translate(0,' + h + ')');
+        xTxt.attr('x', w / 2);
+        y.range([h, 0]).domain([series.yMin, series.yMax]);
+        yAxis.scale(y);
+        yTxt.attr('x', -h / 2);
+        vis.selectAll('.y.axis').call(yAxis);
+        vis.selectAll('.x.axis').call(xAxis);
+
+        vis.selectAll('path.area')   // Area/Path to appear behind everything else
+          .data([data])
+          .attr('d', area);
+      }
+
+      function showTip() {
+       tip.style('display', null);
+      }
+
+      function hideTip() {
+        if (!dragging) {
+          tip.style('display', 'none');
+        }
+      }
+
+      function moveTip() {
+        var xPos = d3.mouse(this)[0], x0 = x.invert(xPos), y0 = func(x0), flip = (x0 / x.domain()[1] > 0.65);
+        tip.attr('transform', 'translate(' + x(x0) + ',' + y(y0) + ')');
+        tip.selectAll('rect').attr('x', flip ? '-5.75em' : '0.5em').style('text-anchor', flip ? 'end' : 'start');
+        tip.selectAll('text.label').attr('x', flip ? '-2em' : '1em').style('text-anchor', flip ? 'end' : 'start');
+        tip.select('text.label.x').text(fmtLong(x0) + ' ' + $translate.instant(labels.xAxis.unit));
+        tip.select('text.label.y').text(fmtLong(y0) + ' ' + $translate.instant(labels.yAxis.unit));
+      }
+
+      scope.$on('$destroy', function() {
+        angular.element($window).unbind('orientationchange resize render', render);
+      });
+
+    }
+  };
+}]);

app/js/components/directive-bar-chart.js

@@ -0,0 +1,134 @@
+angular.module('app').directive('barChart', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
+
+  function bName(build) {
+    return build.buildName + '\n' + build.name;
+  }
+
+  function insertLinebreaks(d) {
+    var el = d3.select(this);
+    var lines = d.split('\n');
+    el.text('').attr('y', -6);
+    for (var i = 0; i < lines.length; i++) {
+      var tspan = el.append('tspan').text(lines[i].length > 18 ? lines[i].substring(0, 15) + '...' : lines[i]);
+      if (i > 0) {
+        tspan.attr('x', -9).attr('dy', '1em');
+      } else {
+        tspan.attr('class', 'primary');
+      }
+    }
+  }
+
+  return {
+    restrict: 'A',
+    scope: {
+      data: '=',
+      facet: '='
+    },
+    link: function(scope, element) {
+      var color = d3.scale.ordinal().range([ '#7b6888', '#6b486b', '#3182bd', '#a05d56', '#d0743c']),
+          labels = scope.facet.lbls,
+          fmt = null,
+          unit = null,
+          properties = scope.facet.props,
+          margin = { top: 10, right: 20, bottom: 40, left: 150 },
+          y0 = d3.scale.ordinal(),
+          y1 = d3.scale.ordinal(),
+          x = d3.scale.linear(),
+          yAxis = d3.svg.axis().scale(y0).outerTickSize(0).orient('left'),
+          xAxis = d3.svg.axis().scale(x).ticks(5).outerTickSize(0).orient('bottom');
+
+      // Create chart
+      var svg = d3.select(element[0]).append('svg');
+      var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+
+      // Create and Add tooltip
+      var tip = d3.tip()
+        .attr('class', 'd3-tip')
+        .html(function(property, propertyIndex) {
+          return (labels ? ($translate.instant(labels[propertyIndex]) + ': ') : '') + fmt(property.value) + ' ' + unit;
+        });
+
+      vis.call(tip);
+
+      // Create Y Axis SVG Elements
+      vis.append('g').attr('class', 'y axis');
+      vis.selectAll('g.y.axis g text').each(insertLinebreaks);
+      // Create X Axis SVG Elements
+      var xAxisLbl = vis.append('g')
+          .attr('class', 'x axis cap')
+        .append('text')
+          .attr('y', 33)
+          .attr('dy', '.1em')
+          .style('text-anchor', 'middle');
+
+      updateFormats();
+
+      function render() {
+        var data = scope.data,
+            width = element[0].offsetWidth,
+            w = width - margin.left - margin.right,
+            height = 50 + (30 * data.length * $rootScope.sizeRatio),
+            h = height - margin.top - margin.bottom,
+            maxVal = d3.max(data, function(d) { return d3.max(properties, function(p) {return d[p]; }); });
+
+        // Update chart size
+        svg.attr('width', width).attr('height', height);
+
+        // Remove existing elements
+        vis.selectAll('.ship').remove();
+        vis.selectAll('rect').remove();
+
+        // Update X & Y Axis
+        x.range([0, w]).domain([0, maxVal]);
+        y0.domain(data.map(bName)).rangeRoundBands([0, h], 0.3);
+        y1.domain(properties).rangeRoundBands([0, y0.rangeBand()]);
+        vis.selectAll('.y.axis').call(yAxis);
+        vis.selectAll('.x.axis').attr('transform', 'translate(0,' + h + ')').call(xAxis);
+        xAxisLbl.attr('x', w / 2);
+        // Update Y-Axis labels
+        vis.selectAll('g.y.axis g text').each(insertLinebreaks);
+
+        var group = vis.selectAll('.ship')
+          .data(scope.data, bName)
+          .enter().append('g')
+            .attr('class', 'g')
+            .attr('transform', function(build) { return 'translate(0,' + y0(bName(build)) + ')'; });
+
+        group.selectAll('rect')
+          .data(function(build) {
+            var o = [];
+            for (var i = 0; i < properties.length; i++) {
+              o.push({ name: properties[i], value: build[properties[i]] });
+            }
+            return o;
+          })
+        .enter().append('rect')
+          .attr('height', y1.rangeBand())
+          .attr('x', 0)
+          .attr('y', function(d) {return y1(d.name); })
+          .attr('width', function(d) { return x(d.value); })
+          .on('mouseover', tip.show)
+          .on('mouseout', tip.hide)
+          .style('fill', function(d) { return color(d.name); });
+
+      }
+
+      function updateFormats() {
+        fmt = $rootScope[scope.facet.fmt];
+        unit = $translate.instant(scope.facet.unit);
+        xAxisLbl.text($translate.instant(scope.facet.title) + (unit ? (' (' + $translate.instant(unit) + ')') : ''));
+        xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2s'));
+        render();
+      }
+
+      angular.element($window).bind('orientationchange resize render', render);
+      scope.$watchCollection('data', render); // Watch for changes in the comparison array
+      scope.$on('languageChanged', updateFormats);
+      scope.$on('$destroy', function() {
+        angular.element($window).unbind('orientationchange resize render', render);
+        tip.destroy(); // Remove the tooltip from the DOM
+      });
+
+    }
+  };
+}]);

app/js/components/directive-comparison-table.js

@@ -0,0 +1,80 @@
+angular.module('app').directive('comparisonTable', ['$state', '$translate', '$rootScope', function($state, $translate, $rootScope) {
+
+  function tblHeader(facets) {
+    var r1 = ['<tr class="main"><th rowspan="2" class="prop" prop="name">', $translate.instant('SHIP'), '</th><th rowspan="2" class="prop" prop="buildName">', $translate.instant('BUILD'), '</th>'];
+    var r2 = [];
+    for (var i = 0, l = facets.length; i < l; i++) {
+      if (facets[i].active) {
+        var f = facets[i];
+        var p = f.props;
+        var pl = p.length;
+        r1.push('<th rowspan="', f.props.length == 1 ? 2 : 1, '" colspan="', pl, '"');
+
+        if (pl == 1) {
+          r1.push(' prop="', p[0], '" class="prop"');
+        } else {
+          for (var j = 0; j < pl; j++) {
+            r2.push('<th prop="', p[j], '" class="prop ', j === 0 ? 'lft' : '', '">', $translate.instant(f.lbls[j]), '</th>');
+          }
+        }
+
+        r1.push('>', $translate.instant(f.title), '</th>');
+      }
+    }
+    r1.push('</tr><tr>');
+    r1.push(r2.join(''));
+    r1.push('</tr>');
+    return r1.join('');
+  }
+
+  function tblBody(facets, builds) {
+    var body = [];
+
+    if (builds.length === 0) {
+      return '<td colspan="100" class="cen">No builds added to comparison!</td';
+    }
+
+    for (var i = 0, l = builds.length; i < l; i++) {
+      var b = builds[i];
+      body.push('<tr class="tr">');
+      var href = $state.href('outfit', { shipId: b.id, code: b.code, bn: b.buildName });
+      body.push('<td class="tl"><a href="', href, '">', b.name, '</a></td>');
+      body.push('<td class="tl"><a href="', href, '">', b.buildName, '</a></td>');
+
+      for (var j = 0, fl = facets.length; j < fl; j++) {
+        if (facets[j].active) {
+          var f = facets[j];
+          var p = f.props;
+          for (var k = 0, pl = p.length; k < pl; k++) {
+            body.push('<td>', $rootScope[f.fmt](b[p[k]]), '<u> ', $translate.instant(f.unit), '</u></td>');
+          }
+        }
+      }
+      body.push('</tr>');
+    }
+
+    return body.join('');
+  }
+
+  return {
+    restrict: 'A',
+
+    link: function(scope, element) {
+      var header = angular.element('<thead></thead>');
+      var body = angular.element('<tbody></tbody>');
+      element.append(header);
+      element.append(body);
+
+      var updateAll = function() {
+        header.html(tblHeader(scope.facets));
+        body.html(tblBody(scope.facets, scope.builds));
+      };
+
+      scope.$watchCollection('facets', updateAll);
+      scope.$watch('tblUpdate', updateAll);
+      scope.$watchCollection('builds', function() {
+        body.html(tblBody(scope.facets, scope.builds));
+      });
+    }
+ };
+}]);

app/js/components/directive-component-select.js

@@ -0,0 +1,90 @@
+angular.module('app').directive('componentSelect', ['$translate', function($translate) {
+
+  // Generting the HTML in this manner is MUCH faster than using an angular template.
+
+  function appendGroup(list, opts, cid, mass, checkWarning) {
+    var prevClass = null, prevRating = null;
+    for (var i = 0; i < opts.length; i++) {
+      var o = opts[i];
+      var id = o.id || (o.class + o.rating);  // Standard components' ID is their class and rating
+
+      if (i > 0 && opts.length > 3 && o.class != prevClass && (o.rating != prevRating || o.mode) && o.grp != 'pa') {
+        list.push('<br/>');
+      }
+
+      list.push('<li class="', o.name ? 'lc' : 'c');
+
+      if (cid == id) {
+        list.push(' active');
+      }
+
+      if (checkWarning && checkWarning(opts[i])) {
+        list.push(' warning');
+      }
+
+      list.push(((o.maxmass && (mass + (o.mass ? o.mass : 0)) > o.maxmass) ? ' disabled"' : '" cpid="' + id + '"'), '>');
+
+      if (o.mode) {
+        list.push('<svg class="icon lg"><use xlink:href="#mount-', o.mode, '"></use></svg> ');
+      }
+
+      list.push('<span>', o.class, o.rating);
+
+      if (o.missile) {
+        list.push('/' + o.missile);
+      }
+
+
+      if (o.name) {
+        list.push(' ' + $translate.instant(o.name));
+      }
+
+      list.push('</span></li>');
+      prevClass = o.class;
+      prevRating = o.rating;
+    }
+  }
+
+  return {
+    restrict: 'A',
+    scope: {
+      opts: '=',    // Component Options object
+      groups: '=',  // Groups of Component Options
+      mass: '=',    // Current ship mass
+      s: '=',       // Current Slot
+      warning: '='  // Check warning function
+    },
+    link: function(scope, element) {
+      var list = [];
+      var cid = scope.s.id; // Slot's current component id
+      var component = scope.s.c;  // Slot's Current Component (may be null/undefined)
+      var opts = scope.opts;
+      var groups = scope.groups;
+      var mass = (scope.mass ? scope.mass : 0) - (component && component.mass ? component.mass : 0); // Mass minus the currently selected component
+
+      if (groups) {
+        // At present time slots with grouped options (Hardpoints and Internal) can be empty
+        list.push('<div class="empty-c upp" cpid="empty">', $translate.instant('empty'), '</div>');
+        for (var g in groups) {
+          var grp = groups[g];
+          var grpCode = grp[Object.keys(grp)[0]].grp; // Nasty operation to get the grp property of the first/any single component
+          list.push('<div id="', grpCode, '" class="select-group cap">', $translate.instant(g), '</div><ul>');
+          appendGroup(list, grp, cid, mass, scope.warning);
+          list.push('</ul>');
+        }
+      } else {
+        list.push('<ul>');
+        appendGroup(list, opts, cid, mass, scope.warning);
+        list.push('</ul>');
+      }
+
+      element.html(list.join(''));
+      // If groups are present and a component is already selectd
+      if (groups && component && component.grp) {
+          var groupElement = angular.element(document.getElementById(component.grp));
+          var parentElem = element[0].parentElement;
+          parentElem.scrollTop = groupElement[0].offsetTop; // Scroll to currently selected group
+      }
+    }
+  };
+}]);

app/js/components/directive-header.js

@@ -0,0 +1,114 @@
+angular.module('app').directive('shipyardHeader', ['lodash', '$window', '$rootScope', '$state', 'Persist', 'Serializer', 'ShipsDB', function(_, $window, $rootScope, $state, Persist, Serializer, ships) {
+
+
+  return {
+    restrict: 'E',
+    templateUrl: 'views/_header.html',
+    scope: true,
+    link: function(scope) {
+      scope.openedMenu = null;
+      scope.ships = ships;
+      scope.allBuilds = Persist.builds;
+      scope.buildsList = Object.keys(scope.allBuilds).sort();
+      scope.allComparisons = Object.keys(Persist.comparisons).sort();
+      scope.bs = Persist.state;
+
+      var win = angular.element($window);   // Angularized window object for event triggering
+      var insIndex = _.findIndex($rootScope.insurance.opts, 'name', Persist.getInsurance());
+      var savedDiscounts = Persist.getDiscount() || [1, 1];
+      $rootScope.insurance.current = $rootScope.insurance.opts[insIndex != -1 ? insIndex : 0];
+      $rootScope.discounts.ship = savedDiscounts[0];
+      $rootScope.discounts.components = savedDiscounts[1];
+
+      /**
+       * Save selected insurance option
+       */
+      scope.updateInsurance = function() {
+        Persist.setInsurance($rootScope.insurance.current.name);
+      };
+
+      /**
+       * Save selected discount option
+       */
+      scope.updateDiscount = function() {
+        Persist.setDiscount([$rootScope.discounts.ship, $rootScope.discounts.components]);
+        $rootScope.$broadcast('discountChange');
+      };
+
+      scope.backup = function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        scope.openedMenu = null;
+        $state.go('modal.export', {
+          title: 'backup',
+          data: Persist.getAll(),
+          description: 'PHRASE_BACKUP_DESC'
+        });
+      };
+
+      scope.detailedExport = function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        scope.openedMenu = null;
+        $state.go('modal.export', {
+          title: 'detailed export',
+          data: Serializer.toDetailedExport(scope.allBuilds),
+          description: 'PHRASE_EXPORT_DESC'
+        });
+      };
+
+      scope.cleanedBuildList = function(shipId) {
+        return Object.keys(scope.allBuilds[shipId]);
+      };
+
+      scope.openMenu = function(e, menu) {
+        e.stopPropagation();
+        if (menu == scope.openedMenu) {
+          scope.openedMenu = null;
+          return;
+        }
+
+        if ((menu == 'comp' || menu == 'b') && !scope.bs.hasBuilds) {
+          scope.openedMenu = null;
+          return;
+        }
+
+        if (menu == 'comp') {
+          scope.allComparisons = Object.keys(Persist.comparisons).sort();
+        }
+
+        scope.openedMenu = menu;
+      };
+
+      // Close menus if a navigation change event occurs
+      $rootScope.$on('$stateChangeStart', function() {
+        scope.openedMenu = null;
+      });
+
+      // Listen to close event to close opened menus or modals
+      $rootScope.$on('close', function() {
+        scope.openedMenu = null;
+      });
+
+      scope.textSizeChange = function(size) {
+        if (size != $rootScope.sizeRatio) {
+          $rootScope.sizeRatio = size;
+          document.getElementById('main').style.fontSize = size + 'em';
+          Persist.setSizeRatio(size);
+          win.triggerHandler('resize');
+        }
+      };
+
+      scope.resetTextSize = function() {
+        if ($rootScope.sizeRatio != 1) {
+          scope.textSizeChange(1);
+          scope.$broadcast('reset', 1);
+        }
+      };
+
+      scope.$watchCollection('allBuilds', function() {
+        scope.buildsList = Object.keys(scope.allBuilds).sort();
+      });
+    }
+  };
+}]);

app/js/components/directive-line-chart.js

@@ -0,0 +1,247 @@
+angular.module('app').directive('lineChart', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
+
+  var RENDER_POINTS = 20;   // Only render 20 points on the graph
+
+  return {
+    restrict: 'A',
+    scope: {
+      config: '=',
+      series: '='
+    },
+    link: function(scope, element) {
+      var seriesConfig = scope.series,
+          series = seriesConfig.series,
+          color = d3.scale.ordinal().range(scope.series.colors ? scope.series.colors : ['#ff8c0d']),
+          config = scope.config,
+          labels = config.labels,
+          margin = { top: 15, right: 15, bottom: 35, left: 60 },
+          fmtLong = null,
+          func = seriesConfig.func,
+          drag = d3.behavior.drag(),
+          dragging = false,
+          // Define Scales
+          x = d3.scale.linear(),
+          y = d3.scale.linear(),
+          // Define Axes
+          xAxis = d3.svg.axis().scale(x).outerTickSize(0).orient('bottom'),
+          yAxis = d3.svg.axis().scale(y).ticks(6).outerTickSize(0).orient('left'),
+          data = [];
+
+      // Create chart
+      var svg = d3.select(element[0]).append('svg');
+      var vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+      var lines = vis.append('g');
+
+      // Define Area
+      var line = d3.svg.line().y(function(d) { return y(d[1]); });
+
+      // Create Y Axis SVG Elements
+      var yTxt = vis.append('g').attr('class', 'y axis')
+        .append('text')
+          .attr('class', 'cap')
+          .attr('transform', 'rotate(-90)')
+          .attr('y', -50)
+          .attr('dy', '.1em')
+          .style('text-anchor', 'middle');
+
+      // Create X Axis SVG Elements
+      var xLbl = vis.append('g').attr('class', 'x axis');
+      var xTxt = xLbl.append('text')
+          .attr('class', 'cap')
+          .attr('y', 30)
+          .attr('dy', '.1em')
+          .style('text-anchor', 'middle');
+
+      // xTxt.append('tspan').attr('class', 'metric');
+      // yTxt.append('tspan').attr('class', 'metric');
+
+      // Create and Add tooltip
+      var tipHeight = 2 + (1.25 * (series ? series.length : 0.75));
+      var tips = vis.append('g').style('display', 'none').attr('class', 'tooltip');
+      var markers = vis.append('g').style('display', 'none');
+
+      tips.append('rect')
+        .attr('height', tipHeight + 'em')
+        .attr('y', (-tipHeight / 2) + 'em')
+        .attr('class', 'tip');
+
+      tips.append('text')
+        .attr('class', 'label x')
+        .attr('dy', (-tipHeight / 2) + 'em')
+        .attr('y', '1.25em');
+
+      var background = vis.append('rect') // Background to capture hover/drag
+        .attr('fill-opacity', 0)
+        .on('mouseover', showTip)
+        .on('mouseout', hideTip)
+        .on('mousemove', moveTip)
+        .call(drag);
+
+      drag
+        .on('dragstart', function() {
+          dragging = true;
+          moveTip.call(this);
+          showTip();
+        })
+        .on('dragend', function() {
+          dragging = false;
+          hideTip();
+        })
+        .on('drag', moveTip);
+
+      updateFormats();
+
+      function render() {
+        var width = element[0].parentElement.offsetWidth,
+            height = width * 0.5 * $rootScope.sizeRatio,
+            xMax = seriesConfig.xMax,
+            xMin = seriesConfig.xMin,
+            yMax = seriesConfig.yMax,
+            yMin = seriesConfig.yMin,
+            w = width - margin.left - margin.right,
+            h = height - margin.top - margin.bottom,
+            c, s, val, yVal, delta;
+
+        data.length = 0;  // Reset Data array
+
+        if (seriesConfig.xMax == seriesConfig.xMin) {
+          line.x(function(d, i) { return i * w; });
+        } else {
+          line.x(function(d) { return x(d[0]); });
+        }
+
+        if (series) {
+          for (s = 0; s < series.length; s++) {
+            data.push([]);
+          }
+
+          if (xMax == xMin) {
+            yVal = func(xMin);
+            for (s = 0; s < series.length; s++) {
+              data[s].push( [ xMin, yVal[ series[s] ] ], [ 1, yVal[ series[s] ] ]);
+            }
+          } else {
+            delta = (xMax - xMin) / RENDER_POINTS;
+            val = 0;
+            for (c = 0; c <= RENDER_POINTS; c++) {
+              yVal = func(val);
+              for (s = 0; s < series.length; s++) {
+                data[s].push([ val, yVal[ series[s] ] ]);
+              }
+              val += delta;
+            }
+          }
+
+        } else {
+          var seriesData = [];
+          if (xMax == xMin) {
+            yVal = func(xMin);
+            seriesData.push([ xMin, yVal ], [ 1, yVal ]);
+          } else {
+            delta = (xMax - xMin) / RENDER_POINTS;
+            val = 0;
+            for (c = 0; c <= RENDER_POINTS; c++) {
+              seriesData.push([val, func(val) ]);
+              val += delta;
+            }
+          }
+
+          data.push(seriesData);
+        }
+
+        // Update Chart Size
+        svg.attr('width', width).attr('height', height);
+        background.attr('height', h).attr('width', w);
+
+        // Update domain and scale for axes
+        x.range([0, w]).domain([xMin, xMax]).clamp(true);
+        xLbl.attr('transform', 'translate(0,' + h + ')');
+        xTxt.attr('x', w / 2);
+        y.range([h, 0]).domain([yMin, yMax]);
+        yTxt.attr('x', -h / 2);
+        vis.selectAll('.y.axis').call(yAxis);
+        vis.selectAll('.x.axis').call(xAxis);
+
+        lines.selectAll('path.line')
+          .data(data)
+            .attr('d', line)    // Update existing series
+          .enter()              // Add new series
+            .append('path')
+            .attr('class', 'line')
+            .attr('stroke', function(d, i) { return color(i); })
+            .attr('stroke-width', 2)
+            .attr('d', line);
+
+        tips.selectAll('text.label.y').data(data).enter()
+          .append('text')
+            .attr('class', 'label y')
+            .attr('dy', (-tipHeight / 2) + 'em')
+            .attr('y', function(d, i) { return 1.25 * (i + 2) + 'em'; });
+
+        markers.selectAll('circle.marker').data(data).enter().append('circle').attr('class', 'marker').attr('r', 4);
+      }
+
+      function showTip() {
+       tips.style('display', null);
+       markers.style('display', null);
+      }
+
+      function hideTip() {
+        if (!dragging) {
+          tips.style('display', 'none');
+          markers.style('display', 'none');
+        }
+      }
+
+      function moveTip() {
+        var xPos = d3.mouse(this)[0],
+            x0 = x.invert(xPos),
+            y0 = func(x0),
+            yTotal = 0,
+            flip = (x0 / x.domain()[1] > 0.65),
+            tipWidth = 0,
+            minTransY = (tips.selectAll('rect').node().getBoundingClientRect().height / 2) - margin.top;
+
+        tips.selectAll('text.label.y').text(function(d, i) {
+          var yVal = series ? y0[series[i]] : y0;
+          yTotal += yVal;
+          return (series ? $translate.instant(series[i]) : '') + ' ' + fmtLong(yVal);
+        }).append('tspan').attr('class', 'metric').text(' ' + $translate.instant(labels.yAxis.unit));
+
+        tips.selectAll('text').each(function() {
+          if (this.getBBox().width > tipWidth) {
+            tipWidth = Math.ceil(this.getBBox().width);
+          }
+        });
+
+        tipWidth += 8;
+        markers.selectAll('circle.marker').attr('cx', x(x0)).attr('cy', function(d, i) { return y(series ? y0[series[i]] : y0); });
+        tips.selectAll('text.label').attr('x', flip ? -12 : 12).style('text-anchor', flip ? 'end' : 'start');
+        tips.selectAll('text.label.x').text(fmtLong(x0)).append('tspan').attr('class', 'metric').text(' ' + $translate.instant(labels.xAxis.unit));
+        tips.attr('transform', 'translate(' + x(x0) + ',' + Math.max(minTransY, y(yTotal / (series ? series.length : 1))) + ')');
+        tips.selectAll('rect')
+          .attr('width', tipWidth + 4)
+          .attr('x', flip ? -tipWidth - 12 : 8)
+          .style('text-anchor', flip ? 'end' : 'start');
+
+      }
+
+      function updateFormats() {
+        xTxt.text($translate.instant(labels.xAxis.title)).append('tspan').attr('class', 'metric').text(' (' + $translate.instant(labels.xAxis.unit) + ')');
+        yTxt.text($translate.instant(labels.yAxis.title)).append('tspan').attr('class', 'metric').text(' (' + $translate.instant(labels.yAxis.unit) + ')');
+        fmtLong = $rootScope.localeFormat.numberFormat('.2f');
+        xAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
+        yAxis.tickFormat($rootScope.localeFormat.numberFormat('.3r'));
+        render();
+      }
+
+      angular.element($window).bind('orientationchange resize render', render);
+      scope.$watchCollection('series', render);   // Watch for changes in the series data
+      scope.$on('languageChanged', updateFormats);
+      scope.$on('$destroy', function() {
+        angular.element($window).unbind('orientationchange resize render', render);
+      });
+
+    }
+  };
+}]);

app/js/components/directive-loader.js

@@ -0,0 +1,9 @@
+angular.module('app').directive('loader', function() {
+  return {
+    restrict: 'A',
+    link: function(scope, element) {
+      element.addClass('loader');
+      element.html('<svg viewbox="0 0 40 40" width="100%" height="100%"><path d="m5,8l5,8l5,-8z" class="l1 d1" /><path d="m5,8l5,-8l5,8z" class="l1 d2" /><path d="m10,0l5,8l5,-8z" class="l1 d3" /><path d="m15,8l5,-8l5,8z" class="l1 d4" /><path d="m20,0l5,8l5,-8z" class="l1 d5" /><path d="m25,8l5,-8l5,8z" class="l1 d6" /><path d="m25,8l5,8l5,-8z" class="l1 d7" /><path d="m30,16l5,-8l5,8z" class="l1 d8" /><path d="m30,16l5,8l5,-8z" class="l1 d9" /><path d="m25,24l5,-8l5,8z" class="l1 d10" /><path d="m25,24l5,8l5,-8z" class="l1 d11" /><path d="m20,32l5,-8l5,8z" class="l1 d13" /><path d="m15,24l5,8l5,-8z" class="l1 d14" /><path d="m10,32l5,-8l5,8z" class="l1 d15" /><path d="m5,24l5,8l5,-8z" class="l1 d16" /><path d="m5,24l5,-8l5,8z" class="l1 d17" /><path d="m0,16l5,8l5,-8z" class="l1 d18" /><path d="m0,16l5,-8l5,8z" class="l1 d20" /><path d="m10,16l5,-8l5,8z" class="l2 d0" /><path d="m15,8l5,8l5,-8z" class="l2 d3" /><path d="m20,16l5,-8l5,8z" class="l2 d6" /><path d="m20,16l5,8l5,-8z" class="l2 d9" /><path d="m15,24l5,-8l5,8z" class="l2 d12" /><path d="m10,16l5,8l5,-8z" class="l2 d15" /></svg>');
+    }
+ };
+});

app/js/components/directive-power-bands.js

@@ -0,0 +1,209 @@
+angular.module('app').directive('powerBands', ['$window', '$translate', '$rootScope', function($window, $translate, $rootScope) {
+  return {
+    restrict: 'A',
+    scope: {
+      bands: '=',
+      available: '='
+    },
+    link: function(scope, element) {
+      var bands = null,
+          available = 0,
+          maxBand,
+          maxPwr,
+          deployedSum = 0,
+          retractedSum = 0,
+          retBandsSelected = false,
+          depBandsSelected = false,
+          wattScale = d3.scale.linear(),
+          pctScale = d3.scale.linear().domain([0, 1]),
+          wattFmt,
+          pctFmt,
+          wattAxis = d3.svg.axis().scale(wattScale).outerTickSize(0).orient('top'),
+          pctAxis = d3.svg.axis().scale(pctScale).outerTickSize(0).orient('bottom'),
+          // Create chart
+          svg = d3.select(element[0]).append('svg'),
+          vis = svg.append('g'),
+          deployed = vis.append('g').attr('class', 'power-band'),
+          retracted = vis.append('g').attr('class', 'power-band');
+
+      svg.on('contextmenu', function() {
+        if (!d3.event.shiftKey) {
+          d3.event.preventDefault();
+          for (var i = 0, l = bands.length; i < l; i++) {
+            bands[i].retSelected = false;
+            bands[i].depSelected = false;
+          }
+          dataChange();
+        }
+      });
+
+      // Create Y Axis SVG Elements
+      var wattAxisGroup = vis.append('g').attr('class', 'watt axis');
+      vis.append('g').attr('class', 'pct axis');
+      var retText = vis.append('text').attr('x', -3).style('text-anchor', 'end').attr('dy', '0.5em').attr('class', 'primary upp');
+      var depText = vis.append('text').attr('x', -3).style('text-anchor', 'end').attr('dy', '0.5em').attr('class', 'primary upp');
+      var retLbl = vis.append('text').attr('dy', '0.5em');
+      var depLbl = vis.append('text').attr('dy', '0.5em');
+
+      updateFormats(true);
+
+      function dataChange() {
+        bands = scope.bands;
+        available = scope.available;
+        maxBand = bands[bands.length - 1];
+        deployedSum = 0;
+        retractedSum = 0;
+        retBandsSelected = false;
+        depBandsSelected = false;
+        maxPwr = Math.max(available, maxBand.retractedSum, maxBand.deployedSum);
+
+        for (var b = 0, l = bands.length; b < l; b++) {
+          if (bands[b].retSelected) {
+            retractedSum += bands[b].retracted + bands[b].retOnly;
+            retBandsSelected = true;
+          }
+          if (bands[b].depSelected) {
+            deployedSum += bands[b].deployed + bands[b].retracted;
+            depBandsSelected = true;
+          }
+        }
+
+        render();
+      }
+
+      function render() {
+        var size = $rootScope.sizeRatio,
+            mTop = Math.round(25 * size),
+            mRight = Math.round(130 * size),
+            mBottom = Math.round(25 * size),
+            mLeft = Math.round(45 * size),
+            barHeight = Math.round(20 * size),
+            width = element[0].offsetWidth,
+            innerHeight = (barHeight * 2) + 2,
+            height = innerHeight + mTop + mBottom,
+            w = width - mLeft - mRight,
+            repY = (barHeight / 2),
+            depY = (barHeight * 1.5) - 1;
+
+        // Update chart size
+        svg.attr('width', width).attr('height', height);
+        vis.attr('transform', 'translate(' + mLeft + ',' + mTop + ')');
+
+        // Remove existing elements
+        retracted.selectAll('rect').remove();
+        retracted.selectAll('text').remove();
+        deployed.selectAll('rect').remove();
+        deployed.selectAll('text').remove();
+        wattAxisGroup.selectAll('line.threshold').remove();
+
+        // Update X & Y Axis
+        wattScale.range([0, w]).domain([0, maxPwr]).clamp(true);
+        pctScale.range([0, w]).domain([0, maxPwr / available]).clamp(true);
+        wattAxisGroup.call(wattAxis);
+        vis.selectAll('.pct.axis').attr('transform', 'translate(0,' + innerHeight + ')').call(pctAxis);
+
+        var pwrWarningClass = 'threshold' + (bands[0].retractedSum * 2 >= available ? ' exceeded' : '');
+        vis.select('.pct.axis g:nth-child(6)').selectAll('line, text').attr('class', pwrWarningClass);
+
+        wattAxisGroup.append('line')
+          .attr('x1', pctScale(0.5))
+          .attr('x2', pctScale(0.5))
+          .attr('y1', 0)
+          .attr('y2', innerHeight)
+          .attr('class', pwrWarningClass);
+
+        retText.attr('y', repY);
+        depText.attr('y', depY);
+        updateLabel(retLbl, w, repY, retBandsSelected, retBandsSelected ? retractedSum : maxBand.retractedSum, available);
+        updateLabel(depLbl, w, depY, depBandsSelected, depBandsSelected ? deployedSum : maxBand.deployedSum, available);
+
+        retracted.selectAll('rect').data(bands).enter().append('rect')
+          .attr('height', barHeight)
+          .attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.retracted + d.retOnly), 0)); })
+          .attr('x', function(d) { return Math.floor(Math.max(wattScale(d.retractedSum) - wattScale(d.retracted + d.retOnly), 0)); })
+          .attr('y', 1)
+          .on('click', function(d) {
+            d.retSelected = !d.retSelected;
+            dataChange();
+          })
+          .attr('class', function(d) { return getClass(d.retSelected, d.retractedSum, available); });
+
+        retracted.selectAll('text').data(bands).enter().append('text')
+          .attr('x', function(d) { return wattScale(d.retractedSum) - (wattScale(d.retracted + d.retOnly) / 2); })
+          .attr('y', repY)
+          .attr('dy', '0.5em')
+          .style('text-anchor', 'middle')
+          .attr('class', 'primary-bg')
+          .on('click', function(d) {
+            d.retSelected = !d.retSelected;
+            dataChange();
+          })
+          .text(function(d, i) { return bandText(d.retracted + d.retOnly, i); });
+
+        deployed.selectAll('rect').data(bands).enter().append('rect')
+          .attr('height', barHeight)
+          .attr('width', function(d) { return Math.ceil(Math.max(wattScale(d.deployed + d.retracted), 0)); })
+          .attr('x', function(d) { return Math.floor(Math.max(wattScale(d.deployedSum) - wattScale(d.retracted) - wattScale(d.deployed), 0)); })
+          .attr('y', barHeight + 1)
+          .on('click', function(d) {
+            d.depSelected = !d.depSelected;
+            dataChange();
+          })
+          .attr('class', function(d) { return getClass(d.depSelected, d.deployedSum, available); });
+
+        deployed.selectAll('text').data(bands).enter().append('text')
+          .attr('x', function(d) { return wattScale(d.deployedSum) - ((wattScale(d.retracted) + wattScale(d.deployed)) / 2); })
+          .attr('y', depY)
+          .attr('dy', '0.5em')
+          .style('text-anchor', 'middle')
+          .attr('class', 'primary-bg')
+          .on('click', function(d) {
+            d.depSelected = !d.depSelected;
+            dataChange();
+          })
+          .text(function(d, i) { return bandText(d.deployed + d.retracted, i); });
+      }
+
+      function updateLabel(lbl, width, y, selected, sum, avail) {
+        lbl
+          .attr('x', width + 5 )
+          .attr('y', y)
+          .attr('class', getClass(selected, sum, avail))
+          .text(wattFmt(Math.max(0, sum)) + ' (' + pctFmt(Math.max(0, sum / avail)) + ')');
+      }
+
+      function getClass(selected, sum, avail) {
+        // Round to avoid floating point precision errors
+        return selected ? 'secondary' : ((Math.round(sum * 100) / 100) >= avail) ? 'warning' : 'primary';
+      }
+
+      function bandText(val, index) {
+        if (val > 0 && wattScale(val) > 13) {
+          return index + 1;
+        }
+        return '';
+      }
+
+      function updateFormats(preventRender) {
+        retText.text($translate.instant('ret'));
+        depText.text($translate.instant('dep'));
+        wattFmt = $rootScope.localeFormat.numberFormat('.2f');
+        pctFmt = $rootScope.localeFormat.numberFormat('.1%');
+        wattAxis.tickFormat($rootScope.localeFormat.numberFormat('.2r'));
+        pctAxis.tickFormat($rootScope.localeFormat.numberFormat('%'));
+        if (!preventRender) {
+          render();
+        }
+      }
+
+      // Watch for changes to data and events
+      angular.element($window).bind('pwrchange', dataChange);
+      angular.element($window).bind('orientationchange resize', render);
+      scope.$watchCollection('available', dataChange);
+      scope.$on('languageChanged', updateFormats);
+      scope.$on('$destroy', function() {
+        angular.element($window).unbind('orientationchange resize pwrchange', render);
+      });
+    }
+  };
+}]);

app/js/components/directive-slider.js

@@ -0,0 +1,90 @@
+angular.module('app').directive('slider', ['$window', function($window) {
+
+  return {
+    restrict: 'A',
+    scope: {
+      min: '=',
+      def: '=',
+      max: '=',
+      unit: '=',
+      change: '&onChange',
+      ignoreResize: '='
+    },
+    link: function(scope, element) {
+      var unit = scope.unit,
+          margin = unit ? { top: -10, right: 145, left: 50 } : { top: 0, right: 10, left: 10 },
+          height = unit ? 40 : 20,    // Height is fixed
+          h = height - margin.top,
+          fmt = d3.format('.2f'),
+          pct = d3.format('.1%'),
+          def = scope.def !== undefined ? scope.def : scope.max,
+          val = def,
+          svg = d3.select(element[0]).append('svg'),
+          vis = svg.append('g').attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'),
+          xAxisContainer = vis.append('g').attr('class', 'x slider-axis').attr('transform', 'translate(0,' + h / 2 + ')'),
+          x = d3.scale.linear(),
+          xAxis = d3.svg.axis().scale(x).orient('bottom').tickFormat(function(d) { return d + unit; }).tickSize(0).tickPadding(12),
+          slider = vis.append('g').attr('class', 'slider'),
+          filled = slider.append('path').attr('class', 'filled').attr('transform', 'translate(0,' + h / 2 + ')'),
+          brush = d3.svg.brush().x(x).extent([scope.max, scope.max]).on('brush', brushed),
+          handle = slider.append('circle').attr('class', 'handle').attr('r', '0.6em'),
+          lbl = unit ? slider.append('g').append('text').attr('y', h / 2) : null;
+
+      slider.call(brush);
+      slider.select('.background').attr('height', h);
+      handle.attr('transform', 'translate(0,' + h / 2 + ')');
+
+      function render() {
+        var width = element[0].offsetWidth, w = width - margin.left - margin.right;
+        svg.attr('width', width).attr('height', height);
+        x.domain([scope.min || 0, scope.max]).range([0, w]).clamp(true);
+        handle.attr('cx', x(val));
+        if (unit) {
+          xAxisContainer.call(xAxis.tickValues([0, scope.max / 4, scope.max / 2, (3 * scope.max) / 4, scope.max]));
+          lbl.attr('x', w + 20);
+        }
+        slider.call(brush.extent([val, val]));
+        drawBrush();
+        slider.selectAll('.extent,.resize').remove();
+      }
+
+      function brushed() {
+        val = x.invert(d3.mouse(this)[0]);
+        brush.extent([val, val]);
+        scope.change({ val: val });
+        drawBrush();
+      }
+
+      function drawBrush() {
+        if (unit) {
+          lbl.text(fmt(val) + ' ' + unit + ' ' + pct(val / scope.max));
+        }
+        handle.attr('cx', x(val));
+        filled.attr('d', 'M0,0V0H' + x(val) + 'V0');
+      }
+
+      /**
+       * Watch for changes in the max, window size
+       */
+      scope.$watch('max', function(newMax, oldMax) {
+        val = newMax * (val / oldMax); // Retain percentage filled
+        scope.change({ val: val });
+        render();
+      });
+
+      if (!scope.ignoreResize) {
+        angular.element($window).bind('orientationchange resize', render);
+      }
+
+      scope.$on('reset', function(e, resetVal) {
+        val = resetVal;
+        drawBrush();
+      });
+
+      scope.$on('$destroy', function() {
+        angular.element($window).unbind('orientationchange resize render', render);
+      });
+
+    }
+  };
+}]);

app/js/components/directive-slot-hardpoint.js

@@ -0,0 +1,13 @@
+angular.module('app').directive('slotHardpoint', ['$rootScope', function($r) {
+  return {
+    restrict: 'A',
+    scope: {
+      hp: '=',
+      size: '='
+    },
+    templateUrl: 'views/_slot-hardpoint.html',
+    link: function(scope) {
+      scope.$r = $r;
+    }
+ };
+}]);

app/js/components/directive-slot-internal.js

@@ -0,0 +1,13 @@
+angular.module('app').directive('slotInternal', ['$rootScope', function($r) {
+  return {
+    restrict: 'A',
+    scope: {
+      c: '=slot',
+      fuel: '='
+    },
+    templateUrl: 'views/_slot-internal.html',
+    link: function(scope) {
+      scope.$r = $r;
+    }
+ };
+}]);