2021-08-05 19:32:36 +02:00
|
|
|
import { FC, useCallback, useReducer, useState } from 'react';
|
2021-07-22 00:01:27 +02:00
|
|
|
import { AchievementsUIEvent } from '../../events/achievements';
|
2021-06-28 05:47:55 +02:00
|
|
|
import { useUiEvent } from '../../hooks/events';
|
|
|
|
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
|
|
|
|
import { LocalizeText } from '../../utils/LocalizeText';
|
|
|
|
import { AchievementsMessageHandler } from './AchievementsMessageHandler';
|
|
|
|
import { AchievementsViewProps } from './AchievementsView.types';
|
|
|
|
import { AchievementsContextProvider } from './context/AchievementsContext';
|
|
|
|
import { AchievementsReducer, initialAchievements } from './reducers/AchievementsReducer';
|
2021-08-05 19:32:36 +02:00
|
|
|
import { AchievementsListView } from './views/category-list/AchievementsListView';
|
2021-06-28 19:13:33 +02:00
|
|
|
import { AchievementCategoryView } from './views/category/AchievementCategoryView';
|
2021-06-28 05:47:55 +02:00
|
|
|
|
|
|
|
export const AchievementsView: FC<AchievementsViewProps> = props =>
|
|
|
|
{
|
|
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
|
|
|
const [ achievementsState, dispatchAchievementsState ] = useReducer(AchievementsReducer, initialAchievements);
|
2021-06-28 19:13:33 +02:00
|
|
|
const { score = null } = achievementsState;
|
2021-06-28 05:47:55 +02:00
|
|
|
|
2021-07-22 00:01:27 +02:00
|
|
|
const onAchievementsEvent = useCallback((event: AchievementsUIEvent) =>
|
2021-06-28 05:47:55 +02:00
|
|
|
{
|
|
|
|
switch(event.type)
|
|
|
|
{
|
2021-07-22 00:01:27 +02:00
|
|
|
case AchievementsUIEvent.SHOW_ACHIEVEMENTS:
|
2021-06-28 05:47:55 +02:00
|
|
|
setIsVisible(true);
|
|
|
|
return;
|
2021-07-22 00:01:27 +02:00
|
|
|
case AchievementsUIEvent.HIDE_ACHIEVEMENTS:
|
2021-06-28 05:47:55 +02:00
|
|
|
setIsVisible(false);
|
|
|
|
return;
|
2021-07-22 00:01:27 +02:00
|
|
|
case AchievementsUIEvent.TOGGLE_ACHIEVEMENTS:
|
2021-06-28 05:47:55 +02:00
|
|
|
setIsVisible(value => !value);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
2021-07-22 00:01:27 +02:00
|
|
|
useUiEvent(AchievementsUIEvent.SHOW_ACHIEVEMENTS, onAchievementsEvent);
|
|
|
|
useUiEvent(AchievementsUIEvent.HIDE_ACHIEVEMENTS, onAchievementsEvent);
|
|
|
|
useUiEvent(AchievementsUIEvent.TOGGLE_ACHIEVEMENTS, onAchievementsEvent);
|
2021-06-28 05:47:55 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<AchievementsContextProvider value={ { achievementsState, dispatchAchievementsState } }>
|
|
|
|
<AchievementsMessageHandler />
|
|
|
|
{ isVisible &&
|
|
|
|
<NitroCardView className="nitro-achievements">
|
|
|
|
<NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
|
|
|
|
<NitroCardContentView>
|
|
|
|
<div className="row">
|
|
|
|
<div className="col-6">
|
|
|
|
<AchievementsListView />
|
|
|
|
<div className="score border border-2 text-black text-center rounded">
|
|
|
|
{ LocalizeText('achievements.categories.score', ['score'], [score.toString()]) }
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="col-6">
|
2021-06-28 19:13:33 +02:00
|
|
|
<AchievementCategoryView />
|
2021-06-28 05:47:55 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</NitroCardContentView>
|
|
|
|
</NitroCardView> }
|
|
|
|
</AchievementsContextProvider>
|
|
|
|
);
|
|
|
|
};
|