poi-plugin-ship-info - npm Package Compare versions

Comparing version 2.5.6 to 3.0.0-beta.0

package.json

 {
   "name": "poi-plugin-ship-info",
-  "version": "2.5.6",
+  "version": "3.0.0-beta.0",
   "description": "Show detailed information of all owned ship girls",
@@ -35,3 +35,4 @@ "main": "index.es",
       "7.2.99": "1.10.3",
-      "7.6.0-beta.1": "2.5.3"
+      "7.6.0-beta.1": "2.5.3",
+      "7.8.0": "2.5.6"
     }
@@ -38,0 +39,0 @@ },

views/index.js

@@ -63,3 +63,3 @@ 'use strict';
   'div',
-  null,
+  { className: 'ship-info-wrap' },
   _react2.default.createElement(_shipInfoCheckboxArea2.default, null),
@@ -76,2 +76,2 @@ _react2.default.createElement(_shipInfoTableArea2.default, null)
   _react2.default.createElement(ShipInfoArea, null)
-), $('ship-info'));
+), $('#ship-info'));

views/ship-info-table-area/index.js

@@ -7,3 +7,3 @@ 'use strict';
 
-var _class, _temp2;
+var _class, _temp, _initialiseProps;
 
@@ -18,4 +18,2 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _lodash = require('lodash');
-
 var _reactRedux = require('react-redux');
@@ -27,8 +25,4 @@
 
-var _fastMemoize = require('fast-memoize');
+var _reactVirtualized = require('react-virtualized');
 
-var _fastMemoize2 = _interopRequireDefault(_fastMemoize);
-
-var _selectors = require('views/utils/selectors');
-
 var _divider = require('../divider');
@@ -40,10 +34,12 @@
 
-var _selectors2 = require('./selectors');
+var _selectors = require('./selectors');
 
-var _shipInfoRow = require('./ship-info-row');
+var _shipInfoCells = require('./ship-info-cells');
 
-var _shipInfoRow2 = _interopRequireDefault(_shipInfoRow);
+var _shipInfoCells2 = _interopRequireDefault(_shipInfoCells);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 const { __ } = window;
@@ -70,5 +66,5 @@
           center: centerAlign[index],
-          sorting: sortName == types[index],
-          up: sortName == types[index] && sortOrder,
-          down: sortName == types[index] && !sortOrder
+          sorting: sortName === types[index],
+          up: sortName === types[index] && sortOrder,
+          down: sortName === types[index] && !sortOrder
         })
@@ -91,231 +87,107 @@ },
 
-const ShipInfoTableArea = (0, _reactRedux.connect)((state, props) => {
-  const $shipTypes = (0, _lodash.get)(state, 'const.$shipTypes', {}
+const types = ['id', 'name', 'type', 'soku', 'lv', 'cond', 'karyoku', 'raisou', 'taiku', 'soukou', 'lucky', 'kaihi', 'taisen', 'sakuteki', 'repairtime', 'equipment', 'lock'];
+const titles = ['ID', 'Name', 'Class', 'Speed', 'Level', 'Cond', 'Firepower', 'Torpedo', 'AA', 'Armor', 'Luck', 'Evasion', 'ASW', 'LOS', 'Repair', 'Equipment', 'Lock'];
+const sortables = [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, false, false];
+const centerAligns = [false, false, false, false, true, true, true, true, true, true, true, true, true, true, true, false, true];
 
-  // construct shiptype filter array
-  );const shipTypeChecked = (0, _lodash.get)(state.config, 'plugin.ShipInfo.shipTypeChecked', Object.keys($shipTypes).slice().fill(true));
-  const shipTypes = shipTypeChecked.reduce((types, checked, index) => {
-    return checked && index + 1 in $shipTypes ? types.concat([index + 1]) : types;
-  }, []);
+// width will always unshift 1 extra element for row index
+const widths = [30, 50, 160, 90, 40, 40, 40, 60, 60, 60, 60, 60, 40, 40, 40, 80, 180, 40];
 
-  const expeditionShips = [...Array(4).keys()].reduce((ships, fleetId) => {
-    return (0, _selectors.fleetInExpeditionSelectorFactory)(fleetId)(state) ? ships.concat((0, _selectors.fleetShipsIdSelectorFactory)(fleetId)(state)) : ships;
-  }, []
+const getColumnWidth = ({ index }) => widths[index] || 40;
 
-  // construct ship data for filter and sort
-  );const _ships = (0, _lodash.get)(state, 'info.ships', {});
-  const rows = Object.keys(_ships).map(shipId => {
-    return (0, _selectors2.shipTableDataSelectorFactory)(parseInt(shipId))(state);
-  });
+const TitleCell = ({ style, title, sortable, centerAlign, sorting, up, down, handleClickTitle, onMouseOver }) => _react2.default.createElement(
+  'div',
+  {
+    role: 'button',
+    tabIndex: 0,
+    onMouseOver: onMouseOver,
+    style: _extends({}, style),
+    onClick: sortable ? handleClickTitle : '',
+    className: (0, _classnames2.default)({
+      clickable: sortable,
+      center: centerAlign,
+      sorting,
+      up,
+      down
+    })
+  },
+  __(title)
+);
 
-  return _extends({}, (0, _selectors2.shipInfoConfigSelector)(state), {
-    fleetIdMap: (0, _selectors2.shipFleetIdMapSelector)(state),
-    shipTypes,
-    expeditionShips,
-    rows
-  });
-})((_temp2 = _class = class ShipInfoTableArea extends _react.Component {
-  constructor(...args) {
-    var _temp;
+const ShipInfoTableArea = (0, _reactRedux.connect)(state => _extends({
+  rows: (0, _selectors.shipRowsSelector)(state)
+}, (0, _selectors.shipInfoConfigSelector)(state)))((_temp = _class = class ShipInfoTableArea extends _react.Component {
 
-    return _temp = super(...args), this.handleTypeFilter = (0, _fastMemoize2.default)((type_id, shipTypes) => {
-      return (shipTypes || []).includes(type_id);
-    }), this.handleLvFilter = (0, _fastMemoize2.default)((lv, lvRadio) => {
-      switch (lvRadio) {
-        case 0:
-          return true;
-        case 1:
-          return lv == 1;
-        case 2:
-          return lv >= 2;
-        case 3:
-          return lv >= 100;
-      }
-    }), this.handleLockedFilter = (0, _fastMemoize2.default)((locked, lockedRadio) => {
-      switch (lockedRadio) {
-        case 0:
-          return true;
-        case 1:
-          return locked == 1;
-        case 2:
-          return locked == 0;
-      }
-    }), this.handleExpeditionFilter = (0, _fastMemoize2.default)((id, expeditionShips, expeditionRadio) => {
-      switch (expeditionRadio) {
-        case 0:
-          return true;
-        case 1:
-          return (expeditionShips || []).includes(id);
-        case 2:
-          return !(expeditionShips || []).includes(id);
-      }
-    }), this.handleModernizationFilter = (0, _fastMemoize2.default)((isCompleted, modernizationRadio) => {
-      switch (modernizationRadio) {
-        case 0:
-          return true;
-        case 1:
-          return isCompleted;
-        case 2:
-          return !isCompleted;
-      }
-    }), this.handleRemodelFilter = (0, _fastMemoize2.default)((after, remodelRadio) => {
-      const remodelable = after != '0';
-      switch (remodelRadio) {
-        case 0:
-          return true;
-        case 1:
-          return remodelable;
-        case 2:
-          return !remodelable;
-      }
-    }), this.handleSallyAreaFilter = (0, _fastMemoize2.default)((sallyArea, sallyAreaChecked) => {
-      const checkedAll = (sallyAreaChecked || []).reduce((all, checked) => all && checked, true);
-      if (checkedAll) return true;
-      return typeof sallyArea != 'undefined' ? (sallyAreaChecked || [])[sallyArea || 0] : true;
-    }), this.handleInFleetFilter = (0, _fastMemoize2.default)((fleetId, inFleetRadio) => {
-      const isInFleet = Number.isInteger(fleetId);
-      switch (inFleetRadio) {
-        case 0:
-          return true;
-        case 1:
-          return isInFleet;
-        case 2:
-          return !isInFleet;
-      }
-    }), this.handleSparkleFilter = (0, _fastMemoize2.default)((cond, sparkleRadio) => {
-      switch (sparkleRadio) {
-        case 0:
-          return true;
-        case 1:
-          return cond >= 50;
-        case 2:
-          return cond < 50;
-      }
-    }), this.handleExSlotFilter = (0, _fastMemoize2.default)((exslot, exSlotRadio) => {
-      switch (exSlotRadio) {
-        case 0:
-          return true;
-        case 1:
-          return exslot != 0;
-        case 2:
-          return exslot == 0;
-      }
-    }), this.handleDaihatsuFilter = (daihatsu, daihatsuRadio) => {
-      switch (daihatsuRadio) {
-        case 0:
-          return true;
-        case 1:
-          return daihatsu;
-        case 2:
-          return !daihatsu;
-      }
-    }, this.handleShowRows = () => {
-      const { remodelRadio, lvRadio, lockedRadio, expeditionRadio, modernizationRadio,
-        inFleetRadio, sparkleRadio, exSlotRadio, daihatsuRadio, fleetIdMap,
-        shipTypes, expeditionShips, sallyAreaChecked, rows, sortName, sortOrder } = this.props;
+  constructor(props) {
+    super(props);
 
-      let showRows = rows.filter((row = {}) => this.handleTypeFilter(row.type_id, shipTypes) && this.handleLvFilter(row.lv, lvRadio) && this.handleLockedFilter(row.locked, lockedRadio) && this.handleExpeditionFilter(row.id, expeditionShips, expeditionRadio) && this.handleModernizationFilter(row.isCompleted, modernizationRadio) && this.handleRemodelFilter(row.after, remodelRadio) && this.handleSallyAreaFilter(row.sallyArea, sallyAreaChecked) && this.handleInFleetFilter(fleetIdMap[row.id], inFleetRadio) && this.handleExSlotFilter(row.exslot, exSlotRadio) && this.handleSparkleFilter(row.cond, sparkleRadio) && this.handleDaihatsuFilter(row.daihatsu, daihatsuRadio)
+    _initialiseProps.call(this);
 
-      // sort
-      );switch (this.props.sortName) {
-        case 'id':
-          showRows = (0, _lodash.sortBy)(showRows, 'id');
-          break;
-        case 'name':
-          showRows.sort(_utils.nameCompare);
-          break;
-        case 'lv':
-          // Sort rule of level in game (descending):
-          // 1. level (descending)
-          // 2. sortno (ascending)
-          // 3. id (descending)
-          showRows.sort((a, b) => {
-            if (a.lv != b.lv) return a.lv - b.lv;
-            if (a.sortno != b.sortno) return -(a.sortno - b.sortno);
-            if (a.id != b.id) return -(a.id - b.id);
-            return 0;
-          });
-          break;
-        case 'type':
-          showRows.sort((a, b) => {
-            if (a.type_id != b.type_id) return a.type_id - b.type_id;
-            if (a.sortno != b.sortno) return -(a.sortno - b.sortno);
-            if (a.lv != b.lv) return a.lv - b.lv;
-            if (a.id != b.id) return -(a.id - b.id);
-            return 0;
-          });
-          break;
-        default:
-          showRows = (0, _lodash.sortBy)(showRows, [sortName, 'sortno', row => -row.id]);
-      }
-
-      if (!sortOrder) showRows.reverse();
-
-      return showRows;
-    }, this.sortRules = (name, order) => {
-      config.set('plugin.ShipInfo.sortName', name);
-      config.set('plugin.ShipInfo.sortOrder', order);
-    }, this.handleClickTitle = title => () => {
-      if (this.props.sortName != title) {
-        const order = title == 'id' || title == 'type' || title == 'name' ? 1 : 0;
-        this.sortRules(title, order);
-      } else {
-        this.sortRules(this.props.sortName, (this.props.sortOrder + 1) % 2);
-      }
-    }, _temp;
+    this.state = {
+      activeRow: -1,
+      activeColumn: -1
+    };
   }
 
   render() {
-    const showRows = this.handleShowRows();
-    const { sortName, sortOrder, pagedLayout, fleetIdMap } = this.props;
-    const types = ['id', 'type', 'name', 'soku', 'lv', 'cond', 'karyoku', 'raisou', 'taiku', 'soukou', 'lucky', 'kaihi', 'taisen', 'sakuteki', 'repairtime', 'Equipment', 'Lock'];
-    const titles = ['ID', 'Class', 'Name', 'Speed', 'Level', 'Cond', 'Firepower', 'Torpedo', 'AA', 'Armor', 'Luck', 'Evasion', 'ASW', 'LOS', 'Repair', 'Equipment', 'Lock'];
-    const sortable = [true, true, true, true, true, true, true, true, true, true, true, true, true, true, true, false, false];
-    const centerAlign = [false, false, false, false, true, true, true, true, true, true, true, true, true, true, true, false, false];
+    // const showRows = this.props.rows
+    const { rows, sortName, sortOrder, pagedLayout } = this.props;
+    const { activeRow, activeColumn } = this.state;
+    // const header =
+    //   (
+    //     <TitleHeader
+    //       titles={titles}
+    //       types={types}
+    //       sortable={sortables}
+    //       centerAlign={centerAligns}
+    //       sortName={sortName}
+    //       sortOrder={sortOrder}
+    //       handleClickTitle={this.handleClickTitle}
+    //     />
+    //   )
 
-    const header = _react2.default.createElement(TitleHeader, {
-      titles: titles,
-      types: types,
-      sortable: sortable,
-      centerAlign: centerAlign,
-      sortName: sortName,
-      sortOrder: sortOrder,
-      handleClickTitle: this.handleClickTitle
-    });
+    // const ShipRows = []
 
-    const ShipRows = [];
+    // showRows.forEach((row, index) => {
+    //   if (row) {
+    //     ShipRows.push(
+    //       <ShipInfoRow
+    //         key={row.id}
+    //         shipInfo={row}
+    //       />
+    //     )
+    //   }
+    //   if (index >= 0 && (index + 1) % 15 === 0 && pagedLayout) {
+    //     ShipRows.push(header)
+    //   }
+    // })
 
-    showRows.forEach((row, index) => {
-      if (row) {
-        ShipRows.push(_react2.default.createElement(_shipInfoRow2.default, {
-          key: row.id,
-          shipInfo: row,
-          fleetId: fleetIdMap[row.id]
-        }));
-      }
-      if (index >= 0 && (index + 1) % 15 == 0 && pagedLayout) {
-        ShipRows.push(header);
-      }
-    });
-
     return _react2.default.createElement(
       'div',
-      { id: 'ship-info-show' },
+      { id: 'ship-info-show', style: { display: 'flex', flexDirection: 'column' } },
       _react2.default.createElement(_divider2.default, { text: __('Ship Girls Info'), icon: false }),
       _react2.default.createElement(
         'div',
-        { className: 'ship-info-table' },
+        { style: { flex: 1 }, onMouseLeave: this.handleMouseLeave },
         _react2.default.createElement(
-          _reactBootstrap.Table,
-          { striped: true, condensed: true, hover: true },
-          _react2.default.createElement(
-            'thead',
-            null,
-            header
-          ),
-          _react2.default.createElement(
-            'tbody',
-            null,
-            ShipRows
-          )
+          _reactVirtualized.AutoSizer,
+          null,
+          ({ width, height }) => _react2.default.createElement(_reactVirtualized.MultiGrid, {
+            sortName: sortName,
+            sortOrder: sortOrder,
+            activeRow: activeRow,
+            activeColumn: activeColumn,
+            columnCount: 18,
+            columnWidth: getColumnWidth,
+            estimatedRowSize: 100,
+            fixedColumnCount: 3,
+            fixedRowCount: 1,
+            height: height,
+            overscanColumnCount: 3,
+            overscanRowCount: 10,
+            cellRenderer: this.cellRenderer,
+            rowCount: rows.length + 1,
+            rowHeight: 40,
+            width: width
+          })
         )
@@ -326,22 +198,91 @@ )
 }, _class.propTypes = {
+  rows: _react.PropTypes.arrayOf(_react.PropTypes.shape(_utils.shipInfoShape)).isRequired,
   sortName: _react.PropTypes.string.isRequired,
-  sortOrder: _react.PropTypes.number.isRequired,
-  lvRadio: _react.PropTypes.number.isRequired,
-  lockedRadio: _react.PropTypes.number.isRequired,
-  expeditionRadio: _react.PropTypes.number.isRequired,
-  modernizationRadio: _react.PropTypes.number.isRequired,
-  remodelRadio: _react.PropTypes.number.isRequired,
-  sallyAreaChecked: _react.PropTypes.arrayOf(_react.PropTypes.bool).isRequired,
-  pagedLayout: _react.PropTypes.number.isRequired,
-  inFleetRadio: _react.PropTypes.number.isRequired,
-  sparkleRadio: _react.PropTypes.number.isRequired,
-  exSlotRadio: _react.PropTypes.number.isRequired,
-  daihatsuRadio: _react.PropTypes.number.isRequired,
-  fleetIdMap: _react.PropTypes.objectOf(_react.PropTypes.number).isRequired,
-  shipTypes: _react.PropTypes.arrayOf(_react.PropTypes.number).isRequired,
-  expeditionShips: _react.PropTypes.arrayOf(_react.PropTypes.number).isRequired,
-  rows: _react.PropTypes.arrayOf(_react.PropTypes.shape(_utils.shipInfoShape)).isRequired
-}, _temp2));
+  sortOrder: _react.PropTypes.number.isRequired
+}, _initialiseProps = function () {
+  this.sortRules = (name, order) => {
+    config.set('plugin.ShipInfo.sortName', name);
+    config.set('plugin.ShipInfo.sortOrder', order);
+  };
 
+  this.titleRenderer = (_ref) => {
+    let { columnIndex, style, sortName, sortOrder } = _ref,
+        props = _objectWithoutProperties(_ref, ['columnIndex', 'style', 'sortName', 'sortOrder']);
+
+    if (columnIndex === 0) {
+      return _react2.default.createElement('div', { style: style });
+    }
+
+    const index = columnIndex - 1;
+
+    return _react2.default.createElement(TitleCell, _extends({}, props, {
+      style: _extends({}, style),
+      title: titles[index],
+      sortable: sortables[index],
+      centerAlign: centerAligns[index],
+      sorting: sortName === types[index],
+      up: sortName === types[index] && sortOrder,
+      down: sortName === types[index] && !sortOrder,
+      handleClickTitle: sortables[index] && this.handleClickTitle(types[index])
+    }));
+  };
+
+  this.cellRenderer = ({ columnIndex, key, rowIndex, style }) => {
+    const { rows, sortName, sortOrder } = this.props;
+    const setState = this.setState.bind(this);
+
+    const onMouseOver = () => {
+      setState({
+        activeColumn: columnIndex,
+        activeRow: rowIndex
+      });
+    };
+
+    let content;
+    if (rowIndex === 0) {
+      content = this.titleRenderer({ columnIndex, style, sortName, sortOrder });
+    } else {
+      if (columnIndex === 0) {
+        content = _react2.default.createElement(
+          'div',
+          { style: style, key: key },
+          rowIndex
+        );
+      } else {
+        const index = columnIndex - 1;
+        const ship = rows[rowIndex - 1];
+        const Cell = _shipInfoCells2.default[types[index]];
+        content = _react2.default.createElement(Cell, { ship: ship, style: style });
+      }
+    }
+
+    return _react2.default.cloneElement(content, {
+      key,
+      onMouseOver,
+      className: (0, _classnames2.default)({
+        'ship-info-cell': true,
+        center: centerAligns[columnIndex - 1],
+        highlight: columnIndex === this.state.activeColumn || rowIndex === this.state.activeRow
+      })
+    });
+  };
+
+  this.handleClickTitle = title => () => {
+    if (this.props.sortName !== title) {
+      const order = title === 'id' || title === 'type' || title === 'name' ? 1 : 0;
+      this.sortRules(title, order);
+    } else {
+      this.sortRules(this.props.sortName, (this.props.sortOrder + 1) % 2);
+    }
+  };
+
+  this.handleMouseLeave = () => {
+    this.setState({
+      activeColumn: -1,
+      activeRow: -1
+    });
+  };
+}, _temp));
+
 exports.default = ShipInfoTableArea;
 module.exports = exports['default'];

views/ship-info-table-area/selectors.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.sallyAreaSelectorFactory = exports.shipFleetIdMapSelector = exports.shipInfoConfigSelector = exports.shipTableDataSelectorFactory = undefined;
+exports.sallyAreaSelectorFactory = exports.shipRowsSelector = exports.shipTableDataSelectorFactory = exports.shipFleetIdMapSelector = exports.shipInfoConfigSelector = undefined;
 
@@ -17,2 +17,6 @@ var _fastMemoize = require('fast-memoize');
 
+var _fp = require('lodash/fp');
+
+var _fp2 = _interopRequireDefault(_fp);
+
 var _selectors = require('views/utils/selectors');
@@ -26,4 +30,2 @@
 
-const shipTableDataSelectorFactory = exports.shipTableDataSelectorFactory = (0, _fastMemoize2.default)(shipId => (0, _reselect.createSelector)([(0, _selectors.shipDataSelectorFactory)(shipId), (0, _selectors.shipEquipDataSelectorFactory)(shipId), _selectors.constSelector, _selectors.configSelector], ([ship, $ship] = [], equips, { $shipTypes }, config) => (0, _utils.getShipInfoData)(ship, $ship, equips, $shipTypes, (0, _lodash.get)(config, 'plugin.ShipInfo.rawValue', false))));
-
 const shipInfoConfigSelector = exports.shipInfoConfigSelector = (0, _reselect.createSelector)([_selectors.configSelector, _selectors.fcdSelector], (config, { shiptag = {} }) => ({
@@ -48,14 +50,164 @@ sortName: (0, _lodash.get)(config, 'plugin.ShipInfo.sortName', 'lv'),
 
-const getShipFleetId = (0, _fastMemoize2.default)((shipId, fleetShips) => {
-  return fleetShips.reduce((id, ships, index) => {
-    return Number.isNaN(id) && (ships || []).includes(parseInt(shipId)) ? index : id;
-  }, NaN);
+const shipFleetIdMapSelector = exports.shipFleetIdMapSelector = (0, _reselect.createSelector)([_selectors.shipsSelector, allFleetShipIdSelector], (ships, fleetIds) => (0, _lodash.mapValues)(ships, ship => (0, _lodash.findIndex)(fleetIds, fleetId => (0, _lodash.includes)(fleetId, ship.api_id))));
+
+const shipTableDataSelectorFactory = exports.shipTableDataSelectorFactory = (0, _fastMemoize2.default)(shipId => (0, _reselect.createSelector)([(0, _selectors.shipDataSelectorFactory)(shipId), (0, _selectors.shipEquipDataSelectorFactory)(shipId), _selectors.constSelector, shipFleetIdMapSelector, _selectors.configSelector], ([ship, $ship] = [], equips, { $shipTypes }, fleetIdMap, config) => (0, _utils.getShipInfoData)(ship, $ship, equips, $shipTypes, fleetIdMap, (0, _lodash.get)(config, 'plugin.ShipInfo.rawValue', false))));
+
+const handleTypeFilter = (0, _fastMemoize2.default)((typeId, shipTypes) => (shipTypes || []).includes(typeId));
+
+const handleLvFilter = (0, _fastMemoize2.default)((lv, lvRadio) => {
+  switch (lvRadio) {
+    case 1:
+      return lv === 1;
+    case 2:
+      return lv >= 2;
+    case 3:
+      return lv >= 100;
+    case 0:
+    default:
+      return true;
+  }
 });
 
-const shipFleetIdMapSelector = exports.shipFleetIdMapSelector = (0, _reselect.createSelector)([_selectors.shipsSelector, allFleetShipIdSelector], (ships = [], fleetShips = []) => {
-  const map = {};
-  Object.keys(ships).forEach(shipId => map[shipId] = getShipFleetId(shipId, fleetShips));
-  return map;
+const handleLockedFilter = (0, _fastMemoize2.default)((locked, lockedRadio) => {
+  switch (lockedRadio) {
+    case 1:
+      return locked === 1;
+    case 2:
+      return locked === 0;
+    case 0:
+    default:
+      return true;
+  }
 });
 
+const handleExpeditionFilter = (0, _fastMemoize2.default)((id, expeditionShips, expeditionRadio) => {
+  switch (expeditionRadio) {
+    case 1:
+      return (expeditionShips || []).includes(id);
+    case 2:
+      return !(expeditionShips || []).includes(id);
+    case 0:
+    default:
+      return true;
+  }
+});
+
+const handleModernizationFilter = (0, _fastMemoize2.default)((isCompleted, modernizationRadio) => {
+  switch (modernizationRadio) {
+    case 1:
+      return isCompleted;
+    case 2:
+      return !isCompleted;
+    case 0:
+    default:
+      return true;
+  }
+});
+
+const handleRemodelFilter = (0, _fastMemoize2.default)((after, remodelRadio) => {
+  const remodelable = after !== '0';
+  switch (remodelRadio) {
+    case 1:
+      return remodelable;
+    case 2:
+      return !remodelable;
+    case 0:
+    default:
+      return true;
+  }
+});
+
+const handleSallyAreaFilter = (0, _fastMemoize2.default)((sallyArea, sallyAreaChecked) => {
+  const checkedAll = (sallyAreaChecked || []).reduce((all, checked) => all && checked, true);
+  if (checkedAll) return true;
+  return typeof sallyArea !== 'undefined' ? (sallyAreaChecked || [])[sallyArea || 0] : true;
+});
+
+const handleInFleetFilter = (0, _fastMemoize2.default)((fleetId, inFleetRadio) => {
+  const isInFleet = fleetId > -1;
+  switch (inFleetRadio) {
+    case 1:
+      return isInFleet;
+    case 2:
+      return !isInFleet;
+    case 0:
+    default:
+      return true;
+  }
+});
+
+const handleSparkleFilter = (0, _fastMemoize2.default)((cond, sparkleRadio) => {
+  switch (sparkleRadio) {
+    case 1:
+      return cond >= 50;
+    case 2:
+      return cond < 50;
+    case 0:
+    default:
+      return true;
+  }
+});
+
+const handleExSlotFilter = (0, _fastMemoize2.default)((exslot, exSlotRadio) => {
+  switch (exSlotRadio) {
+    case 1:
+      return exslot !== 0;
+    case 2:
+      return exslot === 0;
+    case 0:
+    default:
+      return true;
+  }
+});
+
+const handleDaihatsuFilter = (daihatsu, daihatsuRadio) => {
+  switch (daihatsuRadio) {
+    case 1:
+      return daihatsu;
+    case 2:
+      return !daihatsu;
+    case 0:
+    default:
+      return true;
+  }
+};
+
+const getSortFunction = sortName => {
+  switch (sortName) {
+    case 'id':
+      return ship => ship.id;
+    case 'name':
+      return [ship => (0, _utils.katakanaToHiragana)(ship.yomi), ship => ship.lv, ship => -ship.id];
+    case 'lv':
+      // Sort rule of level in game (descending):
+      // 1. level (descending)
+      // 2. sortno (ascending)
+      // 3. id (descending)
+      return [ship => ship.lv, ship => -ship.sortno, ship => -ship.id];
+    case 'type':
+      return [ship => ship.typeId, ship => -ship.sortno, ship => ship.lv, ship => -ship.id];
+    default:
+      return [ship => ship[sortName], ship => ship.sortno, ship => -ship.id];
+  }
+};
+
+const shipTypesSelecor = (0, _reselect.createSelector)([state => (0, _lodash.get)(state, 'const.$shipTypes', {}), state => (0, _lodash.get)(state.config, 'plugin.ShipInfo.shipTypeChecked')], ($shipTypes, shipTypeChecked) => (shipTypeChecked || Object.keys($shipTypes).slice().fill(true)).reduce((types, checked, index) => checked && index + 1 in $shipTypes ? types.concat([index + 1]) : types, []));
+
+const expeditionShipsSelector = (0, _reselect.createSelector)([state => (0, _selectors.fleetShipsIdSelectorFactory)(0)(state), state => (0, _selectors.fleetShipsIdSelectorFactory)(1)(state), state => (0, _selectors.fleetShipsIdSelectorFactory)(2)(state), state => (0, _selectors.fleetShipsIdSelectorFactory)(3)(state)], (...ids) => [].concat(...ids));
+
+const shipRowsSelector = exports.shipRowsSelector = (0, _reselect.createSelector)([_selectors.shipsSelector, _selectors.stateSelector, shipTypesSelecor, expeditionShipsSelector, shipInfoConfigSelector], (ships, state, shipTypes, expeditionShips, {
+  lvRadio,
+  lockedRadio,
+  expeditionRadio,
+  modernizationRadio,
+  remodelRadio,
+  inFleetRadio,
+  exSlotRadio,
+  sparkleRadio,
+  daihatsuRadio,
+  sallyAreaChecked,
+  sortName,
+  sortOrder
+}) => _fp2.default.flow(_fp2.default.map(ship => shipTableDataSelectorFactory(ship.api_id)(state)), _fp2.default.filter(ship => handleTypeFilter(ship.typeId, shipTypes) && handleLvFilter(ship.lv, lvRadio) && handleLockedFilter(ship.locked, lockedRadio) && handleExpeditionFilter(ship.id, expeditionShips, expeditionRadio) && handleModernizationFilter(ship.isCompleted, modernizationRadio) && handleRemodelFilter(ship.after, remodelRadio) && handleSallyAreaFilter(ship.sallyArea, sallyAreaChecked) && handleInFleetFilter(ship.fleetId, inFleetRadio) && handleExSlotFilter(ship.exslot, exSlotRadio) && handleSparkleFilter(ship.cond, sparkleRadio) && handleDaihatsuFilter(ship.daihatsu, daihatsuRadio)), _fp2.default.sortBy(getSortFunction(sortName)), sortOrder ? ship => ship : _fp2.default.reverse)(ships));
+
 const sallyAreaSelectorFactory = exports.sallyAreaSelectorFactory = (0, _fastMemoize2.default)(area => (0, _reselect.createSelector)([_selectors.fcdSelector], fcd => ({
@@ -62,0 +214,0 @@ mapname: (0, _lodash.get)(fcd, `shiptag.mapname.${area - 1}`, __('Unknown Area %s, data not updated', area)),

views/ship-info-table-area/ship-info-row.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
@@ -34,2 +36,196 @@
 
+const shipRenderer = ({ index, ship, style }) => {
+  const {
+    karyoku,
+    raisou,
+    taiku,
+    soukou,
+    lucky,
+    lv,
+    repairtime,
+    locked,
+    id,
+    type,
+    typeId,
+    fleetId,
+    name,
+    sallyArea,
+    cond,
+    kaihi,
+    taisen,
+    sakuteki,
+    slot,
+    exslot,
+    karyokuClass,
+    karyokuString,
+    raisouClass,
+    raisouString,
+    taikuClass,
+    taikuString,
+    soukouClass,
+    soukouString,
+    luckyClass,
+    luckyString,
+    repairColor,
+    condColor,
+    sokuString,
+    sokuStyle
+  } = (0, _utils.extractShipInfo)(ship);
+
+  let content;
+
+  switch (index) {
+    case 0:
+      content = id;
+      break;
+    case 1:
+      content = window.i18n.resources.__(type);
+      break;
+    case 2:
+      content = _react2.default.createElement(
+        'span',
+        { className: 'ship-name' },
+        window.i18n.resources.__(name),
+        _react2.default.createElement(_sallyArea2.default, { area: sallyArea, info_id: id }),
+        fleetId > -1 && _react2.default.createElement(
+          'span',
+          { className: 'fleet-id-indicator' },
+          `/${fleetId + 1}`
+        )
+      );
+      break;
+    case 3:
+      content = _react2.default.createElement(
+        'span',
+        { className: sokuStyle },
+        __(sokuString)
+      );
+      break;
+    case 4:
+      content = lv;
+      break;
+    case 5:
+      content = _react2.default.createElement(
+        'span',
+        { className: 'center', style: { backgroundColor: condColor } },
+        cond
+      );
+      break;
+    case 6:
+      content = _react2.default.createElement(
+        'span',
+        { className: karyokuClass },
+        `${karyoku}/`,
+        _react2.default.createElement(
+          'span',
+          { style: { fontSize: '80%' } },
+          karyokuString
+        )
+      );
+      break;
+    case 7:
+      content = _react2.default.createElement(
+        'span',
+        { className: raisouClass },
+        `${raisou}/`,
+        _react2.default.createElement(
+          'span',
+          { style: { fontSize: '80%' } },
+          raisouString
+        )
+      );
+      break;
+    case 8:
+      content = _react2.default.createElement(
+        'span',
+        { className: taikuClass },
+        `${taiku}/`,
+        _react2.default.createElement(
+          'span',
+          { style: { fontSize: '80%' } },
+          taikuString
+        )
+      );
+      break;
+    case 9:
+      content = _react2.default.createElement(
+        'span',
+        { className: soukouClass },
+        `${soukou}/`,
+        _react2.default.createElement(
+          'span',
+          { style: { fontSize: '80%' } },
+          soukouString
+        )
+      );
+      break;
+    case 10:
+      content = _react2.default.createElement(
+        'span',
+        { className: luckyClass },
+        `${lucky}/`,
+        _react2.default.createElement(
+          'span',
+          { style: { fontSize: '80%' } },
+          luckyString
+        )
+      );
+      break;
+    case 11:
+      content = kaihi;
+      break;
+    case 12:
+      content = taisen;
+      break;
+    case 13:
+      content = sakuteki;
+      break;
+    case 14:
+      content = _react2.default.createElement(
+        'span',
+        { style: { backgroundColor: repairColor } },
+        repairtime && _react2.default.createElement(
+          _reactBootstrap.OverlayTrigger,
+          {
+            placement: 'top',
+            overlay: _react2.default.createElement(
+              _reactBootstrap.Tooltip,
+              { id: 'repairtime1hp', className: 'info-tooltip' },
+              `1HP : ${resolveTime((0, _utils.getTimePerHP)(lv, typeId) / 1000)}`
+            )
+          },
+          _react2.default.createElement(
+            'span',
+            null,
+            resolveTime(repairtime)
+          )
+        )
+      );
+      break;
+    case 15:
+      content = _react2.default.createElement(_slotitems2.default, { slot: slot, exslot: exslot });
+      break;
+    case 16:
+      content = _react2.default.createElement(
+        'span',
+        null,
+        locked === 1 ? _react2.default.createElement(_reactFontawesome2.default, { name: 'lock' }) : ' '
+      );
+      break;
+    default:
+      content = 'UNDEFINED';
+  }
+
+  return _react2.default.createElement(
+    'div',
+    { style: _extends({}, style, {
+        paddingLeft: '1ex',
+        paddingRight: '1ex',
+        whiteSpace: 'nowrap'
+      })
+    },
+    content
+  );
+};
+
 class ShipInfoRow extends _react.Component {
@@ -46,24 +242,11 @@ constructor(...args) {
   render() {
-    const { shipInfo, fleetId } = this.props;
+    const { shipInfo } = this.props;
 
     const {
-      karyokuNow,
-      karyokuMax,
       karyoku,
-      raisouNow,
-      raisouMax,
       raisou,
-      taikuNow,
-      taikuMax,
       taiku,
-      soukouNow,
-      soukouMax,
       soukou,
-      luckyNow,
-      luckyMax,
       lucky,
       lv,
-      nowhp,
-      maxhp,
-      losshp,
       repairtime,
@@ -73,3 +256,4 @@ locked,
       type,
-      type_id,
+      typeId,
+      fleetId,
       name,
@@ -119,3 +303,3 @@ sallyArea,
         _react2.default.createElement(_sallyArea2.default, { area: sallyArea, info_id: id }),
-        Number.isInteger(fleetId) && _react2.default.createElement(
+        fleetId > -1 && _react2.default.createElement(
           'span',
@@ -216,3 +400,3 @@ { className: 'fleet-id-indicator' },
               { id: 'repairtime1hp', className: 'info-tooltip' },
-              `1HP : ${resolveTime((0, _utils.getTimePerHP)(lv, type_id) / 1000)}`
+              `1HP : ${resolveTime((0, _utils.getTimePerHP)(lv, typeId) / 1000)}`
             )
@@ -242,6 +426,5 @@ },
 ShipInfoRow.propTypes = {
-  shipInfo: _react.PropTypes.shape(_utils.shipInfoShape).isRequired,
-  fleetId: _react.PropTypes.number.isRequired
+  shipInfo: _react.PropTypes.shape(_utils.shipInfoShape).isRequired
 };
-exports.default = ShipInfoRow;
+exports.default = shipRenderer;
 module.exports = exports['default'];

views/ship-info-table-area/utils.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.extractShipInfo = exports.nameCompare = exports.shipInfoShape = exports.getShipInfoData = exports.getTimePerHP = undefined;
+exports.extractShipInfo = exports.getKanaSortValues = exports.katakanaToHiragana = exports.nameCompare = exports.shipInfoShape = exports.getShipInfoData = exports.getTimePerHP = undefined;
 
@@ -27,3 +27,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-  if (factor == 0) return 0;
+  if (factor === 0) return 0;
 
@@ -37,7 +37,8 @@ if (api_lv < 12) {
 
-const getShipInfoData = exports.getShipInfoData = (ship, $ship, equips, $shipTypes, rawValue = false) => {
+const getShipInfoData = exports.getShipInfoData = (ship, $ship, equips, $shipTypes, fleetIdMap, rawValue = false) => {
   if (!(typeof ship === 'object' && $ship && typeof ship === 'object' && ship)) return;
   const shipInfo = {
     id: ship.api_id,
-    type_id: $ship.api_stype,
+    typeId: $ship.api_stype,
+    fleetId: fleetIdMap[ship.api_id],
     type: ($shipTypes[$ship.api_stype] || {}).api_name,
@@ -69,4 +70,4 @@ name: $ship.api_name,
     losshp: ship.api_maxhp - ship.api_nowhp,
-    repairtime: parseInt(ship.api_ndock_time / 1000.0),
-    after: parseInt($ship.api_aftershipid),
+    repairtime: parseInt(ship.api_ndock_time / 1000.0, 10),
+    after: parseInt($ship.api_aftershipid, 10),
     sallyArea: ship.api_sally_area || 0,
@@ -102,3 +103,5 @@ soku: ship.api_soku
     equips.forEach(equip => {
-      if (typeof equip == 'undefined') return;
+      if (typeof equip === 'undefined') {
+        return;
+      }
       const $equip = equip[1] || {};
@@ -159,3 +162,4 @@ kaihi -= $equip.api_houk || 0;
   id: _react.PropTypes.number.isRequired,
-  type_id: _react.PropTypes.number.isRequired,
+  typeId: _react.PropTypes.number.isRequired,
+  fleetId: _react.PropTypes.number.isRequired,
   type: _react.PropTypes.string.isRequired,
@@ -209,5 +213,5 @@ name: _react.PropTypes.string.isRequired,
 const nameCompare = exports.nameCompare = (a, b) => {
-  if (a.yomi == b.yomi) {
-    if (a.lv != b.lv) return a.lv - b.lv;
-    if (a.id != b.id) return -(a.id - b.id);
+  if (a.yomi === b.yomi) {
+    if (a.lv !== b.lv) return a.lv - b.lv;
+    if (a.id !== b.id) return -(a.id - b.id);
   }
@@ -217,2 +221,10 @@ return jpCollator.compare(a.yomi, b.yomi);
 
+// katagana to hiragana
+const katakanaToHiragana = exports.katakanaToHiragana = str => str.replace(/[\u30a1-\u30f6]/g, match => {
+  const chr = match.charCodeAt(0) - 0x60;
+  return String.fromCharCode(chr);
+});
+
+const getKanaSortValues = exports.getKanaSortValues = str => katakanaToHiragana(str).split('').map(s => s.charCodeAt());
+
 const extractShipInfo = exports.extractShipInfo = shipInfo => {
@@ -243,3 +255,4 @@ const {
     type,
-    type_id,
+    typeId,
+    fleetId,
     name,
@@ -343,3 +356,4 @@ sallyArea,
     type,
-    type_id,
+    typeId,
+    fleetId,
     name,
@@ -376,3 +390,3 @@ sallyArea,
 //     id: ship.api_id, //
-//     type_id: $ship.api_stype, //
+//     typeId: $ship.api_stype, //
 //     name: $ship.api_name,
@@ -379,0 +393,0 @@ //     yomi: $ship.api_yomi, //

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

253113

increased by18.92%

Number of package files

49

increased by4.26%

Lines of code

3344

increased by24.08%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes