@rpg-engine/long-bow 0.5.2 → 0.5.3

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];
     })));
   };
@@ -15444,19 +15467,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 +15489,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 +17025,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 +17074,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 +17085,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));
   }));
@@ -17559,7 +17603,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 +17619,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 +17632,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 +17694,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 +17744,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,