@rpg-engine/long-bow 0.3.94 → 0.3.96

package/src/components/CraftBook/CraftBook.tsx

@@ -1,260 +1,286 @@
-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();
-        }
-      }}
-      scale={scale}
-    >
-      <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>
-                ))}
-              {isShown && isShown.index === index && (
-                <MinCraftingRequirementsText
-                  levelIsOk={option?.levelIsOk ?? false}
-                >
-                  {modifyString(
-                    `${option?.minCraftingRequirements?.[0] ?? ''} ${option
-                      ?.minCraftingRequirements?.[1] ?? ''}`
-                  )}
-                </MinCraftingRequirementsText>
-              )}
-            </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%;
-  button {
-    padding: 0px 50px;
-  }
-`;
-
-const MinCraftingRequirementsText = styled.div<{ levelIsOk: boolean }>`
-  font-size: 0.6rem;
-  font-weight: bold;
-  color: ${({ levelIsOk }) => (levelIsOk ? '#72f100' : 'gray')};
-`;
+import {
+  ICraftableItem,
+  IEquipmentSet,
+  IItemContainer,
+  ISkill,
+  ItemSubType,
+} from '@rpg-engine/shared';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import { InputRadio } from '../InputRadio';
+import { RPGUIContainerTypes } from '../RPGUIContainer';
+import { CraftingRecipe } from './CraftingRecipe';
+
+export interface IItemCraftSelectorProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  onClose: () => void;
+  onSelect: (value: string) => void;
+  onCraftItem: (value: string | undefined) => void;
+  craftablesItems: ICraftableItem[];
+  equipmentSet?: IEquipmentSet | null;
+  inventory?: IItemContainer | null;
+  scale?: number;
+  skills?: ISkill | null;
+  savedSelectedType?: string;
+}
+
+export interface ShowMessage {
+  show: boolean;
+  index: number;
+}
+
+const desktop = {
+  width: 'min(900px, 80%)',
+  height: 'min(700px, 80%)',
+};
+
+const mobileLanscape = {
+  width: '800px',
+  height: '500px',
+};
+
+const mobilePortrait = {
+  width: '500px',
+  height: '700px',
+};
+
+export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
+  atlasIMG,
+  atlasJSON,
+  onClose,
+  onSelect,
+  onCraftItem,
+  craftablesItems,
+  equipmentSet,
+  scale,
+  inventory,
+  skills,
+  savedSelectedType,
+}) => {
+  const [craftItemKey, setCraftItemKey] = useState<string>();
+  const [selectedType, setSelectedType] = useState<string>(
+    savedSelectedType ?? Object.keys(ItemSubType)[0]
+  );
+  const [size, setSize] = useState<{ width: string; height: string }>();
+
+  useEffect(() => {
+    const handleResize = (): void => {
+      if (
+        window.innerWidth < 500 &&
+        size?.width !== mobilePortrait.width &&
+        (!scale || scale < 1)
+      ) {
+        setSize(mobilePortrait);
+      } else if (
+        (!scale || scale < 1) &&
+        size?.width !== mobileLanscape.width
+      ) {
+        setSize(mobileLanscape);
+      } else if (size?.width !== desktop.width) {
+        setSize(desktop);
+      }
+    };
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => window.removeEventListener('resize', handleResize);
+  }, [scale]);
+
+  const renderItemTypes = () => {
+    const itemTypes = ['Suggested', ...Object.keys(ItemSubType)]
+      .filter(type => type !== 'DeadBody')
+      .sort((a, b) => {
+        if (a === 'Suggested') return -1;
+        if (b === 'Suggested') return 1;
+        return a.localeCompare(b);
+      });
+
+    if (window.innerWidth > parseInt(mobilePortrait.width)) {
+      return itemTypes.map(type => {
+        return (
+          <InputRadio
+            key={type}
+            value={type}
+            label={type}
+            name={type}
+            isChecked={selectedType === type}
+            onRadioSelect={value => {
+              setSelectedType(value);
+              onSelect(value);
+            }}
+          />
+        );
+      });
+    }
+
+    const rows: JSX.Element[][] = [[], []];
+
+    itemTypes.forEach((type, index) => {
+      let row = 0;
+
+      if (index % 2 === 1) row = 1;
+
+      rows[row].push(
+        <InputRadio
+          key={type}
+          value={type}
+          label={type}
+          name={type}
+          isChecked={selectedType === type}
+          onRadioSelect={value => {
+            setSelectedType(value);
+            onSelect(value);
+          }}
+        />
+      );
+    });
+
+    return rows.map((row, index) => (
+      <div key={index} style={{ display: 'flex', gap: '10px' }}>
+        {row}
+      </div>
+    ));
+  };
+
+  if (!size) return null;
+
+  return (
+    <DraggableContainer
+      type={RPGUIContainerTypes.Framed}
+      width={size.width}
+      height={size.height}
+      cancelDrag=".inputRadioCraftBook"
+      onCloseButton={() => {
+        if (onClose) {
+          onClose();
+        }
+      }}
+      scale={scale}
+    >
+      <Wrapper>
+        <div style={{ width: '100%' }}>
+          <Title>Craftbook</Title>
+          <Subtitle>Select an item to craft</Subtitle>
+          <hr className="golden" />
+        </div>
+
+        <ContentContainer>
+          <ItemTypes className="inputRadioCraftBook">
+            {renderItemTypes()}
+          </ItemTypes>
+
+          <RadioInputScroller className="inputRadioCraftBook">
+            {craftablesItems?.map(item => (
+              <CraftingRecipe
+                key={item.key}
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                equipmentSet={equipmentSet}
+                recipe={item}
+                scale={scale}
+                handleRecipeSelect={setCraftItemKey.bind(null, item.key)}
+                selectedCraftItemKey={craftItemKey}
+                inventory={inventory}
+                skills={skills}
+              />
+            ))}
+          </RadioInputScroller>
+        </ContentContainer>
+        <ButtonWrapper>
+          <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
+            Cancel
+          </Button>
+          <Button
+            disabled={!craftItemKey}
+            buttonType={ButtonTypes.RPGUIButton}
+            onPointerDown={() => onCraftItem(craftItemKey)}
+          >
+            Craft
+          </Button>
+        </ButtonWrapper>
+      </Wrapper>
+    </DraggableContainer>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`;
+
+const Title = styled.h1`
+  font-size: 0.6rem;
+  color: ${uiColors.yellow} !important;
+`;
+
+const Subtitle = styled.h1`
+  font-size: 0.4rem;
+  color: ${uiColors.yellow} !important;
+`;
+
+const RadioInputScroller = styled.div`
+  padding-left: 15px;
+  padding-top: 10px;
+  margin-top: 1rem;
+  align-items: center;
+  align-items: flex-start;
+  overflow-y: scroll;
+  min-height: 0;
+  flex: 1;
+  margin-left: 10px;
+  -webkit-overflow-scrolling: touch;
+
+  @media (max-width: ${mobilePortrait.width}) {
+    margin-left: 0;
+  }
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+  width: 100%;
+
+  button {
+    padding: 0px 50px;
+    margin: 5px;
+  }
+
+  @media (max-width: ${mobilePortrait.width}) {
+    justify-content: center;
+  }
+`;
+
+const ContentContainer = styled.div`
+  display: flex;
+  width: 100%;
+  min-height: 0;
+  flex: 1;
+
+  @media (max-width: ${mobilePortrait.width}) {
+    flex-direction: column;
+  }
+`;
+
+const ItemTypes = styled.div`
+  display: flex;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  width: max-content;
+  flex-direction: column;
+  padding-right: 5px;
+
+  @media (max-width: ${mobilePortrait.width}) {
+    overflow-x: scroll;
+    overflow-y: hidden;
+    padding-right: 0;
+    width: 100%;
+  }
+`;