Wardrobe updates

src/assets/styles/bootstrap/_variables.scss

@@ -80,7 +80,8 @@ $cello-light:   #21516e !default;
 $cello-dark:    #1e465e !default;
 $pale-sky:      #677181 !default;
 $oslo-gray:     #8F9297 !default;
-
+$ghost:         #c8cad0 !default;
+$gray-chateau:  #a3a7b1 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;

src/layout/card/grid/item/NitroCardGridItemView.scss

@@ -64,11 +64,9 @@
         }
 
         .avatar-image {
-            width: 100% !important;
-            height: 100% !important;
             background-position: center;
             background-repeat: no-repeat;
-            background-position-y: -32px !important;
+            background-position-y: 12px !important;
         }
 
         .trade-button {

src/views/avatar-editor/AvatarEditorView.scss

@@ -83,8 +83,36 @@
     .wardrobe-grid {
 
         .grid-item-container {
-            height: 100% !important;
+            height: 142px !important;
-            max-height: 100% !important;
+            max-height: 142px !important;
+
+            .grid-item {
+                background-color: $ghost;
+
+                .avatar-image {
+                    position: absolute;
+                    bottom: 0;
+                    background-position-y: -23px !important;
+                    z-index: 3;
+                }
+
+                .figure-button-container {
+                    background-color: $gray-chateau;
+                    z-index: 2;
+                }
+
+                &:after {
+                    position: absolute;
+                    content: '';
+                    height: 50%;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                    background-color: $gray-chateau;
+                    box-shadow: 0 0 8px 2px rgba($white,.6);
+                    z-index: 1;
+                }
+            }
         }
     }
 }

src/views/avatar-editor/AvatarEditorView.tsx

@@ -79,14 +79,25 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
     const onUserWardrobePageEvent = useCallback((event: UserWardrobePageEvent) =>
     {
         const parser = event.getParser();
+        const savedFigures: [ string, string ][] = [];
 
-        const savedFigures: [ string, string ][] = new Array(MAX_SAVED_FIGURES);
+        let i = 0;
 
-        for(const value of parser.looks.values())
+        while(i < MAX_SAVED_FIGURES)
         {
-            console.log(value);
+            savedFigures.push([ null, null ]);
+
+            i++;
         }
 
+        for(let [ index, value ] of parser.looks.entries())
+        {
+            console.log(index, value);
+            savedFigures[(index - 1)] = [ value[0], value[1] ];
+        }
+
+        console.log(savedFigures);
+
         setSavedFigures(savedFigures)
     }, []);
 
@@ -280,7 +291,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
                 <div className="row h-100">
                     <div className="col-9 d-flex flex-column h-100">
                         { (activeCategory && !isWardrobeVisible) && <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> }
-                        { isWardrobeVisible && <AvatarEditorWardrobeView figures={ savedFigures } /> }
+                        { isWardrobeVisible && <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } /> }
                     </div>
                     <div className="col-3 d-flex flex-column h-100">
                         <div className="figure-preview-container">

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx

@@ -1,4 +1,7 @@
-import { FC, useMemo } from 'react';
+import { UserWardrobeSaveComposer } from 'nitro-renderer';
+import { FC, useCallback, useMemo } from 'react';
+import { Button } from 'react-bootstrap';
+import { SendMessageHook } from '../../../../hooks';
 import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
 import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
 import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
@@ -7,48 +10,68 @@ import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types'
 
 export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props =>
 {
-    const { figures = [] } = props;
+    const { figureData = null, savedFigures = [], setSavedFigures = null, loadAvatarInEditor = null } = props;
 
-    const savedFigures = useMemo(() =>
+    const wearFigureAtIndex = useCallback((index: number) =>
     {
-        if(!figures) return [];
+        if((index >= savedFigures.length) || (index < 0)) return;
 
-        let i = 0;
+        const [ figure, gender ] = savedFigures[index];
+
+        loadAvatarInEditor(figure, gender);
+    }, [ savedFigures, loadAvatarInEditor ]);
+
+    const saveFigureAtWardrobeIndex = useCallback((index: number) =>
+    {
+        if(!figureData || (index >= savedFigures.length) || (index < 0)) return;
+
+        const newFigures = [ ...savedFigures ];
+
+        const figure = figureData.getFigureString();
+        const gender = figureData.gender;
+
+        newFigures[index] = [ figure, gender ];
+
+        setSavedFigures(newFigures);
+        SendMessageHook(new UserWardrobeSaveComposer((index + 1), figure, gender));
+    }, [ figureData, savedFigures, setSavedFigures ]);
+
+    const figures = useMemo(() =>
+    {
+        if(!savedFigures) return [];
 
         const items: JSX.Element[] = [];
 
-        while(i < figures.length)
+        savedFigures.forEach((figure, index) =>
-        {
-            const figure = figures[i];
-
-            let figureString = null;
-            let gender = null;
-
-            if(figure)
             {
-                figureString = (figure[0] || null);
+                let figureString = null;
-                gender = (figure[1] || null);
+                let gender = null;
-            }
 
-            items.push(
+                if(figure)
-                <NitroCardGridItemView key={ i } columns={ 2 }>
+                {
-                    <AvatarImageView figure={ figureString } gender={ gender } />
+                    figureString = (figure[0] || null);
-                </NitroCardGridItemView>
+                    gender = (figure[1] || null);
-            );
+                }
-            
+
-            i++
+                items.push(
-        }
+                    <NitroCardGridItemView key={ index } className="flex-column justify-content-end">
+                        { figureString && <AvatarImageView figure={ figureString } gender={ gender } direction={ 2 } /> }
+                        <div className="d-flex w-100 figure-button-container p-1">
+                            <Button variant="link" size="sm" className="w-100" onClick={ event => saveFigureAtWardrobeIndex(index) }>Save</Button>
+                            { figureString && <Button variant="link" size="sm" className="w-100" onClick={ event => wearFigureAtIndex(index) }>Use</Button> }
+                        </div>
+                    </NitroCardGridItemView>
+                );
+            });
 
         return items;
-    }, [ figures ]);
+    }, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
-
-    console.log(figures.length);
 
     return (
         <div className="row h-100">
             <div className="col-12 d-flex h-100">
-                <NitroCardGridView className="wardrobe-grid" columns={ 12 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
+                <NitroCardGridView className="wardrobe-grid" columns={ 5 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
-                    { savedFigures }
+                    { figures }
                 </NitroCardGridView>
             </div>
         </div>

src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.types.ts

@@ -1,4 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+import { FigureData } from '../../common/FigureData';
+
 export interface AvatarEditorWardrobeViewProps
 {
-    figures: [ string, string ][];
+    figureData: FigureData;
+    savedFigures: [ string, string ][];
+    setSavedFigures: Dispatch<SetStateAction<[ string, string][]>>;
+    loadAvatarInEditor: (figure: string, gender: string, reset?: boolean) => void;
 }