@rpg-engine/long-bow 0.8.207 → 0.8.208

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.207",
+  "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`