@rpg-engine/long-bow 0.5.39 → 0.5.41

package/dist/stories/ConfirmModal.stories.d.ts

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

package/dist/stories/ShopModal.stories.d.ts

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

package/package.json

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

package/src/components/ConfirmModal.tsx

@@ -4,7 +4,7 @@ import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
 import { DraggableContainer } from './DraggableContainer';
 
-interface IConfirmModalProps {
+export interface IConfirmModalProps {
   onConfirm: () => void;
   onClose: () => void;
   message?: string;

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

@@ -66,8 +66,6 @@ type onDragStart =
   | undefined;
 type onDragEnd = ((quantity?: number) => void) | undefined;
 
-const MIN_SLOTS_FOR_SCROLL = 20;
-
 export const ItemContainer: React.FC<IItemContainerProps> = ({
   itemContainer,
   onClose,
@@ -243,11 +241,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
               atlasJSON={atlasJSON}
             />
           )}
-        <ItemsContainer
-          className="item-container-body"
-          ref={containerRef}
-          isScrollable={itemContainer.slotQty > MIN_SLOTS_FOR_SCROLL}
-        >
+        <ItemsContainer className="item-container-body" ref={containerRef}>
           {onRenderSlots()}
         </ItemsContainer>
       </SlotsContainer>
@@ -261,16 +255,12 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   );
 };
 
-interface IItemsContainerProps {
-  isScrollable: boolean;
-}
-
-const ItemsContainer = styled.div<IItemsContainerProps>`
+const ItemsContainer = styled.div`
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   max-height: 270px;
-  overflow-y: ${({ isScrollable }) => (isScrollable ? 'scroll' : 'hidden')};
+  overflow-y: auto;
   overflow-x: hidden;
   width: 415px;
 `;

package/src/components/ShopModal/ShopModal.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import styled from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { Button, ButtonTypes } from '../Button';
+import { DraggableContainer } from '../DraggableContainer';
+import ShopImage from './shopImage.png';
+
+export interface IShopModalProps {
+    onClose: () => void;
+    message?: string;
+    url: string
+}
+
+export const ShopModal: React.FC<IShopModalProps> = ({
+    onClose,
+    message,
+    url,
+}) => {
+    const openShop = () => {
+        window.open(url, "_blank");
+        onClose()
+    }
+
+    return (
+        <ModalPortal>
+            <Container onPointerDown={onClose}>
+                <DraggableContainer width="auto" dragDisabled>
+                    <Wrapper onPointerDown={e => e.stopPropagation()}>
+                        <BackgroundContainer />
+                        <Description>{message ?? 'Check out our shop items to prevent future death and enhance your gameplay!'}</Description>
+                        <ButtonsWrapper>
+                            <div className="cancel-button">
+                                <Button
+                                    buttonType={ButtonTypes.RPGUIButton}
+                                    onPointerDown={onClose}
+                                >
+                                    Back to Game
+                                </Button>
+                            </div>
+                            <Button
+                                buttonType={ButtonTypes.RPGUIButton}
+                                onPointerDown={openShop}
+                            >
+                                Go to Shop
+                            </Button>
+                        </ButtonsWrapper>
+                    </Wrapper>
+                </DraggableContainer>
+            </Container>
+        </ModalPortal>
+    );
+};
+
+const Container = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1001;
+`;
+
+const Wrapper = styled.div`
+  p {
+    margin: 0;
+  }
+`;
+
+const ButtonsWrapper = styled.div`
+  display: flex;
+  justify-content: space-around;
+  gap: 5px;
+  margin-top: 5px;
+  padding-left: 10%;
+  padding-right: 10%;
+
+  .cancel-button {
+    filter: grayscale(0.7);
+  }
+`;
+
+const Description = styled.div`
+    padding-left: 15%;
+    padding-right: 15%;
+    color: white;
+    font-size: 10px ;
+    line-height: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+`
+
+const BackgroundContainer = styled.div`
+  position: relative; /* Certifique-se de que o pai tem posição relativa */
+  background-image: url(${ShopImage});
+  background-size: 70%;
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 300px;
+  margin-bottom: 10px;
+::before {
+    content: ''; /* necessário para pseudo-elementos */
+    position: absolute; /* posição absoluta em relação ao seu pai */
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4); /* cor de fundo preta com opacidade de 50% */
+    z-index: 1; /* garantir que o overlay esteja acima da imagem de fundo */
+    width: 70%;
+    margin: auto;
+  }
+   > * {
+    position: relative;
+    z-index: 2;
+  }
+`

package/src/mocks/itemContainer.mocks.ts

@@ -5,7 +5,7 @@ import {
   ItemSlotType,
   ItemSubType,
   ItemType,
-  UserAccountTypes,
+  UserAccountTypes
 } from '@rpg-engine/shared';
 
 export const items: IItem[] = [
@@ -586,7 +586,7 @@ export const itemContainerMock = (
       _id: '629ba0b6fe3f43002f58f23b',
       name: 'Item Container',
       owner: '629ba0b6fe3f43002f58f23b',
-      slotQty: 20,
+      slotQty: 60,
       slots: {
         0: items[0],
         1: items[1],
@@ -614,4 +614,4 @@ export const itemContainerMock = (
       ...props,
     };
   }
-};
+}

package/src/stories/ConfirmModal.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { ConfirmModal, IConfirmModalProps } from '../components/ConfirmModal';
+import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
+
+const meta: Meta = {
+    title: 'Modals/Confirm Modal',
+    component: ConfirmModal,
+}
+
+export default meta;
+
+const Template: Story<IConfirmModalProps> = args => (
+    <RPGUIRoot>
+        <ConfirmModal {...args} />
+    </RPGUIRoot>
+)
+
+export const Default = Template.bind({});
+
+Default.args = {
+    onConfirm: () => console.log("onConfirm"),
+    onClose: () => console.log("onClose"),
+    message: "Do you want to proceed ?"
+}

package/src/stories/ShopModal.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../components/RPGUI/RPGUIRoot';
+import { IShopModalProps, ShopModal } from '../components/ShopModal/ShopModal';
+
+const meta: Meta = {
+    title: 'Modals/Shop Modal',
+    component: ShopModal,
+}
+
+export default meta;
+
+const Template: Story<IShopModalProps> = args => (
+    <RPGUIRoot>
+        <ShopModal {...args} />
+    </RPGUIRoot>
+)
+
+export const Default = Template.bind({});
+
+Default.args = {
+    onClose: () => console.log("onClose"),
+    url: "https://www.patreon.com/DefinyaMMORPG/shop"
+}