@rpg-engine/long-bow 0.8.206 → 0.8.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.206",
+  "version": "0.8.208",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.10.109",
+    "@rpg-engine/shared": "^0.10.115",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Marketplace/CharacterDetailModal.tsx

@@ -5,6 +5,7 @@ import { FaTimes } from 'react-icons/fa';
 import styled, { keyframes } from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
 import { ConfirmModal } from '../ConfirmModal';
+import { gemColors } from '../Item/Inventory/ItemGem';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
@@ -34,6 +35,12 @@ const RARITY_COLORS: Record<string, string> = {
 const rarityColor = (rarity?: string) =>
   RARITY_COLORS[(rarity ?? '').toLowerCase()] ?? RARITY_COLORS.common;
 
+const rarityGlowColor = (rarity?: string): string | null => {
+  const key = (rarity ?? '').toLowerCase();
+  if (!key || key === 'common') return null;
+  return RARITY_COLORS[key] ?? null;
+};
+
 const formatEquipmentSlot = (slot?: string) => {
   if (!slot) return 'Unknown';
 
@@ -86,9 +93,9 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
   if (!isOpen || !listing) return null;
 
   const snap = listing.characterSnapshot;
-  const topSkills = Object.entries(snap.skills ?? {})
-    .sort(([, a], [, b]) => b - a)
-    .slice(0, 8);
+  const topSkills = Object.entries(snap.skills ?? {}).sort(
+    ([, a], [, b]) => b - a
+  );
 
   return (
     <ModalPortal>
@@ -121,83 +128,101 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
             </CloseButton>
           </Header>
 
-          <HeroSection>
-            <SpriteContainer>
-              <SpriteFromAtlas
-                atlasIMG={characterAtlasIMG}
-                atlasJSON={characterAtlasJSON}
-                spriteKey={`${snap.textureKey}/down/standing/0.png`}
-                imgScale={4}
-                height={96}
-                width={96}
-                centered
-              />
-            </SpriteContainer>
-            <HeroInfo>
-              <CharacterName>{snap.name || 'Unknown'}</CharacterName>
-              <CharacterClass>
-                Lv.{snap.level} · {snap.class}
-              </CharacterClass>
-              <CharacterOrigin>
-                {snap.race} · {snap.faction}
-              </CharacterOrigin>
-              <ModeBadge $hardcore={snap.mode?.toLowerCase() === 'hardcore'}>
-                {snap.mode || 'Standard'}
-              </ModeBadge>
-            </HeroInfo>
-          </HeroSection>
-
-          <Divider />
-
-          <MetaColumns>
-            {topSkills.length > 0 && (
-              <Section>
-                <SectionTitle>Skills</SectionTitle>
-                <SkillsList>
-                  {topSkills.map(([name, value]) => (
-                    <SkillRow key={name}>
-                      <SkillName>{name}</SkillName>
-                      <SkillValue>{value}</SkillValue>
-                    </SkillRow>
-                  ))}
-                </SkillsList>
-              </Section>
-            )}
-
-            {snap.equipment?.length > 0 && (
-              <Section>
-                <SectionTitle>Equipment</SectionTitle>
-                <EquipmentList>
-                  {snap.equipment.map((eq, i) => (
-                    <EquipmentRow key={i}>
-                      <EquipmentSprite>
-                        <SpriteFromAtlas
-                          atlasIMG={atlasIMG}
-                          atlasJSON={atlasJSON}
-                          spriteKey={eq.itemKey}
-                          imgScale={2}
-                          width={32}
-                          height={32}
-                          centered
-                        />
-                      </EquipmentSprite>
-                      <EquipMeta>
-                        <EquipName>{eq.itemName}</EquipName>
-                        <EquipDetails>
-                          <EquipSlot>{formatEquipmentSlot(eq.slot)}</EquipSlot>
-                          <RarityBadge $rarity={eq.rarity}>
-                            {eq.rarity || 'Common'}
-                          </RarityBadge>
-                        </EquipDetails>
-                      </EquipMeta>
-                    </EquipmentRow>
-                  ))}
-                </EquipmentList>
-              </Section>
-            )}
-          </MetaColumns>
-
-          <Divider />
+          <ScrollableBody>
+            <HeroSection>
+              <SpriteContainer>
+                <SpriteFromAtlas
+                  atlasIMG={characterAtlasIMG}
+                  atlasJSON={characterAtlasJSON}
+                  spriteKey={`${snap.textureKey}/down/standing/0.png`}
+                  imgScale={4}
+                  height={96}
+                  width={96}
+                  centered
+                />
+              </SpriteContainer>
+              <HeroInfo>
+                <CharacterName>{snap.name || 'Unknown'}</CharacterName>
+                <CharacterClass>
+                  Lv.{snap.level} · {snap.class}
+                </CharacterClass>
+                <CharacterOrigin>
+                  {snap.race} · {snap.faction}
+                </CharacterOrigin>
+                <ModeBadge $hardcore={snap.mode?.toLowerCase() === 'hardcore'}>
+                  {snap.mode || 'Standard'}
+                </ModeBadge>
+                {snap.gold != null && snap.gold > 0 && (
+                  <GoldRow>
+                    <GoldLabel>GOLD</GoldLabel>
+                    <GoldAmount>{snap.gold.toLocaleString()}</GoldAmount>
+                  </GoldRow>
+                )}
+              </HeroInfo>
+            </HeroSection>
+
+            <Divider />
+
+            <MetaColumns>
+              {topSkills.length > 0 && (
+                <Section>
+                  <SectionTitle>Skills</SectionTitle>
+                  <SkillsList>
+                    {topSkills.map(([name, value]) => (
+                      <SkillRow key={name}>
+                        <SkillName>{name}</SkillName>
+                        <SkillValue>{value}</SkillValue>
+                      </SkillRow>
+                    ))}
+                  </SkillsList>
+                </Section>
+              )}
+
+              {snap.equipment?.length > 0 && (
+                <Section>
+                  <SectionTitle>Equipment</SectionTitle>
+                  <EquipmentList>
+                    {snap.equipment.map((eq, i) => (
+                      <EquipmentRow key={i}>
+                        <EquipmentSprite $rarity={eq.rarity}>
+                          <SpriteFromAtlas
+                            atlasIMG={atlasIMG}
+                            atlasJSON={atlasJSON}
+                            spriteKey={eq.itemKey}
+                            imgScale={2}
+                            width={32}
+                            height={32}
+                            centered
+                          />
+                          {eq.attachedGems && eq.attachedGems.length > 0 && (
+                            <GemRow>
+                              {eq.attachedGems.map((gem, gi) => (
+                                <GemDot
+                                  key={gi}
+                                  $color={gemColors[gem.key] ?? '#fff'}
+                                />
+                              ))}
+                            </GemRow>
+                          )}
+                        </EquipmentSprite>
+                        <EquipMeta>
+                          <EquipName>{eq.itemName}</EquipName>
+                          <EquipDetails>
+                            <EquipSlot>{formatEquipmentSlot(eq.slot)}</EquipSlot>
+                            <RarityBadge $rarity={eq.rarity}>
+                              {eq.rarity || 'Common'}
+                            </RarityBadge>
+                          </EquipDetails>
+                        </EquipMeta>
+                      </EquipmentRow>
+                    ))}
+                  </EquipmentList>
+                </Section>
+              )}
+            </MetaColumns>
+          </ScrollableBody>
+
+          <FooterDivider />
 
           <Footer>
             <SellerInfo>Listed by {listing.listedByCharacterName}</SellerInfo>
@@ -257,29 +282,16 @@ const ModalContent = styled.div`
   background: #1a1a2e;
   border: 2px solid #f59e0b;
   border-radius: 8px;
-  padding: 20px 24px;
+  padding: 20px 24px 16px;
   width: 580px;
   max-width: 96%;
   max-height: 85dvh;
   display: flex;
   flex-direction: column;
   gap: 14px;
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
   pointer-events: auto;
   animation: ${scaleIn} 0.15s ease-out;
-
-  &::-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 Header = styled.div`
@@ -377,6 +389,30 @@ const Divider = styled.hr`
   flex-shrink: 0;
 `;
 
+const FooterDivider = styled(Divider)``;
+
+const ScrollableBody = styled.div`
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+
+  &::-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 Section = styled.div`
   display: flex;
   flex-direction: column;
@@ -445,13 +481,66 @@ const EquipmentRow = styled.div`
   min-width: 0;
 `;
 
-const EquipmentSprite = styled.div`
+const EquipmentSprite = styled.div<{ $rarity?: string }>`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 32px;
   height: 32px;
   flex-shrink: 0;
+  border-radius: 3px;
+  ${({ $rarity }) => {
+    const color = rarityGlowColor($rarity);
+    return color
+      ? `box-shadow: 0 0 4px 3px ${color} inset, 0 0 6px 2px ${color};`
+      : '';
+  }}
+`;
+
+const GemRow = styled.div`
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  display: flex;
+  gap: 1px;
+  pointer-events: none;
+`;
+
+const GemDot = styled.div<{ $color: string }>`
+  width: 5px;
+  height: 5px;
+  border-radius: 1px;
+  transform: rotate(45deg);
+  background: radial-gradient(
+    circle at 30% 30%,
+    rgba(255, 255, 255, 0.8),
+    transparent 40%
+  ),
+  linear-gradient(45deg, ${({ $color }) => $color}, rgba(255, 255, 255, 0.2));
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  box-shadow: 0 0 3px ${({ $color }) => $color};
+`;
+
+const GoldRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 2px;
+`;
+
+const GoldLabel = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.35rem !important;
+  color: #6b7280 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const GoldAmount = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.38rem !important;
+  color: #fde68a !important;
 `;
 
 const EquipMeta = styled.div`

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}