@rpg-engine/long-bow 0.8.105 → 0.8.106

package/package.json

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

package/src/components/DailyTasks/DailyRewardsTooltip.tsx

@@ -46,7 +46,7 @@ export const DailyRewardsTooltip: React.FC<IDailyRewardsTooltipProps> = ({
   return (
     <TooltipContainer>
       <CollapsibleHeader onClick={toggleExpand}>
-        <HeaderText>Rewards</HeaderText>
+        <HeaderText>Rewards?</HeaderText>
         <ExpandIcon>{isExpanded ? '▼' : '▶'}</ExpandIcon>
       </CollapsibleHeader>
 
@@ -129,12 +129,10 @@ const CollapsibleContent = styled.div`
 const RewardItem = styled.div`
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
   width: 100%;
-  padding: 2px 4px;
-  min-height: 24px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 3px;
+  padding: 2px;
+  min-height: 22px;
 `;
 
 const RewardIcon = styled.div`
@@ -142,19 +140,25 @@ const RewardIcon = styled.div`
   width: 20px;
   height: 20px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  align-items: flex-start;
+  justify-content: flex-start;
   font-style: normal;
-
+  margin-right: 4px;
+  
   * {
     font-style: normal !important;
   }
+
+    position: relative;
+  left: -0.5rem;
+  top: -0.4rem;
 `;
 
 const RewardContent = styled.div`
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 4px;
+  flex: 1;
   min-width: 0;
 `;
 
@@ -170,10 +174,11 @@ const RewardLabel = styled.span<{ isMobile: boolean }>`
 
 const RewardValue = styled.span<{ isMobile: boolean }>`
   color: ${uiColors.green};
-  font-size: ${props => props.isMobile ? '0.65rem' : '0.7rem'};
+  font-size: ${props => props.isMobile ? '0.6rem' : '0.65rem'};
   line-height: 1.2;
   display: flex;
   align-items: center;
   font-weight: 600;
   flex-shrink: 0;
+  margin-left: 8px;
 `;

package/src/components/DailyTasks/TaskProgress.tsx

@@ -79,8 +79,10 @@ const ProgressRow = styled.div`
 
 const ProgressItem = styled.div`
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 6px;
+  flex: 1;
+  min-width: 100px;
 `;
 
 const ProgressLabel = styled.span`

package/src/components/DailyTasks/TaskProgressDetails.tsx

@@ -32,7 +32,7 @@ export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
           ([key, value], index) => (
             <ProgressItem key={index}>
               <span>{formatTaskKey(key)}:</span>
-              <ProgressCount className="notranslate">
+              <ProgressCount>
                 {value}/
                 {(task.requirements as IKillMobsRequirement).targets.find(
                   t => t.key === key
@@ -49,7 +49,7 @@ export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
         ([key, value], index) => (
           <ProgressItem key={index}>
             <span>{formatTaskKey(key)}:</span>
-            <ProgressCount className="notranslate">
+            <ProgressCount>
               {value}/
               {(task.requirements as ICollectItemsRequirement).targets.find(
                 t => t.key === key
@@ -65,7 +65,7 @@ export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
         ([key, value], index) => (
           <ProgressItem key={index}>
             <span>{formatTaskKey(key)}:</span>
-            <ProgressCount className="notranslate">
+            <ProgressCount>
               {value}/
               {(task.requirements as ICraftRequirement).targets.find(
                 t => t.key === key
@@ -102,26 +102,17 @@ export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
 const ProgressList = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 8px;
 `;
 
 const ProgressItem = styled.div`
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 6px;
-  background: rgba(0, 0, 0, 0.2);
-  padding: 4px 8px;
-  border-radius: 3px;
-
-  span:first-child {
-    color: ${uiColors.lightGray};
-    font-size: 0.75rem;
-  }
 `;
 
 const ProgressCount = styled.span`
-  color: ${uiColors.green} !important;
-  font-weight: 600;
+  color: ${uiColors.white} !important;
 `;
 
 const CheckItemWrapper = styled.div`

package/src/components/Item/Cards/ItemInfo.tsx

@@ -60,7 +60,7 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
           <Statistic key={stat.key} className={isOnlyInOneItem ? 'better' : ''}>
             <div className="label">{label}:</div>
             <div
-              className={`value notranslate ${
+              className={`value ${
                 isDifference ? (isBetter ? 'better' : 'worse') : ''
               }`}
             >
@@ -89,7 +89,7 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
         statistics.push(
           <Statistic key={stat.key} className="worse">
             <div className="label">{label}:</div>
-            <div className="value worse notranslate">
+            <div className="value worse">
               {itemToCompareStatistic.toString()}
             </div>
           </Statistic>
@@ -146,11 +146,11 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
       {item.minRequirements && (
         <LevelRequirement>
           <div className="title">Requirements:</div>
-          <div>- Level: <span className="notranslate">{item.minRequirements?.level}</span></div>
+          <div>- Level: {item.minRequirements?.level}</div>
           {skillName && (
             <div>
               - {skillName.charAt(0).toUpperCase() + skillName.slice(1)}:{' '}
-              <span className="notranslate">{item.minRequirements?.skill?.level}</span>
+              {item.minRequirements?.skill?.level}
             </div>
           )}
         </LevelRequirement>
@@ -169,7 +169,7 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
       <Description>{item.description}</Description>
 
       {item.maxStackSize && item.maxStackSize !== 1 && (
-        <StackInfo className="notranslate">
+        <StackInfo>
           x{Math.round((item.stackQty ?? 1) * 100) / 100}({item.maxStackSize})
         </StackInfo>
       )}

package/src/components/Item/Inventory/ItemSlotQty/ItemSlotQty.tsx

@@ -37,7 +37,7 @@ export const ItemSlotQty = ({
   return (
     <ItemQtyContainer key={`qty-${itemId}`} className="item-slot-qty">
       <Ellipsis maxLines={1} maxWidth="48px">
-        <ItemQty className={`${qtyClassName} notranslate`}>
+        <ItemQty className={qtyClassName}>
           {Math.round(stackQty * 100) / 100}{' '}
         </ItemQty>
       </Ellipsis>

package/src/components/ProgressBar.tsx

@@ -47,7 +47,7 @@ export const ProgressBar: React.FC<IBarProps> = ({
     >
       {displayText && (
         <TextOverlay>
-          <ProgressBarText className="notranslate">
+          <ProgressBarText>
             {displayValue}/{displayMax}
           </ProgressBarText>
         </TextOverlay>

package/src/components/SkillProgressBar.tsx

@@ -115,7 +115,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
               <BuffAndDebuffContainer>
                 <TitleNameContainer>
                   <TitleNameBuff>{skillName}</TitleNameBuff>
-                  <TitleNameBuff className="notranslate">
+                  <TitleNameBuff>
                     lv {effectiveLevel} ({skillsBuffsCalc(effectiveLevel, buffAndDebuff)})
                   </TitleNameBuff>
                 </TitleNameContainer>
@@ -129,7 +129,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
               <>
                 <TitleNameContainer>
                   <TitleNameDebuff>{skillName}</TitleNameDebuff>
-                  <TitleNameDebuff className="notranslate">
+                  <TitleNameDebuff>
                     lv {effectiveLevel} ({skillsBuffsCalc(effectiveLevel, buffAndDebuff)})
                   </TitleNameDebuff>
                 </TitleNameContainer>
@@ -147,7 +147,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
         {!buffAndDebuff && (
           <TitleNameContainer>
             <TitleName>{skillName}</TitleName>
-            <ValueDisplay className="notranslate">lv {effectiveLevel}</ValueDisplay>
+            <ValueDisplay>lv {effectiveLevel}</ValueDisplay>
           </TitleNameContainer>
         )}
       </ProgressTitle>
@@ -174,12 +174,12 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
 
         <ProgressBarWrapper>
           <SimpleProgressBar value={progress} bgColor={bgColor} />
-          <Tooltip><span className="notranslate">{skillKey ? 'SP' : 'XP'}: {currentSkillPoints}</span></Tooltip>
+          <Tooltip>{skillKey ? 'SP' : 'XP'}: {currentSkillPoints}</Tooltip>
         </ProgressBarWrapper>
       </ProgressBody>
       {showSkillPoints && (
         <SkillDisplayContainer>
-          <SkillPointsDisplay className="notranslate">{progress.toFixed(2)}%</SkillPointsDisplay>
+          <SkillPointsDisplay>{progress.toFixed(2)}%</SkillPointsDisplay>
         </SkillDisplayContainer>
       )}
     </>

package/src/components/Spellbook/Spell.tsx

@@ -93,7 +93,7 @@ export const Spell: React.FC<ISpellProps> = ({
         )}
         <SpellImage>
           {activeCooldown && activeCooldown > 0 ? (
-            <span className="cooldown notranslate">
+            <span className="cooldown">
               {activeCooldown.toFixed(activeCooldown > 10 ? 0 : 1)}
             </span>
           ) : null}
@@ -117,7 +117,7 @@ export const Spell: React.FC<ISpellProps> = ({
         <Divider />
         <Cost>
           <span>Mana cost:</span>
-          <span className="mana notranslate">{manaCost}</span>
+          <span className="mana">{manaCost}</span>
         </Cost>
       </Container>
     </SpellInfoWrapper>

package/src/components/Store/CartView.tsx

@@ -117,7 +117,7 @@ export const CartView: React.FC<ICartViewProps> = ({
                   {cartItem.metadata?.inputValue && (
                     <CartMeta>{cartItem.metadata.inputValue}</CartMeta>
                   )}
-                  <ItemInfo className="notranslate">
+                  <ItemInfo>
                     <span>${formatPrice(cartItem.item.price)}</span>
                     <span>×</span>
                     <span>{cartItem.quantity}</span>
@@ -150,7 +150,7 @@ export const CartView: React.FC<ICartViewProps> = ({
 
       <Footer>
         <TotalInfo>
-          <TotalRow className="notranslate">
+          <TotalRow>
             <span>Total:</span>
             <span>${formatPrice(total)}</span>
           </TotalRow>

package/src/components/Store/StoreItemRow.tsx

@@ -71,7 +71,7 @@ export const StoreItemRow: React.FC<IStoreItemRowProps> = ({
 
       <ItemDetails>
         <ItemName>{item.name}</ItemName>
-        <ItemPrice className="notranslate">${item.price}</ItemPrice>
+        <ItemPrice>${item.price}</ItemPrice>
         <ItemDescription>{item.description}</ItemDescription>
       </ItemDetails>