nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Achievement updates

Browse Source
This commit is contained in:
Bill 2021-10-05 15:52:52 -04:00
parent 78001b6f30
commit 195f3815cb
5 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/views/achievements/AchievementsView.tsx
View File

@ -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,9 +225,11 @@ 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">
<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() ]) }
</NitroLayoutBase>

8
src/views/achievements/common/GetAchievementLevel.ts Normal file
View File

@ -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);
}

8
src/views/achievements/common/GetScaledProgressPercent.ts Normal file
View File

@ -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);
}

32
src/views/achievements/views/achievement-details/AchievementDetailsView.tsx
View File

@ -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 maxAmount = achievement.scoreLimit;
const scoreAtStartOfLevel = achievement.scoreAtStartOfLevel;
const achievementLevel = GetAchievementLevel(achievement);
const scaledProgressPercent = GetScaledProgressPercent(achievement);
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) &&
LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (currentAmount + scoreAtStartOfLevel).toString(), (maxAmount + scoreAtStartOfLevel).toString() ]) }
{ (achievement.scoreLimit > 0) &&
<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>

4
src/views/achievements/views/achievement-list/AchievementListView.tsx
View File

@ -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>
);