@rpg-engine/long-bow 0.2.81 → 0.2.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.81",
+  "version": "0.2.86",
   "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.41",
+    "@rpg-engine/shared": "^0.6.40",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "is-mobile": "^3.1.1",

package/src/components/CraftBook/CraftBook.tsx

@@ -70,12 +70,8 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     return name;
   };
 
-  const handleClick = () => {
-    let element = document.querySelector(
-      `input[name='test']:checked`
-    ) as HTMLInputElement;
-    const elementValue = element.value;
-    setCraftItem(elementValue);
+  const handleClick = (value: string) => {
+    setCraftItem(value);
   };
 
   return (
@@ -117,9 +113,11 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
                 value={option.name}
                 name="test"
                 disabled={!option.canCraft}
+                checked={craftItem === option.key}
+                onChange={() => handleClick(option.key)}
               />
               <label
-                onClick={handleClick}
+                onClick={() => handleClick(option.key)}
                 style={{ display: 'flex', alignItems: 'center' }}
                 onMouseEnter={() => setIsShown({ show: true, index: index })}
                 onMouseLeave={() => setIsShown({ show: false, index: index })}

package/src/components/CraftBook/MockItems.ts

@@ -6,38 +6,41 @@ export const craftableItems: ICraftableItem[] = [
     name: 'Bandana',
     canCraft: true,
     texturePath: 'accessories/bandana.png',
-    ingredients: [ {
-      key: "leather",
-      name: "leather",
-      qty: 10,
-      texturePath: "crafting-resources/leather.png",
-    }     
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
     ],
   },
   {
-    key: 'bandana',
+    key: 'bandana1',
     name: 'Bandana',
     canCraft: true,
     texturePath: 'accessories/bandana.png',
-    ingredients: [ {
-      key: "leather",
-      name: "leather",
-      qty: 10,
-      texturePath: "crafting-resources/leather.png",
-    }     
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
     ],
   },
   {
-    key: 'bandana',
+    key: 'bandana2',
     name: 'Bandana',
     canCraft: true,
     texturePath: 'accessories/bandana.png',
-    ingredients: [ {
-      key: "leather",
-      name: "leather",
-      qty: 10,
-      texturePath: "crafting-resources/leather.png",
-    }     
+    ingredients: [
+      {
+        key: 'leather',
+        name: 'leather',
+        qty: 10,
+        texturePath: 'crafting-resources/leather.png',
+      },
     ],
   },
 ];

package/src/components/ListMenu.tsx

@@ -26,7 +26,8 @@ export const ListMenu: React.FC<IListMenuProps> = ({
         {options.map((params, index) => (
           <ListElement
             key={params?.id || index}
-            onClick={() => {
+            onClick={(e: any) => {
+              e.stopPropagation();
               onSelected(params?.id);
             }}
           >