@rpg-engine/long-bow 0.3.77 → 0.3.78

package/src/components/HistoryDialog.tsx

@@ -1,104 +1,104 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
-import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
-import {
-  IQuestionDialog,
-  IQuestionDialogAnswer,
-  QuestionDialog,
-} from './NPCDialog/QuestionDialog/QuestionDialog';
-
-export interface IHistoryDialogProps {
-  backgroundImgPath: string[];
-  fullCoverBackground: boolean;
-  questions?: IQuestionDialog[];
-  answers?: IQuestionDialogAnswer[];
-  text?: string;
-  imagePath?: string;
-  textAndTypeArray?: NPCMultiDialogType[];
-  onClose: () => void;
-}
-
-export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
-  backgroundImgPath,
-  fullCoverBackground,
-  questions,
-  answers,
-  text,
-  imagePath,
-  textAndTypeArray,
-  onClose,
-}) => {
-  const [img, setImage] = useState<number>(0);
-  const onHandleSpacePress = (event: KeyboardEvent) => {
-    if (event.code === 'Space') {
-      if (img < backgroundImgPath?.length - 1) {
-        setImage(prev => prev + 1);
-      } else {
-        // if there's no more text chunks, close the dialog
-        onClose();
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('keydown', onHandleSpacePress);
-
-    return () => document.removeEventListener('keydown', onHandleSpacePress);
-  }, [backgroundImgPath]);
-  return (
-    <BackgroundContainer
-      imgPath={backgroundImgPath[img]}
-      fullImg={fullCoverBackground}
-    >
-      <DialogContainer>
-        {textAndTypeArray ? (
-          <NPCMultiDialog
-            textAndTypeArray={textAndTypeArray}
-            onClose={onClose}
-          />
-        ) : questions && answers ? (
-          <QuestionDialog
-            questions={questions}
-            answers={answers}
-            onClose={onClose}
-          />
-        ) : text && imagePath ? (
-          <NPCDialog
-            text={text}
-            imagePath={imagePath}
-            onClose={onClose}
-            type={NPCDialogType.TextAndThumbnail}
-          />
-        ) : (
-          <NPCDialog
-            text={text}
-            onClose={onClose}
-            type={NPCDialogType.TextOnly}
-          />
-        )}
-      </DialogContainer>
-    </BackgroundContainer>
-  );
-};
-
-interface IImgContainerProps {
-  imgPath: string;
-  fullImg: boolean;
-}
-
-const BackgroundContainer = styled.div<IImgContainerProps>`
-  width: 100%;
-  height: 100%;
-  background-image: url(${props => props.imgPath});
-  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
-  display: flex;
-  justify-content: space-evenly;
-  align-items: center;
-`;
-
-const DialogContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  padding-top: 200px;
-`;
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { NPCDialog, NPCDialogType } from './NPCDialog/NPCDialog';
+import { NPCMultiDialog, NPCMultiDialogType } from './NPCDialog/NPCMultiDialog';
+import {
+  IQuestionDialog,
+  IQuestionDialogAnswer,
+  QuestionDialog,
+} from './NPCDialog/QuestionDialog/QuestionDialog';
+
+export interface IHistoryDialogProps {
+  backgroundImgPath: string[];
+  fullCoverBackground: boolean;
+  questions?: IQuestionDialog[];
+  answers?: IQuestionDialogAnswer[];
+  text?: string;
+  imagePath?: string;
+  textAndTypeArray?: NPCMultiDialogType[];
+  onClose: () => void;
+}
+
+export const HistoryDialog: React.FC<IHistoryDialogProps> = ({
+  backgroundImgPath,
+  fullCoverBackground,
+  questions,
+  answers,
+  text,
+  imagePath,
+  textAndTypeArray,
+  onClose,
+}) => {
+  const [img, setImage] = useState<number>(0);
+  const onHandleSpacePress = (event: KeyboardEvent) => {
+    if (event.code === 'Space') {
+      if (img < backgroundImgPath?.length - 1) {
+        setImage(prev => prev + 1);
+      } else {
+        // if there's no more text chunks, close the dialog
+        onClose();
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keydown', onHandleSpacePress);
+
+    return () => document.removeEventListener('keydown', onHandleSpacePress);
+  }, [backgroundImgPath]);
+  return (
+    <BackgroundContainer
+      imgPath={backgroundImgPath[img]}
+      fullImg={fullCoverBackground}
+    >
+      <DialogContainer>
+        {textAndTypeArray ? (
+          <NPCMultiDialog
+            textAndTypeArray={textAndTypeArray}
+            onClose={onClose}
+          />
+        ) : questions && answers ? (
+          <QuestionDialog
+            questions={questions}
+            answers={answers}
+            onClose={onClose}
+          />
+        ) : text && imagePath ? (
+          <NPCDialog
+            text={text}
+            imagePath={imagePath}
+            onClose={onClose}
+            type={NPCDialogType.TextAndThumbnail}
+          />
+        ) : (
+          <NPCDialog
+            text={text}
+            onClose={onClose}
+            type={NPCDialogType.TextOnly}
+          />
+        )}
+      </DialogContainer>
+    </BackgroundContainer>
+  );
+};
+
+interface IImgContainerProps {
+  imgPath: string;
+  fullImg: boolean;
+}
+
+const BackgroundContainer = styled.div<IImgContainerProps>`
+  width: 100%;
+  height: 100%;
+  background-image: url(${props => props.imgPath});
+  background-size: ${props => (props.imgPath ? 'cover' : 'auto')};
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+const DialogContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: 200px;
+`;

package/src/components/Input.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
-
-export interface IInputProps
-  extends React.DetailedHTMLProps<
-    React.InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
-  > {
-  innerRef?: React.Ref<HTMLInputElement>;
-}
-
-export const Input: React.FC<IInputProps> = ({ ...props }) => {
-  const { innerRef, ...rest } = props;
-
-  return <input {...rest} ref={props.innerRef} />;
-};
+import React from 'react';
+
+export interface IInputProps
+  extends React.DetailedHTMLProps<
+    React.InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  innerRef?: React.Ref<HTMLInputElement>;
+}
+
+export const Input: React.FC<IInputProps> = ({ ...props }) => {
+  const { innerRef, ...rest } = props;
+
+  return <input {...rest} ref={props.innerRef} />;
+};

package/src/components/Item/Cards/ItemInfo.tsx

@@ -0,0 +1,252 @@
+import { IItem } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { uiFonts } from '../../../constants/uiFonts';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+import { ErrorBoundary } from '../Inventory/ErrorBoundary';
+import { EquipmentSlotSpriteByType, rarityColor } from '../Inventory/ItemSlot';
+
+interface IItemInfoProps {
+  item: IItem;
+  itemToCompare?: IItem;
+  atlasIMG: any;
+  atlasJSON: any;
+}
+
+interface IItemStat {
+  key: keyof IItem;
+  label?: string;
+  higherIsWorse?: boolean;
+}
+
+const statisticsToDisplay: IItemStat[] = [
+  { key: 'attack' },
+  { key: 'defense' },
+  { key: 'maxRange', label: 'Range' },
+  { key: 'weight', higherIsWorse: true },
+];
+
+export const ItemInfo: React.FC<IItemInfoProps> = ({
+  item,
+  itemToCompare,
+  atlasIMG,
+  atlasJSON,
+}) => {
+  const renderStatistics = () => {
+    const statistics = [];
+
+    for (const stat of statisticsToDisplay) {
+      const itemStatistic = item[stat.key];
+
+      if (itemStatistic) {
+        const label =
+          stat.label || stat.key[0].toUpperCase() + stat.key.slice(1);
+
+        const isItemToCompare = !!itemToCompare;
+
+        const isOnlyInOneItem = isItemToCompare && !itemToCompare?.[stat.key];
+        const statDiff =
+          parseInt(itemStatistic.toString()) -
+          parseInt(itemToCompare?.[stat.key]?.toString() ?? '0');
+
+        const isDifference = isItemToCompare && statDiff !== 0;
+        const isBetter =
+          (statDiff > 0 && !stat.higherIsWorse) ||
+          (statDiff < 0 && stat.higherIsWorse);
+
+        statistics.push(
+          <Statistic key={stat.key} className={isOnlyInOneItem ? 'better' : ''}>
+            <div className="label">{label}:</div>
+            <div
+              className={`value ${
+                isDifference ? (isBetter ? 'better' : 'worse') : ''
+              }`}
+            >
+              {`${itemStatistic.toString()} ${
+                isDifference ? `(${statDiff > 0 ? '+' : ''}${statDiff})` : ''
+              }`}
+            </div>
+          </Statistic>
+        );
+      }
+    }
+
+    return statistics;
+  };
+
+  const renderMissingStatistic = () => {
+    const statistics = [];
+
+    for (const stat of statisticsToDisplay) {
+      const itemToCompareStatistic = itemToCompare?.[stat.key];
+
+      if (itemToCompareStatistic && !item[stat.key]) {
+        const label =
+          stat.label || stat.key[0].toUpperCase() + stat.key.slice(1);
+
+        statistics.push(
+          <Statistic key={stat.key} className="worse">
+            <div className="label">{label}:</div>
+            <div className="value worse">
+              {itemToCompareStatistic.toString()}
+            </div>
+          </Statistic>
+        );
+      }
+    }
+
+    return statistics;
+  };
+
+  const renderAvaibleSlots = () => {
+    if (!item.allowedEquipSlotType) return null;
+
+    return item.allowedEquipSlotType.map((slotType, index) => (
+      <ErrorBoundary key={index}>
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={EquipmentSlotSpriteByType[slotType]}
+          imgScale={2}
+          grayScale={true}
+          opacity={0.4}
+          containerStyle={{ width: '32px', height: '32px' }}
+        />
+      </ErrorBoundary>
+    ));
+  };
+
+  return (
+    <Container item={item}>
+      <Header>
+        <div>
+          <Title>{item.name}</Title>
+          {item.rarity !== 'Common' && (
+            <Rarity item={item}>{item.rarity}</Rarity>
+          )}
+          <Type>{item.subType}</Type>
+        </div>
+        <AllowedSlots>{renderAvaibleSlots()}</AllowedSlots>
+      </Header>
+
+      {renderStatistics()}
+      {item.isTwoHanded && <Statistic>Two handed</Statistic>}
+
+      <Description>{item.description}</Description>
+
+      {item.maxStackSize && item.maxStackSize !== 1 && (
+        <StackInfo>
+          x{item.stackQty ?? 1}({item.maxStackSize})
+        </StackInfo>
+      )}
+
+      {renderMissingStatistic().length > 0 && (
+        <MissingStatistics>
+          <Statistic>Equipped Diff</Statistic>
+          {itemToCompare && renderMissingStatistic()}
+        </MissingStatistics>
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div<{ item: IItem }>`
+  color: white;
+  background-color: #222;
+  border-radius: 5px;
+  padding: 0.5rem;
+  font-size: ${uiFonts.size.small};
+  border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
+  height: max-content;
+  width: 15rem;
+
+  @media (max-width: 580px) {
+    width: 80vw;
+  }
+`;
+
+const Title = styled.div`
+  font-size: ${uiFonts.size.medium};
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+  display: flex;
+  align-items: center;
+  margin: 0;
+`;
+
+const Rarity = styled.div<{ item: IItem }>`
+  font-size: ${uiFonts.size.small};
+  font-weight: normal;
+  margin-top: 0.2rem;
+  color: ${({ item }) => rarityColor(item)};
+  filter: brightness(1.5);
+`;
+
+const Type = styled.div`
+  font-size: ${uiFonts.size.small};
+  margin-top: 0.2rem;
+  color: ${uiColors.lightGray};
+`;
+
+const Statistic = styled.div`
+  margin-bottom: 0.4rem;
+  width: max-content;
+
+  .label {
+    display: inline-block;
+    margin-right: 0.5rem;
+    color: inherit;
+  }
+
+  .value {
+    display: inline-block;
+    color: inherit;
+  }
+
+  &.better,
+  .better {
+    color: ${uiColors.lightGreen};
+  }
+
+  &.worse,
+  .worse {
+    color: ${uiColors.cardinal};
+  }
+`;
+
+const Description = styled.div`
+  margin-top: 1.5rem;
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.lightGray};
+  font-style: italic;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+`;
+
+const AllowedSlots = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-left: auto;
+  align-self: flex-start;
+`;
+
+const StackInfo = styled.div`
+  width: 100%;
+  text-align: right;
+  font-size: ${uiFonts.size.small};
+  color: ${uiColors.orange};
+  margin-top: 1rem;
+`;
+
+const MissingStatistics = styled.div`
+  margin-top: 1rem;
+  color: ${uiColors.cardinal};
+`;

package/src/components/Item/Cards/ItemInfoDisplay.tsx

@@ -0,0 +1,128 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import { camelCase } from 'lodash';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { ItemInfo } from './ItemInfo';
+
+export interface IItemInfoDisplayProps {
+  item: IItem;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+  isMobile?: boolean;
+}
+
+type EquipmentSlotTypes =
+  | 'head'
+  | 'neck'
+  | 'leftHand'
+  | 'rightHand'
+  | 'ring'
+  | 'legs'
+  | 'boot'
+  | 'accessory'
+  | 'armor'
+  | 'inventory';
+
+const itemSlotTypes: EquipmentSlotTypes[] = [
+  'head',
+  'neck',
+  'leftHand',
+  'rightHand',
+  'ring',
+  'legs',
+  'boot',
+  'accessory',
+  'armor',
+  'inventory',
+];
+
+const getSlotType = (
+  itemSlotTypes: string[],
+  slotType: string,
+  subType: string
+): keyof IEquipmentSet => {
+  if (!itemSlotTypes.includes(slotType)) {
+    return subType as keyof IEquipmentSet;
+  }
+  return slotType as keyof IEquipmentSet;
+};
+
+export const ItemInfoDisplay: React.FC<IItemInfoDisplayProps> = ({
+  item,
+  atlasIMG,
+  atlasJSON,
+  equipmentSet,
+  isMobile,
+}) => {
+  const itemToCompare = useMemo(() => {
+    if (equipmentSet && item.allowedEquipSlotType?.length) {
+      const allowedSlotTypeCamelCase = camelCase(item.allowedEquipSlotType[0]);
+      const itemSubTypeCamelCase = camelCase(item.subType);
+
+      const slotType = getSlotType(
+        itemSlotTypes,
+        allowedSlotTypeCamelCase,
+        itemSubTypeCamelCase
+      );
+
+      const itemFromEquipment = equipmentSet[slotType] as IItem;
+
+      if (
+        itemFromEquipment &&
+        (!item._id || itemFromEquipment._id !== item._id)
+      ) {
+        return itemFromEquipment;
+      }
+    }
+
+    return undefined;
+  }, [equipmentSet, item]);
+
+  return (
+    <Flex $isMobile={isMobile}>
+      <ItemInfo
+        item={item}
+        itemToCompare={itemToCompare}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+      />
+
+      {itemToCompare && (
+        <CompareContainer>
+          <Equipped>
+            <span>Equipped</span>
+          </Equipped>
+          <ItemInfo
+            item={itemToCompare}
+            itemToCompare={item}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+          />
+        </CompareContainer>
+      )}
+    </Flex>
+  );
+};
+
+const Flex = styled.div<{ $isMobile?: boolean }>`
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: ${({ $isMobile }) => ($isMobile ? 'row-reverse' : 'row')};
+
+  @media (max-width: 580px) {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+`;
+
+const Equipped = styled.div`
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+`;
+
+const CompareContainer = styled.div`
+  position: relative;
+`;

package/src/components/Item/Cards/ItemInfoWrapper.tsx

@@ -0,0 +1,62 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { ItemTooltip } from './ItemTooltip';
+import { MobileItemTooltip } from './MobileItemTooltip';
+
+interface IItemInfoWrapperProps {
+  item: IItem;
+  children: React.ReactNode;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+  scale?: number;
+}
+
+export const ItemInfoWrapper: React.FC<IItemInfoWrapperProps> = ({
+  children,
+  atlasIMG,
+  atlasJSON,
+  item,
+  equipmentSet,
+  scale,
+}) => {
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const [isTooltipMobileVisible, setIsTooltipMobileVisible] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => {
+        if (!isTooltipMobileVisible) setIsTooltipVisible(true);
+      }}
+      onMouseLeave={setIsTooltipVisible.bind(null, false)}
+      onTouchEnd={() => {
+        setIsTooltipMobileVisible(true);
+        setIsTooltipVisible(false);
+      }}
+    >
+      {children}
+
+      {isTooltipVisible && !isTooltipMobileVisible && (
+        <ItemTooltip
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          item={item}
+        />
+      )}
+      {isTooltipMobileVisible && (
+        <MobileItemTooltip
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          closeTooltip={() => {
+            setIsTooltipMobileVisible(false);
+            console.log('close');
+          }}
+          item={item}
+          scale={scale}
+        />
+      )}
+    </div>
+  );
+};