@rpg-engine/long-bow 0.8.181 → 0.8.184

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

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { ICharacterListingModalProps } from '../../../components/Marketplace/CharacterListingModal';
+declare const meta: Meta<ICharacterListingModalProps>;
+export default meta;
+export declare const WithMultipleCharacters: Story;
+export declare const WithAlreadyListedFiltered: Story;
+export declare const NoEligibleCharacters: Story;
+export declare const SingleCharacter: Story;

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+declare const meta: Meta;
+export default meta;
+export declare const CharacterBrowse: Story;
+export declare const CharacterBrowseLoading: Story;
+export declare const CharacterBrowseEmpty: Story;
+export declare const CharacterBrowseFiltered: Story;
+export declare const MyCharacterListings: Story;
+export declare const MyCharacterListingsEmpty: Story;
+export declare const CharacterListingPending: Story;

package/dist/stories/shared/RadioOption.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, Story } from '@storybook/react';
+import { IRadioOptionProps } from '../../components/shared/RadioOption';
+declare const meta: Meta;
+export default meta;
+export declare const Unselected: Story<IRadioOptionProps>;
+export declare const Selected: Story<IRadioOptionProps>;
+export declare const Disabled: Story<IRadioOptionProps>;
+export declare const InteractiveGroup: Story;

package/package.json

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

package/src/components/DCWallet/DCWalletContent.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { FaShoppingCart } from 'react-icons/fa';
 import styled from 'styled-components';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
+import { DCRateStrip } from '../shared/DCRateStrip';
 import { DCHistoryPanel, IDCTransaction } from './DCHistoryPanel';
 import { DCTransferPanel, IDCTransferCharacterResult } from './DCTransferPanel';
 
@@ -22,7 +23,8 @@ export interface IDCWalletContentProps {
   searchResults?: IDCTransferCharacterResult[];
 }
 
-const DC_TO_GOLD = 5500;
+import { DC_TO_GOLD_SWAP_RATE } from '@rpg-engine/shared';
+
 const DC_TO_USD = 100;
 
 export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
@@ -42,7 +44,7 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
   searchResults,
 }) => {
   const usdValue = (dcBalance / DC_TO_USD).toFixed(2);
-  const goldValue = (dcBalance * DC_TO_GOLD).toLocaleString();
+  const goldValue = (dcBalance * DC_TO_GOLD_SWAP_RATE).toLocaleString();
 
   const tabs = [
     {
@@ -94,13 +96,7 @@ export const DCWalletContent: React.FC<IDCWalletContentProps> = ({
             </BuyButton>
           )}
         </BalanceTop>
-        <RateStrip>
-          <RateItem><RateNum>1 DC</RateNum><RateSep>=</RateSep><RateVal>5,500 Gold</RateVal></RateItem>
-          <RateDivider />
-          <RateItem><RateNum>100 DC</RateNum><RateSep>=</RateSep><RateVal>1 USD</RateVal></RateItem>
-          <RateDivider />
-          <RateItem><RateNum>1 USD</RateNum><RateSep>=</RateSep><RateVal>550K Gold</RateVal></RateItem>
-        </RateStrip>
+        <DCRateStrip />
       </BalanceHeader>
 
       <TabsWrapper>
@@ -207,44 +203,6 @@ const BuyButtonLabel = styled.span`
   text-shadow: none !important;
 `;
 
-const RateStrip = styled.div`
-  display: flex;
-  align-items: center;
-  border-top: 1px solid rgba(245, 158, 11, 0.1);
-  padding-top: 8px;
-`;
-
-const RateItem = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
-  justify-content: center;
-`;
-
-const RateDivider = styled.div`
-  width: 1px;
-  height: 12px;
-  background: rgba(245, 158, 11, 0.2);
-`;
-
-const RateNum = styled.span`
-  font-family: 'Press Start 2P', cursive !important;
-  font-size: 6px !important;
-  color: rgba(255, 255, 255, 0.5) !important;
-`;
-
-const RateSep = styled.span`
-  font-family: 'Press Start 2P', cursive !important;
-  font-size: 6px !important;
-  color: rgba(255, 255, 255, 0.2) !important;
-`;
-
-const RateVal = styled.span`
-  font-family: 'Press Start 2P', cursive !important;
-  font-size: 6px !important;
-  color: rgba(254, 240, 138, 0.6) !important;
-`;
 
 const TabsWrapper = styled.div`
   padding: 0 2.5%;

package/src/components/Marketplace/BuyPanel.tsx

@@ -643,6 +643,7 @@ const WrapperContainer = styled.div<{ $sell: boolean }>`
 
 const ItemComponentScrollWrapper = styled.div`
   overflow-y: scroll;
+  overflow-x: hidden;
   height: 390px;
   width: 95%;
   margin: 1rem auto 0 auto;

package/src/components/Marketplace/CharacterListingForm.tsx

@@ -0,0 +1,102 @@
+import { ICharacter } from '@rpg-engine/shared';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { CharacterListingModal } from './CharacterListingModal';
+
+export interface ICharacterListingFormProps {
+  accountCharacters: ICharacter[];
+  onCharacterList: (characterId: string, price: number) => void;
+  /** Items atlas — for UI sprites like the DC coin */
+  atlasJSON: any;
+  atlasIMG: any;
+  /** Entities atlas — for character sprites */
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+}
+
+export const CharacterListingForm: React.FC<ICharacterListingFormProps> = ({
+  accountCharacters,
+  onCharacterList,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  enableHotkeys,
+  disableHotkeys,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const eligibleCount = accountCharacters.filter(
+    c => !c.isListedForSale && !c.tradedAt
+  ).length;
+
+  return (
+    <Wrapper>
+      <CharacterListingModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        accountCharacters={accountCharacters}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        characterAtlasJSON={characterAtlasJSON}
+        characterAtlasIMG={characterAtlasIMG}
+        onCharacterList={onCharacterList}
+        enableHotkeys={enableHotkeys}
+        disableHotkeys={disableHotkeys}
+      />
+
+      <Description>
+        List one of your offline characters on the marketplace. Prices are set in DC.
+      </Description>
+
+      <OpenButton
+        icon={<ShoppingBag width={20} height={20} />}
+        label={`List a Character${eligibleCount > 0 ? ` (${eligibleCount} eligible)` : ''}`}
+        disabled={eligibleCount === 0}
+        onClick={() => setIsModalOpen(true)}
+      />
+
+      {eligibleCount === 0 && (
+        <NoEligible>No eligible characters to list.</NoEligible>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  padding: 40px 24px;
+  width: 95%;
+  margin: 0 auto;
+`;
+
+const Description = styled.p`
+  margin: 0;
+  font-size: 0.5rem;
+  color: #666;
+  text-align: center;
+  line-height: 1.6;
+  max-width: 320px;
+`;
+
+const OpenButton = styled(CTAButton)`
+  padding: 14px 24px;
+
+  span { font-size: 0.65rem; }
+  svg  { font-size: 1.2rem; }
+`;
+
+const NoEligible = styled.span`
+  font-size: 0.45rem;
+  color: #52525b;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -0,0 +1,404 @@
+import { ICharacter } from '@rpg-engine/shared';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import React, { useCallback, useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled, { keyframes } from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { ConfirmModal } from '../ConfirmModal';
+import { Input } from '../Input';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { DCRateStrip } from '../shared/DCRateStrip';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface ICharacterListingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  accountCharacters: ICharacter[];
+  /** Items atlas — for UI sprites like the DC coin */
+  atlasJSON: any;
+  atlasIMG: any;
+  /** Entities atlas — for character sprites */
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
+  onCharacterList: (characterId: string, price: number) => void;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+}
+
+export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
+  isOpen,
+  onClose,
+  accountCharacters,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  onCharacterList,
+  enableHotkeys,
+  disableHotkeys,
+}) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [price, setPrice] = useState('');
+  const [isConfirming, setIsConfirming] = useState(false);
+
+  if (!isOpen) return null;
+
+  const eligibleCharacters = accountCharacters.filter(
+    c => !c.isListedForSale && !c.tradedAt
+  );
+
+  const canList = !!selectedId && Number(price) > 0;
+
+  const handleClose = () => {
+    setSelectedId(null);
+    setPrice('');
+    enableHotkeys?.();
+    onClose();
+  };
+
+  const handleListClick = () => {
+    if (canList) setIsConfirming(true);
+  };
+
+  const handleConfirm = () => {
+    if (!selectedId || !canList) return;
+    onCharacterList(selectedId, Number(price));
+    setSelectedId(null);
+    setPrice('');
+    setIsConfirming(false);
+    enableHotkeys?.();
+    onClose();
+  };
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const getLevel = (c: ICharacter) => c.skills?.level || 1;
+
+  return (
+    <ModalPortal>
+      {isConfirming && (
+        <ConfirmModal
+          onConfirm={handleConfirm}
+          onClose={() => { setIsConfirming(false); enableHotkeys?.(); }}
+          message="Are you sure you want to list this character for sale?"
+        />
+      )}
+
+      <Overlay onPointerDown={handleClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>List Character for Sale</Title>
+            <CloseButton onPointerDown={handleClose} aria-label="Close" type="button">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <CharacterList>
+            {eligibleCharacters.length === 0 ? (
+              <EmptyState>No eligible characters to list.</EmptyState>
+            ) : (
+              eligibleCharacters.map(character => {
+                const isSelected = selectedId === character._id;
+                return (
+                  <CharacterRow
+                    key={character._id}
+                    $selected={isSelected}
+                    onPointerDown={() => setSelectedId(character._id!)}
+                    role="radio"
+                    aria-checked={isSelected}
+                    tabIndex={0}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setSelectedId(character._id!);
+                      }
+                    }}
+                  >
+                    <RadioCircle $selected={isSelected} />
+                    <SpriteWrapper>
+                      <SpriteFromAtlas
+                        atlasIMG={characterAtlasIMG}
+                        atlasJSON={characterAtlasJSON}
+                        spriteKey={`${character.textureKey}/down/standing/0.png`}
+                        imgScale={2}
+                        height={40}
+                        width={40}
+                      />
+                    </SpriteWrapper>
+                    <CharacterInfo>
+                      <CharacterName>{character.name || 'Unknown'}</CharacterName>
+                      <CharacterMeta>Level {getLevel(character)}</CharacterMeta>
+                    </CharacterInfo>
+                  </CharacterRow>
+                );
+              })
+            )}
+          </CharacterList>
+
+          <PriceSection>
+            <PriceLabel>Set Price (DC)</PriceLabel>
+            <PriceRow>
+              <Input
+                onChange={e => setPrice(e.target.value)}
+                value={price}
+                placeholder="Amount..."
+                type="number"
+                disabled={eligibleCharacters.length === 0}
+                onFocus={disableHotkeys}
+                onBlur={enableHotkeys}
+                className="price-input"
+              />
+              <ListBtn
+                icon={<ShoppingBag width={18} height={18} />}
+                label="List"
+                disabled={!canList}
+                onClick={handleListClick}
+              />
+            </PriceRow>
+            {price && Number(price) > 0 && (
+              <PricePreview>
+                <DCCoinWrapper>
+                  <SpriteFromAtlas
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    spriteKey="others/definya-coin.png"
+                    imgScale={1}
+                  />
+                </DCCoinWrapper>
+                <PricePreviewAmount>{Number(price).toLocaleString()} DC</PricePreviewAmount>
+              </PricePreview>
+            )}
+            <DCRateStrip />
+          </PriceSection>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
+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: 440px;
+  max-width: 92%;
+  max-height: 80dvh;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow: hidden;
+  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 !important;
+  font-size: 0.65rem !important;
+  color: #fef08a !important;
+`;
+
+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 CharacterList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  max-height: 260px;
+  padding: 2px;
+
+  &::-webkit-scrollbar { width: 6px; }
+  &::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
+  &::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.3); border-radius: 4px; }
+`;
+
+const CharacterRow = styled.div<{ $selected: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.08)')};
+  border-radius: 6px;
+  background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'rgba(255,255,255,0.02)')};
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(245,158,11,0.4)')};
+    background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'rgba(245,158,11,0.05)')};
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(245,158,11,0.6);
+    outline-offset: 2px;
+  }
+`;
+
+const RadioCircle = styled.div<{ $selected: boolean }>`
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #f59e0b;
+    opacity: ${({ $selected }) => ($selected ? 1 : 0)};
+    transition: opacity 0.15s;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image-rendering: pixelated;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+`;
+
+const CharacterInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+`;
+
+const CharacterName = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.5rem !important;
+  color: #f3f4f6 !important;
+`;
+
+const CharacterMeta = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.4rem !important;
+  color: #888 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const PricePreview = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const DCCoinWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+const PricePreviewAmount = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: #fef08a !important;
+`;
+
+const PriceSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding-top: 12px;
+`;
+
+const PriceLabel = styled.p`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: #888 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const PriceRow = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  .price-input { flex: 1; height: 12px; }
+`;
+
+const ListBtn = styled(CTAButton)`
+  flex-shrink: 0;
+  padding: 10px 16px;
+  height: 32px;
+
+  span { font-size: 0.6rem; }
+  svg  { font-size: 1.1rem; }
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.5rem !important;
+  color: #666 !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;