@rpg-engine/long-bow 0.3.43 → 0.3.44

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

@@ -1,10 +1,8 @@
 import { IItem, IItemContainer, ItemContainerType } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { SlotsContainer } from '../../Abstractions/SlotsContainer';
-import { ItemQuantitySelector } from './ItemQuantitySelector';
 
-import { IPosition } from '../../../types/eventTypes';
 import { ItemSlot } from './ItemSlot';
 
 export interface IItemContainerProps {
@@ -15,28 +13,12 @@ export interface IItemContainerProps {
     ItemType: IItem['type'],
     itemContainerType: ItemContainerType | null
   ) => void;
-  onItemDragStart?: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onItemDragEnd?: (quantity?: number) => void;
-  onOutsideDrop?: (item: IItem, position: IPosition) => void;
-  onItemPlaceDrop?: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
   onMouseOver?: (e: any, slotIndex: number, item: IItem | null) => void;
   onSelected?: (optionId: string, item: IItem) => void;
   type: ItemContainerType;
   atlasJSON: any;
   atlasIMG: any;
   disableContextMenu?: boolean;
-  initialPosition?: { x: number; y: number };
 }
 
 export const ItemContainer: React.FC<IItemContainerProps> = ({
@@ -49,21 +31,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   atlasJSON,
   atlasIMG,
   disableContextMenu = false,
-  onItemDragEnd,
-  onItemDragStart,
-  onItemPlaceDrop,
-  onOutsideDrop,
-  checkIfItemCanBeMoved,
-  initialPosition,
-  checkIfItemShouldDragEnd,
-  dragScale,
 }) => {
-  const [quantitySelect, setQuantitySelect] = useState({
-    isOpen: false,
-    maxQuantity: 1,
-    callback: (_quantity: number) => {},
-  });
-
   const onRenderSlots = () => {
     const slots = [];
 
@@ -84,30 +52,6 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
           onSelected={(optionId: string, item: IItem) => {
             if (onSelected) onSelected(optionId, item);
           }}
-          onDragStart={(item, slotIndex, itemContainerType) => {
-            if (onItemDragStart)
-              onItemDragStart(item, slotIndex, itemContainerType);
-          }}
-          onDragEnd={quantity => {
-            if (onItemDragEnd) onItemDragEnd(quantity);
-          }}
-          dragScale={dragScale}
-          checkIfItemCanBeMoved={checkIfItemCanBeMoved}
-          checkIfItemShouldDragEnd={checkIfItemShouldDragEnd}
-          openQuantitySelector={(maxQuantity, callback) => {
-            setQuantitySelect({
-              isOpen: true,
-              maxQuantity,
-              callback,
-            });
-          }}
-          onPlaceDrop={(item, slotIndex, itemContainerType) => {
-            if (onItemPlaceDrop)
-              onItemPlaceDrop(item, slotIndex, itemContainerType);
-          }}
-          onOutsideDrop={(item, position) => {
-            if (onOutsideDrop) onOutsideDrop(item, position);
-          }}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
         />
@@ -117,40 +61,11 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   };
 
   return (
-    <>
-      <SlotsContainer
-        title={itemContainer.name || 'Container'}
-        onClose={onClose}
-        initialPosition={initialPosition}
-      >
-        <ItemsContainer className="item-container-body">
-          {onRenderSlots()}
-        </ItemsContainer>
-      </SlotsContainer>
-      {quantitySelect.isOpen && (
-        <QuantitySelectorContainer>
-          <ItemQuantitySelector
-            quantity={quantitySelect.maxQuantity}
-            onConfirm={quantity => {
-              quantitySelect.callback(quantity);
-              setQuantitySelect({
-                isOpen: false,
-                maxQuantity: 1,
-                callback: () => {},
-              });
-            }}
-            onClose={() => {
-              quantitySelect.callback(-1);
-              setQuantitySelect({
-                isOpen: false,
-                maxQuantity: 1,
-                callback: () => {},
-              });
-            }}
-          />
-        </QuantitySelectorContainer>
-      )}
-    </>
+    <SlotsContainer title={itemContainer.name || 'Container'} onClose={onClose}>
+      <ItemsContainer className="item-container-body">
+        {onRenderSlots()}
+      </ItemsContainer>
+    </SlotsContainer>
   );
 };
 
@@ -160,16 +75,3 @@ const ItemsContainer = styled.div`
   justify-content: center;
   flex-wrap: wrap;
 `;
-
-const QuantitySelectorContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: 100;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5);
-`;

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

@@ -3,18 +3,15 @@ import {
   IItem,
   IItemContainer,
   ItemContainerType,
-  ItemRarities,
   ItemSlotType,
   ItemType,
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useRef, useState } from 'react';
-import Draggable from 'react-draggable';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
 import { uiFonts } from '../../../constants/uiFonts';
-import { IPosition } from '../../../types/eventTypes';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { Ellipsis } from '../../shared/Ellipsis';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
@@ -55,22 +52,6 @@ interface IProps {
     itemContainerType: ItemContainerType | null,
     item: IItem
   ) => void;
-  onDragStart: (
-    item: IItem,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
-  onDragEnd: (quantity?: number) => void;
-  onOutsideDrop?: (item: IItem, position: IPosition) => void;
-  dragScale?: number;
-  checkIfItemCanBeMoved: () => boolean;
-  checkIfItemShouldDragEnd?: () => boolean;
-  openQuantitySelector?: (maxQuantity: number, callback: () => void) => void;
-  onPlaceDrop: (
-    item: IItem | null,
-    slotIndex: number,
-    itemContainerType: ItemContainerType | null
-  ) => void;
   atlasJSON: any;
   atlasIMG: any;
   isContextMenuDisabled?: boolean;
@@ -89,57 +70,39 @@ export const ItemSlot: React.FC<IProps> = observer(
     atlasJSON,
     atlasIMG,
     isContextMenuDisabled = false,
-    onDragEnd,
-    onDragStart,
-    onPlaceDrop,
-    onOutsideDrop: onDrop,
-    checkIfItemCanBeMoved,
-    openQuantitySelector,
-    checkIfItemShouldDragEnd,
-    dragScale,
   }) => {
     const [isTooltipVisible, setTooltipVisible] = useState(false);
 
     const [isContextMenuVisible, setIsContextMenuVisible] = useState(false);
 
-    const [isFocused, setIsFocused] = useState(false);
-    const [wasDragged, setWasDragged] = useState(false);
-    const [dragPosition, setDragPosition] = useState<IPosition>({ x: 0, y: 0 });
-    const [dropPosition, setDropPosition] = useState<IPosition | null>(null);
-    const dragContainer = useRef<HTMLDivElement>(null);
-
     const [contextActions, setContextActions] = useState<IContextMenuItem[]>(
       []
     );
 
     useEffect(() => {
-      setDragPosition({ x: 0, y: 0 });
-      setIsFocused(false);
-
       if (item) {
         setContextActions(generateContextMenu(item, containerType));
       }
     }, [item]);
 
-    useEffect(() => {
-      if (onDrop && item && dropPosition) {
-        onDrop(item, dropPosition);
-      }
-    }, [dropPosition]);
-
     const getStackInfo = (itemId: string, stackQty: number) => {
+      // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+
       const isFractionalStackQty = stackQty % 1 !== 0;
       const isLargerThan999 = stackQty > 999;
 
-      let qtyClassName = 'regular';
-      if (isLargerThan999) qtyClassName = 'small';
-      if (isFractionalStackQty) qtyClassName = 'xsmall';
-
       if (stackQty > 1) {
         return (
           <ItemQtyContainer key={`qty-${itemId}`}>
             <Ellipsis maxLines={1} maxWidth="48px">
-              <ItemQty className={qtyClassName}> {stackQty} </ItemQty>
+              <ItemQty
+                className={
+                  isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'
+                }
+              >
+                {' '}
+                {stackQty}{' '}
+              </ItemQty>
             </Ellipsis>
           </ItemQtyContainer>
         );
@@ -149,7 +112,6 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     const renderItem = (itemToRender: IItem | null) => {
       const element = [];
-
       if (itemToRender?.texturePath) {
         element.push(
           <ErrorBoundary key={itemToRender._id}>
@@ -157,14 +119,7 @@ export const ItemSlot: React.FC<IProps> = observer(
               key={itemToRender._id}
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(
-                {
-                  key: itemToRender.texturePath,
-                  texturePath: itemToRender.texturePath,
-                  stackQty: itemToRender.stackQty || 1,
-                },
-                atlasJSON
-              )}
+              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
               imgScale={3}
             />
           </ErrorBoundary>
@@ -187,21 +142,13 @@ export const ItemSlot: React.FC<IProps> = observer(
         itemToRender.allowedEquipSlotType?.includes(slotSpriteMask!)
       ) {
         const element = [];
-
         element.push(
           <ErrorBoundary key={itemToRender._id}>
             <SpriteFromAtlas
               key={itemToRender._id}
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(
-                {
-                  key: itemToRender.texturePath,
-                  texturePath: itemToRender.texturePath,
-                  stackQty: itemToRender.stackQty || 1,
-                },
-                atlasJSON
-              )}
+              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
               imgScale={3}
             />
           </ErrorBoundary>
@@ -242,144 +189,29 @@ export const ItemSlot: React.FC<IProps> = observer(
       }
     };
 
-    const resetItem = () => {
-      setTooltipVisible(false);
-      setWasDragged(false);
-    };
-
-    const onSuccesfulDrag = (quantity?: number) => {
-      resetItem();
-
-      if (quantity === -1) setDragPosition({ x: 0, y: 0 });
-      else if (item) {
-        onDragEnd(quantity);
-        resetItem();
-      }
-    };
-
     return (
       <Container
-        item={item}
         className="rpgui-icon empty-slot"
-        onMouseUp={() => {
-          const data = item ? item : null;
-          if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
+        onMouseOver={event =>
+          onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
+        }
+        onMouseOut={() => {
+          if (onMouseOut) onMouseOut();
         }}
-        onTouchEnd={e => {
-          const { clientX, clientY } = e.changedTouches[0];
-          const simulatedEvent = new MouseEvent('mouseup', {
-            clientX,
-            clientY,
-            bubbles: true,
-          });
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
+        onClick={() => {
+          setTooltipVisible(false);
+
+          if (item) {
+            if (!isContextMenuDisabled) {
+              setIsContextMenuVisible(!isContextMenuVisible);
+            }
 
-          document
-            .elementFromPoint(clientX, clientY)
-            ?.dispatchEvent(simulatedEvent);
+            onClick(item.type, containerType, item);
+          }
         }}
       >
-        <Draggable
-          defaultClassName={item ? 'draggable' : 'empty-slot'}
-          scale={dragScale}
-          onStop={(e, data) => {
-            if (wasDragged && item) {
-              //@ts-ignore
-              const classes: string[] = Array.from(e.target?.classList);
-
-              const isOutsideDrop =
-                classes.some(elm => {
-                  return elm.includes('rpgui-content');
-                }) || classes.length === 0;
-
-              if (isOutsideDrop) {
-                setDropPosition({
-                  x: data.x,
-                  y: data.y,
-                });
-              }
-
-              setWasDragged(false);
-
-              const target = dragContainer.current;
-              if (!target || !wasDragged) return;
-
-              const style = window.getComputedStyle(target);
-              const matrix = new DOMMatrixReadOnly(style.transform);
-              const x = matrix.m41;
-              const y = matrix.m42;
-
-              setDragPosition({ x, y });
-
-              setTimeout(() => {
-                if (checkIfItemCanBeMoved()) {
-                  if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd())
-                    return;
-
-                  if (
-                    item.stackQty &&
-                    item.stackQty !== 1 &&
-                    openQuantitySelector
-                  )
-                    openQuantitySelector(item.stackQty, onSuccesfulDrag);
-                  else onSuccesfulDrag(item.stackQty);
-                } else {
-                  resetItem();
-                  setIsFocused(false);
-                  setDragPosition({ x: 0, y: 0 });
-                }
-              }, 100);
-            } else if (item) {
-              if (!isContextMenuDisabled)
-                setIsContextMenuVisible(!isContextMenuVisible);
-
-              onClick(item.type, containerType, item);
-            }
-          }}
-          onStart={() => {
-            if (!item) {
-              return;
-            }
-
-            if (onDragStart) {
-              onDragStart(item, slotIndex, containerType);
-            }
-          }}
-          onDrag={(_e, data) => {
-            if (
-              Math.abs(data.x - dragPosition.x) > 5 ||
-              Math.abs(data.y - dragPosition.y) > 5
-            ) {
-              setWasDragged(true);
-              setIsFocused(true);
-            }
-          }}
-          position={dragPosition}
-          cancel=".empty-slot"
-        >
-          <ItemContainer
-            ref={dragContainer}
-            isFocused={isFocused}
-            onMouseOver={event => {
-              onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
-            }}
-            onMouseOut={() => {
-              if (onMouseOut) onMouseOut();
-            }}
-            onMouseEnter={() => {
-              setTooltipVisible(true);
-            }}
-            onMouseLeave={() => {
-              setTooltipVisible(false);
-            }}
-          >
-            {onRenderSlot(item)}
-          </ItemContainer>
-        </Draggable>
-
-        {isTooltipVisible && item && !isFocused && (
-          <ItemTooltip label={item.name} />
-        )}
-
         {!isContextMenuDisabled && isContextMenuVisible && contextActions && (
           <RelativeListMenu
             options={contextActions}
@@ -394,60 +226,31 @@ export const ItemSlot: React.FC<IProps> = observer(
             }}
           />
         )}
+
+        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
+
+        {onRenderSlot(item)}
       </Container>
     );
   }
 );
 
-const rarityColor = (item: IItem | null) => {
-  switch (item?.rarity) {
-    case ItemRarities.Uncommon:
-      return 'rgba(13, 193, 13, 0.6)';
-    case ItemRarities.Rare:
-      return 'rgba(8, 104, 187, 0.6)';
-    case ItemRarities.Epic:
-      return 'rgba(191, 0, 255, 0.6)';
-    case ItemRarities.Legendary:
-      return 'rgba(255, 191, 0,0.6)';
-    default:
-      return 'unset';
-  }
-};
-
-interface ContainerTypes {
-  item: IItem | null;
-}
-
-const Container = styled.div<ContainerTypes>`
+const Container = styled.div`
   margin: 0.1rem;
   .sprite-from-atlas-img {
     position: relative;
     top: 1.5rem;
     left: 1.5rem;
-    border-color: ${({ item }) => rarityColor(item)};
-    box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`} inset, ${({
-  item,
-}) => `0 0 4px 3px ${rarityColor(item)}`};
-    //background-color: ${({ item }) => rarityColor(item)};
   }
   position: relative;
 `;
 
-const ItemContainer = styled.div<{ isFocused?: boolean }>`
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  ${props => props.isFocused && 'z-index: 100; pointer-events: none;'}
-`;
-
 const ItemQtyContainer = styled.div`
   position: relative;
   width: 85%;
   height: 16px;
   top: 25px;
   left: 2px;
-  pointer-events: none;
 
   display: flex;
   justify-content: flex-end;
@@ -460,7 +263,4 @@ const ItemQty = styled.span`
   &.small {
     font-size: ${uiFonts.size.xsmall};
   }
-  &.xsmall {
-    font-size: ${uiFonts.size.xxsmall};
-  }
 `;

package/src/components/NPCDialog/NPCDialog.tsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUIContainer';
+import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
+import pressSpaceGif from './img/space.gif';
 import { NPCDialogText } from './NPCDialogText';
 import {
   IQuestionDialog,
   IQuestionDialogAnswer,
   QuestionDialog,
 } from './QuestionDialog/QuestionDialog';
-import aliceDefaultThumbnail from './img/npcDialog/npcThumbnails/alice.png';
 
 export enum NPCDialogType {
   TextOnly = 'TextOnly',
@@ -33,10 +34,14 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   questions,
   answers,
 }) => {
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+
   return (
     <RPGUIContainer
       type={RPGUIContainerTypes.FramedGold}
-      width={isQuestionDialog ? '600px' : '80%'}
+      width={isQuestionDialog ? '600px' : '50%'}
       height={'180px'}
     >
       {isQuestionDialog && questions && answers ? (
@@ -67,7 +72,8 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
             >
               <NPCDialogText
-                type={type}
+                onStartStep={() => setShowGoNextIndicator(false)}
+                onEndStep={() => setShowGoNextIndicator(true)}
                 text={text || 'No text provided.'}
                 onClose={() => {
                   if (onClose) {
@@ -82,6 +88,12 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               </ThumbnailContainer>
             )}
           </Container>
+          {showGoNextIndicator && (
+            <PressSpaceIndicator
+              right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
+              src={pressSpaceGif}
+            />
+          )}
         </>
       )}
     </RPGUIContainer>
@@ -119,3 +131,15 @@ const NPCThumbnail = styled.img`
   height: 128px;
   width: 128px;
 `;
+
+interface IPressSpaceIndicatorProps {
+  right: string;
+}
+
+const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
+  position: absolute;
+  right: ${({ right }) => right};
+  bottom: 1rem;
+  height: 20.7px;
+  image-rendering: -webkit-optimize-contrast;
+`;