@rpg-engine/long-bow 0.8.9 → 0.8.11

package/dist/stories/UI/dropdownsAndSelectors/GemSelector.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { IGemSelectorProps } from '../../../components/itemSelector/GemSelector';
+declare const meta: Meta<IGemSelectorProps>;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IGemSelectorProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.9",
+  "version": "0.8.11",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.92",
+    "@rpg-engine/shared": "^0.9.96",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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

@@ -62,15 +62,6 @@ export interface IItemContainerProps {
   opacity?: number;
 }
 
-type onDragStart =
-  | ((
-      item: IItem,
-      slotIndex: number,
-      itemContainerType: ItemContainerType | null
-    ) => void)
-  | undefined;
-type onDragEnd = ((quantity?: number) => void) | undefined;
-
 const MIN_SLOTS_FOR_SCROLL = 20;
 
 export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
@@ -154,7 +145,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
       document.removeEventListener('pointermove', handleMouseMove);
     }, [handleMouseMove, stopScrolling]);
 
-    const onDragStartHandler: onDragStart = useCallback(
+    const onDragStartHandler = useCallback(
       (
         item: IItem,
         slotIndex: number,
@@ -169,7 +160,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
       [onItemDragStart, onDragStartScrollingEvents]
     );
 
-    const onDragEndHandler: onDragEnd = useCallback(
+    const onDragEndHandler = useCallback(
       (quantity: number | undefined) => {
         if (onItemDragEnd) {
           onItemDragEnd(quantity);
@@ -179,16 +170,85 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
       [onItemDragEnd, onDragEndScrollingEvents]
     );
 
-    // Memoize handleSetShortcut to prevent unnecessary re-renders
-    const memoizedHandleSetShortcut = useCallback(
-      (item: IItem, index: number) => {
-        handleSetShortcut(item, index);
+    const handleItemClick = useCallback(
+      (
+        itemType: IItem['type'],
+        containerType: ItemContainerType | null,
+        item: IItem
+      ) => {
+        if (settingShortcutIndex !== -1) {
+          setSettingShortcutIndex(-1);
+          handleSetShortcut(item, settingShortcutIndex);
+        } else if (onItemClick) {
+          onItemClick(item, itemType, containerType);
+        }
+      },
+      [settingShortcutIndex, handleSetShortcut, onItemClick]
+    );
+
+    const handlePlaceDrop = useCallback(
+      (
+        item: IItem | null,
+        slotIndex: number,
+        itemContainerType: ItemContainerType | null
+      ) => {
+        if (onItemPlaceDrop) {
+          onItemPlaceDrop(item, slotIndex, itemContainerType);
+        }
+        onDragEndScrollingEvents();
+      },
+      [onItemPlaceDrop, onDragEndScrollingEvents]
+    );
+
+    const handleOutsideDrop = useCallback(
+      (item: IItem, position: IPosition) => {
+        if (onOutsideDrop) {
+          onOutsideDrop(item, position);
+        }
+        onDragEndScrollingEvents();
       },
-      [handleSetShortcut]
+      [onOutsideDrop, onDragEndScrollingEvents]
     );
 
-    // Memoize onRenderSlots to prevent re-creating the slots array on every render
-    const onRenderSlots = useMemo(() => {
+    const handleQuantitySelect = useCallback(
+      (maxQuantity: number, callback: (quantity: number) => void) => {
+        setQuantitySelect({
+          isOpen: true,
+          maxQuantity,
+          callback,
+        });
+      },
+      []
+    );
+
+    // Memoize slot rendering configuration
+    const slotConfig = useMemo(
+      () => ({
+        type,
+        atlasIMG,
+        atlasJSON,
+        scale,
+        equipmentSet,
+        isDepotSystem,
+        isSelectingShortcut: settingShortcutIndex !== -1,
+        checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd,
+      }),
+      [
+        type,
+        atlasIMG,
+        atlasJSON,
+        scale,
+        equipmentSet,
+        isDepotSystem,
+        settingShortcutIndex,
+        checkIfItemCanBeMoved,
+        checkIfItemShouldDragEnd,
+      ]
+    );
+
+    // Memoize slots rendering
+    const renderSlots = useMemo(() => {
       const slots = [];
 
       for (let i = 0; i < itemContainer.slotQty; i++) {
@@ -199,62 +259,27 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
             key={i}
             slotIndex={i}
             item={currentItem}
-            itemContainerType={type}
-            onMouseOver={
-              onMouseOver
-                ? (event, slotIndex, item) =>
-                    onMouseOver(event, slotIndex, item)
-                : undefined
-            }
-            onMouseOut={undefined} // Assuming you don't need onMouseOut here
-            onPointerDown={(itemType, containerType, item) => {
-              if (settingShortcutIndex !== -1) {
-                setSettingShortcutIndex(-1);
-                memoizedHandleSetShortcut(item, settingShortcutIndex);
-              } else if (onItemClick) {
-                onItemClick(item, itemType, containerType);
-              }
-            }}
+            itemContainerType={slotConfig.type}
+            onMouseOver={onMouseOver}
+            onPointerDown={handleItemClick}
             onDragStart={onDragStartHandler}
             onDragEnd={onDragEndHandler}
-            dragScale={scale}
-            checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-            checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-            openQuantitySelector={(maxQuantity, callback) => {
-              setQuantitySelect({
-                isOpen: true,
-                maxQuantity,
-                callback,
-              });
-            }}
-            onPlaceDrop={(item, slotIndex, itemContainerType) => {
-              if (onItemPlaceDrop) {
-                onItemPlaceDrop(item, slotIndex, itemContainerType);
-              }
-
-              console.log('PLACE DROP');
-
-              onDragEndScrollingEvents();
-            }}
-            onOutsideDrop={(item, position) => {
-              if (onOutsideDrop) {
-                onOutsideDrop(item, position);
-              }
-
-              console.log('OUTSIDE DROP');
-
-              onDragEndScrollingEvents();
-            }}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            isSelectingShortcut={settingShortcutIndex !== -1}
-            equipmentSet={equipmentSet}
+            dragScale={slotConfig.scale}
+            checkIfItemCanBeMoved={slotConfig.checkIfItemCanBeMoved}
+            checkIfItemShouldDragEnd={slotConfig.checkIfItemShouldDragEnd}
+            openQuantitySelector={handleQuantitySelect}
+            onPlaceDrop={handlePlaceDrop}
+            onOutsideDrop={handleOutsideDrop}
+            atlasIMG={slotConfig.atlasIMG}
+            atlasJSON={slotConfig.atlasJSON}
+            isSelectingShortcut={slotConfig.isSelectingShortcut}
+            equipmentSet={slotConfig.equipmentSet}
             setItemShortcut={
               type === ItemContainerType.Inventory
-                ? memoizedHandleSetShortcut
+                ? handleSetShortcut
                 : undefined
             }
-            isDepotSystem={isDepotSystem}
+            isDepotSystem={slotConfig.isDepotSystem}
           />
         );
       }
@@ -262,23 +287,16 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
     }, [
       itemContainer.slotQty,
       itemContainer.slots,
-      type,
+      slotConfig,
       onMouseOver,
-      settingShortcutIndex,
-      memoizedHandleSetShortcut,
-      onItemClick,
+      handleItemClick,
       onDragStartHandler,
       onDragEndHandler,
-      scale,
-      checkIfItemCanBeMoved,
-      checkIfItemShouldDragEnd,
-      onItemPlaceDrop,
-      onOutsideDrop,
-      atlasIMG,
-      atlasJSON,
-      equipmentSet,
-      isDepotSystem,
-      onDragEndScrollingEvents,
+      handleQuantitySelect,
+      handlePlaceDrop,
+      handleOutsideDrop,
+      handleSetShortcut,
+      type,
     ]);
 
     return (
@@ -317,7 +335,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = React.memo(
               isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
               isFullScreen={isFullScreen}
             >
-              {onRenderSlots}
+              {renderSlots}
             </ItemsContainer>
           </SlotsContainer>
           {quantitySelect.isOpen && (

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

@@ -6,7 +6,7 @@ interface IProps {
   item: IItem;
 }
 
-const gemColors: { [key: string]: string } = {
+export const gemColors: { [key: string]: string } = {
   'emerald-gem': '#50C878', // Emerald green
   'topaz-radiance': '#FFC87C', // Topaz yellow
   'sapphire-gem': '#0F52BA', // Sapphire blue

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -203,5 +203,9 @@ export const generateContextMenu = (
     }
   }
 
+  if (item.attachedGems && item.attachedGems.length > 0) {
+    contextActionMenu.push({ id: ItemSocketEvents.DetachGem, text: "Detach Gems" });
+  }
+
   return contextActionMenu;
 };

package/src/components/itemSelector/GemSelector.tsx

@@ -0,0 +1,203 @@
+import { IGemSchema, IItem } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Button, ButtonTypes } from '../Button';
+import { CheckItem } from '../CheckItem';
+import { useResponsiveSize } from '../CraftBook/hooks/useResponsiveSize';
+import { DraggableContainer } from '../DraggableContainer';
+import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IGemSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  item: IItem;
+  scale?: number;
+  onClose: () => void;
+  onSelect: (selectedGems: IGemSchema[]) => void;
+}
+
+export const GemSelector: React.FC<IGemSelectorProps> = ({
+  atlasJSON,
+  atlasIMG,
+  item,
+  scale,
+  onClose,
+  onSelect,
+}) => {
+  const [selectedGems, setSelectedGems] = useState<IGemSchema[]>([]);
+  const size = useResponsiveSize(scale);
+
+  const handleGemToggle = (gem: IGemSchema) => {
+    setSelectedGems(prev =>
+      prev.some(selected => selected.key === gem.key)
+        ? prev.filter(selected => selected.key !== gem.key)
+        : [...prev, gem]
+    );
+  };
+
+  const handleConfirm = () => {
+    onSelect(selectedGems);
+    onClose();
+  };
+
+  if (!size) return null;
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="450px"
+      height={size.height}
+      scale={scale}
+      cancelDrag=".gem-selector-container"
+      onCloseButton={onClose}
+    >
+      <ContentWrapper>
+        <Header>
+          <Title>GEM SELECTION</Title>
+          <Subtitle>Select gems to detach</Subtitle>
+        </Header>
+
+        <GemGrid>
+          {item.attachedGems?.map((gem, index) => {
+            return (
+              <GemItem key={`${gem.key}-${index}`}>
+                <CheckItemWrapper>
+                  <CheckItem
+                    defaultValue={selectedGems.some(
+                      selected => selected.key === gem.key
+                    )}
+                    onChange={() => {
+                      handleGemToggle(gem);
+                    }}
+                  />
+                </CheckItemWrapper>
+                <SpriteWrapper>
+                  <SpriteFromAtlas
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    spriteKey={`gems/${gem.key}.png`}
+                    imgScale={2}
+                    imgClassname="gem-sprite"
+                    centered={true}
+                  />
+                </SpriteWrapper>
+                <GemName>
+                  {gem.name.replace(/ of /gi, '\n').toUpperCase()}
+                </GemName>
+              </GemItem>
+            );
+          })}
+        </GemGrid>
+
+        <ButtonWrapper>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={() => {
+              onClose();
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={() => {
+              handleConfirm();
+            }}
+            disabled={selectedGems.length === 0}
+          >
+            Confirm
+          </Button>
+        </ButtonWrapper>
+      </ContentWrapper>
+    </DraggableContainer>
+  );
+};
+
+const Title = styled.h1`
+  font-size: 0.8rem;
+  color: ${uiColors.yellow} !important;
+`;
+
+const Subtitle = styled.h2`
+  font-size: 0.6rem;
+  color: ${uiColors.white};
+  margin: 0;
+`;
+
+const Header = styled.div`
+  text-align: center;
+  padding: 5px;
+  border-bottom: 2px solid #444;
+`;
+
+const GemGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  margin-bottom: 20px;
+  margin-top: 10px;
+  min-height: 150px;
+  overflow-y: auto;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-left: 20px;
+  justify-content: space-between;
+  height: 100%;
+`;
+
+const GemItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${uiColors.darkGray} !important;
+  height: 100px;
+  width: 90px;
+  padding: 5px;
+`;
+
+const GemName = styled.div`
+  font-size: 0.5rem;
+  color: ${uiColors.yellow} !important;
+  text-align: center;
+  text-transform: uppercase;
+  line-height: 1.2;
+  width: 100%;
+  min-height: 30px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-self: center;
+`;
+
+const CheckItemWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 20px;
+
+  input.rpgui-checkbox + label {
+    margin: 0 !important;
+    padding-left: 23px !important;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 50px;
+`;

package/src/index.tsx

@@ -25,6 +25,7 @@ export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemPropertySimpleHandler';
 export * from './components/Item/Inventory/ItemQuantitySelectorModal';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/GemSelector';
 export * from './components/itemSelector/ItemSelector';
 export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';

package/src/stories/UI/dropdownsAndSelectors/GemSelector.stories.tsx

@@ -0,0 +1,66 @@
+import { IItem, ItemType } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../..';
+import {
+  GemSelector,
+  IGemSelectorProps,
+} from '../../../components/itemSelector/GemSelector';
+
+const meta: Meta<IGemSelectorProps> = {
+  title: 'UI/Dropdowns & Selectors/Gem Selector',
+  component: GemSelector,
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<IGemSelectorProps> = args => (
+  <RPGUIRoot>
+    <GemSelector {...args} />
+  </RPGUIRoot>
+);
+
+const mockItem = ({
+  _id: '123',
+  name: 'Example Item',
+  type: ItemType.Armor,
+  texturePath: 'weapons/sword.png',
+  attachedGems: [
+    {
+      key: 'emerald-gem',
+      name: 'Emerald of Power',
+      texturePath: 'gems/emerald-gem.png',
+    },
+    {
+      key: 'ruby-gem',
+      name: 'Ruby of Fire',
+      texturePath: 'gems/ruby-gem.png',
+    },
+    {
+      key: 'sapphire-gem',
+      name: 'Sapphire of Wisdom',
+      texturePath: 'gems/sapphire-gem.png',
+    },
+    {
+      key: 'earthstone-gem',
+      name: 'EarthStone Guardian',
+      texturePath: 'gems/earthstone-gem.png',
+    },
+  ],
+} as unknown) as IItem;
+
+export const Default = Template.bind({});
+Default.args = {
+  atlasJSON: require('../../../mocks/atlas/items/items.json'),
+  atlasIMG: require('../../../mocks/atlas/items/items.png'),
+  item: mockItem,
+  onClose: () => console.log('Closing Gem Selector'),
+  onSelect: gems =>
+    console.log(
+      'Selected gems:',
+      gems.map(gem => gem.name)
+    ), // Agora imprime os nomes das gemas
+};