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 {
width: 650px;
.content-area {
min-height: 376px;
height: 376px;
}
.score {
border-color: $grid-border-color !important;
background-color: $grid-bg-color;
}
.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 {
margin-top: 43.5px;
}
}
.achievements {
height: 230px;
height: 152px;
overflow-y: auto;
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 } }>
<AchievementsMessageHandler />
{ isVisible &&
<NitroCardView uniqueKey="achievements" className="nitro-achievements">
<NitroCardView uniqueKey="achievements" className="nitro-achievements" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('inventory.achievements') } onCloseClick={ event => setIsVisible(false) } />
<NitroCardContentView>
<div className="row">

11
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 { GetConfiguration } from '../../../../api';
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
import { useAchievementsContext } from '../../context/AchievementsContext';
import { AchievementsActions } from '../../reducers/AchievementsReducer';
import { AchievementCategoryListItemViewProps } from './AchievementCategoryListItemView.types';
@ -58,8 +58,11 @@ export const AchievementCategoryListItemView: FC<AchievementCategoryListItemView
}, [ dispatchAchievementsState ]);
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="position-absolute category-score small">{ getCategoryProgress }</div>
</NitroCardGridItemView>
<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>
</div>
);
}

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

@ -1,5 +1,4 @@
import { FC } from 'react';
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
import { useAchievementsContext } from '../../context/AchievementsContext';
import { AchievementCategoryListItemView } from '../category-list-item/AchievementCategoryListItemView';
@ -9,11 +8,11 @@ export const AchievementsListView: FC<{}> = props =>
const { categories = null, selectedCategoryName = null } = achievementsState;
return (
<NitroCardGridView columns={ 3 }>
<div className="row row-cols-3">
{ 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 classNames from 'classnames';
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../api';
import { FC, useCallback, useMemo } from 'react';
import { LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../../api';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { useAchievementsContext } from '../../context/AchievementsContext';
import { AchievementsActions } from '../../reducers/AchievementsReducer';
@ -34,7 +34,7 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
return badgeId;
}, []);
const getSelectedAchievement = useCallback(() =>
const selectedAchievement = useMemo(() =>
{
if(!getSelectedCategory()) return null;
@ -54,13 +54,17 @@ export const AchievementCategoryView: FC<AchievementCategoryViewProps> = props =
return (
<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>
<div>IMAGE</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>
<BadgeImageView badgeCode={ getAchievementImage(getSelectedAchievement()) } />
<div>{ LocalizeBadgeName(selectedAchievement.badgeId) }</div>
<div>{ LocalizeBadgeDescription(selectedAchievement.badgeId) }</div>
</div>
</div>
<div className="achievements">