@rpg-engine/long-bow 0.8.220 → 0.8.222

package/package.json

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

package/src/components/DraggableContainer.tsx

@@ -181,6 +181,12 @@ const Container = styled.div<IContainerProps>`
   &.rpgui-container {
     padding-top: 1.5rem;
   }
+
+  @media (max-width: 600px) {
+    width: 100vw !important;
+    min-width: unset !important;
+    height: 100dvh !important;
+  }
 `;
 
 const CloseButton = styled.div`

package/src/components/Store/CartView.tsx

@@ -1,6 +1,6 @@
 import { IProductBlueprint, MetadataType } from '@rpg-engine/shared';
 import React, { useState } from 'react';
-import { FaCoins, FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
+import { FaInfoCircle, FaShoppingBag, FaTimes, FaTrash } from 'react-icons/fa';
 import styled from 'styled-components';
 import characterAtlasJSON from '../../mocks/atlas/entities/entities.json';
 import characterAtlasIMG from '../../mocks/atlas/entities/entities.png';
@@ -27,8 +27,6 @@ export interface ICartViewProps {
   paymentMethodLabel?: string;
   trustSignals?: ITrustSignal[];
   onCloseStore?: () => void;
-  /** Called when user taps the "Buy DC" nudge — open wallet/DC purchase flow */
-  onBuyDC?: () => void;
   /** Fires when user taps the pay button — before the purchase resolves */
   onCheckoutStart?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
   /** Fires after a successful purchase */
@@ -69,7 +67,6 @@ export const CartView: React.FC<ICartViewProps> = ({
   paymentMethodLabel,
   trustSignals,
   onCloseStore,
-  onBuyDC,
   onCheckoutStart,
   onPurchaseSuccess,
   onPurchaseError,
@@ -118,10 +115,6 @@ export const CartView: React.FC<ICartViewProps> = ({
     }
   };
 
-  // Show DC discount nudge when items have DC pricing and user might benefit
-  const hasDCItems = cartItems.some(ci => (ci.item as any).dcPrice);
-  const showDCNudge = hasDCItems && onBuyDC;
-
   if (purchasedItems) {
     return (
       <PurchaseSuccess
@@ -150,100 +143,95 @@ export const CartView: React.FC<ICartViewProps> = ({
         </CloseButton>
       </Header>
 
-      <CartItems>
-        {cartItems.length === 0 ? (
-          <EmptyCart>Your cart is empty</EmptyCart>
-        ) : (
-          cartItems.map(cartItem => {
-            console.log('Item metadataType: , texturePath:', cartItem.item.metadataType , cartItem.item.texturePath);
-            const getSpriteKey = (textureKey: string) => {
-              return textureKey + '/down/standing/0.png';
-            };
-
-            return (            
-              <CartItemRow key={cartItem.item.key}>
-                <ItemIconContainer>
-                  <SpriteFromAtlas
-                    atlasJSON={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasJSON : atlasJSON}
-                    atlasIMG={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasIMG : atlasIMG}
-                    spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && cartItem.metadata?.selectedSkinTextureKey ? getSpriteKey(cartItem.metadata.selectedSkinTextureKey) : cartItem.item.texturePath}
-                    width={24}
-                    height={24}
-                    imgScale={1.5}
-                    centered
-                  />
-                </ItemIconContainer>
-                <ItemDetails>
-                  <ItemName>{cartItem.item.name}</ItemName>
-                  {cartItem.metadata?.inputValue && (
-                    <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
-                  )}
-                  <ItemInfo>
-                    <span>{currencySymbol}{formatPrice((cartItem.item as any).regionalPrice ?? cartItem.item.price)}</span>
-                    <span>×</span>
-                    <span>{cartItem.quantity}</span>
-                    <span>=</span>
-                    <span>
-                      {currencySymbol}{formatPrice(((cartItem.item as any).regionalPrice ?? cartItem.item.price) * cartItem.quantity)}
-                    </span>
-                  </ItemInfo>
-                  
-                  {cartItem.metadata && cartItem.item.metadataType && (
-                    <MetadataDisplay 
-                      type={cartItem.item.metadataType} 
-                      metadata={cartItem.metadata}
+      <MainContent>
+        <CartItems>
+          {cartItems.length === 0 ? (
+            <EmptyCart>Your cart is empty</EmptyCart>
+          ) : (
+            cartItems.map(cartItem => {
+              const getSpriteKey = (textureKey: string) => {
+                return textureKey + '/down/standing/0.png';
+              };
+
+              return (
+                <CartItemRow key={cartItem.item.key}>
+                  <ItemIconContainer>
+                    <SpriteFromAtlas
+                      atlasJSON={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasJSON : atlasJSON}
+                      atlasIMG={cartItem.item.metadataType === MetadataType.CharacterSkin ? characterAtlasIMG : atlasIMG}
+                      spriteKey={cartItem.item.metadataType === MetadataType.CharacterSkin && cartItem.metadata?.selectedSkinTextureKey ? getSpriteKey(cartItem.metadata.selectedSkinTextureKey) : cartItem.item.texturePath}
+                      width={24}
+                      height={24}
+                      imgScale={1.5}
+                      centered
                     />
-                  )}
-                </ItemDetails>
-
-                <CTAButton
-                  icon={<FaTrash />}
-                  onClick={e => {
-                    e.stopPropagation();
-                    onRemoveFromCart(cartItem.item.key);
-                  }}
-                />
-              </CartItemRow>
-            );
-          })
-        )}
-      </CartItems>
+                  </ItemIconContainer>
+                  <ItemDetails>
+                    <ItemName>{cartItem.item.name}</ItemName>
+                    {cartItem.metadata?.inputValue && (
+                      <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
+                    )}
+                    <ItemInfo>
+                      <span>{currencySymbol}{formatPrice((cartItem.item as any).regionalPrice ?? cartItem.item.price)}</span>
+                      <span>×</span>
+                      <span>{cartItem.quantity}</span>
+                      <span>=</span>
+                      <span>
+                        {currencySymbol}{formatPrice(((cartItem.item as any).regionalPrice ?? cartItem.item.price) * cartItem.quantity)}
+                      </span>
+                    </ItemInfo>
+
+                    {cartItem.metadata && cartItem.item.metadataType && (
+                      <MetadataDisplay
+                        type={cartItem.item.metadataType}
+                        metadata={cartItem.metadata}
+                      />
+                    )}
+                  </ItemDetails>
+
+                  <CTAButton
+                    icon={<FaTrash />}
+                    onClick={e => {
+                      e.stopPropagation();
+                      onRemoveFromCart(cartItem.item.key);
+                    }}
+                  />
+                </CartItemRow>
+              );
+            })
+          )}
+        </CartItems>
 
-      <Footer>
-        {showDCNudge && (
-          <DCNudge onPointerDown={onBuyDC}>
-            <FaCoins />
-            <span>Save more with DC — volume discounts available</span>
-            <DCNudgeLink>Buy DC →</DCNudgeLink>
-          </DCNudge>
+        {cartItems.length > 0 && (
+          <OrderSummaryPanel>
+            <OrderSummaryLabel>Order Summary</OrderSummaryLabel>
+            <TotalRow>
+              <span>Subtotal:</span>
+              <span>{currencySymbol}{formatPrice(total)}</span>
+            </TotalRow>
+            {dcTotal > 0 && (
+              <TotalRow>
+                <span>DC:</span>
+                <span><MMORPGNumber value={dcTotal} /> DC</span>
+              </TotalRow>
+            )}
+            <TotalRow $isTotal>
+              <span>Total:</span>
+              <span>{currencySymbol}{formatPrice(total)}</span>
+            </TotalRow>
+            {paymentMethodLabel && (
+              <PaymentMethodRow>
+                <span>Paying with:</span>
+                <span>{paymentMethodLabel}</span>
+              </PaymentMethodRow>
+            )}
+          </OrderSummaryPanel>
         )}
+      </MainContent>
 
+      <Footer>
         <TrustBar signals={trustSignals} />
-
-        <TotalInfo>
-          <OrderSummaryLabel>Order Summary</OrderSummaryLabel>
-          <TotalRow>
-            <span>Subtotal:</span>
-            <span>{currencySymbol}{formatPrice(total)}</span>
-          </TotalRow>
-          {dcTotal > 0 && (
-            <TotalRow>
-              <span>DC:</span>
-              <span><MMORPGNumber value={dcTotal} /> DC</span>
-            </TotalRow>
-          )}
-          <TotalRow $isTotal>
-            <span>Total:</span>
-            <span>{currencySymbol}{formatPrice(total)}</span>
-          </TotalRow>
-          {paymentMethodLabel && (
-            <PaymentMethodRow>
-              <span>Paying with:</span>
-              <span>{paymentMethodLabel}</span>
-            </PaymentMethodRow>
-          )}
-          {error && <ErrorMessage>{error}</ErrorMessage>}
-        </TotalInfo>
+        {error && <ErrorMessage>{error}</ErrorMessage>}
         <CTAButton
           icon={<FaShoppingBag />}
           label={isLoading ? 'Processing...' : `Pay ${currencySymbol}${formatPrice(total)}`}
@@ -264,6 +252,10 @@ const Container = styled.div`
   padding: 1rem;
   overflow: hidden;
   box-sizing: border-box;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem 0.5rem;
+  }
 `;
 
 const Header = styled.div`
@@ -292,14 +284,26 @@ const CloseButton = styled.div`
   justify-content: center;
 `;
 
+const MainContent = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 260px;
+  gap: 1rem;
+  flex: 1;
+  min-height: 0;
+  margin: 1rem 0;
+
+  @media (max-width: 700px) {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+`;
+
 const CartItems = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  flex: 1;
   min-height: 0;
   overflow-y: auto;
-  margin: 1rem 0;
   padding-right: 0.5rem;
 
   &::-webkit-scrollbar {
@@ -312,13 +316,28 @@ const CartItems = styled.div`
   &::-webkit-scrollbar-thumb {
     background: #f59e0b;
     border-radius: 4px;
-    
+
     &:hover {
       background: #fbbf24;
     }
   }
 `;
 
+const OrderSummaryPanel = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  align-self: start;
+
+  @media (max-width: 480px) {
+    padding: 0.75rem;
+  }
+`;
+
 const EmptyCart = styled.div`
   display: flex;
   align-items: center;
@@ -337,6 +356,11 @@ const CartItemRow = styled.div`
   padding: 0.5rem 0.75rem;
   background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
+
+  @media (max-width: 480px) {
+    gap: 0.5rem;
+    padding: 0.4rem 0.5rem;
+  }
 `;
 
 const ItemIconContainer = styled.div`
@@ -365,6 +389,7 @@ const ItemName = styled.div`
 const ItemInfo = styled.div`
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.4rem;
   font-family: 'Press Start 2P', cursive;
   font-size: 0.55rem;
@@ -385,12 +410,6 @@ const Footer = styled.div`
   }
 `;
 
-const TotalInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-`;
-
 const OrderSummaryLabel = styled.div`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.55rem;
@@ -417,6 +436,11 @@ const TotalRow = styled.div<{ $isTotal?: boolean }>`
   span:last-child {
     color: #fef08a;
   }
+
+  @media (max-width: 480px) {
+    font-size: ${p => p.$isTotal ? '0.7rem' : '0.55rem'};
+    gap: 0.5rem;
+  }
 `;
 
 const PaymentMethodRow = styled.div`
@@ -434,37 +458,6 @@ const PaymentMethodRow = styled.div`
   }
 `;
 
-const DCNudge = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
-  background: rgba(245, 158, 11, 0.1);
-  border: 1px solid rgba(245, 158, 11, 0.3);
-  border-radius: 4px;
-  cursor: pointer;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.45rem;
-  color: #fbbf24;
-  transition: background 0.15s;
-  line-height: 1.4;
-  flex-wrap: wrap;
-
-  &:hover {
-    background: rgba(245, 158, 11, 0.18);
-  }
-
-  svg { flex-shrink: 0; font-size: 0.7rem; }
-  span { flex: 1; min-width: 140px; }
-`;
-
-const DCNudgeLink = styled.span`
-  color: #f59e0b;
-  white-space: nowrap;
-  text-decoration: underline;
-  flex: 0 0 auto !important;
-`;
-
 const ErrorMessage = styled.div`
   color: #ef4444;
   font-size: 0.875rem;

package/src/components/Store/Store.tsx

@@ -61,7 +61,6 @@ export interface IStoreProps {
   onCheckoutStart?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
   onPurchaseSuccess?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
   onPurchaseError?: (error: string) => void;
-  onBuyDC?: () => void;
   currencySymbol?: string;
   onRedeem?: (code: string) => Promise<{ success: boolean; dcAmount?: number; error?: string }>;
   onRedeemInputFocus?: () => void;
@@ -114,7 +113,6 @@ export const Store: React.FC<IStoreProps> = ({
   onCheckoutStart,
   onPurchaseSuccess,
   onPurchaseError,
-  onBuyDC,
   currencySymbol = '$',
   onRedeem,
   onRedeemInputFocus,
@@ -321,7 +319,6 @@ export const Store: React.FC<IStoreProps> = ({
           onCheckoutStart={onCheckoutStart}
           onPurchaseSuccess={onPurchaseSuccess}
           onPurchaseError={onPurchaseError}
-          onBuyDC={onBuyDC}
           currencySymbol={currencySymbol}
         />
       ) : selectedPack ? (