@rpg-engine/long-bow 0.8.138 → 0.8.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.138",
+  "version": "0.8.140",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "0.10.70",
+    "@rpg-engine/shared": "0.10.83",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/DCWallet/DCHistoryPanel.tsx

@@ -116,13 +116,13 @@ export const DCHistoryPanel: React.FC<IDCHistoryPanelProps> = ({
             const subtitle = tx.note ?? (tx.relatedCharacterName ? tx.relatedCharacterName : '');
 
             return (
-              <TransactionRow key={tx._id}>
+              <TransactionRow key={tx._id} style={{ borderLeft: `3px solid ${color}` }}>
                 <TxLeft>
-                  <TxType $color={color}>{label}</TxType>
+                  <TxType style={{ color }}>{label}</TxType>
                   {subtitle ? <TxNote>{subtitle}</TxNote> : null}
                 </TxLeft>
                 <TxRight>
-                  <TxAmount $credit={isCredit}>
+                  <TxAmount style={{ color: isCredit ? '#4CAF50' : '#D04648' }}>
                     {isCredit ? '+' : ''}{tx.amount} DC
                   </TxAmount>
                   <TxDate>{formatDate(tx.createdAt)}</TxDate>
@@ -237,16 +237,14 @@ const TxRight = styled.div`
   flex-shrink: 0;
 `;
 
-const TxType = styled.span<{ $color: string }>`
+const TxType = styled.span`
   font-size: 7px;
-  color: ${({ $color }) => $color};
   font-family: 'Press Start 2P', cursive;
 `;
 
-const TxAmount = styled.span<{ $credit: boolean }>`
+const TxAmount = styled.span`
   font-size: 8px;
   font-family: 'Press Start 2P', cursive;
-  color: ${({ $credit }) => ($credit ? uiColors.green : uiColors.red)};
   white-space: nowrap;
 `;
 

package/src/components/DCWallet/DCWalletModal.tsx

@@ -64,7 +64,7 @@ export const DCWalletModal: React.FC<IDCWalletModalProps> = ({
           {onBuyDC && (
             <BuyButton onPointerDown={onBuyDC} title="Buy Definya Coins">
               <FaShoppingCart />
-              <BuyButtonLabel>Buy DC</BuyButtonLabel>
+              <BuyButtonLabel>Buy More DC</BuyButtonLabel>
             </BuyButton>
           )}
         </BalanceContent>

package/src/components/Marketplace/BuyPanel.tsx

@@ -1,4 +1,4 @@
-import { IEquipmentSet, IMarketplaceItem } from '@rpg-engine/shared';
+import { goldToDC, IEquipmentSet, IMarketplaceItem } from '@rpg-engine/shared';
 import React, { useEffect, useRef, useState } from 'react';
 import { AiFillCaretRight } from 'react-icons/ai';
 import styled from 'styled-components';
@@ -81,7 +81,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   const hasDCBalance = dcBalance > 0 && dcToGoldSwapRate > 0;
 
   const getDCEquivalentPrice = (goldPrice: number): number =>
-    dcToGoldSwapRate > 0 ? Math.ceil(goldPrice / dcToGoldSwapRate) : 0;
+    dcToGoldSwapRate > 0 ? goldToDC(goldPrice) : 0;
 
   return (
     <>
@@ -106,7 +106,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
             setBuyingItemId(null);
             enableHotkeys?.();
           }}
-          message="Are you sure to buy this item?"
+          message="Are you sure you want to buy this item?"
         />
       )}
       <InputWrapper>

package/src/components/Marketplace/MarketplaceBuyModal.tsx

@@ -1,3 +1,4 @@
+import { formatDCAmount } from '@rpg-engine/shared';
 import React, { useCallback, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
@@ -72,10 +73,10 @@ export const MarketplaceBuyModal: React.FC<IMarketplaceBuyModalProps> = ({
               <OptionText>
                 <OptionLabel $disabled={!hasSufficientDC}>Definya Coin</OptionLabel>
                 <OptionSub>
-                  {dcEquivalentPrice.toLocaleString()} DC
+                  {formatDCAmount(dcEquivalentPrice)} DC
                   {' '}
                   <BalanceHint $insufficient={!hasSufficientDC}>
-                    ({dcBalance.toLocaleString()} available)
+                    ({formatDCAmount(dcBalance)} available)
                   </BalanceHint>
                 </OptionSub>
               </OptionText>

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -1,4 +1,5 @@
 import {
+  formatDCAmount,
   getItemTextureKeyPath,
   IEquipmentSet,
   IItem,
@@ -90,32 +91,26 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
       </ItemIconContainer>
 
       <Flex>
-        <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
+        <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>
-            </DCPriceLabel>
+            </p>
+          </PriceValue>
+          {dcEquivalentPrice !== undefined && (
+            <DCPriceLabel>{formatDCAmount(dcEquivalentPrice)} DC</DCPriceLabel>
           )}
-        </PriceContainer>
+        </ItemIconContainer>
         <ButtonContainer>
           <Button
             buttonType={ButtonTypes.RPGUIButton}
@@ -187,18 +182,11 @@ 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;
+const DCPriceLabel = styled.span`
+  margin-left: 8px;
   color: #fef08a;
-  font-size: 0.7rem;
+  font-size: 0.65rem;
+  white-space: nowrap;
 `;
 
 const PriceValue = styled.div`

package/src/components/Store/Store.tsx

@@ -256,7 +256,6 @@ export const Store: React.FC<IStoreProps> = ({
               {onShowHistory && (
                 <CTAButton
                   icon={<FaHistory />}
-                  label="History"
                   onClick={onShowHistory}
                 />
               )}