poi-plugin-leveling-plan 0.0.1 → 0.0.2

package/utils/kaisou-cost.js

@@ -0,0 +1,269 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getTotalShortageCount = exports.calcAllShortages = exports.calcShortage = exports.getShipRemodelCost = exports.countRemodelNodesInRange = exports.getRemodelLevelsForShip = exports.getRemodelChainForShip = exports.parseShipMaterials = exports.getShipMaterials = exports.multiplyCost = exports.addCost = exports.emptyCost = exports.RESOURCE_INDEX = void 0;
+
+var _lodash = _interopRequireDefault(require("lodash"));
+
+var _constants = require("./constants");
+
+var _kaisou_materials = _interopRequireDefault(require("../assets/kaisou_materials.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
+const KAISOU_ITEM_ID = {
+  drawing: 58,
+  catapult: 65,
+  report: 78,
+  devkit: 3,
+  buildkit: 2,
+  aviation: 77,
+  hokoheso: 75,
+  arms: 94
+};
+const RESOURCE_INDEX = {
+  fuel: 0,
+  ammo: 1,
+  steel: 2,
+  bauxite: 3,
+  buildkit: 4,
+  bucket: 5,
+  devmat: 6,
+  screw: 7
+};
+exports.RESOURCE_INDEX = RESOURCE_INDEX;
+
+const emptyCost = () => ({
+  ammo: 0,
+  steel: 0,
+  consumable: {},
+  equipment: {}
+});
+
+exports.emptyCost = emptyCost;
+
+const addCost = (a, b) => {
+  const addMap = (mapA, mapB) => {
+    const result = _extends({}, mapA);
+
+    Object.keys(mapB).forEach(key => {
+      result[key] = (result[key] || 0) + mapB[key];
+    });
+    return result;
+  };
+
+  return {
+    ammo: (a.ammo || 0) + (b.ammo || 0),
+    steel: (a.steel || 0) + (b.steel || 0),
+    consumable: addMap(a.consumable || {}, b.consumable || {}),
+    equipment: addMap(a.equipment || {}, b.equipment || {})
+  };
+};
+
+exports.addCost = addCost;
+
+const multiplyCost = (cost, multiplier) => {
+  const m = Number(multiplier || 0);
+  if (m <= 0) return emptyCost();
+
+  const multiplyMap = map => {
+    const result = {};
+    Object.keys(map).forEach(key => {
+      result[key] = map[key] * m;
+    });
+    return result;
+  };
+
+  return {
+    ammo: (cost.ammo || 0) * m,
+    steel: (cost.steel || 0) * m,
+    consumable: multiplyMap(cost.consumable || {}),
+    equipment: multiplyMap(cost.equipment || {})
+  };
+};
+
+exports.multiplyCost = multiplyCost;
+
+const getShipMaterials = shipMasterId => {
+  return _kaisou_materials.default[String(shipMasterId)] || null;
+};
+
+exports.getShipMaterials = getShipMaterials;
+
+const parseShipMaterials = materialsData => {
+  if (!materialsData) return emptyCost();
+  const result = emptyCost();
+  result.ammo = Number(materialsData.ammo || 0);
+  result.steel = Number(materialsData.steel || 0);
+
+  if (Array.isArray(materialsData.consumable)) {
+    materialsData.consumable.forEach(([itemId, count]) => {
+      result.consumable[String(itemId)] = (result.consumable[String(itemId)] || 0) + count;
+    });
+  }
+
+  if (Array.isArray(materialsData.equipment)) {
+    materialsData.equipment.forEach(([equipId, count]) => {
+      result.equipment[String(equipId)] = (result.equipment[String(equipId)] || 0) + count;
+    });
+  }
+
+  return result;
+}; // 直接从当前舰船往后遍历，不需要往前找起点
+
+
+exports.parseShipMaterials = parseShipMaterials;
+
+const getRemodelChainForShip = (shipMasterId, $ships) => {
+  if (!$ships || !$ships[shipMasterId]) return [shipMasterId];
+  const chain = [shipMasterId];
+  const visited = new Set([shipMasterId]);
+  let current = shipMasterId;
+  let iterations = 0;
+  const MAX_ITERATIONS = 20; // 防止无限循环
+
+  while (iterations < MAX_ITERATIONS) {
+    var _$ships$current;
+
+    iterations++;
+    const next = +(((_$ships$current = $ships[current]) === null || _$ships$current === void 0 ? void 0 : _$ships$current.api_aftershipid) || 0);
+    if (next <= 0 || visited.has(next)) break;
+    visited.add(next);
+    chain.push(next);
+    current = next;
+  }
+
+  return chain;
+}; // 直接往后遍历获取改造等级
+
+
+exports.getRemodelChainForShip = getRemodelChainForShip;
+
+const getRemodelLevelsForShip = (shipMasterId, $ships) => {
+  if (!$ships || !$ships[shipMasterId]) return [];
+  const levels = [];
+  const visited = new Set();
+  let current = shipMasterId;
+  let iterations = 0;
+  const MAX_ITERATIONS = 20; // 防止无限循环
+
+  while (iterations < MAX_ITERATIONS) {
+    var _$ships$current2, _$ships$nextId;
+
+    iterations++;
+    const nextId = +(((_$ships$current2 = $ships[current]) === null || _$ships$current2 === void 0 ? void 0 : _$ships$current2.api_aftershipid) || 0);
+    if (nextId <= 0 || visited.has(nextId)) break;
+    visited.add(nextId);
+    const nextLv = +(((_$ships$nextId = $ships[nextId]) === null || _$ships$nextId === void 0 ? void 0 : _$ships$nextId.api_afterlv) || 0);
+
+    if (nextLv > 0 && nextLv < 200) {
+      // 过滤异常值
+      levels.push(nextLv);
+    }
+
+    current = nextId;
+  }
+
+  if (levels.length === 0) return [];
+  levels.sort((a, b) => a - b);
+  const lastLv = levels[levels.length - 1]; // 确保 MAX_LEVEL 是有效值
+
+  const maxLvl = typeof _constants.MAX_LEVEL === 'number' && _constants.MAX_LEVEL > 0 ? _constants.MAX_LEVEL : 100;
+
+  if (lastLv < 100) {
+    return [...levels, 99, maxLvl];
+  }
+
+  return [...levels, maxLvl];
+};
+
+exports.getRemodelLevelsForShip = getRemodelLevelsForShip;
+
+const countRemodelNodesInRange = (shipMasterId, fromLevel, toLevel, $ships) => {
+  if (fromLevel >= toLevel) return 0;
+  const levels = getRemodelLevelsForShip(shipMasterId, $ships);
+  if (levels.length === 0) return 0;
+  return levels.filter(lv => lv > fromLevel && lv <= toLevel).length;
+};
+
+exports.countRemodelNodesInRange = countRemodelNodesInRange;
+
+const getShipRemodelCost = (shipMasterId, fromLevel, toLevel, $ships) => {
+  if (!shipMasterId || fromLevel >= toLevel) return emptyCost();
+  const chain = getRemodelChainForShip(shipMasterId, $ships);
+  const levels = getRemodelLevelsForShip(shipMasterId, $ships);
+  if (levels.length === 0) return emptyCost();
+  let totalCost = emptyCost(); // 遍历改造等级，找出需要改造的节点
+
+  for (let i = 0; i < levels.length; i++) {
+    const targetLv = levels[i];
+    if (targetLv <= fromLevel || targetLv > toLevel) continue; // 改造前的舰船是 chain[i]
+
+    const shipIdBeforeRemodel = chain[i];
+    const materials = getShipMaterials(shipIdBeforeRemodel);
+
+    if (materials) {
+      const parsed = parseShipMaterials(materials);
+      totalCost = addCost(totalCost, parsed);
+    }
+  }
+
+  return totalCost;
+};
+
+exports.getShipRemodelCost = getShipRemodelCost;
+
+const calcShortage = (required, available) => {
+  const req = Number(required || 0);
+  const avail = Number(available || 0);
+  return {
+    required: req,
+    available: avail,
+    gap: Math.max(0, req - avail)
+  };
+};
+
+exports.calcShortage = calcShortage;
+
+const calcAllShortages = (totalCost, resources, useitems, equips) => {
+  const resourcesArr = Array.isArray(resources) ? resources : [];
+  const shortages = {
+    ammo: calcShortage(totalCost.ammo, resourcesArr[RESOURCE_INDEX.ammo]),
+    steel: calcShortage(totalCost.steel, resourcesArr[RESOURCE_INDEX.steel]),
+    devmat: calcShortage(totalCost.consumable[KAISOU_ITEM_ID.devkit] || 0, resourcesArr[RESOURCE_INDEX.devmat]),
+    buildkit: calcShortage(totalCost.consumable[KAISOU_ITEM_ID.buildkit] || 0, resourcesArr[RESOURCE_INDEX.buildkit]),
+    consumable: {},
+    equipment: {}
+  };
+  Object.entries(totalCost.consumable || {}).forEach(([itemId, required]) => {
+    const available = _lodash.default.get(useitems, [itemId, 'api_count'], 0);
+
+    shortages.consumable[itemId] = calcShortage(required, available);
+  });
+  Object.entries(totalCost.equipment || {}).forEach(([equipId, required]) => {
+    const available = _lodash.default.get(equips, [equipId, 'length'], 0);
+
+    shortages.equipment[equipId] = calcShortage(required, available);
+  });
+  return shortages;
+};
+
+exports.calcAllShortages = calcAllShortages;
+
+const getTotalShortageCount = shortages => {
+  var _shortages$ammo, _shortages$steel, _shortages$devmat, _shortages$buildkit;
+
+  let count = 0;
+  if (((_shortages$ammo = shortages.ammo) === null || _shortages$ammo === void 0 ? void 0 : _shortages$ammo.gap) > 0) count++;
+  if (((_shortages$steel = shortages.steel) === null || _shortages$steel === void 0 ? void 0 : _shortages$steel.gap) > 0) count++;
+  if (((_shortages$devmat = shortages.devmat) === null || _shortages$devmat === void 0 ? void 0 : _shortages$devmat.gap) > 0) count++;
+  if (((_shortages$buildkit = shortages.buildkit) === null || _shortages$buildkit === void 0 ? void 0 : _shortages$buildkit.gap) > 0) count++;
+  Object.values(shortages.consumable || {}).forEach(s => {
+    if (s.gap > 0) count++;
+  });
+  return count;
+};
+
+exports.getTotalShortageCount = getTotalShortageCount;

package/views/components/map-selector.js

@@ -5,8 +5,6 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _reactBootstrap = require("react-bootstrap");
-
 var _core = require("@blueprintjs/core");
 
 var _select = require("@blueprintjs/select");
@@ -33,92 +31,38 @@ const {
   __
 } = window.i18n['poi-plugin-leveling-plan'];
 
-const MapMultiSelect = _select.MultiSelect.ofType(); // 海图选择器组件
+const MapMultiSelect = _select.MultiSelect.ofType(); // 按世界分组
+
 
+const getWorldGroups = () => {
+  const groups = {};
+  Object.keys(_constants.EXP_BY_POI_DB).sort((a, b) => Number(a) - Number(b)).forEach(id => {
+    const world = Math.floor(Number(id) / 10);
+    if (!groups[world]) groups[world] = [];
+    groups[world].push(id);
+  });
+  return groups;
+};
 
 class MapSelector extends _react.Component {
   constructor(props) {
     super(props);
-    Object.defineProperty(this, "toggleMap", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: mapId => {
-        const {
-          value = [],
-          onChange
-        } = this.props;
-
-        if (value.includes(mapId)) {
-          // 取消选择
-          onChange(value.filter(id => id !== mapId));
-        } else {
-          // 添加选择
-          onChange([...value, mapId]);
-        }
-      }
-    });
-    Object.defineProperty(this, "handleItemSelect", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: mapId => {
-        this.toggleMap(mapId);
-      }
-    });
-    Object.defineProperty(this, "handleTagRemove", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: mapId => {
-        const {
-          value = [],
-          onChange
-        } = this.props;
-        onChange(value.filter(id => id !== mapId));
-      }
-    });
-    Object.defineProperty(this, "renderMap", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: (mapId, {
-        handleClick,
-        modifiers
-      }) => {
-        const {
-          value = []
-        } = this.props;
-        const isSelected = value.includes(mapId);
-        return _react.default.createElement(_core.MenuItem, {
-          key: mapId,
-          text: (0, _planHelpers.formatMapName)(mapId),
-          onClick: handleClick,
-          active: modifiers.active,
-          shouldDismissPopover: false,
-          icon: isSelected ? 'tick' : 'blank'
-        });
-      }
-    });
-    Object.defineProperty(this, "renderTag", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: mapId => {
-        return (0, _planHelpers.formatMapName)(mapId);
-      }
-    });
+
+    _initialiseProps.call(this);
+
     this.state = {
-      isOpen: false
+      isOpen: false,
+      activeWorld: null
     };
+    this.worldGroups = getWorldGroups();
+    const worlds = Object.keys(this.worldGroups).sort((a, b) => Number(a) - Number(b));
+    this.state.activeWorld = worlds[0] || null;
   }
 
   render() {
     const {
-      value = [],
-      mapExpData
-    } = this.props; // 所有海图
-
+      value = []
+    } = this.props;
     const allMapIds = Object.keys(_constants.EXP_BY_POI_DB);
     return _react.default.createElement("div", {
       className: "map-selector"
@@ -128,10 +72,8 @@ class MapSelector extends _react.Component {
       items: allMapIds,
       selectedItems: value.filter(id => allMapIds.includes(id)),
       onItemSelect: this.handleItemSelect,
-      itemRenderer: this.renderMap,
-      onClick: () => this.setState({
-        isOpen: !this.state.isOpen
-      }),
+      itemRenderer: () => null,
+      itemListRenderer: () => this.renderPopoverContent(),
       tagRenderer: this.renderTag,
       tagInputProps: {
         onRemove: this.handleTagRemove,
@@ -147,20 +89,112 @@ class MapSelector extends _react.Component {
       popoverProps: {
         minimal: true,
         usePortal: false,
-        isOpen: this.state.isOpen
+        isOpen: this.state.isOpen,
+        onClose: () => this.setState({
+          isOpen: false
+        }),
+        popoverClassName: 'map-selector-popover'
       }
     })));
   }
 
-} // Redux 连接
+}
+
+var _initialiseProps = function () {
+  Object.defineProperty(this, "toggleMap", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: mapId => {
+      const {
+        value = [],
+        onChange
+      } = this.props;
 
+      if (value.includes(mapId)) {
+        onChange(value.filter(id => id !== mapId));
+      } else {
+        onChange([...value, mapId]);
+      }
+    }
+  });
+  Object.defineProperty(this, "handleItemSelect", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: mapId => {
+      this.toggleMap(mapId);
+    }
+  });
+  Object.defineProperty(this, "handleTagRemove", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: mapId => {
+      const {
+        value = [],
+        onChange
+      } = this.props;
+      onChange(value.filter(id => id !== mapId));
+    }
+  });
+  Object.defineProperty(this, "renderTag", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: mapId => {
+      return (0, _planHelpers.formatMapName)(mapId);
+    }
+  });
+  Object.defineProperty(this, "renderPopoverContent", {
+    configurable: true,
+    enumerable: true,
+    writable: true,
+    value: () => {
+      const {
+        value = []
+      } = this.props;
+      const {
+        activeWorld
+      } = this.state;
+      const worlds = Object.keys(this.worldGroups).sort((a, b) => Number(a) - Number(b));
+      return _react.default.createElement("div", {
+        className: "map-selector-tabs"
+      }, _react.default.createElement(_core.Tabs, {
+        id: "map-world-tabs",
+        selectedTabId: activeWorld,
+        onChange: id => this.setState({
+          activeWorld: id
+        }),
+        renderActiveTabPanelOnly: true,
+        vertical: true
+      }, worlds.map(world => _react.default.createElement(_core.Tab, {
+        key: world,
+        id: world,
+        title: `${world}`,
+        panel: _react.default.createElement("div", {
+          className: "map-selector-tab-panel"
+        }, this.worldGroups[world].map(mapId => {
+          const isSelected = value.includes(mapId);
+          return _react.default.createElement(_core.MenuItem, {
+            key: mapId,
+            text: (0, _planHelpers.formatMapName)(mapId),
+            icon: isSelected ? 'tick' : 'blank',
+            onClick: () => this.toggleMap(mapId),
+            shouldDismissPopover: false
+          });
+        }))
+      }))));
+    }
+  });
+};
 
 const mapStateToProps = (0, _reselect.createSelector)([_selectors.personalStatsSelector], personalStats => {
-  // 获取所有海图的经验数据
   const allMapIds = Object.keys(_constants.EXP_BY_POI_DB);
   const mapExpData = {};
   allMapIds.forEach(mapId => {
-    mapExpData[mapId] = (0, _expCalculator.getMapExp)(mapId, personalStats, 30);
+    const result = (0, _expCalculator.getMapExp)(mapId, personalStats, 30);
+    mapExpData[mapId] = result.exp || 0;
   });
   return {
     mapExpData

package/views/components/plan-form.js

@@ -21,6 +21,8 @@ var _selectors = require("../../utils/selectors");
 
 var _planHelpers = require("../../utils/plan-helpers");
 
+var _kaisouCost = require("../../utils/kaisou-cost");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
@@ -96,7 +98,35 @@ class PlanForm extends _react.Component {
       min: currentLevel + 1,
       max: 185,
       placeholder: __('Enter target level')
-    }), selectedShip && _react.default.createElement("p", {
+    }), selectedShip && $ships && (() => {
+      const shipMasterId = selectedShip.api_ship_id;
+      const remodelLevels = (0, _kaisouCost.getRemodelLevelsForShip)(shipMasterId, $ships);
+      const startLv = parseInt(startLevel) || 0;
+      const filteredLevels = remodelLevels.filter(lv => lv > startLv);
+      if (filteredLevels.length === 0) return null;
+      return _react.default.createElement("div", {
+        className: "remodel-level-tags",
+        style: {
+          marginBottom: 8,
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 5
+        }
+      }, filteredLevels.map(lv => _react.default.createElement("span", {
+        key: lv,
+        onClick: () => this.setState({
+          targetLevel: String(lv)
+        }),
+        style: {
+          cursor: 'pointer',
+          padding: '2px 8px',
+          backgroundColor: parseInt(targetLevel) === lv ? '#337ab7' : '#f0f0f0',
+          color: parseInt(targetLevel) === lv ? 'white' : '#333',
+          borderRadius: 3,
+          fontSize: 12
+        }
+      }, "lv", lv)));
+    })(), selectedShip && _react.default.createElement("p", {
       className: "help-block"
     }, __('Current level'), ": ", currentLevel)), _react.default.createElement(_reactBootstrap.FormGroup, null, _react.default.createElement(_reactBootstrap.ControlLabel, null, __('Maps')), _react.default.createElement(_mapSelector.default, {
       value: maps,

package/views/components/plan-item.js

@@ -7,24 +7,109 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactBootstrap = require("react-bootstrap");
 
-var _reactRedux = require("react-redux");
+var _icon = require("views/components/etc/icon");
 
-var _reselect = require("reselect");
+var _useitemIcon = require("./useitem-icon");
+
+var _kaisouCost = require("../../utils/kaisou-cost");
+
+var _lodash = _interopRequireDefault(require("lodash"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const {
   __
-} = window.i18n['poi-plugin-leveling-plan']; // 单个计划卡片组件
+} = window.i18n['poi-plugin-leveling-plan'];
+const {
+  __: __r
+} = window.i18n.resources;
+
+const RemodelCostDisplay = ({
+  cost,
+  resources,
+  useitems,
+  $useitems
+}) => {
+  var _shortages$ammo, _shortages$steel;
+
+  if (!cost || cost.ammo === 0 && cost.steel === 0 && Object.keys(cost.consumable).length === 0) {
+    return _react.default.createElement("span", {
+      style: {
+        opacity: 0.5
+      }
+    }, __('No remodel required'));
+  }
+
+  const shortages = (0, _kaisouCost.calcAllShortages)(cost, resources, useitems || {}, {});
+  return _react.default.createElement("span", {
+    style: {
+      textAlign: 'right',
+      fontSize: '0.9em'
+    }
+  }, _react.default.createElement("span", {
+    style: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '4px',
+      flexWrap: 'wrap'
+    }
+  }, cost.ammo > 0 && _react.default.createElement("span", null, _react.default.createElement(_icon.MaterialIcon, {
+    materialId: 2,
+    className: "material-icon-sm"
+  }), cost.ammo.toLocaleString(), ((_shortages$ammo = shortages.ammo) === null || _shortages$ammo === void 0 ? void 0 : _shortages$ammo.gap) > 0 && _react.default.createElement("span", {
+    style: {
+      color: '#d9534f'
+    }
+  }, "(-", shortages.ammo.gap.toLocaleString(), ")")), cost.steel > 0 && _react.default.createElement("span", null, _react.default.createElement(_icon.MaterialIcon, {
+    materialId: 3,
+    className: "material-icon-sm"
+  }), cost.steel.toLocaleString(), ((_shortages$steel = shortages.steel) === null || _shortages$steel === void 0 ? void 0 : _shortages$steel.gap) > 0 && _react.default.createElement("span", {
+    style: {
+      color: '#d9534f'
+    }
+  }, "(-", shortages.steel.gap.toLocaleString(), ")")), Object.keys(cost.consumable || {}).length > 0 && Object.entries(cost.consumable).map(([itemId, count]) => {
+    const shortage = _lodash.default.get(shortages, ['consumable', itemId, 'gap'], 0);
+
+    const numId = Number(itemId); // 建造资材(2) materialId=4，开发资材(3) materialId=6
+
+    const isMaterial = numId === 2 || numId === 3;
+    const materialId = numId === 2 ? 4 : 6;
+    return _react.default.createElement("span", {
+      key: itemId,
+      style: {
+        fontSize: '0.85em',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: 2
+      }
+    }, isMaterial ? _react.default.createElement(_icon.MaterialIcon, {
+      materialId: materialId,
+      className: "material-icon-sm"
+    }) : _react.default.createElement(_useitemIcon.UseitemIcon, {
+      useitemId: numId,
+      className: "useitem-icon-sm"
+    }), count, shortage > 0 && _react.default.createElement("span", {
+      style: {
+        color: '#d9534f'
+      }
+    }, "(-", shortage, ")"));
+  })));
+}; // 单个计划卡片组件
+
 
 const PlanItem = ({
   planDetail,
   onEdit,
   onDelete,
-  onComplete
+  onComplete,
+  $ships,
+  resources,
+  useitems,
+  $useitems
 }) => {
   if (!planDetail) return null;
   const {
+    shipMasterId,
     shipName,
     startLv,
     currentLv,
@@ -37,7 +122,8 @@ const PlanItem = ({
     notes,
     completed
   } = planDetail;
-  console.log(planDetail);
+  const fromLevel = startLv === undefined ? currentLv : startLv;
+  const remodelCost = $ships && shipMasterId && fromLevel && targetLv ? (0, _kaisouCost.getShipRemodelCost)(shipMasterId, fromLevel, targetLv, $ships) : null;
   return _react.default.createElement(_reactBootstrap.Panel, {
     className: "plan-item"
   }, _react.default.createElement(_reactBootstrap.Panel.Heading, null, _react.default.createElement("div", {
@@ -74,7 +160,16 @@ const PlanItem = ({
     className: "exp-info"
   }, __('Current EXP'), ": ", currentExp.toLocaleString(), " / ", targetTotalExp.toLocaleString()), _react.default.createElement("div", {
     className: "exp-info"
-  }, __('Required EXP'), ": ", requiredExp.toLocaleString())), _react.default.createElement("div", {
+  }, __('Required EXP'), ": ", requiredExp.toLocaleString(), remodelCost && _react.default.createElement("span", {
+    style: {
+      marginLeft: 15
+    }
+  }, _react.default.createElement(RemodelCostDisplay, {
+    cost: remodelCost,
+    resources: resources,
+    useitems: useitems,
+    $useitems: $useitems
+  })))), _react.default.createElement("div", {
     className: "maps-section"
   }, _react.default.createElement("div", {
     className: "maps-label"