@rpg-engine/long-bow 0.8.10 → 0.8.12

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.10",
+  "version": "0.8.12",
   "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/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

@@ -18,6 +18,7 @@ export * from './components/Friends/FriendList';
 export * from './components/HistoryDialog';
 export * from './components/ImageCarousel/ImageCarousel';
 export * from './components/ImageCarousel/SimpleImageCarousel';
+export * from './components/InformationCenter/InformationCenter';
 export * from './components/Input';
 export * from './components/InternalTabs/InternalTabs';
 export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
@@ -25,6 +26,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
+};