@rpg-engine/long-bow 0.5.2 → 0.5.3

package/dist/long-bow.esm.js

@@ -111,7 +111,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'];
@@ -129,7 +131,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({
@@ -145,7 +149,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;
@@ -157,10 +161,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 = {
@@ -12954,6 +12964,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.createElement(StyledShortcut, {
       key: i,
       onTouchStart: onTouchStart,
@@ -12966,7 +12981,15 @@ var CircularController = function CircularController(_ref) {
       className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React.createElement("span", {
       className: "magicWords"
-    }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
+    }, payload != null && payload.texturePath ? React.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];
     })));
   };
@@ -15442,19 +15465,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) === 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.createElement(SpriteFromAtlas, {
         atlasIMG: atlasIMG,
         atlasJSON: atlasJSON,
         spriteKey: 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,
@@ -15464,10 +15487,24 @@ var ShortcutsSetter = function ShortcutsSetter(_ref) {
         }
       });
     }
-    var payload = (_shortcuts$index3 = shortcuts[index]) == null ? void 0 : _shortcuts$index3.payload;
-    return React.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) === ShortcutType.Spell && shortcut.payload) {
+      var _payload$texturePath;
+      var _payload = shortcut.payload; // TypeScript type assertion
+      return React.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.createElement(Container$i, null, React.createElement("p", null, "Shortcuts:"), React.createElement(List, {
     id: "shortcuts_list"
@@ -16986,7 +17023,7 @@ var Shortcuts = function Shortcuts(_ref) {
   return React.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' : '');
     };
@@ -17035,6 +17072,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.createElement(StyledShortcut$1, {
       key: i,
       onPointerDown: handleShortcutCast.bind(null, i),
@@ -17044,13 +17083,18 @@ var Shortcuts = function Shortcuts(_ref) {
       }
     }, isOnCooldown && React.createElement("span", {
       className: "cooldown"
-    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React.createElement("span", {
+    }, cooldown.toFixed(cooldown < 10 ? 1 : 0)), React.createElement("span", null, (payload == null ? void 0 : payload.atlasIMG) && React.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.createElement("span", {
       className: buildClassName('mana', isOnCooldown)
     }, payload && payload.manaCost), React.createElement("span", {
-      className: "magicWords"
-    }, payload == null ? void 0 : payload.magicWords.split(' ').map(function (word) {
-      return word[0];
-    })), React.createElement("span", {
       className: buildClassName('keyboard', isOnCooldown)
     }, i + 1));
   }));
@@ -17557,7 +17601,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,
@@ -17570,6 +17617,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.createElement(SpellInfoWrapper, {
     spell: spell
   }, React.createElement(Container$r, {
@@ -17578,8 +17630,13 @@ var Spell = function Spell(_ref) {
     className: "spell"
   }, disabled && React.createElement(Overlay, null, charMagicLevel < minMagicLevelRequired ? 'Low magic level' : manaCost > charMana && 'No mana'), React.createElement(SpellImage, null, activeCooldown && activeCooldown > 0 ? React.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.createElement(SpriteFromAtlas, {
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    spriteKey: (_spell$texturePath = spell.texturePath) != null ? _spell$texturePath : '',
+    imgScale: IMAGE_SCALE,
+    containerStyle: CONTAINER_STYLE,
+    centered: true
   })), React.createElement(Info, null, React.createElement(Title$a, null, React.createElement("span", null, name), React.createElement("span", {
     className: "spell"
   }, "(", magicWords, ")")), React.createElement(Description$3, null, description)), React.createElement(Divider, null), React.createElement(Cost, null, React.createElement("span", null, "Mana cost:"), React.createElement("span", {
@@ -17635,6 +17692,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 = useState(''),
@@ -17683,6 +17742,8 @@ var Spellbook = function Spellbook(_ref) {
     return React.createElement(Fragment, {
       key: spell.key
     }, React.createElement(Spell, Object.assign({
+      atlasIMG: iconAtlasIMG,
+      atlasJSON: iconAtlasJSON,
       charMana: mana,
       charMagicLevel: magicLevel,
       onPointerUp: settingShortcutIndex !== -1 ? setShortcut : onSpellClick,