Compare Highlight in Shipyard

src/app/pages/ShipyardPage.jsx

@@ -126,12 +126,13 @@ export default class ShipyardPage extends Page {
       title: 'Coriolis EDCD Edition - Shipyard',
       shipPredicate: 'name',
       shipDesc: true,
-      shipSummaries: ShipyardPage.cachedShipSummaries
+      shipSummaries: ShipyardPage.cachedShipSummaries,
+      compare: {},
     };
   }
 
   /**
-   * Higlight the current ship in the table
+   * Higlight the current ship in the table on mouse over
    * @param  {String} shipId Ship Id
    * @param  {SyntheticEvent} event  Event
    */
@@ -140,6 +141,16 @@ export default class ShipyardPage extends Page {
     this.setState({ shipId });
   }
 
+  /**
+   * Toggle compare highlighting for ships in the table
+   * @param {String} shipId Ship Id
+   */
+  _toggleCompare(shipId) {
+    let compare = this.state.compare;
+    compare[shipId] = !compare[shipId];
+    this.setState({ compare });
+  }
+
   /**
    * Update state with the specified sort predicates
    * @param  {String} shipPredicate      Sort predicate - property name
@@ -180,8 +191,10 @@ export default class ShipyardPage extends Page {
         style={{ height: '1.5em' }}
         className={cn({
           highlighted: noTouch && this.state.shipId === s.id,
+          "compare-highlight": this.state.compare[s.id],
         })}
         onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
+        onClick={() => this._toggleCompare(s.id)}
       >
         <td className="ri">{s.manufacturer}</td>
         <td className="ri">{fInt(s.retailCost)}</td>
@@ -298,8 +311,10 @@ export default class ShipyardPage extends Page {
           style={{ height: '1.5em' }}
           className={cn({
             highlighted: noTouch && this.state.shipId === s.id,
+            "compare-highlight": this.state.compare[s.id],
           })}
           onMouseEnter={noTouch && this._highlightShip.bind(this, s.id)}
+          onClick={() => this._toggleCompare(s.id)}
         >
           <td className="le">
             <Link href={'/outfit/' + s.id}>{s.name} {s.beta === true ? '(Beta)' : null}</Link>
@@ -321,7 +336,7 @@ export default class ShipyardPage extends Page {
             maxWidth: '100%'
           }}
         >
-          <table style={{ width: '12em', position: 'absolute', zIndex: 1 }}>
+          <table style={{ width: '12em', position: 'absolute', zIndex: 1 }} className="shipyard-table">
             <thead>
               <tr>
                 <th className="le rgt">&nbsp;</th>
@@ -340,7 +355,7 @@ export default class ShipyardPage extends Page {
             </tbody>
           </table>
           <div style={{ overflowX: 'scroll', maxWidth: '100%' }}>
-            <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }}>
+            <table style={{ marginLeft: 'calc(12em - 1px)', zIndex: 0 }} className="shipyard-table">
               <thead>
                 <tr className="main">
                   <th

src/less/colors.less

@@ -2,6 +2,7 @@
 @bgDarken: 40%;
 @disabledDarken: 15%;
 @bgTransparency: 10%;
+@bgHighlight: 5%;
 
 // Foreground colors
 @fg: #CCC;
@@ -21,9 +22,12 @@
 @bgBlack: #000;
 @primary-bg: fadeout(darken(@primary, 47%), 15%);
 @alt-primary-bg: fadeout(darken(@primary, 42%), 15%); // Lighter brown background
-@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Brown background
+@secondary-bg: fadeout(darken(@secondary, @bgDarken), @bgTransparency); // Blue background
 @warning-bg: fadeout(darken(@warning, @bgDarken), @bgTransparency); // Dark Red
 
+@alt-primary-bg-highlighted: lighten(@alt-primary-bg, @bgHighlight);
+
+
 
 .fg {
   color: @fg;

src/less/table.less

@@ -52,7 +52,7 @@ tbody tr {
   }
 
   .no-touch &.highlight:hover, .no-touch &.highlighted {
-    background-color: @warning-bg;
+    background-color: @alt-primary-bg-highlighted; //@warning-bg;
   }
 
   &:nth-child(odd){
@@ -84,3 +84,9 @@ td {
     text-align: center;
   }
 }
+
+table.shipyard-table{
+  tbody tr.compare-highlight{
+    background-color: @secondary-bg;
+  }
+}