@rpg-engine/long-bow 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "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,64 @@
+import React from 'react';
+import styled from 'styled-components';
+import { uiFonts } from '../../../constants/uiFonts';
+import { Ellipsis } from '../../shared/Ellipsis';
+
+interface IProps {
+  itemId: string;
+  gemQty: number;
+  qtyClassName: string;
+}
+
+export const onRenderGems = (itemId: string, gemQty: number) => {
+  let qtyClassName = 'small';
+  if (gemQty <= 2) {
+    qtyClassName = 'regular';
+  }
+
+  if (gemQty > 0) {
+    return (
+      <ItemSlotQty
+        itemId={itemId}
+        gemQty={gemQty}
+        qtyClassName={qtyClassName}
+      />
+    );
+  }
+  return undefined;
+};
+
+export const ItemSlotQty = ({
+  itemId,
+  gemQty,
+  qtyClassName,
+}: IProps): JSX.Element => {
+  const gemArray = Array.from({ length: gemQty }, () => '🔶');
+
+  return (
+    <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
+      <Ellipsis maxLines={1} maxWidth="48px">
+        <ItemQty className={qtyClassName}>{gemArray.join('')}</ItemQty>
+      </Ellipsis>
+    </ItemQtyContainer>
+  );
+};
+
+const ItemQtyContainer = styled.div`
+  position: relative;
+  width: 85%;
+  height: 16px;
+  top: 25px;
+  left: 5px;
+  pointer-events: none;
+
+  display: flex;
+`;
+
+const ItemQty = styled.span`
+  &.regular {
+    font-size: ${uiFonts.size.small};
+  }
+  &.small {
+    font-size: ${uiFonts.size.xsmall};
+  }
+`;

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,20 @@ 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._id, item.attachedGems.length)
+    );
+  };
+
   const renderItem = (item: IItem | null) => {
     if (!item?.texturePath) {
       return null;
@@ -48,7 +63,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/components/TradingMenu/TradingMenu.tsx

@@ -117,7 +117,7 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
         </TradingComponentScrollWrapper>
         <GoldWrapper>
           <p>Available Gold:</p>
-          <p>${characterAvailableGold.toFixed(2)}</p>
+          <p>${characterAvailableGold}</p>
         </GoldWrapper>
         <TotalWrapper>
           <p>Total:</p>
@@ -130,7 +130,7 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
         ) : (
           <GoldWrapper>
             <p>Final Gold:</p>
-            <p>${getFinalGold().toFixed(2)}</p>
+            <p>${getFinalGold()}</p>
           </GoldWrapper>
         )}
 

package/src/index.tsx

@@ -40,7 +40,6 @@ export * from './components/Shortcuts/Shortcuts';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/Spellbook/Spellbook';
-export * from './components/Stepper';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';

package/src/mocks/itemContainer.mocks.ts

@@ -54,6 +54,44 @@ export const items: IItem[] = [
         level: 5,
       },
     },
+    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,
+        },
+      },
+      {
+        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,
+        },
+      },
+    ],
     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',

package/dist/components/Stepper.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-interface IStep {
-    component: React.ReactNode;
-    id: number;
-}
-interface IStepperProps {
-    steps: IStep[];
-    finalCTAButton?: {
-        label: string;
-        onClick: (() => void) | (() => Promise<void>) | ((e: any) => Promise<void>);
-    };
-}
-export declare const Stepper: React.FC<IStepperProps>;
-export {};

package/dist/stories/Stepper.stories.d.ts

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

package/src/components/Stepper.tsx

@@ -1,115 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../constants/uiColors';
-import SelectArrow from './Arrow/SelectArrow';
-import { Button, ButtonTypes } from './Button';
-
-interface IStep {
-  component: React.ReactNode;
-  id: number;
-}
-
-interface IStepperProps {
-  steps: IStep[];
-  finalCTAButton?: {
-    label: string;
-    onClick: (() => void) | (() => Promise<void>) | ((e: any) => Promise<void>);
-  };
-}
-
-export const Stepper: React.FC<IStepperProps> = ({ steps, finalCTAButton }) => {
-  const [currentStep, setCurrentStep] = useState(0);
-
-  const currentComponent = steps[currentStep]?.component;
-
-  const totalSteps = steps.length;
-
-  const onStepChange = (step: number) => {
-    setCurrentStep(step);
-  };
-
-  return (
-    <StepperContainer className="stepper-container">
-      <StepperTop>
-        {Array.from({ length: totalSteps }, (_, i) => (
-          <ProgressIndicator
-            key={i}
-            isActive={i <= currentStep}
-            onClick={() => onStepChange(i)}
-          />
-        ))}
-      </StepperTop>
-
-      <StepperBody>{currentComponent}</StepperBody>
-
-      <StepperFooter>
-        {currentStep > 0 && (
-          <SelectArrow
-            direction="left"
-            onPointerDown={() => onStepChange(Math.max(0, currentStep - 1))}
-          />
-        )}
-
-        {currentStep < totalSteps - 1 && (
-          <SelectArrow
-            direction="right"
-            onPointerDown={() =>
-              onStepChange(Math.min(totalSteps - 1, currentStep + 1))
-            }
-          />
-        )}
-
-        {currentStep === totalSteps - 1 && finalCTAButton && (
-          <Button
-            buttonType={ButtonTypes.RPGUIButton}
-            onPointerDown={() => finalCTAButton.onClick}
-          >
-            {finalCTAButton.label}
-          </Button>
-        )}
-      </StepperFooter>
-    </StepperContainer>
-  );
-};
-
-const StepperContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%; // Ensure the container takes up full height
-`;
-
-const StepperTop = styled.div`
-  flex: 1; // Small top
-
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-
-  margin-bottom: 1rem;
-`;
-
-const StepperBody = styled.div`
-  flex: 8; // Big content space
-`;
-
-const StepperFooter = styled.div`
-  margin-top: 1rem;
-  flex: 1; // Small footer
-
-  display: flex;
-  justify-content: flex-end;
-`;
-
-const ProgressIndicator = styled.div<{ isActive: boolean }>`
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  background-color: ${({ isActive }) =>
-    isActive ? uiColors.orange : uiColors.lightGray};
-  margin: 0 5px;
-  transition: background-color 0.3s;
-  opacity: ${({ isActive }) => (isActive ? 1 : 0.25)};
-  border: 1px solid ${uiColors.raisinBlack};
-  cursor: pointer;
-`;

package/src/stories/Stepper.stories.tsx

@@ -1,48 +0,0 @@
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
-import { RPGUIRoot } from '..';
-import { ArrowBarProps } from '../components/Arrow/SelectArrow';
-import { Stepper } from '../components/Stepper';
-
-const meta: Meta = {
-  title: 'Stepper',
-  component: Stepper,
-};
-
-export default meta;
-
-const Template: Story<ArrowBarProps> = args => (
-  <RPGUIRoot>
-    <Stepper
-      steps={[
-        {
-          component: <div>Step 1</div>,
-          id: 0,
-        },
-        {
-          component: <div>Step 2</div>,
-          id: 1,
-        },
-        {
-          component: <div>Step 3</div>,
-          id: 2,
-        },
-      ]}
-      finalCTAButton={{
-        label: 'Submit',
-        onClick: () => {
-          console.log('Submitting your data');
-        },
-      }}
-    ></Stepper>
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  direction: 'left',
-  onPointerDown: () => {
-    console.log('clicked');
-  },
-};