@rpg-engine/long-bow 0.3.76 → 0.3.77

package/src/types/index.d.ts

@@ -1,2 +1,2 @@
-declare module '*.gif';
-declare module '*.png';
+declare module '*.gif';
+declare module '*.png';

package/dist/components/Item/Cards/ItemInfo.d.ts

@@ -1,10 +0,0 @@
-import { IItem } from '@rpg-engine/shared';
-import React from 'react';
-interface IItemInfoProps {
-    item: IItem;
-    itemToCompare?: IItem;
-    atlasIMG: any;
-    atlasJSON: any;
-}
-export declare const ItemInfo: React.FC<IItemInfoProps>;
-export {};

package/dist/components/Item/Cards/ItemInfoDisplay.d.ts

@@ -1,10 +0,0 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React from 'react';
-export interface IItemInfoDisplayProps {
-    item: IItem;
-    atlasIMG: any;
-    atlasJSON: any;
-    equipmentSet?: IEquipmentSet | null;
-    isMobile?: boolean;
-}
-export declare const ItemInfoDisplay: React.FC<IItemInfoDisplayProps>;

package/dist/components/Item/Cards/ItemInfoWrapper.d.ts

@@ -1,12 +0,0 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React from 'react';
-interface IItemInfoWrapperProps {
-    item: IItem;
-    children: React.ReactNode;
-    atlasIMG: any;
-    atlasJSON: any;
-    equipmentSet?: IEquipmentSet | null;
-    scale?: number;
-}
-export declare const ItemInfoWrapper: React.FC<IItemInfoWrapperProps>;
-export {};

package/dist/components/Item/Cards/MobileItemTooltip.d.ts

@@ -1,18 +0,0 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React from 'react';
-interface IListMenuOption {
-    id: string;
-    text: string;
-}
-export interface MobileItemTooltipProps {
-    item: IItem;
-    atlasIMG: any;
-    atlasJSON: any;
-    closeTooltip: () => void;
-    equipmentSet?: IEquipmentSet | null;
-    scale?: number;
-    options?: IListMenuOption[];
-    onSelected?: (selectedOptionId: string) => void;
-}
-export declare const MobileItemTooltip: React.FC<MobileItemTooltipProps>;
-export {};

package/dist/stories/ItemInfoDisplay.stories.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { IItemInfoDisplayProps } from '../components/Item/Cards/ItemInfoDisplay';
-declare const _default: {
-    title: string;
-    component: React.FC<IItemInfoDisplayProps>;
-};
-export default _default;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, IItemInfoDisplayProps>;

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

@@ -1,248 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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')};
-`;
-
-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

@@ -1,62 +0,0 @@
-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>
-  );
-};

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

@@ -1,105 +0,0 @@
-import { IEquipmentSet, IItem } from '@rpg-engine/shared';
-import React, { useEffect, useRef } from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../../constants/uiColors';
-import { ItemInfoDisplay } from './ItemInfoDisplay';
-
-interface IListMenuOption {
-  id: string;
-  text: string;
-}
-
-export interface MobileItemTooltipProps {
-  item: IItem;
-  atlasIMG: any;
-  atlasJSON: any;
-  closeTooltip: () => void;
-  equipmentSet?: IEquipmentSet | null;
-  scale?: number;
-  options?: IListMenuOption[];
-  onSelected?: (selectedOptionId: string) => void;
-}
-
-export const MobileItemTooltip: React.FC<MobileItemTooltipProps> = ({
-  item,
-  atlasIMG,
-  atlasJSON,
-  closeTooltip,
-  equipmentSet,
-  scale = 1,
-  options,
-  onSelected,
-}) => {
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const { current } = ref;
-
-    if (current) {
-      // Adjust the position to be on whole window
-      const rect = current.getBoundingClientRect();
-
-      const x = (-rect.x * 100) / (scale * 100);
-      const y = (-rect.y * 100) / (scale * 100);
-
-      current.style.transform = `translate(${x}px, ${y}px)`;
-      current.style.opacity = '1';
-    }
-
-    return;
-  }, []);
-
-  return (
-    <Container
-      ref={ref}
-      onTouchEnd={e => {
-        e.stopPropagation();
-        closeTooltip();
-      }}
-      scale={scale}
-    >
-      <ItemInfoDisplay
-        item={item}
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
-        equipmentSet={equipmentSet}
-        isMobile
-      />
-      <OptionsContainer>
-        {options?.map(option => (
-          <Option key={option.id} onTouchEnd={() => onSelected?.(option.id)}>
-            {option.text}
-          </Option>
-        ))}
-      </OptionsContainer>
-    </Container>
-  );
-};
-
-const Container = styled.div<{ scale: number }>`
-  position: fixed;
-  z-index: 50;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  width: ${({ scale }) => `calc(100vw * 100 / ${scale * 100})`};
-  height: ${({ scale }) => `calc(100vh * 100 / ${scale * 100})`};
-  background-color: rgba(0 0 0 / 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-const OptionsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 2rem;
-  gap: 1rem;
-`;
-
-const Option = styled.button`
-  padding: 1rem;
-  background-color: ${uiColors.lightGray};
-  border: none;
-  border-radius: 3px;
-`;

package/src/stories/ItemInfoDisplay.stories.tsx

@@ -1,33 +0,0 @@
-import { Story } from '@storybook/react';
-import React from 'react';
-import {
-  IItemInfoDisplayProps,
-  ItemInfoDisplay,
-} from '../components/Item/Cards/ItemInfoDisplay';
-import { RPGUIRoot } from '../components/RPGUIRoot';
-import atlasJSON from '../mocks/atlas/items/items.json';
-import atlasIMG from '../mocks/atlas/items/items.png';
-import { equipmentSetMock } from '../mocks/equipmentSet.mocks';
-import { items } from '../mocks/itemContainer.mocks';
-
-export default {
-  title: 'Item info',
-  component: ItemInfoDisplay,
-};
-
-const Template: Story<IItemInfoDisplayProps> = args => (
-  <RPGUIRoot>
-    <div style={{ margin: '2rem' }}>
-      <ItemInfoDisplay {...args} />
-    </div>
-  </RPGUIRoot>
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  item: items[0],
-  atlasIMG: atlasIMG,
-  atlasJSON: atlasJSON,
-  equipmentSet: equipmentSetMock,
-};