@rpg-engine/long-bow 0.3.51 → 0.3.52

package/dist/stories/{QuickSpells.stories.d.ts → Shortcuts.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
-import { QuickSpellsProps } from '../components/Spellbook/QuickSpells';
+import { ShortcutsProps } from '../components/Shortcuts/Shortcuts';
 declare const meta: Meta;
 export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, QuickSpellsProps>;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ShortcutsProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.51",
+  "version": "0.3.52",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Abstractions/SlotsContainer.tsx

@@ -29,8 +29,8 @@ export const SlotsContainer: React.FC<IProps> = ({
           onClose();
         }
       }}
-      width="330px"
-      cancelDrag=".item-container-body"
+      width="400px"
+      cancelDrag=".item-container-body, #shortcuts_list"
       onPositionChange={({ x, y }) => {
         if (onPositionChange) {
           onPositionChange({ x, y });

package/src/components/CircularController/CircularController.tsx

@@ -1,23 +1,36 @@
-import { IRawSpell } from '@rpg-engine/shared';
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IItemContainer,
+  IRawSpell,
+} from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { SpellShortcut } from '../Spellbook/QuickSpells';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { IShortcut, ShortcutType } from '../Shortcuts/Shortcuts';
+import { SingleShortcut } from '../Shortcuts/SingleShortcut';
 
 export type CircularControllerProps = {
   onActionClick: () => void;
   onCancelClick: () => void;
-  onSpellClick: (spellKey: string) => void;
+  onShortcutClick: (index: number) => void;
   mana: number;
-  spells: IRawSpell[];
+  shortcuts: IShortcut[];
+  inventory?: IItemContainer | null;
+  atlasIMG: any;
+  atlasJSON: any;
 };
 
 export const CircularController: React.FC<CircularControllerProps> = ({
   onActionClick,
   onCancelClick,
-  onSpellClick,
+  onShortcutClick,
   mana,
-  spells,
+  shortcuts,
+  inventory,
+  atlasIMG,
+  atlasJSON,
 }) => {
   const onTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
     const target = e.target as HTMLButtonElement;
@@ -35,33 +48,91 @@ export const CircularController: React.FC<CircularControllerProps> = ({
     action();
   };
 
+  const renderShortcut = (i: number) => {
+    let variant = '';
+
+    if (i === 0) variant = 'top';
+    else if (i >= 3) variant = `bottom-${i - 3}`;
+
+    const onShortcutClickBinded =
+      shortcuts[i]?.type !== ShortcutType.None
+        ? onShortcutClick.bind(null, i)
+        : () => {};
+
+    if (shortcuts[i]?.type === ShortcutType.Item) {
+      const payload = shortcuts[i]?.payload as IItem | undefined;
+
+      let itemsFromEquipment: (IItem | undefined | null)[] = [];
+
+      if (inventory) {
+        Object.keys(inventory.slots).forEach(i => {
+          const index = parseInt(i);
+
+          if (inventory.slots[index]?.key === payload?.key) {
+            itemsFromEquipment.push(inventory.slots[index]);
+          }
+        });
+      }
+
+      const totalQty = itemsFromEquipment.reduce(
+        (acc, item) => acc + (item?.stackQty || 1),
+        0
+      );
+
+      return (
+        <StyledShortcut
+          key={i}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd.bind(null, onShortcutClickBinded)}
+          disabled={false}
+          className={variant}
+        >
+          {payload && (
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={getItemTextureKeyPath(
+                {
+                  key: payload.texturePath,
+                  texturePath: payload.texturePath,
+                  stackQty: payload.stackQty || 1,
+                },
+                atlasJSON
+              )}
+              width={32}
+              height={32}
+              imgScale={1.4}
+              imgStyle={{ left: '4px' }}
+            />
+          )}
+          <span className="qty">{totalQty}</span>
+        </StyledShortcut>
+      );
+    }
+
+    const payload = shortcuts[i]?.payload as IRawSpell | undefined;
+
+    return (
+      <StyledShortcut
+        key={i}
+        onTouchStart={onTouchStart}
+        onTouchEnd={onTouchEnd.bind(null, onShortcutClickBinded)}
+        disabled={mana < (payload?.manaCost ?? 0)}
+        className={variant}
+      >
+        <span className="mana">{payload && payload.manaCost}</span>
+        <span className="magicWords">
+          {payload?.magicWords.split(' ').map(word => word[0])}
+        </span>
+      </StyledShortcut>
+    );
+  };
+
   return (
     <ButtonsContainer>
-      <SpellsContainer>
-        {Array.from({ length: 4 }).map((_, i) => {
-          const variant = i === 0 ? 'top' : i === 3 ? 'bottom' : '';
-          const spell = spells[i];
-
-          const onSpellClickBinded = spell
-            ? onSpellClick.bind(null, spell.key)
-            : () => {};
-
-          return (
-            <StyledShortcut
-              key={i}
-              disabled={mana < spell?.manaCost}
-              onTouchStart={onTouchStart}
-              onTouchEnd={onTouchEnd.bind(null, onSpellClickBinded)}
-              className={variant}
-            >
-              <span className="mana">{spell?.key && spell?.manaCost}</span>
-              <span className="magicWords">
-                {spell?.magicWords.split(' ').map(word => word[0])}
-              </span>
-            </StyledShortcut>
-          );
-        })}
-      </SpellsContainer>
+      <ShortcutsContainer>
+        {Array.from({ length: 6 }).map((_, i) => renderShortcut(i))}
+      </ShortcutsContainer>
       <Button
         onTouchStart={onTouchStart}
         onTouchEnd={onTouchEnd.bind(null, onActionClick)}
@@ -93,6 +164,7 @@ const Button = styled.button`
   justify-content: center;
   position: relative;
   transition: background-color 0.1s;
+  margin-top: -3rem;
 
   &.active {
     background-color: ${uiColors.gray};
@@ -125,28 +197,38 @@ const ButtonsContainer = styled.div`
   gap: 0.5rem;
 `;
 
-const SpellsContainer = styled.div`
+const ShortcutsContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.4rem;
+  gap: 0.5rem;
   flex-direction: column;
+  margin-top: 3rem;
 
   .top {
     transform: translate(93%, 25%);
   }
 
-  .bottom {
+  .bottom-0 {
     transform: translate(93%, -25%);
   }
+
+  .bottom-1 {
+    transform: translate(-120%, calc(-5.5rem));
+  }
+
+  .bottom-2 {
+    transform: translate(-30%, calc(-5.5rem - 25%));
+  }
 `;
 
-const StyledShortcut = styled(SpellShortcut)`
+const StyledShortcut = styled(SingleShortcut)`
   width: 2.5rem;
   height: 2.5rem;
   transition: background-color 0.1s;
 
-  .mana {
+  .mana,
+  .qty {
     font-size: 0.5rem;
   }
 

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -1,10 +1,17 @@
-import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';
+import {
+  IItem,
+  IItemContainer,
+  ItemContainerType,
+  ItemType,
+} from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
 import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
+import { IShortcut } from '../../Shortcuts/Shortcuts';
+import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
@@ -37,6 +44,9 @@ export interface IItemContainerProps {
   atlasIMG: any;
   disableContextMenu?: boolean;
   initialPosition?: { x: number; y: number };
+  shortcuts?: IShortcut[];
+  setItemShortcut?: (key: string, index: number) => void;
+  removeShortcut?: (index: number) => void;
 }
 
 export const ItemContainer: React.FC<IItemContainerProps> = ({
@@ -57,12 +67,16 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   initialPosition,
   checkIfItemShouldDragEnd,
   dragScale,
+  shortcuts,
+  setItemShortcut,
+  removeShortcut,
 }) => {
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
     maxQuantity: 1,
     callback: (_quantity: number) => {},
   });
+  const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
   const onRenderSlots = () => {
     const slots = [];
@@ -78,8 +92,17 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onMouseOver={(event, slotIndex, item) => {
             if (onMouseOver) onMouseOver(event, slotIndex, item);
           }}
-          onClick={(ItemType, ContainerType, item) => {
-            if (onItemClick) onItemClick(item, ItemType, ContainerType);
+          onClick={(itemType, containerType, item) => {
+            if (settingShortcutIndex !== -1) {
+              setSettingShortcutIndex(-1);
+
+              if (
+                itemType === ItemType.Consumable ||
+                itemType === ItemType.Tool
+              ) {
+                setItemShortcut?.(item.key, settingShortcutIndex);
+              }
+            } else if (onItemClick) onItemClick(item, itemType, containerType);
           }}
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);
@@ -110,6 +133,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
+          isSelectingShortcut={settingShortcutIndex !== -1}
         />
       );
     }
@@ -123,6 +147,18 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         onClose={onClose}
         initialPosition={initialPosition}
       >
+        {type === ItemContainerType.Inventory &&
+          shortcuts &&
+          removeShortcut && (
+            <ShortcutsSetter
+              setSettingShortcutIndex={setSettingShortcutIndex}
+              settingShortcutIndex={settingShortcutIndex}
+              shortcuts={shortcuts}
+              removeShortcut={removeShortcut}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+            />
+          )}
         <ItemsContainer className="item-container-body">
           {onRenderSlots()}
         </ItemsContainer>
@@ -155,7 +191,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 };
 
 const ItemsContainer = styled.div`
-  max-width: 280px;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -74,6 +74,7 @@ interface IProps {
   atlasJSON: any;
   atlasIMG: any;
   isContextMenuDisabled?: boolean;
+  isSelectingShortcut?: boolean;
 }
 
 export const ItemSlot: React.FC<IProps> = observer(
@@ -97,6 +98,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     openQuantitySelector,
     checkIfItemShouldDragEnd,
     dragScale,
+    isSelectingShortcut,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
 
@@ -117,6 +119,7 @@ export const ItemSlot: React.FC<IProps> = observer(
       setIsFocused(false);
 
       if (item) {
+        console.log(item);
         setContextActions(generateContextMenu(item, containerType));
       }
     }, [item]);
@@ -278,12 +281,17 @@ export const ItemSlot: React.FC<IProps> = observer(
             .elementFromPoint(clientX, clientY)
             ?.dispatchEvent(simulatedEvent);
         }}
+        isSelectingShortcut={
+          isSelectingShortcut &&
+          (item?.type === ItemType.Consumable || item?.type === ItemType.Tool)
+        }
       >
         <Draggable
+          axis={isSelectingShortcut ? 'none' : 'both'}
           defaultClassName={item ? 'draggable' : 'empty-slot'}
           scale={dragScale}
           onStop={(e, data) => {
-            if (wasDragged && item) {
+            if (wasDragged && item && !isSelectingShortcut) {
               //@ts-ignore
               const classes: string[] = Array.from(e.target?.classList);
 
@@ -330,14 +338,14 @@ export const ItemSlot: React.FC<IProps> = observer(
                 }
               }, 100);
             } else if (item) {
-              if (!isContextMenuDisabled)
+              if (!isContextMenuDisabled && !isSelectingShortcut)
                 setIsContextMenuVisible(!isContextMenuVisible);
 
               onClick(item.type, containerType, item);
             }
           }}
           onStart={() => {
-            if (!item) {
+            if (!item || isSelectingShortcut) {
               return;
             }
 
@@ -417,6 +425,7 @@ const rarityColor = (item: IItem | null) => {
 
 interface ContainerTypes {
   item: IItem | null;
+  isSelectingShortcut?: boolean;
 }
 
 const Container = styled.div<ContainerTypes>`
@@ -432,6 +441,32 @@ const Container = styled.div<ContainerTypes>`
     //background-color: ${({ item }) => rarityColor(item)};
   }
   position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    border-radius: 12px;
+    pointer-events: none;
+    animation: ${({ isSelectingShortcut }) =>
+      isSelectingShortcut ? 'bg-color-change 1s infinite' : 'none'};
+
+    @keyframes bg-color-change {
+      0% {
+        background-color: rgba(255 255 255 / 0.5);
+      }
+      50% {
+        background-color: transparent;
+      }
+      100% {
+        background-color: rgba(255 255 255 / 0.5);
+      }
+    }
+  }
 `;
 
 const ItemContainer = styled.div<{ isFocused?: boolean }>`

package/src/components/Shortcuts/Shortcuts.tsx

@@ -0,0 +1,138 @@
+import {
+  getItemTextureKeyPath,
+  IItem,
+  IItemContainer,
+  IRawSpell,
+} from '@rpg-engine/shared';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { SingleShortcut } from './SingleShortcut';
+
+export enum ShortcutType {
+  Spell,
+  Item,
+  None,
+}
+
+export interface IShortcut {
+  type: ShortcutType;
+  payload: IRawSpell | IItem | null;
+}
+
+export type ShortcutsProps = {
+  shortcuts: IShortcut[];
+  onShortcutCast: (index: number) => void;
+  mana: number;
+  isBlockedCastingByKeyboard?: boolean;
+  inventory?: IItemContainer | null;
+  atlasJSON: any;
+  atlasIMG: any;
+};
+
+export const Shortcuts: React.FC<ShortcutsProps> = ({
+  shortcuts,
+  onShortcutCast,
+  mana,
+  isBlockedCastingByKeyboard = false,
+  atlasJSON,
+  atlasIMG,
+  inventory,
+}) => {
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (isBlockedCastingByKeyboard) return;
+
+      const shortcutIndex = Number(e.key) - 1;
+      if (shortcutIndex >= 0 && shortcutIndex <= 5) {
+        onShortcutCast(shortcutIndex);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [shortcuts, isBlockedCastingByKeyboard]);
+
+  return (
+    <List>
+      {Array.from({ length: 6 }).map((_, i) => {
+        if (shortcuts[i]?.type === ShortcutType.Item) {
+          const payload = shortcuts[i]?.payload as IItem | undefined;
+
+          let itemsFromEquipment: (IItem | undefined | null)[] = [];
+
+          if (inventory) {
+            Object.keys(inventory.slots).forEach(i => {
+              const index = parseInt(i);
+
+              if (inventory.slots[index]?.key === payload?.key) {
+                itemsFromEquipment.push(inventory.slots[index]);
+              }
+            });
+          }
+
+          const totalQty = itemsFromEquipment.reduce(
+            (acc, item) => acc + (item?.stackQty || 1),
+            0
+          );
+
+          return (
+            <SingleShortcut
+              key={i}
+              onClick={onShortcutCast.bind(null, i)}
+              disabled={false}
+            >
+              {payload && (
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={getItemTextureKeyPath(
+                    {
+                      key: payload.texturePath,
+                      texturePath: payload.texturePath,
+                      stackQty: payload.stackQty || 1,
+                    },
+                    atlasJSON
+                  )}
+                  width={32}
+                  height={32}
+                />
+              )}
+              <span className="qty">{totalQty}</span>
+              <span className="keyboard">{i + 1}</span>
+            </SingleShortcut>
+          );
+        }
+
+        const payload = shortcuts[i]?.payload as IRawSpell | undefined;
+
+        return (
+          <SingleShortcut
+            key={i}
+            onClick={onShortcutCast.bind(null, i)}
+            disabled={mana < (payload?.manaCost ?? 0)}
+          >
+            <span className="mana">{payload && payload.manaCost}</span>
+            <span className="magicWords">
+              {payload?.magicWords.split(' ').map(word => word[0])}
+            </span>
+            <span className="keyboard">{i + 1}</span>
+          </SingleShortcut>
+        );
+      })}
+    </List>
+  );
+};
+
+const List = styled.p`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -0,0 +1,127 @@
+import { getItemTextureKeyPath, IItem, IRawSpell } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { IShortcut, ShortcutType } from './Shortcuts';
+
+type ShortcutsSetterProps = {
+  setSettingShortcutIndex: (index: number) => void;
+  settingShortcutIndex: number;
+  shortcuts: IShortcut[];
+  removeShortcut: (index: number) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+};
+
+export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
+  setSettingShortcutIndex,
+  settingShortcutIndex,
+  shortcuts,
+  removeShortcut,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  const getContent = (index: number) => {
+    if (shortcuts[index]?.type === ShortcutType.Item) {
+      const payload = shortcuts[index]?.payload as IItem | undefined;
+
+      if (!payload) return null;
+
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={getItemTextureKeyPath(
+            {
+              key: payload.texturePath,
+              texturePath: payload.texturePath,
+              stackQty: payload.stackQty || 1,
+            },
+            atlasJSON
+          )}
+          width={32}
+          height={32}
+          imgScale={1.6}
+          imgStyle={{ left: '5px' }}
+        />
+      );
+    }
+
+    const payload = shortcuts[index]?.payload as IRawSpell | undefined;
+
+    return <span>{payload?.magicWords.split(' ').map(word => word[0])}</span>;
+  };
+
+  return (
+    <Container>
+      <p>Shortcuts:</p>
+      <List id="shortcuts_list">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Shortcut
+            key={i}
+            onClick={() => {
+              removeShortcut(i);
+              if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+                setSettingShortcutIndex(i);
+            }}
+            disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
+            isBeingSet={settingShortcutIndex === i}
+          >
+            {getContent(i)}
+          </Shortcut>
+        ))}
+      </List>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  p {
+    margin: 0;
+    margin-left: 0.5rem;
+  }
+`;
+
+const Shortcut = styled.button<{ isBeingSet?: boolean }>`
+  width: 2.6rem;
+  height: 2.6rem;
+  background-color: ${uiColors.lightGray};
+  border: 2px solid
+    ${({ isBeingSet }) => (isBeingSet ? uiColors.yellow : uiColors.darkGray)};
+  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: ${uiColors.darkGray};
+  }
+
+  &:active {
+    background-color: ${uiColors.gray};
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+`;
+
+const List = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  box-sizing: border-box;
+  margin: 0 !important;
+`;