@rpg-engine/long-bow 0.4.2 → 0.4.4

package/src/components/CraftBook/CraftBook.tsx

@@ -1,286 +1,286 @@
-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%;
-  }
-`;
+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%;
+  }
+`;