@rpg-engine/long-bow 0.5.24 → 0.5.26

package/dist/stories/ItemContainer.stories.d.ts

@@ -5,6 +5,8 @@ declare const meta: Meta;
 export default meta;
 interface ITemplateProps {
     type: ItemContainerType;
+    scale?: number;
 }
 export declare const Inventory: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;
+export declare const InventoryScaledDown: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;
 export declare const Depot: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemContainerProps & ITemplateProps>;

package/package.json

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

package/src/components/Equipment/EquipmentSet.tsx

@@ -162,7 +162,7 @@ export const EquipmentSet: React.FC<IEquipmentSetProps> = ({
 
   return (
     <DraggingProvider>
-      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
       <DraggableContainer
         title={'Equipments'}
         type={RPGUIContainerTypes.Framed}

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

@@ -12,14 +12,18 @@ const OFFSET = CONTAINER_SIZE / 2;
 interface IProps {
   atlasJSON: any;
   atlasIMG: any;
+  scale?: number;
 }
 
 export const DraggedItem = ({
   atlasJSON,
   atlasIMG,
+  scale,
 }: IProps): JSX.Element | null => {
   const { item } = useDragging();
-  const { x, y } = useCursorPosition();
+  const { x, y } = useCursorPosition({
+    scale,
+  });
 
   if (!item) {
     return null;

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

@@ -159,7 +159,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 
   return (
     <DraggingProvider>
-      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} />
+      <DraggedItem atlasIMG={atlasIMG} atlasJSON={atlasJSON} scale={scale} />
       <SlotsContainer
         title={itemContainer.name || 'Container'}
         onClose={onClose}

package/src/components/Spellbook/constants.ts

@@ -5,4 +5,4 @@ export const SHORTCUTS_STORAGE_KEY = 'shortcuts';
 export const defaultShortcut: IShortcut = {
   type: ShortcutType.None,
   payload: null,
-};
+};

package/src/components/shared/ScalableContainer.tsx

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
+
+interface IScalableContainerProps {
+  scale?: number;
+  centralize?: boolean;
+  breakPoint?: string;
+}
+
+export const ScalableContainer = styled.div<IScalableContainerProps>`
+  ${({ centralize = true }) =>
+    centralize &&
+    css`
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    `}
+
+  @media (max-width: ${({ breakPoint }) => breakPoint ?? UI_BREAKPOINT_MOBILE}) {
+    transform: scale(${({ scale }) => scale ?? 0.75});
+  }
+`;

package/src/constants/uiBreakpoints.ts

@@ -0,0 +1,3 @@
+
+export const UI_BREAKPOINT_MOBILE = '950px';
+export const UI_BREAKPOINT_SMALL_LAPTOP = '1400px';

package/src/hooks/useCursorPosition.ts

@@ -1,30 +1,46 @@
+import { GRID_HEIGHT, GRID_WIDTH } from '@rpg-engine/shared';
 import { useEffect, useState } from 'react';
+import { IPosition } from '../types/eventTypes';
 
-type CursorPosition = {
-  x: number;
-  y: number;
-};
+interface ICursorPositionProps {
+  scale?: number;
+}
 
-export const useCursorPosition = (): CursorPosition => {
-  const [position, setPosition] = useState<CursorPosition>({ x: 0, y: 0 });
+export const useCursorPosition = ({ scale = 1 }: ICursorPositionProps): IPosition => {
+  const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 });
 
   const setFromEvent = (e: MouseEvent | TouchEvent) => {
+    let x, y;
+    const viewportCenterX = window.innerWidth / 2 - GRID_WIDTH;
+    const viewportCenterY = window.innerHeight / - GRID_HEIGHT;
+
     if ('touches' in e) {
-      setPosition({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+      x = e.touches[0].clientX;
+      y = e.touches[0].clientY;
     } else {
-      setPosition({ x: e.clientX, y: e.clientY });
+      x = e.clientX;
+      y = e.clientY;
     }
+
+    // Adjusting for the global scale
+    // Assuming the element is centrally located
+    setPosition({
+      x: (x - viewportCenterX) / scale + viewportCenterX,
+      y: (y - viewportCenterY) / scale + viewportCenterY
+    });
   };
 
   useEffect(() => {
     window.addEventListener('mousemove', setFromEvent);
     window.addEventListener('touchmove', setFromEvent);
 
+    console.log("SCALE IS ", scale)
+
     return () => {
       window.removeEventListener('mousemove', setFromEvent);
       window.removeEventListener('touchmove', setFromEvent);
     };
-  }, []);
+  }, [scale]);
 
   return position;
 };

package/src/stories/ItemContainer.stories.tsx

@@ -8,6 +8,8 @@ import {
 import { RPGUIRoot } from '../../src/components/RPGUIRoot';
 import { equipmentSetMock } from '../../src/mocks/equipmentSet.mocks';
 import { itemContainerMock } from '../../src/mocks/itemContainer.mocks';
+import { ScalableContainer } from '../components/shared/ScalableContainer';
+import { UI_BREAKPOINT_SMALL_LAPTOP } from '../constants/uiBreakpoints';
 import { useShortcuts } from '../hooks/useShortcuts';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
@@ -48,9 +50,13 @@ let dropSlot = -1;
 
 interface ITemplateProps {
   type: ItemContainerType;
+  scale?: number;
 }
 
-const Template: Story<IItemContainerProps & ITemplateProps> = ({ type }) => {
+const Template: Story<IItemContainerProps & ITemplateProps> = ({
+  type,
+  scale,
+}) => {
   const mock = itemContainerMock({ name: type });
 
   const [itemContainer, setItemContainer] = useState(mock);
@@ -59,81 +65,93 @@ const Template: Story<IItemContainerProps & ITemplateProps> = ({ type }) => {
     itemContainer: mock,
   });
 
-  return (
-    <RPGUIRoot>
-      <ItemContainer
-        itemContainer={itemContainer}
-        onClose={() => console.log('closing item container')}
-        onMouseOver={onMouseOver}
-        onSelected={onSelected}
-        onItemClick={onItemClick}
-        checkIfItemCanBeMoved={() => allowedToDrop}
-        onItemDragEnd={quantity => {
-          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-
-          if (quantity === 0) {
-            setItemContainer({ ...itemContainer });
-          } else if (allowedToDrop && dropSlot !== -1) {
-            const newContainer = { ...itemContainer };
-
-            if (quantity && dragItem && dragItem.stackQty) {
-              newContainer.slots[dropSlot] = {
+  const coreItemContainer = (
+    <ItemContainer
+      itemContainer={itemContainer}
+      onClose={() => console.log('closing item container')}
+      onMouseOver={onMouseOver}
+      onSelected={onSelected}
+      onItemClick={onItemClick}
+      checkIfItemCanBeMoved={() => allowedToDrop}
+      onItemDragEnd={quantity => {
+        // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+
+        if (quantity === 0) {
+          setItemContainer({ ...itemContainer });
+        } else if (allowedToDrop && dropSlot !== -1) {
+          const newContainer = { ...itemContainer };
+
+          if (quantity && dragItem && dragItem.stackQty) {
+            newContainer.slots[dropSlot] = {
+              ...dragItem,
+              stackQty: quantity + (dropItem?.stackQty || 0),
+            };
+
+            if (dragItem.stackQty - quantity === 0)
+              newContainer.slots[dragSlot] = null;
+            else
+              newContainer.slots[dragSlot] = {
                 ...dragItem,
-                stackQty: quantity + (dropItem?.stackQty || 0),
+                stackQty: dragItem.stackQty - quantity,
               };
-
-              if (dragItem.stackQty - quantity === 0)
-                newContainer.slots[dragSlot] = null;
-              else
-                newContainer.slots[dragSlot] = {
-                  ...dragItem,
-                  stackQty: dragItem.stackQty - quantity,
-                };
-            } else {
-              newContainer.slots[dropSlot] = dragItem;
-              newContainer.slots[dragSlot] = null;
-            }
-            setTimeout(() => {
-              setItemContainer(newContainer);
-            }, 100);
+          } else {
+            newContainer.slots[dropSlot] = dragItem;
+            newContainer.slots[dragSlot] = null;
           }
-
+          setTimeout(() => {
+            setItemContainer(newContainer);
+          }, 100);
+        }
+
+        allowedToDrop = false;
+        dropSlot = -1;
+        dropItem = null;
+        dragItem = null;
+      }}
+      onItemDragStart={(item, slotIndex) => {
+        dragItem = item;
+        dragSlot = slotIndex;
+      }}
+      onItemPlaceDrop={(item, slotIndex) => {
+        // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
+
+        if (!item || (dragItem?.key === item?.key && dragSlot !== slotIndex)) {
+          console.log('allow');
+          allowedToDrop = true;
+          dropSlot = slotIndex;
+          dropItem = item ? item : null;
+        } else {
           allowedToDrop = false;
           dropSlot = -1;
           dropItem = null;
-          dragItem = null;
-        }}
-        onItemDragStart={(item, slotIndex) => {
-          dragItem = item;
-          dragSlot = slotIndex;
-        }}
-        onItemPlaceDrop={(item, slotIndex) => {
-          // THIS IS ONLY LONG-BOW EXAMPLE FOR DRAG AND DROP
-
-          if (
-            !item ||
-            (dragItem?.key === item?.key && dragSlot !== slotIndex)
-          ) {
-            console.log('allow');
-            allowedToDrop = true;
-            dropSlot = slotIndex;
-            dropItem = item ? item : null;
-          } else {
-            allowedToDrop = false;
-            dropSlot = -1;
-            dropItem = null;
-          }
-        }}
-        onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
-        type={type}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        shortcuts={shortcuts}
-        setItemShortcut={setItemShortcut}
-        removeShortcut={removeShortcut}
-        equipmentSet={equipmentSetMock}
-        isDepotSystem
-      />
+        }
+      }}
+      onOutsideDrop={(item, pos) => console.log('drop', item, pos)}
+      type={type}
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      shortcuts={shortcuts}
+      setItemShortcut={setItemShortcut}
+      removeShortcut={removeShortcut}
+      equipmentSet={equipmentSetMock}
+      isDepotSystem
+      scale={scale}
+    />
+  );
+
+  return (
+    <RPGUIRoot>
+      {scale ? (
+        <ScalableContainer
+          scale={scale}
+          centralize={false}
+          breakPoint={UI_BREAKPOINT_SMALL_LAPTOP}
+        >
+          {coreItemContainer}
+        </ScalableContainer>
+      ) : (
+        coreItemContainer
+      )}
     </RPGUIRoot>
   );
 };
@@ -143,6 +161,12 @@ Inventory.args = {
   type: ItemContainerType.Inventory,
 };
 
+export const InventoryScaledDown = Template.bind({});
+InventoryScaledDown.args = {
+  type: ItemContainerType.Inventory,
+  scale: 0.8,
+};
+
 export const Depot = Template.bind({});
 Depot.args = {
   type: ItemContainerType.Depot,