@rpg-engine/long-bow 0.2.54 → 0.2.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.54",
+  "version": "0.2.56",
   "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.5.82",
+    "@rpg-engine/shared": "^0.5.88",
     "dayjs": "^1.11.2",
     "fs-extra": "^10.1.0",
     "lodash": "^4.17.21",

package/src/components/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
-import { _RPGUI } from './RPGUIRoot';
 
 export interface IOptionsProps {
   id: number;
@@ -22,16 +22,17 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   const dropdownId = uuidv4();
 
   const [selectedValue, setSelectedValue] = useState<string>('');
+  const [selectedOption, setSelectedOption] = useState<string>('');
+  const [opened, setOpened] = useState<boolean>(false);
 
   useEffect(() => {
-    const element = document.getElementById(`rpgui-dropdown-${dropdownId}`);
-    const dropdownValue = _RPGUI.get_value(element);
-    setSelectedValue(dropdownValue);
+    const firstOption = options[0];
 
-    element?.addEventListener('change', (event: any) => {
-      setSelectedValue(event?.target.value);
-    });
-  }, []);
+    if (firstOption) {
+      setSelectedValue(firstOption.value);
+      setSelectedOption(firstOption.option);
+    }
+  }, [options]);
 
   useEffect(() => {
     if (selectedValue) {
@@ -40,18 +41,50 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   }, [selectedValue]);
 
   return (
-    <select
-      id={`rpgui-dropdown-${dropdownId}`}
-      style={{ width: width }}
-      className="rpgui-dropdown"
-    >
-      {options.map(option => {
-        return (
-          <option key={option.id} value={option.value}>
-            {option.option}
-          </option>
-        );
-      })}
-    </select>
+    <Container onMouseLeave={() => setOpened(false)} width={width}>
+      <DropdownSelect
+        id={`dropdown-${dropdownId}`}
+        className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
+        onClick={() => setOpened(prev => !prev)}
+      >
+        <label>▼</label> {selectedOption}
+      </DropdownSelect>
+
+      <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
+        {options.map(option => {
+          return (
+            <li
+              key={option.id}
+              onClick={() => {
+                setSelectedValue(option.value);
+                setSelectedOption(option.option);
+                setOpened(false);
+              }}
+            >
+              {option.option}
+            </li>
+          );
+        })}
+      </DropdownOptions>
+    </Container>
   );
 };
+
+const Container = styled.div<{ width: string | undefined }>`
+  position: relative;
+  width: ${props => props.width || '100%'};
+`;
+
+const DropdownSelect = styled.p`
+  width: 100%;
+  box-sizing: border-box;
+`;
+
+const DropdownOptions = styled.ul<{
+  opened: boolean;
+}>`
+  position: absolute;
+  width: 100%;
+  display: ${props => (props.opened ? 'block' : 'none')};
+  box-sizing: border-box;
+`;

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -49,9 +49,9 @@ export const generateContextMenu = (
           ActionsForInventory.Consumable
         );
         break;
-      case ItemType.CraftMaterial:
+      case ItemType.CraftingResource:
         contextActionMenu = generateContextMenuListOptions(
-          ActionsForInventory.CraftMaterial
+          ActionsForInventory.CraftingResource
         );
         break;
       case ItemType.Tool:
@@ -96,9 +96,9 @@ export const generateContextMenu = (
           ActionsForLoot.Consumable
         );
         break;
-      case ItemType.CraftMaterial:
+      case ItemType.CraftingResource:
         contextActionMenu = generateContextMenuListOptions(
-          ActionsForLoot.CraftMaterial
+          ActionsForLoot.CraftingResource
         );
         break;
       case ItemType.Tool:
@@ -126,9 +126,9 @@ export const generateContextMenu = (
           ActionsForMapContainer.Consumable
         );
         break;
-      case ItemType.CraftMaterial:
+      case ItemType.CraftingResource:
         contextActionMenu = generateContextMenuListOptions(
-          ActionsForMapContainer.CraftMaterial
+          ActionsForMapContainer.CraftingResource
         );
         break;
       case ItemType.Tool:

package/src/components/SkillsContainer.tsx

@@ -42,7 +42,7 @@ const skillProps = {
     values: {
       fishing: 'foods/fish.png',
       mining: 'crafting-resources/iron-ingot.png',
-      lumberjacking: 'crafting-resources/greater-wood-log.png',
+      lumberjacking: 'crafting-resources/greater-wooden-log.png',
       cooking: 'foods/chickens-meat.png',
       alchemy: 'potions/greater-mana-potion.png',
     },