Modifications menu shows absolute stat values

src/app/components/Modification.jsx

@@ -59,9 +59,9 @@ export default class Modification extends TranslatedComponent {
 
   /**
    * Triggered when an update to slider value is finished i.e. when losing focus
-   * 
-   * pnellesen (24/05/2018): added value check below - this should prevent experimental effects from being recalculated 
-   * with each onBlur event, even when no change has actually been made to the field. 
+   *
+   * pnellesen (24/05/2018): added value check below - this should prevent experimental effects from being recalculated
+   * with each onBlur event, even when no change has actually been made to the field.
    */
   _updateFinished() {
     if (this.props.value != this.state.value) {
@@ -76,6 +76,7 @@ export default class Modification extends TranslatedComponent {
    */
   render() {
     let translate = this.context.language.translate;
+    let formats = this.context.language.formats;
     let { m, name } = this.props;
 
     if (name === 'damagedist') {
@@ -96,7 +97,34 @@ export default class Modification extends TranslatedComponent {
     return (
       <div onBlur={this._updateFinished.bind(this)} className={'cb'} key={name} ref={ modItem => this.props.modItems[name] = modItem }>
         <div className={'cb'}>{translate(name, m.grp)}{symbol}</div>
-        <NumberEditor className={'cb'} style={{ width: '90%', textAlign: 'center' }} step={0.01} stepModifier={1} decimals={2} value={this.state.value} onValueChange={this._updateValue.bind(this)} onKeyDown={ this.props.onKeyDown } />
+        <table style={{ width: '100%' }}>
+          <tbody>
+            <tr>
+              <td style={{ width: '50%' }}>
+                {/* thermload doesn't have any values set therefore we ignore it */}
+                <div>{this.props.name !== 'thermload' &&
+                  this.props.m.formatModifiedValue(
+                    this.props.name,
+                    this.context.language
+                  )
+                }</div>
+              </td>
+              <td style={{ width: '50%' }}>
+                {this.props.editable ?
+                  <NumberEditor className={'cb'} value={this.state.value}
+                    style={{ textAlign: 'center' }}
+                    step={0.01} stepModifier={1} decimals={2}
+                    onValueChange={this._updateValue.bind(this)}
+                    onKeyDown={ this.props.onKeyDown } /> :
+                  <div>
+                    <input type="text" value={formats.f2(this.state.value)}
+                      disabled style={{ textAlign: 'center', cursor: 'inherit' }}/>
+                  </div>
+                }
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     );
   }

src/app/components/ModificationsMenu.jsx

@@ -124,7 +124,7 @@ export default class ModificationsMenu extends TranslatedComponent {
           // Initial modification menu
           event.preventDefault();
           this.modItems[this.lastModId].focus();
-          return;        
+          return;
         } else  if (event.currentTarget.className.indexOf('button-inline-menu') >= 0 && event.currentTarget.previousElementSibling == null && this.lastNeId != null && this.modItems[this.lastNeId] != null) {
           // shift-tab on first element in modifications menu. set focus to last number editor field if open
           event.preventDefault();
@@ -210,10 +210,30 @@ export default class ModificationsMenu extends TranslatedComponent {
       if (!Modifications.modifications[modName].hidden) {
         const key = modName + (m.getModValue(modName) / 100 || 0);
         this.lastNeId = modName;
-        modifications.push(<Modification key={ key } ship={ ship } m={ m } name={ modName } value={ m.getModValue(modName) / 100 || 0 } onChange={ onChange } onKeyDown={ this._keyDown } modItems={ this.modItems } handleModChange = {this._handleModChange} />);
+        modifications.push(<Modification key={ key } ship={ ship } m={ m }
+          value={ m.getModValue(modName) / 100 || 0 } modItems={ this.modItems }
+          onChange={ onChange } onKeyDown={ this._keyDown }
+          editable={modName !== 'fallofffromrange' &&
+            m.blueprint.grades[m.blueprint.grade].features[modName]
+          } name={ modName } handleModChange = {this._handleModChange} />);
       }
     }
-    return modifications;
+
+    // If the module can inflict damage we can show damage related stats
+    const hardPointStats = ['dps', 'dpe', 'eps', 'hps', 'sdps'];
+    if (m.getDamage()) {
+      for (const stat of hardPointStats) {
+        modifications.push(<Modification key={stat} ship={ship} name={stat}
+          m={m} onChange={() => { }} onKeyDown={() => { }} editable={false}
+          handleModChange={() => { }} modItems={this.modItems}
+          value={ m.getModValue(stat) / 100 || 0 } />);
+      }
+    }
+
+    this.modifications = modifications.sort(
+      (mod1, mod2) => mod1.props.name.localeCompare(mod2.props.name)
+    );
+    return this.modifications;
   }
 
   /**

src/less/slot.less

@@ -45,6 +45,11 @@
     border-color:#fff;
   }
 
+  input:disabled {
+    border-color: #888;
+    color: #888;
+  }
+
   .l {
     text-transform: capitalize;
     margin-right: 0.8em;