Achievement updates

src/views/achievements/AchievementsView.tsx

@@ -158,6 +158,11 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
         return progress;
     }, [ achievementCategories ]);
 
+    const scaledProgressPercent = useMemo(() =>
+    {
+        return ~~((((getProgress - 0) * (100 - 0)) / (getMaxProgress - 0)) + 0);
+    }, [ getProgress, getMaxProgress ]);
+
     const getSelectedCategory = useMemo(() =>
     {
         if(!achievementCategories || !achievementCategories.length) return null;
@@ -220,8 +225,10 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
                             <>
                                 <AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode }  />
                                 <NitroLayoutFlexColumn className="flex-grow-1 justify-content-end" gap={ 2 }>
-                                    <NitroLayoutBase className="bg-muted text-black text-center rounded">
+                                    <NitroLayoutBase className="progress">
-                                        { LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }
+                                        <NitroLayoutBase className="progress-bar" style={ { width: (scaledProgressPercent + '%') }}>
+                                            { LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }
+                                        </NitroLayoutBase>
                                     </NitroLayoutBase>
                                     <NitroLayoutBase className="bg-muted text-black text-center rounded">
                                         { LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }

src/views/achievements/common/GetAchievementLevel.ts

@@ -0,0 +1,8 @@
+import { AchievementData } from '@nitrots/nitro-renderer';
+
+export const GetAchievementLevel = (achievement: AchievementData) =>
+{
+    if(achievement.finalLevel) return achievement.level;
+
+    return (achievement.level - 1);
+}

src/views/achievements/common/GetScaledProgressPercent.ts

@@ -0,0 +1,8 @@
+import { AchievementData } from '@nitrots/nitro-renderer';
+
+export const GetScaledProgressPercent = (achievement: AchievementData) =>
+{
+    if(!achievement) return 0;
+
+    return ~~(((((achievement.currentPoints + achievement.scoreAtStartOfLevel) - 0) * (100 - 0)) / ((achievement.scoreLimit + achievement.scoreAtStartOfLevel) - 0)) + 0);
+}

src/views/achievements/views/achievement-details/AchievementDetailsView.tsx

@@ -1,9 +1,11 @@
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 import { LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../../api';
 import { NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
 import { NitroLayoutBase } from '../../../../layout/base';
 import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
 import { AchievementUtilities } from '../../common/AchievementUtilities';
+import { GetAchievementLevel } from '../../common/GetAchievementLevel';
+import { GetScaledProgressPercent } from '../../common/GetScaledProgressPercent';
 import { AchievementBadgeView } from '../achievement-badge/AchievementBadgeView';
 import { AchievementDetailsViewProps } from './AchievementDetailsView.types';
 
@@ -11,25 +13,17 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
 {
     const { achievement = null } = props;
 
-    const getAchievementLevel = useMemo(() =>
-    {
-        if(achievement.finalLevel) return achievement.level;
-
-        return (achievement.level - 1);
-    }, [ achievement ]);
-
     if(!achievement) return null;
 
-    const currentAmount = achievement.currentPoints;
+    const achievementLevel = GetAchievementLevel(achievement);
-    const maxAmount = achievement.scoreLimit;
+    const scaledProgressPercent = GetScaledProgressPercent(achievement);
-    const scoreAtStartOfLevel = achievement.scoreAtStartOfLevel;
 
     return (
         <NitroLayoutFlex className="bg-muted rounded p-2 text-black flex-shrink-0" gap={ 2 } overflow="hidden">
             <NitroLayoutFlexColumn className="justify-content-center align-items-center">
                 <AchievementBadgeView className="nitro-achievements-badge-image" achievement={ achievement } scale={ 2 } />
                 <NitroLayoutBase className="fw-bold">
-                    { LocalizeText('achievements.details.level', [ 'level', 'limit' ], [ getAchievementLevel.toString(), achievement.levelCount.toString() ]) }
+                    { LocalizeText('achievements.details.level', [ 'level', 'limit' ], [ achievementLevel.toString(), achievement.levelCount.toString() ]) }
                     </NitroLayoutBase>
             </NitroLayoutFlexColumn>
             <NitroLayoutFlexColumn className="justify-content-center w-100" overflow="hidden" gap={ 2 }>
@@ -41,20 +35,24 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
                         { LocalizeBadgeDescription(AchievementUtilities.getBadgeCode(achievement)) }
                     </NitroLayoutBase>
                 </NitroLayoutFlexColumn>
-                { ((achievement.levelRewardPoints > 0) || (maxAmount > 0)) &&
+                { ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
                     <NitroLayoutFlexColumn gap={ 1 }>
                         { (achievement.levelRewardPoints > 0) &&
                             <NitroLayoutFlex gap={ 1 }>
-                                <NitroLayoutBase className="text-truncate">
+                                <NitroLayoutBase className="text-truncate small">
                                     { LocalizeText('achievements.details.reward') }
                                 </NitroLayoutBase>
-                                <NitroLayoutFlex className="fw-bold align-items-center justify-content-center" gap={ 1 }>
+                                <NitroLayoutFlex className="fw-bold align-items-center justify-content-center small" gap={ 1 }>
                                     { achievement.levelRewardPoints }
                                     <CurrencyIcon type={ achievement.levelRewardPointType } />
                                 </NitroLayoutFlex>
                             </NitroLayoutFlex> }
-                        { (maxAmount > 0) &&
+                        { (achievement.scoreLimit > 0) &&
-                            LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (currentAmount + scoreAtStartOfLevel).toString(), (maxAmount + scoreAtStartOfLevel).toString() ]) }
+                            <NitroLayoutBase className="progress">
+                                <NitroLayoutBase className="progress-bar" style={ { width: (scaledProgressPercent + '%') }}>
+                                    { LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (achievement.currentPoints + achievement.scoreAtStartOfLevel).toString(), (achievement.scoreLimit + achievement.scoreAtStartOfLevel).toString() ]) }
+                                </NitroLayoutBase>
+                            </NitroLayoutBase> }
                     </NitroLayoutFlexColumn> }
             </NitroLayoutFlexColumn>
         </NitroLayoutFlex>

src/views/achievements/views/achievement-list/AchievementListView.tsx

@@ -9,9 +9,9 @@ export const AchievementListView: FC<AchievementListViewProps> = props =>
 
     return (
         <NitroCardGridView { ...rest }>
-            { achievements && (achievements.length > 0) && achievements.map(achievement =>
+            { achievements && (achievements.length > 0) && achievements.map((achievement, index) =>
                 {
-                    return <AchievementListItemView key={ achievement.achievementId } achievement={ achievement } itemActive={ (selectedAchievementId === achievement.achievementId) } onClick={ event => setSelectedAchievementId(achievement.achievementId) } />;
+                    return <AchievementListItemView key={ index } achievement={ achievement } itemActive={ (selectedAchievementId === achievement.achievementId) } onClick={ event => setSelectedAchievementId(achievement.achievementId) } />;
                 }) }
         </NitroCardGridView>
     );