Add tooltips for blueprints

ChangeLog.md

@@ -9,6 +9,7 @@
   * Reset old modification values when a new roll is applied
   * Ensure that boost value is set correctly when modifications to power distributor enable/disable boost
   * Ensure that hull reinforcement modifications take the inherent resistance in to account when calculating modification percentages
+  * Add tooltip for blueprints providing details of the features they alter
 
 #2.2.19
   * Power management panel now displays modules in descending order of power usage by default

src/app/components/ModificationsMenu.jsx

@@ -43,7 +43,7 @@ export default class ModificationsMenu extends TranslatedComponent {
    */
   _initState(props, context) {
     let { m } = props;
-    const { language } = context;
+    const { language, tooltip, termtip } = context;
     const translate = language.translate;
 
     // Set up the blueprints
@@ -52,7 +52,8 @@ export default class ModificationsMenu extends TranslatedComponent {
       for (const grade of Modifications.modules[m.grp].blueprints[blueprintName]) {
         const close = this._blueprintSelected.bind(this, Modifications.blueprints[blueprintName].id, grade);
         const key = blueprintName + ':' + grade;
-        blueprints.push(<div style={{ cursor: 'pointer' }} key={ key } onClick={ close }>{translate(Modifications.blueprints[blueprintName].name + ' grade ' + grade)}</div>);
+        const tooltipContent = this._blueprintTooltip(translate, Modifications.blueprints[blueprintName].grades[grade].features);
+        blueprints.push(<div style={{ cursor: 'pointer' }} key={ key } onMouseOver={termtip.bind(null, tooltipContent)} onMouseOut={tooltip.bind(null, null)} onClick={ close }>{translate(Modifications.blueprints[blueprintName].name + ' grade ' + grade)}</div>);
       }
     }
 
@@ -76,6 +77,51 @@ export default class ModificationsMenu extends TranslatedComponent {
     return { blueprintMenuOpened, blueprints, modifications, specialMenuOpened, specials };
   }
 
+  /**
+   * Generate a tooltip with details of a blueprint's effects
+   * @param   {Object}  features    The features of the blueprint
+   * @returns {Object}              The react components
+   */
+  _blueprintTooltip(translate, features)
+  {
+    const results = [];
+    for (const feature in features) {
+      const featureIsBeneficial = this._isBeneficial(feature, features[feature]);
+      const featureDef = Modifications.modifications[feature];
+      if (!featureDef.hidden) {
+        let symbol = '';
+        if (feature === 'jitter') {
+          symbol = '°';
+	} else if (featureDef.type === 'percentage') {
+          symbol = '%';
+	}
+        let lowerBound = features[feature][0];
+        let upperBound = features[feature][1];
+        if (featureDef.type === 'percentage') {
+          lowerBound = Math.round(lowerBound * 1000) / 10;
+          upperBound = Math.round(upperBound * 1000) / 10;
+	}
+        const range = `${lowerBound}${symbol} - ${upperBound}${symbol}`;
+        results.push(<tr key={feature} className={featureIsBeneficial ? 'secondary' : 'warning'}><td style={{ textAlign: 'left' }}>{translate(feature)}</td><td style={{ textAlign: 'right' }}>{lowerBound}{symbol}</td><td style={{ textAlign: 'right' }}>{upperBound}{symbol}</td></tr>);
+      }
+    }
+
+    return (
+      <table>
+        <thead>
+         <tr>
+           <td>{translate('effect')}</td>
+           <td>{translate('worst')}</td>
+           <td>{translate('best')}</td>
+         </tr>
+        </thead>
+        <tbody>
+          {results}
+        </tbody>
+      </table>
+    );
+  }
+
   /**
    * Initialise the modifications
    * @param  {Object} props   React Component properties
@@ -244,6 +290,19 @@ export default class ModificationsMenu extends TranslatedComponent {
     this.props.onChange();
   }
 
+  /**
+   * Is this feature beneficial?
+   * 
+   */
+  _isBeneficial(feature, values) {
+    const fact = (values[0] < 0 || (values[0] === 0 && values[1] < 0));
+    if (Modifications.modifications[feature].higherbetter) {
+      return !fact;
+    } else {
+      return fact;
+    }
+  }
+
   /**
    * Reset modification information
    */
@@ -276,11 +335,11 @@ export default class ModificationsMenu extends TranslatedComponent {
 
     let blueprintLabel;
     let haveBlueprint = false;
+    let blueprintTooltip;
     if (m.blueprint && !isEmpty(m.blueprint)) {
       blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
       haveBlueprint = true;
-    } else {
-      blueprintLabel = translate('PHRASE_SELECT_BLUEPRINT');
+      blueprintTooltip  = this._blueprintTooltip(translate, m.blueprint.grades[m.blueprint.grade].features);
     }
 
     let specialLabel;
@@ -291,7 +350,7 @@ export default class ModificationsMenu extends TranslatedComponent {
     }
 
     const showBlueprintsMenu = blueprintMenuOpened;
-    const showSpecial = haveBlueprint && this.state.specials.length > 0;
+    const showSpecial = haveBlueprint && this.state.specials.length > 0 && !blueprintMenuOpened;
     const showSpecialsMenu = specialMenuOpened;
     const showRolls = haveBlueprint && !blueprintMenuOpened && !specialMenuOpened;
     const showReset = !blueprintMenuOpened && !specialMenuOpened;
@@ -303,7 +362,10 @@ export default class ModificationsMenu extends TranslatedComponent {
           onClick={(e) => e.stopPropagation() }
           onContextMenu={stopCtxPropagation}
       >
-        <div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu}>{blueprintLabel}</div>
+        { haveBlueprint ? 
+          <div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onMouseOver={termtip.bind(null, blueprintTooltip)} onMouseOut={tooltip.bind(null, null)} onClick={_toggleBlueprintsMenu}>{blueprintLabel}</div>
+        : 
+          <div className={ cn('section-menu', { selected: blueprintMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleBlueprintsMenu}>{translate('PHRASE_SELECT_BLUEPRINT')}</div> }
         { showBlueprintsMenu ? this.state.blueprints : null }
         { showSpecial ? <div className={ cn('section-menu', { selected: specialMenuOpened })} style={{ cursor: 'pointer' }} onClick={_toggleSpecialsMenu}>{specialLabel}</div> : null }
         { showSpecialsMenu ? this.state.specials : null }