Badges work

src/views/inventory/reducers/InventoryBadgeReducer.tsx

@@ -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 = {
@@ -65,13 +69,56 @@ export const inventoryBadgeReducer: Reducer<IInventoryBadgeState, IInventoryBadg
             for(const badgeCode of badgeCodes)
             {
                 const wearingIndex = activeBadgeCodes.indexOf(badgeCode);
+                
+                badges.push(badgeCode);
 
-                if(wearingIndex === -1) badges.push(badgeCode);
+                if(wearingIndex >= 0) activeBadges.push(badgeCode);
-                else 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;
     }

src/views/inventory/views/badge/InventoryBadgeView.tsx

@@ -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
+        return (activeBadges.indexOf(badgeCode) >= 0);
-    }, [ badge ]);
+    }
+
+    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>

src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.scss

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

src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.tsx

@@ -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>
+    );
+}

src/views/inventory/views/badge/active-results/InventoryActiveBadgeResultsView.types.ts

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

src/views/inventory/views/badge/results/InventoryBadgeResultsView.tsx

@@ -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>

src/views/inventory/views/badge/results/InventoryBadgeResultsView.types.ts

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