@rpg-engine/long-bow 0.8.227 → 0.8.229

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.227",
+  "version": "0.8.229",
   "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/components/NPCDialog/NPCDialog.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import { RPGUIContainer, RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { NPCDialogText } from './NPCDialogText';
@@ -65,9 +66,8 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
       ) : (
         <>
           <Container>
-            <CloseIcon onPointerDown={onClose}>X</CloseIcon>
             <TextContainer
-              flex={type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'}
+              flex={type === NPCDialogType.TextAndThumbnail ? '1' : '100%'}
             >
               <NPCDialogText
                 type={type}
@@ -82,6 +82,9 @@ export const NPCDialog: React.FC<INPCDialogProps> = ({
             </TextContainer>
             {type === NPCDialogType.TextAndThumbnail && (
               <ThumbnailContainer>
+                <CloseButton onPointerDown={onClose}>
+                  <FaTimes size={12} />
+                </CloseButton>
                 <NPCThumbnail src={imagePath || aliceDefaultThumbnail} />
               </ThumbnailContainer>
             )}
@@ -96,20 +99,41 @@ const Container = styled.div`
   display: flex;
   width: 100%;
   height: 100%;
-
   box-sizing: border-box;
-  justify-content: center;
-  align-items: flex-start;
+  justify-content: flex-start;
+  align-items: center;
   position: relative;
+  padding: 1rem 1rem 0.5rem 1rem;
 `;
 
-const CloseIcon = styled.p`
+const CloseButton = styled.button`
   position: absolute;
-  top: -1.5rem;
-  right: -0.4rem;
+  top: -12px;
+  right: -12px;
+  width: 26px;
+  height: 26px;
+  background: #000;
+  border: 2px solid #fff;
+  border-radius: 2px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   cursor: pointer;
-  color: white;
-  font-size: 1.1rem !important;
+  z-index: 10;
+  padding: 0;
+  box-shadow: 0 2px 0px rgba(0, 0, 0, 1);
+  transition: all 0.1s;
+
+  &:hover {
+    background: #333;
+    border-color: #eee;
+  }
+  
+  &:active {
+    transform: translateY(2px);
+    box-shadow: 0 0 0px rgba(0, 0, 0, 1);
+  }
 `;
 
 interface ITextContainerProps {
@@ -117,18 +141,34 @@ interface ITextContainerProps {
 }
 
 const TextContainer = styled.div<ITextContainerProps>`
-  flex: ${({ flex }) => flex} 0 0;
-  width: 355px;
+  flex: ${({ flex }) => flex};
+  height: 100%;
+  padding-right: 1.5rem;
+  display: flex;
+  flex-direction: column;
 `;
 
 const ThumbnailContainer = styled.div`
-  flex: 30% 0 0;
+  flex-shrink: 0;
+  position: relative;
+  width: 116px;
+  height: 116px;
+  /* Layered pixel-art borders: inner black -> gold -> outer black */
+  border: 4px solid #1a100c;
+  border-radius: 2px;
+  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.4), 0 0 0 2px #d4a373, 0 0 0 4px #000;
+  background: #3e2723;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+  align-items: center;
+  margin-right: 8px;
+  padding: 2px;
 `;
 
 const NPCThumbnail = styled.img`
   image-rendering: pixelated;
-  height: 128px;
-  width: 128px;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  border-radius: 1px;
 `;

package/src/components/NPCDialog/NPCDialogText.tsx

@@ -118,14 +118,24 @@ export const NPCDialogText: React.FC<IProps> = ({
   );
 };
 
-const Container = styled.div``;
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding-bottom: 24px;
+`;
 
 const TextContainer = styled.p`
-  font-size: 0.7rem !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6;
   color: white;
   text-shadow: 1px 1px 0px #000000;
   letter-spacing: 1.2px;
   word-break: normal;
+  margin: 0;
+  flex: 1;
 `;
 
 interface IPressSpaceIndicatorProps {
@@ -134,8 +144,11 @@ interface IPressSpaceIndicatorProps {
 
 const PressSpaceIndicator = styled.img<IPressSpaceIndicatorProps>`
   position: absolute;
-  right: ${({ right }) => right};
-  bottom: 1rem;
-  height: 20.7px;
+  left: 0;
+  bottom: -0.5rem;
+  height: 20px;
+  object-fit: contain;
+  object-position: left;
   image-rendering: -webkit-optimize-contrast;
+  cursor: pointer;
 `;

package/src/components/typography/DynamicText.tsx

@@ -41,9 +41,11 @@ export const DynamicText: React.FC<IProps> = ({ text, onFinish, onStart }) => {
 };
 
 const TextContainer = styled.p`
-  font-size: 0.7rem !important;
+  font-size: 0.8rem !important;
+  line-height: 1.6;
   color: white;
   text-shadow: 1px 1px 0px #000000;
   letter-spacing: 1.2px;
   word-break: normal;
+  margin: 0;
 `;

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';