@rpg-engine/long-bow 0.4.2 → 0.4.4

package/src/components/CraftBook/CraftingRecipe.tsx

@@ -1,161 +1,161 @@
-import {
-  ICraftableItem,
-  IEquipmentSet,
-  IItemContainer,
-  ISkill,
-} from '@rpg-engine/shared';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { countItemFromInventory } from '../../libs/itemCounter';
-import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-
-interface ICraftingRecipeProps {
-  atlasJSON: any;
-  atlasIMG: any;
-  equipmentSet?: IEquipmentSet | null;
-  recipe: ICraftableItem;
-  scale?: number;
-  handleRecipeSelect: () => void;
-  selectedCraftItemKey?: string;
-  inventory?: IItemContainer | null;
-  skills?: ISkill | null;
-}
-
-export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
-  atlasIMG,
-  atlasJSON,
-  equipmentSet,
-  recipe,
-  scale,
-  handleRecipeSelect,
-  selectedCraftItemKey,
-  inventory,
-  skills,
-}) => {
-  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 levelInSkill =
-    (skills?.[
-      (recipe?.minCraftingRequirements?.[0] ?? '') as keyof ISkill
-    ] as any)?.level ?? 1;
-
-  return (
-    <RadioOptionsWrapper>
-      <SpriteAtlasWrapper>
-        <ItemInfoWrapper
-          item={recipe}
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          equipmentSet={equipmentSet}
-          scale={scale}
-        >
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={recipe.texturePath}
-            imgScale={3}
-            grayScale={!recipe.canCraft}
-          />
-        </ItemInfoWrapper>
-      </SpriteAtlasWrapper>
-      <div>
-        <div onPointerUp={recipe.canCraft ? handleRecipeSelect : undefined}>
-          <input
-            className="rpgui-radio"
-            type="radio"
-            value={recipe.name}
-            name="test"
-            disabled={!recipe.canCraft}
-            checked={selectedCraftItemKey === recipe.key}
-            onChange={handleRecipeSelect}
-          />
-          <label style={{ display: 'flex', alignItems: 'center' }}>
-            {modifyString(recipe.name)}
-          </label>
-        </div>
-
-        <MinCraftingRequirementsText levelIsOk={recipe?.levelIsOk ?? false}>
-          {modifyString(`${recipe?.minCraftingRequirements?.[0] ?? ''}`)} lvl{' '}
-          {recipe?.minCraftingRequirements?.[1] ?? 0} ({levelInSkill})
-        </MinCraftingRequirementsText>
-
-        {recipe.ingredients.map((ingredient, index) => {
-          const itemQtyInInventory = !inventory
-            ? 0
-            : countItemFromInventory(ingredient.key, inventory);
-
-          return (
-            <Recipe key={index}>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={ingredient.texturePath}
-                imgScale={1.2}
-              />
-              <Ingredient isQuantityOk={ingredient.qty <= itemQtyInInventory}>
-                {modifyString(ingredient.key)} x{ingredient.qty} (
-                {itemQtyInInventory})
-              </Ingredient>
-            </Recipe>
-          );
-        })}
-      </div>
-    </RadioOptionsWrapper>
-  );
-};
-
-const Ingredient = styled.p<{ isQuantityOk: boolean }>`
-  margin: 0;
-  margin-left: 14px;
-  color: ${({ isQuantityOk }) =>
-    isQuantityOk ? uiColors.lightGreen : uiColors.lightGray} !important;
-`;
-
-const Recipe = styled.div`
-  font-size: 0.6rem;
-  margin-bottom: 3px;
-  display: flex;
-  align-items: center;
-  margin-left: 4px;
-
-  .sprite-from-atlas-img {
-    top: 0px;
-    left: 0px;
-  }
-`;
-
-const SpriteAtlasWrapper = styled.div`
-  margin-right: 40px;
-`;
-
-const RadioOptionsWrapper = styled.div`
-  display: flex;
-  align-items: stretch;
-  margin-bottom: 40px;
-`;
-
-const MinCraftingRequirementsText = styled.p<{ levelIsOk: boolean }>`
-  font-size: 0.6rem !important;
-  margin: 0 5px 0 35px;
-  color: ${({ levelIsOk }) =>
-    levelIsOk ? uiColors.lightGreen : uiColors.lightGray} !important;
-`;
+import {
+  ICraftableItem,
+  IEquipmentSet,
+  IItemContainer,
+  ISkill,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { countItemFromInventory } from '../../libs/itemCounter';
+import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+interface ICraftingRecipeProps {
+  atlasJSON: any;
+  atlasIMG: any;
+  equipmentSet?: IEquipmentSet | null;
+  recipe: ICraftableItem;
+  scale?: number;
+  handleRecipeSelect: () => void;
+  selectedCraftItemKey?: string;
+  inventory?: IItemContainer | null;
+  skills?: ISkill | null;
+}
+
+export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
+  atlasIMG,
+  atlasJSON,
+  equipmentSet,
+  recipe,
+  scale,
+  handleRecipeSelect,
+  selectedCraftItemKey,
+  inventory,
+  skills,
+}) => {
+  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 levelInSkill =
+    (skills?.[
+      (recipe?.minCraftingRequirements?.[0] ?? '') as keyof ISkill
+    ] as any)?.level ?? 1;
+
+  return (
+    <RadioOptionsWrapper>
+      <SpriteAtlasWrapper>
+        <ItemInfoWrapper
+          item={recipe}
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          scale={scale}
+        >
+          <SpriteFromAtlas
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            spriteKey={recipe.texturePath}
+            imgScale={3}
+            grayScale={!recipe.canCraft}
+          />
+        </ItemInfoWrapper>
+      </SpriteAtlasWrapper>
+      <div>
+        <div onPointerUp={recipe.canCraft ? handleRecipeSelect : undefined}>
+          <input
+            className="rpgui-radio"
+            type="radio"
+            value={recipe.name}
+            name="test"
+            disabled={!recipe.canCraft}
+            checked={selectedCraftItemKey === recipe.key}
+            onChange={handleRecipeSelect}
+          />
+          <label style={{ display: 'flex', alignItems: 'center' }}>
+            {modifyString(recipe.name)}
+          </label>
+        </div>
+
+        <MinCraftingRequirementsText levelIsOk={recipe?.levelIsOk ?? false}>
+          {modifyString(`${recipe?.minCraftingRequirements?.[0] ?? ''}`)} lvl{' '}
+          {recipe?.minCraftingRequirements?.[1] ?? 0} ({levelInSkill})
+        </MinCraftingRequirementsText>
+
+        {recipe.ingredients.map((ingredient, index) => {
+          const itemQtyInInventory = !inventory
+            ? 0
+            : countItemFromInventory(ingredient.key, inventory);
+
+          return (
+            <Recipe key={index}>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey={ingredient.texturePath}
+                imgScale={1.2}
+              />
+              <Ingredient isQuantityOk={ingredient.qty <= itemQtyInInventory}>
+                {modifyString(ingredient.key)} x{ingredient.qty} (
+                {itemQtyInInventory})
+              </Ingredient>
+            </Recipe>
+          );
+        })}
+      </div>
+    </RadioOptionsWrapper>
+  );
+};
+
+const Ingredient = styled.p<{ isQuantityOk: boolean }>`
+  margin: 0;
+  margin-left: 14px;
+  color: ${({ isQuantityOk }) =>
+    isQuantityOk ? uiColors.lightGreen : uiColors.lightGray} !important;
+`;
+
+const Recipe = styled.div`
+  font-size: 0.6rem;
+  margin-bottom: 3px;
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+
+  .sprite-from-atlas-img {
+    top: 0px;
+    left: 0px;
+  }
+`;
+
+const SpriteAtlasWrapper = styled.div`
+  margin-right: 40px;
+`;
+
+const RadioOptionsWrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 40px;
+`;
+
+const MinCraftingRequirementsText = styled.p<{ levelIsOk: boolean }>`
+  font-size: 0.6rem !important;
+  margin: 0 5px 0 35px;
+  color: ${({ levelIsOk }) =>
+    levelIsOk ? uiColors.lightGreen : uiColors.lightGray} !important;
+`;

package/src/components/CraftBook/MockItems.ts

@@ -1,101 +1,101 @@
-import { ICraftableItem } from '@rpg-engine/shared';
-import { items } from '../../mocks/itemContainer.mocks';
-
-export const craftableItems: ICraftableItem[] = [
-  {
-    ...items[0],
-    canCraft: false,
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 5,
-        texturePath: 'crafting-resources/leather.png',
-      },
-      {
-        key: 'leather1',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-      {
-        key: 'leather2',
-        name: 'leather',
-        qty: 100,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-    minCraftingRequirements: ['blacksmithing', 4],
-    levelIsOk: true,
-  },
-  {
-    ...items[1],
-    canCraft: true,
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-    minCraftingRequirements: ['blacksmithing', 4],
-    levelIsOk: false,
-  },
-  {
-    ...items[2],
-    canCraft: true,
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-    minCraftingRequirements: ['blacksmithing', 4],
-    levelIsOk: false,
-  },
-  {
-    ...items[3],
-    canCraft: true,
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-    minCraftingRequirements: ['blacksmithing', 4],
-    levelIsOk: false,
-  },
-  {
-    ...items[4],
-    canCraft: true,
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-    minCraftingRequirements: ['blacksmithing', 1],
-    levelIsOk: true,
-  },
-  {
-    ...items[5],
-    canCraft: true,
-    ingredients: [
-      {
-        key: 'leather',
-        name: 'leather',
-        qty: 10,
-        texturePath: 'crafting-resources/leather.png',
-      },
-    ],
-    minCraftingRequirements: ['blacksmithing', 4],
-    levelIsOk: true,
-  },
-];
+import { ICraftableItem } from '@rpg-engine/shared';
+import { items } from '../../mocks/itemContainer.mocks';
+
+export const craftableItems: ICraftableItem[] = [
+  {
+    ...items[0],
+    canCraft: false,
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 5,
+        texturePath: 'crafting-resources/leather.png',
+      },
+      {
+        key: 'leather1',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+      {
+        key: 'leather2',
+        name: 'leather',
+        qty: 100,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+    minCraftingRequirements: ['blacksmithing', 4],
+    levelIsOk: true,
+  },
+  {
+    ...items[1],
+    canCraft: true,
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+    minCraftingRequirements: ['blacksmithing', 4],
+    levelIsOk: false,
+  },
+  {
+    ...items[2],
+    canCraft: true,
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+    minCraftingRequirements: ['blacksmithing', 4],
+    levelIsOk: false,
+  },
+  {
+    ...items[3],
+    canCraft: true,
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+    minCraftingRequirements: ['blacksmithing', 4],
+    levelIsOk: false,
+  },
+  {
+    ...items[4],
+    canCraft: true,
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+    minCraftingRequirements: ['blacksmithing', 1],
+    levelIsOk: true,
+  },
+  {
+    ...items[5],
+    canCraft: true,
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
+    ],
+    minCraftingRequirements: ['blacksmithing', 4],
+    levelIsOk: true,
+  },
+];