@rpg-engine/long-bow 0.3.43 → 0.3.44

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -1,18 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, 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;
-  type?: NPCDialogType;
+  onEndStep: () => void;
+  onStartStep: () => void;
 }
 
 export const NPCDialogText: React.FC<IProps> = ({
@@ -20,43 +15,21 @@ export const NPCDialogText: React.FC<IProps> = ({
   onClose,
   onEndStep,
   onStartStep,
-  type,
 }) => {
-  const windowSize = useRef([window.innerWidth, window.innerHeight]);
-  function maxCharacters(width: number) {
-    // Set the font size to 16 pixels
-    var fontSize = 11.2;
-
-    // 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 textChunks = chunkString(text, 200);
 
   const [chunkIndex, setChunkIndex] = useState<number>(0);
+
   const onHandleSpacePress = (event: KeyboardEvent) => {
     if (event.code === 'Space') {
-      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();
+      const hasNextChunk = textChunks?.[chunkIndex + 1] || false;
+
+      if (hasNextChunk) {
+        setChunkIndex(prev => prev + 1);
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
     }
   };
 
@@ -66,48 +39,15 @@ 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={() => {
-          setShowGoNextIndicator(true);
-
-          onEndStep && onEndStep();
-        }}
-        onStart={() => {
-          setShowGoNextIndicator(false);
-
-          onStartStep && onStartStep();
-        }}
+        onFinish={onEndStep}
+        onStart={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/RangeSlider.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { v4 as uuidv4 } from 'uuid';
+import { _RPGUI } from './RPGUIRoot';
 
 export enum RangeSliderType {
   Slider = 'rpgui-slider',
@@ -13,7 +14,6 @@ export interface IRangeSliderProps {
   valueMax: number;
   width: string;
   onChange: (value: number) => void;
-  value: number;
 }
 
 export const RangeSlider: React.FC<IRangeSliderProps> = ({
@@ -22,46 +22,29 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
   valueMax,
   width,
   onChange,
-  value,
 }) => {
   const sliderId = uuidv4();
 
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [left, setLeft] = useState(0);
+  const onHandleMouseUp = () => {
+    const rpguiSlider = document.getElementById(`rpgui-slider-${sliderId}`);
+    const value = _RPGUI.get_value(rpguiSlider);
 
-  useEffect(() => {
-    const calculatedWidth = containerRef.current?.clientWidth || 0;
-    setLeft(
-      Math.max(
-        ((value - valueMin) / (valueMax - valueMin)) * (calculatedWidth - 35) +
-          10
-      )
-    );
-  }, [value, valueMin, valueMax]);
-
-  const typeClass = type === RangeSliderType.GoldSlider ? 'golden' : '';
+    onChange(Number(value));
+  };
 
   return (
-    <div
-      style={{ width: width, position: 'relative' }}
-      className={`rpgui-slider-container ${typeClass}`}
-      id={`rpgui-slider-${sliderId}`}
-      ref={containerRef}
-    >
-      <div style={{ pointerEvents: 'none' }}>
-        <div className={`rpgui-slider-track ${typeClass}`} />
-        <div className={`rpgui-slider-left-edge ${typeClass}`} />
-        <div className={`rpgui-slider-right-edge ${typeClass}`} />
-        <div className={`rpgui-slider-thumb ${typeClass}`} style={{ left }} />
-      </div>
+    <div onMouseUp={onHandleMouseUp}>
       <Input
+        className={
+          type === RangeSliderType.Slider
+            ? RangeSliderType.Slider
+            : RangeSliderType.GoldSlider
+        }
         type="range"
         style={{ width: width }}
         min={valueMin}
         max={valueMax}
-        onChange={e => onChange(Number(e.target.value))}
-        value={value}
-        className="rpgui-cursor-point"
+        id={`rpgui-slider-${sliderId}`}
       />
     </div>
   );
@@ -69,10 +52,4 @@ export const RangeSlider: React.FC<IRangeSliderProps> = ({
 
 const Input = styled.input`
   opacity: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  margin-top: -5px;
 `;

package/src/components/SkillsContainer.tsx

@@ -163,5 +163,5 @@ const CloseButton = styled.div`
   right: 2px;
   color: white;
   z-index: 22;
-  font-size: 1.1rem;
+  font-size: 0.7rem;
 `;

package/src/components/TimeWidget/TimeWidget.tsx

@@ -37,7 +37,6 @@ const WidgetContainer = styled.div`
   background-repeat: no-repeat;
   width: 10rem;
   position: absolute;
-  height: 100px;
 `;
 
 const Time = styled.div`

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,4 +1,4 @@
-import { getItemTextureKeyPath, ITradeResponseItem } from '@rpg-engine/shared';
+import { ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
 import styled from 'styled-components';
@@ -37,18 +37,6 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
       onQuantityChange(traderItem, newQuantity);
     }
   };
-  const onLeftOutClick = () => {
-    if (selectedQty >= 10) {
-      const newQuantity = selectedQty - 10;
-      onQuantityChange(traderItem, newQuantity);
-    }
-  };
-  const onRightOutClick = () => {
-    if (selectedQty + 10 <= (traderItem.qty ?? 999)) {
-      const newQuantity = selectedQty + 10;
-      onQuantityChange(traderItem, newQuantity);
-    }
-  };
 
   return (
     <ItemWrapper>
@@ -57,14 +45,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           <SpriteFromAtlas
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
-            spriteKey={getItemTextureKeyPath(
-              {
-                key: traderItem.key,
-                stackQty: traderItem.qty || 1,
-                texturePath: traderItem.texturePath,
-              },
-              atlasJSON
-            )}
+            spriteKey={traderItem.texturePath}
             imgScale={2.5}
           />
         </SpriteContainer>
@@ -82,47 +63,29 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
 
       <QuantityContainer>
         <SelectArrow
-          size={32}
-          className="arrow-selector"
-          direction="left"
-          onClick={onLeftOutClick}
-          onTouchStart={onLeftOutClick}
-        />
-        <StyledArrow
           size={32}
           className="arrow-selector"
           direction="left"
           onClick={onLeftClick}
           onTouchStart={onLeftClick}
-        />
+        ></SelectArrow>
         <QuantityDisplay>
           <TextOverlay>
             <Item>{selectedQty}</Item>
           </TextOverlay>
         </QuantityDisplay>
-        <StyledArrow
+        <SelectArrow
           size={32}
           className="arrow-selector"
           direction="right"
           onClick={onRightClick}
           onTouchStart={onRightClick}
-        />
-        <SelectArrow
-          size={32}
-          className="arrow-selector"
-          direction="right"
-          onClick={onRightOutClick}
-          onTouchStart={onRightOutClick}
-        />
+        ></SelectArrow>
       </QuantityContainer>
     </ItemWrapper>
   );
 };
 
-const StyledArrow = styled(SelectArrow)`
-  margin: 40px;
-`;
-
 const ItemWrapper = styled.div`
   width: 100%;
   margin: auto;
@@ -189,7 +152,7 @@ const QuantityContainer = styled.div<IContainerProps>`
   justify-content: center;
   align-items: center;
 
-  flex: 40%;
+  flex: 20%;
 `;
 
 const QuantityDisplay = styled.div`

package/src/components/TradingMenu/TradingMenu.tsx

@@ -80,7 +80,7 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
       onCloseButton={() => {
         if (onClose) onClose();
       }}
-      width="600px"
+      width="500px"
       cancelDrag=".equipment-container-body .arrow-selector"
     >
       <>

package/src/components/TradingMenu/items.mock.ts

@@ -19,7 +19,6 @@ export const itemMock: ITradeResponseItem[] = [
     name: 'Silver Short Sword Premium',
     price: 100,
     key: SwordsBlueprint.IceSword,
-    qty: 12
   },
   {
     texturePath: "swords/corruption-sword.png",

package/src/components/shared/SpriteFromAtlas.tsx

@@ -32,10 +32,7 @@ export const SpriteFromAtlas: React.FC<IProps> = ({
   //! If an item is not showing, remember that you MUST run yarn atlas:copy everytime you add a new item to the atlas (it will sync our public folder atlas with src/atlas).
   //!Due to React's limitations, we cannot import it from the public folder directly!
 
-  const spriteData =
-    atlasJSON.frames[spriteKey] || atlasJSON.frames['others/no-image.png'];
-
-  if (!spriteData) throw new Error(`Sprite ${spriteKey} not found in atlas!`);
+  const spriteData = atlasJSON.frames[spriteKey];
 
   return (
     <Container

package/src/hooks/useOutsideAlerter.ts

@@ -16,10 +16,10 @@ export function useOutsideClick(ref: any, id: string) {
       }
     }
     // Bind the event listener
-    document.addEventListener('pointerdown', handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
     return () => {
       // Unbind the event listener on clean up
-      document.removeEventListener('pointerdown', handleClickOutside);
+      document.removeEventListener('mousedown', handleClickOutside);
     };
   }, [ref]);
 }

package/src/index.tsx

@@ -1,20 +1,14 @@
 export * from './components/Button';
 export * from './components/Character/CharacterSelection';
 export * from './components/Chat/Chat';
-export * from './components/Chatdeprecated/ChatDeprecated';
 export * from './components/CheckButton';
-export * from './components/CircularController/CircularController';
-export * from './components/CraftBook/CraftBook';
 export * from './components/DraggableContainer';
 export * from './components/Dropdown';
-export * from './components/DropdownSelectorContainer';
 export * from './components/Equipment/EquipmentSet';
 export * from './components/HistoryDialog';
 export * from './components/Input';
-export { ErrorBoundary } from './components/Item/Inventory/ErrorBoundary';
 export * from './components/Item/Inventory/ItemContainer';
 export * from './components/Item/Inventory/ItemSlot';
-export * from './components/itemSelector/ItemSelector';
 export * from './components/ListMenu';
 export * from './components/NPCDialog/NPCDialog';
 export * from './components/NPCDialog/NPCMultiDialog';
@@ -30,8 +24,6 @@ export * from './components/RPGUIRoot';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
-export * from './components/Spellbook/QuickSpells';
-export * from './components/Spellbook/Spellbook';
 export * from './components/TextArea';
 export * from './components/TimeWidget/TimeWidget';
 export * from './components/TradingMenu/TradingMenu';