From 7a33bd64f8e7f3e1dad088abbb0d4ac51af64291 Mon Sep 17 00:00:00 2001 From: Cmdr McDonald Date: Fri, 28 Oct 2016 01:46:21 +0100 Subject: [PATCH] Updates to modifications menu --- src/app/components/ModSlider.jsx | 3 +- src/app/components/ModificationsMenu.jsx | 118 +++-------------------- 2 files changed, 16 insertions(+), 105 deletions(-) diff --git a/src/app/components/ModSlider.jsx b/src/app/components/ModSlider.jsx index 057742c4..386164f2 100644 --- a/src/app/components/ModSlider.jsx +++ b/src/app/components/ModSlider.jsx @@ -39,8 +39,9 @@ export default class ModSlider extends Slider { let width = outerWidth - (margin * 2); let pctPos = width * this.props.percent + margin; - // TODO add this back in from middle to point + // TODO add this back in from zero point to value // + // TODO fix locations for labels (min, 0, max) return diff --git a/src/app/components/ModificationsMenu.jsx b/src/app/components/ModificationsMenu.jsx index c66df4e1..e93185f8 100644 --- a/src/app/components/ModificationsMenu.jsx +++ b/src/app/components/ModificationsMenu.jsx @@ -44,10 +44,11 @@ export default class ModificationsMenu extends TranslatedComponent { let list = []; for (let modId of Modifications.validity[m.grp]) { + let modifiers = Modifications.modifiers[modId] list.push(
-
{translate(Modifications.modifiers[modId].name)}
+
{translate(modifiers.name)}
{formats.pct(m.getModValue(modId) || 0)} - +
); } // @@ -55,104 +56,6 @@ export default class ModificationsMenu extends TranslatedComponent { return { list }; } - /** - * Generate React Components for Module Group - * @param {Function} translate Translate function - * @param {Objecy} mountedModule Mounted Module - * @param {Funciton} warningFunc Warning function - * @param {number} mass Mass - * @param {function} onSelect Select/Mount callback - * @param {string} grp Group name - * @param {Array} modules Available modules - * @return {React.Component} Available Module Group contents - */ - _buildGroup(translate, mountedModule, warningFunc, mass, onSelect, grp, modules) { - let prevClass = null, prevRating = null; - let elems = []; - - for (let i = 0; i < modules.length; i++) { - let m = modules[i]; - let mount = null; - let disabled = m.maxmass && (mass + (m.mass ? m.mass : 0)) > m.maxmass; - let active = mountedModule && mountedModule === m; - let classes = cn(m.name ? 'lc' : 'c', { - warning: !disabled && warningFunc && warningFunc(m), - active, - disabled - }); - let eventHandlers; - - if (disabled || active) { - eventHandlers = {}; - } else { - let showDiff = this._showDiff.bind(this, mountedModule, m); - let select = onSelect.bind(null, m); - - eventHandlers = { - onMouseEnter: this._over.bind(this, showDiff), - onTouchStart: this._touchStart.bind(this, showDiff), - onTouchEnd: this._touchEnd.bind(this, select), - onMouseLeave: this._hideDiff, - onClick: select - }; - } - - switch(m.mount) { - case 'F': mount = ; break; - case 'G': mount = ; break; - case 'T': mount = ; break; - } - - if (i > 0 && modules.length > 3 && m.class != prevClass && (m.rating != prevRating || m.mount) && m.grp != 'pa') { - elems.push(
); - } - - elems.push( -
  • - {mount} - {(mount ? ' ' : '') + m.class + m.rating + (m.missile ? '/' + m.missile : '') + (m.name ? ' ' + translate(m.name) : '')} -
    • - ); - prevClass = m.class; - prevRating = m.rating; - } - - return
      {elems}
    ; - } - - - /** - * Touch Start - Show diff after press, otherwise treat as tap - * @param {Function} showDiff diff tooltip callback - * @param {SyntheticEvent} event Event - */ - _touchStart(showDiff, event) { - event.preventDefault(); - let rect = event.currentTarget.getBoundingClientRect(); - this.touchTimeout = setTimeout(showDiff.bind(this, rect), PRESS_THRESHOLD); - } - - /** - * Touch End - Select module on tap - * @param {Function} select Select module callback - * @param {SyntheticEvent} event Event - */ - _touchEnd(select, event) { - event.preventDefault(); - if (this.touchTimeout !== null) { // If timeout has not fired (been nulled out) yet - select(); - } - } - - /** - * Scroll to mounted (if it exists) module group on mount - */ - componentDidMount() { - if (this.groupElem) { // Scroll to currently selected group - findDOMNode(this).scrollTop = this.groupElem.offsetTop; - } - } - /** * Update state based on property and context changes * @param {Object} nextProps Incoming/Next properties @@ -162,16 +65,20 @@ export default class ModificationsMenu extends TranslatedComponent { this.setState(this._initState(nextProps, nextContext)); } - /** * Update modification given a value. * @param {Number} modId The ID of the modification * @param {Number} value The value to set, in the range [0,1] */ _updateValue(modId, value) { - let scaledValue = (value - 0.5) * 2; 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(); } @@ -182,11 +89,14 @@ export default class ModificationsMenu extends TranslatedComponent { * @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) / 2) + 0.5; + return (m.getModValue(modId) - min) / (max - min); } - return 0.5; + return -min / (max - min); } /**