Use react-number-editor for modifications

package.json

@@ -89,7 +89,7 @@
     "fbemitter": "^2.0.0",
     "lodash": "^4.15.0",
     "lz-string": "^1.4.4",
-    "react-numeric-input": "^2.0.6",
+    "react-number-editor": "^4.0.2",
     "react": "^15.0.1",
     "react-dom": "^15.0.1",
     "superagent": "^1.4.0"

src/app/components/ModSlider.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { findDOMNode } from 'react-dom';
-import Slider from './Slider';
-
-const MARGIN_LR = 8; // Left/ Right margin
-
-/**
- * Horizontal Slider for modifications
- */
-export default class ModSlider extends Slider {
-
-  /**
-   * Constructor
-   * @param  {Object} props   React Component properties
-   */
-  constructor(props) {
-    super(props);
-  }
-
-  /**
-   * Render the slider
-   * @return {React.Component} The slider
-   */
-  render() {
-    let outerWidth = this.state.outerWidth;
-    let { axis, axisUnit, min, max, scale } = this.props;
-
-    let style = {
-      width: '100%',
-      height: axis ? '2.5em' : '1.5em',
-      boxSizing: 'border-box'
-    };
-
-    if (!outerWidth) {
-      return <svg style={style} />;
-    }
-
-    let margin = MARGIN_LR * scale;
-    let width = outerWidth - (margin * 2);
-    let pctPos = width * this.props.percent + margin;
-
-    // TODO add this back in from zero point to value
-    // <rect className='primary-disabled' x={margin} y='0.45em' rx='0.15em' ry='0.15em' width={pctPos} height='0.3em' />
-    // TODO fix locations for labels (min, 0, max)
-    return <svg onMouseUp={this._up} onMouseEnter={this._enter.bind(this)} onMouseMove={this._move} onTouchEnd={this._up} style={style}>
-      <rect className='primary' style={{ opacity: 0.3, fillOpacity: 0 }} x={margin} y='0.25em' rx='0.3em' ry='0.3em' width={width} height='0.7em' />
-      <circle className='primary' r={margin} cy='0.6em' style={{ strokeWidth: 0, fillOpacity: 1 }} cx={pctPos} />
-      <rect x={margin} width={width} height='100%' fillOpacity='0' style={{ cursor: 'col-resize' }} onMouseDown={this._down} onTouchMove={this._move} onTouchStart={this._down} />
-      {axis && <g style={{ fontSize: '.7em' }}>
-        <text className='primary-disabled' y='3em' x={margin} style={{ textAnchor: 'middle' }}>{min + axisUnit}</text>
-        <text className='primary-disabled' y='3em' x='50%' style={{ textAnchor: 'middle' }}>{(min + max / 2) + axisUnit}</text>
-        <text className='primary-disabled' y='3em' x='100%' style={{ textAnchor: 'end' }}>{max + axisUnit}</text>
-      </g>}
-    </svg>;
-  }
-}

src/app/components/ModificationsMenu.jsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { findDOMNode } from 'react-dom';
-import NumericInput from 'react-numeric-input';
 import TranslatedComponent from './TranslatedComponent';
 import { stopCtxPropagation } from '../utils/UtilityFunctions';
 import cn from 'classnames';
 import { MountFixed, MountGimballed, MountTurret } from './SvgIcons';
 import { Modifications } from 'coriolis-data/dist';
-import ModSlider from './ModSlider';
+import NumberEditor from 'react-number-editor';
 
 const PRESS_THRESHOLD = 500; // mouse/touch down threshold
 
@@ -46,12 +45,10 @@ export default class ModificationsMenu extends TranslatedComponent {
     for (let modId of Modifications.validity[m.grp]) {
       let modifiers = Modifications.modifiers[modId]
       list.push(<div className={'cb'} key={modId}>
-		  <div className={'l'}>{translate(modifiers.name)}</div>
-		  <span className={'r'}>{formats.pct(m.getModValue(modId) || 0)}</span>
-		  <ModSlider axis={true} axisUnit ={'%'} className={'cb'} min={modifiers.min || -1} max={modifiers.max || 1} percent={this._getSliderPercent(modId)} onChange={this._updateValue.bind(this, modId)} />
+		  <div className={'cb'}>{translate(modifiers.name)}{' (%)'}</div>
+		  <NumberEditor className={'cb'} style={'width: 100%, text-align: center'} step={0.01} stepModifier={1} decimals={2} initialValue={m.getModValue(modId) ? m.getModValue(modId) * 100 : 0} value={m.getModValue(modId) ? m.getModValue(modId) * 100 : 0} onValueChange={this._updateValue.bind(this, modId)} />
                 </div>);
     }
-		  //<NumericInput className={'r'} min={-100} max={100} step={0.1} precision={2} value={m.getModValue(modId) * 100} onChange={this._updateValue.bind(this, modId)} />
 
     return { list };
   }
@@ -71,34 +68,15 @@ export default class ModificationsMenu extends TranslatedComponent {
    * @param {Number} value The value to set, in the range [0,1]
    */
   _updateValue(modId, value) {
+    let scaledValue = Math.floor(value * 100) / 10000;
+
     let m = this.props.m;
     let ship = this.props.ship;
 
-    let modifiers = Modifications.modifiers[modId];
-    let max = modifiers.max || 1;
-    let min = modifiers.min || -1;
-    let scaledValue = min + ((max - min) * value);
-
     ship.setModification(m, modId, scaledValue);
     this.props.onChange();
   }
 
-  /**
-   * Obtain slider value from a modification.
-   * @param {Number} modId The ID of the modification
-   * @return {Number} value The value of the slider, in the range [0,1]
-   */
-  _getSliderPercent(modId) {
-    let modifiers = Modifications.modifiers[modId];
-    let max = modifiers.max || 1;
-    let min = modifiers.min || -1;
-    let m = this.props.m;
-    if (m.getModValue(modId)) {
-      return (m.getModValue(modId) - min) / (max - min);
-    }
-    return -min / (max - min);
-  }
-
   /**
    * Render the list
    * @return {React.Component} List
@@ -114,5 +92,4 @@ export default class ModificationsMenu extends TranslatedComponent {
       </div>
     );
   }
-
 }

src/app/shipyard/Ship.js

@@ -566,6 +566,7 @@ export default class Ship {
     }
 
     if (parts[3]) {
+      //decodeModsToArray(LZString.decompressFromBase64(parts[3].replace(/-/g, '/')), mods);
       decodeModsToArray(parts[3], mods);
     }
 
@@ -959,6 +960,7 @@ export default class Ship {
       }
       allMods.push(slotMods.join(';'));
     }
+    //this.serialized.modifications = LZString.compressToBase64(allMods.join(',').replace(/,+$/, '')).replace(/\//g, '-');
     this.serialized.modifications = allMods.join(',').replace(/,+$/, '');
     return this;
   }