@rpg-engine/long-bow 0.8.227 → 0.8.228

package/package.json

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

package/src/components/Marketplace/CharacterTradePanel.tsx

@@ -0,0 +1,151 @@
+import { ICharacter, ICharacterListing } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { CharacterMarketplacePanel } from './CharacterMarketplacePanel';
+import { MyCharacterListingsPanel } from './MyCharacterListingsPanel';
+
+export interface ICharacterTradePanelProps {
+  characterListings: ICharacterListing[];
+  characterListingsTotal: number;
+  characterListingsPage: number;
+  characterListingsItemsPerPage: number;
+  onCharacterListingsPageChange: (page: number) => void;
+  onCharacterBuy: (listingId: string) => void;
+  characterNameFilter?: string;
+  onCharacterNameFilterChange?: (name: string) => void;
+  characterListingsLoading?: boolean;
+  myCharacterListings: ICharacterListing[];
+  myCharacterListingsTotal: number;
+  myCharacterListingsPage: number;
+  onMyCharacterListingsPageChange: (page: number) => void;
+  onCharacterDelist: (listingId: string) => void;
+  accountCharacters: ICharacter[];
+  onCharacterList: (characterId: string, price: number) => void;
+  activeCharacterId?: string;
+  atlasJSON: any;
+  atlasIMG: any;
+  characterAtlasJSON?: any;
+  characterAtlasIMG?: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+}
+
+export const CharacterTradePanel: React.FC<ICharacterTradePanelProps> = ({
+  characterListings,
+  characterListingsTotal,
+  characterListingsPage,
+  characterListingsItemsPerPage,
+  onCharacterListingsPageChange,
+  onCharacterBuy,
+  characterNameFilter,
+  onCharacterNameFilterChange,
+  characterListingsLoading,
+  myCharacterListings,
+  myCharacterListingsTotal,
+  myCharacterListingsPage,
+  onMyCharacterListingsPageChange,
+  onCharacterDelist,
+  accountCharacters,
+  onCharacterList,
+  activeCharacterId,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  enableHotkeys,
+  disableHotkeys,
+}) => {
+  const [subTab, setSubTab] = useState<'browse' | 'my-listings'>('browse');
+
+  return (
+    <>
+      <CharacterSubTabs>
+        <CharacterSubTab
+          $active={subTab === 'browse'}
+          onClick={() => setSubTab('browse')}
+          type="button"
+        >
+          Browse
+        </CharacterSubTab>
+        <CharacterSubTab
+          $active={subTab === 'my-listings'}
+          onClick={() => setSubTab('my-listings')}
+          type="button"
+        >
+          My Listings
+        </CharacterSubTab>
+      </CharacterSubTabs>
+
+      {subTab === 'browse' && (
+        <CharacterMarketplacePanel
+          characterListings={characterListings}
+          totalCount={characterListingsTotal}
+          currentPage={characterListingsPage}
+          itemsPerPage={characterListingsItemsPerPage}
+          onPageChange={onCharacterListingsPageChange}
+          onCharacterBuy={onCharacterBuy}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          characterAtlasJSON={characterAtlasJSON ?? atlasJSON}
+          characterAtlasIMG={characterAtlasIMG ?? atlasIMG}
+          enableHotkeys={enableHotkeys}
+          disableHotkeys={disableHotkeys}
+          nameFilter={characterNameFilter}
+          onNameFilterChange={onCharacterNameFilterChange}
+          isLoading={characterListingsLoading}
+        />
+      )}
+
+      {subTab === 'my-listings' && (
+        <MyCharacterListingsPanel
+          myCharacterListings={myCharacterListings}
+          totalCount={myCharacterListingsTotal}
+          currentPage={myCharacterListingsPage}
+          itemsPerPage={10}
+          onPageChange={onMyCharacterListingsPageChange}
+          onCharacterDelist={onCharacterDelist}
+          accountCharacters={accountCharacters}
+          onCharacterList={onCharacterList}
+          activeCharacterId={activeCharacterId}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          characterAtlasJSON={characterAtlasJSON ?? atlasJSON}
+          characterAtlasIMG={characterAtlasIMG ?? atlasIMG}
+          enableHotkeys={enableHotkeys}
+          disableHotkeys={disableHotkeys}
+        />
+      )}
+    </>
+  );
+};
+
+const CharacterSubTabs = styled.div`
+  display: flex;
+  gap: 8px;
+  width: 95%;
+  margin: 10px auto 0 auto;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+`;
+
+const CharacterSubTab = styled.button<{ $active: boolean }>`
+  flex: 1;
+  padding: 8px 12px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem;
+  border-radius: 4px;
+  border: 1px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.12)')};
+  background: ${({ $active }) => ($active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)')};
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#777')};
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  &:hover {
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.3)')};
+    color: ${({ $active }) => ($active ? '#f59e0b' : '#bbb')};
+  }
+`;

package/src/components/Marketplace/Marketplace.tsx

@@ -30,8 +30,7 @@ import { HistoryPanel } from './HistoryPanel';
 import { ManagmentPanel } from './ManagmentPanel';
 import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { MarketplaceAcceptedCurrency, MarketplaceSettingsPanel } from './MarketplaceSettingsPanel';
-import { CharacterMarketplacePanel } from './CharacterMarketplacePanel';
-import { MyCharacterListingsPanel } from './MyCharacterListingsPanel';
+import { CharacterTradePanel } from './CharacterTradePanel';
 
 export interface IMarketPlaceProps {
   items: IMarketplaceItem[];
@@ -207,8 +206,6 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
   const [acceptedCurrency, setAcceptedCurrency] = useState<MarketplaceAcceptedCurrency>(acceptedCurrencyProp ?? MarketplaceAcceptedCurrency.GoldOrDc);
   const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
-  const [characterSubTab, setCharacterSubTab] = useState<'browse' | 'my-listings'>('browse');
-
   const handleCurrencyChange = (value: MarketplaceAcceptedCurrency) => {
     setAcceptedCurrency(value);
     onAcceptedCurrencyChange?.(value);
@@ -292,65 +289,31 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
       )}
 
       {activeTab === 'characters' && (
-        <>
-          <CharacterSubTabs>
-            <CharacterSubTab
-              $active={characterSubTab === 'browse'}
-              onClick={() => setCharacterSubTab('browse')}
-              type="button"
-            >
-              Browse
-            </CharacterSubTab>
-            <CharacterSubTab
-              $active={characterSubTab === 'my-listings'}
-              onClick={() => setCharacterSubTab('my-listings')}
-              type="button"
-            >
-              My Listings
-            </CharacterSubTab>
-          </CharacterSubTabs>
-
-          {characterSubTab === 'browse' && (
-            <CharacterMarketplacePanel
-              characterListings={characterListings ?? []}
-              totalCount={characterListingsTotal ?? 0}
-              currentPage={characterListingsPage ?? 1}
-              itemsPerPage={characterListingsItemsPerPage ?? 10}
-              onPageChange={onCharacterListingsPageChange ?? (() => {})}
-              onCharacterBuy={onCharacterBuy ?? (() => {})}
-              atlasJSON={props.atlasJSON}
-              atlasIMG={props.atlasIMG}
-              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
-              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
-              enableHotkeys={props.enableHotkeys}
-              disableHotkeys={props.disableHotkeys}
-              nameFilter={characterNameFilter}
-              onNameFilterChange={onCharacterNameFilterChange}
-              isLoading={characterListingsLoading}
-            />
-          )}
-
-          {characterSubTab === 'my-listings' && (
-            <MyCharacterListingsPanel
-              myCharacterListings={myCharacterListings ?? []}
-              totalCount={myCharacterListingsTotal ?? 0}
-              currentPage={myCharacterListingsPage ?? 1}
-              itemsPerPage={10}
-              onPageChange={onMyCharacterListingsPageChange ?? (() => {})}
-              onCharacterDelist={onCharacterDelist ?? (() => {})}
-              accountCharacters={accountCharacters ?? []}
-              onCharacterList={onCharacterList ?? (() => {})}
-              activeCharacterId={props.characterId}
-              atlasJSON={props.atlasJSON}
-              atlasIMG={props.atlasIMG}
-              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
-              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
-              enableHotkeys={props.enableHotkeys}
-              disableHotkeys={props.disableHotkeys}
-            />
-          )}
-
-        </>
+        <CharacterTradePanel
+          characterListings={characterListings ?? []}
+          characterListingsTotal={characterListingsTotal ?? 0}
+          characterListingsPage={characterListingsPage ?? 1}
+          characterListingsItemsPerPage={characterListingsItemsPerPage ?? 10}
+          onCharacterListingsPageChange={onCharacterListingsPageChange ?? (() => {})}
+          onCharacterBuy={onCharacterBuy ?? (() => {})}
+          characterNameFilter={characterNameFilter}
+          onCharacterNameFilterChange={onCharacterNameFilterChange}
+          characterListingsLoading={characterListingsLoading}
+          myCharacterListings={myCharacterListings ?? []}
+          myCharacterListingsTotal={myCharacterListingsTotal ?? 0}
+          myCharacterListingsPage={myCharacterListingsPage ?? 1}
+          onMyCharacterListingsPageChange={onMyCharacterListingsPageChange ?? (() => {})}
+          onCharacterDelist={onCharacterDelist ?? (() => {})}
+          accountCharacters={accountCharacters ?? []}
+          onCharacterList={onCharacterList ?? (() => {})}
+          activeCharacterId={props.characterId}
+          atlasJSON={props.atlasJSON}
+          atlasIMG={props.atlasIMG}
+          characterAtlasJSON={characterAtlasJSON}
+          characterAtlasIMG={characterAtlasIMG}
+          enableHotkeys={props.enableHotkeys}
+          disableHotkeys={props.disableHotkeys}
+        />
       )}
 
       {activeTab === 'sell' && (
@@ -442,33 +405,3 @@ const PagerContainer = styled.div`
   padding: 4px 10px;
 `;
 
-const CharacterSubTabs = styled.div`
-  display: flex;
-  gap: 8px;
-  width: 95%;
-  margin: 10px auto 0 auto;
-  padding: 8px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-`;
-
-const CharacterSubTab = styled.button<{ $active: boolean }>`
-  flex: 1;
-  padding: 8px 12px;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.45rem;
-  border-radius: 4px;
-  border: 1px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.12)')};
-  background: ${({ $active }) => ($active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)')};
-  color: ${({ $active }) => ($active ? '#f59e0b' : '#777')};
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s, color 0.15s;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-
-  &:hover {
-    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.3)')};
-    color: ${({ $active }) => ($active ? '#f59e0b' : '#bbb')};
-  }
-`;

package/src/index.tsx

@@ -46,6 +46,7 @@ export * from './components/Marketplace/HistoryPanel';
 export * from './components/Marketplace/BlueprintSearchModal';
 export * from './components/Marketplace/CharacterMarketplacePanel';
 export * from './components/Marketplace/CharacterMarketplaceRows';
+export * from './components/Marketplace/CharacterTradePanel';
 export * from './components/Marketplace/CharacterDetailModal';
 export * from './components/Marketplace/CharacterListingForm';
 export * from './components/Marketplace/CharacterListingModal';