Refactoring of just about everything, interface beginning to come together

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

@@ -2,15 +2,14 @@ angular.module('app').directive('componentSelect', [ function() {
   return {
     restrict: 'A',
     scope:{
-      opts: '=',
-      c: '=',
-      ship: '='
+      opts: '=',                  // Component Options object
+      slot: '=',                  // Slot Object
+      selectComponent: '&sc'      // Select Component function
     },
     templateUrl: 'views/component_select.html',
     link: function (scope) {
-      scope.use = function(id, componentData) {
-        scope.ship.use(scope.c, id, componentData);
-        // hide this shit;
+      scope.use = function(id, component) {
+        scope.selectComponent({s: scope.slot, id: id, c: component});
       };
     }
   };

app/js/directives/directive-hardpoint.js

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

app/js/directives/directive-list-cost.js

@@ -6,6 +6,7 @@ angular.module('app').directive('costList', ['$rootScope', function ($r) {
     },
     templateUrl: 'views/costs.html',
     link: function (scope) {
+      scope.expanded = false;
       scope.$r = $r;
       scope.insuranceOptions = {
         Alpha: 0.975,
@@ -14,6 +15,10 @@ angular.module('app').directive('costList', ['$rootScope', function ($r) {
       };
       scope.insurance = scope.insuranceOptions.Standard;
 
+      scope.toggleExpand = function() {
+        scope.expanded = !scope.expanded;
+      }
+
       scope.toggle = function(item) {
         item.incCost = !item.incCost;
         scope.ship.updateTotals();

app/js/directives/directive-list-power.js

@@ -7,8 +7,13 @@ angular.module('app')
       },
       templateUrl: 'views/power.html',
       link: function (scope) {
+        scope.expanded = false;
         scope.$r = $r;
 
+        scope.toggleExpand = function() {
+          scope.expanded = !scope.expanded;
+        }
+
         scope.toggle = function(slot) {
           slot.enabled = !slot.enabled;
           scope.ship.updateTotals();

app/js/directives/directive-meter.js

@@ -0,0 +1,77 @@
+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);
+    }
+  };
+});

app/js/directives/directive-ship-range.js

@@ -0,0 +1,52 @@
+angular.module('app').directive('shipRange', ['$rootScope','CalcJumpRange', function ($r, calcJumpRange) {
+
+  return {
+    restrict: 'A',
+    scope:{
+      ship: '='
+    },
+    templateUrl: 'views/ship-range.html',
+    link: function(scope, element) {
+      scope.$r = $r;
+      scope.expanded = false;
+      var fsd = scope.ship.common[2].c;
+
+      scope.toggleExpand = function() {
+        scope.expanded = !scope.expanded;
+      }
+
+      function ranges(fsd, unladenMass, ladenMass) {
+        var ranges = [];
+        for(var m = unladenMass; m <= ladenMass; m++) {
+          ranges.push({x:m, y: calcJumpRange(m, fsd)});
+        }
+        return ranges;
+      }
+
+      //var fDist = d3.format(',.2f');
+
+      //scope.data = ranges(fsd, scope.ship.unladenMass, scope.ship.ladenMass);
+      /*scope.options = {
+        axes: {
+          x: {key: 'x', type: 'linear', ticks: 10},
+          y: {type: 'linear', ticks: 5, }
+        },
+        series: [
+          {y: 'y', color: '#FF8C0D', thickness: '2px', type: 'area', striped: false, label: 'Range'}
+        ],
+        lineMode: 'basis',
+        tension: 0.7,
+        tooltip: {
+          mode: 'scrubber',
+
+          formatter: function(x, y, series) {
+            return fDist(y) + ' Light Years';
+          }
+        },
+        drawLegend: false,
+        drawDots: false,
+        columnsHGap: 5
+      };*/
+    }
+ };
+}]);

app/js/directives/directive-slot-details.js

@@ -1,4 +1,4 @@
-angular.module('app').directive('slotDetails', function () {
+angular.module('app').directive('slotDetails', ['$rootScope', function ($r) {
   return {
     restrict: 'A',
     scope:{
@@ -6,6 +6,9 @@ angular.module('app').directive('slotDetails', function () {
       lbl: '=',
       opts: '='
     },
-    templateUrl: 'views/slot.html'
+    templateUrl: 'views/slot.html',
+    link: function(scope) {
+      scope.$r = $r;
+    }
  };
-});
+}]);