@rpg-engine/long-bow 0.5.2 → 0.5.3

package/dist/mocks/shortcut.mocks.d.ts

@@ -10,6 +10,8 @@ export declare const shortcutMock: ({
         minLevelRequired: number;
         minMagicLevelRequired: number;
         animationKey: string;
+        textureAtlas: string;
+        texturePath: string;
     };
 } | {
     type: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.8.68",
+    "@rpg-engine/shared": "^0.8.69",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/CircularController/CircularController.tsx

@@ -141,6 +141,9 @@ export const CircularController: React.FC<CircularControllerProps> = ({
       spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
     const isOnCooldown = cooldown > 0 && !!payload;
 
+    const CONTAINER_STYLE = { width: '32px', height: '32px' };
+    const IMAGE_SCALE = 1.5;
+
     return (
       <StyledShortcut
         key={i}
@@ -158,7 +161,19 @@ export const CircularController: React.FC<CircularControllerProps> = ({
           {payload && payload.manaCost}
         </span>
         <span className="magicWords">
-          {payload?.magicWords.split(' ').map(word => word[0])}
+          {payload?.texturePath ? (
+            <SpriteFromAtlas
+              atlasIMG={payload.atlasIMG}
+              atlasJSON={payload.atlasJSON}
+              spriteKey={payload.texturePath}
+              imgScale={IMAGE_SCALE}
+              containerStyle={CONTAINER_STYLE}
+              centered={true}
+              borderRadius="50%"
+            />
+          ) : (
+            payload?.magicWords.split(' ').map(word => word[0])
+          )}
         </span>
       </StyledShortcut>
     );

package/src/components/Shortcuts/Shortcuts.tsx

@@ -143,6 +143,9 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
           spellCooldown > shortcutCooldown ? spellCooldown : shortcutCooldown;
         const isOnCooldown = cooldown > 0 && !!payload;
 
+        const IMAGE_SCALE = 1.5;
+        const IMAGE_SIZE = 32;
+
         return (
           <StyledShortcut
             key={i}
@@ -157,12 +160,23 @@ export const Shortcuts: React.FC<ShortcutsProps> = ({
                 {cooldown.toFixed(cooldown < 10 ? 1 : 0)}
               </span>
             )}
+            <span>
+              {payload?.atlasIMG && (
+                <SpriteFromAtlas
+                  atlasIMG={payload.atlasIMG}
+                  atlasJSON={payload.atlasJSON}
+                  spriteKey={payload.texturePath ?? ''}
+                  width={IMAGE_SIZE}
+                  height={IMAGE_SIZE}
+                  imgScale={IMAGE_SCALE}
+                  centered
+                  borderRadius="50%"
+                />
+              )}
+            </span>
             <span className={buildClassName('mana', isOnCooldown)}>
               {payload && payload.manaCost}
             </span>
-            <span className="magicWords">
-              {payload?.magicWords.split(' ').map(word => word[0])}
-            </span>
             <span className={buildClassName('keyboard', isOnCooldown)}>
               {i + 1}
             </span>

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -53,10 +53,29 @@ export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
         />
       );
     }
+    const IMAGE_SIZE = 32;
+    const IMAGE_SCALE = 1;
 
-    const payload = shortcuts[index]?.payload as IRawSpell | undefined;
+    const shortcut = shortcuts[index];
 
-    return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
+    if (shortcut?.type === ShortcutType.Spell && shortcut.payload) {
+      const payload = shortcut.payload as IRawSpell; // TypeScript type assertion
+
+      return (
+        <SpriteFromAtlas
+          atlasIMG={payload.atlasIMG}
+          atlasJSON={payload.atlasJSON}
+          spriteKey={payload.texturePath ?? ''}
+          width={IMAGE_SIZE}
+          height={IMAGE_SIZE}
+          imgScale={IMAGE_SCALE}
+          centered
+          borderRadius="50%"
+        />
+      );
+    }
+
+    return null;
   };
 
   return (

package/src/components/Spellbook/Spell.tsx

@@ -3,9 +3,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { SpellInfoWrapper } from './cards/SpellInfoWrapper';
 
 export interface ISpellProps {
+  atlasJSON: any;
+  atlasIMG: any;
   charMana: number;
   charMagicLevel: number;
   onPointerUp?: (spellKey: string) => void;
@@ -16,6 +19,8 @@ export interface ISpellProps {
 }
 
 export const Spell: React.FC<ISpellProps> = ({
+  atlasIMG,
+  atlasJSON,
   spellKey,
   charMana,
   charMagicLevel,
@@ -35,6 +40,9 @@ export const Spell: React.FC<ISpellProps> = ({
     ? charMagicLevel < minMagicLevelRequired
     : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
 
+  const CONTAINER_STYLE = { width: '32px', height: '32px' };
+  const IMAGE_SCALE = 2;
+
   return (
     <SpellInfoWrapper spell={spell}>
       <Container
@@ -55,7 +63,14 @@ export const Spell: React.FC<ISpellProps> = ({
               {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
             </span>
           ) : null}
-          {magicWords.split(' ').map(word => word[0])}
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={spell.texturePath ?? ''}
+            imgScale={IMAGE_SCALE}
+            containerStyle={CONTAINER_STYLE}
+            centered
+          />
         </SpellImage>
         <Info>
           <Title>

package/src/components/Spellbook/Spellbook.tsx

@@ -21,6 +21,8 @@ export interface ISpellbookProps {
   removeShortcut: (index: number) => void;
   atlasIMG: any;
   atlasJSON: any;
+  iconAtlasIMG?: any;
+  iconAtlasJSON?: any;
   scale?: number;
   spellCooldowns?: Record<string, number>;
 }
@@ -38,6 +40,8 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
   removeShortcut,
   atlasIMG,
   atlasJSON,
+  iconAtlasIMG,
+  iconAtlasJSON,
   scale,
   spellCooldowns,
 }) => {
@@ -99,6 +103,8 @@ export const Spellbook: React.FC<ISpellbookProps> = ({
           {spellsToDisplay.map(spell => (
             <Fragment key={spell.key}>
               <Spell
+                atlasIMG={iconAtlasIMG}
+                atlasJSON={iconAtlasJSON}
                 charMana={mana}
                 charMagicLevel={magicLevel}
                 onPointerUp={

package/src/components/Spellbook/mockSpells.ts

@@ -1,11 +1,17 @@
-import { AnimationEffectKeys, ISpell, SpellCastingType, SpellsBlueprint } from '@rpg-engine/shared';
-
+import {
+  AnimationEffectKeys,
+  ISpell,
+  SpellCastingType,
+  SpellsBlueprint,
+} from '@rpg-engine/shared';
 
 export const mockSpells: ISpell[] = [
   {
-    key: SpellsBlueprint.ArrowCreationSpell + '1' as SpellsBlueprint,
+    key: (SpellsBlueprint.ArrowCreationSpell + '1') as SpellsBlueprint,
     name: 'Arrow Creation Spell',
     description: 'A spell that creates arrow in your inventory.1',
+    textureAtlas: 'icons',
+    texturePath: 'spell-icons/arrow-creation-spell.png',
     magicWords: 'iquar elandi',
     manaCost: 10,
     minMagicLevelRequired: 3,
@@ -16,12 +22,14 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => { }
+    usableEffect: () => {},
   },
   {
-    key: SpellsBlueprint.ArrowCreationSpell + '2' as SpellsBlueprint,
+    key: (SpellsBlueprint.ArrowCreationSpell + '2') as SpellsBlueprint,
     name: 'Arrow Creation Spell',
     description: 'A spell that creates arrow in your inventory.2',
+    textureAtlas: 'icons',
+    texturePath: 'spell-icons/arrow-creation-spell.png',
     magicWords: 'iquar elandi',
     manaCost: 10,
     minMagicLevelRequired: 3,
@@ -32,12 +40,14 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => { }
+    usableEffect: () => {},
   },
   {
-    key: SpellsBlueprint.ArrowCreationSpell + '3' as SpellsBlueprint,
+    key: (SpellsBlueprint.ArrowCreationSpell + '3') as SpellsBlueprint,
     name: 'Arrow Creation Spell',
     description: 'A spell that creates arrow in your inventory.3',
+    textureAtlas: 'icons',
+    texturePath: 'spell-icons/arrow-creation-spell.png',
     magicWords: 'iquar elandi',
     manaCost: 10,
     minMagicLevelRequired: 3,
@@ -48,12 +58,14 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => { }
+    usableEffect: () => {},
   },
   {
-    key: SpellsBlueprint.ArrowCreationSpell + '4' as SpellsBlueprint,
+    key: (SpellsBlueprint.ArrowCreationSpell + '4') as SpellsBlueprint,
     name: 'Arrow Creation Spell',
     description: 'A spell that creates arrow in your inventory.4',
+    textureAtlas: 'icons',
+    texturePath: 'spell-icons/arrow-creation-spell.png',
     magicWords: 'iquar elandi',
     manaCost: 10,
     minMagicLevelRequired: 3,
@@ -64,12 +76,14 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => { }
+    usableEffect: () => {},
   },
   {
-    key: SpellsBlueprint.ArrowCreationSpell + '5' as SpellsBlueprint,
+    key: (SpellsBlueprint.ArrowCreationSpell + '5') as SpellsBlueprint,
     name: 'Arrow Creation Spell',
     description: 'A spell that creates arrow in your inventory.5',
+    textureAtlas: 'icons',
+    texturePath: 'spell-icons/arrow-creation-spell.png',
     magicWords: 'iquar elandi',
     manaCost: 10,
     minMagicLevelRequired: 3,
@@ -80,6 +94,6 @@ export const mockSpells: ISpell[] = [
     castingAnimationKey: AnimationEffectKeys.SkillLevelUp,
     targetHitAnimationKey: AnimationEffectKeys.Rooted,
     projectileAnimationKey: AnimationEffectKeys.Energy,
-    usableEffect: () => { }
+    usableEffect: () => {},
   },
-];
+];

package/src/components/shared/SpriteFromAtlas.tsx

@@ -15,6 +15,8 @@ interface IProps {
   imgStyle?: any;
   imgScale?: number;
   imgClassname?: string;
+  centered?: boolean;
+  borderRadius?: string;
 }
 
 export const SpriteFromAtlas: React.FC<IProps> = ({
@@ -30,6 +32,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   grayScale = false,
   opacity = 1,
   imgClassname,
+  centered,
+  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!
@@ -55,6 +59,8 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
         grayScale={grayScale}
         opacity={opacity}
         style={imgStyle}
+        centered={centered}
+        borderRadius={borderRadius}
       />
     </Container>
   );
@@ -71,6 +77,8 @@ interface IImgSpriteProps {
   scale: number;
   grayScale: boolean;
   opacity: number;
+  centered?: boolean;
+  borderRadius?: string;
 }
 
 interface IContainerProps {
@@ -97,8 +105,9 @@ const ImgSprite = styled.div<IImgSpriteProps>`
   background-position: -${props => props.frame.x}px -${props => props.frame.y}px;
   transform: scale(${props => props.scale});
   position: relative;
-  top: 8px;
-  left: 8px;
+  top: ${props => (props.centered ? '0' : '8px')};
+  left: ${props => (props.centered ? '0' : '8px')};
   filter: ${props => (props.grayScale ? 'grayscale(100%)' : 'none')};
   opacity: ${props => props.opacity};
+  border-radius: ${props => (props.borderRadius ? props.borderRadius : '0')};
 `;

package/src/mocks/shortcut.mocks.ts

@@ -11,6 +11,8 @@ export const shortcutMock = [
       minLevelRequired: 2,
       minMagicLevelRequired: 1,
       animationKey: 'life-heal',
+      textureAtlas: 'icons',
+      texturePath: 'spell-icons/self-healing-spell.png',
     },
   },
   { type: 2, payload: null },

package/src/stories/Spellbook.stories.tsx

@@ -1,13 +1,13 @@
-import { IShortcut, ShortcutType } from '@rpg-engine/shared';
+import { IRawSpell, IShortcut, ShortcutType } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React, { useEffect, useState } from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
+import { ISpellbookProps, Spellbook } from '../components/Spellbook/Spellbook';
 import {
-  defaultShortcut,
   SHORTCUTS_STORAGE_KEY,
+  defaultShortcut,
 } from '../components/Spellbook/constants';
 import { mockSpells } from '../components/Spellbook/mockSpells';
-import { ISpellbookProps, Spellbook } from '../components/Spellbook/Spellbook';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 
@@ -38,19 +38,25 @@ const Template: Story<ISpellbookProps> = args => {
       return;
     }
 
+    const spellRaw = {
+      ...spell,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasIMG,
+    } as IRawSpell;
+
     if (!shortcuts) {
       const newShortcuts: IShortcut[] = Array(6).fill(defaultShortcut);
 
       newShortcuts[index] = {
         type: ShortcutType.Spell,
-        payload: spell,
+        payload: spellRaw,
       };
 
       localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(newShortcuts));
     } else {
       shortcuts[index] = {
         type: ShortcutType.Spell,
-        payload: spell,
+        payload: spellRaw,
       };
 
       localStorage.setItem(SHORTCUTS_STORAGE_KEY, JSON.stringify(shortcuts));