2022-04-03 20:50:31 +02:00
|
|
|
import { ILinkEventTracker } from '@nitrots/nitro-renderer';
|
|
|
|
import { FC, useEffect, useMemo, useState } from 'react';
|
|
|
|
import { AddEventLinkTracker, GetAchievementCategoryImageUrl, LocalizeText, RemoveLinkEventTracker } from '../../api';
|
2022-03-24 03:54:52 +01:00
|
|
|
import { Base, Column, LayoutImage, LayoutProgressBar, NitroCardContentView, NitroCardHeaderView, NitroCardSubHeaderView, NitroCardView, Text } from '../../common';
|
2022-04-03 20:50:31 +02:00
|
|
|
import { useAchievements } from '../../hooks';
|
2022-03-23 08:05:44 +01:00
|
|
|
import { AchievementCategoryView } from './views/AchievementCategoryView';
|
2021-09-30 04:29:26 +02:00
|
|
|
import { AchievementsCategoryListView } from './views/category-list/AchievementsCategoryListView';
|
2021-06-28 05:47:55 +02:00
|
|
|
|
2022-01-04 07:14:36 +01:00
|
|
|
export const AchievementsView: FC<{}> = props =>
|
2021-06-28 05:47:55 +02:00
|
|
|
{
|
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
2022-04-03 20:50:31 +02:00
|
|
|
const { achievementCategories = [], selectedCategoryCode = null, setSelectedCategoryCode = null, selectedAchievementId = -1, setSelectedAchievementId = null, achievementScore = 0, getProgress = 0, getMaxProgress = 0, setAchievementSeen = null } = useAchievements();
|
2021-06-28 05:47:55 +02:00
|
|
|
|
2022-04-03 20:50:31 +02:00
|
|
|
const selectedCategory = useMemo(() =>
|
2021-09-30 04:29:26 +02:00
|
|
|
{
|
2022-04-03 20:50:31 +02:00
|
|
|
if(selectedCategoryCode === null) return null;
|
2021-09-30 04:29:26 +02:00
|
|
|
|
2022-04-03 20:50:31 +02:00
|
|
|
return achievementCategories.find(category => (category.code === selectedCategoryCode));
|
2021-09-30 04:29:26 +02:00
|
|
|
}, [ achievementCategories, selectedCategoryCode ]);
|
|
|
|
|
2022-04-03 20:50:31 +02:00
|
|
|
useEffect(() =>
|
2022-01-04 07:14:36 +01:00
|
|
|
{
|
2022-04-03 20:50:31 +02:00
|
|
|
const linkTracker: ILinkEventTracker = {
|
|
|
|
linkReceived: (url: string) =>
|
2022-03-23 08:05:44 +01:00
|
|
|
{
|
2022-04-03 20:50:31 +02:00
|
|
|
const parts = url.split('/');
|
|
|
|
|
|
|
|
if(parts.length < 2) return;
|
|
|
|
|
|
|
|
switch(parts[1])
|
2022-03-23 08:05:44 +01:00
|
|
|
{
|
2022-04-03 20:50:31 +02:00
|
|
|
case 'show':
|
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
|
|
|
case 'hide':
|
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
|
|
|
case 'toggle':
|
|
|
|
setIsVisible(prevValue => !prevValue);
|
|
|
|
return;
|
2022-03-23 08:05:44 +01:00
|
|
|
}
|
2022-04-03 20:50:31 +02:00
|
|
|
},
|
2022-03-23 08:05:44 +01:00
|
|
|
eventUrlPrefix: 'achievements/'
|
|
|
|
};
|
2021-09-30 04:29:26 +02:00
|
|
|
|
2022-03-23 08:05:44 +01:00
|
|
|
AddEventLinkTracker(linkTracker);
|
2021-09-30 04:29:26 +02:00
|
|
|
|
2022-03-23 08:05:44 +01:00
|
|
|
return () => RemoveLinkEventTracker(linkTracker);
|
2022-04-03 20:50:31 +02:00
|
|
|
}, []);
|
2021-09-30 04:29:26 +02:00
|
|
|
|
2022-04-03 20:50:31 +02:00
|
|
|
if(!isVisible) return null;
|
2021-06-28 05:47:55 +02:00
|
|
|
|
|
|
|
return (
|
2022-03-04 07:29:14 +01:00
|
|
|
<NitroCardView uniqueKey="achievements" className="nitro-achievements" theme="primary-slim">
|
2021-09-30 04:29:26 +02:00
|
|
|
<NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
|
2022-04-03 20:50:31 +02:00
|
|
|
{ selectedCategory &&
|
2022-01-04 07:14:36 +01:00
|
|
|
<NitroCardSubHeaderView position="relative" className="justify-content-center align-items-center cursor-pointer" gap={ 3 }>
|
2022-03-03 08:23:01 +01:00
|
|
|
<Base onClick={ event => setSelectedCategoryCode(null) } className="nitro-achievements-back-arrow" />
|
2022-01-04 07:14:36 +01:00
|
|
|
<Column grow gap={ 0 }>
|
2022-04-03 20:50:31 +02:00
|
|
|
<Text fontSize={ 4 } fontWeight="bold" className="text-small">{ LocalizeText(`quests.${ selectedCategory.code }.name`) }</Text>
|
|
|
|
<Text>{ LocalizeText('achievements.details.categoryprogress', [ 'progress', 'limit' ], [ selectedCategory.getProgress().toString(), selectedCategory.getMaxProgress().toString() ]) }</Text>
|
2022-01-04 07:14:36 +01:00
|
|
|
</Column>
|
2022-04-03 20:50:31 +02:00
|
|
|
<LayoutImage imageUrl={ GetAchievementCategoryImageUrl(selectedCategory, null,true) } />
|
2021-09-30 04:29:26 +02:00
|
|
|
</NitroCardSubHeaderView> }
|
2022-03-23 08:05:44 +01:00
|
|
|
<NitroCardContentView gap={ 1 }>
|
2022-04-03 20:50:31 +02:00
|
|
|
{ !selectedCategory &&
|
2022-01-04 07:14:36 +01:00
|
|
|
<>
|
2022-02-16 07:40:54 +01:00
|
|
|
<AchievementsCategoryListView categories={ achievementCategories } selectedCategoryCode={ selectedCategoryCode } setSelectedCategoryCode={ setSelectedCategoryCode } />
|
2022-03-24 03:54:52 +01:00
|
|
|
<Column grow justifyContent="end" gap={ 1 }>
|
|
|
|
<Text small center>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
|
2022-03-23 08:05:44 +01:00
|
|
|
<LayoutProgressBar text={ LocalizeText('achievements.categories.totalprogress', [ 'progress', 'limit' ], [ getProgress.toString(), getMaxProgress.toString() ]) } progress={ getProgress } maxProgress={ getMaxProgress } />
|
2022-01-04 07:14:36 +01:00
|
|
|
</Column>
|
|
|
|
</> }
|
2022-04-03 20:50:31 +02:00
|
|
|
{ selectedCategory &&
|
|
|
|
<AchievementCategoryView category={ selectedCategory } selectedAchievementId={ selectedAchievementId } setSelectedAchievementId={ setSelectedAchievementId } setAchievementSeen={ setAchievementSeen } /> }
|
2021-09-30 04:29:26 +02:00
|
|
|
</NitroCardContentView>
|
|
|
|
</NitroCardView>
|
2021-06-28 05:47:55 +02:00
|
|
|
);
|
|
|
|
};
|