Allow selection of blueprints type and grade

src/app/components/ModificationsMenu.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import TranslatedComponent from './TranslatedComponent';
-import { stopCtxPropagation } from '../utils/UtilityFunctions';
+import { isEmpty, stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
@@ -40,10 +40,12 @@ export default class ModificationsMenu extends TranslatedComponent {
     let blueprints = [];
     for (const blueprintName in Modifications.modules[m.grp].blueprints) {
       for (const grade of Modifications.modules[m.grp].blueprints[blueprintName]) {
-        blueprints.push(<div>{Modifications.blueprints[blueprintName].name} grade {grade}</div>);
+        const close = this._closeMenu.bind(this, Modifications.blueprints[blueprintName].id, grade);
+        blueprints.push(<div onClick={close}>{Modifications.blueprints[blueprintName].name} grade {grade}</div>);
       }
     }
 
+    // Set up the modifications
     let modifications = [];
     for (const modName of Modifications.modules[m.grp].modifications) {
       if (Modifications.modifications[modName].type === 'percentage' || Modifications.modifications[modName].type === 'numeric') {
@@ -51,7 +53,24 @@ export default class ModificationsMenu extends TranslatedComponent {
       }
     }
 
-    return { blueprints, modifications };
+    const blueprintMenuOpened = false;
+
+    return { blueprintMenuOpened, blueprints, modifications };
+  }
+
+  _openMenu() {
+    const blueprintMenuOpened = true;
+    this.setState({ blueprintMenuOpened });
+  }
+
+  _closeMenu(blueprintId, grade) {
+    const { m } = this.props;
+    const blueprint = Object.assign({}, _.find(Modifications.blueprints, function(o) { return o.id === blueprintId; }));
+    blueprint.grade = grade;
+    m.blueprint = blueprint;
+
+    const blueprintMenuOpened = false;
+    this.setState({ blueprintMenuOpened });
   }
 
   /**
@@ -59,16 +78,32 @@ export default class ModificationsMenu extends TranslatedComponent {
    * @return {React.Component} List
    */
   render() {
-    let { tooltip, termtip } = this.context;
+    const language = this.context.language;
+    const translate = language.translate;
+    const { tooltip, termtip } = this.context;
+    const { m } = this.props;
+    const { blueprintMenuOpened } = this.state;
+    const open = this._openMenu.bind(this);
+
+    let blueprintLabel;
+    if (m.blueprint && !isEmpty(m.blueprint)) {
+      blueprintLabel = translate(m.blueprint.name) + ' ' + translate('grade') + ' ' + m.blueprint.grade;
+    } else {
+      blueprintLabel = translate('select a blueprint');
+    }
+
     return (
       <div
           className={cn('select', this.props.className)}
           onClick={(e) => e.stopPropagation() }
           onContextMenu={stopCtxPropagation}
-          onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} 
       >
-        {this.state.blueprints}
-        {this.state.modifications}
+        {blueprintMenuOpened && this.state.blueprints}
+        {!blueprintMenuOpened && <div className={cn('section-menu', { selected: blueprintMenuOpened })} style={{cursor: 'pointer'}} onClick={open}>{blueprintLabel}</div>}
+        {!blueprintMenuOpened &&
+          <span onMouseOver={termtip.bind(null, 'HELP_MODIFICATIONS_MENU')} onMouseOut={tooltip.bind(null, null)} >
+            {this.state.modifications}
+          </span> }
       </div>
     );
   }

src/app/utils/UtilityFunctions.js

@@ -71,3 +71,15 @@ export function shallowEqual(objA, objB) {
 export function fromUrlSafe(data) {
   return data ? data.replace(/-/g, '/').replace(/_/g, '+') : null;
 }
+
+/**
+ * Check if an object is empty
+ * @param {object} obj the object
+ * @return {bool} true if the object is empty, otherwise false
+ */
+export function isEmpty(obj) {
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) return false;
+  }
+  return true;
+};