bnstooltips 1.18.17 → 1.19.0

package/build/index.es.js

@@ -1,4 +1,4 @@
-import React, { useState, cloneElement, forwardRef as forwardRef$1, useLayoutEffect, useEffect, useRef } from 'react';
+import React, { useState, cloneElement, forwardRef as forwardRef$1, useLayoutEffect, useEffect, useRef, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 
 function styleInject(css, ref) {
@@ -129,6 +129,16 @@ function __generator(thisArg, body) {
         } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
+}
+
+function __spreadArray(to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
 }
 
 var css_248z$e = ".TooltipBase_bns_upgradeRed_color {\n  color: #FF2818;\n}\n\n.TooltipBase_bns_downgradeBlue_color {\n  color: #28A9F0;\n}\n\n.ItemTooltip_itemIconLoading {\n  width: 50px;\n  padding: 0.22rem 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ItemTooltip_jobstyleToggleContainer {\n  display: flex;\n}\n.ItemTooltip_optionPadding {\n  margin: 0.2rem 0 0.5rem 0;\n}\n.ItemTooltip_showButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.2);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n.ItemTooltip_showButton:hover {\n  background-color: rgba(255, 255, 255, 0.3);\n  opacity: 1;\n}\n.ItemTooltip_showButton-active {\n  background-color: rgba(255, 255, 255, 0.4) !important;\n  color: #fff;\n  opacity: 1;\n}\n.ItemTooltip_jobstyleButton {\n  flex: 1;\n  border: none;\n  padding: 0.33rem 0.5rem;\n  border-radius: 0;\n  background-color: rgba(233, 233, 233, 0.1);\n  color: #fff;\n  opacity: 0.8;\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n.ItemTooltip_jobstyleButton:hover {\n  background-color: rgba(255, 255, 255, 0.2);\n  opacity: 1;\n}\n.ItemTooltip_jobstyleButton-active {\n  background-color: rgba(255, 255, 255, 0.3) !important;\n  color: #fff;\n  opacity: 1;\n}\n.ItemTooltip_itemiconnamedivspan {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ItemTooltip_cooldown {\n  font-weight: 400;\n  font-size: 12px;\n}\n.ItemTooltip_subInfo {\n  font-size: 14px;\n}\n.ItemTooltip_stats_mainstat {\n  font-size: 16px;\n  margin-bottom: 0.05rem;\n}\n.ItemTooltip_stats_substat {\n  font-size: 14px;\n}\n.ItemTooltip_itemIconInline {\n  width: 18px !important;\n  height: 18px !important;\n  margin: 0 1px;\n  top: 3px;\n  position: relative;\n}\n.ItemTooltip_itemIconRandom {\n  width: 36px !important;\n  top: 6px;\n  margin: 0 1px 0 2px;\n}\n.ItemTooltip_itemIconSmall {\n  width: 20px !important;\n  height: 20px !important;\n  margin-right: 0.33rem;\n}\n.ItemTooltip_itemIconSlate {\n  width: 24px !important;\n  height: 24px !important;\n  margin-right: 0.11rem;\n}\n.ItemTooltip_setBonus {\n  margin-bottom: 0.8rem !important;\n}\n.ItemTooltip_setContainer {\n  padding-left: 0.33rem;\n  padding-top: 0.22rem;\n}\n.ItemTooltip_setStageContainer {\n  display: flex;\n  margin: 0.25rem 0 0.35rem 0;\n}\n.ItemTooltip_setStageNumber {\n  margin-top: 0.2rem;\n  padding-top: 0.1rem;\n  line-height: 16px;\n  width: 16px;\n  height: 16px;\n  max-height: 16px;\n  font-weight: 500;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: rgba(88, 255, 119, 0.8);\n  border: 1px solid rgba(88, 255, 119, 0.9);\n  border-radius: 3px;\n}\n.ItemTooltip_setStageContent {\n  padding-top: 0.2rem;\n  flex-grow: 2;\n  padding-left: 0.55rem;\n  max-width: 90%;\n  color: #58ff77;\n}\n.ItemTooltip_itemiconnamediv {\n  display: flex;\n  align-items: center;\n  padding: 0.15rem 0 0.15rem 0.33rem;\n  line-height: 20px;\n}\n.ItemTooltip_slateIconNameStatsDiv {\n  display: flex;\n  justify-content: space-between;\n  padding: 0.15rem 0;\n  border-bottom: solid 1px rgba(233, 233, 233, 0.3);\n}\n.ItemTooltip_slateIconNameDiv {\n  display: flex;\n  justify-content: start;\n  align-items: center;\n  flex: 1;\n}\n.ItemTooltip_slateItemNameSmall {\n  font-size: 14px;\n}\n.ItemTooltip_slateStatsDiv {\n  display: flex;\n  flex-direction: column;\n  align-items: end;\n  justify-content: center;\n  flex: 1;\n}\n.ItemTooltip_setItemIconNameDiv {\n  display: flex;\n  align-items: center;\n  padding: 0.11rem 0 0.11rem 0.33rem;\n  line-height: 20px;\n}\n.ItemTooltip_setItemsContainer {\n  display: flex;\n  font-size: 12px;\n}\n.ItemTooltip_setItemsSubContainer {\n  flex: 1;\n}\n.ItemTooltip_itemNameRandomDiv {\n  display: flex;\n  align-items: center;\n}\n\n@media only screen and (max-width: 380px) {\n  .ItemTooltip_jobstyleButton {\n    padding: 0.5rem;\n  }\n}\n/**\n * ==============================================\n * Dot Elastic\n * ==============================================\n */\n.dot-elastic {\n  position: relative;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElastic 1s infinite linear;\n}\n\n.dot-elastic::before,\n.dot-elastic::after {\n  content: \"\";\n  display: inline-block;\n  position: absolute;\n  top: 0;\n}\n\n.dot-elastic::before {\n  left: -15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticBefore 1s infinite linear;\n}\n\n.dot-elastic::after {\n  left: 15px;\n  width: 10px;\n  height: 10px;\n  border-radius: 5px;\n  background-color: rgba(127, 127, 127, 0.8);\n  color: rgba(127, 127, 127, 0.8);\n  animation: dotElasticAfter 1s infinite linear;\n}\n\n@keyframes dotElasticBefore {\n  0% {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(1, 1.5);\n  }\n  50% {\n    transform: scale(1, 0.67);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}\n@keyframes dotElastic {\n  0% {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(1, 1);\n  }\n  50% {\n    transform: scale(1, 1.5);\n  }\n  75% {\n    transform: scale(1, 1);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}\n@keyframes dotElasticAfter {\n  0% {\n    transform: scale(1, 1);\n  }\n  25% {\n    transform: scale(1, 1);\n  }\n  50% {\n    transform: scale(1, 0.67);\n  }\n  75% {\n    transform: scale(1, 1.5);\n  }\n  100% {\n    transform: scale(1, 1);\n  }\n}";
@@ -1563,6 +1573,7 @@ var BnsItemDto = /** @class */ (function () {
                     this.slateStones.push(SlateStoneDto.fromJS(item));
                 }
             }
+            this.randomEffects = _data["randomEffects"] ? ItemRandomEffectsDto.fromJS(_data["randomEffects"]) : undefined;
         }
     };
     BnsItemDto.fromJS = function (data) {
@@ -1669,6 +1680,7 @@ var BnsItemDto = /** @class */ (function () {
                 data["slateStones"].push(item.toJSON());
             }
         }
+        data["randomEffects"] = this.randomEffects ? this.randomEffects.toJSON() : undefined;
         return data;
     };
     return BnsItemDto;
@@ -1946,6 +1958,37 @@ var ItemDescriptionDto = /** @class */ (function () {
     };
     return ItemDescriptionDto;
 }());
+var ItemEffectDto = /** @class */ (function () {
+    function ItemEffectDto(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    ItemEffectDto.prototype.init = function (_data) {
+        if (_data) {
+            this.id = _data["id"];
+            this.text = _data["text"];
+            this.weight = _data["weight"];
+        }
+    };
+    ItemEffectDto.fromJS = function (data) {
+        data = typeof data === 'object' ? data : {};
+        var result = new ItemEffectDto();
+        result.init(data);
+        return result;
+    };
+    ItemEffectDto.prototype.toJSON = function (data) {
+        data = typeof data === 'object' ? data : {};
+        data["id"] = this.id;
+        data["text"] = this.text;
+        data["weight"] = this.weight;
+        return data;
+    };
+    return ItemEffectDto;
+}());
 var ItemIconDto = /** @class */ (function () {
     function ItemIconDto(data) {
         if (data) {
@@ -2163,6 +2206,53 @@ var ItemImproveEffectOptionWithNameDto = /** @class */ (function () {
     };
     return ItemImproveEffectOptionWithNameDto;
 }());
+var ItemRandomEffectsDto = /** @class */ (function () {
+    function ItemRandomEffectsDto(data) {
+        if (data) {
+            for (var property in data) {
+                if (data.hasOwnProperty(property))
+                    this[property] = data[property];
+            }
+        }
+    }
+    ItemRandomEffectsDto.prototype.init = function (_data) {
+        if (_data) {
+            this.alias = _data["alias"];
+            this.randomEffectCount = _data["randomEffectCount"];
+            this.totalWeight = _data["totalWeight"];
+            this.itemSkillName = _data["itemSkillName"];
+            if (Array.isArray(_data["randomEffects"])) {
+                this.randomEffects = [];
+                for (var _i = 0, _a = _data["randomEffects"]; _i < _a.length; _i++) {
+                    var item = _a[_i];
+                    this.randomEffects.push(ItemEffectDto.fromJS(item));
+                }
+            }
+        }
+    };
+    ItemRandomEffectsDto.fromJS = function (data) {
+        data = typeof data === 'object' ? data : {};
+        var result = new ItemRandomEffectsDto();
+        result.init(data);
+        return result;
+    };
+    ItemRandomEffectsDto.prototype.toJSON = function (data) {
+        data = typeof data === 'object' ? data : {};
+        data["alias"] = this.alias;
+        data["randomEffectCount"] = this.randomEffectCount;
+        data["totalWeight"] = this.totalWeight;
+        data["itemSkillName"] = this.itemSkillName;
+        if (Array.isArray(this.randomEffects)) {
+            data["randomEffects"] = [];
+            for (var _i = 0, _a = this.randomEffects; _i < _a.length; _i++) {
+                var item = _a[_i];
+                data["randomEffects"].push(item.toJSON());
+            }
+        }
+        return data;
+    };
+    return ItemRandomEffectsDto;
+}());
 var ItemRandomStatDto = /** @class */ (function () {
     function ItemRandomStatDto(data) {
         if (data) {
@@ -8165,10 +8255,13 @@ function ItemUpgradeEffects(props) {
 
 function ItemTooltip(_a) {
     var _this = this;
-    var _b, _c, _d;
-    var data = _a.data, region = _a.region, _e = _a.debug, debug = _e === void 0 ? false : _e, _f = _a.offline, offline = _f === void 0 ? false : _f, clientProp = _a.client, jobstyleOverride = _a.jobstyleOverride, _g = _a.showUpgrade, showUpgrade = _g === void 0 ? false : _g, _h = _a.showUpgradeEffects, showUpgradeEffects = _h === void 0 ? false : _h, _j = _a.fullHeight, fullHeight = _j === void 0 ? false : _j;
-    var _k = useState("advanced-1"), jobstyle = _k[0], setJobstyle = _k[1];
-    var _l = useState(), client = _l[0], setClient = _l[1];
+    var data = _a.data, region = _a.region, _b = _a.debug, debug = _b === void 0 ? false : _b, _c = _a.offline, offline = _c === void 0 ? false : _c, clientProp = _a.client, jobstyleOverride = _a.jobstyleOverride, _d = _a.showUpgrade, showUpgrade = _d === void 0 ? false : _d, _e = _a.showUpgradeEffects, showUpgradeEffects = _e === void 0 ? false : _e, _f = _a.fullHeight, fullHeight = _f === void 0 ? false : _f;
+    var _g = useState("advanced-1"), jobstyle = _g[0], setJobstyle = _g[1];
+    var _h = useState(), client = _h[0], setClient = _h[1];
+    var _j = useState(false), setHasSkillModifiers = _j[0], setSetHasSkillModifiers = _j[1];
+    var _k = useState([]), jobstyles = _k[0], setJobstyles = _k[1];
+    var _l = useState(false), itemCombats = _l[0], setItemCombats = _l[1];
+    var item = data;
     useEffect(function () {
         if (offline && !showUpgradeEffects)
             return;
@@ -8189,46 +8282,35 @@ function ItemTooltip(_a) {
             setJobstyle(jobstyleOverride);
         }
     }, [jobstyleOverride]);
-    var item = data;
-    var itemCategory = (_c = (_b = item.categories) === null || _b === void 0 ? void 0 : _b.sort(function (a, b) { return b.index - a.index; })[0].localizedName) !== null && _c !== void 0 ? _c : "";
-    if (itemCategory == "none")
-        itemCategory = "";
+    useEffect(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        var setHasSkillModifiers_i = ((_a = item.skills) === null || _a === void 0 ? void 0 : _a.some(function (skill) { return skill.jobstyle != null; })) || ((_c = (_b = item.setBonus) === null || _b === void 0 ? void 0 : _b.setBonusStages) === null || _c === void 0 ? void 0 : _c.some(function (stage) { var _a; return ((_a = stage.skillModifiers) === null || _a === void 0 ? void 0 : _a.length) > 0; })) || false;
+        var jobstyles_i = Array.from(new Set(__spreadArray(__spreadArray([], (((_d = item.skills) === null || _d === void 0 ? void 0 : _d.map(function (skill) { return skill.jobstyle; })) || []), true), (((_f = (_e = item.setBonus) === null || _e === void 0 ? void 0 : _e.setBonusStages) === null || _f === void 0 ? void 0 : _f.flatMap(function (stage) { var _a; return ((_a = stage.skillModifiers) === null || _a === void 0 ? void 0 : _a.map(function (modifier) { return modifier.jobstyle; })) || []; })) || []), true).filter(Boolean)));
+        var itemCombats_i = ((_g = item.skills) === null || _g === void 0 ? void 0 : _g.some(function (skill) { return skill.jobstyle != null; })) || false;
+        setSetHasSkillModifiers(setHasSkillModifiers_i);
+        setJobstyles(jobstyles_i);
+        setItemCombats(itemCombats_i);
+    }, [item]);
+    useEffect(function () {
+        if (jobstyles.length > 0 && !jobstyles.includes(jobstyle)) {
+            setJobstyle(jobstyles[0]);
+        }
+    }, [jobstyle, jobstyles]);
+    var itemCategory = useMemo(function () {
+        var _a, _b, _c;
+        var category = (_c = (_b = (_a = item.categories) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) { return b.index - a.index; })[0]) === null || _b === void 0 ? void 0 : _b.localizedName) !== null && _c !== void 0 ? _c : "";
+        return category === "none" ? "" : category;
+    }, [item]);
     var tooltipBaseProps = {
         title: item.name,
         grade: item.grade,
-        id: item.id + "-" + item.level,
+        id: "".concat(item.id, "-").concat(item.level),
         icon: item.icon ? BuildIconPath(item.icon.iconPath) : "",
         subtitle: itemCategory,
         mainInfos: [],
         subInfoGroups: [],
         fullHeight: fullHeight,
     };
-    var setHasSkillModifiers = false;
-    var jobstyles = [];
-    var itemCombats = false;
-    if (item.skills != null && item.skills.length > 0) {
-        item.skills.forEach(function (itemSkill) {
-            if (itemSkill.jobstyle != null) {
-                setHasSkillModifiers = true;
-                itemCombats = true;
-                if (!jobstyles.includes(itemSkill.jobstyle)) {
-                    jobstyles.push(itemSkill.jobstyle);
-                }
-            }
-        });
-    }
-    if (((_d = item.setBonus) === null || _d === void 0 ? void 0 : _d.setBonusStages) != null) {
-        item.setBonus.setBonusStages.forEach(function (stage) {
-            if (stage.skillModifiers != null && stage.skillModifiers.length > 0) {
-                setHasSkillModifiers = true;
-                stage.skillModifiers.forEach(function (modifier) {
-                    if (!jobstyles.includes(modifier.jobstyle)) {
-                        jobstyles.push(modifier.jobstyle);
-                    }
-                });
-            }
-        });
-    }
     //top part
     AddMainInfo(tooltipBaseProps.mainInfos, item);
     AddSubInfo(tooltipBaseProps.mainInfos, item);
@@ -8238,8 +8320,11 @@ function ItemTooltip(_a) {
     AddItemRandomStats(tooltipBaseProps.mainInfos, item);
     //bottom part
     AddGearScore(tooltipBaseProps.subInfoGroups, item, debug);
-    AddJobstyleToggles(setHasSkillModifiers, tooltipBaseProps.subInfoGroups, jobstyles, jobstyle, setJobstyle);
+    if (jobstyles.length > 1) {
+        AddJobstyleToggles(setHasSkillModifiers, tooltipBaseProps.subInfoGroups, jobstyles, jobstyle, setJobstyle);
+    }
     AddTopText(tooltipBaseProps.subInfoGroups, item);
+    AddRandomEffects(tooltipBaseProps.subInfoGroups, item);
     AddSkillDescriptions(tooltipBaseProps.subInfoGroups, item, itemCombats, jobstyle);
     AddSkillModifiers(tooltipBaseProps.subInfoGroups, item, false, jobstyle);
     AddEtchingStones(tooltipBaseProps.subInfoGroups, item);
@@ -8313,6 +8398,18 @@ function AddTopText(subInfoGroups, item) {
         texts: [React.createElement(TopText, __assign({}, item))],
     });
 }
+function AddRandomEffects(subInfoGroups, item) {
+    if (item.randomEffects == null || item.randomEffects.randomEffectCount == 0 || item.randomEffects.randomEffects == null || item.randomEffects.randomEffects.length == 0)
+        return;
+    subInfoGroups.push({
+        title: "",
+        texts: [
+            React.createElement("div", null,
+                React.createElement("div", { id: item.randomEffects.alias, dangerouslySetInnerHTML: { __html: item.randomEffects.itemSkillName } }),
+                item.randomEffects.randomEffects.map(function (effect) { return (React.createElement("div", { key: item.randomEffects.alias + "_" + effect.id, dangerouslySetInnerHTML: { __html: effect.text } })); }))
+        ]
+    });
+}
 function AddSkillDescriptions(subInfoGroups, item, itemCombats, jobstyle) {
     if (item.skills == null || item.skills.length == 0)
         return;
@@ -8342,6 +8439,14 @@ function AddRandomSubStatCount(subInfoGroups, item) {
                     React.createElement("span", { className: "00008130.UI.Label_Green03_12" }, item.randomSubStatCount),
                     "\u00A0random secondary stat(s).")]
         });
+    if (item.randomEffects != null && item.randomEffects.randomEffects.length > 1)
+        subInfoGroups.push({
+            title: "Random effects:",
+            texts: [React.createElement("div", { className: "00008130.UI.Vital_LightBlue" },
+                    "This item has\u00A0",
+                    React.createElement("span", { className: "00008130.UI.Label_Green03_12" }, item.randomEffects.randomEffectCount),
+                    "\u00A0random effect(s).")]
+        });
 }
 function AddSetBonus(subInfoGroups, item, jobstyle) {
     if (item.setBonus == null)