@rpg-engine/long-bow 0.3.77 → 0.3.78

package/src/components/CraftBook/CraftBook.tsx

@@ -1,227 +1,240 @@
-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 => {
-      if (key === 'DeadBody') {
-        return; // we can't craft crafting resouces...
-      }
-
-      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 = (value: string) => {
-    setCraftItem(value);
-  };
-
-  return (
-    <DraggableContainer
-      type={RPGUIContainerTypes.Framed}
-      width="500px"
-      cancelDrag=".inputRadioCraftBook"
-      onCloseButton={() => {
-        if (onClose) {
-          onClose();
-        }
-      }}
-    >
-      <div style={{ width: '100%' }}>
-        <Title>{'Craftbook'}</Title>
-        <Subtitle>{'Select an item to craft'}</Subtitle>
-        <hr className="golden" />
-      </div>
-      <Dropdown
-        options={getDropdownOptions()}
-        onChange={value => onSelect(value)}
-      />
-      <RadioInputScroller className="inputRadioCraftBook">
-        {craftablesItems?.map((option, index) => (
-          <RadioOptionsWrapper key={index}>
-            <SpriteAtlasWrapper>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={option.texturePath}
-                imgScale={3}
-                grayScale={!option.canCraft}
-              />
-            </SpriteAtlasWrapper>
-            <div>
-              <div onPointerDown={() => handleClick(option.key)}>
-                <input
-                  className="rpgui-radio"
-                  type="radio"
-                  value={option.name}
-                  name="test"
-                  disabled={!option.canCraft}
-                  checked={craftItem === option.key}
-                  onChange={() => handleClick(option.key)}
-                />
-                <label
-                  onPointerDown={() => {
-                    handleClick(option.key);
-                  }}
-                  onTouchEnd={() => {
-                    setIsShown({ show: true, index: index });
-                  }}
-                  style={{ display: 'flex', alignItems: 'center' }}
-                  onMouseEnter={() => setIsShown({ show: true, index: index })}
-                  onMouseLeave={() => setIsShown({ show: false, index: index })}
-                >
-                  {modifyString(option.name)}
-                </label>
-              </div>
-
-              {isShown &&
-                isShown.index === index &&
-                option.ingredients.map((option, index) => (
-                  <Recipes key={index}>
-                    <SpriteFromAtlas
-                      atlasIMG={atlasIMG}
-                      atlasJSON={atlasJSON}
-                      spriteKey={option.texturePath}
-                      imgScale={1}
-                    />
-                    <StyledItem>
-                      {modifyString(option.key)} ({option.qty}x)
-                    </StyledItem>
-                  </Recipes>
-                ))}
-            </div>
-          </RadioOptionsWrapper>
-        ))}
-      </RadioInputScroller>
-      <ButtonWrapper>
-        <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
-          Cancel
-        </Button>
-        <Button
-          buttonType={ButtonTypes.RPGUIButton}
-          onPointerDown={() => 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;
-  -webkit-overflow-scrolling: touch;
-`;
-
-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%;
-`;
+import { ICraftableItem, IEquipmentSet, 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 { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+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[];
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+}
+
+export interface ShowMessage {
+  show: boolean;
+  index: number;
+}
+
+export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  onClose,
+  onSelect,
+  onCraftItem,
+  craftablesItems,
+  equipmentSet,
+  scale,
+}) => {
+  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 => {
+      if (key === 'DeadBody') {
+        return; // we can't craft crafting resouces...
+      }
+
+      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 = (value: string) => {
+    setCraftItem(value);
+  };
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width="500px"
+      cancelDrag=".inputRadioCraftBook"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+    >
+      <div style={{ width: '100%' }}>
+        <Title>Craftbook</Title>
+        <Subtitle>Select an item to craft</Subtitle>
+        <hr className="golden" />
+      </div>
+      <Dropdown
+        options={getDropdownOptions()}
+        onChange={value => onSelect(value)}
+      />
+      <RadioInputScroller className="inputRadioCraftBook">
+        {craftablesItems?.map((option, index) => (
+          <RadioOptionsWrapper key={index}>
+            <SpriteAtlasWrapper>
+              <ItemInfoWrapper
+                item={option}
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                equipmentSet={equipmentSet}
+                scale={scale}
+              >
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey={option.texturePath}
+                  imgScale={3}
+                  grayScale={!option.canCraft}
+                />
+              </ItemInfoWrapper>
+            </SpriteAtlasWrapper>
+            <div>
+              <div onPointerDown={() => handleClick(option.key)}>
+                <input
+                  className="rpgui-radio"
+                  type="radio"
+                  value={option.name}
+                  name="test"
+                  disabled={!option.canCraft}
+                  checked={craftItem === option.key}
+                  onChange={() => handleClick(option.key)}
+                />
+                <label
+                  onPointerDown={() => {
+                    handleClick(option.key);
+                  }}
+                  onTouchEnd={() => {
+                    setIsShown({ show: true, index: index });
+                  }}
+                  style={{ display: 'flex', alignItems: 'center' }}
+                  onMouseEnter={() => setIsShown({ show: true, index: index })}
+                  onMouseLeave={() => setIsShown({ show: false, index: index })}
+                >
+                  {modifyString(option.name)}
+                </label>
+              </div>
+
+              {isShown &&
+                isShown.index === index &&
+                option.ingredients.map((option, index) => (
+                  <Recipes key={index}>
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey={option.texturePath}
+                      imgScale={1}
+                    />
+                    <StyledItem>
+                      {modifyString(option.key)} ({option.qty}x)
+                    </StyledItem>
+                  </Recipes>
+                ))}
+            </div>
+          </RadioOptionsWrapper>
+        ))}
+      </RadioInputScroller>
+      <ButtonWrapper>
+        <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
+          Cancel
+        </Button>
+        <Button
+          buttonType={ButtonTypes.RPGUIButton}
+          onPointerDown={() => 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;
+  -webkit-overflow-scrolling: touch;
+`;
+
+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%;
+`;