@rpg-engine/long-bow 0.8.219 → 0.8.221

package/package.json

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

package/src/components/DraggableContainer.tsx

@@ -12,12 +12,6 @@ export interface IDraggableContainerProps {
   height?: string;
   minWidth?: string;
   minHeight?: string;
-  /** CSS override for width applied below `mobileBreakpoint`. Useful for responsive sizing without JS detection. */
-  mobileWidth?: string;
-  /** CSS override for height applied below `mobileBreakpoint`. Useful for responsive sizing without JS detection. */
-  mobileHeight?: string;
-  /** Viewport width in px under which mobile overrides apply. Defaults to 768. */
-  mobileBreakpoint?: number;
   className?: string;
   type?: RPGUIContainerTypes;
   title?: string;
@@ -42,9 +36,6 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
   height,
   minHeight,
   minWidth,
-  mobileWidth,
-  mobileHeight,
-  mobileBreakpoint = 768,
   className,
   type = RPGUIContainerTypes.FramedGold,
   onCloseButton,
@@ -126,9 +117,6 @@ export const DraggableContainer: React.FC<IDraggableContainerProps> = ({
         height={height || 'auto'}
         minWidth={minWidth}
         minHeight={minHeight}
-        mobileWidth={mobileWidth}
-        mobileHeight={mobileHeight}
-        mobileBreakpoint={mobileBreakpoint}
         className={`rpgui-container ${type} ${className}`}
         isFullScreen={isFullScreen}
         opacity={opacity}
@@ -161,9 +149,6 @@ interface IContainerProps {
   height: string;
   minWidth?: string;
   minHeight?: string;
-  mobileWidth?: string;
-  mobileHeight?: string;
-  mobileBreakpoint?: number;
   isFullScreen?: boolean;
   opacity?: number;
 }
@@ -193,15 +178,6 @@ const Container = styled.div<IContainerProps>`
       align-content: flex-start;
     `}
 
-  ${({ mobileWidth, mobileHeight, mobileBreakpoint }) =>
-    (mobileWidth || mobileHeight) &&
-    css`
-      @media (max-width: ${mobileBreakpoint ?? 768}px) {
-        ${mobileWidth && `width: ${mobileWidth}; min-width: unset;`}
-        ${mobileHeight && `height: ${mobileHeight}; min-height: unset;`}
-      }
-    `}
-
   &.rpgui-container {
     padding-top: 1.5rem;
   }

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)}`}
@@ -260,14 +248,17 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  gap: 1rem;
+  height: 100%;
   padding: 1rem;
+  overflow: hidden;
+  box-sizing: border-box;
 `;
 
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0;
 `;
 
 const Title = styled.h2`
@@ -289,12 +280,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;
+  min-height: 0;
   overflow-y: auto;
-  max-height: 250px;
   padding-right: 0.5rem;
 
   &::-webkit-scrollbar {
@@ -307,13 +312,24 @@ 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;
+`;
+
 const EmptyCart = styled.div`
   display: flex;
   align-items: center;
@@ -380,12 +396,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;
@@ -429,37 +439,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/MetadataCollector.tsx

@@ -1,48 +1,68 @@
-import { MetadataType } from "@rpg-engine/shared";
-import React, { useEffect } from "react";
-import { CharacterSkinSelectionModal } from "../Character/CharacterSkinSelectionModal";
+import { MetadataType } from '@rpg-engine/shared';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { CharacterSkinSelectionModal } from '../Character/CharacterSkinSelectionModal';
 
 export interface IMetadataCollectorProps {
-    metadataType: MetadataType;
-    config: Record<string, any>;
-    onCollect: (metadata: Record<string, any>) => void;
-    onCancel: () => void;
+  metadataType: MetadataType;
+  config: Record<string, any>;
+  onCollect: (metadata: Record<string, any>) => void;
+  onCancel: () => void;
 }
 
 export const MetadataCollector: React.FC<IMetadataCollectorProps> = ({
-    metadataType,
-    config,
-    onCollect,
-    onCancel,
+  metadataType,
+  config,
+  onCollect,
+  onCancel,
 }) => {
-    // Make sure we clean up if unmounted without collecting
-    useEffect(() => {
-        return () => {
-            // If we're unmounting without explicitly collecting or canceling,
-            // make sure to call onCancel to prevent any hanging promises
-            if (window.__metadataResolvers) {
-                onCancel();
-            }
-        };
-    }, [onCancel]);
-
-    // Use string comparison instead of direct property access
-    if (metadataType === 'CharacterSkin') {
-        return (
-            <CharacterSkinSelectionModal
-                isOpen={true}
-                onClose={onCancel}
-                onConfirm={(selectedSkin: any) => onCollect({ selectedSkin })}
-                availableCharacters={config.availableCharacters || []}
-                atlasJSON={config.atlasJSON}
-                atlasIMG={config.atlasIMG}
-                initialSelectedSkin={config.initialSelectedSkin}
-            />
-        );
-    } else {
-        console.warn(`No collector implemented for metadata type: ${metadataType}`);
-        // Auto-cancel for unhandled types to prevent hanging promises
-        setTimeout(onCancel, 0);
-        return null;
+  const isPendingRef = useRef(true);
+
+  const finalize = useCallback((callback: () => void) => {
+    if (!isPendingRef.current) {
+      return;
+    }
+
+    isPendingRef.current = false;
+    callback();
+  }, []);
+
+  const handleCollect = useCallback((metadata: Record<string, any>) => {
+    finalize(() => onCollect(metadata));
+  }, [finalize, onCollect]);
+
+  const handleCancel = useCallback(() => {
+    finalize(onCancel);
+  }, [finalize, onCancel]);
+
+  useEffect(() => {
+    return () => {
+      handleCancel();
+    };
+  }, [handleCancel]);
+
+  useEffect(() => {
+    if (metadataType === MetadataType.CharacterSkin) {
+      return undefined;
     }
+
+    const timer = window.setTimeout(handleCancel, 0);
+    return () => window.clearTimeout(timer);
+  }, [handleCancel, metadataType]);
+
+  if (metadataType === MetadataType.CharacterSkin) {
+    return (
+      <CharacterSkinSelectionModal
+        isOpen
+        onClose={handleCancel}
+        onConfirm={(selectedSkin: any) => handleCollect({ selectedSkin })}
+        availableCharacters={config.availableCharacters || []}
+        atlasJSON={config.atlasJSON}
+        atlasIMG={config.atlasIMG}
+        initialSelectedSkin={config.initialSelectedSkin}
+      />
+    );
+  }
+
+  console.warn(`No collector implemented for metadata type: ${metadataType}`);
+  return null;
 };