Update mannequin widget

src/api/nitro/room/widgets/events/RoomWidgetUpdateMannequinEvent.ts

@@ -0,0 +1,41 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateMannequinEvent extends RoomWidgetUpdateEvent
+{
+    public static MANNEQUIN_UPDATE: string = 'RWUME_MANNEQUIN_UPDATE';
+
+    private _objectId: number;
+    private _figure: string;
+    private _gender: string;
+    private _name: string;
+
+    constructor(type: string, objectId: number, figure: string, gender: string, name: string)
+    {
+        super(type);
+
+        this._objectId = objectId;
+        this._figure = figure;
+        this._gender = gender;
+        this._name = name;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get figure(): string
+    {
+        return this._figure;
+    }
+
+    public get gender(): string
+    {
+        return this._gender;
+    }
+
+    public get name(): string
+    {
+        return this._name;
+    }
+}

src/api/nitro/room/widgets/events/index.ts

@@ -24,6 +24,7 @@ export * from './RoomWidgetUpdateInfostandFurniEvent';
 export * from './RoomWidgetUpdateInfostandPetEvent';
 export * from './RoomWidgetUpdateInfostandRentableBotEvent';
 export * from './RoomWidgetUpdateInfostandUserEvent';
+export * from './RoomWidgetUpdateMannequinEvent';
 export * from './RoomWidgetUpdatePresentDataEvent';
 export * from './RoomWidgetUpdateRentableBotChatEvent';
 export * from './RoomWidgetUpdateRoomViewEvent';

src/api/nitro/room/widgets/handlers/FurnitureMannequinWidgetHandler.ts

@@ -0,0 +1,54 @@
+import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { RoomWidgetUpdateMannequinEvent } from '..';
+import { GetRoomEngine } from '../../GetRoomEngine';
+import { RoomWidgetUpdateEvent } from '../events/RoomWidgetUpdateEvent';
+import { RoomWidgetMessage } from '../messages/RoomWidgetMessage';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureMannequinWidgetHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {
+        switch(event.type)
+        {
+            case RoomEngineTriggerWidgetEvent.REQUEST_MANNEQUIN: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
+
+                if(!roomObject) return;
+
+                const model = roomObject.model;
+                const figure = model.getValue<string>(RoomObjectVariable.FURNITURE_MANNEQUIN_FIGURE);
+                const gender = model.getValue<string>(RoomObjectVariable.FURNITURE_MANNEQUIN_GENDER);
+                const name = model.getValue<string>(RoomObjectVariable.FURNITURE_MANNEQUIN_NAME);
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateMannequinEvent(RoomWidgetUpdateMannequinEvent.MANNEQUIN_UPDATE, roomObject.id, figure, gender, name));
+                return;
+            }
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+        }
+
+        return null;
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.MANNEQUIN;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [ RoomEngineTriggerWidgetEvent.REQUEST_MANNEQUIN ];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [];
+    }
+}

src/api/nitro/room/widgets/handlers/index.ts

@@ -5,6 +5,7 @@ export * from './FurnitureCreditWidgetHandler';
 export * from './FurnitureCustomStackHeightWidgetHandler';
 export * from './FurnitureDimmerWidgetHandler';
 export * from './FurnitureExternalImageWidgetHandler';
+export * from './FurnitureMannequinWidgetHandler';
 export * from './FurniturePresentWidgetHandler';
 export * from './IRoomWidgetHandler';
 export * from './IRoomWidgetHandlerManager';

src/views/room/RoomView.tsx

@@ -1,6 +1,6 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
+import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
@@ -44,6 +44,7 @@ export const RoomView: FC<RoomViewProps> = props =>
         widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
         widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureDimmerWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurnitureMannequinWidgetHandler());
 
         setWidgetHandler(widgetHandlerManager);
 

src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx

@@ -1,15 +1,29 @@
-import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, IAvatarFigureContainer, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
+import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, HabboClubLevelEnum, IAvatarFigureContainer, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
-import { GetAvatarRenderManager, GetNitroInstance, GetRoomEngine, GetRoomSession, GetSessionDataManager, LocalizeText, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { GetAvatarRenderManager, GetSessionDataManager, LocalizeText, RoomWidgetUpdateMannequinEvent } from '../../../../../api';
+import { BatchUpdates, SendMessageHook } from '../../../../../hooks';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
-import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { NitroLayoutBase } from '../../../../../layout/base';
-import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
 import { useRoomContext } from '../../../context/RoomContext';
-import { MannequinViewMode } from './common/MannequinViewMode';
+import { FurnitureMannequinPreviewView } from './views/preview/FurnitureMannequinPreviewView';
-import { FurnitureMannequinData } from './FurnitureMannequinData';
 
-const parts = [
+const MODE_NONE: number = -1;
+const MODE_CONTROLLER: number = 0;
+const MODE_UPDATE: number = 1;
+const MODE_PEER: number = 2;
+const MODE_NO_CLUB: number = 3;
+const MODE_WRONG_GENDER: number = 4;
+
+const ACTION_CLOSE: number = 0;
+const ACTION_SET_NAME: number = 1;
+const ACTION_LOAD_FIGURE: number = 2;
+const ACTION_WEAR: number = 3;
+const ACTION_SAVE: number = 4;
+const ACTION_BACK: number = 5;
+
+const MANNEQUIN_FIGURE = ['hd', 99999, [ 99998 ]];
+const MANNEQUIN_CLOTHING_PART_TYPES = [
     AvatarFigurePartType.CHEST_ACCESSORY,
     AvatarFigurePartType.COAT_CHEST,
     AvatarFigurePartType.CHEST,
@@ -17,197 +31,210 @@ const parts = [
     AvatarFigurePartType.SHOES,
     AvatarFigurePartType.WAIST_ACCESSORY
 ];
-const baseAvatar = ['hd', 99999, 99998];
 
 export const FurnitureMannequinView: FC<{}> = props =>
 {
-    const { eventDispatcher = null } = useRoomContext();
+    const [ objectId, setObjectId ] = useState(-1);
+    const [ figure, setFigure ] = useState<string>(null);
+    const [ gender, setGender ] = useState<string>(null);
+    const [ name, setName ] = useState<string>(null);
+    const [ clubLevel, setClubLevel ] = useState(HabboClubLevelEnum.NO_CLUB);
+    const [ renderedFigure, setRenderedFigure ] = useState<string>(null);
+    const [ renderedClubLevel, setRenderedClubLevel ] = useState(HabboClubLevelEnum.NO_CLUB);
+    const [ mode, setMode ] = useState(MODE_NONE);
+    const { roomSession = null, eventDispatcher = null } = useRoomContext();
 
-    const [ mannequinData, setMannequinData ]   = useState<FurnitureMannequinData>(null);
+    const onRoomWidgetUpdateMannequinEvent = useCallback((event: RoomWidgetUpdateMannequinEvent) =>
-    const [ viewMode, setViewMode ]             = useState('');
-
-    const loadMannequinFigure = useCallback((figureContainer: IAvatarFigureContainer) =>
     {
-        for(const item of figureContainer.getPartTypeIds())
+        const figureContainer = GetAvatarRenderManager().createFigureContainer(event.figure);
+        const figureClubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, event.gender, MANNEQUIN_CLOTHING_PART_TYPES);
+
+        BatchUpdates(() =>
         {
-            if(parts.indexOf(item) === -1)
+            setObjectId(event.objectId);
+            setFigure(event.figure);
+            setGender(event.gender);
+            setName(event.name);
+            setClubLevel(figureClubLevel);
+
+            if(roomSession.isRoomOwner || (roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator)
             {
-                figureContainer.removePart(item);
+                setMode(MODE_CONTROLLER);
             }
-        }
 
-        figureContainer.updatePart(baseAvatar[0].toString(), Number(baseAvatar[1]), [ Number(baseAvatar[2]) ]);
+            else if(GetSessionDataManager().gender.toLowerCase() !== event.gender.toLowerCase())
-
-        setMannequinData(mannequinData => new FurnitureMannequinData(mannequinData.objectId, mannequinData.category, mannequinData.name, mannequinData.figure, mannequinData.gender, mannequinData.clubLevel, figureContainer.getFigureString()));
-    }, []);
-
-    useEffect(() =>
-    {
-        if(mannequinData && !mannequinData.renderedFigure)
-        {
-            const figureContainer = GetAvatarRenderManager().createFigureContainer(mannequinData.figure);
-            loadMannequinFigure(figureContainer);
-        }
-    }, [loadMannequinFigure, mannequinData]);
-
-    const loadViewMode = useCallback((mannequinData: FurnitureMannequinData) =>
-    {
-        if(!mannequinData) return;
-        
-        const userCanEdit       = (GetRoomSession().isRoomOwner || GetSessionDataManager().isModerator);
-        const userGender        = GetNitroInstance().sessionDataManager.gender;
-        const userClubLevel     = GetNitroInstance().sessionDataManager.clubLevel;
-
-        if(userCanEdit)
-        {
-            setViewMode(MannequinViewMode.EDIT);
-        }
-        else
-        {
-            if(!mannequinData.figure || mannequinData.figure.length <= 1) return;
-
-            if(userGender.toUpperCase() !== mannequinData.gender.toUpperCase())
             {
-                setViewMode(MannequinViewMode.INCOMPATIBLE_GENDER);
+                setMode(MODE_WRONG_GENDER);
             }
-            else if(userClubLevel < mannequinData.clubLevel)
+
+            else if(GetSessionDataManager().clubLevel < figureClubLevel)
             {
-                setViewMode(MannequinViewMode.CLUB);
+                setMode(MODE_NO_CLUB);
             }
             else
             {
-                setViewMode(MannequinViewMode.DEFAULT);
+                setMode(MODE_PEER);
             }
-        }
+        });
-    }, []);
+    }, [ roomSession ]);
 
-    const onNitroEvent = useCallback((event: NitroEvent) =>
+    CreateEventDispatcherHook(RoomWidgetUpdateMannequinEvent.MANNEQUIN_UPDATE, eventDispatcher, onRoomWidgetUpdateMannequinEvent);
+
+    const getMergedFigureContainer = (figure: string, targetFigure: string) =>
     {
-        switch(event.type)
+        const figureContainer = GetAvatarRenderManager().createFigureContainer(figure);
+        const targetFigureContainer = GetAvatarRenderManager().createFigureContainer(targetFigure);
+
+        for(const part of MANNEQUIN_CLOTHING_PART_TYPES) figureContainer.removePart(part);
+
+        for(const part of targetFigureContainer.getPartTypeIds())
         {
-            case RoomEngineTriggerWidgetEvent.REQUEST_MANNEQUIN: {
+            figureContainer.updatePart(part, targetFigureContainer.getPartSetId(part), targetFigureContainer.getPartColorIds(part));
-                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-
-                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
-
-                if(!roomObject) return;
-                
-                const figure            = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_MANNEQUIN_FIGURE);
-                const gender            = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_MANNEQUIN_GENDER);
-                const name              = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_MANNEQUIN_NAME);
-
-                const figureContainer   = GetAvatarRenderManager().createFigureContainer(figure);
-                const clubLevel         = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender, parts);
-                
-                const mannequinData     = new FurnitureMannequinData(widgetEvent.objectId, widgetEvent.category, name, figure, gender, clubLevel);
-                
-                setMannequinData(mannequinData);
-                loadViewMode(mannequinData);
-                return;
-            }
-            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
-
-                setMannequinData(prevState =>
-                    {
-                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
-
-                        return null;
-                    });
-                return;
-            }
         }
-    }, [loadViewMode]);
 
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_MANNEQUIN, onNitroEvent);
+        return figureContainer;
-    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
+    }
 
-    const processAction = useCallback((type: string, value: string = null) =>
+    const transformAsMannequinFigure = (figureContainer: IAvatarFigureContainer) =>
     {
-        switch(type)
+        for(const part of figureContainer.getPartTypeIds())
         {
-            case 'close':
+            if(MANNEQUIN_CLOTHING_PART_TYPES.indexOf(part) >= 0) continue;
-                setMannequinData(null);
+            
-                return;
+            figureContainer.removePart(part);
-            case 'set_name':
+        }
-                setMannequinData(mannequinData => new FurnitureMannequinData(mannequinData.objectId, mannequinData.category, value, mannequinData.figure, mannequinData.gender, mannequinData.clubLevel, mannequinData.renderedFigure));
+    
-                return;
+        figureContainer.updatePart((MANNEQUIN_FIGURE[0] as string), (MANNEQUIN_FIGURE[1] as number), (MANNEQUIN_FIGURE[2] as number[]));
-            case 'load_figure':
+    };
-                loadMannequinFigure(GetAvatarRenderManager().createFigureContainer(GetNitroInstance().sessionDataManager.figure));
+
-                setViewMode(MannequinViewMode.SAVE);
+    const processAction = useCallback((action: number, value: string = null) =>
-                return;
+    {
-            case 'back':
+        switch(action)
-                loadMannequinFigure(GetAvatarRenderManager().createFigureContainer(mannequinData.figure));
+        {
-                setViewMode(MannequinViewMode.EDIT);
+            case ACTION_SAVE:
-                return;
+                SendMessageHook(new FurnitureMannequinSaveLookComposer(objectId));
-            case 'save_name':
+                break;
-                GetRoomSession().connection.send(new FurnitureMannequinSaveNameComposer(mannequinData.objectId, mannequinData.name));
+            case ACTION_WEAR:
-                return;
+                SendMessageHook(new FurnitureMultiStateComposer(objectId));
-            case 'save_figure':
+                break;
-                GetRoomSession().connection.send(new FurnitureMannequinSaveLookComposer(mannequinData.objectId));
+            case ACTION_SET_NAME:
-                processAction('save_name');
+                SendMessageHook(new FurnitureMannequinSaveNameComposer(objectId, name));
-                processAction('close');
-                return;
-            case 'wear':
-                GetRoomSession().connection.send(new FurnitureMultiStateComposer(mannequinData.objectId));
-                processAction('close');
                 return;
         }
-    }, [ loadMannequinFigure, mannequinData ]);
+
+        setMode(MODE_NONE);
+    }, [ objectId, name ]);
 
     const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
     {
         if(event.key !== 'Enter') return;
 
-        processAction('save_name');
+        processAction(ACTION_SET_NAME);
     };
 
-    if(!mannequinData) return null;
+    useEffect(() =>
+    {
+        switch(mode)
+        {
+            case MODE_CONTROLLER:
+            case MODE_WRONG_GENDER: {
+                const figureContainer = GetAvatarRenderManager().createFigureContainer(figure);
+
+                transformAsMannequinFigure(figureContainer);
+
+                setRenderedFigure(figureContainer.getFigureString());
+                setRenderedClubLevel(clubLevel);
+                break;
+            }
+            case MODE_UPDATE: {
+                const figureContainer = GetAvatarRenderManager().createFigureContainer(GetSessionDataManager().figure);
+
+                transformAsMannequinFigure(figureContainer);
+
+                setRenderedFigure(figureContainer.getFigureString());
+                setRenderedClubLevel(GetAvatarRenderManager().getFigureClubLevel(figureContainer, GetSessionDataManager().gender, MANNEQUIN_CLOTHING_PART_TYPES));
+                break;
+            }
+            case MODE_PEER:
+            case MODE_NO_CLUB: {
+                const figureContainer = getMergedFigureContainer(GetSessionDataManager().figure, figure);
+
+                setRenderedFigure(figureContainer.getFigureString());
+                setRenderedClubLevel(clubLevel);
+                break;
+            }
+        }
+    }, [ mode, figure, clubLevel ]);
+
+    if(mode === MODE_NONE) return null;
 
     return (
         <NitroCardView className="nitro-mannequin" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => processAction('close') } />
+            <NitroCardHeaderView headerText={ LocalizeText('mannequin.widget.title') } onCloseClick={ event => setMode(MODE_NONE) } />
             <NitroCardContentView>
-                <div className="row">
+                <NitroLayoutGrid>
-                    <div className="col-4">
+                    <NitroLayoutGridColumn className="justify-content-center align-items-center" size={ 4 }>
-                        <div className="mannequin-preview">
+                        <FurnitureMannequinPreviewView figure={ renderedFigure } clubLevel={ renderedClubLevel } />
-                            <AvatarImageView figure={ mannequinData.renderedFigure } direction={ 2 } />
+                    </NitroLayoutGridColumn>
-                        </div>
+                    <NitroLayoutGridColumn size={ 8 }>
-                    </div>
+                        { (mode === MODE_CONTROLLER) &&
-                    <div className="d-flex flex-column justify-content-between col">
+                            <NitroLayoutFlexColumn className="justify-content-between h-100">
-                        { viewMode === MannequinViewMode.DEFAULT &&
+                                <NitroLayoutFlex className="justify-content-between align-items-center">
-                            <>
+                                    {/* <i className="small fas fa-pencil-alt me-2 text-black" /> */}
-                                <div className="h-100">
+                                    <input type="text" className="form-control" value={ name } onChange={ event => setName(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
-                                    <div className="mb-1 text-black fw-bold">{ mannequinData.name }</div>
+                                </NitroLayoutFlex>
-                                    <div className="text-black">{ LocalizeText('mannequin.widget.weartext') }</div>
+                                <NitroLayoutFlexColumn gap={ 1 }>
-                                </div>
+                                    <NitroLayoutButton variant="success" onClick={ event => setMode(MODE_UPDATE) }>
-                                <div className="btn btn-success float-end" onClick={ event => processAction('wear') }>{ LocalizeText('mannequin.widget.wear') }</div>
+                                        { LocalizeText('mannequin.widget.style') }
-                                </> }
+                                    </NitroLayoutButton>
-                        { viewMode === MannequinViewMode.EDIT &&
+                                    <NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_WEAR) }>
-                            <>
+                                        { LocalizeText('mannequin.widget.wear') }
-                                <input type="text" className="form-control mb-2" value={ mannequinData.name }  onChange={ event => processAction('set_name', event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
+                                    </NitroLayoutButton>
-                                <div className="d-flex flex-column w-100">
+                                </NitroLayoutFlexColumn>
-                                    <div className="btn btn-success mb-2 w-100" onClick={ event => processAction('load_figure') }>{ LocalizeText('mannequin.widget.style') }</div>
+                            </NitroLayoutFlexColumn> }
-                                    <div className="btn btn-success w-100" onClick={ event => processAction('wear') }>{ LocalizeText('mannequin.widget.wear') }</div>
+                        { (mode === MODE_UPDATE) &&
-                                </div>
+                            <NitroLayoutFlexColumn className="justify-content-between h-100">
-                            </> }
+                                <NitroLayoutFlexColumn gap={ 1 }>
-                        { viewMode === MannequinViewMode.SAVE &&
+                                    <NitroLayoutBase className="text-black fw-bold">
-                            <>
+                                        { name }
-                                <div className="h-100">
+                                    </NitroLayoutBase>
-                                    <div className="mb-1 text-black fw-bold">{ mannequinData.name }</div>
+                                    <NitroLayoutBase className="text-black">
-                                    <div className="text-black">{ LocalizeText('mannequin.widget.savetext') }</div>
+                                        { LocalizeText('mannequin.widget.savetext') }
-                                </div>
+                                    </NitroLayoutBase>
-                                <div className="d-flex justify-content-between align-items-center">
+                                </NitroLayoutFlexColumn>
-                                    <div className="text-black text-decoration-underline cursor-pointer" onClick={ event => processAction('back') }>{ LocalizeText('mannequin.widget.back') }</div>
+                                <NitroLayoutFlex className="justify-content-between align-items-center">
-                                    <div className="btn btn-success" onClick={ event => processAction('save_figure') }>{ LocalizeText('mannequin.widget.save') }</div>
+                                    <NitroLayoutBase className="text-black text-decoration-underline cursor-pointer" onClick={ event => setMode(MODE_CONTROLLER) }>
-                                </div>
+                                        { LocalizeText('mannequin.widget.back') }
-                            </> }
+                                    </NitroLayoutBase>
-                        { viewMode === MannequinViewMode.CLUB &&
+                                    <NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_SAVE) }>
-                            <div className="text-black">{ LocalizeText('mannequin.widget.clubnotification') }</div> }
+                                        { LocalizeText('mannequin.widget.save') }
-                        { viewMode === MannequinViewMode.INCOMPATIBLE_GENDER &&
+                                    </NitroLayoutButton>
-                            <div className="text-black">{ LocalizeText('mannequin.widget.wronggender') }</div> }
+                                </NitroLayoutFlex>
-                    </div>
+                            </NitroLayoutFlexColumn> }
-                </div>
+                        { (mode === MODE_PEER) &&
+                            <NitroLayoutFlexColumn className="justify-content-between h-100">
+                                <NitroLayoutFlexColumn gap={ 1 }>
+                                    <NitroLayoutBase className="text-black fw-bold">
+                                        { name }
+                                    </NitroLayoutBase>
+                                    <NitroLayoutBase className="text-black">
+                                        { LocalizeText('mannequin.widget.weartext') }
+                                    </NitroLayoutBase>
+                                </NitroLayoutFlexColumn>
+                                <NitroLayoutButton variant="success" onClick={ event => processAction(ACTION_WEAR) }>
+                                    { LocalizeText('mannequin.widget.wear') }
+                                </NitroLayoutButton>
+                            </NitroLayoutFlexColumn> }
+                        { (mode === MODE_NO_CLUB) &&
+                            <NitroLayoutBase className="text-black">
+                                { LocalizeText('mannequin.widget.clubnotification') }
+                            </NitroLayoutBase> }
+                        { (mode === MODE_WRONG_GENDER) &&
+                            <NitroLayoutBase className="text-black">
+                                { LocalizeText('mannequin.widget.wronggender') }
+                            </NitroLayoutBase> }
+                    </NitroLayoutGridColumn>
+                </NitroLayoutGrid>
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/room/widgets/furniture/mannequin/common/MannequinViewMode.ts

@@ -1,8 +0,0 @@
-export class MannequinViewMode
-{
-    public static readonly EDIT: string = 'edit';
-    public static readonly SAVE: string = 'save';
-    public static readonly CLUB: string = 'club';
-    public static readonly DEFAULT: string = 'default';
-    public static readonly INCOMPATIBLE_GENDER: string = 'incompatible_gender';
-}

src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { NitroLayoutBase } from '../../../../../../../layout/base';
+import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
+import { CurrencyIcon } from '../../../../../../shared/currency-icon/CurrencyIcon';
+import { FurnitureMannequinPreviewViewProps } from './FurnitureMannequinPreviewView.types';
+
+export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProps> = props =>
+{
+    const { figure = null, clubLevel = 0 } = props;
+
+    return (
+        <NitroLayoutBase className="mannequin-preview" position="relative">
+            <AvatarImageView figure={ figure } direction={ 2 } />
+            { (clubLevel > 0) && <CurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
+        </NitroLayoutBase>
+    );
+}

src/views/room/widgets/furniture/mannequin/views/preview/FurnitureMannequinPreviewView.types.ts

@@ -0,0 +1,5 @@
+export interface FurnitureMannequinPreviewViewProps
+{
+    figure: string;
+    clubLevel: number;
+}