@rpg-engine/long-bow 0.3.69 → 0.3.71

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

@@ -0,0 +1,248 @@
+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;
+  width: max-content;
+  font-size: ${uiFonts.size.small};
+  border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
+`;
+
+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;
+
+  .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;
+  width: max-content;
+  max-width: 20rem;
+`;
+
+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;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-left: 2rem;
+`;
+
+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,120 @@
+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;
+}
+
+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,
+}) => {
+  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>
+      <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`
+  display: flex;
+  gap: 0.5rem;
+`;
+
+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,39 @@
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { ItemTooltip } from './ItemTooltip';
+
+interface IItemInfoWrapperProps {
+  item: IItem;
+  children: React.ReactNode;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+}
+
+export const ItemInfoWrapper: React.FC<IItemInfoWrapperProps> = ({
+  children,
+  atlasIMG,
+  atlasJSON,
+  item,
+  equipmentSet,
+}) => {
+  const [isItemInfoVisible, setIsItemInfoVisible] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={setIsItemInfoVisible.bind(null, true)}
+      onMouseLeave={setIsItemInfoVisible.bind(null, false)}
+    >
+      {children}
+
+      {isItemInfoVisible && (
+        <ItemTooltip
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          equipmentSet={equipmentSet}
+          item={item}
+        />
+      )}
+    </div>
+  );
+};

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

@@ -1,33 +1,85 @@
-import React from 'react';
-import styled from 'styled-components';
-import { uiFonts } from '../../../constants/uiFonts';
-
-interface IProps {
-  label: string;
-}
-
-export const ItemTooltip: React.FC<IProps> = ({ label }) => {
-  return (
-    <Container>
-      <div>{label}</div>
-    </Container>
-  );
-};
-
-const Container = styled.div`
-  z-index: 2;
-  position: absolute;
-  top: 1rem;
-  left: 4rem;
-
-  font-size: ${uiFonts.size.xxsmall};
-  color: white;
-  background-color: black;
-  border-radius: 5px;
-  padding: 0.5rem;
-  min-width: 20px;
-  width: 100%;
-  text-align: center;
-
-  opacity: 0.75;
-`;
+import { IEquipmentSet, IItem } from '@rpg-engine/shared';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { ItemInfoDisplay } from './ItemInfoDisplay';
+
+export interface IItemTooltipProps {
+  item: IItem;
+  atlasIMG: any;
+  atlasJSON: any;
+  equipmentSet?: IEquipmentSet | null;
+}
+
+const offset = 20;
+
+export const ItemTooltip: React.FC<IItemTooltipProps> = ({
+  item,
+  atlasIMG,
+  atlasJSON,
+  equipmentSet,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const { current } = ref;
+    let initialOffset: DOMRect;
+
+    if (current) {
+      const handleMouseMove = (event: MouseEvent) => {
+        const { clientX, clientY } = event;
+
+        // Adjust the position of the tooltip based on the mouse position
+        const rect = current.getBoundingClientRect();
+        if (!initialOffset) {
+          initialOffset = rect;
+        }
+
+        const tooltipWidth = rect.width;
+        const tooltipHeight = rect.height;
+        const isOffScreenRight =
+          clientX + tooltipWidth + offset > window.innerWidth;
+        const isOffScreenBottom =
+          clientY + tooltipHeight + offset > window.innerHeight;
+        const x =
+          (isOffScreenRight
+            ? clientX - tooltipWidth - offset
+            : clientX + offset) - initialOffset.x;
+        const y =
+          (isOffScreenBottom
+            ? clientY - tooltipHeight - offset
+            : clientY + offset) - initialOffset.y;
+
+        current.style.transform = `translate(${x}px, ${y}px)`;
+        current.style.opacity = '1';
+      };
+
+      window.addEventListener('mousemove', handleMouseMove);
+
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+      };
+    }
+
+    return;
+  }, []);
+
+  return (
+    <Container ref={ref}>
+      <ItemInfoDisplay
+        item={item}
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        equipmentSet={equipmentSet}
+      />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: fixed;
+  z-index: 50;
+  pointer-events: none;
+  left: 0;
+  top: 0;
+  opacity: 0;
+`;

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

@@ -1,42 +1,42 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import atlasJSON from '../../../mocks/atlas/items/items.json';
-import atlasIMG from '../../../mocks/atlas/items/items.png';
-import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
-
-interface Props {
-  children?: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  public state: State = {
-    hasError: false,
-  };
-
-  public static getDerivedStateFromError(_: Error): State {
-    // Update state so the next render will show the fallback UI.
-    return { hasError: true };
-  }
-
-  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error('Uncaught error:', error, errorInfo);
-  }
-
-  public render() {
-    if (this.state.hasError) {
-      return (
-        <SpriteFromAtlas
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          spriteKey={'others/no-image.png'}
-          imgScale={3}
-        />
-      );
-    }
-
-    return this.props.children;
-  }
-}
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+  };
+
+  public static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <SpriteFromAtlas
+          atlasIMG={atlasIMG}
+          atlasJSON={atlasJSON}
+          spriteKey={'others/no-image.png'}
+          imgScale={3}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}