@rpg-engine/long-bow 0.8.136 → 0.8.138

package/src/components/Marketplace/MarketplaceBuyModal.tsx

@@ -0,0 +1,230 @@
+import React, { useCallback, useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { Button, ButtonTypes } from '../Button';
+
+export type MarketplacePaymentMethod = 'gold' | 'dc';
+
+export interface IMarketplaceBuyModalProps {
+  goldPrice: number;
+  dcEquivalentPrice: number;
+  dcBalance: number;
+  onConfirm: (paymentMethod: MarketplacePaymentMethod) => void;
+  onClose: () => void;
+}
+
+export const MarketplaceBuyModal: React.FC<IMarketplaceBuyModalProps> = ({
+  goldPrice,
+  dcEquivalentPrice,
+  dcBalance,
+  onConfirm,
+  onClose,
+}) => {
+  const [selected, setSelected] = useState<MarketplacePaymentMethod>('gold');
+  const hasSufficientDC = dcBalance >= dcEquivalentPrice;
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const handleConfirm = useCallback(() => {
+    onConfirm(selected);
+  }, [selected, onConfirm]);
+
+  return (
+    <ModalPortal>
+      <Overlay onPointerDown={onClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>Confirm Purchase</Title>
+            <CloseButton onPointerDown={onClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <Options>
+            <RadioOption
+              $selected={selected === 'gold'}
+              onPointerDown={() => setSelected('gold')}
+            >
+              <RadioCircle $selected={selected === 'gold'} />
+              <OptionText>
+                <OptionLabel>Gold</OptionLabel>
+                <OptionSub>{goldPrice.toLocaleString()} gold</OptionSub>
+              </OptionText>
+            </RadioOption>
+
+            <RadioOption
+              $selected={selected === 'dc'}
+              $disabled={!hasSufficientDC}
+              onPointerDown={() => hasSufficientDC && setSelected('dc')}
+            >
+              <RadioCircle $selected={selected === 'dc'} />
+              <OptionText>
+                <OptionLabel $disabled={!hasSufficientDC}>Definya Coin</OptionLabel>
+                <OptionSub>
+                  {dcEquivalentPrice.toLocaleString()} DC
+                  {' '}
+                  <BalanceHint $insufficient={!hasSufficientDC}>
+                    ({dcBalance.toLocaleString()} available)
+                  </BalanceHint>
+                </OptionSub>
+              </OptionText>
+            </RadioOption>
+          </Options>
+
+          <ConfirmRow>
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm}>
+              Confirm
+            </Button>
+          </ConfirmRow>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  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 24px;
+  min-width: 300px;
+  max-width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  pointer-events: auto;
+  animation: scaleIn 0.15s ease-out;
+
+  @keyframes scaleIn {
+    from { transform: scale(0.85); opacity: 0; }
+    to   { transform: scale(1);    opacity: 1; }
+  }
+`;
+
+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;
+  font-size: 0.7rem;
+  color: #fef08a;
+`;
+
+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;
+
+  &:hover {
+    color: #ffffff;
+  }
+`;
+
+const Options = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+
+const RadioOption = 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.15)')};
+  border-radius: 6px;
+  background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'transparent')};
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b')};
+  }
+`;
+
+const RadioCircle = styled.div<{ $selected: boolean }>`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #f59e0b;
+    opacity: ${({ $selected }) => ($selected ? 1 : 0)};
+    transition: opacity 0.15s;
+  }
+`;
+
+const OptionText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+`;
+
+const OptionLabel = styled.span<{ $disabled?: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.4)' : '#ffffff')};
+`;
+
+const OptionSub = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.55);
+`;
+
+const BalanceHint = styled.span<{ $insufficient: boolean }>`
+  color: ${({ $insufficient }) => ($insufficient ? '#ef4444' : 'rgba(255, 255, 255, 0.4)')};
+`;
+
+const ConfirmRow = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 4px;
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -19,6 +19,7 @@ export interface IMarketPlaceRowsPropos {
   atlasIMG: any;
   item: IItem;
   itemPrice: number;
+  dcEquivalentPrice?: number;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
   onMarketPlaceItemBuy?: () => void;
@@ -31,6 +32,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   atlasIMG,
   item,
   itemPrice,
+  dcEquivalentPrice,
   equipmentSet,
   scale,
   onMarketPlaceItemBuy,
@@ -88,23 +90,32 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
       </ItemIconContainer>
 
       <Flex>
-        <ItemIconContainer>
-          <GoldContainer>
-            <SpriteFromAtlas
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              spriteKey="others/gold-coin-qty-5.png"
-              imgScale={2}
-            />
-          </GoldContainer>
-          <PriceValue>
-            <p>
-              <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
-                ${itemPrice}
+        <PriceContainer>
+          <ItemIconContainer>
+            <GoldContainer>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey="others/gold-coin-qty-5.png"
+                imgScale={2}
+              />
+            </GoldContainer>
+            <PriceValue>
+              <p>
+                <Ellipsis maxLines={1} maxWidth="120px" fontSize="10px">
+                  ${itemPrice}
+                </Ellipsis>
+              </p>
+            </PriceValue>
+          </ItemIconContainer>
+          {dcEquivalentPrice !== undefined && (
+            <DCPriceLabel>
+              <Ellipsis maxLines={1} maxWidth="80px" fontSize="9px">
+                {dcEquivalentPrice} DC
               </Ellipsis>
-            </p>
-          </PriceValue>
-        </ItemIconContainer>
+            </DCPriceLabel>
+          )}
+        </PriceContainer>
         <ButtonContainer>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
@@ -176,6 +187,20 @@ const SpriteContainer = styled.div`
   left: 0.5rem;
 `;
 
+const PriceContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+`;
+
+const DCPriceLabel = styled.p`
+  margin: 0;
+  margin-left: 40px;
+  color: #fef08a;
+  font-size: 0.7rem;
+`;
+
 const PriceValue = styled.div`
   margin-left: 40px;
 `;

package/src/components/Store/Store.tsx

@@ -168,6 +168,8 @@ export const Store: React.FC<IStoreProps> = ({
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
           onAddToCart={handleAddPackToCart}
           onSelectPack={setSelectedPack}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
         />
       ),
     },
@@ -176,9 +178,11 @@ export const Store: React.FC<IStoreProps> = ({
       title: packsTabLabel,
       content: customPacksContent ?? (
         <StorePacksSection
-          packs={packs.filter(pack => pack.priceUSD < 9.99)}
+          packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
           onAddToCart={handleAddPackToCart}
           onSelectPack={setSelectedPack}
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
         />
       ),
     },

package/src/components/Store/sections/StorePacksSection.tsx

@@ -3,6 +3,7 @@ import React, { useCallback } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { usePackFiltering } from '../../../hooks/usePackFiltering';
 
@@ -10,12 +11,16 @@ interface IStorePacksSectionProps {
   packs: IItemPack[];
   onAddToCart: (pack: IItemPack) => void;
   onSelectPack?: (pack: IItemPack) => void;
+  atlasJSON?: any;
+  atlasIMG?: string;
 }
 
 export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   packs,
   onAddToCart,
   onSelectPack,
+  atlasJSON,
+  atlasIMG,
 }) => {
   const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(packs);
 
@@ -24,11 +29,22 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
     return imageUrl.default || imageUrl.src;
   };
 
+  const renderPackIcon = useCallback(
+    (pack: IItemPack) => {
+      const imgSrc = getImageSrc(pack.image);
+      if (atlasJSON && atlasIMG && imgSrc && atlasJSON?.frames?.[imgSrc]) {
+        return <SpriteFromAtlas atlasJSON={atlasJSON} atlasIMG={atlasIMG} spriteKey={imgSrc} width={40} height={40} imgScale={1.2} centered />;
+      }
+      return <img src={imgSrc} alt={pack.title} />;
+    },
+    [atlasJSON, atlasIMG]
+  );
+
   const renderPack = useCallback(
     (pack: IItemPack) => (
       <PackRow key={pack.key} onClick={() => onSelectPack?.(pack)}>
         <PackIconContainer>
-          <img src={getImageSrc(pack.image)} alt={pack.title} />
+          {renderPackIcon(pack)}
         </PackIconContainer>
 
         <PackDetails>

package/src/index.tsx

@@ -35,6 +35,7 @@ export * from './components/itemSelector/ItemSelector';
 export * from './components/Leaderboard/Leaderboard';
 export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
+export * from './components/Marketplace/MarketplaceBuyModal';
 export * from './components/Marketplace/MarketplaceRows';
 export * from './components/Multitab/TabBody';
 export * from './components/Multitab/TabsContainer';