@rpg-engine/long-bow 0.3.88 → 0.3.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.3.88",
+  "version": "0.3.90",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CraftBook/CraftBook.tsx

@@ -238,4 +238,7 @@ const ButtonWrapper = styled.div`
   justify-content: space-around;
   padding-top: 20px;
   width: 100%;
+  button {
+    padding: 0px 50px;
+  }
 `;

package/src/components/DraggableContainer.tsx

@@ -146,6 +146,10 @@ const CloseButton = styled.div`
   color: white;
   z-index: 22;
   font-size: 1.1rem;
+  @media (max-width: 768px) {
+    font-size: 1.3rem;
+    padding: 3px;
+  }
 `;
 
 const TitleContainer = styled.div`

package/src/components/Dropdown.tsx

@@ -28,9 +28,20 @@ export const Dropdown: React.FC<IDropdownProps> = ({
   useEffect(() => {
     const firstOption = options[0];
 
-    if (firstOption && !selectedValue) {
-      setSelectedValue(firstOption.value);
-      setSelectedOption(firstOption.option);
+    if (firstOption) {
+      let change = !selectedValue;
+      if (!change) {
+        change = options.filter((o) => o.value === selectedValue).length < 1;
+      }
+
+      /**
+       * make a selection if there is no selected value already present
+       * or if there is a selected value but its not in new options
+       */
+      if (change) {
+        setSelectedValue(firstOption.value);
+        setSelectedOption(firstOption.option);
+      }
     }
   }, [options]);
 
@@ -45,13 +56,13 @@ export const Dropdown: React.FC<IDropdownProps> = ({
       <DropdownSelect
         id={`dropdown-${dropdownId}`}
         className="rpgui-dropdown-imp rpgui-dropdown-imp-header"
-        onPointerDown={() => setOpened(prev => !prev)}
+        onPointerDown={() => setOpened((prev) => !prev)}
       >
         <label>▼</label> {selectedOption}
       </DropdownSelect>
 
       <DropdownOptions className="rpgui-dropdown-imp" opened={opened}>
-        {options.map(option => {
+        {options.map((option) => {
           return (
             <li
               key={option.id}
@@ -72,7 +83,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 
 const Container = styled.div<{ width: string | undefined }>`
   position: relative;
-  width: ${props => props.width || '100%'};
+  width: ${(props) => props.width || '100%'};
 `;
 
 const DropdownSelect = styled.p`
@@ -85,6 +96,9 @@ const DropdownOptions = styled.ul<{
 }>`
   position: absolute;
   width: 100%;
-  display: ${props => (props.opened ? 'block' : 'none')};
+  display: ${(props) => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
+  @media (max-width: 768px) {
+    padding: 8px 0;
+  }
 `;

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -88,6 +88,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
 
+  const handleSetShortcut = (item: IItem, index: number) => {
+    if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
+      setItemShortcut?.(item.key, index);
+    }
+  };
+
   const onRenderSlots = () => {
     const slots = [];
 
@@ -106,12 +112,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
             if (settingShortcutIndex !== -1) {
               setSettingShortcutIndex(-1);
 
-              if (
-                itemType === ItemType.Consumable ||
-                itemType === ItemType.Tool
-              ) {
-                setItemShortcut?.(item.key, settingShortcutIndex);
-              }
+              handleSetShortcut(item, settingShortcutIndex);
             } else if (onItemClick) onItemClick(item, itemType, containerType);
           }}
           onSelected={(optionId: string, item: IItem) => {
@@ -145,6 +146,9 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           atlasJSON={atlasJSON}
           isSelectingShortcut={settingShortcutIndex !== -1}
           equipmentSet={equipmentSet}
+          setItemShortcut={
+            type === ItemContainerType.Inventory ? handleSetShortcut : undefined
+          }
           isDepotSystem={isDepotSystem}
         />
       );

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -78,6 +78,7 @@ interface IProps {
   isContextMenuDisabled?: boolean;
   isSelectingShortcut?: boolean;
   equipmentSet?: IEquipmentSet | null;
+  setItemShortcut?: (item: IItem, shortcutIndex: number) => void;
   isDepotSystem?: boolean;
 }
 
@@ -104,6 +105,7 @@ export const ItemSlot: React.FC<IProps> = observer(
     dragScale,
     isSelectingShortcut,
     equipmentSet,
+    setItemShortcut,
     isDepotSystem,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
@@ -310,6 +312,18 @@ export const ItemSlot: React.FC<IProps> = observer(
           defaultClassName={item ? 'draggable' : 'empty-slot'}
           scale={dragScale}
           onStop={(e, data) => {
+            const target = e.target as HTMLElement;
+            if (
+              target?.id.includes('shortcutSetter') &&
+              setItemShortcut &&
+              item
+            ) {
+              const index = parseInt(target.id.split('_')[1]);
+              if (!isNaN(index)) {
+                setItemShortcut(item, index);
+              }
+            }
+
             if (wasDragged && item && !isSelectingShortcut) {
               //@ts-ignore
               const classes: string[] = Array.from(e.target?.classList);

package/src/components/Shortcuts/ShortcutsSetter.tsx

@@ -67,12 +67,18 @@ export const ShortcutsSetter: React.FC<ShortcutsSetterProps> = ({
           <Shortcut
             key={i}
             onPointerDown={() => {
+              if (settingShortcutIndex !== -1) setSettingShortcutIndex(-1);
+
               removeShortcut(i);
-              if (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+              if (
+                settingShortcutIndex === -1 &&
+                (!shortcuts[i] || shortcuts[i].type === ShortcutType.None)
+              )
                 setSettingShortcutIndex(i);
             }}
             disabled={settingShortcutIndex !== -1 && settingShortcutIndex !== i}
             isBeingSet={settingShortcutIndex === i}
+            id={`shortcutSetter_${i}`}
           >
             {getContent(i)}
           </Shortcut>

package/src/components/TradingMenu/TradingMenu.tsx

@@ -213,4 +213,7 @@ const ButtonWrapper = styled.div`
   padding-top: 20px;
   width: 100%;
   margin-top: 1rem;
+  button {
+    padding: 0px 50px;
+  }
 `;

package/src/stories/Dropdown.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: Story<IDropdownProps> = args => (
+const Template: Story<IDropdownProps> = (args) => (
   <RPGUIRoot>
     <Dropdown {...args} />
   </RPGUIRoot>