@rpg-engine/long-bow 0.6.1 → 0.6.2

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

@@ -0,0 +1,5 @@
+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/package.json

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

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

@@ -1,44 +1,48 @@
+import { IItem } from '@rpg-engine/shared';
 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;
+  item: IItem;
 }
 
-export const onRenderGems = (itemId: string, gemQty: number) => {
-  let qtyClassName = 'small';
-  if (gemQty <= 2) {
-    qtyClassName = 'regular';
-  }
+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
-        itemId={itemId}
-        gemQty={gemQty}
-        qtyClassName={qtyClassName}
-      />
-    );
+    return <ItemSlotQty item={item} />;
   }
   return undefined;
 };
 
-export const ItemSlotQty = ({
-  itemId,
-  gemQty,
-  qtyClassName,
-}: IProps): JSX.Element => {
-  const gemArray = Array.from({ length: gemQty }, () => '🔶');
+export const ItemSlotQty = ({ item }: IProps): JSX.Element => {
+  console.log(item.attachedGems);
+
+  const itemId = item._id;
 
   return (
     <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
-      <Ellipsis maxLines={1} maxWidth="48px">
-        <ItemQty className={qtyClassName}>{gemArray.join('')}</ItemQty>
-      </Ellipsis>
+      {item.attachedGems?.map((gem, index) => (
+        <Gem
+          key={`${itemId}-gem-${index}`}
+          color={gemColors[gem.key] || defaultColor}
+        />
+      ))}
     </ItemQtyContainer>
   );
 };
@@ -47,18 +51,30 @@ const ItemQtyContainer = styled.div`
   position: relative;
   width: 85%;
   height: 16px;
-  top: 25px;
-  left: 5px;
+  top: 26px;
+  left: -2px;
   pointer-events: none;
-
+  transform: scale(0.8);
   display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.8;
 `;
 
-const ItemQty = styled.span`
-  &.regular {
-    font-size: ${uiFonts.size.small};
-  }
-  &.small {
-    font-size: ${uiFonts.size.xsmall};
+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

@@ -36,9 +36,7 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
   };
 
   const renderGems = (item: IItem) => {
-    return (
-      item.attachedGems && onRenderGems(item._id, item.attachedGems.length)
-    );
+    return item.attachedGems && onRenderGems(item);
   };
 
   const renderItem = (item: IItem | null) => {

package/src/components/Stepper.tsx

@@ -0,0 +1,115 @@
+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/components/TradingMenu/TradingMenu.tsx

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

package/src/index.tsx

@@ -40,6 +40,7 @@ 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

@@ -57,8 +57,8 @@ export const items: IItem[] = [
     attachedGems: [
       {
         gemEntityEffectsAdd: ['poison'],
-        key: 'emerald-gem',
-        name: 'Emerald Gem',
+        key: 'ruby-gem',
+        name: 'Ruby Gem',
         gemStatBuff: {
           attack: 5,
           defense: 4,
@@ -66,8 +66,8 @@ export const items: IItem[] = [
       },
       {
         gemEntityEffectsAdd: ['poison'],
-        key: 'emerald-gem',
-        name: 'Emerald Gem',
+        key: 'misty-quartz-gem',
+        name: 'Misty Quartz Gem',
         gemStatBuff: {
           attack: 5,
           defense: 4,
@@ -75,8 +75,8 @@ export const items: IItem[] = [
       },
       {
         gemEntityEffectsAdd: ['poison'],
-        key: 'emerald-gem',
-        name: 'Emerald Gem',
+        key: 'coral-reef-gem',
+        name: 'Coral Reef Gem',
         gemStatBuff: {
           attack: 5,
           defense: 4,

package/src/stories/Stepper.stories.tsx

@@ -0,0 +1,48 @@
+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');
+  },
+};