@rpg-engine/long-bow 0.8.141 → 0.8.146

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.141",
+  "version": "0.8.146",
   "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",

package/src/components/Marketplace/BlueprintSearchModal.tsx

@@ -0,0 +1,295 @@
+import {
+  IMarketplaceBlueprintSearchRequest,
+  IMarketplaceBlueprintSummary,
+  ItemSubType,
+} from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled, { keyframes } 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 { BlueprintTable } from './BlueprintTable';
+
+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 scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
+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>
+            ) : (
+              <BlueprintTable
+                blueprints={blueprints}
+                atlasJSON={atlasJSON}
+                atlasIMG={atlasIMG}
+                onSelect={onSelect}
+              />
+            )}
+          </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;
+`;
+
+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;
+`;
+
+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 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 };

package/src/components/Marketplace/BlueprintTable.tsx

@@ -0,0 +1,158 @@
+import { IMarketplaceBlueprintSummary } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface IBlueprintTableProps {
+  blueprints: IMarketplaceBlueprintSummary[];
+  atlasJSON: any;
+  atlasIMG: any;
+  onSelect?: (blueprint: IMarketplaceBlueprintSummary) => void;
+}
+
+export const BlueprintTable: React.FC<IBlueprintTableProps> = ({
+  blueprints,
+  atlasJSON,
+  atlasIMG,
+  onSelect,
+}) => {
+  return (
+    <>
+      <ResultsHeader>
+        <span />
+        <ColName>Name</ColName>
+        <ColType>Type</ColType>
+        <ColTier>Tier</ColTier>
+      </ResultsHeader>
+      {blueprints.map((blueprint) => (
+        <ResultRow
+          key={blueprint.key}
+          $selectable={!!onSelect}
+          onPointerDown={onSelect ? () => onSelect(blueprint) : undefined}
+        >
+          <SpriteWrapper>
+            <SpriteFromAtlas
+              atlasJSON={atlasJSON}
+              atlasIMG={atlasIMG}
+              spriteKey={blueprint.texturePath || blueprint.key}
+              width={32}
+              height={32}
+              imgScale={2}
+              centered
+            />
+          </SpriteWrapper>
+          <ColName>
+            <BlueprintName>{blueprint.name}</BlueprintName>
+            {(blueprint.type || blueprint.subType) && (
+              <BlueprintMeta>
+                {[blueprint.type, blueprint.subType]
+                  .filter(Boolean)
+                  .filter((v, i, arr) => arr.indexOf(v) === i)
+                  .join(' · ')}
+              </BlueprintMeta>
+            )}
+          </ColName>
+          <ColType>
+            <TypeText>{blueprint.type}</TypeText>
+            {blueprint.subType && blueprint.subType !== blueprint.type && (
+              <SubTypeText>{blueprint.subType}</SubTypeText>
+            )}
+          </ColType>
+          <ColTier>T{blueprint.tier}</ColTier>
+        </ResultRow>
+      ))}
+    </>
+  );
+};
+
+const tableRowBase = `
+  display: grid;
+  grid-template-columns: 40px 1fr 120px 50px;
+  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<{ $selectable: boolean }>`
+  ${tableRowBase}
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  cursor: ${p => p.$selectable ? 'pointer' : 'default'};
+  transition: background 0.1s;
+
+  &:hover {
+    background: ${p => p.$selectable ? 'rgba(245, 158, 11, 0.08)' : 'none'};
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  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 BlueprintMeta = 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;
+`;