@rpg-engine/long-bow 0.2.43 → 0.2.45

package/dist/stories/DayNightPeriod.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { PeriodOfDayProps } from '../components/DayNightPeriod/DayNightPeriod';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, PeriodOfDayProps>;

package/dist/stories/ItemTradingComponent.stories.d.ts

@@ -1,5 +1,5 @@
+/// <reference types="react" />
 import { Meta } from '@storybook/react';
-import { ITradeComponentProps } from '../components/TradingMenu/TradingItemRow';
 declare const meta: Meta;
 export default meta;
-export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ITradeComponentProps>;
+export declare const Default: () => JSX.Element;

package/dist/stories/StaticBook.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { StaticBookProps } from '../components/StaticBook/StaticBook';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, StaticBookProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.2.43",
+  "version": "0.2.45",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/DayNightPeriod/DayNightPeriod.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+
+export enum IPeriodOfDay {
+    Morning = "static/media/src/components/DayNightPeriod/Gif/Morning.gif",
+    Afternoon = "static/media/src/components/DayNightPeriod/Gif/Afternoon.gif",
+    Night = "static/media/src/components/DayNightPeriod/Gif/Night.gif",
+}
+
+export interface PeriodOfDayProps {
+    periodOfDay: IPeriodOfDay;
+
+
+}
+
+export const PeriodOfDay: React.FC<PeriodOfDayProps> = ({ periodOfDay }) => {
+
+    return (
+        <GifContainer >
+
+            <img src={periodOfDay} />
+
+        </GifContainer>
+    );
+};
+
+interface IPeriodOfDayProps {
+
+}
+
+const GifContainer = styled.span<IPeriodOfDayProps>`
+width: 100%;
+   `;
+
+export default PeriodOfDay;

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

@@ -10,12 +10,12 @@ import {
 import { observer } from 'mobx-react-lite';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { v4 as uuidv4 } from 'uuid';
 import { RelativeListMenu } from '../../RelativeListMenu';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ItemTooltip } from '../Cards/ItemTooltip';
 import { ErrorBoundary } from './ErrorBoundary';
 import { generateContextMenu, IContextMenuItem } from './itemContainerHelper';
-import { v4 as uuidv4 } from 'uuid';
 
 const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -77,7 +77,7 @@ export const ItemSlot: React.FC<IProps> = observer(
 
     useEffect(() => {
       if (item) {
-        setContextActions(generateContextMenu(item.type, containerType));
+        setContextActions(generateContextMenu(item, containerType));
       }
     }, [item]);
 

package/src/components/Item/Inventory/itemContainerHelper.ts

@@ -3,6 +3,7 @@ import {
   ActionsForInventory,
   ActionsForLoot,
   ActionsForMapContainer,
+  IItem,
   ItemContainerType,
   ItemSocketEventsDisplayLabels,
   ItemType,
@@ -23,13 +24,13 @@ const generateContextMenuListOptions = (actionsByTypeList: any) => {
 };
 
 export const generateContextMenu = (
-  itemType: ItemType,
+  item: IItem,
   itemContainerType: ItemContainerType | null
 ) => {
   let contextActionMenu: IContextMenuItem[] = [];
 
   if (itemContainerType === ItemContainerType.Inventory) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Weapon:
       case ItemType.Armor:
       case ItemType.Accessory:
@@ -67,7 +68,7 @@ export const generateContextMenu = (
     }
   }
   if (itemContainerType === ItemContainerType.Equipment) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Container:
         contextActionMenu = generateContextMenuListOptions(
           ActionsForEquipmentSet.Container
@@ -81,7 +82,7 @@ export const generateContextMenu = (
     }
   }
   if (itemContainerType === ItemContainerType.Loot) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Weapon:
       case ItemType.Armor:
       case ItemType.Accessory:
@@ -111,7 +112,7 @@ export const generateContextMenu = (
     }
   }
   if (itemContainerType === ItemContainerType.MapContainer) {
-    switch (itemType) {
+    switch (item.type) {
       case ItemType.Weapon:
       case ItemType.Armor:
       case ItemType.Accessory:
@@ -142,5 +143,10 @@ export const generateContextMenu = (
         break;
     }
   }
+
+  if (item.hasUseWith) {
+    contextActionMenu.push({ id: 'use-with', text: 'Use With...' });
+  }
+
   return contextActionMenu;
 };

package/src/components/StaticBook/StaticBook.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import SelectArrow from '../Arrow/SelectArrow';
+import Book from './img/0.png';
+
+export interface StaticBookProps {
+    availableBook: Array<staticProps>;
+    onChange: (selectedBook: staticProps) => void;
+}
+
+export interface staticProps {
+    text: string;
+}
+
+export const StaticBook: React.FC<StaticBookProps> = ({
+    availableBook,
+    onChange,
+}) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const bookLength = availableBook.length - 1;
+
+    const onLeftClick = () => {
+        if (currentIndex === 0) setCurrentIndex(bookLength);
+        else setCurrentIndex(index => index - 1);
+    };
+    const onRightClick = () => {
+        if (currentIndex === bookLength) setCurrentIndex(0);
+        else setCurrentIndex(index => index + 1);
+    };
+
+    useEffect(() => {
+        onChange(availableBook[currentIndex]);
+    }, [currentIndex]);
+
+    useEffect(() => {
+        setCurrentIndex(0);
+    }, [JSON.stringify(availableBook)]);
+
+    const getCurrentSelectionName = () => {
+        const item = availableBook[currentIndex];
+        if (item) {
+            return item.text.slice(0, 600);
+        }
+        return '';
+    };
+
+    return (
+        <Container>
+            <Textbook><Colunbook>{getCurrentSelectionName()}</Colunbook></Textbook>
+            <ArrowContainer>
+                <SelectArrow
+                    direction="left"
+                    onClick={onLeftClick}
+                    onTouchStart={onLeftClick}
+                ></SelectArrow>
+                <SelectArrow
+                    direction="right"
+                    onClick={onRightClick}
+                    onTouchStart={onRightClick}
+                ></SelectArrow>
+            </ArrowContainer>
+        </Container>
+    );
+};
+
+
+const Container = styled.div`
+    background-image: url(${Book});
+    background-repeat:no-repeat;
+    position: relative;
+    width: 778px;
+    height: 538px;
+    
+  `;
+const Textbook = styled.span`
+    position: absolute;
+    padding-left: 6em;
+    display: flex; 
+      
+  `;
+const Colunbook = styled.span`
+padding-left: 3px;
+padding-top: 70px;
+width: 86%;
+column-count:2;
+grid-gap: 50px;
+
+  `;
+const ArrowContainer = styled.span`
+  display: flex;
+  height:100% ;
+  align-items: center;
+
+  `;
+
+export default StaticBook;

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -1,6 +1,6 @@
 import { ITradeResponseItem } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
@@ -9,43 +9,32 @@ import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 export interface ITradeComponentProps {
   traderItem: ITradeResponseItem;
-  updateChartTotals: (traderItem: ITradeResponseItem) => void;
+  onQuantityChange: (
+    traderItem: ITradeResponseItem,
+    selectedQty: number
+  ) => void;
   atlasJSON: any;
   atlasIMG: any;
+  selectedQty: number;
 }
 
 export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   atlasIMG,
   atlasJSON,
-  updateChartTotals,
+  onQuantityChange,
   traderItem,
+  selectedQty,
 }) => {
-  const [itemQuantity, setItemQuantity] = useState(0);
-
   const onLeftClick = () => {
-    if (itemQuantity > 0) {
-      const newQuantity = itemQuantity - 1;
-      setItemQuantity(newQuantity);
-      updateChartTotals({
-        key: traderItem.key,
-        qty: newQuantity,
-        price: traderItem.price,
-        texturePath: traderItem.texturePath,
-        name: traderItem.name,
-      });
+    if (selectedQty > 0) {
+      const newQuantity = selectedQty - 1;
+      onQuantityChange(traderItem, newQuantity);
     }
   };
   const onRightClick = () => {
-    if (itemQuantity < 999) {
-      const newQuantity = itemQuantity + 1;
-      setItemQuantity(newQuantity);
-      updateChartTotals({
-        key: traderItem.key,
-        qty: newQuantity,
-        price: traderItem.price,
-        texturePath: traderItem.texturePath,
-        name: traderItem.name,
-      });
+    if (selectedQty < (traderItem.qty ?? 999)) {
+      const newQuantity = selectedQty + 1;
+      onQuantityChange(traderItem, newQuantity);
     }
   };
 
@@ -80,7 +69,7 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
         ></SelectArrow>
         <QuantityDisplay>
           <TextOverlay>
-            <Item>{itemQuantity}</Item>
+            <Item>{selectedQty}</Item>
           </TextOverlay>
         </QuantityDisplay>
         <SelectArrow

package/src/components/TradingMenu/TradingMenu.tsx

@@ -8,7 +8,7 @@ import { TradingItemRow } from './TradingItemRow';
 export interface ITrandingMenu {
   traderItems: ITradeResponseItem[];
   onClose: () => void;
-  onConfirm: () => void;
+  onConfirm: (items: ITradeResponseItem[]) => void;
   type: TradeTransactionType;
   atlasJSON: any;
   atlasIMG: any;
@@ -25,23 +25,55 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
   onConfirm,
 }) => {
   const [sum, setSum] = useState(0);
-  let newSumArray = 0;
-  const updateChartTotals = (item: ITradeResponseItem) => {
-    const itemIndex = traderItems.findIndex(
-      itemArray => itemArray.key === item.key
-    );
-    traderItems[itemIndex] = item;
+  const [qtyMap, setQtyMap] = useState(new Map());
 
+  const onQuantityChange = (item: ITradeResponseItem, selectedQty: number) => {
+    setQtyMap(new Map(qtyMap.set(item.key, selectedQty)));
+
+    let newSum = 0;
     traderItems.forEach(item => {
-      if (item.qty) newSumArray += item.qty * item.price;
-      setSum(newSumArray);
+      const qty = qtyMap.get(item.key);
+      if (qty) newSum += qty * item.price;
+      setSum(newSum);
     });
   };
 
+  const isBuy = () => {
+    return type == 'buy';
+  };
+
+  const hasGoldForSale = () => {
+    if (isBuy()) {
+      return !(sum > characterAvailableGold);
+    }
+    return true;
+  };
+
+  const getFinalGold = () => {
+    if (isBuy()) {
+      return characterAvailableGold - sum;
+    } else {
+      return characterAvailableGold + sum;
+    }
+  };
+
   const Capitalize = (word: string) => {
     return word[0].toUpperCase() + word.substring(1);
   };
 
+  const onConfirmClick = () => {
+    const items: ITradeResponseItem[] = [];
+
+    traderItems.forEach(item => {
+      const qty = qtyMap.get(item.key);
+      if (qty) {
+        items.push(Object.assign({}, item, { qty: qty }));
+      }
+    });
+
+    onConfirm(items);
+  };
+
   return (
     <DraggableContainer
       type={RPGUIContainerTypes.Framed}
@@ -62,8 +94,9 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
               <TradingItemRow
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
-                updateChartTotals={updateChartTotals}
+                onQuantityChange={onQuantityChange}
                 traderItem={tradeItem}
+                selectedQty={qtyMap.get(tradeItem.key) ?? 0}
               />
             </ItemWrapper>
           ))}
@@ -76,22 +109,22 @@ export const TradingMenu: React.FC<ITrandingMenu> = ({
           <p>Total:</p>
           <p>${sum}</p>
         </TotalWrapper>
-        {sum > characterAvailableGold ? (
+        {!hasGoldForSale() ? (
           <AlertWrapper>
             <p> Sorry, not enough money.</p>
           </AlertWrapper>
         ) : (
           <GoldWrapper>
             <p>Final Gold:</p>
-            <p>${characterAvailableGold - sum}</p>
+            <p>${getFinalGold()}</p>
           </GoldWrapper>
         )}
 
         <ButtonWrapper>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
-            disabled={sum > characterAvailableGold}
-            onClick={() => onConfirm()}
+            disabled={!hasGoldForSale()}
+            onClick={() => onConfirmClick()}
           >
             Confirm
           </Button>

package/src/mocks/itemContainer.mocks.ts

@@ -141,7 +141,7 @@ export const items: IItem[] = [
   },
   {
     _id: '629acek4j7c8e8002fg60034',
-    hasUseWith: false,
+    hasUseWith: true,
     type: ItemType.Consumable,
     subType: ItemSubType.Accessory,
     textureAtlas: 'items',
@@ -156,7 +156,7 @@ export const items: IItem[] = [
     layer: 1,
     isItemContainer: false,
     isSolid: false,
-    key: 'board-sword-22',
+    key: 'silver-key',
     texturePath: 'others/silver-key.png',
     textureKey: 'silver-key',
     name: 'Key',

package/src/stories/DayNightPeriod.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import DayNightPeriod, { IPeriodOfDay, PeriodOfDay, PeriodOfDayProps } from '../components/DayNightPeriod/DayNightPeriod';
+import { RPGUIRoot } from '../components/RPGUIRoot';
+
+
+const meta: Meta = {
+    title: 'Day and Night Period',
+    component: DayNightPeriod,
+};
+
+export default meta;
+
+const Template: Story<PeriodOfDayProps> = () => (
+    <RPGUIRoot>
+        <PeriodOfDay periodOfDay={IPeriodOfDay.Afternoon} />
+    </RPGUIRoot>
+);
+
+export const Default = Template.bind({});

package/src/stories/ItemTradingComponent.stories.tsx

@@ -1,39 +1,35 @@
 import { ITradeResponseItem } from '@rpg-engine/shared';
-import { Meta, Story } from '@storybook/react';
-import React from 'react';
+import { Meta } from '@storybook/react';
+import React, { useState } from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
 import { itemMock } from '../components/TradingMenu/items.mock';
-import {
-  ITradeComponentProps,
-  TradingItemRow,
-} from '../components/TradingMenu/TradingItemRow';
+import { TradingItemRow } from '../components/TradingMenu/TradingItemRow';
 import atlasJSON from '../mocks/atlas/items/items.json';
 import atlasIMG from '../mocks/atlas/items/items.png';
 
-const updateChartTotals = (itemInfo: ITradeResponseItem) => {
-  console.log(itemInfo);
-  // will be needed read all itens from chart list ignoring the current item (itemInfo) and recalculate the totals
-  // with the amount updated set the total to a state to be shown to the player.
-  // OBS: This list with Id, quantity and amount will be the one to send to API,
-  //    because the API need to know wichi Items and the quantity of it to make a purchese and set the itens to the player.
-};
-
 const meta: Meta = {
   title: 'Trading Item',
   component: TradingItemRow,
 };
 export default meta;
 
-const Template: Story<ITradeComponentProps> = args => (
-  <RPGUIRoot>
-    <TradingItemRow {...args} traderItem={itemMock[0]} />
-  </RPGUIRoot>
-);
+export const Default = () => {
+  const [selectedQty, setSelectedQty] = useState(0);
 
-export const Default = Template.bind({});
+  const handleOnChange = (item: ITradeResponseItem, qty: number) => {
+    console.log(item);
+    setSelectedQty(qty);
+  };
 
-Default.args = {
-  atlasIMG: atlasIMG,
-  atlasJSON: atlasJSON,
-  updateChartTotals,
+  return (
+    <RPGUIRoot>
+      <TradingItemRow
+        atlasIMG={atlasIMG}
+        atlasJSON={atlasJSON}
+        onQuantityChange={handleOnChange}
+        selectedQty={selectedQty}
+        traderItem={itemMock[0]}
+      />
+    </RPGUIRoot>
+  );
 };

package/src/stories/StaticBook.stories.tsx

@@ -0,0 +1,39 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '..';
+
+import StaticBook, { StaticBookProps } from '../components/StaticBook/StaticBook';
+
+const meta: Meta = {
+    title: 'Static Book',
+    component: StaticBook,
+};
+
+export default meta;
+
+const Template: Story<StaticBookProps> = args => (
+    <RPGUIRoot>
+        <StaticBook {...args} />
+    </RPGUIRoot>
+);
+
+export const Default = Template.bind({});
+
+const bookMock = [
+    {
+        text: '1 ... Computers and RPGs have always gone hand-in-hand. Even when the bes and Oubliette. A few, such as Oubliette, had simple graphics, though most started out as just text or used ASCII’s standard set of text-mode graphics The most successful dungeon crawler of all time is, of course, Blizzard’s Diablo. But Rogue’s longest-lived descendent is arguably a much more interesting game—1987’s Nethack. Technically, it was based on a Rogue clone called, yes, Hack, but let’s not quibble. Nethack takes the basic dungeon crawling concept and adds several decades worth of development.',
+    },
+    {
+        text: '2 ... The original PC RPGs—such as MUDs, or multi-user dungeons—appeared in the mid-70s. These weren’t for home computers, but mainframes, typically found in universities. They tended to be based on either Dungeons & Dragons, which itself launched in 1974, or be variously disguised takes on Tolkien. These included Dungeon, DND, Orthanc, and Oubliette. A few, such as Oubliette, had simple graphics, though most started out as just text or used ASCII’s standard set of text-mode graphics The most successful dungeon crawler of all time is, of course, Blizzard’s Diablo. But Rogue’s longest-lived descendent is arguably a much more interesting game—1987’s Nethack. Technically, it was based on a Rogue clone called, yes, Hack, but let’s not quibble. Nethack takes the basic dungeon crawling concept and adds several decades worth of development. ',
+    },
+    {
+        text: '3 ... Despite the primitive technology, these games often offered surprising depth. Don Daglow’s Dungeon for instance, a 1975 D&D pastiche, offered control of an entire multiplayer party, mapping, NPCs with AI, line-of-sight-based combat, and both melee and ranged attacks. Moria, from the same year, served up wireframe graphics for its characters, and even featured rudimentary 3D views of its corridors. Small ones, with no detail, but let’s not forget that even Space Invaders wasn’t out yet! Ever wondered if throwing a custard pie in a basilisk’s face will stop its petrifying stare? Nethack not only answers that question (it will), but also implements blindness if you get hit by a pie yourself, causes you to break your code if a vegan character eats one (seriously), and ensures the attack doesn’t count if you’re on a pacifist run (it does no damage, no matter your combat bonus). This level of detail lead to the saying “The Dev Team Thinks Of Everything”. Many versions are now available, from the original ASCII-based game to graphical overhauls like Vulture’s Eye. All are free, as a condition of the distribution licence. ',
+    },
+    {
+        text: '4 ... Despite the primitive technology, these games often offered surprising depth. Don Daglow’s Dungeon for instance, a 1975 D&D pastiche, offered control of an entire multiplayer party, mapping, NPCs with AI, line-of-sight-based combat, and both melee and ranged attacks. Moria, from the same year, served up wireframe graphics for its characters, and even featured rudimentary 3D views of its corridors. Small ones, with no detail, but let’s not forget that even Space Invaders wasn’t out yet! Ever wondered if throwing a custard pie in a basilisk’s face will stop its petrifying stare? Nethack not only answers that question (it will), but also implements blindness if you get hit by a pie yourself, causes you to break your code if a vegan character eats one (seriously), and ensures the attack doesn’t count if you’re on a pacifist run (it does no damage, no matter your combat bonus). This level of detail lead to the saying “The Dev Team Thinks Of Everything”. Many versions are now available, from the original ASCII-based game to graphical overhauls like Vulture’s Eye. All are free, as a condition of the distribution licence. ',
+    },
+];
+
+Default.args = {
+    availableBook: bookMock,
+};

package/src/stories/TradingMenu.stories.tsx

@@ -1,3 +1,4 @@
+import { ITradeResponseItem } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../components/RPGUIRoot';
@@ -24,6 +25,11 @@ const Template: Story<ITrandingMenu> = args => (
 
 export const Default = Template.bind({});
 
+const onConfirm = (items: ITradeResponseItem[]) => {
+  console.log('on confirm trading menu');
+  console.log(items);
+};
+
 const onClose = () => {
   console.log('close');
 };
@@ -31,6 +37,7 @@ const onClose = () => {
 Default.args = {
   traderItems: itemMock,
   onClose: onClose,
+  onConfirm: onConfirm,
   type: 'buy',
   atlasJSON: atlasJSON,
   atlasIMG: atlasIMG,