@rpg-engine/long-bow 0.3.34 → 0.3.36

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
-import React, { Component, useState, useEffect, useRef } from 'react';
+import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, getItemTextureKeyPath, ItemSlotType, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ItemSubType, ItemContainerType, ItemType, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, getItemTextureKeyPath, ItemSlotType, getSPForLevel, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
@@ -33779,6 +33779,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     }
   };
   return React.createElement(Container$a, {
+    item: item,
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
       var data = item ? item : null;
@@ -33886,10 +33887,33 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     }
   }));
 });
+var rarityColor = function rarityColor(item) {
+  switch (item == null ? void 0 : item.rarity) {
+    case ItemRarities.Uncommon:
+      return 'rgba(13, 193, 13, 0.6)';
+    case ItemRarities.Rare:
+      return 'rgba(8, 104, 187, 0.6)';
+    case ItemRarities.Epic:
+      return 'rgba(191, 0, 255, 0.6)';
+    case ItemRarities.Legendary:
+      return 'rgba(255, 191, 0,0.6)';
+    default:
+      return 'unset';
+  }
+};
 var Container$a = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__Container",
   componentId: "sc-l2j5ef-0"
-})(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
+})(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;border-color:", ";box-shadow:", " inset,", ";}position:relative;"], function (_ref2) {
+  var item = _ref2.item;
+  return rarityColor(item);
+}, function (_ref3) {
+  var item = _ref3.item;
+  return "0 0 5px 2px " + rarityColor(item);
+}, function (_ref4) {
+  var item = _ref4.item;
+  return "0 0 4px 3px " + rarityColor(item);
+});
 var ItemContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemSlot__ItemContainer",
   componentId: "sc-l2j5ef-1"
@@ -35425,6 +35449,240 @@ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1g0c67q-2"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
 
+var QuickSpells = function QuickSpells(_ref) {
+  var quickSpells = _ref.quickSpells,
+    onSpellCast = _ref.onSpellCast,
+    mana = _ref.mana,
+    _ref$isBlockedCasting = _ref.isBlockedCastingByKeyboard,
+    isBlockedCastingByKeyboard = _ref$isBlockedCasting === void 0 ? false : _ref$isBlockedCasting;
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      if (isBlockedCastingByKeyboard) return;
+      var shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 3) {
+        var shortcut = quickSpells[shortcutIndex];
+        if (shortcut != null && shortcut.key && mana >= (shortcut == null ? void 0 : shortcut.manaCost)) {
+          onSpellCast(shortcut.key);
+        }
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [quickSpells, isBlockedCastingByKeyboard]);
+  return React.createElement(List, null, Array.from({
+    length: 4
+  }).map(function (_, i) {
+    var _quickSpells$i, _quickSpells$i2, _quickSpells$i3, _quickSpells$i4, _quickSpells$i5;
+    return React.createElement(SpellShortcut, {
+      key: i,
+      onClick: onSpellCast.bind(null, (_quickSpells$i = quickSpells[i]) == null ? void 0 : _quickSpells$i.key),
+      disabled: mana < ((_quickSpells$i2 = quickSpells[i]) == null ? void 0 : _quickSpells$i2.manaCost)
+    }, React.createElement("span", {
+      className: "mana"
+    }, ((_quickSpells$i3 = quickSpells[i]) == null ? void 0 : _quickSpells$i3.key) && ((_quickSpells$i4 = quickSpells[i]) == null ? void 0 : _quickSpells$i4.manaCost)), React.createElement("span", {
+      className: "magicWords"
+    }, (_quickSpells$i5 = quickSpells[i]) == null ? void 0 : _quickSpells$i5.magicWords.split(' ').map(function (word) {
+      return word[0];
+    })), React.createElement("span", {
+      className: "keyboard"
+    }, i + 1));
+  }));
+};
+var SpellShortcut = /*#__PURE__*/styled.button.withConfig({
+  displayName: "QuickSpells__SpellShortcut",
+  componentId: "sc-41yq7s-0"
+})(["width:3rem;height:3rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;position:relative;.mana{position:absolute;top:-5px;right:0;font-size:0.65rem;color:", ";}.magicWords{margin-top:4px;}.keyboard{position:absolute;bottom:-5px;left:0;font-size:0.65rem;color:", ";}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, uiColors.darkGray, uiColors.blue, uiColors.yellow, uiColors.darkGray, uiColors.gray);
+var List = /*#__PURE__*/styled.p.withConfig({
+  displayName: "QuickSpells__List",
+  componentId: "sc-41yq7s-1"
+})(["width:100%;display:flex;align-items:center;justify-content:center;gap:0.5rem;box-sizing:border-box;margin:0 !important;"]);
+
+var Spell = function Spell(_ref) {
+  var spellKey = _ref.spellKey,
+    name = _ref.name,
+    description = _ref.description,
+    magicWords = _ref.magicWords,
+    manaCost = _ref.manaCost,
+    charMana = _ref.charMana,
+    charMagicLevel = _ref.charMagicLevel,
+    onClick = _ref.onClick,
+    isSettingShortcut = _ref.isSettingShortcut,
+    minMagicLevelRequired = _ref.minMagicLevelRequired;
+  var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
+  return React.createElement(Container$i, {
+    disabled: disabled,
+    onClick: onClick == null ? void 0 : onClick.bind(null, spellKey),
+    isSettingShortcut: isSettingShortcut && !disabled,
+    className: "spell"
+  }, disabled && React.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, magicWords.split(' ').map(function (word) {
+    return word[0];
+  })), React.createElement(Info, null, React.createElement(Title$5, null, React.createElement("span", null, name), React.createElement("span", {
+    className: "spell"
+  }, "(", magicWords, ")")), React.createElement(Description, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
+    className: "mana"
+  }, manaCost)));
+};
+var Container$i = /*#__PURE__*/styled.button.withConfig({
+  displayName: "Spell__Container",
+  componentId: "sc-j96fa2-0"
+})(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;height:5rem;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
+  var isSettingShortcut = _ref2.isSettingShortcut;
+  return isSettingShortcut ? 'border-color-change 1s infinite' : 'none';
+}, uiColors.yellow, uiColors.yellow, uiColors.darkGray);
+var SpellImage = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spell__SpellImage",
+  componentId: "sc-j96fa2-1"
+})(["width:4rem;height:4rem;font-size:", ";font-weight:bold;background-color:", ";color:", ";display:flex;justify-content:center;align-items:center;text-transform:uppercase;"], uiFonts.size.xLarge, uiColors.darkGray, uiColors.lightGray);
+var Info = /*#__PURE__*/styled.span.withConfig({
+  displayName: "Spell__Info",
+  componentId: "sc-j96fa2-2"
+})(["width:0;flex:1;"]);
+var Title$5 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Spell__Title",
+  componentId: "sc-j96fa2-3"
+})(["display:flex;flex-wrap:wrap;align-items:center;margin-bottom:5px;margin:0;span{font-size:", " !important;font-weight:bold !important;color:", " !important;margin-right:0.5rem;}.spell{font-size:", " !important;font-weight:normal !important;color:", " !important;}"], uiFonts.size.medium, uiColors.yellow, uiFonts.size.small, uiColors.lightGray);
+var Description = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spell__Description",
+  componentId: "sc-j96fa2-4"
+})(["font-size:", " !important;line-height:1.1 !important;"], uiFonts.size.small);
+var Divider = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spell__Divider",
+  componentId: "sc-j96fa2-5"
+})(["width:1px;height:100%;margin:0 1rem;background-color:", ";"], uiColors.lightGray);
+var Cost = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Spell__Cost",
+  componentId: "sc-j96fa2-6"
+})(["display:flex;align-items:center;flex-direction:column;gap:0.5rem;div{z-index:1;}.mana{position:relative;font-size:", ";font-weight:bold;z-index:1;&::after{position:absolute;content:'';top:0;left:0;background-color:", ";width:100%;height:100%;border-radius:50%;transform:scale(1.8);filter:blur(10px);z-index:-1;}}"], uiFonts.size.medium, uiColors.blue);
+var Overlay = /*#__PURE__*/styled.p.withConfig({
+  displayName: "Spell__Overlay",
+  componentId: "sc-j96fa2-7"
+})(["margin:0 !important;position:absolute;top:0;left:0;width:100%;height:100%;border-radius:1rem;display:flex;justify-content:center;align-items:center;color:", ";font-size:", " !important;font-weight:bold;z-index:10;background-color:rgba(0 0 0 / 0.2);"], uiColors.yellow, uiFonts.size.large);
+
+var SpellbookShortcuts = function SpellbookShortcuts(_ref) {
+  var setSettingShortcutIndex = _ref.setSettingShortcutIndex,
+    settingShortcutIndex = _ref.settingShortcutIndex,
+    shortcuts = _ref.shortcuts,
+    removeShortcut = _ref.removeShortcut;
+  return React.createElement(List$1, {
+    id: "shortcuts_list"
+  }, "Spells shortcuts:", Array.from({
+    length: 4
+  }).map(function (_, i) {
+    var _shortcuts$i2;
+    return React.createElement(SpellShortcut$1, {
+      key: i,
+      onClick: function onClick() {
+        var _shortcuts$i;
+        removeShortcut(i);
+        if (!((_shortcuts$i = shortcuts[i]) != null && _shortcuts$i.key)) setSettingShortcutIndex(i);
+      },
+      disabled: settingShortcutIndex !== -1 && settingShortcutIndex !== i,
+      isBeingSet: settingShortcutIndex === i
+    }, React.createElement("span", null, (_shortcuts$i2 = shortcuts[i]) == null ? void 0 : _shortcuts$i2.magicWords.split(' ').map(function (word) {
+      return word[0];
+    })));
+  }));
+};
+var SpellShortcut$1 = /*#__PURE__*/styled.button.withConfig({
+  displayName: "SpellbookShortcuts__SpellShortcut",
+  componentId: "sc-fr4a0d-0"
+})(["width:2.6rem;height:2.6rem;background-color:", ";border:2px solid ", ";border-radius:50%;text-transform:uppercase;font-size:0.7rem;font-weight:bold;display:flex;align-items:center;justify-content:center;span{margin-top:4px;}&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}&:disabled{opacity:0.5;}"], uiColors.lightGray, function (_ref2) {
+  var isBeingSet = _ref2.isBeingSet;
+  return isBeingSet ? uiColors.yellow : uiColors.darkGray;
+}, uiColors.darkGray, uiColors.gray);
+var List$1 = /*#__PURE__*/styled.p.withConfig({
+  displayName: "SpellbookShortcuts__List",
+  componentId: "sc-fr4a0d-1"
+})(["width:100%;display:flex;align-items:center;justify-content:flex-end;gap:0.5rem;padding:0.5rem;box-sizing:border-box;margin:0 !important;"]);
+
+var Spellbook = function Spellbook(_ref) {
+  var onClose = _ref.onClose,
+    onInputFocus = _ref.onInputFocus,
+    onInputBlur = _ref.onInputBlur,
+    spells = _ref.spells,
+    magicLevel = _ref.magicLevel,
+    mana = _ref.mana,
+    onSpellClick = _ref.onSpellClick,
+    setSpellShortcut = _ref.setSpellShortcut,
+    spellShortcuts = _ref.spellShortcuts,
+    removeSpellShortcut = _ref.removeSpellShortcut;
+  var _useState = useState(''),
+    search = _useState[0],
+    setSearch = _useState[1];
+  var _useState2 = useState(-1),
+    settingShortcutIndex = _useState2[0],
+    setSettingShortcutIndex = _useState2[1];
+  useEffect(function () {
+    var handleEscapeClose = function handleEscapeClose(e) {
+      if (e.key === 'Escape') {
+        onClose == null ? void 0 : onClose();
+      }
+    };
+    document.addEventListener('keydown', handleEscapeClose);
+    return function () {
+      document.removeEventListener('keydown', handleEscapeClose);
+    };
+  }, [onClose]);
+  var spellsToDisplay = useMemo(function () {
+    return spells.sort(function (a, b) {
+      if (a.minMagicLevelRequired > b.minMagicLevelRequired) return 1;
+      if (a.minMagicLevelRequired < b.minMagicLevelRequired) return -1;
+      return 0;
+    }).filter(function (spell) {
+      return spell.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) || spell.magicWords.toLocaleLowerCase().includes(search.toLocaleLowerCase());
+    });
+  }, [search, spells]);
+  var setShortcut = function setShortcut(spellKey) {
+    setSpellShortcut == null ? void 0 : setSpellShortcut(spellKey, settingShortcutIndex);
+    setSettingShortcutIndex(-1);
+  };
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: onClose,
+    width: "inherit",
+    height: "inherit",
+    cancelDrag: "#spellbook-search, #shortcuts_list, .spell"
+  }, React.createElement(Container$j, null, React.createElement(Title$6, null, "Learned Spells"), React.createElement(SpellbookShortcuts, {
+    setSettingShortcutIndex: setSettingShortcutIndex,
+    settingShortcutIndex: settingShortcutIndex,
+    shortcuts: spellShortcuts,
+    removeShortcut: removeSpellShortcut
+  }), React.createElement(Input, {
+    placeholder: "Search for spell",
+    value: search,
+    onChange: function onChange(e) {
+      return setSearch(e.target.value);
+    },
+    onFocus: onInputFocus,
+    onBlur: onInputBlur,
+    id: "spellbook-search"
+  }), React.createElement(SpellList, null, spellsToDisplay.map(function (spell) {
+    return React.createElement(Fragment, {
+      key: spell.key
+    }, React.createElement(Spell, Object.assign({
+      charMana: mana,
+      charMagicLevel: magicLevel,
+      onClick: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,
+      spellKey: spell.key,
+      isSettingShortcut: settingShortcutIndex !== -1
+    }, spell)));
+  }))));
+};
+var Title$6 = /*#__PURE__*/styled.h1.withConfig({
+  displayName: "Spellbook__Title",
+  componentId: "sc-r02nfq-0"
+})(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
+var Container$j = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spellbook__Container",
+  componentId: "sc-r02nfq-1"
+})(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
+var SpellList = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Spellbook__SpellList",
+  componentId: "sc-r02nfq-2"
+})(["width:100%;min-height:0;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem;"]);
+
 var TextArea = function TextArea(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return React.createElement("textarea", Object.assign({}, props));
@@ -35625,7 +35883,7 @@ var TradingMenu = function TradingMenu(_ref) {
     style: {
       width: '100%'
     }
-  }, React.createElement(Title$5, null, Capitalize(type), " Menu"), React.createElement("hr", {
+  }, React.createElement(Title$7, null, Capitalize(type), " Menu"), React.createElement("hr", {
     className: "golden"
   })), React.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
     var _qtyMap$get;
@@ -35651,7 +35909,7 @@ var TradingMenu = function TradingMenu(_ref) {
     }
   }, "Cancel"))));
 };
-var Title$5 = /*#__PURE__*/styled.h1.withConfig({
+var Title$7 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "TradingMenu__Title",
   componentId: "sc-1wjsz1l-0"
 })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -35685,16 +35943,16 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
     children = _ref.children;
-  return React.createElement(Container$i, {
+  return React.createElement(Container$k, {
     maxLines: maxLines
   }, children);
 };
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, CharacterSelection, Chat, ChatDeprecated, CheckButton, CraftBook, DraggableContainer, Dropdown, DropdownSelectorContainer, DynamicText, EquipmentSet, ErrorBoundary, HistoryDialog, ImgSide, Input, InputRadio, ItemContainer$1 as ItemContainer, ItemSelector, ItemSlot, ListMenu, NPCDialog, NPCDialogType, NPCMultiDialog, ProgressBar, PropertySelect, QuestInfo, QuestList, QuestionDialog, QuickSpells, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, Spellbook, SpriteFromAtlas, TextArea, TimeWidget, TradingMenu, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map