@rpg-engine/long-bow 0.5.2 → 0.5.4

package/dist/components/ImageCarousel/ImageCarousel.d.ts

@@ -7,5 +7,6 @@ export interface ITextImageProps {
 export interface IImageCarouselProps {
     textImage: ITextImageProps[];
     isTextFixed: boolean;
+    onCloseButton?: () => void;
 }
 export declare const ImageCarousel: React.FC<IImageCarouselProps>;

package/dist/components/Spellbook/Spell.d.ts

@@ -1,6 +1,8 @@
 import { ISpell } from '@rpg-engine/shared';
 import React from 'react';
 export interface ISpellProps {
+    atlasJSON: any;
+    atlasIMG: any;
     charMana: number;
     charMagicLevel: number;
     onPointerUp?: (spellKey: string) => void;

package/dist/components/Spellbook/Spellbook.d.ts

@@ -13,6 +13,8 @@ export interface ISpellbookProps {
     removeShortcut: (index: number) => void;
     atlasIMG: any;
     atlasJSON: any;
+    iconAtlasIMG?: any;
+    iconAtlasJSON?: any;
     scale?: number;
     spellCooldowns?: Record<string, number>;
 }

package/dist/components/shared/SpriteFromAtlas.d.ts

@@ -12,6 +12,8 @@ interface IProps {
     imgStyle?: any;
     imgScale?: number;
     imgClassname?: string;
+    centered?: boolean;
+    borderRadius?: string;
 }
 export declare const SpriteFromAtlas: React.FC<IProps>;
 export {};

package/dist/long-bow.cjs.development.js

@@ -117,7 +117,9 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
     _ref$opacity = _ref.opacity,
     opacity = _ref$opacity === void 0 ? 1 : _ref$opacity,
-    imgClassname = _ref.imgClassname;
+    imgClassname = _ref.imgClassname,
+    centered = _ref.centered,
+    borderRadius = _ref.borderRadius;
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
   var spriteData = atlasJSON.frames[spriteKey] || atlasJSON.frames['others/no-image.png'];
@@ -135,7 +137,9 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
     scale: imgScale,
     grayScale: grayScale,
     opacity: opacity,
-    style: imgStyle
+    style: imgStyle,
+    centered: centered,
+    borderRadius: borderRadius
   }));
 };
 var Container = /*#__PURE__*/styled.div.withConfig({
@@ -151,7 +155,7 @@ var Container = /*#__PURE__*/styled.div.withConfig({
 var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
   componentId: "sc-1lpani8-1"
-})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:8px;left:8px;filter:", ";opacity:", ";"], function (props) {
+})(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:", ";left:", ";filter:", ";opacity:", ";border-radius:", ";"], function (props) {
   return props.frame.w;
 }, function (props) {
   return props.frame.h;
@@ -163,10 +167,16 @@ var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   return props.frame.y;
 }, function (props) {
   return props.scale;
+}, function (props) {
+  return props.centered ? '0' : '8px';
+}, function (props) {
+  return props.centered ? '0' : '8px';
 }, function (props) {
   return props.grayScale ? 'grayscale(100%)' : 'none';
 }, function (props) {
   return props.opacity;
+}, function (props) {
+  return props.borderRadius ? props.borderRadius : '0';
 });
 
 var frames = {
@@ -12959,6 +12969,11 @@ var CircularController = function CircularController(_ref) {
     var spellCooldown = !payload ? 0 : (_spellCooldowns$paylo = spellCooldowns == null ? void 0 : spellCooldowns[payload.magicWords.replaceAll(' ', '_')]) != null ? _spellCooldowns$paylo : shortcutCooldown;
     var cooldown = spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
     var isOnCooldown = cooldown > 0 && !!payload;
+    var CONTAINER_STYLE = {
+      width: '32px',
+      height: '32px'
+    };
+    var IMAGE_SCALE = 1.5;
     return React__default.createElement(StyledShortcut, {
       key: i,
       onTouchStart: onTouchStart,
@@ -12971,7 +12986,15 @@ var CircularController = function CircularController(_ref) {
       className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React__default.createElement("span", {
       className: "magicWords"
-    }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
+    }, payload != null && payload.texturePath ? React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: payload.atlasIMG,
+      atlasJSON: payload.atlasJSON,
+      spriteKey: payload.texturePath,
+      imgScale: IMAGE_SCALE,
+      containerStyle: CONTAINER_STYLE,
+      centered: true,
+      borderRadius: "50%"
+    }) : payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
       return word[0];
     })));
   };
@@ -15143,7 +15166,8 @@ var DialogContainer = /*#__PURE__*/styled.div.withConfig({
 var ImageCarousel = function ImageCarousel(_ref) {
   var _textImageSelected$te, _textImageSelected$te2;
   var textImage = _ref.textImage,
-    isTextFixed = _ref.isTextFixed;
+    isTextFixed = _ref.isTextFixed,
+    onCloseButton = _ref.onCloseButton;
   var _useState = React.useState(textImage[0]),
     textImageSelected = _useState[0],
     setTextImageSelected = _useState[1];
@@ -15197,7 +15221,10 @@ var ImageCarousel = function ImageCarousel(_ref) {
     onPointerDown: function onPointerDown() {
       return goToNextImage();
     }
-  }))));
+  }))), onCloseButton && React__default.createElement(CloseButton$2, {
+    className: "container-close",
+    onPointerDown: onCloseButton
+  }, "X"));
 };
 var CarouselWrapper = /*#__PURE__*/styled(DraggableContainer).withConfig({
   displayName: "ImageCarousel__CarouselWrapper",
@@ -15225,6 +15252,10 @@ var Description$1 = /*#__PURE__*/styled.div.withConfig({
 }, function (props) {
   return props.isTextFixed ? 'none' : 'rgba(0, 0, 0, 0.6)';
 });
+var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ImageCarousel__CloseButton",
+  componentId: "sc-jl6f8-4"
+})(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:1.5rem;@media (max-width:950px){font-size:1.7rem;padding:12px;}"]);
 
 var SlotsContainer = function SlotsContainer(_ref) {
   var children = _ref.children,
@@ -15373,7 +15404,7 @@ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
   return React__default.createElement(StyledContainer, {
     type: exports.RPGUIContainerTypes.Framed,
     width: "25rem"
-  }, React__default.createElement(CloseButton$2, {
+  }, React__default.createElement(CloseButton$3, {
     className: "container-close",
     onPointerDown: onClose
   }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
@@ -15431,7 +15462,7 @@ var StyledInput = /*#__PURE__*/styled(Input).withConfig({
   displayName: "ItemQuantitySelector__StyledInput",
   componentId: "sc-yfdtpn-2"
 })(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
-var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemQuantitySelector__CloseButton",
   componentId: "sc-yfdtpn-3"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
@@ -15444,19 +15475,19 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
     atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG;
   var getContent = function getContent(index) {
-    var _shortcuts$index, _shortcuts$index3;
+    var _shortcuts$index;
     if (((_shortcuts$index = shortcuts[index]) == null ? void 0 : _shortcuts$index.type) === shared.ShortcutType.Item) {
       var _shortcuts$index2;
-      var _payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
-      if (!_payload) return null;
+      var payload = (_shortcuts$index2 = shortcuts[index]) == null ? void 0 : _shortcuts$index2.payload;
+      if (!payload) return null;
       return React__default.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: shared.getItemTextureKeyPath({
-          key: _payload.texturePath,
-          texturePath: _payload.texturePath,
-          stackQty: _payload.stackQty || 1,
-          isStackable: _payload.isStackable
+          key: payload.texturePath,
+          texturePath: payload.texturePath,
+          stackQty: payload.stackQty || 1,
+          isStackable: payload.isStackable
         }, atlasJSON),
         width: 32,
         height: 32,
@@ -15466,10 +15497,24 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
         }
       });
     }
-    var payload = (_shortcuts$index3 = shortcuts[index]) == null ? void 0 : _shortcuts$index3.payload;
-    return React__default.createElement("span", null, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
-      return word[0];
-    }));
+    var IMAGE_SIZE = 32;
+    var IMAGE_SCALE = 1;
+    var shortcut = shortcuts[index];
+    if ((shortcut == null ? void 0 : shortcut.type) === shared.ShortcutType.Spell && shortcut.payload) {
+      var _payload$texturePath;
+      var _payload = shortcut.payload; // TypeScript type assertion
+      return React__default.createElement(SpriteFromAtlas, {
+        atlasIMG: _payload.atlasIMG,
+        atlasJSON: _payload.atlasJSON,
+        spriteKey: (_payload$texturePath = _payload.texturePath) != null ? _payload$texturePath : '',
+        width: IMAGE_SIZE,
+        height: IMAGE_SIZE,
+        imgScale: IMAGE_SCALE,
+        centered: true,
+        borderRadius: "50%"
+      });
+    }
+    return null;
   };
   return React__default.createElement(Container$i, null, React__default.createElement("p", null, "Shortcuts:"), React__default.createElement(List, {
     id: "shortcuts_list"
@@ -16988,7 +17033,7 @@ var Shortcuts = function Shortcuts(_ref) {
   return React__default.createElement(List$1, null, Array.from({
     length: 12
   }).map(function (_, i) {
-    var _shortcuts$i, _shortcuts$i3, _spellCooldowns$paylo, _payload$manaCost;
+    var _shortcuts$i, _shortcuts$i3, _spellCooldowns$paylo, _payload$manaCost, _payload$texturePath;
     var buildClassName = function buildClassName(classBase, isOnCooldown) {
       return classBase + " " + (isOnCooldown ? 'onCooldown' : '');
     };
@@ -17037,6 +17082,8 @@ var Shortcuts = function Shortcuts(_ref) {
     var spellCooldown = !payload ? 0 : (_spellCooldowns$paylo = spellCooldowns == null ? void 0 : spellCooldowns[payload.magicWords.replaceAll(' ', '_')]) != null ? _spellCooldowns$paylo : shortcutCooldown;
     var cooldown = spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
     var isOnCooldown = cooldown > 0 && !!payload;
+    var IMAGE_SCALE = 1.5;
+    var IMAGE_SIZE = 32;
     return React__default.createElement(StyledShortcut$1, {
       key: i,
       onPointerDown: handleShortcutCast.bind(null, i),
@@ -17046,13 +17093,18 @@ var Shortcuts = function Shortcuts(_ref) {
       }
     }, isOnCooldown && React__default.createElement("span", {
       className: "cooldown"
-    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React__default.createElement("span", {
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React__default.createElement("span", null, (payload == null ? void 0 : payload.atlasIMG) && React__default.createElement(SpriteFromAtlas, {
+      atlasIMG: payload.atlasIMG,
+      atlasJSON: payload.atlasJSON,
+      spriteKey: (_payload$texturePath = payload.texturePath) != null ? _payload$texturePath : '',
+      width: IMAGE_SIZE,
+      height: IMAGE_SIZE,
+      imgScale: IMAGE_SCALE,
+      centered: true,
+      borderRadius: "50%"
+    })), React__default.createElement("span", {
       className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React__default.createElement("span", {
-      className: "magicWords"
-    }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
-      return word[0];
-    })), React__default.createElement("span", {
       className: buildClassName('keyboard', isOnCooldown)
     }, i + 1));
   }));
@@ -17312,7 +17364,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     cancelDrag: "#skillsDiv",
     scale: scale,
     width: "100%"
-  }, onCloseButton && React__default.createElement(CloseButton$3, {
+  }, onCloseButton && React__default.createElement(CloseButton$4, {
     onPointerDown: onCloseButton
   }, "X"), React__default.createElement(SkillsContainerDiv, {
     id: "skillsDiv"
@@ -17348,7 +17400,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__SkillSplitDiv",
   componentId: "sc-1g0c67q-2"
 })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
-var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
+var CloseButton$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillsContainer__CloseButton",
   componentId: "sc-1g0c67q-3"
 })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:1.1rem;"]);
@@ -17559,7 +17611,10 @@ var SpellInfoWrapper = function SpellInfoWrapper(_ref) {
 };
 
 var Spell = function Spell(_ref) {
-  var spellKey = _ref.spellKey,
+  var _spell$texturePath;
+  var atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    spellKey = _ref.spellKey,
     charMana = _ref.charMana,
     charMagicLevel = _ref.charMagicLevel,
     onPointerUp = _ref.onPointerUp,
@@ -17572,6 +17627,11 @@ var Spell = function Spell(_ref) {
     name = spell.name,
     description = spell.description;
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
+  var CONTAINER_STYLE = {
+    width: '32px',
+    height: '32px'
+  };
+  var IMAGE_SCALE = 2;
   return React__default.createElement(SpellInfoWrapper, {
     spell: spell
   }, React__default.createElement(Container$r, {
@@ -17580,8 +17640,13 @@ var Spell = function Spell(_ref) {
     className: "spell"
   }, disabled && React__default.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React__default.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React__default.createElement("span", {
     className: "cooldown"
-  }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, magicWords.split(' ').map(function (word) {
-    return word[0];
+  }, activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)) : null, React__default.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: (_spell$texturePath = spell.texturePath) != null ? _spell$texturePath : '',
+    imgScale: IMAGE_SCALE,
+    containerStyle: CONTAINER_STYLE,
+    centered: true
   })), React__default.createElement(Info, null, React__default.createElement(Title$a, null, React__default.createElement("span", null, name), React__default.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React__default.createElement(Description$3, null, description)), React__default.createElement(Divider, null), React__default.createElement(Cost, null, React__default.createElement("span", null, "Mana cost:"), React__default.createElement("span", {
@@ -17637,6 +17702,8 @@ var Spellbook = function Spellbook(_ref) {
     removeShortcut = _ref.removeShortcut,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
+    iconAtlasIMG = _ref.iconAtlasIMG,
+    iconAtlasJSON = _ref.iconAtlasJSON,
     scale = _ref.scale,
     spellCooldowns = _ref.spellCooldowns;
   var _useState = React.useState(''),
@@ -17685,6 +17752,8 @@ var Spellbook = function Spellbook(_ref) {
     return React__default.createElement(React.Fragment, {
       key: spell.key
     }, React__default.createElement(Spell, Object.assign({
+      atlasIMG: iconAtlasIMG,
+      atlasJSON: iconAtlasJSON,
       charMana: mana,
       charMagicLevel: magicLevel,
       onPointerUp: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,
@@ -17741,7 +17810,7 @@ var TimeWidget = function TimeWidget(_ref) {
     scale = _ref.scale;
   return React__default.createElement(Draggable, {
     scale: scale
-  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$4, {
+  }, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$5, {
     onPointerDown: onClose
   }, "X"), React__default.createElement(DayNightContainer, null, React__default.createElement(DayNightPeriod, {
     periodOfDay: periodOfDay
@@ -17755,7 +17824,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
   displayName: "TimeWidget__Time",
   componentId: "sc-1ja236h-1"
 })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
-var CloseButton$4 = /*#__PURE__*/styled.p.withConfig({
+var CloseButton$5 = /*#__PURE__*/styled.p.withConfig({
   displayName: "TimeWidget__CloseButton",
   componentId: "sc-1ja236h-2"
 })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);