poi-plugin-senka-calc/views/progress.js

Ranking point calculator for poi

"use strict";

exports.__esModule = true;
exports.Progress = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _core = require("@blueprintjs/core");

var _overlay = require("views/components/etc/overlay");

var _reactI18next = require("react-i18next");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const ProgressContainer = _styledComponents.default.div.withConfig({
  displayName: "progress__ProgressContainer",
  componentId: "sc-1ag8fx2-0"
})(["display:flex;height:8px;width:100%;overflow:hidden;border-radius:4px;position:relative;background-color:transparent;border-color:transparent;margin-bottom:15px;"]);

const ProgressBar = _styledComponents.default.div.withConfig({
  displayName: "progress__ProgressBar",
  componentId: "sc-1ag8fx2-1"
})(["position:absolute;left:0;top:0;height:100%;overflow:hidden;border-radius:4px;border-color:transparent;"]);

const CurrentSenka = (0, _styledComponents.default)(ProgressBar).withConfig({
  displayName: "progress__CurrentSenka",
  componentId: "sc-1ag8fx2-2"
})(["background-color:", ";"], _core.Colors.BLUE2);
const DeltaSenka = (0, _styledComponents.default)(ProgressBar).withConfig({
  displayName: "progress__DeltaSenka",
  componentId: "sc-1ag8fx2-3"
})(["background-color:", ";"], _core.Colors.BLUE5);
const PlannedExSenka = (0, _styledComponents.default)(ProgressBar).withConfig({
  displayName: "progress__PlannedExSenka",
  componentId: "sc-1ag8fx2-4"
})(["background-color:", ";"], _core.Colors.GREEN1);
const PlannedQuestSenka = (0, _styledComponents.default)(ProgressBar).withConfig({
  displayName: "progress__PlannedQuestSenka",
  componentId: "sc-1ag8fx2-5"
})(["background-color:", ";"], _core.Colors.GREEN4);
const UnfinishedSenka = (0, _styledComponents.default)(ProgressBar).withConfig({
  displayName: "progress__UnfinishedSenka",
  componentId: "sc-1ag8fx2-6"
})(["background-color:", ";.bp4-dark &,.bp5-dark &,.bp6-dark &{background-color:", ";}"], _core.Colors.DARK_GRAY5, _core.Colors.LIGHT_GRAY5);

const TargetBorder = _styledComponents.default.div.withConfig({
  displayName: "progress__TargetBorder",
  componentId: "sc-1ag8fx2-7"
})(["height:100%;position:absolute;right:0;top:0;z-index:10;border-left:1px solid ", ";"], _core.Colors.DARK_GRAY1);

const InnerTooltip = (0, _styledComponents.default)(_overlay.Tooltip).withConfig({
  displayName: "progress__InnerTooltip",
  componentId: "sc-1ag8fx2-8"
})(["width:100%;height:100%;& div{width:100%;height:100%;}"]);

const getProgressStyle = (...values) => {
  const total = values.reduce((a, b) => a + b, 0);
  let curr = 0,
      zIndex = values.length + 1;
  const ret = [];

  for (const value of values) {
    curr += value;
    ret.push({
      width: (curr / total * 100).toFixed(1) + '%',
      zIndex: zIndex--
    });
  }

  return ret;
};

const Progress = ({
  currentSenka,
  deltaSenka,
  plannedExSenka,
  plannedQuestSenka,
  expectedSenka,
  unfinishedSenka,
  targetSenka
}) => {
  const {
    t
  } = (0, _reactI18next.useTranslation)('poi-plugin-senka-calc');
  const totalLength = Math.max(targetSenka, expectedSenka);
  const borderWidth = totalLength === targetSenka ? '0' : ((totalLength - targetSenka) / totalLength * 100).toFixed(1) + '%';
  const [currentSenkaStyle, deltaSenkaStyle, exSenkaStyle, questSenkaStyle, unfinishedSenkaStyle] = getProgressStyle(currentSenka, deltaSenka, plannedExSenka, plannedQuestSenka, unfinishedSenka);
  return /*#__PURE__*/_react.default.createElement(ProgressContainer, null, /*#__PURE__*/_react.default.createElement(CurrentSenka, {
    style: currentSenkaStyle
  }, /*#__PURE__*/_react.default.createElement(InnerTooltip, {
    position: _core.Position.BOTTOM_RIGHT,
    content: t('Current ranking points {{ point }}', {
      point: currentSenka
    }),
    targetTagName: "div",
    wrapperTagName: "div"
  }, /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement(DeltaSenka, {
    style: deltaSenkaStyle
  }, /*#__PURE__*/_react.default.createElement(InnerTooltip, {
    position: _core.Position.BOTTOM_RIGHT,
    content: t('Staging ranking points {{ point }}', {
      point: deltaSenka
    }),
    targetTagName: "div",
    wrapperTagName: "div"
  }, /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement(PlannedExSenka, {
    style: exSenkaStyle
  }, /*#__PURE__*/_react.default.createElement(InnerTooltip, {
    position: _core.Position.BOTTOM_RIGHT,
    content: t('Ranking points of planned extra operations {{ point }}', {
      point: plannedExSenka
    }),
    targetTagName: "div",
    wrapperTagName: "div"
  }, /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement(PlannedQuestSenka, {
    style: questSenkaStyle
  }, /*#__PURE__*/_react.default.createElement(InnerTooltip, {
    position: _core.Position.BOTTOM_RIGHT,
    content: t('Ranking points of planned quests {{ point }}', {
      point: plannedQuestSenka
    }),
    targetTagName: "div",
    wrapperTagName: "div"
  }, /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement(UnfinishedSenka, {
    style: unfinishedSenkaStyle
  }, /*#__PURE__*/_react.default.createElement(InnerTooltip, {
    position: _core.Position.BOTTOM_RIGHT,
    content: t('Remaining ranking points to reach target {{ point }}', {
      point: unfinishedSenka
    }),
    targetTagName: "div",
    wrapperTagName: "div"
  }, /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement(TargetBorder, {
    style: {
      display: borderWidth === '0' ? 'none' : 'block',
      width: borderWidth
    }
  }, /*#__PURE__*/_react.default.createElement(InnerTooltip, {
    position: _core.Position.BOTTOM_RIGHT,
    content: t('Target of ranking points {{ point }}', {
      point: targetSenka
    }),
    targetTagName: "div",
    wrapperTagName: "div"
  }, /*#__PURE__*/_react.default.createElement("div", null))));
};

exports.Progress = Progress;