@rpg-engine/long-bow 0.8.133 → 0.8.135

package/package.json

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

package/src/components/Store/PaymentMethodModal.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback } from 'react';
-import { FaCreditCard } from 'react-icons/fa';
-import { GiCrystalBall } from 'react-icons/gi';
+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';
@@ -12,15 +11,30 @@ export interface IPaymentMethodModalProps {
   onClose: () => void;
 }
 
+type PaymentMethod = 'dc' | 'card';
+
 export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   dcBalance,
   onPayWithDC,
   onPayWithCard,
   onClose,
 }) => {
-  const stopPropagation = useCallback((e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
-    e.stopPropagation();
-  }, []);
+  const [selected, setSelected] = useState<PaymentMethod>('card');
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const handleConfirm = useCallback(() => {
+    if (selected === 'dc') {
+      onPayWithDC();
+    } else {
+      onPayWithCard();
+    }
+  }, [selected, onPayWithDC, onPayWithCard]);
 
   return (
     <ModalPortal>
@@ -31,28 +45,42 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
           onTouchStart={stopPropagation as React.TouchEventHandler}
           onPointerDown={stopPropagation as React.PointerEventHandler}
         >
-          <Title>How would you like to pay?</Title>
-
-          <OptionButton onClick={onPayWithDC} className="rpgui-button">
-            <GiCrystalBall />
-            <OptionLabel>
-              <span>Pay with DC</span>
-              <OptionBalance>{dcBalance.toLocaleString()} DC available</OptionBalance>
-            </OptionLabel>
-          </OptionButton>
-
-          <OptionButton onClick={onPayWithCard} className="rpgui-button">
-            <FaCreditCard />
-            <OptionLabel>
-              <span>Pay with Credit Card</span>
-            </OptionLabel>
-          </OptionButton>
-
-          <CancelWrapper>
-            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
-              Cancel
+          <Header>
+            <Title>How would you like to pay?</Title>
+            <CloseButton onPointerDown={onClose} aria-label="Close">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <Options>
+            <RadioOption
+              $selected={selected === 'card'}
+              onPointerDown={() => setSelected('card')}
+            >
+              <RadioCircle $selected={selected === 'card'} />
+              <OptionText>
+                <OptionLabel>Credit Card</OptionLabel>
+                <OptionSub>Stripe secure checkout</OptionSub>
+              </OptionText>
+            </RadioOption>
+
+            <RadioOption
+              $selected={selected === 'dc'}
+              onPointerDown={() => setSelected('dc')}
+            >
+              <RadioCircle $selected={selected === 'dc'} />
+              <OptionText>
+                <OptionLabel>Definya Coin</OptionLabel>
+                <OptionSub>{dcBalance.toLocaleString()} DC available</OptionSub>
+              </OptionText>
+            </RadioOption>
+          </Options>
+
+          <ConfirmRow>
+            <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={handleConfirm}>
+              Confirm
             </Button>
-          </CancelWrapper>
+          </ConfirmRow>
         </ModalContent>
       </ModalContainer>
     </ModalPortal>
@@ -80,14 +108,14 @@ const ModalContent = styled.div`
   background: #1a1a2e;
   border: 2px solid #f59e0b;
   border-radius: 8px;
-  padding: 24px;
-  min-width: 320px;
+  padding: 20px 24px 24px;
+  min-width: 300px;
   max-width: 90%;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
   pointer-events: auto;
-  animation: scaleIn 0.2s ease-out;
+  animation: scaleIn 0.15s ease-out;
 
   @keyframes scaleIn {
     from { transform: scale(0.85); opacity: 0; }
@@ -95,46 +123,97 @@ const ModalContent = styled.div`
   }
 `;
 
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
 const Title = styled.h3`
-  margin: 0 0 8px;
+  margin: 0;
   font-family: 'Press Start 2P', cursive;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   color: #fef08a;
-  text-align: center;
 `;
 
-const OptionButton = styled.button`
+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 }>`
   display: flex;
   align-items: center;
   gap: 12px;
-  width: 100%;
-  padding: 10px 14px;
+  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: pointer;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.65rem;
+  transition: border-color 0.15s, background 0.15s;
 
-  svg {
-    font-size: 1.25rem;
-    flex-shrink: 0;
+  &:hover {
+    border-color: #f59e0b;
   }
 `;
 
-const OptionLabel = styled.div`
+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;
-  align-items: flex-start;
-  gap: 4px;
+  gap: 3px;
 `;
 
-const OptionBalance = styled.span`
-  font-size: 0.55rem;
-  color: #fef08a;
-  opacity: 0.8;
+const OptionLabel = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: #ffffff;
+`;
+
+const OptionSub = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.55);
 `;
 
-const CancelWrapper = styled.div`
+const ConfirmRow = styled.div`
   display: flex;
   justify-content: center;
   margin-top: 4px;
-  filter: grayscale(0.6);
 `;

package/src/index.tsx

@@ -50,6 +50,7 @@ export * from './components/RadioButton';
 export * from './components/RangeSlider';
 export * from './components/RPGUI/RPGUIContainer';
 export * from './components/RPGUI/RPGUIRoot';
+export * from './components/shared/CTAButton/CTAButton';
 export * from './components/shared/SpriteFromAtlas';
 export * from './components/Shortcuts/Shortcuts';
 export * from './components/SkillProgressBar';