diff --git a/src/app/components/ShipPicker.jsx b/src/app/components/ShipPicker.jsx index f91b286c..b5b7c838 100644 --- a/src/app/components/ShipPicker.jsx +++ b/src/app/components/ShipPicker.jsx @@ -1,11 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import TranslatedComponent from './TranslatedComponent'; -import { Ships } from 'coriolis-data/dist'; import { Rocket } from './SvgIcons'; import Persist from '../stores/Persist'; import cn from 'classnames'; +import { Factory, Ship } from 'ed-forge'; import autoBind from 'auto-bind'; +import { isEqual } from 'lodash'; /** * Ship picker @@ -14,14 +15,9 @@ import autoBind from 'auto-bind'; export default class ShipPicker extends TranslatedComponent { static propTypes = { onChange: PropTypes.func.isRequired, - ship: PropTypes.string.isRequired, - build: PropTypes.string + ship: PropTypes.instanceOf(Ship).isRequired, }; - static defaultProps = { - ship: 'eagle' - } - /** * constructor * @param {object} props Properties react @@ -30,20 +26,38 @@ export default class ShipPicker extends TranslatedComponent { constructor(props, context) { super(props); autoBind(this); - this.state = { menuOpen: false }; + this.state = { + menuOpen: false, + opponent: { + self: true, + type: props.ship.getShipType(), + stock: false, + id: undefined, + }, + }; } /** * Update ship - * @param {object} ship the ship - * @param {string} build the build, if present + * @param {boolean} self True to compare with ship itself + * @param {object} type The ship type + * @param {boolean} stock True to compare with a stock version of given type + * @param {string} id The build's stored ID */ - _shipChange(ship, build) { - this._closeMenu(); - - // Ensure that the ship has changed - if (ship !== this.props.ship || build !== this.props.build) { - this.props.onChange(ship, build); + _shipChange(self, type, stock = false, id = null) { + const opponent = { self, type, stock, id }; + if (isEqual(opponent, this.state.opponent)) { + this.setState({ menuOpen: false }); + } else { + const { onChange } = this.props; + if (self) { + onChange(this.props.ship); + } else if (stock) { + onChange(Factory.newShip(type)); + } else { + onChange(new Ship(Persist.getBuild(type, id))); + } + this.setState({ menuOpen: false, opponent }); } } @@ -52,26 +66,41 @@ export default class ShipPicker extends TranslatedComponent { * @returns {object} the picker menu */ _renderPickerMenu() { - const { ship, build } = this.props; - const _shipChange = this._shipChange; - const builds = Persist.getBuilds(); - const buildList = []; - for (let shipId of this.shipOrder) { - const shipBuilds = []; - // Add stock build - const stockSelected = (ship == shipId && !build); - shipBuilds.push(
  • Stock
  • ); - if (builds[shipId]) { - let buildNameOrder = Object.keys(builds[shipId]).sort(); - for (let buildName of buildNameOrder) { - const buildSelected = ship === shipId && build === buildName; - shipBuilds.push(
  • {buildName}
  • ); - } - } - buildList.push(); + const { menuOpen } = this.state; + if (!menuOpen) { + return null; } - return buildList; + const { translate } = this.context.language; + const { self, type, stock, id } = this.state.opponent; + return
    e.stopPropagation()}> +
    + {Factory.getAllShipTypes().sort().map((shipType) => + )} +
    +
    ; } /** @@ -82,40 +111,35 @@ export default class ShipPicker extends TranslatedComponent { this.setState({ menuOpen: !menuOpen }); } - /** - * Close the menu - */ - _closeMenu() { - const { menuOpen } = this.state; - if (menuOpen) { - this._toggleMenu(); - } - } - /** * Render picker * @return {React.Component} contents */ render() { - const { language, onWindowResize, sizeRatio, tooltip, termtip } = this.context; - const { formats, translate, units } = language; - const { ship, build } = this.props; + const { translate } = this.context.language; + const { ship } = this.props; const { menuOpen } = this.state; + const { self, type, stock, id } = this.state.opponent; + + let label; + if (self) { + label = translate('THIS_SHIP'); + } else if (stock) { + label = translate('stock'); + } else { + label = id; + } - const shipString = ship + ': ' + (build ? build : translate('stock')); return (
    e.stopPropagation() }>
    - {shipString} + + {`${translate(type)}: ${label}`} +
    - { menuOpen ? -
    e.stopPropagation() }> -
    - {this._renderPickerMenu()} -
    -
    : null } + {this._renderPickerMenu()}
    );