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

Badges work

Browse Source
This commit is contained in:
Bill 2021-04-29 13:36:37 -04:00
parent 656470f15d
commit 996c7f218e
7 changed files with 115 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/views/inventory/reducers/InventoryBadgeReducer.tsx
View File

@ -1,4 +1,6 @@
import { SetActivatedBadgesComposer } from 'nitro-renderer';
import { Reducer } from 'react';
import { SendMessageHook } from '../../../hooks/messages/message-event';
export interface IInventoryBadgeState
{
@ -24,6 +26,8 @@ export class InventoryBadgeActions
public static SET_NEEDS_UPDATE: string = 'IBDA_SET_NEEDS_UPDATE';
public static SET_BADGE: string = 'IBDA_SET_BADGE';
public static SET_BADGES: string = 'IBDA_SET_BADGES';
public static ADD_ACTIVE_BADGE: string = 'IBDA_ADD_ACTIVE_BADGE';
public static REMOVE_ACTIVE_BADGE: string = 'IBDA_REMOVE_ACTIVE_BADGE';
}
export const initialInventoryBadge: IInventoryBadgeState = {
@ -66,12 +70,55 @@ export const inventoryBadgeReducer: Reducer<IInventoryBadgeState, IInventoryBadg
{
const wearingIndex = activeBadgeCodes.indexOf(badgeCode);
if(wearingIndex === -1) badges.push(badgeCode);
else activeBadges.push(badgeCode);
badges.push(badgeCode);
if(wearingIndex >= 0) activeBadges.push(badgeCode);
}
return { ...state, badges, activeBadges };
}
case InventoryBadgeActions.ADD_ACTIVE_BADGE: {
const badgeCode = action.payload.badgeCode;
if(state.activeBadges.indexOf(badgeCode) >= 0) return state;
const activeBadges = [ ...state.activeBadges ];
activeBadges.push(badgeCode);
const composer = new SetActivatedBadgesComposer();
for(const badgeCode of activeBadges)
{
composer.addActivatedBadge(badgeCode);
}
SendMessageHook(composer);
return { ...state, activeBadges };
}
case InventoryBadgeActions.REMOVE_ACTIVE_BADGE: {
const badgeCode = action.payload.badgeCode;
const index = state.activeBadges.indexOf(badgeCode);
if(index === -1) return state;
const activeBadges = [ ...state.activeBadges ];
activeBadges.splice(index, 1);
const composer = new SetActivatedBadgesComposer();
for(const badgeCode of activeBadges)
{
composer.addActivatedBadge(badgeCode);
}
SendMessageHook(composer);
return { ...state, activeBadges };
}
default:
return state;
}

44
src/views/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -6,6 +6,7 @@ import { LocalizeText } from '../../../../utils/LocalizeText';
import { BadgeImageView } from '../../../badge-image/BadgeImageView';
import { useInventoryContext } from '../../context/InventoryContext';
import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
import { InventoryActiveBadgeResultsView } from './active-results/InventoryActiveBadgeResultsView';
import { InventoryBadgeViewProps } from './InventoryBadgeView.types';
import { InventoryBadgeResultsView } from './results/InventoryBadgeResultsView';
@ -39,29 +40,60 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
}, [ needsBadgeUpdate, badges, dispatchBadgeState ]);
useEffect(() =>
function isWearingBadge(badgeCode: string): boolean
{
// update current badge
}, [ badge ]);
return (activeBadges.indexOf(badgeCode) >= 0);
}
function canWearBadges(): boolean
{
return (activeBadges.length < 5);
}
function toggleBadge(): void
{
if(isWearingBadge(badge))
{
dispatchBadgeState({
type: InventoryBadgeActions.REMOVE_ACTIVE_BADGE,
payload: {
badgeCode: badge
}
});
}
else
{
if(!canWearBadges()) return;
dispatchBadgeState({
type: InventoryBadgeActions.ADD_ACTIVE_BADGE,
payload: {
badgeCode: badge
}
});
}
}
return (
<>
<div className="row">
<div className="col-7">
<InventoryBadgeResultsView badges={ badges } cols={ 5 } />
<InventoryBadgeResultsView badges={ badges } activeBadges={ activeBadges } cols={ 5 } />
</div>
<div className="col-5">
<InventoryBadgeResultsView badges={ activeBadges } cols={ 3 } />
<p className="mb-1 text-black">{ LocalizeText('inventory.badges.activebadges') }</p>
<InventoryActiveBadgeResultsView badges={ activeBadges } />
</div>
</div>
{ badge && badge.length &&
<div className="d-flex justify-content-between align-items-center bg-secondary rounded p-1 mb-1">
<div className="d-flex justify-content-between align-items-center bg-secondary rounded px-2 py-1 mb-1">
<div className="d-flex flex-grow-1 current-badge-container">
<BadgeImageView badgeCode={ badge } />
<div className="d-flex flex-column justify-content-center flex-grow-1 ms-2">
<p className="mb-0">{ LocalizeBadgeName(badge) }</p>
</div>
</div>
<button type="button" className={ 'btn btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
</div> }
<div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
<div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>

2
src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss Normal file
View File

@ -0,0 +1,2 @@
.badge-item-container {
}

17
src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx Normal file
View File

@ -0,0 +1,17 @@
import { FC } from 'react';
import { InventoryBadgeItemView } from '../item/InventoryBadgeItemView';
import { InventoryActiveBadgeResultsViewProps } from './InventoryActiveBadgeResultsView.types';
export const InventoryActiveBadgeResultsView: FC<InventoryActiveBadgeResultsViewProps> = props =>
{
const { badges = [] } = props;
return (
<div className="row row-cols-3 align-content-start g-0">
{ (badges && badges.length && badges.map((code, index) =>
{
return <InventoryBadgeItemView key={ index } badge={ code } />
})) || null }
</div>
);
}

4
src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.types.ts Normal file
View File

@ -0,0 +1,4 @@
export interface InventoryActiveBadgeResultsViewProps
{
badges?: string[];
}

6
src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx
View File

@ -4,12 +4,14 @@ import { InventoryBadgeResultsViewProps } from './InventoryBadgeResultsView.type
export const InventoryBadgeResultsView: FC<InventoryBadgeResultsViewProps> = props =>
{
const { badges = [], cols = 5 } = props;
const { badges = [], activeBadges = [] } = props;
return (
<div className={ 'row row-cols-' + cols + ' align-content-start g-0 badge-item-container' }>
<div className="row row-cols-5 align-content-start g-0 badge-item-container">
{ (badges && badges.length && badges.map((code, index) =>
{
if(activeBadges.indexOf(code) >= 0) return null;
return <InventoryBadgeItemView key={ index } badge={ code } />
})) || null }
</div>

2
src/views/inventory/views/badge/results/InventoryBadgeResultsView.types.ts
View File

@ -1,5 +1,5 @@
export interface InventoryBadgeResultsViewProps
{
badges: string[];
cols?: number;
activeBadges: string[];
}