Achievement updates

src/App.scss

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

src/components/achievements/AchievementsView.scss

@@ -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;
+    width: 80px !important;
-    height: 80px;
+    height: 80px !important;
 }

src/components/achievements/AchievementsView.tsx

@@ -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">
+                    <Column grow gap={ 0 }>
-                        <NitroLayoutBase className="fs-4 text-black fw-bold">
+                        <Text fontSize={ 4 } fontWeight="bold" className="text-small">{ LocalizeText(`quests.${ getSelectedCategory.code }.name`) }</Text>
-                            { LocalizeText(`quests.${ getSelectedCategory.code }.name`) }
+                        <Text>{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ getSelectedCategory.getProgress().toString(), getSelectedCategory.getMaxProgress().toString() ]) }</Text>
-                        </NitroLayoutBase>
+                    </Column>
-                        <NitroLayoutBase className="text-black">
-                            { LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ getSelectedCategory.getProgress().toString(), getSelectedCategory.getMaxProgress().toString() ]) }
-                        </NitroLayoutBase>
-                    </NitroLayoutFlexColumn>
                 </NitroCardSubHeaderView> }
             <NitroCardContentView>
-                <NitroLayoutGrid>
+                { !getSelectedCategory &&
-                    <NitroLayoutGridColumn size={ 12 }>
+                    <>
-                        { !getSelectedCategory &&
+                        <AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } overflow="auto"  />
-                            <>
+                        <Column grow justifyContent="end">
-                                <AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode }  />
+                            <Base className="progress" position="relative">
-                                <NitroLayoutFlexColumn className="flex-grow-1 justify-content-end" gap={ 2 }>
+                                <Flex fit center position="absolute" className="text-black">{ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }</Flex>
-                                    <NitroLayoutBase className="progress">
+                                <Base className="progress-bar bg-success" style={ { width: (scaledProgressPercent + '%') }} />
-                                        <NitroLayoutBase className="progress-bar" style={ { width: (scaledProgressPercent + '%') }}>
+                            </Base>
-                                            { LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) }
+                            <Text className="bg-muted rounded p-1" center>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
-                                        </NitroLayoutBase>
+                        </Column>
-                                    </NitroLayoutBase>
+                    </> }
-                                    <NitroLayoutBase className="bg-muted text-black text-center rounded">
+                { getSelectedCategory &&
-                                        { LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }
+                    <AchievementCategoryView category={ getSelectedCategory } setAchievementSeen={ setAchievementSeen } /> }
-                                    </NitroLayoutBase>
-                                </NitroLayoutFlexColumn>
-                            </> }
-                        { getSelectedCategory &&
-                            <AchievementCategoryView category={ getSelectedCategory } setAchievementSeen={ setAchievementSeen } /> }
-                    </NitroLayoutGridColumn>
-                </NitroLayoutGrid>
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx

@@ -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 =>
 {

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

@@ -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">
+        <Flex shrink className="bg-muted rounded p-2 text-black" gap={ 2 } overflow="hidden">
-            <NitroLayoutFlexColumn className="justify-content-center align-items-center">
+            <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>
+                </NitroLayoutBase>
-            </NitroLayoutFlexColumn>
+            </Column>
-            <NitroLayoutFlexColumn className="justify-content-center w-100" overflow="hidden" gap={ 2 }>
+            <Column fullWidth justifyContent="center" overflow="hidden">
-                <NitroLayoutFlexColumn>
+                <Column gap={ 1 }>
-                    <NitroLayoutBase className="fw-bold text-truncate">
+                    <Text fontWeight="bold" truncate>
                         { LocalizeBadgeName(AchievementUtilities.getBadgeCode(achievement)) }
-                    </NitroLayoutBase>
+                    </Text>
-                    <NitroLayoutBase className="text-truncate">
+                    <Text truncate>
                         { LocalizeBadgeDescription(AchievementUtilities.getBadgeCode(achievement)) }
-                    </NitroLayoutBase>
+                    </Text>
-                </NitroLayoutFlexColumn>
+                </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">
+                            <Base className="progress" position="relative">
-                                <NitroLayoutBase className="progress-bar" style={ { width: (scaledProgressPercent + '%') }}>
+                                <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>
-                                    { LocalizeText('achievements.details.progress', [ 'progress', 'limit' ], [ (achievement.currentPoints + achievement.scoreAtStartOfLevel).toString(), (achievement.scoreLimit + achievement.scoreAtStartOfLevel).toString() ]) }
+                                <Base className="progress-bar" style={ { width: (scaledProgressPercent + '%') }} />
-                                </NitroLayoutBase>
+                            </Base> }
-                            </NitroLayoutBase> }
                     </NitroLayoutFlexColumn> }
-            </NitroLayoutFlexColumn>
+            </Column>
-        </NitroLayoutFlex>
+        </Flex>
     )
 }

src/components/achievements/views/achievement-list/AchievementListItemView.tsx

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

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

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

src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx

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

src/components/achievements/views/category-list/AchievementsCategoryListView.tsx

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

src/components/achievements/views/category/AchievementCategoryView.tsx

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

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

@@ -1,11 +1,10 @@
 import { FC, useCallback, useEffect, useState } from 'react';
-import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
+import { LayoutGridItem, LayoutGridItemProps } from '../../../../common/layout/LayoutGridItem';
-import { NitroCardGridItemViewProps } from '../../../../layout';
 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;
 }

src/components/index.scss

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

src/components/inventory/views/pet/InventoryPetItemView.tsx

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

src/views/Styles.scss

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

src/views/achievements/AchievementsView.types.ts

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

src/views/achievements/views/achievement-badge/AchievementBadgeView.types.ts

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

src/views/achievements/views/achievement-details/AchievementDetailsView.types.ts

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

src/views/achievements/views/achievement-list-item/AchievementListItemView.tsx

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

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

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

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

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

src/views/achievements/views/achievement-list/AchievementListView.types.ts

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

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

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

src/views/achievements/views/category-list-item/AchievementsCategoryListItemView.tsx

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

src/views/achievements/views/category-list/AchievementsCategoryListView.tsx

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

src/views/achievements/views/category-list/AchievementsCategoryListView.types.ts

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

src/views/achievements/views/category/AchievementCategoryView.types.ts

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

src/views/main/MainView.tsx

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