@rpg-engine/long-bow 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "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.9.32",
+    "@rpg-engine/shared": "^0.9.52",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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

@@ -0,0 +1,80 @@
+import { IItem } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+interface IProps {
+  item: IItem;
+}
+
+const gemColors: { [key: string]: string } = {
+  'emerald-gem': '#50C878', // Emerald green
+  'topaz-radiance': '#FFC87C', // Topaz yellow
+  'sapphire-gem': '#0F52BA', // Sapphire blue
+  'ruby-gem': '#E0115F', // Ruby red
+  'misty-quartz-gem': '#D9D9F3', // Misty Quartz purple
+  'coral-reef-gem': '#FF7F50', // Coral reef orange
+  'jasper-gem': '#D73B3E', // Jasper red
+  'earthstone-gem': '#8B4513', // Earthstone brown
+  'obsidian-gem': '#0B0C0E', // Obsidian black
+  'amethyst-gem': '#9966CC', // Amethyst purple
+};
+
+const defaultColor = '#FFFFFF'; // Default color (white)
+
+export const onRenderGems = (item: IItem) => {
+  const gemQty = item.attachedGems?.length || 0;
+
+  if (gemQty > 0) {
+    return <ItemSlotQty item={item} />;
+  }
+  return undefined;
+};
+
+export const ItemSlotQty = ({ item }: IProps): JSX.Element => {
+  console.log(item.attachedGems);
+
+  const itemId = item._id;
+
+  return (
+    <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
+      {item.attachedGems?.map((gem, index) => (
+        <Gem
+          key={`${itemId}-gem-${index}`}
+          color={gemColors[gem.key] || defaultColor}
+        />
+      ))}
+    </ItemQtyContainer>
+  );
+};
+
+const ItemQtyContainer = styled.div`
+  position: relative;
+  width: 85%;
+  height: 16px;
+  top: 26px;
+  left: -2px;
+  pointer-events: none;
+  transform: scale(0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
+`;
+
+const Gem = styled.div<{ color: string }>`
+  width: 8px;
+  height: 8px;
+  background-color: ${({ color }) => color};
+  border: 1px solid black;
+  transform: rotate(45deg);
+  margin: 0 2px;
+  box-shadow: 0 0 5px ${({ color }) => color}; /* Glow effect */
+  transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effect */
+
+  &:hover {
+    transform: rotate(45deg) scale(1.2);
+    box-shadow: 0 0 10px ${({ color }) => color}; /* Enhanced glow on hover */
+  }
+`;
+
+export default ItemSlotQty;

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ErrorBoundary } from './ErrorBoundary';
+import { onRenderGems } from './ItemGem';
 import { EquipmentSlotSpriteByType } from './ItemSlot';
 import { onRenderStackInfo } from './ItemSlotQty/ItemSlotQty';
 
@@ -26,6 +27,18 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
   slotSpriteMask,
   item,
 }) => {
+  const renderStackInfo = (item: IItem) => {
+    return (
+      item.stackQty &&
+      item.stackQty > 1 &&
+      onRenderStackInfo(item._id, item.stackQty)
+    );
+  };
+
+  const renderGems = (item: IItem) => {
+    return item.attachedGems && onRenderGems(item);
+  };
+
   const renderItem = (item: IItem | null) => {
     if (!item?.texturePath) {
       return null;
@@ -48,7 +61,8 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
           imgScale={3}
           imgClassname="sprite-from-atlas-img--item"
         />
-        {onRenderStackInfo(item._id, item.stackQty ?? 0)}
+        {renderStackInfo(item)}
+        {renderGems(item)}
       </ErrorBoundary>
     );
   };

package/src/mocks/itemContainer.mocks.ts

@@ -54,6 +54,44 @@ export const items: IItem[] = [
         level: 5,
       },
     },
+    attachedGems: [
+      {
+        gemEntityEffectsAdd: ['poison'],
+        key: 'ruby-gem',
+        name: 'Ruby Gem',
+        gemStatBuff: {
+          attack: 5,
+          defense: 4,
+        },
+      },
+      {
+        gemEntityEffectsAdd: ['poison'],
+        key: 'misty-quartz-gem',
+        name: 'Misty Quartz Gem',
+        gemStatBuff: {
+          attack: 5,
+          defense: 4,
+        },
+      },
+      {
+        gemEntityEffectsAdd: ['poison'],
+        key: 'coral-reef-gem',
+        name: 'Coral Reef Gem',
+        gemStatBuff: {
+          attack: 5,
+          defense: 4,
+        },
+      },
+      {
+        gemEntityEffectsAdd: ['poison'],
+        key: 'emerald-gem',
+        name: 'Emerald Gem',
+        gemStatBuff: {
+          attack: 5,
+          defense: 4,
+        },
+      },
+    ],
     equippedBuffDescription: 'Character speed +10%',
     entityEffectChance: 50,
     entityEffects: ['freezing'],
@@ -91,6 +129,26 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Epic,
+    attachedGems: [
+      {
+        gemEntityEffectsAdd: ['poison'],
+        key: 'emerald-gem',
+        name: 'Emerald Gem',
+        gemStatBuff: {
+          attack: 5,
+          defense: 4,
+        },
+      },
+      {
+        gemEntityEffectsAdd: ['poison'],
+        key: 'emerald-gem',
+        name: 'Emerald Gem',
+        gemStatBuff: {
+          attack: 5,
+          defense: 4,
+        },
+      },
+    ],
   },
   {
     _id: '629acef1c7c8e8002ff60723',