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

Achievements updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-09-18 14:37:14 -03:00
parent 014de80fd6
commit 9e3dcc2271
5 changed files with 43 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/views/achievements/AchievementsView.scss
View File

@ -1,24 +1,28 @@
.nitro-achievements { .nitro-achievements {
width: 650px; width: 650px;
.content-area {
min-height: 376px;
height: 376px;
}
.score { .score {
border-color: $grid-border-color !important; border-color: $grid-border-color !important;
background-color: $grid-bg-color; background-color: $grid-bg-color;
} }
.category { .category {
border-color: $grid-border-color !important;
background-color: $grid-bg-color;
cursor: pointer;
&.active {
border-color: $grid-active-border-color !important;
background-color: $grid-active-bg-color;
}
.category-score { .category-score {
margin-top: 43.5px; margin-top: 43.5px;
} }
} }
.achievements { .achievements {
height: 230px; height: 152px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
@ -44,4 +48,15 @@
} }
} }
} }
.achievement-image {
height: 80px;
width: 80px;
.badge-image {
width: 80px;
height: 80px;
background-size: contain;
}
}
} }

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

@ -40,7 +40,7 @@ export const AchievementsView: FC<AchievementsViewProps> = props =>
<AchievementsContextProvider value={ { achievementsState, dispatchAchievementsState } }> <AchievementsContextProvider value={ { achievementsState, dispatchAchievementsState } }>
<AchievementsMessageHandler /> <AchievementsMessageHandler />
{ isVisible && { isVisible &&
<NitroCardView uniqueKey="achievements" className="nitro-achievements"> <NitroCardView uniqueKey="achievements" className="nitro-achievements" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } /> <NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView> <NitroCardContentView>
<div className="row"> <div className="row">

9
src/views/achievements/views/category-list-item/AchievementCategoryListItemView.tsx
View File

@ -1,6 +1,6 @@
import classNames from 'classnames';
import { FC, useCallback, useMemo } from 'react'; import { FC, useCallback, useMemo } from 'react';
import { GetConfiguration } from '../../../../api'; import { GetConfiguration } from '../../../../api';
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
import { useAchievementsContext } from '../../context/AchievementsContext'; import { useAchievementsContext } from '../../context/AchievementsContext';
import { AchievementsActions } from '../../reducers/AchievementsReducer'; import { AchievementsActions } from '../../reducers/AchievementsReducer';
import { AchievementCategoryListItemViewProps } from './AchievementCategoryListItemView.types'; import { AchievementCategoryListItemViewProps } from './AchievementCategoryListItemView.types';
@ -58,8 +58,11 @@ export const AchievementCategoryListItemView: FC<AchievementCategoryListItemView
}, [ dispatchAchievementsState ]); }, [ dispatchAchievementsState ]);
return ( return (
<NitroCardGridItemView className="d-flex flex-column justify-content-center align-items-center category border border-2 rounded p-2" itemActive={ isActive } itemImage={ getCategoryImage } onClick={ event => selectCategory(category.name) }> <div className="col mb-3">
<div className={ 'd-flex flex-column justify-content-center align-items-center category border border-2 rounded p-2' + classNames({ ' active': isActive }) } onClick={ () => selectCategory(category.name) }>
<img src={ getCategoryImage } alt="" />
<div className="position-absolute category-score small">{ getCategoryProgress }</div> <div className="position-absolute category-score small">{ getCategoryProgress }</div>
</NitroCardGridItemView> </div>
</div>
); );
} }

7
src/views/achievements/views/category-list/AchievementsListView.tsx
View File

@ -1,5 +1,4 @@
import { FC } from 'react'; import { FC } from 'react';
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
import { useAchievementsContext } from '../../context/AchievementsContext'; import { useAchievementsContext } from '../../context/AchievementsContext';
import { AchievementCategoryListItemView } from '../category-list-item/AchievementCategoryListItemView'; import { AchievementCategoryListItemView } from '../category-list-item/AchievementCategoryListItemView';
@ -9,11 +8,11 @@ export const AchievementsListView: FC<{}> = props =>
const { categories = null, selectedCategoryName = null } = achievementsState; const { categories = null, selectedCategoryName = null } = achievementsState;
return ( return (
<NitroCardGridView columns={ 3 }> <div className="row row-cols-3">
{ categories && categories.map((category, index) => { categories && categories.map((category, index) =>
{ {
return <AchievementCategoryListItemView key={ index } category={ category } />; return <AchievementCategoryListItemView key={ index } category={ category } isActive={ selectedCategoryName === category.name } />;
}) } }) }
</NitroCardGridView> </div>
); );
}; };

16
src/views/achievements/views/category/AchievementCategoryView.tsx
View File

@ -1,7 +1,7 @@
import { AchievementData } from '@nitrots/nitro-renderer'; import { AchievementData } from '@nitrots/nitro-renderer';
import classNames from 'classnames'; import classNames from 'classnames';
import { FC, useCallback } from 'react'; import { FC, useCallback, useMemo } from 'react';
import { LocalizeText } from '../../../../api'; import { LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../../api';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView'; import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { useAchievementsContext } from '../../context/AchievementsContext'; import { useAchievementsContext } from '../../context/AchievementsContext';
import { AchievementsActions } from '../../reducers/AchievementsReducer'; import { AchievementsActions } from '../../reducers/AchievementsReducer';
@ -34,7 +34,7 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
return badgeId; return badgeId;
}, []); }, []);
const getSelectedAchievement = useCallback(() => const selectedAchievement = useMemo(() =>
{ {
if(!getSelectedCategory()) return null; if(!getSelectedCategory()) return null;
@ -54,13 +54,17 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
return ( return (
<div className="d-flex flex-column h-100"> <div className="d-flex flex-column h-100">
<div className="bg-primary rounded p-2 d-flex align-items-center mb-3"> <div className="bg-primary rounded p-2 d-flex align-items-center mb-2">
<h5 className="m-0 me-2 w-100">{ LocalizeText('quests.' + selectedCategoryName + '.name') }</h5> <h5 className="m-0 me-2 w-100">{ LocalizeText('quests.' + selectedCategoryName + '.name') }</h5>
<div>IMAGE</div> <div>IMAGE</div>
</div> </div>
<div className="bg-muted rounded p-2 mb-3 d-flex"> <div className="bg-secondary rounded p-2 mb-3 d-flex gap-2 align-items-center">
<div className="achievement-image">
<BadgeImageView badgeCode={ getAchievementImage(selectedAchievement) } />
</div>
<div> <div>
<BadgeImageView badgeCode={ getAchievementImage(getSelectedAchievement()) } /> <div>{ LocalizeBadgeName(selectedAchievement.badgeId) }</div>
<div>{ LocalizeBadgeDescription(selectedAchievement.badgeId) }</div>
</div> </div>
</div> </div>
<div className="achievements"> <div className="achievements">