@rpg-engine/long-bow 0.3.69 → 0.3.71

package/src/components/TimeWidget/DayNightPeriod/DayNightPeriod.tsx

@@ -1,35 +1,35 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import { PeriodOfDay } from '@rpg-engine/shared';
-import AfternoonGif from './gif/afternoon.gif';
-import MorningGif from './gif/morning.gif';
-import NightGif from './gif/night.gif';
-
-export interface IPeriodOfDayDisplayProps {
-  periodOfDay: PeriodOfDay;
-}
-
-export const DayNightPeriod: React.FC<IPeriodOfDayDisplayProps> = ({
-  periodOfDay,
-}) => {
-  const periodOfDaySrcFiles = {
-    [PeriodOfDay.Morning]: MorningGif,
-    [PeriodOfDay.Afternoon]: AfternoonGif,
-    [PeriodOfDay.Night]: NightGif,
-  };
-
-  return (
-    <GifContainer>
-      <img src={periodOfDaySrcFiles[periodOfDay]} />
-    </GifContainer>
-  );
-};
-
-const GifContainer = styled.div`
-  width: 100%;
-
-  img {
-    width: 67%;
-  }
-`;
+import React from 'react';
+import styled from 'styled-components';
+
+import { PeriodOfDay } from '@rpg-engine/shared';
+import AfternoonGif from './gif/afternoon.gif';
+import MorningGif from './gif/morning.gif';
+import NightGif from './gif/night.gif';
+
+export interface IPeriodOfDayDisplayProps {
+  periodOfDay: PeriodOfDay;
+}
+
+export const DayNightPeriod: React.FC<IPeriodOfDayDisplayProps> = ({
+  periodOfDay,
+}) => {
+  const periodOfDaySrcFiles = {
+    [PeriodOfDay.Morning]: MorningGif,
+    [PeriodOfDay.Afternoon]: AfternoonGif,
+    [PeriodOfDay.Night]: NightGif,
+  };
+
+  return (
+    <GifContainer>
+      <img src={periodOfDaySrcFiles[periodOfDay]} />
+    </GifContainer>
+  );
+};
+
+const GifContainer = styled.div`
+  width: 100%;
+
+  img {
+    width: 67%;
+  }
+`;

package/src/components/TimeWidget/TimeWidget.tsx

@@ -1,63 +1,63 @@
-import { PeriodOfDay } from '@rpg-engine/shared';
-import React from 'react';
-import Draggable from 'react-draggable';
-import styled from 'styled-components';
-import { uiFonts } from '../../constants/uiFonts';
-import { DayNightPeriod } from './DayNightPeriod/DayNightPeriod';
-
-import ClockWidgetImg from './img/clockwidget.png';
-
-export interface IClockWidgetProps {
-  onClose?: () => void;
-  TimeClock: string;
-  periodOfDay: PeriodOfDay;
-}
-
-export const TimeWidget: React.FC<IClockWidgetProps> = ({
-  onClose,
-  TimeClock,
-  periodOfDay,
-}) => {
-  return (
-    <Draggable>
-      <WidgetContainer>
-        <CloseButton onPointerDown={onClose}>X</CloseButton>
-        <DayNightContainer>
-          <DayNightPeriod periodOfDay={periodOfDay} />
-        </DayNightContainer>
-        <Time>{TimeClock}</Time>
-      </WidgetContainer>
-    </Draggable>
-  );
-};
-
-const WidgetContainer = styled.div`
-  background-image: url(${ClockWidgetImg});
-  background-size: 10rem;
-  background-repeat: no-repeat;
-  width: 10rem;
-  position: absolute;
-  height: 100px;
-`;
-
-const Time = styled.div`
-  top: 0.75rem;
-  right: 0.5rem;
-  position: absolute;
-  font-size: ${uiFonts.size.small};
-  color: white;
-`;
-
-const CloseButton = styled.p`
-  position: absolute;
-  top: -0.5rem;
-  margin: 0;
-  right: -0.2rem;
-  font-size: ${uiFonts.size.small} !important;
-  z-index: 1;
-`;
-
-const DayNightContainer = styled.div`
-  margin-top: -0.3rem;
-  margin-left: -0.3rem;
-`;
+import { PeriodOfDay } from '@rpg-engine/shared';
+import React from 'react';
+import Draggable from 'react-draggable';
+import styled from 'styled-components';
+import { uiFonts } from '../../constants/uiFonts';
+import { DayNightPeriod } from './DayNightPeriod/DayNightPeriod';
+
+import ClockWidgetImg from './img/clockwidget.png';
+
+export interface IClockWidgetProps {
+  onClose?: () => void;
+  TimeClock: string;
+  periodOfDay: PeriodOfDay;
+}
+
+export const TimeWidget: React.FC<IClockWidgetProps> = ({
+  onClose,
+  TimeClock,
+  periodOfDay,
+}) => {
+  return (
+    <Draggable>
+      <WidgetContainer>
+        <CloseButton onPointerDown={onClose}>X</CloseButton>
+        <DayNightContainer>
+          <DayNightPeriod periodOfDay={periodOfDay} />
+        </DayNightContainer>
+        <Time>{TimeClock}</Time>
+      </WidgetContainer>
+    </Draggable>
+  );
+};
+
+const WidgetContainer = styled.div`
+  background-image: url(${ClockWidgetImg});
+  background-size: 10rem;
+  background-repeat: no-repeat;
+  width: 10rem;
+  position: absolute;
+  height: 100px;
+`;
+
+const Time = styled.div`
+  top: 0.75rem;
+  right: 0.5rem;
+  position: absolute;
+  font-size: ${uiFonts.size.small};
+  color: white;
+`;
+
+const CloseButton = styled.p`
+  position: absolute;
+  top: -0.5rem;
+  margin: 0;
+  right: -0.2rem;
+  font-size: ${uiFonts.size.small} !important;
+  z-index: 1;
+`;
+
+const DayNightContainer = styled.div`
+  margin-top: -0.3rem;
+  margin-left: -0.3rem;
+`;

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,181 +1,195 @@
-import { getItemTextureKeyPath, ITradeResponseItem } from '@rpg-engine/shared';
-import capitalize from 'lodash/capitalize';
-import React from 'react';
-import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { uiFonts } from '../../constants/uiFonts';
-import SelectArrow from '../Arrow/SelectArrow';
-import { Ellipsis } from '../shared/Ellipsis';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
-export interface ITradeComponentProps {
-  traderItem: ITradeResponseItem;
-  onQuantityChange: (
-    traderItem: ITradeResponseItem,
-    selectedQty: number
-  ) => void;
-  atlasJSON: any;
-  atlasIMG: any;
-  selectedQty: number;
-}
-
-const outerQty = 10;
-
-export const TradingItemRow: React.FC<ITradeComponentProps> = ({
-  atlasIMG,
-  atlasJSON,
-  onQuantityChange,
-  traderItem,
-  selectedQty,
-}) => {
-  const onLeftClick = (qty = 1) => {
-    onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
-  };
-
-  const onRightClick = (qty = 1) => {
-    onQuantityChange(
-      traderItem,
-      Math.min(traderItem.qty ?? 999, selectedQty + qty)
-    );
-  };
-
-  return (
-    <ItemWrapper>
-      <ItemIconContainer>
-        <SpriteContainer>
-          <SpriteFromAtlas
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            spriteKey={getItemTextureKeyPath(
-              {
-                key: traderItem.key,
-                stackQty: traderItem.qty || 1,
-                texturePath: traderItem.texturePath,
-              },
-              atlasJSON
-            )}
-            imgScale={2.5}
-          />
-        </SpriteContainer>
-      </ItemIconContainer>
-      <ItemNameContainer>
-        <NameValue>
-          <p>
-            <Ellipsis maxLines={1} maxWidth="250px">
-              {capitalize(traderItem.name)}
-            </Ellipsis>
-          </p>
-          <p>${traderItem.price}</p>
-        </NameValue>
-      </ItemNameContainer>
-
-      <QuantityContainer>
-        <SelectArrow
-          size={32}
-          className="arrow-selector"
-          direction="left"
-          onPointerDown={onLeftClick.bind(null, outerQty)}
-        />
-        <StyledArrow
-          size={32}
-          className="arrow-selector"
-          direction="left"
-          onPointerDown={onLeftClick}
-        />
-        <QuantityDisplay>
-          <TextOverlay>
-            <Item>{selectedQty}</Item>
-          </TextOverlay>
-        </QuantityDisplay>
-        <StyledArrow
-          size={32}
-          className="arrow-selector"
-          direction="right"
-          onPointerDown={onRightClick}
-        />
-        <SelectArrow
-          size={32}
-          className="arrow-selector"
-          direction="right"
-          onPointerDown={onRightClick.bind(null, outerQty)}
-        />
-      </QuantityContainer>
-    </ItemWrapper>
-  );
-};
-
-const StyledArrow = styled(SelectArrow)`
-  margin: 40px;
-`;
-
-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: 60%;
-`;
-
-const ItemIconContainer = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  flex: 0 0 58px;
-`;
-
-const SpriteContainer = styled.div`
-  position: relative;
-  top: -0.5rem;
-  left: 0.5rem;
-`;
-
-const NameValue = styled.div`
-  p {
-    font-size: 0.75rem;
-    margin: 0;
-  }
-`;
-
-const Item = styled.span`
-  color: white;
-  text-align: center;
-  z-index: 1;
-
-  width: 100%;
-`;
-
-const TextOverlay = styled.div`
-  width: 100%;
-  position: relative;
-`;
-
-interface IContainerProps {
-  percentageWidth?: number;
-  minWidth?: number;
-  style?: Record<string, any>;
-}
-
-const QuantityContainer = styled.div<IContainerProps>`
-  position: relative;
-  display: flex;
-
-  min-width: 100px;
-  width: 40%;
-  justify-content: center;
-  align-items: center;
-
-  flex: 40%;
-`;
-
-const QuantityDisplay = styled.div`
-  font-size: ${uiFonts.size.small};
-`;
+import {
+  getItemTextureKeyPath,
+  IEquipmentSet,
+  ITradeResponseItem,
+} from '@rpg-engine/shared';
+import capitalize from 'lodash/capitalize';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../constants/uiColors';
+import { uiFonts } from '../../constants/uiFonts';
+import SelectArrow from '../Arrow/SelectArrow';
+import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
+import { Ellipsis } from '../shared/Ellipsis';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+export interface ITradeComponentProps {
+  traderItem: ITradeResponseItem;
+  onQuantityChange: (
+    traderItem: ITradeResponseItem,
+    selectedQty: number
+  ) => void;
+  atlasJSON: any;
+  atlasIMG: any;
+  selectedQty: number;
+  equipmentSet?: IEquipmentSet | null;
+}
+
+const outerQty = 10;
+
+export const TradingItemRow: React.FC<ITradeComponentProps> = ({
+  atlasIMG,
+  atlasJSON,
+  onQuantityChange,
+  traderItem,
+  selectedQty,
+  equipmentSet,
+}) => {
+  const onLeftClick = (qty = 1) => {
+    onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
+  };
+
+  const onRightClick = (qty = 1) => {
+    onQuantityChange(
+      traderItem,
+      Math.min(traderItem.stackQty ?? 999, selectedQty + qty)
+    );
+  };
+
+  return (
+    <ItemWrapper>
+      <ItemIconContainer>
+        <SpriteContainer>
+          <ItemInfoWrapper
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+            equipmentSet={equipmentSet}
+            item={traderItem}
+          >
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={getItemTextureKeyPath(
+                {
+                  key: traderItem.key,
+                  stackQty: traderItem.stackQty || 1,
+                  texturePath: traderItem.texturePath,
+                },
+                atlasJSON
+              )}
+              imgScale={2.5}
+            />
+          </ItemInfoWrapper>
+        </SpriteContainer>
+      </ItemIconContainer>
+
+      <ItemNameContainer>
+        <NameValue>
+          <p>
+            <Ellipsis maxLines={1} maxWidth="250px">
+              {capitalize(traderItem.name)}
+            </Ellipsis>
+          </p>
+          <p>${traderItem.price}</p>
+        </NameValue>
+      </ItemNameContainer>
+      <QuantityContainer>
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="left"
+          onPointerDown={onLeftClick.bind(null, outerQty)}
+        />
+        <StyledArrow
+          size={32}
+          className="arrow-selector"
+          direction="left"
+          onPointerDown={onLeftClick}
+        />
+        <QuantityDisplay>
+          <TextOverlay>
+            <Item>{selectedQty}</Item>
+          </TextOverlay>
+        </QuantityDisplay>
+        <StyledArrow
+          size={32}
+          className="arrow-selector"
+          direction="right"
+          onPointerDown={onRightClick}
+        />
+        <SelectArrow
+          size={32}
+          className="arrow-selector"
+          direction="right"
+          onPointerDown={onRightClick.bind(null, outerQty)}
+        />
+      </QuantityContainer>
+    </ItemWrapper>
+  );
+};
+
+const StyledArrow = styled(SelectArrow)`
+  margin: 40px;
+`;
+
+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: 60%;
+`;
+
+const ItemIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  flex: 0 0 58px;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  top: -0.5rem;
+  left: 0.5rem;
+`;
+
+const NameValue = styled.div`
+  p {
+    font-size: 0.75rem;
+    margin: 0;
+  }
+`;
+
+const Item = styled.span`
+  color: white;
+  text-align: center;
+  z-index: 1;
+
+  width: 100%;
+`;
+
+const TextOverlay = styled.div`
+  width: 100%;
+  position: relative;
+`;
+
+interface IContainerProps {
+  percentageWidth?: number;
+  minWidth?: number;
+  style?: Record<string, any>;
+}
+
+const QuantityContainer = styled.div<IContainerProps>`
+  position: relative;
+  display: flex;
+
+  min-width: 100px;
+  width: 40%;
+  justify-content: center;
+  align-items: center;
+
+  flex: 40%;
+`;
+
+const QuantityDisplay = styled.div`
+  font-size: ${uiFonts.size.small};
+`;