@rpg-engine/long-bow 0.3.44 → 0.3.45

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

@@ -3,15 +3,18 @@ import {
   IItem,
   IItemContainer,
   ItemContainerType,
+  ItemRarities,
   ItemSlotType,
   ItemType,
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import Draggable from 'react-draggable';
 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';
@@ -52,6 +55,22 @@ 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;
@@ -70,39 +89,57 @@ 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]);
 
-    const getStackInfo = (itemId: string, stackQty: number) => {
-      // if (itemToRender?.isStackable && itemToRender?.stackQty) {
+    useEffect(() => {
+      if (onDrop && item && dropPosition) {
+        onDrop(item, dropPosition);
+      }
+    }, [dropPosition]);
 
+    const getStackInfo = (itemId: string, stackQty: number) => {
       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={
-                  isFractionalStackQty || isLargerThan999 ? 'small' : 'regular'
-                }
-              >
-                {' '}
-                {stackQty}{' '}
-              </ItemQty>
+              <ItemQty className={qtyClassName}> {stackQty} </ItemQty>
             </Ellipsis>
           </ItemQtyContainer>
         );
@@ -112,6 +149,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     const renderItem = (itemToRender: IItem | null) => {
       const element = [];
+
       if (itemToRender?.texturePath) {
         element.push(
           <ErrorBoundary key={itemToRender._id}>
@@ -119,7 +157,14 @@ export const ItemSlot: React.FC<IProps> = observer(
               key={itemToRender._id}
               atlasIMG={atlasIMG}
               atlasJSON={atlasJSON}
-              spriteKey={getItemTextureKeyPath(itemToRender, atlasJSON)}
+              spriteKey={getItemTextureKeyPath(
+                {
+                  key: itemToRender.texturePath,
+                  texturePath: itemToRender.texturePath,
+                  stackQty: itemToRender.stackQty || 1,
+                },
+                atlasJSON
+              )}
               imgScale={3}
             />
           </ErrorBoundary>
@@ -142,13 +187,21 @@ 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(itemToRender, atlasJSON)}
+              spriteKey={getItemTextureKeyPath(
+                {
+                  key: itemToRender.texturePath,
+                  texturePath: itemToRender.texturePath,
+                  stackQty: itemToRender.stackQty || 1,
+                },
+                atlasJSON
+              )}
               imgScale={3}
             />
           </ErrorBoundary>
@@ -189,29 +242,144 @@ 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"
-        onMouseOver={event =>
-          onMouseOver(event, slotIndex, item, event.clientX, event.clientY)
-        }
-        onMouseOut={() => {
-          if (onMouseOut) onMouseOut();
+        onMouseUp={() => {
+          const data = item ? item : null;
+          if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
         }}
-        onMouseEnter={() => setTooltipVisible(true)}
-        onMouseLeave={() => setTooltipVisible(false)}
-        onClick={() => {
-          setTooltipVisible(false);
-
-          if (item) {
-            if (!isContextMenuDisabled) {
-              setIsContextMenuVisible(!isContextMenuVisible);
-            }
+        onTouchEnd={e => {
+          const { clientX, clientY } = e.changedTouches[0];
+          const simulatedEvent = new MouseEvent('mouseup', {
+            clientX,
+            clientY,
+            bubbles: true,
+          });
 
-            onClick(item.type, containerType, item);
-          }
+          document
+            .elementFromPoint(clientX, clientY)
+            ?.dispatchEvent(simulatedEvent);
         }}
       >
+        <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}
@@ -226,31 +394,60 @@ export const ItemSlot: React.FC<IProps> = observer(
             }}
           />
         )}
-
-        {isTooltipVisible && item && <ItemTooltip label={item.name} />}
-
-        {onRenderSlot(item)}
       </Container>
     );
   }
 );
 
-const Container = styled.div`
+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>`
   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;
@@ -263,4 +460,7 @@ const ItemQty = styled.span`
   &.small {
     font-size: ${uiFonts.size.xsmall};
   }
+  &.xsmall {
+    font-size: ${uiFonts.size.xxsmall};
+  }
 `;

package/src/components/NPCDialog/NPCDialog.tsx

@@ -1,14 +1,13 @@
-import React, { useState } from 'react';
+import React 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',
@@ -34,14 +33,10 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
   questions,
   answers,
 }) => {
-  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
-    false
-  );
-
   return (
     <RPGUIContainer
       type={RPGUIContainerTypes.FramedGold}
-      width={isQuestionDialog ? '600px' : '50%'}
+      width={isQuestionDialog ? '600px' : '80%'}
       height={'180px'}
     >
       {isQuestionDialog && questions && answers ? (
@@ -72,8 +67,7 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
             >
               <NPCDialogText
-                onStartStep={() => setShowGoNextIndicator(false)}
-                onEndStep={() => setShowGoNextIndicator(true)}
+                type={type}
                 text={text || 'No text provided.'}
                 onClose={() => {
                   if (onClose) {
@@ -88,12 +82,6 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
               </ThumbnailContainer>
             )}
           </Container>
-          {showGoNextIndicator && (
-            <PressSpaceIndicator
-              right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
-              src={pressSpaceGif}
-            />
-          )}
         </>
       )}
     </RPGUIContainer>
@@ -131,15 +119,3 @@ 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;
-`;

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -1,13 +1,18 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
+import { NPCDialogType } from '../..';
+import { IS_MOBILE_OR_TABLET } from '../../constants/uiDevices';
 import { chunkString } from '../../libs/StringHelpers';
 import { DynamicText } from '../typography/DynamicText';
+import pressButtonGif from './img/press-button.gif';
+import pressSpaceGif from './img/space.gif';
 
 interface IProps {
   text: string;
   onClose: () => void;
-  onEndStep: () => void;
-  onStartStep: () => void;
+  onEndStep?: () => void;
+  onStartStep?: () => void;
+  type?: NPCDialogType;
 }
 
 export const NPCDialogText: React.FC<IProps> = ({
@@ -15,21 +20,43 @@ export const NPCDialogText: React.FC<IProps> = ({
   onClose,
   onEndStep,
   onStartStep,
+  type,
 }) => {
-  const textChunks = chunkString(text, 200);
+  const windowSize = useRef([window.innerWidth, window.innerHeight]);
+  function maxCharacters(width: number) {
+    // Set the font size to 16 pixels
+    var fontSize = 11.2;
 
-  const [chunkIndex, setChunkIndex] = useState<number>(0);
+    // Calculate the number of characters that can fit in one line
+    var charactersPerLine = Math.floor(width / 2 / fontSize);
+
+    // Calculate the number of lines that can fit in the div
+    var linesPerDiv = Math.floor(180 / fontSize);
+
+    // Calculate the maximum number of characters that can fit in the div
+    var maxCharacters = charactersPerLine * linesPerDiv;
+
+    // Return the maximum number of characters
+    return Math.round(maxCharacters / 5);
+  }
+
+  const textChunks = chunkString(text, maxCharacters(windowSize.current[0]));
 
+  const [chunkIndex, setChunkIndex] = useState<number>(0);
   const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
-      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
-
-      if (hasNextChunk) {
-        setChunkIndex(prev => prev + 1);
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
+      goToNextStep();
+    }
+  };
+
+  const goToNextStep = () => {
+    const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
+
+    if (hasNextChunk) {
+      setChunkIndex(prev => prev + 1);
+    } else {
+      // if there's no more text chunks, close the dialog
+      onClose();
     }
   };
 
@@ -39,15 +66,48 @@ export const NPCDialogText: React.FC<IProps> = ({
     return () => document.removeEventListener('keydown', onHandleSpacePress);
   }, [chunkIndex]);
 
+  const [showGoNextIndicator, setShowGoNextIndicator] = useState<boolean>(
+    false
+  );
+
   return (
     <Container>
       <DynamicText
         text={textChunks?.[chunkIndex] || ''}
-        onFinish={onEndStep}
-        onStart={onStartStep}
+        onFinish={() => {
+          setShowGoNextIndicator(true);
+
+          onEndStep && onEndStep();
+        }}
+        onStart={() => {
+          setShowGoNextIndicator(false);
+
+          onStartStep && onStartStep();
+        }}
       />
+      {showGoNextIndicator && (
+        <PressSpaceIndicator
+          right={type === NPCDialogType.TextOnly ? '1rem' : '10.5rem'}
+          src={IS_MOBILE_OR_TABLET ? pressButtonGif : pressSpaceGif}
+          onClick={() => {
+            goToNextStep();
+          }}
+        />
+      )}
     </Container>
   );
 };
 
 const Container = styled.div``;
+
+interface IPressSpaceIndicatorProps {
+  right: string;
+}
+
+const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
+  position: absolute;
+  right: ${({ right }) => right};
+  bottom: 1rem;
+  height: 20.7px;
+  image-rendering: -webkit-optimize-contrast;
+`;

package/src/components/RadioInput/RadioButton.tsx

@@ -0,0 +1,98 @@
+import { capitalize } from 'lodash';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { Ellipsis } from '../shared/Ellipsis';
+
+export interface IRadioProps {  
+  title:string,
+  subtitle:string,
+  instrument:string|null
+  setInstrument: (value: string) => void;
+}
+
+export const RadioButton: React.FC<IRadioProps> = ({
+  title,
+  subtitle,
+  instrument,
+  setInstrument,
+}) => {
+  const isRadioSelected=(value:string):boolean=>instrument===value;
+
+  const handleClick = (e:string):void => {  
+    setInstrument(e)
+};
+
+  return (
+     <ItemWrapper onClick={() => handleClick(title)} >
+      <ItemIconContainer>
+        <SpriteContainer id='elemento-radio'>
+          <input
+          type='radio'
+          name='react-radio-btn'
+          className='rpgui-radio'
+          value={title}
+          checked={isRadioSelected(title)}
+          onChange={(e)=>(e)}
+          />
+        </SpriteContainer>
+      </ItemIconContainer>
+      <ItemNameContainer>
+        <NameValue onClick={() => handleClick(title)}>
+          <p>{title}</p>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="250px">
+              {capitalize(subtitle)}
+            </Ellipsis>
+          </p>
+          
+        </NameValue>
+      </ItemNameContainer>
+    </ItemWrapper>
+  );
+};
+
+const ItemWrapper = styled.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+
+  &:hover {
+    background-color: ${uiColors.darkGray};
+  }
+  padding: 0.5rem;
+`;
+
+
+const ItemNameContainer = styled.div`
+  flex: 80%;
+`;
+
+const ItemIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  flex: 0 0 58px;
+`;
+
+const SpriteContainer = styled.div`
+input {
+  display:block !important;
+  &:hover {
+    cursor: pointer;
+  }
+  };
+  position: relative;
+  top: -0.5rem;
+  left: 0.5rem;
+`;
+
+const NameValue = styled.div`
+  p {
+    font-size: 0.75rem;
+    margin: 0;
+  }
+`;