Add badge inventory

src/views/inventory/reducers/InventoryBadgeReducer.tsx

@@ -0,0 +1,78 @@
+import { Reducer } from 'react';
+
+export interface IInventoryBadgeState
+{
+    needsBadgeUpdate: boolean;
+    badge: string;
+    badges: string[];
+    activeBadges: string[];
+}
+
+export interface IInventoryBadgeAction
+{
+    type: string;
+    payload: {
+        flag?: boolean;
+        badgeCode?: string;
+        badgeCodes?: string[];
+        activeBadgeCodes?: string[];
+    }
+}
+
+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';
+}
+
+export const initialInventoryBadge: IInventoryBadgeState = {
+    needsBadgeUpdate: true,
+    badge: null,
+    badges: [],
+    activeBadges: []
+}
+
+export const inventoryBadgeReducer: Reducer<IInventoryBadgeState, IInventoryBadgeAction> = (state, action) =>
+{
+    switch(action.type)
+    {
+        case InventoryBadgeActions.SET_NEEDS_UPDATE:
+            return { ...state, needsBadgeUpdate: (action.payload.flag || false) };
+        case InventoryBadgeActions.SET_BADGE: {
+                let badge = (action.payload.badgeCode || state.badge || null);
+    
+                let index = 0;
+    
+                if(badge)
+                {
+                    const foundIndex = state.badges.indexOf(badge);
+    
+                    if(foundIndex > -1) index = foundIndex;
+                }
+    
+                badge = (state.badges[index] || null);
+    
+                return { ...state, badge };
+            }
+        case InventoryBadgeActions.SET_BADGES: {
+            const badges: string[] = [];
+            const activeBadges: string[] = [];
+
+            const badgeCodes = action.payload.badgeCodes;
+            const activeBadgeCodes = action.payload.activeBadgeCodes;
+
+            for(const badgeCode of badgeCodes)
+            {
+                const wearingIndex = activeBadgeCodes.indexOf(badgeCode);
+
+                if(wearingIndex === -1) badges.push(badgeCode);
+                else activeBadges.push(badgeCode);
+            }
+
+            return { ...state, badges, activeBadges };
+        }
+        default:
+            return state;
+    }
+}

src/views/inventory/views/badge/InventoryBadgeView.scss

@@ -0,0 +1,9 @@
+.current-badge-container {
+
+    .badge-image {
+        width: 45px;
+        height: 45px;
+    }
+}
+@import './item/InventoryBadgeItemView';
+@import './results/InventoryBadgeResultsView';

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

@@ -0,0 +1,71 @@
+import { RequestBadgesComposer } from 'nitro-renderer';
+import { FC, useEffect } from 'react';
+import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { LocalizeBadgeName } from '../../../../utils/LocalizeBageName';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { BadgeImageView } from '../../../badge-image/BadgeImageView';
+import { useInventoryContext } from '../../context/InventoryContext';
+import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
+import { InventoryBadgeViewProps } from './InventoryBadgeView.types';
+import { InventoryBadgeResultsView } from './results/InventoryBadgeResultsView';
+
+export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
+{
+    const { badgeState = null, dispatchBadgeState = null } = useInventoryContext();
+    const { needsBadgeUpdate = false, badge = null, badges = [], activeBadges = [] } = badgeState;
+
+    useEffect(() =>
+    {
+        if(needsBadgeUpdate)
+        {
+            dispatchBadgeState({
+                type: InventoryBadgeActions.SET_NEEDS_UPDATE,
+                payload: {
+                    flag: false
+                }
+            });
+            
+            SendMessageHook(new RequestBadgesComposer());
+        }
+        else
+        {
+            dispatchBadgeState({
+                type: InventoryBadgeActions.SET_BADGE,
+                payload: {
+                    badgeCode: null
+                }
+            });
+        }
+
+    }, [ needsBadgeUpdate, badges, dispatchBadgeState ]);
+
+    useEffect(() =>
+    {
+        // update current badge
+    }, [ badge ]);
+
+    return (
+        <>
+            <div className="row">
+                <div className="col-7">
+                    <InventoryBadgeResultsView badges={ badges } cols={ 5 }  />
+                </div>
+                <div className="col-5">
+                    <InventoryBadgeResultsView badges={ activeBadges } cols={ 3 }  />
+                </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 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>
+                </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>
+            </div>
+        </>
+    );
+}

src/views/inventory/views/badge/InventoryBadgeView.types.ts

@@ -0,0 +1,3 @@
+export interface InventoryBadgeViewProps
+{
+}

src/views/inventory/views/badge/item/InventoryBadgeItemView.scss

@@ -0,0 +1,17 @@
+.inventory-badge-item-container {
+    height: 48px;
+    max-height: 48px;
+
+    .inventory-badge-item {
+        width: 100%;
+        height: 100%;
+        border-color: $muted !important;
+        background-color: #CDD3D9;
+        overflow: hidden;
+    
+        &.active {
+            border-color: $white !important;
+            background-color: #ECECEC;
+        }
+    }
+}

src/views/inventory/views/badge/item/InventoryBadgeItemView.tsx

@@ -0,0 +1,33 @@
+import { MouseEventType } from 'nitro-renderer';
+import { FC, MouseEvent, useCallback } from 'react';
+import { BadgeImageView } from '../../../../badge-image/BadgeImageView';
+import { useInventoryContext } from '../../../context/InventoryContext';
+import { InventoryBadgeActions } from '../../../reducers/InventoryBadgeReducer';
+import { InventoryBadgeItemViewProps } from './InventoryBadgeItemView.types';
+
+export const InventoryBadgeItemView: FC<InventoryBadgeItemViewProps> = props =>
+{
+    const { badge } = props;
+    const { badgeState = null, dispatchBadgeState = null } = useInventoryContext();
+    const isActive = (badgeState.badge === badge);
+
+    const onMouseEvent = useCallback((event: MouseEvent) =>
+    {
+        switch(event.type)
+        {
+            case MouseEventType.MOUSE_DOWN:
+                dispatchBadgeState({
+                    type: InventoryBadgeActions.SET_BADGE,
+                    payload: { badgeCode: badge }
+                });
+        }
+    }, [ badge, dispatchBadgeState ]);
+
+    return (
+        <div className="col pe-1 pb-1 inventory-badge-item-container">
+            <div className={ 'position-relative border border-2 rounded inventory-badge-item cursor-pointer ' + (isActive ? 'active' : '') } onMouseDown={ onMouseEvent }>
+                <BadgeImageView badgeCode={ badge } />
+            </div>
+        </div>
+    );
+}

src/views/inventory/views/badge/item/InventoryBadgeItemView.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryBadgeItemViewProps
+{
+    badge: string;
+}

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

@@ -0,0 +1,5 @@
+.badge-item-container {
+    height: 144px;
+    max-height: 144px;
+    overflow-y: auto;
+}

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

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

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

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