bnstooltips 1.8.3 → 1.8.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -3
- package/build/index.es.js +46 -29
- package/build/index.es.js.map +1 -1
- package/build/index.js +46 -29
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,10 +5,23 @@
|
|
|
5
5
|
Used in my YAST Project. https://yast.now.sh
|
|
6
6
|
|
|
7
7
|
### Examples
|
|
8
|
+
<details>
|
|
9
|
+
<summary>Click to show examples</summary>
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
</details>
|
|
8
24
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
25
|
|
|
13
26
|
### Dev note
|
|
14
27
|
Create a new component from templates with `yarn createCp`
|
package/build/index.es.js
CHANGED
|
@@ -5547,7 +5547,7 @@ var index = /*#__PURE__*/forwardRef( /*#__PURE__*/TippyGenerator(tippy));
|
|
|
5547
5547
|
|
|
5548
5548
|
var Tippy = index;
|
|
5549
5549
|
|
|
5550
|
-
var css_248z$9 = ".ItemImproveTooltip_PrevCurNext {\n display: flex;\n align-items: center;\n justify-content: center; }\n .ItemImproveTooltip_PrevCurNext_container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 90%; }\n .ItemImproveTooltip_PrevCurNext_container > div {\n margin: 0 .5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChild {\n flex: 3; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n flex: 3.5; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n border: solid 1px rgba(
|
|
5550
|
+
var css_248z$9 = ".ItemImproveTooltip_PrevCurNext {\n display: flex;\n align-items: center;\n justify-content: center; }\n .ItemImproveTooltip_PrevCurNext_container {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 90%; }\n .ItemImproveTooltip_PrevCurNext_container > div {\n margin: 0 .5rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChild {\n flex: 3; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra {\n flex: 3.5; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container {\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center;\n border: solid 1px rgba(108, 108, 108, 0.6);\n border-radius: 3px;\n padding: 1rem 0;\n cursor: pointer;\n opacity: .8; }\n .ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow:hover {\n opacity: 1;\n filter: brightness(1.5); }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild {\n flex: 1; }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton {\n cursor: pointer;\n opacity: .8; }\n .ItemImproveTooltip_PrevCurNext_container_arrowChild_arrowButton:hover {\n opacity: 1;\n filter: brightness(1.5); }\n\n.ItemImproveTooltip_ItemWithText {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_ItemWithText_icon {\n width: 56px;\n height: 56px; }\n .ItemImproveTooltip_ItemWithText_iconSmall {\n width: 40px;\n height: 40px; }\n .ItemImproveTooltip_ItemWithText_iconPad {\n border-width: 2px;\n border-color: rgba(108, 108, 108, 0.6);\n border-style: solid;\n border-radius: 3px;\n padding: 1px;\n display: flex;\n justify-content: center;\n align-items: center; }\n .ItemImproveTooltip_ItemWithText_name {\n display: flex;\n justify-content: center;\n align-items: center;\n text-align: center; }\n\n.ItemImproveUpgradeCost {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n margin-top: 2rem;\n margin-bottom: 1rem; }\n .ItemImproveUpgradeCost_title {\n text-align: center;\n font-size: 18px;\n padding-top: 1rem; }\n .ItemImproveUpgradeCost > div {\n width: 100%; }\n .ItemImproveUpgradeCost_money {\n margin-top: .5rem; }\n\n.SubCostSelector {\n display: flex;\n justify-content: center;\n align-items: stretch;\n margin-top: .5rem;\n margin-bottom: .5rem;\n overflow-x: auto; }\n .SubCostSelector > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 2; }\n\n.MainCostSelector {\n margin: .33rem 0 .5rem 0;\n display: flex;\n justify-content: center;\n align-items: stretch; }\n .MainCostSelector_or {\n flex: 0 1 0px !important;\n padding: 0 2rem;\n font-size: 18px; }\n .MainCostSelector > div {\n display: flex;\n justify-content: center;\n align-items: center;\n flex: 1; }\n .MainCostSelector_warning {\n min-height: 1rem;\n display: flex;\n justify-content: center;\n align-items: center; }\n .MainCostSelector_warning_active {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: .5rem; }\n .MainCostSelector_container {\n display: flex;\n flex-direction: column;\n padding: 0 .1rem .33rem .1rem; }\n .MainCostSelector_container_space {\n flex: 1;\n margin: 0 0 .1rem 0; }\n";
|
|
5551
5551
|
styleInject(css_248z$9);
|
|
5552
5552
|
|
|
5553
5553
|
var css_248z$8 = ".tippy-box {\n max-width: none !important;\n background-color: transparent !important;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;\n transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }\n .tippy-box:hover {\n box-shadow: rgba(0, 0, 0, 0.8) 0px 20px 60px 0px !important; }\n\n.tippy-content {\n padding: 0 !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade1\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #6c6c6c !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade2\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ffffff !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade3\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #58ff77 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade4\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #46bee1 !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade5\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #d739ff !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade6\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #f1b248 !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade7\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff770a !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"bottom\"]\n.tippy-arrow::before {\n border-bottom-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"top\"]\n.tippy-arrow::before {\n border-top-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"left\"]\n.tippy-arrow::before {\n border-left-color: #ff0084 !important; }\n\n.tippy-box[data-theme~=\"grade8\"][data-placement^=\"right\"]\n.tippy-arrow::before {\n border-right-color: #ff0084 !important; }\n";
|
|
@@ -5674,7 +5674,7 @@ var ItemImproveEffectsTooltipWrapper = function (_a) {
|
|
|
5674
5674
|
};
|
|
5675
5675
|
|
|
5676
5676
|
function PrevCurNext(_a) {
|
|
5677
|
-
var item = _a.item, client = _a.client, region = _a.region, nextItem = _a.nextItem, prevItem = _a.prevItem, steps = _a.steps
|
|
5677
|
+
var item = _a.item, client = _a.client, region = _a.region, nextItem = _a.nextItem, prevItem = _a.prevItem, steps = _a.steps, allPossibleUpgrades = _a.allPossibleUpgrades, SetCustomStage = _a.SetCustomStage, NavigateTo = _a.NavigateTo;
|
|
5678
5678
|
return (React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext" },
|
|
5679
5679
|
React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container" },
|
|
5680
5680
|
React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChild" }, prevItem != null ?
|
|
@@ -5696,17 +5696,22 @@ function PrevCurNext(_a) {
|
|
|
5696
5696
|
if (nextItem.itemImprove != null)
|
|
5697
5697
|
NavigateTo(nextItem);
|
|
5698
5698
|
} },
|
|
5699
|
-
React.createElement("span", { style: { fontSize: 32 }, className: "TooltipBase_upgradeRed material-symbols-outlined" }, "keyboard_arrow_up"))
|
|
5699
|
+
React.createElement("span", { style: { fontSize: 32 }, className: "TooltipBase_upgradeRed material-symbols-outlined" }, "keyboard_arrow_up")))
|
|
5700
|
+
: null),
|
|
5701
|
+
React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChild" }, nextItem != null ?
|
|
5702
|
+
React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container" },
|
|
5703
|
+
React.createElement(ItemWithText, { tooltip: true, small: true, item: nextItem, client: client, region: region }),
|
|
5700
5704
|
GetUpgradeEffects(item, steps, nextItem).length > 0
|
|
5701
5705
|
?
|
|
5702
5706
|
React.createElement("div", { style: { cursor: "default" } },
|
|
5703
5707
|
React.createElement(ItemImproveEffectsTooltipWrapper, { effectsForName: GetUpgradeEffects(item, steps, nextItem) },
|
|
5704
5708
|
React.createElement("span", { style: { fontSize: 16 }, className: "00008130.UI.Label_Green03_12 material-symbols-outlined" }, "help")))
|
|
5705
|
-
: null
|
|
5706
|
-
|
|
5707
|
-
|
|
5708
|
-
|
|
5709
|
-
|
|
5709
|
+
: null,
|
|
5710
|
+
React.createElement(ItemImproveSelectStageTooltipWrapper, { trigger: "click", interactive: true, items: allPossibleUpgrades, onClick: function (item) {
|
|
5711
|
+
SetCustomStage(item);
|
|
5712
|
+
} },
|
|
5713
|
+
React.createElement("div", { className: "ItemImproveTooltip_PrevCurNext_container_itemChildExtra_container_arrow" },
|
|
5714
|
+
React.createElement("span", { style: { fontSize: 32 }, className: "material-symbols-outlined" }, "keyboard_arrow_down"))))
|
|
5710
5715
|
: null))));
|
|
5711
5716
|
}
|
|
5712
5717
|
function GetUpgradeEffects(item, steps, nextItem) {
|
|
@@ -5766,19 +5771,25 @@ function Money(_a) {
|
|
|
5766
5771
|
|
|
5767
5772
|
function MainCostSelector(_a) {
|
|
5768
5773
|
var options = _a.options, client = _a.client, region = _a.region, selectOption = _a.selectOption, selectedOption = _a.selectedOption;
|
|
5769
|
-
return (React.createElement("div",
|
|
5770
|
-
|
|
5771
|
-
React.createElement("
|
|
5772
|
-
React.createElement("
|
|
5773
|
-
|
|
5774
|
-
|
|
5775
|
-
|
|
5776
|
-
|
|
5777
|
-
|
|
5778
|
-
|
|
5779
|
-
|
|
5780
|
-
|
|
5781
|
-
|
|
5774
|
+
return (React.createElement("div", null,
|
|
5775
|
+
React.createElement("span", { className: "TooltipBase_upgradeRed MainCostSelector_warning" }, options[selectedOption].isRandom ?
|
|
5776
|
+
React.createElement("span", { className: "MainCostSelector_warning_active" },
|
|
5777
|
+
React.createElement("span", { style: { fontSize: 16 }, className: "material-symbols-outlined" }, "error"),
|
|
5778
|
+
"\u00A0 This upgrade has a chance to fail!")
|
|
5779
|
+
: null),
|
|
5780
|
+
React.createElement("div", { className: "MainCostSelector" }, options.map(function (option, i) {
|
|
5781
|
+
return (React.createElement(React.Fragment, { key: i },
|
|
5782
|
+
React.createElement("div", { className: "MainCostSelector_container" },
|
|
5783
|
+
React.createElement("div", { onClick: function () {
|
|
5784
|
+
selectOption(i);
|
|
5785
|
+
} },
|
|
5786
|
+
React.createElement(ItemWithText, { tooltip: false, borderClass: i == selectedOption ? "TooltipBase_border-grade-4" : "", itemId: option.mainItemCost.itemId, item: null, itemLevel: option.mainItemCost.itemLevel, client: client, region: region })),
|
|
5787
|
+
React.createElement("div", null,
|
|
5788
|
+
React.createElement("span", null,
|
|
5789
|
+
"x",
|
|
5790
|
+
option.mainItemCost.max))),
|
|
5791
|
+
i < options.length - 1 ? React.createElement("div", { className: "MainCostSelector_or" }, "or") : null));
|
|
5792
|
+
}))));
|
|
5782
5793
|
}
|
|
5783
5794
|
|
|
5784
5795
|
function SubCosts(_a) {
|
|
@@ -5790,11 +5801,11 @@ function SubCosts(_a) {
|
|
|
5790
5801
|
React.createElement("div", { className: "MainCostSelector_container" },
|
|
5791
5802
|
React.createElement("div", null,
|
|
5792
5803
|
React.createElement(ItemWithText, { tooltip: false, small: true, itemId: subItem.itemId, item: null, itemLevel: subItem.itemLevel, client: client, region: region })),
|
|
5804
|
+
React.createElement("div", { className: "MainCostSelector_container_space" }),
|
|
5793
5805
|
React.createElement("div", null,
|
|
5794
5806
|
React.createElement("span", null,
|
|
5795
5807
|
"x",
|
|
5796
|
-
subItem.max)))
|
|
5797
|
-
i < options[selectedOption].subItemCost.length - 1 ? React.createElement("div", { className: "MainCostSelector_or" }, "and") : null));
|
|
5808
|
+
subItem.max)))));
|
|
5798
5809
|
})));
|
|
5799
5810
|
}
|
|
5800
5811
|
|
|
@@ -5814,7 +5825,13 @@ function ItemImproveUpgradeCost(_a) {
|
|
|
5814
5825
|
React.createElement("div", { className: "ItemImproveUpgradeCost_title 00008130.UI.Label_LightYellow_12" }, "Upgrade Cost"),
|
|
5815
5826
|
React.createElement(MainCostSelector, { options: accumulatedCost, client: client, region: region, selectOption: selectOption, selectedOption: selectedOption }),
|
|
5816
5827
|
React.createElement(SubCosts, { options: accumulatedCost, client: client, region: region, selectedOption: selectedOption }),
|
|
5817
|
-
|
|
5828
|
+
accumulatedCost[selectedOption].moneyCost > 0 ?
|
|
5829
|
+
React.createElement("div", { className: "ItemImproveUpgradeCost_money" },
|
|
5830
|
+
React.createElement("span", { style: { fontSize: 16, display: "flex", justifyContent: "center", alignItems: "center" } },
|
|
5831
|
+
React.createElement("span", { className: "TooltipBase_grade-6" }, "Money:"),
|
|
5832
|
+
"\u00A0",
|
|
5833
|
+
React.createElement(Money, { center: true, money: accumulatedCost[selectedOption].moneyCost })))
|
|
5834
|
+
: null));
|
|
5818
5835
|
}
|
|
5819
5836
|
function GetAccumulatedUpgradeCost(item, steps) {
|
|
5820
5837
|
var result = [];
|
|
@@ -5822,8 +5839,8 @@ function GetAccumulatedUpgradeCost(item, steps) {
|
|
|
5822
5839
|
result = item.itemImprove.upgradeOptions;
|
|
5823
5840
|
}
|
|
5824
5841
|
else {
|
|
5825
|
-
var mainCost = item.itemImprove.upgradeOptions[0].mainItemCost;
|
|
5826
|
-
var subCosts = item.itemImprove.upgradeOptions[0].subItemCost;
|
|
5842
|
+
var mainCost = structuredClone(item.itemImprove.upgradeOptions[0].mainItemCost);
|
|
5843
|
+
var subCosts = structuredClone(item.itemImprove.upgradeOptions[0].subItemCost);
|
|
5827
5844
|
var moneyCost = item.itemImprove.upgradeOptions[0].moneyCost;
|
|
5828
5845
|
steps.forEach(function (step) {
|
|
5829
5846
|
var option0 = step.itemImprove.upgradeOptions[0];
|
|
@@ -5840,7 +5857,7 @@ function GetAccumulatedUpgradeCost(item, steps) {
|
|
|
5840
5857
|
else {
|
|
5841
5858
|
subCosts.push(mainCost);
|
|
5842
5859
|
}
|
|
5843
|
-
mainCost = option0.mainItemCost;
|
|
5860
|
+
mainCost = structuredClone(option0.mainItemCost);
|
|
5844
5861
|
}
|
|
5845
5862
|
moneyCost += option0.moneyCost;
|
|
5846
5863
|
option0.subItemCost.forEach(function (subItem) {
|
|
@@ -5978,10 +5995,10 @@ function ItemImproveTooltip(_a) {
|
|
|
5978
5995
|
mainInfos: [],
|
|
5979
5996
|
subInfoGroups: [],
|
|
5980
5997
|
fullHeight: fullHeight,
|
|
5981
|
-
widthOverride: "
|
|
5998
|
+
widthOverride: "500px"
|
|
5982
5999
|
};
|
|
5983
6000
|
if (debug) {
|
|
5984
|
-
tooltipBaseProps.subtitle = data.
|
|
6001
|
+
tooltipBaseProps.subtitle = "debug: " + data.id + "-" + data.level;
|
|
5985
6002
|
}
|
|
5986
6003
|
AddPrevCurNext(tooltipBaseProps.subInfoGroups, data, nextItem, prevItem, steps, allPossibleUpgrades, SetCustomStage, NavigateTo, client, region);
|
|
5987
6004
|
AddUpgradeCost(tooltipBaseProps.subInfoGroups, data, nextItem, steps, client, region);
|