@rpg-engine/long-bow 0.8.206 → 0.8.207

package/package.json

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

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -15,6 +15,8 @@ export interface ICharacterListingModalProps {
   isOpen: boolean;
   onClose: () => void;
   accountCharacters: ICharacter[];
+  /** ID of the currently active/playing character — cannot be listed */
+  activeCharacterId?: string;
   /** Items atlas — for UI sprites like the DC coin */
   atlasJSON: any;
   atlasIMG: any;
@@ -30,6 +32,7 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
   isOpen,
   onClose,
   accountCharacters,
+  activeCharacterId,
   atlasJSON,
   atlasIMG,
   characterAtlasJSON,
@@ -55,7 +58,9 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
     c => !c.isListedForSale && !c.tradedAt
   );
 
-  const canList = !!selectedId && Number(price) > 0;
+  const isActiveCharacter = (c: ICharacter) => !!activeCharacterId && c._id === activeCharacterId;
+
+  const canList = !!selectedId && Number(price) > 0 && selectedId !== activeCharacterId;
 
   const handleClose = () => {
     setSelectedId(null);
@@ -110,22 +115,25 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
             ) : (
               eligibleCharacters.map(character => {
                 const isSelected = selectedId === character._id;
+                const isActive = isActiveCharacter(character);
                 return (
                   <CharacterRow
                     key={character._id}
-                    $selected={isSelected}
-                    onPointerDown={() => setSelectedId(character._id!)}
+                    $selected={isSelected && !isActive}
+                    $disabled={isActive}
+                    onPointerDown={() => !isActive && setSelectedId(character._id!)}
                     role="radio"
-                    aria-checked={isSelected}
-                    tabIndex={0}
+                    aria-checked={isSelected && !isActive}
+                    aria-disabled={isActive}
+                    tabIndex={isActive ? -1 : 0}
                     onKeyDown={e => {
-                      if (e.key === 'Enter' || e.key === ' ') {
+                      if (!isActive && (e.key === 'Enter' || e.key === ' ')) {
                         e.preventDefault();
                         setSelectedId(character._id!);
                       }
                     }}
                   >
-                    <RadioCircle $selected={isSelected} />
+                    <RadioCircle $selected={isSelected && !isActive} $disabled={isActive} />
                     <SpriteWrapper>
                       <SpriteFromAtlas
                         atlasIMG={characterAtlasIMG}
@@ -140,6 +148,7 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
                       <CharacterName>{character.name || 'Unknown'}</CharacterName>
                       <CharacterMeta>Level {getLevel(character)}</CharacterMeta>
                     </CharacterInfo>
+                    {isActive && <ActiveTag>In-game</ActiveTag>}
                   </CharacterRow>
                 );
               })
@@ -266,20 +275,21 @@ const CharacterList = styled.div`
   &::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.3); border-radius: 4px; }
 `;
 
-const CharacterRow = styled.div<{ $selected: boolean }>`
+const CharacterRow = styled.div<{ $selected: boolean; $disabled?: boolean }>`
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 12px;
-  border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.08)')};
+  border: 1px solid ${({ $selected, $disabled }) => ($disabled ? 'rgba(255,255,255,0.04)' : $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;
+  background: ${({ $selected, $disabled }) => ($disabled ? 'rgba(0,0,0,0.15)' : $selected ? 'rgba(245,158,11,0.1)' : 'rgba(255,255,255,0.02)')};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
   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)')};
+    border-color: ${({ $selected, $disabled }) => ($disabled ? 'rgba(255,255,255,0.04)' : $selected ? '#f59e0b' : 'rgba(245,158,11,0.4)')};
+    background: ${({ $selected, $disabled }) => ($disabled ? 'rgba(0,0,0,0.15)' : $selected ? 'rgba(245,158,11,0.1)' : 'rgba(245,158,11,0.05)')};
   }
 
   &:focus-visible {
@@ -288,11 +298,11 @@ const CharacterRow = styled.div<{ $selected: boolean }>`
   }
 `;
 
-const RadioCircle = styled.div<{ $selected: boolean }>`
+const RadioCircle = styled.div<{ $selected: boolean; $disabled?: boolean }>`
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  border: 2px solid ${({ $selected, $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : $selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -303,12 +313,23 @@ const RadioCircle = styled.div<{ $selected: boolean }>`
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: #f59e0b;
+    background: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b')};
     opacity: ${({ $selected }) => ($selected ? 1 : 0)};
     transition: opacity 0.15s;
   }
 `;
 
+const ActiveTag = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.35rem !important;
+  color: #666 !important;
+  background: rgba(255,255,255,0.06);
+  padding: 3px 6px;
+  border-radius: 3px;
+  white-space: nowrap;
+  margin-left: auto;
+`;
+
 const SpriteWrapper = styled.div`
   display: flex;
   align-items: center;

package/src/components/Marketplace/Marketplace.tsx

@@ -336,6 +336,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
               onCharacterDelist={onCharacterDelist ?? (() => {})}
               accountCharacters={accountCharacters ?? []}
               onCharacterList={onCharacterList ?? (() => {})}
+              activeCharacterId={props.characterId}
               atlasJSON={props.atlasJSON}
               atlasIMG={props.atlasIMG}
               characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}

package/src/components/Marketplace/MyCharacterListingsPanel.tsx

@@ -20,6 +20,8 @@ export interface IMyCharacterListingsPanelProps {
   /** Characters that can be listed (used for the List a Character modal) */
   accountCharacters: ICharacter[];
   onCharacterList: (characterId: string, price: number) => void;
+  /** ID of the currently active character */
+  activeCharacterId?: string;
   /** Items atlas — for UI sprites like the DC coin */
   atlasJSON: any;
   atlasIMG: any;
@@ -39,6 +41,7 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
   onCharacterDelist,
   accountCharacters,
   onCharacterList,
+  activeCharacterId,
   atlasJSON,
   atlasIMG,
   characterAtlasJSON,
@@ -80,6 +83,7 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
         isOpen={isListingModalOpen}
         onClose={() => setIsListingModalOpen(false)}
         accountCharacters={accountCharacters}
+        activeCharacterId={activeCharacterId}
         atlasJSON={atlasJSON}
         atlasIMG={atlasIMG}
         characterAtlasJSON={characterAtlasJSON}