@rpg-engine/long-bow 0.8.219 → 0.8.220

package/src/components/Store/Store.tsx

@@ -1,4 +1,4 @@
-import { IItemPack, IPurchase, IProductBlueprint, ItemRarities, ItemSubType, ItemType, UserAccountTypes, PaymentCurrency, PurchaseType } from '@rpg-engine/shared';
+import { IItemPack, IPurchase, IProductBlueprint, UserAccountTypes } from '@rpg-engine/shared';
 import { Crown } from 'pixelarticons/react/Crown';
 import { Gift } from 'pixelarticons/react/Gift';
 import { Package } from 'pixelarticons/react/Package';
@@ -9,22 +9,20 @@ import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
 import { DraggableContainer } from '../DraggableContainer';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
-import { Tabs } from '../shared/Tabs';
-import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { LabelPill } from '../shared/LabelPill/LabelPill';
 import { CartView } from './CartView';
 import { FeaturedBanner, IFeaturedItem } from './FeaturedBanner';
+import { packToBlueprint } from './internal/packToBlueprint';
 import { useStoreCart } from './hooks/useStoreCart';
+import { TabId, useStoreTabs } from './hooks/useStoreTabs';
 import { MetadataCollector } from './MetadataCollector';
+import { StoreHeader } from './StoreHeader';
 import { StoreItemsSection } from './sections/StoreItemsSection';
 import { StorePacksSection } from './sections/StorePacksSection';
 import { StoreRedeemSection } from './sections/StoreRedeemSection';
 import { StoreItemDetails } from './StoreItemDetails';
 
-// Define TabId union type for tab identifiers
-type TabId = 'premium' | 'packs' | 'items' | 'characters' | 'wallet' | 'history' | 'redeem';
-
-// Define IStoreProps locally as a workaround
 export interface IStoreProps {
   items: IProductBlueprint[];
   packs?: IItemPack[];
@@ -47,53 +45,33 @@ export interface IStoreProps {
   customCharactersContent?: React.ReactNode;
   customWalletContent?: React.ReactNode;
   customHistoryContent?: React.ReactNode;
-  /** When true the store renders full-screen (useful on mobile). */
   fullScreen?: boolean;
-  /** Override the DraggableContainer width (e.g. "90vw"). Defaults to "1000px". */
-  containerWidth?: string;
-  /** Override the DraggableContainer height (e.g. "80vh"). Defaults to "min(85vh, 900px)" so the inner scroll area is bounded. */
-  containerHeight?: string;
-  /** Width applied below `mobileBreakpoint` (e.g. "95vw"). Defaults to "95vw". */
-  mobileContainerWidth?: string;
-  /** Height applied below `mobileBreakpoint` (e.g. "95vh"). Defaults to "95vh" so mobile fills the viewport. */
-  mobileContainerHeight?: string;
-  /** Viewport px under which mobile overrides apply. Defaults to 768. */
-  mobileBreakpoint?: number;
   packsBadge?: string;
   featuredItems?: IFeaturedItem[];
   onQuickBuy?: (item: IProductBlueprint, quantity?: number) => void;
   itemBadges?: Record<string, { badges?: import('./StoreBadges').IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
   packBadges?: Record<string, { badges?: import('./StoreBadges').IStoreBadge[]; buyCount?: number; viewersCount?: number; saleEndsAt?: string; originalPrice?: number }>;
-  /** Fires when an item row becomes visible (on mount). Useful for store_item_viewed analytics. */
   onItemView?: (item: IProductBlueprint, position: number) => void;
-  /** Fires when a pack row becomes visible (on mount). Useful for pack_viewed analytics. */
   onPackView?: (pack: IItemPack, position: number) => void;
-  /** Fires when the active store tab changes (e.g. 'items', 'packs', 'premium'). */
   onTabChange?: (tab: string, itemsShown: number) => void;
-  /** Fires when the category filter changes in the items tab. */
   onCategoryChange?: (category: string, itemsShown: number) => void;
-  /** Fires when the cart is opened. */
   onCartOpen?: () => void;
-  /** Fires when any item or pack is added to the cart. */
   onAddToCart?: (item: IProductBlueprint, quantity: number) => void;
-  /** Fires when an item is removed from the cart. */
   onRemoveFromCart?: (itemKey: string) => void;
-  /** Fires when the user taps "Pay" — before the purchase resolves. */
   onCheckoutStart?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
-  /** Fires after a successful purchase. */
   onPurchaseSuccess?: (items: Array<{ key: string; name: string; quantity: number }>, total: number) => void;
-  /** Fires when a purchase fails. */
   onPurchaseError?: (error: string) => void;
-  /** Called when the DC nudge in CartView is tapped — open the DC purchase flow. */
   onBuyDC?: () => void;
-  /** Currency symbol to display (e.g. "$" for USD, "R$" for BRL). Defaults to "$". */
   currencySymbol?: string;
-  /** Callback to redeem a voucher code. When provided, the Redeem tab is shown. */
   onRedeem?: (code: string) => Promise<{ success: boolean; dcAmount?: number; error?: string }>;
-  /** Called when the voucher code input gains focus. */
   onRedeemInputFocus?: () => void;
-  /** Called when the voucher code input loses focus. */
   onRedeemInputBlur?: () => void;
+  /** Override the modal width. Defaults to '1000px'. */
+  width?: string;
+  /** Override the modal height. Defaults to 'min(85vh, 900px)'. */
+  height?: string;
+  /** Override the item category filter pills. Auto-derived from item.itemType when omitted. */
+  itemCategoryOptions?: Array<{ value: string; label: string }>;
 }
 
 export type { IFeaturedItem };
@@ -120,11 +98,6 @@ export const Store: React.FC<IStoreProps> = ({
   customWalletContent,
   customHistoryContent,
   fullScreen = false,
-  containerWidth,
-  containerHeight,
-  mobileContainerWidth,
-  mobileContainerHeight,
-  mobileBreakpoint,
   packsTabLabel = 'Packs',
   packsBadge,
   featuredItems,
@@ -146,23 +119,12 @@ export const Store: React.FC<IStoreProps> = ({
   onRedeem,
   onRedeemInputFocus,
   onRedeemInputBlur,
+  width = '1000px',
+  height = 'min(85vh, 900px)',
+  itemCategoryOptions,
 }) => {
-  const defaultTabOrder: TabId[] = ['premium', 'packs', 'items'];
   const [selectedPack, setSelectedPack] = useState<IItemPack | null>(null);
-  const [activeTab, setActiveTab] = useState<TabId>(() => {
-    const allTabIds: TabId[] = [
-      ...(tabOrder ?? defaultTabOrder),
-      ...(customCharactersContent ? ['characters' as TabId] : []),
-      ...(onRedeem ? ['redeem' as TabId] : []),
-      ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
-      ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : []),
-    ];
-    const validTabs = Array.from(new Set(allTabIds.filter(id => !(hidePremiumTab && id === 'premium'))));
-    if (defaultActiveTab && validTabs.includes(defaultActiveTab)) {
-      return defaultActiveTab;
-    }
-    return validTabs[0] ?? (hidePremiumTab ? 'items' : 'premium');
-  });
+
   const {
     cartItems,
     handleAddToCart,
@@ -173,9 +135,32 @@ export const Store: React.FC<IStoreProps> = ({
     getTotalItems,
     getTotalPrice,
     isCartOpen,
+    isCollectingMetadata,
+    currentMetadataItem,
+    resolveMetadata,
   } = useStoreCart();
-  const [isCollectingMetadata, setIsCollectingMetadata] = useState(false);
-  const [currentMetadataItem, setCurrentMetadataItem] = useState<IProductBlueprint | null>(null);
+
+  const filteredItems = useMemo(() => ({
+    items: items,
+    premium: items.filter(item => (item.requiredAccountType?.length ?? 0) > 0),
+  }), [items]);
+
+  const { availableTabIds, activeTab, handleTabChange } = useStoreTabs({
+    tabOrder,
+    defaultActiveTab,
+    hidePremiumTab,
+    hasCharacters: !!customCharactersContent,
+    hasRedeem: !!onRedeem,
+    hasWallet: !!(onShowWallet || customWalletContent),
+    hasHistory: !!(onShowHistory || customHistoryContent),
+    onTabChange: onTabChange as ((tab: TabId, itemsShown: number) => void) | undefined,
+    getItemCount: (tab) => {
+      if (tab === 'items') return filteredItems.items.length;
+      if (tab === 'premium') return filteredItems.premium.length;
+      if (tab === 'packs') return packs.length;
+      return 0;
+    },
+  });
 
   const handleOpenCart = () => {
     openCart();
@@ -193,87 +178,14 @@ export const Store: React.FC<IStoreProps> = ({
   };
 
   const handleAddPackToCart = (pack: IItemPack, quantity: number = 1) => {
-    const packItem: IProductBlueprint = {
-      key: pack.key,
-      name: pack.title,
-      description: pack.description || '',
-      price: pack.priceUSD,
-      currency: PaymentCurrency.USD,
-      texturePath: pack.image.default || pack.image.src,
-      type: PurchaseType.Pack,
-      onPurchase: async () => {},
-      itemType: ItemType.Consumable,
-      itemSubType: ItemSubType.Other,
-      rarity: ItemRarities.Common,
-      weight: 0,
-      isStackable: false,
-      maxStackSize: 1,
-      isUsable: false,
-    };
-    handleAddToCart(packItem, quantity);
-    onAddToCart?.(packItem, quantity);
-  };
-
-  const filterItems = (
-    itemsToFilter: IProductBlueprint[],
-    type: 'items' | 'premium'
-  ): IProductBlueprint[] => {
-    return itemsToFilter.filter(item => {
-      if (type === 'premium') {
-        return item.requiredAccountType?.length ?? 0 > 0;
-      }
-      return true;
-    });
-  };
-
-  const filteredItems = useMemo(
-    () => ({
-      items: filterItems(items, 'items'),
-      premium: filterItems(items, 'premium'),
-    }),
-    [items]
-  );
-
-  const handleMetadataCollected = (metadata: Record<string, any>) => {
-    if (currentMetadataItem && window.__metadataResolvers) {
-      // Resolve the promise in the useStoreMetadata hook
-      window.__metadataResolvers.resolve(metadata);
-      
-      // Reset the metadata collection state
-      setCurrentMetadataItem(null);
-      // Removed unused setPendingMetadataQuantity call
-    }
+    const bp = packToBlueprint(pack);
+    handleAddToCart(bp, quantity);
+    onAddToCart?.(bp, quantity);
   };
 
-  const handleMetadataCancel = () => {
-    if (window.__metadataResolvers) {
-      // Resolve with null to indicate cancellation
-      window.__metadataResolvers.resolve(null);
-    }
-    
-    // Reset the metadata collection state
-    setCurrentMetadataItem(null);
-    // Removed unused setPendingMetadataQuantity call
-    setIsCollectingMetadata(false);
-  };
-
-  if (loading) {
-    return <LoadingMessage>Loading...</LoadingMessage>;
-  }
-
-  if (error) {
-    return <ErrorMessage>{error}</ErrorMessage>;
-  }
-
-  // Build tabs dynamically based on props
-  const tabIds: TabId[] = [
-    ...(tabOrder ?? defaultTabOrder),
-    ...(customCharactersContent ? ['characters' as TabId] : []),
-    ...(onRedeem ? ['redeem' as TabId] : []),
-    ...((onShowWallet || customWalletContent) ? ['wallet' as TabId] : []),
-    ...((onShowHistory || customHistoryContent) ? ['history' as TabId] : [])
-  ];
-  const availableTabIds: TabId[] = Array.from(new Set(tabIds.filter(id => !(hidePremiumTab && id === 'premium'))));
+  const makePackQuickBuy = onQuickBuy
+    ? (pack: IItemPack, qty?: number) => onQuickBuy(packToBlueprint(pack), qty)
+    : undefined;
 
   const tabsMap: Record<string, { id: TabId; title: ReactNode; icon: ReactNode; content: ReactNode }> = {
     premium: {
@@ -284,26 +196,7 @@ export const Store: React.FC<IStoreProps> = ({
         <StorePacksSection
           packs={packs.filter(pack => pack.priceUSD >= 9.99)}
           onAddToCart={handleAddPackToCart}
-          onQuickBuy={onQuickBuy ? (pack, qty) => {
-            const bp: IProductBlueprint = {
-              key: pack.key,
-              name: pack.title,
-              description: pack.description || '',
-              price: pack.priceUSD,
-              currency: PaymentCurrency.USD,
-              texturePath: pack.image.default || pack.image.src,
-              type: PurchaseType.Pack,
-              onPurchase: async () => {},
-              itemType: ItemType.Consumable,
-              itemSubType: ItemSubType.Other,
-              rarity: ItemRarities.Common,
-              weight: 0,
-              isStackable: false,
-              maxStackSize: 1,
-              isUsable: false,
-            };
-            onQuickBuy(bp, qty);
-          } : undefined}
+          onQuickBuy={makePackQuickBuy}
           onSelectPack={setSelectedPack}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -326,26 +219,7 @@ export const Store: React.FC<IStoreProps> = ({
         <StorePacksSection
           packs={hidePremiumTab ? packs : packs.filter(pack => pack.priceUSD < 9.99)}
           onAddToCart={handleAddPackToCart}
-          onQuickBuy={onQuickBuy ? (pack, qty) => {
-            const bp: IProductBlueprint = {
-              key: pack.key,
-              name: pack.title,
-              description: pack.description || '',
-              price: pack.priceUSD,
-              currency: PaymentCurrency.USD,
-              texturePath: pack.image.default || pack.image.src,
-              type: PurchaseType.Pack,
-              onPurchase: async () => {},
-              itemType: ItemType.Consumable,
-              itemSubType: ItemSubType.Other,
-              rarity: ItemRarities.Common,
-              weight: 0,
-              isStackable: false,
-              maxStackSize: 1,
-              isUsable: false,
-            };
-            onQuickBuy(bp, qty);
-          } : undefined}
+          onQuickBuy={makePackQuickBuy}
           onSelectPack={setSelectedPack}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -363,7 +237,7 @@ export const Store: React.FC<IStoreProps> = ({
         <StoreItemsSection
           items={filteredItems.items}
           onAddToCart={handleAddToCartTracked}
-          onQuickBuy={onQuickBuy ? (item, qty, _meta) => onQuickBuy(item, qty) : undefined}
+          onQuickBuy={onQuickBuy ? (item, qty) => onQuickBuy(item, qty) : undefined}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           userAccountType={userAccountType}
@@ -372,6 +246,7 @@ export const Store: React.FC<IStoreProps> = ({
           onItemView={onItemView}
           onCategoryChange={onCategoryChange}
           currencySymbol={currencySymbol}
+          categoryOptions={itemCategoryOptions}
         />
       ),
     },
@@ -415,36 +290,32 @@ export const Store: React.FC<IStoreProps> = ({
     },
   };
 
+  if (loading) return <LoadingMessage>Loading...</LoadingMessage>;
+  if (error) return <ErrorMessage>{error}</ErrorMessage>;
+
   return (
     <DraggableContainer
-      title="Store"
       onCloseButton={onClose}
-      width={containerWidth ?? "1000px"}
+      width={width}
       minWidth="700px"
-      height={containerHeight ?? "min(85vh, 900px)"}
-      mobileWidth={mobileContainerWidth ?? "95vw"}
-      mobileHeight={mobileContainerHeight ?? "95vh"}
-      mobileBreakpoint={mobileBreakpoint}
+      height={height}
       type={RPGUIContainerTypes.Framed}
-      cancelDrag="[class*='Store__Container'], [class*='CartView'], [class*='StoreItemDetails'], .close-button"
+      cancelDrag=".store-scroll-area, [class*='CartView'], [class*='StoreItemDetails'], .close-button"
       isFullScreen={fullScreen}
     >
-      {isCollectingMetadata && currentMetadataItem && currentMetadataItem.metadataType ? (
+      {isCollectingMetadata && currentMetadataItem?.metadataType ? (
         <MetadataCollector
           metadataType={currentMetadataItem.metadataType}
           config={currentMetadataItem.metadataConfig || {}}
-          onCollect={handleMetadataCollected}
-          onCancel={handleMetadataCancel}
+          onCollect={resolveMetadata}
+          onCancel={() => resolveMetadata(null)}
         />
       ) : isCartOpen ? (
         <CartView
           cartItems={cartItems}
           onRemoveFromCart={handleRemoveFromCartTracked}
           onClose={closeCart}
-          onPurchase={async () => {
-            handleCartPurchase(onPurchase);
-            return true;
-          }}
+          onPurchase={async () => { handleCartPurchase(onPurchase); return true; }}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
           onCheckoutStart={onCheckoutStart}
@@ -466,7 +337,7 @@ export const Store: React.FC<IStoreProps> = ({
           currencySymbol={currencySymbol}
         />
       ) : (
-        <Container>
+        <Container className="store-scroll-area">
           {featuredItems && featuredItems.length > 0 && (
             <FeaturedBanner
               items={featuredItems}
@@ -478,62 +349,23 @@ export const Store: React.FC<IStoreProps> = ({
               }}
               onQuickBuy={onQuickBuy ? item => {
                 const blueprint = items.find(bp => bp.key === item.key);
-                if (blueprint) onQuickBuy(blueprint, 1);
-                else {
+                if (blueprint) {
+                  onQuickBuy(blueprint, 1);
+                } else {
                   const pack = packs.find(p => p.key === item.key);
-                  if (pack) {
-                    const packBlueprint: IProductBlueprint = {
-                      key: pack.key,
-                      name: pack.title,
-                      description: pack.description || '',
-                      price: pack.priceUSD,
-                      currency: PaymentCurrency.USD,
-                      texturePath: pack.image.default || pack.image.src,
-                      type: PurchaseType.Pack,
-                      onPurchase: async () => {},
-                      itemType: ItemType.Consumable,
-                      itemSubType: ItemSubType.Other,
-                      rarity: ItemRarities.Common,
-                      weight: 0,
-                      isStackable: false,
-                      maxStackSize: 1,
-                      isUsable: false,
-                    };
-                    onQuickBuy(packBlueprint, 1);
-                  }
+                  if (pack) onQuickBuy(packToBlueprint(pack), 1);
                 }
               } : undefined}
             />
           )}
           <MainContent>
-            <HeaderRow>
-              <TabsFlexWrapper>
-                <Tabs
-                  options={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
-                  activeTabId={activeTab}
-                  onTabChange={(tabId) => {
-                    const nextTab = tabId as TabId;
-                    setActiveTab(nextTab);
-                    if (onTabChange) {
-                      const itemCount = nextTab === 'items' ? filteredItems.items.length
-                        : nextTab === 'premium' ? filteredItems.premium.length
-                        : nextTab === 'packs' ? packs.length
-                        : 0;
-                      onTabChange(nextTab, itemCount);
-                    }
-                  }}
-                />
-              </TabsFlexWrapper>
-              <CartButtonWrapper>
-                <CTAButton
-                  icon={<FaShoppingCart />}
-                  onClick={handleOpenCart}
-                />
-                {getTotalItems() > 0 && (
-                  <CartBadge>{getTotalItems()}</CartBadge>
-                )}
-              </CartButtonWrapper>
-            </HeaderRow>
+            <StoreHeader
+              tabs={availableTabIds.map(id => ({ id, label: tabsMap[id]?.title, icon: tabsMap[id]?.icon }))}
+              activeTabId={activeTab}
+              onTabChange={handleTabChange}
+              cartItemCount={getTotalItems()}
+              onOpenCart={handleOpenCart}
+            />
             <TabContent>
               {tabsMap[activeTab]?.content}
             </TabContent>
@@ -542,7 +374,7 @@ export const Store: React.FC<IStoreProps> = ({
             <Footer>
               <CTAButton
                 icon={<FaShoppingCart />}
-                label={`Checkout · ${getTotalItems()} item${getTotalItems() !== 1 ? 's' : ''} (${currencySymbol}${getTotalPrice().toFixed(2)})`}
+                label={`Proceed to Checkout (${currencySymbol}${getTotalPrice().toFixed(2)})`}
                 onClick={handleOpenCart}
                 fullWidth
               />
@@ -558,50 +390,12 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: calc(100% - 48px);
+  height: 100%;
   gap: 0.5rem;
   position: relative;
   overflow: hidden;
 `;
 
-const HeaderRow = styled.div`
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-  padding-top: 10px;
-  padding-right: 12px;
-`;
-
-const TabsFlexWrapper = styled.div`
-  flex: 1;
-  min-width: 0;
-`;
-
-const CartButtonWrapper = styled.div`
-  position: relative;
-  flex-shrink: 0;
-`;
-
-const CartBadge = styled.div`
-  position: absolute;
-  top: -8px;
-  right: -8px;
-  background: #ef4444; /* red */
-  color: white;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.5rem;
-  padding: 4px;
-  border-radius: 50%;
-  border: 2px solid #000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  min-height: 16px;
-  box-sizing: content-box;
-`;
-
 const MainContent = styled.div`
   flex: 1;
   display: flex;
@@ -616,7 +410,7 @@ const TabContent = styled.div`
 `;
 
 const Footer = styled.div`
-  padding: 0.5rem;
+  padding: 1rem;
   border-top: 2px solid #f59e0b;
   background: rgba(0, 0, 0, 0.2);
   flex-shrink: 0;
@@ -628,7 +422,6 @@ const TabLabelWithBadge = styled.span`
   gap: 5px;
 `;
 
-
 const LoadingMessage = styled.div`
   text-align: center;
   color: ${uiColors.white};

package/src/components/Store/StoreHeader.tsx

@@ -0,0 +1,74 @@
+import React, { ReactNode } from 'react';
+import { FaShoppingCart } from 'react-icons/fa';
+import styled from 'styled-components';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { Tabs } from '../shared/Tabs';
+import { TabId } from './hooks/useStoreTabs';
+
+export interface IStoreHeaderProps {
+  tabs: Array<{ id: TabId; label: ReactNode; icon: ReactNode }>;
+  activeTabId: TabId;
+  onTabChange: (tabId: string) => void;
+  cartItemCount: number;
+  onOpenCart: () => void;
+}
+
+export const StoreHeader: React.FC<IStoreHeaderProps> = ({
+  tabs,
+  activeTabId,
+  onTabChange,
+  cartItemCount,
+  onOpenCart,
+}) => (
+  <HeaderRow>
+    <TabsFlexWrapper>
+      <Tabs
+        options={tabs.map(t => ({ id: t.id, label: t.label, icon: t.icon }))}
+        activeTabId={activeTabId}
+        onTabChange={onTabChange}
+      />
+    </TabsFlexWrapper>
+    <CartButtonWrapper>
+      <CTAButton icon={<FaShoppingCart />} onClick={onOpenCart} />
+      {cartItemCount > 0 && <CartBadge>{cartItemCount}</CartBadge>}
+    </CartButtonWrapper>
+  </HeaderRow>
+);
+
+const HeaderRow = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+  padding-top: 10px;
+  padding-right: 12px;
+`;
+
+const TabsFlexWrapper = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+const CartButtonWrapper = styled.div`
+  position: relative;
+  flex-shrink: 0;
+`;
+
+const CartBadge = styled.div`
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  background: #ef4444;
+  color: white;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  padding: 4px;
+  border-radius: 50%;
+  border: 2px solid #000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  min-height: 16px;
+  box-sizing: content-box;
+`;