@rpg-engine/long-bow 0.8.182 → 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/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.182",
+  "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/CharacterListingForm.tsx

@@ -2,396 +2,101 @@ import { ICharacter } from '@rpg-engine/shared';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { ConfirmModal } from '../ConfirmModal';
-import { Input } from '../Input';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { CharacterListingModal } from './CharacterListingModal';
 
 export interface ICharacterListingFormProps {
   accountCharacters: ICharacter[];
-  selectedCharacterToList: ICharacter | null;
-  onCharacterSelectToList: (character: ICharacter) => void;
   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,
-  selectedCharacterToList,
-  onCharacterSelectToList,
   onCharacterList,
   atlasJSON,
   atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
   enableHotkeys,
   disableHotkeys,
 }) => {
-  const [price, setPrice] = useState('');
-  const [isCreatingOffer, setIsCreatingOffer] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const eligibleCharacters = accountCharacters.filter(
-    char => !char.isListedForSale && !char.tradedAt
-  );
-
-  const handleListClick = () => {
-    if (selectedCharacterToList && price && Number(price) > 0) {
-      setIsCreatingOffer(true);
-    }
-  };
-
-  const handleListConfirm = () => {
-    if (selectedCharacterToList && price && Number(price) > 0) {
-      onCharacterList(selectedCharacterToList._id!, Number(price));
-      setPrice('');
-      onCharacterSelectToList({} as ICharacter); // Clear selection
-      setIsCreatingOffer(false);
-      enableHotkeys?.();
-    }
-  };
-
-  const getCharacterLevel = (character: ICharacter): number => {
-    return character.skills?.level || 1;
-  };
+  const eligibleCount = accountCharacters.filter(
+    c => !c.isListedForSale && !c.tradedAt
+  ).length;
 
   return (
-    <>
-      {isCreatingOffer && (
-        <ConfirmModal
-          onClose={() => {
-            setIsCreatingOffer(false);
-            enableHotkeys?.();
-          }}
-          onConfirm={handleListConfirm}
-          message="Are you sure you want to list this character for sale?"
-        />
+    <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>
       )}
-
-      <FormContainer>
-        <SectionHeader>
-          <SectionLabel>List Character for Sale</SectionLabel>
-          <SectionDescription>
-            Select an offline character to list on the marketplace.
-          </SectionDescription>
-        </SectionHeader>
-
-        <CharacterSelectionRow>
-          <CharacterSlotWrapper>
-            {selectedCharacterToList ? (
-              <CharacterSpriteLarge>
-                <SpriteFromAtlas
-                  atlasIMG={atlasIMG}
-                  atlasJSON={atlasJSON}
-                  spriteKey={`${selectedCharacterToList.textureKey}/down/standing/0.png`}
-                  imgScale={3}
-                  height={64}
-                  width={64}
-                />
-              </CharacterSpriteLarge>
-            ) : (
-              <EmptyCharacterSlot>
-                <EmptySlotIcon>?</EmptySlotIcon>
-              </EmptyCharacterSlot>
-            )}
-          </CharacterSlotWrapper>
-
-          <CharacterDetails>
-            {selectedCharacterToList ? (
-              <>
-                <CharacterName>{selectedCharacterToList.name || 'Unknown'}</CharacterName>
-                <CharacterMeta>Level {getCharacterLevel(selectedCharacterToList)}</CharacterMeta>
-              </>
-            ) : (
-              <EmptySelection>Select a character</EmptySelection>
-            )}
-          </CharacterDetails>
-        </CharacterSelectionRow>
-
-        <PriceInputWrapper>
-          <PriceLabel>Set Price (Gold)</PriceLabel>
-          <PriceInputRow>
-            <Input
-              onChange={e => setPrice(e.target.value)}
-              value={price}
-              placeholder="Amount..."
-              type="number"
-              disabled={!selectedCharacterToList}
-              onBlur={enableHotkeys}
-              onFocus={disableHotkeys}
-              className="price-input"
-            />
-            <ListButton
-              icon={<ShoppingBag width={18} height={18} />}
-              label="List"
-              disabled={!selectedCharacterToList || !price || Number(price) <= 0}
-              onClick={handleListClick}
-            />
-          </PriceInputRow>
-        </PriceInputWrapper>
-
-        {eligibleCharacters.length > 0 && (
-          <AvailableCharactersSection>
-            <AvailableCharactersLabel>Available Characters</AvailableCharactersLabel>
-            <AvailableCharactersList>
-              {eligibleCharacters.map((character) => (
-                <AvailableCharacterItem
-                  key={character._id}
-                  $selected={selectedCharacterToList?._id === character._id}
-                  onClick={() => onCharacterSelectToList(character)}
-                  type="button"
-                >
-                  <MiniSprite>
-                    <SpriteFromAtlas
-                      atlasIMG={atlasIMG}
-                      atlasJSON={atlasJSON}
-                      spriteKey={`${character.textureKey}/down/standing/0.png`}
-                      imgScale={2}
-                      height={32}
-                      width={32}
-                    />
-                  </MiniSprite>
-                  <MiniCharacterInfo>
-                    <MiniCharacterName>{character.name}</MiniCharacterName>
-                    <MiniCharacterMeta>Lvl {getCharacterLevel(character)}</MiniCharacterMeta>
-                  </MiniCharacterInfo>
-                </AvailableCharacterItem>
-              ))}
-            </AvailableCharactersList>
-          </AvailableCharactersSection>
-        )}
-
-        {eligibleCharacters.length === 0 && (
-          <EmptyState>
-            <EmptyText>No eligible characters to list.</EmptyText>
-          </EmptyState>
-        )}
-      </FormContainer>
-    </>
+    </Wrapper>
   );
 };
 
-const FormContainer = styled.div`
-  width: 95%;
-  margin: 0 auto;
-  background: rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-const SectionHeader = styled.div`
+const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
-`;
-
-const SectionLabel = styled.p`
-  margin: 0;
-  font-size: 0.65rem;
-  color: #aaa;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-`;
-
-const SectionDescription = styled.p`
-  margin: 0;
-  font-size: 0.5rem;
-  color: #666;
-  line-height: 1.4;
-`;
-
-const CharacterSelectionRow = styled.div`
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
-`;
-
-const CharacterSlotWrapper = styled.div`
-  flex-shrink: 0;
-`;
-
-const CharacterSpriteLarge = styled.div`
-  display: flex;
   align-items: center;
   justify-content: center;
-  image-rendering: pixelated;
-  width: 64px;
-  height: 64px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  border-radius: 8px;
-`;
-
-const EmptyCharacterSlot = styled.div`
-  width: 64px;
-  height: 64px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 2px dashed rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const EmptySlotIcon = styled.span`
-  font-size: 1.5rem;
-  color: #666;
-  font-family: 'Press Start 2P', cursive;
-`;
-
-const CharacterDetails = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-`;
-
-const CharacterName = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.6rem;
-  color: #f3f4f6;
-`;
-
-const CharacterMeta = styled.span`
-  font-size: 0.5rem;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  gap: 20px;
+  padding: 40px 24px;
+  width: 95%;
+  margin: 0 auto;
 `;
 
-const EmptySelection = styled.span`
+const Description = styled.p`
+  margin: 0;
   font-size: 0.5rem;
   color: #666;
-  font-style: italic;
-`;
-
-const PriceInputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-const PriceLabel = styled.p`
-  margin: 0;
-  font-size: 0.55rem;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-`;
-
-const PriceInputRow = styled.div`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-
-  .price-input {
-    flex: 1;
-    height: 12px;
-  }
-`;
-
-const ListButton = styled(CTAButton)`
-  padding: 10px 16px;
-  height: 32px;
-  flex-shrink: 0;
-
-  span {
-    font-size: 0.6rem;
-  }
-
-  svg {
-    font-size: 1.1rem;
-  }
-`;
-
-const AvailableCharactersSection = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-
-const AvailableCharactersLabel = styled.p`
-  margin: 0;
-  font-size: 0.55rem;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-`;
-
-const AvailableCharactersList = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  max-height: 200px;
-  overflow-y: auto;
-  padding: 4px;
-`;
-
-const AvailableCharacterItem = styled.button<{ $selected: boolean }>`
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px;
-  background: ${({ $selected }) => $selected ? 'rgba(245, 158, 11, 0.1)' : 'rgba(255, 255, 255, 0.02)'};
-  border: 1px solid ${({ $selected }) => $selected ? 'rgba(245, 158, 11, 0.4)' : 'rgba(255, 255, 255, 0.08)'};
-  border-radius: 6px;
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
-
-  &:hover {
-    border-color: rgba(245, 158, 11, 0.3);
-    background: rgba(245, 158, 11, 0.05);
-  }
+  text-align: center;
+  line-height: 1.6;
+  max-width: 320px;
 `;
 
-const MiniSprite = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  image-rendering: pixelated;
-  flex-shrink: 0;
-`;
+const OpenButton = styled(CTAButton)`
+  padding: 14px 24px;
 
-const MiniCharacterInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  align-items: flex-start;
+  span { font-size: 0.65rem; }
+  svg  { font-size: 1.2rem; }
 `;
 
-const MiniCharacterName = styled.span`
-  font-family: 'Press Start 2P', cursive;
+const NoEligible = styled.span`
   font-size: 0.45rem;
-  color: #f3f4f6;
-`;
-
-const MiniCharacterMeta = styled.span`
-  font-size: 0.4rem;
-  color: #888;
+  color: #52525b;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
-`;
-
-const EmptyState = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 6px;
-`;
-
-const EmptyText = styled.span`
-  font-size: 0.45rem;
-  color: #666;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 1px;
 `;