nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 21:36:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Achievement updates

Browse Source
This commit is contained in:
Bill 2022-01-04 01:14:36 -05:00
parent 63f7d6c3c4
commit 1350b69251
31 changed files with 206 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.scss
View File

@ -17,8 +17,8 @@ $grid-active-border-color: $white;
$toolbar-height: 55px;
$achievement-width: 350px;
$achievement-height: 370px;
$achievement-width: 375px;
$achievement-height: 425px;
$avatar-editor-width: 620px;
$avatar-editor-height: 374px;

17
src/views/achievements/AchievementsView.scss → src/components/achievements/AchievementsView.scss
View File

@ -3,19 +3,6 @@
height: $achievement-height;
}
.nitro-achievements-category-grid {
--nitro-grid-column-min-width: 80px !important;
.grid-item {
height: 80px;
max-height: 80px;
.achievement-score {
top: 50px;
}
}
}
.nitro-achievements-back-arrow {
background: url('../../assets/images/achievements/back-arrow.png') no-repeat center;
width: 33px;
@ -23,6 +10,6 @@
}
.nitro-achievements-badge-image {
width: 80px;
height: 80px;
width: 80px !important;
height: 80px !important;
}

67
src/views/achievements/AchievementsView.tsx → src/components/achievements/AchievementsView.tsx
View File

@ -1,18 +1,21 @@
import { AchievementData, AchievementEvent, AchievementsEvent, AchievementsScoreEvent, RequestAchievementsMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { LocalizeText } from '../../api';
import { GetConfiguration, LocalizeText } from '../../api';
import { Base } from '../../common/Base';
import { Column } from '../../common/Column';
import { Flex } from '../../common/Flex';
import { Text } from '../../common/Text';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent } from '../../events/achievements';
import { BatchUpdates, CreateMessageHook, dispatchUiEvent, SendMessageHook } from '../../hooks';
import { useUiEvent } from '../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../layout';
import { NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView } from '../../layout';
import { NitroLayoutBase } from '../../layout/base';
import { AchievementsViewProps } from './AchievementsView.types';
import { AchievementCategory } from './common/AchievementCategory';
import { AchievementUtilities } from './common/AchievementUtilities';
import { AchievementsCategoryListView } from './views/category-list/AchievementsCategoryListView';
import { AchievementCategoryView } from './views/category/AchievementCategoryView';
export const AchievementsView: FC<AchievementsViewProps> = props =>
export const AchievementsView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ isInitalized, setIsInitalized ] = useState(false);
@ -170,6 +173,15 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
return achievementCategories.find(existing => (existing.code === selectedCategoryCode));
}, [ achievementCategories, selectedCategoryCode ]);
const getCategoryIcon = useMemo(() =>
{
if(!getSelectedCategory) return null;
const imageUrl = GetConfiguration<string>('achievements.images.url');
return imageUrl.replace('%image%', `achicon_${ getSelectedCategory.code }`);
}, [ getSelectedCategory ]);
const setAchievementSeen = useCallback((code: string, achievementId: number) =>
{
const newCategories = [ ...achievementCategories ];
@ -207,38 +219,27 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
<NitroCardView uniqueKey="achievements" className="nitro-achievements" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
{ getSelectedCategory &&
<NitroCardSubHeaderView className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>
<NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>
<NitroLayoutBase onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
<NitroLayoutFlexColumn className="flex-grow-1">
<NitroLayoutBase className="fs-4 text-black fw-bold">
{ LocalizeText(`quests.${ getSelectedCategory.code }.name`) }
</NitroLayoutBase>
<NitroLayoutBase className="text-black">
{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ getSelectedCategory.getProgress().toString(), getSelectedCategory.getMaxProgress().toString() ]) }
</NitroLayoutBase>
</NitroLayoutFlexColumn>
<Column grow gap={ 0 }>
<Text fontSize={ 4 } fontWeight="bold" className="text-small">{ LocalizeText(`quests.${ getSelectedCategory.code }.name`) }</Text>
<Text>{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ getSelectedCategory.getProgress().toString(), getSelectedCategory.getMaxProgress().toString() ]) }</Text>
</Column>
</NitroCardSubHeaderView> }
<NitroCardContentView>
<NitroLayoutGrid>
<NitroLayoutGridColumn size={ 12 }>
{ !getSelectedCategory &&
<>
<AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } />
<NitroLayoutFlexColumn className="flex-grow-1 justify-content-end" gap={ 2 }>
<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>
</NitroLayoutFlexColumn>
</> }
{ getSelectedCategory &&
<AchievementCategoryView category={ getSelectedCategory } setAchievementSeen={ setAchievementSeen } /> }
</NitroLayoutGridColumn>
</NitroLayoutGrid>
{ !getSelectedCategory &&
<>
<AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } overflow="auto" />
<Column grow justifyContent="end">
<Base className="progress" position="relative">
<Flex fit center position="absolute" className="text-black">{ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }</Flex>
<Base className="progress-bar bg-success" style={ { width: (scaledProgressPercent + '%') }} />
</Base>
<Text className="bg-muted rounded p-1" center>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
</Column>
</> }
{ getSelectedCategory &&
<AchievementCategoryView category={ getSelectedCategory } setAchievementSeen={ setAchievementSeen } /> }
</NitroCardContentView>
</NitroCardView>
);

0
src/views/achievements/common/AchievementCategory.ts → src/components/achievements/common/AchievementCategory.ts
View File

0
src/views/achievements/common/AchievementUtilities.ts → src/components/achievements/common/AchievementUtilities.ts
View File

0
src/views/achievements/common/GetAchievementLevel.ts → src/components/achievements/common/GetAchievementLevel.ts
View File

0
src/views/achievements/common/GetScaledProgressPercent.ts → src/components/achievements/common/GetScaledProgressPercent.ts
View File

11
src/views/achievements/views/achievement-badge/AchievementBadgeView.tsx → src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx
View File

@ -1,7 +1,14 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { BaseProps } from '../../../../common/Base';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { AchievementUtilities } from '../../common/AchievementUtilities';
import { AchievementBadgeViewProps } from './AchievementBadgeView.types';
export interface AchievementBadgeViewProps extends BaseProps<HTMLDivElement>
{
achievement: AchievementData;
scale?: number;
}
export const AchievementBadgeView: FC<AchievementBadgeViewProps> = props =>
{

48
src/views/achievements/views/achievement-details/AchievementDetailsView.tsx → src/components/achievements/views/achievement-details/AchievementDetailsView.tsx
View File

@ -1,13 +1,22 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../../api';
import { Base } from '../../../../common/Base';
import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex';
import { Text } from '../../../../common/Text';
import { NitroLayoutFlex, NitroLayoutFlexColumn } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base';
import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
import { CurrencyIcon } from '../../../../views/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';
export interface AchievementDetailsViewProps
{
achievement: AchievementData;
}
export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
{
@ -19,22 +28,22 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
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">
<Flex shrink className="bg-muted rounded p-2 text-black" gap={ 2 } overflow="hidden">
<Column center>
<AchievementBadgeView className="nitro-achievements-badge-image" achievement={ achievement } scale={ 2 } />
<NitroLayoutBase className="fw-bold">
{ LocalizeText('achievements.details.level', [ 'level', 'limit' ], [ achievementLevel.toString(), achievement.levelCount.toString() ]) }
</NitroLayoutBase>
</NitroLayoutFlexColumn>
<NitroLayoutFlexColumn className="justify-content-center w-100" overflow="hidden" gap={ 2 }>
<NitroLayoutFlexColumn>
<NitroLayoutBase className="fw-bold text-truncate">
</NitroLayoutBase>
</Column>
<Column fullWidth justifyContent="center" overflow="hidden">
<Column gap={ 1 }>
<Text fontWeight="bold" truncate>
{ LocalizeBadgeName(AchievementUtilities.getBadgeCode(achievement)) }
</NitroLayoutBase>
<NitroLayoutBase className="text-truncate">
</Text>
<Text truncate>
{ LocalizeBadgeDescription(AchievementUtilities.getBadgeCode(achievement)) }
</NitroLayoutBase>
</NitroLayoutFlexColumn>
</Text>
</Column>
{ ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
<NitroLayoutFlexColumn gap={ 1 }>
{ (achievement.levelRewardPoints > 0) &&
@ -48,13 +57,12 @@ export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
</NitroLayoutFlex>
</NitroLayoutFlex> }
{ (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> }
<Base className="progress" position="relative">
<Flex fit center position="absolute" className="text-black"> { LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (achievement.currentPoints + achievement.scoreAtStartOfLevel).toString(), (achievement.scoreLimit + achievement.scoreAtStartOfLevel).toString() ]) }</Flex>
<Base className="progress-bar" style={ { width: (scaledProgressPercent + '%') }} />
</Base> }
</NitroLayoutFlexColumn> }
</NitroLayoutFlexColumn>
</NitroLayoutFlex>
</Column>
</Flex>
)
}

23
src/components/achievements/views/achievement-list/AchievementListItemView.tsx Normal file
View File

@ -0,0 +1,23 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { LayoutGridItem, LayoutGridItemProps } from '../../../../common/layout/LayoutGridItem';
import { AchievementBadgeView } from '../achievement-badge/AchievementBadgeView';
export interface AchievementListItemViewProps extends LayoutGridItemProps
{
achievement: AchievementData;
}
export const AchievementListItemView: FC<AchievementListItemViewProps> = props =>
{
const { achievement = null, children = null, ...rest } = props;
if(!achievement) return null;
return (
<LayoutGridItem itemCount={ achievement.unseen } itemCountMinimum={ 0 } { ...rest }>
<AchievementBadgeView achievement={ achievement } />
{ children }
</LayoutGridItem>
);
}

26
src/components/achievements/views/achievement-list/AchievementListView.tsx Normal file
View File

@ -0,0 +1,26 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { Dispatch, FC, SetStateAction } from 'react';
import { Grid, GridProps } from '../../../../common/Grid';
import { AchievementListItemView } from './AchievementListItemView';
export interface AchievementListViewProps extends GridProps
{
achievements: AchievementData[];
selectedAchievementId: number;
setSelectedAchievementId: Dispatch<SetStateAction<number>>;
}
export const AchievementListView: FC<AchievementListViewProps> = props =>
{
const { achievements = null, selectedAchievementId = 0, setSelectedAchievementId = null, children = null, ...rest } = props;
return (
<Grid grow columnCount={ 6 } columnMinWidth={ 50 } columnMinHeight={ 50 } overflow="auto" { ...rest }>
{ achievements && (achievements.length > 0) && achievements.map((achievement, index) =>
{
return <AchievementListItemView key={ index } achievement={ achievement } itemActive={ (selectedAchievementId === achievement.achievementId) } onClick={ event => setSelectedAchievementId(achievement.achievementId) } />;
}) }
{ children }
</Grid>
);
}

44
src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx Normal file
View File

@ -0,0 +1,44 @@
import { FC, useCallback, useMemo } from 'react';
import { GetConfiguration, LocalizeText } from '../../../../api';
import { LayoutGridItem, LayoutGridItemProps } from '../../../../common/layout/LayoutGridItem';
import { LayoutImage } from '../../../../common/layout/LayoutImage';
import { Text } from '../../../../common/Text';
import { AchievementCategory } from '../../common/AchievementCategory';
export interface AchievementCategoryListItemViewProps extends LayoutGridItemProps
{
category: AchievementCategory;
}
export const AchievementsCategoryListItemView: FC<AchievementCategoryListItemViewProps> = props =>
{
const { category = null, ...rest } = props;
const progress = category.getProgress();
const maxProgress = category.getMaxProgress();
const getCategoryImage = useMemo(() =>
{
const imageUrl = GetConfiguration<string>('achievements.images.url');
return imageUrl.replace('%image%', `achcategory_${ category.code }_${ ((progress > 0) ? 'active' : 'inactive') }`);
}, [ category, progress ]);
const getTotalUnseen = useCallback(() =>
{
let unseen = 0;
for(const achievement of category.achievements) unseen += achievement.unseen;
return unseen;
}, [ category ]);
return (
<LayoutGridItem itemCount={ getTotalUnseen() } itemCountMinimum={ 0 } gap={ 1 } { ...rest }>
<Text fullWidth center className="small pt-1">{ LocalizeText(`quests.${ category.code }.name`) }</Text>
<LayoutImage position="relative" imageUrl={ getCategoryImage }>
<Text fullWidth center position="absolute" variant="white" style={ { fontSize: 12, bottom: 9 } }>{ progress } / { maxProgress }</Text>
</LayoutImage>
</LayoutGridItem>
);
}

23
src/components/achievements/views/category-list/AchievementsCategoryListView.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Dispatch, FC, SetStateAction } from 'react';
import { Grid, GridProps } from '../../../../common/Grid';
import { AchievementCategory } from '../../common/AchievementCategory';
import { AchievementsCategoryListItemView } from './AchievementsCategoryListItemView';
export interface AchievementsCategoryListViewProps extends GridProps
{
categories: AchievementCategory[];
selectedCategoryCode: string;
setSelectedCategoryCode: Dispatch<SetStateAction<string>>;
}
export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps> = props =>
{
const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
return (
<Grid grow columnMinWidth={ 90 } columnMinHeight={ 100 } { ...rest }>
{ categories && (categories.length > 0) && categories.map((category, index) => <AchievementsCategoryListItemView key={ index } category={ category } itemActive={ (selectedCategoryCode === category.code) } onClick={ event => setSelectedCategoryCode(category.code) } /> ) }
{ children }
</Grid>
);
};

14
src/views/achievements/views/category/AchievementCategoryView.tsx → src/components/achievements/views/category/AchievementCategoryView.tsx
View File

@ -1,8 +1,14 @@
import { FC, useEffect, useMemo, useState } from 'react';
import { NitroLayoutFlexColumn } from '../../../../layout';
import { Column } from '../../../../common/Column';
import { AchievementCategory } from '../../common/AchievementCategory';
import { AchievementDetailsView } from '../achievement-details/AchievementDetailsView';
import { AchievementListView } from '../achievement-list/AchievementListView';
import { AchievementCategoryViewProps } from './AchievementCategoryView.types';
export class AchievementCategoryViewProps
{
category: AchievementCategory;
setAchievementSeen: (code: string, achievementId: number) => void;
}
export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =>
{
@ -42,10 +48,10 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
if(!category) return null;
return (
<NitroLayoutFlexColumn className="justify-content-between h-100" gap={ 2 }>
<Column fullHeight justifyContent="between">
<AchievementListView achievements={ category.achievements } selectedAchievementId={ selectedAchievementId } setSelectedAchievementId={ setSelectedAchievementId } />
{ getSelectedAchievement &&
<AchievementDetailsView achievement={ getSelectedAchievement } /> }
</NitroLayoutFlexColumn>
</Column>
);
}

5
src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
View File

@ -1,11 +1,10 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
import { NitroCardGridItemViewProps } from '../../../../layout';
import { LayoutGridItem, LayoutGridItemProps } from '../../../../common/layout/LayoutGridItem';
import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
import { AvatarEditorIcon } from '../AvatarEditorIcon';
export interface AvatarEditorFigureSetItemViewProps extends NitroCardGridItemViewProps
export interface AvatarEditorFigureSetItemViewProps extends LayoutGridItemProps
{
partItem: AvatarEditorGridPartItem;
}

1
src/components/index.scss
View File

@ -1,2 +1,3 @@
@import './achievements/AchievementsView';
@import './avatar-editor/AvatarEditorView';
@import './inventory/InventoryView';

2
src/components/inventory/views/pet/InventoryPetItemView.tsx
View File

@ -51,7 +51,7 @@ export const InventoryPetItemView: FC<InventoryPetItemViewProps> = props =>
return (
<LayoutGridItem itemActive={ isActive } itemUnseen={ petItem.isUnseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
<PetImageView figure={ petItem.petData.figureData.figuredata } scale={ 0.5 } />
<PetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
</LayoutGridItem>
);
}

1
src/views/Styles.scss
View File

@ -15,7 +15,6 @@
@import "./toolbar/ToolbarView";
@import "./wired/WiredView";
@import "./mod-tools/ModToolsView";
@import "./achievements/AchievementsView";
@import "./user-settings/UserSettingsView";
@import "./user-profile/UserProfileVew";
@import "./chat-history/ChatHistoryView";

2
src/views/achievements/AchievementsView.types.ts
View File

@ -1,2 +0,0 @@
export class AchievementsViewProps
{}

8
src/views/achievements/views/achievement-badge/AchievementBadgeView.types.ts
View File

@ -1,8 +0,0 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { NitroLayoutBaseProps } from '../../../../layout/base';
export interface AchievementBadgeViewProps extends NitroLayoutBaseProps
{
achievement: AchievementData;
scale?: number;
}

6
src/views/achievements/views/achievement-details/AchievementDetailsView.types.ts
View File

@ -1,6 +0,0 @@
import { AchievementData } from '@nitrots/nitro-renderer';
export interface AchievementDetailsViewProps
{
achievement: AchievementData;
}

17
src/views/achievements/views/achievement-list-item/AchievementListItemView.tsx
View File

@ -1,17 +0,0 @@
import { FC } from 'react';
import { NitroCardGridItemView } from '../../../../layout';
import { AchievementBadgeView } from '../achievement-badge/AchievementBadgeView';
import { AchievementListItemViewProps } from './AchievementListItemView.types';
export const AchievementListItemView: FC<AchievementListItemViewProps> = props =>
{
const { achievement = null, children = null, ...rest } = props;
if(!achievement) return null;
return (
<NitroCardGridItemView itemCount={ achievement.unseen } itemCountMinimum={ 0 } { ...rest }>
<AchievementBadgeView achievement={ achievement } />
</NitroCardGridItemView>
);
}

7
src/views/achievements/views/achievement-list-item/AchievementListItemView.types.ts
View File

@ -1,7 +0,0 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { NitroCardGridItemViewProps } from '../../../../layout';
export interface AchievementListItemViewProps extends NitroCardGridItemViewProps
{
achievement: AchievementData;
}

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

@ -1,18 +0,0 @@
import { FC } from 'react';
import { NitroCardGridView } from '../../../../layout';
import { AchievementListItemView } from '../achievement-list-item/AchievementListItemView';
import { AchievementListViewProps } from './AchievementListView.types';
export const AchievementListView: FC<AchievementListViewProps> = props =>
{
const { achievements = null, selectedAchievementId = 0, setSelectedAchievementId = null, ...rest } = props;
return (
<NitroCardGridView { ...rest }>
{ achievements && (achievements.length > 0) && achievements.map((achievement, index) =>
{
return <AchievementListItemView key={ index } achievement={ achievement } itemActive={ (selectedAchievementId === achievement.achievementId) } onClick={ event => setSelectedAchievementId(achievement.achievementId) } />;
}) }
</NitroCardGridView>
);
}

10
src/views/achievements/views/achievement-list/AchievementListView.types.ts
View File

@ -1,10 +0,0 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { Dispatch, SetStateAction } from 'react';
import { NitroCardGridViewProps } from '../../../../layout';
export interface AchievementListViewProps extends NitroCardGridViewProps
{
achievements: AchievementData[];
selectedAchievementId: number;
setSelectedAchievementId: Dispatch<SetStateAction<number>>;
}

7
src/views/achievements/views/category-list-item/AchievementCategoryListItemView.types.ts
View File

@ -1,7 +0,0 @@
import { NitroCardGridItemViewProps } from '../../../../layout';
import { AchievementCategory } from '../../common/AchievementCategory';
export interface AchievementCategoryListItemViewProps extends NitroCardGridItemViewProps
{
category: AchievementCategory;
}

38
src/views/achievements/views/category-list-item/AchievementsCategoryListItemView.tsx
View File

@ -1,38 +0,0 @@
import { FC, useCallback, useMemo } from 'react';
import { GetConfiguration } from '../../../../api';
import { NitroCardGridItemView } from '../../../../layout';
import { NitroLayoutBase } from '../../../../layout/base';
import { AchievementCategoryListItemViewProps } from './AchievementCategoryListItemView.types';
export const AchievementsCategoryListItemView: FC<AchievementCategoryListItemViewProps> = props =>
{
const { category = null, ...rest } = props;
const progress = category.getProgress();
const maxProgress = category.getMaxProgress();
const getCategoryImage = useMemo(() =>
{
const imageUrl = GetConfiguration<string>('achievements.images.url');
return imageUrl.replace('%image%', `achcategory_${ category.code }_${ ((progress > 0) ? 'active' : 'inactive') }`);
}, [ category, progress ]);
const getTotalUnseen = useCallback(() =>
{
let unseen = 0;
for(const achievement of category.achievements) unseen += achievement.unseen;
return unseen;
}, [ category ]);
return (
<NitroCardGridItemView itemImage={ getCategoryImage } itemCount={ getTotalUnseen() } itemCountMinimum={ 0 } { ...rest }>
<NitroLayoutBase className="text-black small">{ category.code }</NitroLayoutBase>
<NitroLayoutBase className="achievement-score small" position="absolute">
{ progress } / { maxProgress }
</NitroLayoutBase>
</NitroCardGridItemView>
);
}

18
src/views/achievements/views/category-list/AchievementsCategoryListView.tsx
View File

@ -1,18 +0,0 @@
import { FC } from 'react';
import { NitroCardGridView } from '../../../../layout';
import { AchievementsCategoryListItemView } from '../category-list-item/AchievementsCategoryListItemView';
import { AchievementsCategoryListViewProps } from './AchievementsCategoryListView.types';
export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps> = props =>
{
const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, ...rest } = props;
return (
<NitroCardGridView className="nitro-achievements-category-grid" { ...rest }>
{ categories && (categories.length > 0) && categories.map((category, index) =>
{
return <AchievementsCategoryListItemView key={ index } category={ category } itemActive={ (selectedCategoryCode === category.code) } onClick={ event => setSelectedCategoryCode(category.code) } />;
}) }
</NitroCardGridView>
);
};

10
src/views/achievements/views/category-list/AchievementsCategoryListView.types.ts
View File

@ -1,10 +0,0 @@
import { Dispatch, SetStateAction } from 'react';
import { NitroCardGridViewProps } from '../../../../layout';
import { AchievementCategory } from '../../common/AchievementCategory';
export interface AchievementsCategoryListViewProps extends NitroCardGridViewProps
{
categories: AchievementCategory[];
selectedCategoryCode: string;
setSelectedCategoryCode: Dispatch<SetStateAction<string>>;
}

7
src/views/achievements/views/category/AchievementCategoryView.types.ts
View File

@ -1,7 +0,0 @@
import { AchievementCategory } from '../../common/AchievementCategory';
export class AchievementCategoryViewProps
{
category: AchievementCategory;
setAchievementSeen: (code: string, achievementId: number) => void;
}

2
src/views/main/MainView.tsx
View File

@ -1,11 +1,11 @@
import { HabboWebTools, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
import { AchievementsView } from '../../components/achievements/AchievementsView';
import { AvatarEditorView } from '../../components/avatar-editor/AvatarEditorView';
import { InventoryView } from '../../components/inventory/InventoryView';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
import { AchievementsView } from '../achievements/AchievementsView';
import { CameraWidgetView } from '../camera/CameraWidgetView';
import { CampaignView } from '../campaign/CampaignView';
import { CatalogView } from '../catalog/CatalogView';