@rpg-engine/long-bow 0.8.103 → 0.8.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.103",
+  "version": "0.8.104",
   "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,10 +129,12 @@ const CollapsibleContent = styled.div`
 const RewardItem = styled.div`
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   width: 100%;
-  padding: 2px;
-  min-height: 22px;
+  padding: 2px 4px;
+  min-height: 24px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
 `;
 
 const RewardIcon = styled.div`
@@ -140,25 +142,19 @@ const RewardIcon = styled.div`
   width: 20px;
   height: 20px;
   display: flex;
-  align-items: flex-start;
-  justify-content: flex-start;
+  align-items: center;
+  justify-content: center;
   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;
-  flex: 1;
+  gap: 4px;
   min-width: 0;
 `;
 
@@ -174,11 +170,10 @@ const RewardLabel = styled.span<{ isMobile: boolean }>`
 
 const RewardValue = styled.span<{ isMobile: boolean }>`
   color: ${uiColors.green};
-  font-size: ${props => props.isMobile ? '0.6rem' : '0.65rem'};
+  font-size: ${props => props.isMobile ? '0.65rem' : '0.7rem'};
   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,10 +79,8 @@ const ProgressRow = styled.div`
 
 const ProgressItem = styled.div`
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  flex: 1;
-  min-width: 100px;
+  gap: 6px;
 `;
 
 const ProgressLabel = styled.span`

package/src/components/DailyTasks/TaskProgressDetails.tsx

@@ -102,17 +102,28 @@ export const TaskProgressDetails: React.FC<ITaskProgressDetailsProps> = ({
 const ProgressList = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 `;
 
 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.white} !important;
+const ProgressCount = styled.span.attrs({
+  className: 'notranslate',
+})`
+  color: ${uiColors.green} !important;
+  font-weight: 600;
 `;
 
 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 ${
+              className={`value notranslate ${
                 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">
+            <div className="value worse notranslate">
               {itemToCompareStatistic.toString()}
             </div>
           </Statistic>
@@ -146,11 +146,11 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
       {item.minRequirements && (
         <LevelRequirement>
           <div className="title">Requirements:</div>
-          <div>- Level: {item.minRequirements?.level}</div>
+          <div>- Level: <span className="notranslate">{item.minRequirements?.level}</span></div>
           {skillName && (
             <div>
               - {skillName.charAt(0).toUpperCase() + skillName.slice(1)}:{' '}
-              {item.minRequirements?.skill?.level}
+              <span className="notranslate">{item.minRequirements?.skill?.level}</span>
             </div>
           )}
         </LevelRequirement>
@@ -169,7 +169,7 @@ export const ItemInfo: React.FC<IItemInfoProps> = ({
       <Description>{item.description}</Description>
 
       {item.maxStackSize && item.maxStackSize !== 1 && (
-        <StackInfo>
+        <StackInfo className="notranslate">
           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}>
+        <ItemQty className={`${qtyClassName} notranslate`}>
           {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>
+          <ProgressBarText className="notranslate">
             {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>
+                  <TitleNameBuff className="notranslate">
                     lv {effectiveLevel} ({skillsBuffsCalc(effectiveLevel, buffAndDebuff)})
                   </TitleNameBuff>
                 </TitleNameContainer>
@@ -129,7 +129,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
               <>
                 <TitleNameContainer>
                   <TitleNameDebuff>{skillName}</TitleNameDebuff>
-                  <TitleNameDebuff>
+                  <TitleNameDebuff className="notranslate">
                     lv {effectiveLevel} ({skillsBuffsCalc(effectiveLevel, buffAndDebuff)})
                   </TitleNameDebuff>
                 </TitleNameContainer>
@@ -147,7 +147,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
         {!buffAndDebuff && (
           <TitleNameContainer>
             <TitleName>{skillName}</TitleName>
-            <ValueDisplay>lv {effectiveLevel}</ValueDisplay>
+            <ValueDisplay className="notranslate">lv {effectiveLevel}</ValueDisplay>
           </TitleNameContainer>
         )}
       </ProgressTitle>
@@ -174,12 +174,12 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
 
         <ProgressBarWrapper>
           <SimpleProgressBar value={progress} bgColor={bgColor} />
-          <Tooltip>{skillKey ? 'SP' : 'XP'}: {currentSkillPoints}</Tooltip>
+          <Tooltip><span className="notranslate">{skillKey ? 'SP' : 'XP'}: {currentSkillPoints}</span></Tooltip>
         </ProgressBarWrapper>
       </ProgressBody>
       {showSkillPoints && (
         <SkillDisplayContainer>
-          <SkillPointsDisplay>{progress.toFixed(2)}%</SkillPointsDisplay>
+          <SkillPointsDisplay className="notranslate">{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">
+            <span className="cooldown notranslate">
               {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">{manaCost}</span>
+          <span className="mana notranslate">{manaCost}</span>
         </Cost>
       </Container>
     </SpellInfoWrapper>

package/src/components/Store/CartView.tsx

@@ -275,7 +275,9 @@ const ItemName = styled.div`
   color: #ffffff;
 `;
 
-const ItemInfo = styled.div`
+const ItemInfo = styled.div.attrs({
+  className: 'notranslate',
+})`
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -299,7 +301,9 @@ const TotalInfo = styled.div`
   gap: 0.5rem;
 `;
 
-const TotalRow = styled.div`
+const TotalRow = styled.div.attrs({
+  className: 'notranslate',
+})`
   display: flex;
   align-items: center;
   justify-content: space-between;

package/src/components/Store/StoreItemRow.tsx

@@ -161,7 +161,9 @@ const ItemName = styled.div`
   color: #ffffff;
 `;
 
-const ItemPrice = styled.div`
+const ItemPrice = styled.div.attrs({
+  className: 'notranslate',
+})`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.625rem;
   color: #fef08a;