Power Distributor required for Boost. Resolves #17

app/js/controllers/controller-outfit.js

@@ -371,6 +371,10 @@ angular.module('app').controller('OutfitController', ['$window', '$rootScope', '
     $scope.costTab = tab;
   };
 
+  $scope.pdWarning = function(pd) {
+    return pd.enginecapacity < ship.boostEnergy;
+  }
+
   // Hide any open menu/slot/etc if the background is clicked
   $scope.$on('close', function() {
     $scope.selectedSlot = null;

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

@@ -2,7 +2,7 @@ angular.module('app').directive('componentSelect', function() {
 
   // Generting the HTML in this manner is MUCH faster than using an angular template.
 
-  function appendGroup(list, opts, cid, mass) {
+  function appendGroup(list, opts, cid, mass, checkWarning) {
     var prevClass = null, prevRating = null;
     for (var i = 0; i < opts.length; i++) {
       var o = opts[i];
@@ -18,6 +18,10 @@ angular.module('app').directive('componentSelect', function() {
         list.push(' active');
       }
 
+      if (checkWarning && checkWarning(opts[i])) {
+        list.push(' warning');
+      }
+
       list.push((o.maxmass && mass > o.maxmass) ? ' disabled"' : '" cpid="', id, '">');
 
       if (o.mode) {
@@ -47,7 +51,8 @@ angular.module('app').directive('componentSelect', function() {
       opts: '=',    // Component Options object
       groups: '=',  // Groups of Component Options
       mass: '=',    // Current ship unladen mass
-      s: '='       // Current Slot
+      s: '=',       // Current Slot
+      warning: '=', // Check warning function
     },
     link: function(scope, element) {
       var list = [];
@@ -64,12 +69,12 @@ angular.module('app').directive('componentSelect', function() {
           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">', g, '</div><ul>');
-          appendGroup(list, grp, cid, mass);
+          appendGroup(list, grp, cid, mass, scope.warning);
           list.push('</ul>');
         }
       } else {
         list.push('<ul>');
-        appendGroup(list, opts, cid, mass);
+        appendGroup(list, opts, cid, mass, scope.warning);
         list.push('</ul>');
       }
 

app/less/colors.less

@@ -66,3 +66,7 @@
   color: @warning-disabled;
   fill: @warning-disabled;
 }
+
+.bg-warning-disabled {
+  background-color: @warning-disabled;
+}

app/less/select.less

@@ -77,18 +77,10 @@ select {
     stroke: @primary-disabled;
 
     &:hover {
+      border-color: @primary;
       color: @primary;
       stroke: @primary;
     }
-    &.disabled {
-      cursor: not-allowed;
-      color: @disabled;
-      stroke: @disabled;
-    }
-    &.active {
-      color: @secondary;
-      stroke: @secondary;
-    }
   }
 
   .lc, .c {
@@ -96,15 +88,27 @@ select {
     padding: 0.1em 0.2em;
     margin: 0.3em;
 
-    &:hover {
-      border:1px solid @primary;
+    &.warning {
+      border-color: @warning-disabled;
+      color: @warning-disabled;
+      stroke: @warning-disabled;
+
+      &:hover {
+        border-color: @warning;
+        color: @warning;
+        stroke: @warning;
+      }
     }
 
     &.disabled {
-      border:1px solid @disabled;
+      border-color: @disabled;
+      color: @disabled;
+      stroke: @disabled;
     }
     &.active {
-      border:1px solid @secondary;
+      border-color: @secondary;
+      color: @secondary;
+      stroke: @secondary;
     }
   }
 

app/views/page-outfit.html

@@ -32,7 +32,7 @@
           <th rowspan="2">Size</th>
           <th rowspan="2">Agility</th>
           <th rowspan="2">Speed</th>
-          <th rowspan="2">Boost</th>
+          <th rowspan="2" ng-class="{'bg-warning-disabled': pd.c.enginecapacity < ship.boostEnergy}">Boost</th>
           <th rowspan="2">DPS</th>
           <th rowspan="2">Armour</th>
           <th rowspan="2">Shields</th>
@@ -60,7 +60,10 @@
           <td ng-bind="SZ[ship.class]"></td>
           <td>{{ship.agility}}/10</td>
           <td>{{fRound(ship.speed)}} <u>m/s</u></td>
-          <td>{{fRound(ship.boost)}} <u>m/s</u></td>
+          <td>
+            <span ng-if="pd.c.enginecapacity >= ship.boostEnergy">{{fRound(ship.boost)}} <u>m/s</u></span>
+            <span class="warning" ng-if="pd.c.enginecapacity < ship.boostEnergy">0 <svg class="icon"><use xlink:href="#warning"></use></svg></span>
+          </td>
           <td>{{fRound(ship.totalDps)}}</td>
           <td>
             {{ship.armour}}
@@ -148,7 +151,7 @@
       <div component-select class="select" s="ls" opts="availCS.common[3]" ng-if="selectedSlot==ls" ng-click="select('c',ls,$event)"></div>
     </div>
     <div class="slot" ng-click="selectSlot($event, pd)" ng-class="{selected: selectedSlot==pd}">
-      <div class="details">
+      <div class="details" ng-class="{warning: pd.c.enginecapacity < ship.boostEnergy}">
         <div class="sz">{{::pd.maxClass}}</div>
         <div class="l">{{pd.id}} Power Distributor</div>
         <div class="r">{{pd.c.mass}} <u>T</u></div>
@@ -157,7 +160,7 @@
         <div class="l">SYS: {{pd.c.systemcapacity}} <u>MJ</u> / {{pd.c.systemrecharge}} <u>MW</u></div>
         <div class="l">ENG: {{pd.c.enginecapacity}} <u>MJ</u> / {{pd.c.enginerecharge}} <u>MW</u></div>
       </div>
-      <div component-select class="select" s="pd" opts="availCS.common[4]" ng-if="selectedSlot==pd" ng-click="select('c',pd,$event)"></div>
+      <div component-select class="select" s="pd" warning="pdWarning" 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">