@rpg-engine/long-bow 0.2.67 → 0.2.68

package/dist/stories/CraftBook.stories.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.67",
+  "version": "0.2.68",
   "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.6.21",
+    "@rpg-engine/shared": "^0.6.27",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/CraftBook/CraftBook.tsx

@@ -0,0 +1,217 @@
+import { ICraftableItem, ItemSubType } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IItemCraftSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  onClose: () => void;
+  onSelect: (value: string) => void;
+  onCraftItem: (value: string | undefined) => void;
+  craftablesItems: ICraftableItem[];
+}
+
+export interface ShowMessage {
+  show: boolean;
+  index: number;
+}
+
+export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  onClose,
+  onSelect,
+  onCraftItem,
+  craftablesItems,
+}) => {
+  let optionsId: number = 0;
+  const [isShown, setIsShown] = useState<ShowMessage>({
+    show: false,
+    index: 200,
+  });
+  const [craftItem, setCraftItem] = useState<string>();
+
+  const getDropdownOptions = () => {
+    const options: IOptionsProps[] = [];
+
+    Object.keys(ItemSubType).forEach(key => {
+      options.push({
+        id: optionsId,
+        value: key,
+        option: key,
+      });
+      optionsId += 1;
+    });
+
+    return options;
+  };
+
+  const modifyString = (str: string) => {
+    // Split the string by "/" and "."
+    let parts = str.split('/');
+    let fileName = parts[parts.length - 1];
+    parts = fileName.split('.');
+    let name = parts[0];
+
+    // Replace all occurrences of "-" with " "
+    name = name.replace(/-/g, ' ');
+
+    // Uppercase the first word
+    let words = name.split(' ');
+    let firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
+    let modifiedWords = [firstWord].concat(words.slice(1));
+    name = modifiedWords.join(' ');
+
+    return name;
+  };
+
+  const handleClick = () => {
+    let element = document.querySelector(
+      `input[name='test']:checked`
+    ) as HTMLInputElement;
+    const elementValue = element.value;
+    setCraftItem(elementValue);
+  };
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".equipment-container-body .arrow-selector"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>{'Harvesting instruments'}</Title>
+        <Subtitle>{'Use the tool, you need it'}</Subtitle>
+        <hr className="golden" />
+      </div>
+      <Dropdown
+        options={getDropdownOptions()}
+        onChange={value => onSelect(value)}
+      />
+      <RadioInputScroller>
+        {craftablesItems?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={option.key}
+                imgScale={3}
+                grayScale={!option.canCraft}
+              />
+            </SpriteAtlasWrapper>
+            <div>
+              <input
+                className="rpgui-radio"
+                type="radio"
+                value={option.name}
+                name="test"
+                disabled={!option.canCraft}
+              />
+              <label
+                onClick={handleClick}
+                style={{ display: 'flex', alignItems: 'center' }}
+                onMouseEnter={() => setIsShown({ show: true, index: index })}
+                onMouseLeave={() => setIsShown({ show: false, index: index })}
+              >
+                {modifyString(option.name)}
+              </label>
+
+              {isShown &&
+                isShown.index === index &&
+                option.ingredients.map((option, index) => (
+                  <Recipes key={index}>
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey={`${option.key}`}
+                      imgScale={1}
+                    />
+                    <StyledItem>
+                      {modifyString(option.key)} ({option.qty}x)
+                    </StyledItem>
+                  </Recipes>
+                ))}
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button buttonType={ButtonTypes.RPGUIButton} onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onClick={() => onCraftItem(craftItem)}
+        >
+          Craft
+        </Button>
+      </ButtonWrapper>
+    </DraggableContainer>
+  );
+};
+
+const StyledItem = styled.div`
+  margin-left: 10px;
+`;
+
+const Recipes = styled.div`
+  font-size: 0.6rem;
+  color: yellow !important;
+  margin-bottom: 3px;
+  display: flex;
+  align-items: center;
+
+  .sprite-from-atlas-img {
+    top: 0px;
+    left: 0px;
+  }
+`;
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: yellow !important;
+`;
+const Subtitle = styled.h1`
+  font-size: 0.4rem;
+  color: yellow !important;
+`;
+
+const RadioInputScroller = styled.div`
+  padding-left: 15px;
+  padding-top: 10px;
+  width: 100%;
+  margin-top: 1rem;
+  align-items: center;
+  margin-left: 20px;
+  align-items: flex-start;
+  overflow-y: scroll;
+  height: 360px;
+`;
+
+const SpriteAtlasWrapper = styled.div`
+  margin-right: 40px;
+`;
+
+const RadioOptionsWrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 40px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  padding-top: 20px;
+  width: 100%;
+`;

package/src/components/CraftBook/MockItems.ts

@@ -0,0 +1,41 @@
+import { ICraftableItem } from "@rpg-engine/shared"
+
+export const craftableItems: ICraftableItem[] = [
+    {
+
+     canCraft: true,
+     key: 'axes/frost-double-axe.png',
+     name: 'rost-double-axe',
+     ingredients: [
+        {key: "crafting-resources/blue-sapphire.png", qty: 10},
+         ]
+     },
+     {
+
+      canCraft: true,
+      key: 'axes/frost-double-axe.png',
+      name: 'rost-double-axe',
+      ingredients: [
+         {key: "crafting-resources/blue-sapphire.png", qty: 10},
+          ]
+      },
+      {
+
+        canCraft: true,
+        key: 'axes/frost-double-axe.png',
+        name: 'rost-double-axe',
+        ingredients: [
+           {key: "crafting-resources/blue-sapphire.png", qty: 10},
+            ]
+        } ,   {
+
+          canCraft: true,
+          key: 'axes/frost-double-axe.png',
+          name: 'rost-double-axe',
+          ingredients: [
+             {key: "crafting-resources/blue-sapphire.png", qty: 10},
+              ]
+          },
+
+   
+    ]

package/src/components/SkillsContainer.tsx

@@ -67,6 +67,7 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
     for (const [key, value] of Object.entries(skillCategory.values)) {
       //@ts-ignore
       const skillDetails = (skill[key] as unknown) as ISkillDetails;
+   
 
       output.push(
         <SkillProgressBar

package/src/components/itemSelector/ItemSelector.tsx

@@ -7,7 +7,7 @@ import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 export interface IOptionsItemSelectorProps {
   name: string;
-  description: string;
+  description?: string;
   imageKey: string;
 }
 
@@ -27,6 +27,7 @@ export const ItemSelector: React.FC<IItemSelectorProps> = ({
   onSelect,
 }) => {
   const [selectedValue, setSelectedValue] = useState<string>();
+
   const handleClick = () => {
     let element = document.querySelector(
       `input[name='test']:checked`
@@ -56,6 +57,7 @@ export const ItemSelector: React.FC<IItemSelectorProps> = ({
         <Subtitle>{'Use the tool, you need it'}</Subtitle>
         <hr className="golden" />
       </div>
+
       <RadioInputScroller>
         {options?.map((option, index) => (
           <RadioOptionsWrapper key={index}>
@@ -105,6 +107,8 @@ const Subtitle = styled.h1`
 `;
 
 const RadioInputScroller = styled.div`
+  padding-left: 15px;
+  padding-top: 10px;
   width: 100%;
   margin-top: 1rem;
   align-items: center;

package/src/index.tsx

@@ -2,6 +2,7 @@ export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
 export * from './components/CheckButton';
+export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
 export * from './components/DropdownSelectorContainer';
@@ -10,6 +11,7 @@ export * from './components/HistoryDialog';
 export * from './components/Input';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
+export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -18,17 +20,16 @@ export * from './components/ProgressBar';
 export * from './components/PropertySelect/PropertySelect';
 export * from './components/QuestInfo/QuestInfo';
 export * from './components/QuestList';
-export * from './components/RPGUIContainer';
-export * from './components/RPGUIRoot';
 export * from './components/RadioButton';
 export * from './components/RangeSlider';
+export * from './components/RPGUIContainer';
+export * from './components/RPGUIRoot';
+export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';
 export * from './components/Truncate';
-export * from './components/itemSelector/ItemSelector';
-export * from './components/shared/SpriteFromAtlas';
 export * from './components/typography/DynamicText';
 export { useEventListener } from './hooks/useEventListener';

package/src/stories/CraftBook.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+import { CraftBook } from '../components/CraftBook/CraftBook';
+import { craftableItems } from '../components/CraftBook/MockItems';
+import atlasJSON from '../mocks/atlas/items/items.json';
+import atlasIMG from '../mocks/atlas/items/items.png';
+
+const meta: Meta = {
+  title: 'Craft Book',
+  component: CraftBook,
+};
+
+export default meta;
+
+const Template: Story = args => (
+  <RPGUIRoot>
+    <CraftBook
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      onSelect={onSelect}
+      onClose={() => console.log('closing Equipment Set Container')}
+      craftablesItems={craftableItems}
+      onCraftItem={onCraftItem}
+      {...args}
+    />
+  </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const onCraftItem = (value: string | undefined) => {
+  console.log('Craft', value);
+};
+
+const onSelect = (value: string) => {
+  console.log('Story package', value);
+};
+
+Default.args = {};