@rpg-engine/long-bow 0.8.140 → 0.8.145

package/dist/stories/Features/marketplace/BlueprintSearchModal.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/marketplace/BuyOrderPanel.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/marketplace/BuyOrderRows.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/marketplace/HistoryPanel.stories.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/stories/Features/trading/MarketplaceRows.stories.d.ts

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

package/dist/stories/UI/buttonsAndInputs/SegmentedToggle.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/react';
+import { ISegmentedToggleProps } from '../../../components/shared/SegmentedToggle';
+declare const meta: Meta;
+export default meta;
+export declare const MarketplaceModes: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISegmentedToggleProps>;
+export declare const ShortOptions: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ISegmentedToggleProps>;

package/dist/stories/UI/text/LabelPill.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/react';
+import { ILabelPillProps } from '../../../components/shared/LabelPill';
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILabelPillProps>;
+export declare const BuyRequest: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILabelPillProps>;
+export declare const Status: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, ILabelPillProps>;

package/dist/utils/atlasUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const NO_IMAGE_SPRITE_KEY = "others/no-image.png";
+export declare const resolveAtlasSpriteKey: (atlasJSON: any, spriteKey?: string | null | undefined) => string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.140",
+  "version": "0.8.145",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "0.10.83",
+    "@rpg-engine/shared": "file:../rpg-shared",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",
@@ -92,6 +92,7 @@
     "lodash-es": "^4.17.21",
     "mobx": "^6.6.0",
     "mobx-react": "^7.5.0",
+    "pixelarticons": "^2.0.2",
     "react-colorful": "^5.6.1",
     "react-draggable": "^4.4.5",
     "react-error-boundary": "^3.1.4",

package/src/components/ConfirmModal.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode, useCallback } from 'react';
+import { FaTimes } from 'react-icons/fa';
 import styled, { createGlobalStyle } from 'styled-components';
 import ModalPortal from './Abstractions/ModalPortal';
 import { Button, ButtonTypes } from './Button';
@@ -66,6 +67,13 @@ export const ConfirmModal: React.FC<IConfirmModalProps> = ({
           onTouchMove={stopPropagationTouch}
           onPointerDown={stopPropagationPointer}
         >
+          <Header>
+            <Title>Confirm</Title>
+            <CloseButton onPointerDown={handleClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
           <MessageContainer>
             {typeof message === 'string' ? (
               <Message>{message}</Message>
@@ -134,61 +142,76 @@ const ModalContainer = styled.div`
 `;
 
 const ModalContent = styled.div`
-  background-color: #2a2a2a;
-  border: 2px solid #444;
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
   border-radius: 8px;
-  padding: 20px;
+  padding: 20px 24px 24px;
   min-width: 300px;
   max-width: 90%;
-  margin: 0 auto;
-  animation: scaleIn 0.2s ease-out;
-  transform-origin: center;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
 
   @keyframes scaleIn {
-    from {
-      transform: scale(0.8);
-      opacity: 0;
-    }
-    to {
-      transform: scale(1);
-      opacity: 1;
-    }
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
   }
 
   @media (max-width: 768px) {
-    padding: 25px;
     width: 85%;
   }
 `;
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem;
+  color: #fef08a;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
 const MessageContainer = styled.div`
-  margin-bottom: 20px;
   text-align: center;
 `;
 
 const Message = styled.p`
   margin: 0;
-  font-size: 16px;
-  color: #fff;
-  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
-
-  @media (max-width: 768px) {
-    font-size: 18px;
-  }
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.85);
+  line-height: 1.8;
 `;
 
 const ButtonsContainer = styled.div`
   display: flex;
   justify-content: center;
   gap: 20px;
+  margin-top: 4px;
 
   @media (max-width: 768px) {
     gap: 30px;
-    /* Increase button size for better touch targets */
-    transform: scale(1.1);
-    margin-top: 5px;
   }
 `;
 

package/src/components/Marketplace/BlueprintSearchModal.tsx

@@ -0,0 +1,418 @@
+import {
+  IMarketplaceBlueprintSearchRequest,
+  IMarketplaceBlueprintSummary,
+  ItemSubType,
+} from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled from 'styled-components';
+import { Dropdown } from '../Dropdown';
+import { IOptionsProps } from '../Dropdown';
+import { Input } from '../Input';
+import { Pager } from '../Pager';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IBlueprintSearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (blueprint: IMarketplaceBlueprintSummary) => void;
+  onSearch: (request: IMarketplaceBlueprintSearchRequest) => void;
+  blueprints: IMarketplaceBlueprintSummary[];
+  totalCount: number;
+  currentPage: number;
+  isLoading: boolean;
+  atlasJSON: any;
+  atlasIMG: any;
+}
+
+const BLUEPRINTS_PER_PAGE = 10;
+
+const typeOptions: IOptionsProps[] = [
+  { id: 1, value: '', option: 'All Types' },
+  ...Object.keys(ItemSubType)
+    .filter((t) => t !== 'DeadBody')
+    .map((t, index) => ({ id: index + 2, value: t, option: t })),
+];
+
+const subTypeOptions: IOptionsProps[] = [
+  { id: 1, value: '', option: 'All Sub Types' },
+  ...Object.keys(ItemSubType)
+    .filter((t) => t !== 'DeadBody')
+    .map((t, index) => ({ id: index + 2, value: t, option: t })),
+];
+
+export const BlueprintSearchModal: React.FC<IBlueprintSearchModalProps> = ({
+  isOpen,
+  onClose,
+  onSelect,
+  onSearch,
+  blueprints,
+  totalCount,
+  currentPage,
+  isLoading,
+  atlasJSON,
+  atlasIMG,
+}) => {
+  const [searchName, setSearchName] = useState('');
+  const [selectedType, setSelectedType] = useState('');
+  const [selectedSubType, setSelectedSubType] = useState('');
+
+  if (!isOpen) return null;
+
+  const triggerSearch = (overrides?: Partial<{ name: string; itemType: string; itemSubType: string; page: number }>): void => {
+    onSearch({
+      npcId: '',
+      name: overrides?.name ?? searchName,
+      itemType: overrides?.itemType ?? selectedType,
+      itemSubType: overrides?.itemSubType ?? selectedSubType,
+      page: overrides?.page ?? 1,
+      limit: BLUEPRINTS_PER_PAGE,
+    });
+  };
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setSearchName(e.target.value);
+    triggerSearch({ name: e.target.value, page: 1 });
+  };
+
+  const handleTypeChange = (value: string): void => {
+    setSelectedType(value);
+    triggerSearch({ itemType: value, page: 1 });
+  };
+
+  const handleSubTypeChange = (value: string): void => {
+    setSelectedSubType(value);
+    triggerSearch({ itemSubType: value, page: 1 });
+  };
+
+  const handlePageChange = (page: number): void => {
+    triggerSearch({ page });
+  };
+
+  const stopPropagation = (e: React.MouseEvent | React.PointerEvent): void => {
+    e.stopPropagation();
+  };
+
+  const handleClose = (e: React.PointerEvent | React.MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    onClose();
+  };
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={handleClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>Select Item</Title>
+            <CloseButton onPointerDown={handleClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <InputWrapper>
+            <p>SEARCH</p>
+            <StyledInput
+              value={searchName}
+              onChange={handleNameChange}
+              placeholder="Search by name..."
+            />
+          </InputWrapper>
+
+          <FiltersRow>
+            <StyledDropdown
+              key={`type-${selectedType}`}
+              options={typeOptions}
+              onChange={handleTypeChange}
+              width="100%"
+            />
+            <StyledDropdown
+              key={`subtype-${selectedSubType}`}
+              options={subTypeOptions}
+              onChange={handleSubTypeChange}
+              width="100%"
+            />
+          </FiltersRow>
+
+          <ResultsWrapper>
+            {isLoading ? (
+              <EmptyState>Loading...</EmptyState>
+            ) : blueprints.length === 0 ? (
+              <EmptyState>No blueprints found</EmptyState>
+            ) : (
+              <>
+                <ResultsHeader>
+                  <ColName>Name</ColName>
+                  <ColType>Type</ColType>
+                  <ColTier>Tier</ColTier>
+                </ResultsHeader>
+                {blueprints.map((blueprint) => (
+                  <ResultRow
+                    key={blueprint.key}
+                    onPointerDown={() => onSelect(blueprint)}
+                  >
+                    <SpriteWrapper>
+                      <SpriteFromAtlas
+                        atlasJSON={atlasJSON}
+                        atlasIMG={atlasIMG}
+                        spriteKey={blueprint.texturePath || blueprint.key}
+                        width={32}
+                        height={32}
+                        imgScale={2}
+                        centered
+                      />
+                    </SpriteWrapper>
+                    <ColName>
+                      <BlueprintName>{blueprint.name}</BlueprintName>
+                      <BlueprintKey>{blueprint.key}</BlueprintKey>
+                    </ColName>
+                    <ColType>
+                      <TypeText>{blueprint.type}</TypeText>
+                      {blueprint.subType && blueprint.subType !== blueprint.type && (
+                        <SubTypeText>{blueprint.subType}</SubTypeText>
+                      )}
+                    </ColType>
+                    <ColTier>T{blueprint.tier}</ColTier>
+                  </ResultRow>
+                ))}
+              </>
+            )}
+          </ResultsWrapper>
+
+          <PagerContainer>
+            <Pager
+              totalItems={totalCount}
+              currentPage={currentPage}
+              itemsPerPage={BLUEPRINTS_PER_PAGE}
+              onPageChange={handlePageChange}
+            />
+          </PagerContainer>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+`;
+
+const ModalContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+  pointer-events: none;
+`;
+
+const ModalContent = styled.div`
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  padding: 20px 24px;
+  width: 600px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
+
+  @keyframes scaleIn {
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.7rem;
+  color: #fef08a;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+const InputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  p {
+    margin: 0;
+    font-size: 0.7rem;
+    color: #ccc;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    white-space: nowrap;
+  }
+`;
+
+const StyledInput = styled(Input)`
+  flex: 1;
+  height: 10px;
+`;
+
+const FiltersRow = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  margin: 0px !important;
+  width: 100% !important;
+`;
+
+const ResultsWrapper = styled.div`
+  overflow-y: auto;
+  max-height: 320px;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+`;
+
+const tableRowBase = `
+  display: grid;
+  grid-template-columns: 32px 1fr 120px 60px;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+`;
+
+const ResultsHeader = styled.div`
+  ${tableRowBase}
+  background: rgba(0, 0, 0, 0.4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+
+  > * {
+    font-size: 0.45rem;
+    color: #888;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+`;
+
+const ResultRow = styled.div`
+  ${tableRowBase}
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: background 0.1s;
+
+  &:hover {
+    background: rgba(245, 158, 11, 0.08);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+`;
+
+const ColName = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+`;
+
+const BlueprintName = styled.span`
+  font-size: 0.5rem;
+  color: #ddd;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const BlueprintKey = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const ColType = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const TypeText = styled.span`
+  font-size: 0.45rem;
+  color: #aaa;
+`;
+
+const SubTypeText = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+`;
+
+const ColTier = styled.div`
+  font-size: 0.5rem;
+  color: #f59e0b;
+  text-align: center;
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  font-size: 0.55rem;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const PagerContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export { BLUEPRINTS_PER_PAGE };