Inventory works

src/events/inventory/InventoryEvent.ts

@@ -3,5 +3,6 @@ import { NitroEvent } from 'nitro-renderer';
 export class InventoryEvent extends NitroEvent
 {
     public static SHOW_INVENTORY: string = 'IE_SHOW_INVENTORY';
+    public static HIDE_INVENTORY: string = 'IE_HIDE_INVENTORY';
     public static TOGGLE_INVENTORY: string = 'IE_TOGGLE_INVENTORY';
 }

src/hooks/Styles.scss

@@ -0,0 +1 @@
+@import './draggable-window/DraggableWindow';

src/hooks/draggable-window/DraggableWindow.scss

@@ -0,0 +1,6 @@
+.draggable-window {
+
+    .drag-handler {
+        cursor: move;
+    }
+}

src/hooks/draggable-window/DraggableWindow.tsx

@@ -61,7 +61,7 @@ export function DraggableWindow(props: DraggableWindowProps): JSX.Element
 
     return (
         <Draggable handle={ props.handle } { ...props.draggableOptions }>
-            <div ref={ elementRef } className="position-absolute t-0 l-0" onMouseDownCapture={ onMouseDown }>
+            <div ref={ elementRef } className="position-absolute t-0 l-0 draggable-window" onMouseDownCapture={ onMouseDown }>
                 { props.children }
             </div>
         </Draggable>

src/views/inventory/InventoryMessageHandler.tsx

@@ -1,10 +1,103 @@
-import { FC } from 'react';
+import { FurnitureListAddOrUpdateEvent, FurnitureListEvent, FurnitureListInvalidateEvent, FurnitureListItemParser, FurnitureListRemovedEvent, FurniturePostItPlacedEvent } from 'nitro-renderer';
+import { FC, useCallback } from 'react';
+import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { InventoryMessageHandlerProps } from './InventoryMessageHandler.types';
+import { FurnitureItem } from './utils/FurnitureItem';
+import { addFurnitureItem, getGroupItemForFurnitureId, mergeFragments, processFragment, removeItemById } from './utils/FurnitureUtilities';
 
+let furniMsgFragments: Map<number, FurnitureListItemParser>[] = null;
+ 
 export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =>
 {
-    return (
+    const { setNeedsFurniUpdate = null, setGroupItems = null } = props;
-        <>
+
-        </>
+    const onFurnitureListAddOrUpdateEvent = useCallback((event: FurnitureListAddOrUpdateEvent) =>
-    );
+    {
+        const parser = event.getParser();
+
+        setGroupItems(prevValue =>
+            {
+                const newSet = [ ...prevValue ];
+
+                for(const item of parser.items)
+                {
+                    const groupItem = getGroupItemForFurnitureId(newSet, item.itemId);
+
+                    if(groupItem)
+                    {
+                        const furniture = groupItem.getItemById(item.itemId);
+
+                        if(furniture)
+                        {
+                            furniture.update(item);
+
+                            groupItem.hasUnseenItems = true;
+                        }
+                    }
+                    else
+                    {
+                        const furniture = new FurnitureItem(item);
+
+                        addFurnitureItem(newSet, furniture, false);
+                    }
+                }
+
+                return newSet;
+            });
+    }, [ setGroupItems ]);
+
+    const onFurnitureListEvent = useCallback((event: FurnitureListEvent) =>
+    {
+        const parser = event.getParser();
+        
+        if(!furniMsgFragments) furniMsgFragments = new Array(parser.totalFragments);
+
+        const merged = mergeFragments(parser.fragment, parser.totalFragments, parser.fragmentNumber, furniMsgFragments);
+
+        if(!merged) return;
+
+        setGroupItems(prevValue =>
+            {
+                return processFragment(prevValue, merged);
+            });
+    }, [ setGroupItems ]);
+
+    const onFurnitureListInvalidateEvent = useCallback((event: FurnitureListInvalidateEvent) =>
+    {
+        setNeedsFurniUpdate(true);
+    }, [ setNeedsFurniUpdate ]);
+
+    const onFurnitureListRemovedEvent = useCallback((event: FurnitureListRemovedEvent) =>
+    {
+        const parser = event.getParser();
+
+        setGroupItems(prevValue =>
+            {
+                const newSet = [ ...prevValue ];
+
+                const groupItem = removeItemById(parser.itemId, newSet);
+
+                if(groupItem)
+                {
+                    // set all seen
+
+                    return newSet;
+                }
+
+                return prevValue;
+            });
+    }, [ setGroupItems ]);
+
+    const onFurniturePostItPlacedEvent = useCallback((event: FurniturePostItPlacedEvent) =>
+    {
+
+    }, []);
+
+    CreateMessageHook(FurnitureListAddOrUpdateEvent, onFurnitureListAddOrUpdateEvent);
+    CreateMessageHook(FurnitureListEvent, onFurnitureListEvent);
+    CreateMessageHook(FurnitureListInvalidateEvent, onFurnitureListInvalidateEvent);
+    CreateMessageHook(FurnitureListRemovedEvent, onFurnitureListRemovedEvent);
+    CreateMessageHook(FurniturePostItPlacedEvent, onFurniturePostItPlacedEvent);
+
+    return null;
 }

src/views/inventory/InventoryMessageHandler.types.ts

@@ -1,4 +1,8 @@
+import { Dispatch, SetStateAction } from 'react';
+import { GroupItem } from './utils/GroupItem';
+
 export interface InventoryMessageHandlerProps
 {
-    
+    setNeedsFurniUpdate: Dispatch<SetStateAction<boolean>>;
+    setGroupItems: Dispatch<SetStateAction<GroupItem[]>>;
 }

src/views/inventory/InventoryView.scss

@@ -1,3 +1,7 @@
 .nitro-inventory {
-    width: 450px;
+    width: 475px;
+    height: 300px;
+    max-height: 300px;
 }
+
+@import './views/InventoryViews';

src/views/inventory/InventoryView.tsx

@@ -1,15 +1,16 @@
-import { RoomSessionEvent } from 'nitro-renderer';
+import classNames from 'classnames';
-import { FC, useCallback, useState } from 'react';
+import { IRoomSession, RoomPreviewer, RoomSessionEvent } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { GetRoomEngine } from '../../api';
 import { InventoryEvent } from '../../events';
 import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { useUiEvent } from '../../hooks/events/ui/ui-event';
 import { LocalizeText } from '../../utils/LocalizeText';
-import { InventoryContextProvider } from './context/InventoryContext';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
 import { InventoryTabs, InventoryViewProps } from './InventoryView.types';
-import { InventoryTabsContentView } from './tabs-content/InventoryTabsContentView';
+import { GroupItem } from './utils/GroupItem';
-import { InventoryTabsSelectorView } from './tabs-selector/InventoryTabsSelectorView';
+import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView';
 
 export const InventoryView: FC<InventoryViewProps> = props =>
 {
@@ -18,6 +19,12 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     const [ isVisible, setIsVisible ]   = useState(false);
     const [ currentTab, setCurrentTab ] = useState<string>(tabs[0]);
 
+    const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
+    const [ needsFurniUpdate, setNeedsFurniUpdate ] = useState(true);
+    const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
+    const [ groupItems, setGroupItems ] = useState<GroupItem[]>([]);
+    const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
+
     const onInventoryEvent = useCallback((event: InventoryEvent) =>
     {
         switch(event.type)
@@ -25,6 +32,9 @@ export const InventoryView: FC<InventoryViewProps> = props =>
             case InventoryEvent.SHOW_INVENTORY:
                 setIsVisible(true);
                 return;
+            case InventoryEvent.HIDE_INVENTORY:
+                setIsVisible(false);
+                return;
             case InventoryEvent.TOGGLE_INVENTORY:
                 setIsVisible(value => !value);
                 return;
@@ -32,6 +42,7 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     }, []);
 
     useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
+    useUiEvent(InventoryEvent.HIDE_INVENTORY, onInventoryEvent);
     useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
 
     const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
@@ -39,9 +50,10 @@ export const InventoryView: FC<InventoryViewProps> = props =>
         switch(event.type)
         {
             case RoomSessionEvent.CREATED:
-                //
+                setRoomSession(event.session);
                 return;
             case RoomSessionEvent.ENDED:
+                setRoomSession(null);
                 setIsVisible(false);
                 return;
         }
@@ -50,26 +62,61 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
     useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
 
+    useEffect(() =>
+    {
+        setRoomPreviewer(new RoomPreviewer(GetRoomEngine(), ++RoomPreviewer.PREVIEW_COUNTER));
+
+        return () =>
+        {
+            setRoomPreviewer(prevValue =>
+                {
+                    prevValue.dispose();
+
+                    return null;
+                });
+        }
+    }, []);
+
     function hideInventory(): void
     {
         setIsVisible(false);
     }
 
     return (
-        <InventoryContextProvider value={{ currentTab, setCurrentTab }}>
+        <>
-            <InventoryMessageHandler  />
+            <InventoryMessageHandler
+                setNeedsFurniUpdate={ setNeedsFurniUpdate }
+                setGroupItems={ setGroupItems }  />
             { isVisible && <DraggableWindow handle=".drag-handler">
-                <div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
+                <div className="nitro-inventory d-flex flex-column">
-                    <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
+                    <div className="drag-handler d-flex align-items-center bg-primary border border-bottom-0 rounded-top px-3 py-1">
-                        <div className="h6 m-0">{ LocalizeText('inventory.title') }</div>
+                        <div className="d-flex flex-grow-1 justify-content-center align-items-center">
-                        <button type="button" className="close" onClick={ hideInventory }>
+                            <div className="h4 m-0 text-white text-shadow">{ LocalizeText('inventory.title') }</div>
+                        </div>
+                        <div className="cursor-pointer" onClick={ hideInventory }>
                             <i className="fas fa-times"></i>
-                        </button>
+                        </div>
+                    </div>
+                    <ul className="nav nav-tabs justify-content-center bg-secondary border-start border-end px-3 pt-1">
+                        { tabs.map((name, index) =>
+                            {
+                                return <li key={ index } className="nav-item me-1 cursor-pointer" onClick={ event => setCurrentTab(name) } >
+                                    <span className={ 'nav-link ' + classNames({ 'active': (currentTab === name) }) }>{ LocalizeText(name) }</span>
+                                </li>;
+                            }) }
+                    </ul>
+                    <div className="bg-light rounded-bottom border border-top-0 px-3 py-2 h-100 overflow-hidden">
+                        { (currentTab === InventoryTabs.FURNITURE ) && <InventoryFurnitureView
+                            needsFurniUpdate={ needsFurniUpdate }
+                            setNeedsFurniUpdate={ setNeedsFurniUpdate }
+                            groupItem={ groupItem }
+                            setGroupItem={ setGroupItem }
+                            groupItems={ groupItems }
+                            roomSession={ roomSession }
+                            roomPreviewer={ roomPreviewer } /> }
                     </div>
-                    <InventoryTabsSelectorView tabs={ tabs } />
-                    <InventoryTabsContentView />
                 </div>
             </DraggableWindow> }
-        </InventoryContextProvider>
+        </>
     );
 }

src/views/inventory/context/InventoryContext.tsx

@@ -3,7 +3,7 @@ import { IInventoryContext, InventoryContextProps } from './InventoryContext.typ
 
 const InventoryContext = createContext<IInventoryContext>({
     currentTab: null,
-    setCurrentTab: null
+    setCurrentTab: null,
 });
 
 export const InventoryContextProvider: FC<InventoryContextProps> = props =>

src/views/inventory/context/furniture/InventoryFurnitureContext.tsx

@@ -0,0 +1,14 @@
+import { createContext, FC, useContext } from 'react';
+import { IInventoryFurnitureContext, InventoryFurnitureContextProps } from './InventoryFurnitureContext.types';
+
+const InventoryFurnitureContext = createContext<IInventoryFurnitureContext>({
+    setNeedsUpdate: null,
+    setGroupItems: null
+});
+
+export const InventoryFurnitureContextProvider: FC<InventoryFurnitureContextProps> = props =>
+{
+    return <InventoryFurnitureContext.Provider value={ props.value }>{ props.children }</InventoryFurnitureContext.Provider>
+}
+
+export const useInventoryFurnitureContext = () => useContext(InventoryFurnitureContext);

src/views/inventory/context/furniture/InventoryFurnitureContext.types.ts

@@ -0,0 +1,13 @@
+import { Dispatch, ProviderProps, SetStateAction } from 'react';
+import { GroupItem } from '../../utils/GroupItem';
+
+export interface IInventoryFurnitureContext
+{
+    setNeedsUpdate: Dispatch<SetStateAction<boolean>>;
+    setGroupItems: Dispatch<SetStateAction<GroupItem[]>>;
+}
+
+export interface InventoryFurnitureContextProps extends ProviderProps<IInventoryFurnitureContext>
+{
+
+}

src/views/inventory/tabs-content/InventoryTabsContentView.tsx

@@ -1,36 +0,0 @@
-import { FC } from 'react';
-import { useInventoryContext } from '../context/InventoryContext';
-import { InventoryTabs } from '../InventoryView.types';
-import { InventoryTabBadgesView } from './badges/InventoryTabBadgesView';
-import { InventoryTabBotsView } from './bots/InventoryTabBotsView';
-import { InventoryTabFurnitureView } from './furniture/InventoryTabFurnitureView';
-import { InventoryTabsContentViewProps } from './InventoryTabsContentView.types';
-import { InventoryTabPetsView } from './pets/InventoryTabPetsView';
-
-export const InventoryTabsContentView: FC<InventoryTabsContentViewProps> = props =>
-{
-    const inventoryContext = useInventoryContext();
-
-    function renderCurrentTab(): JSX.Element
-    {
-        switch(inventoryContext.currentTab)
-        {
-            case InventoryTabs.FURNITURE:
-                return <InventoryTabFurnitureView />
-            case InventoryTabs.BOTS:
-                return <InventoryTabBotsView />
-            case InventoryTabs.PETS:
-                return <InventoryTabPetsView />
-            case InventoryTabs.BADGES:
-                return <InventoryTabBadgesView />
-        }
-
-        return null;
-    }
-    
-    return (
-        <div className="px-3 pb-3">
-            { inventoryContext && inventoryContext.currentTab && renderCurrentTab() }
-        </div>
-    );
-}

src/views/inventory/tabs-content/InventoryTabsContentView.types.ts

@@ -1,2 +0,0 @@
-export interface InventoryTabsContentViewProps
-{}

src/views/inventory/tabs-content/badges/InventoryTabBadgesView.tsx

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { useInventoryContext } from '../../context/InventoryContext';
-import { InventoryTabBadgesViewProps } from './InventoryTabBadgesView.types';
-
-export const InventoryTabBadgesView: FC<InventoryTabBadgesViewProps> = props =>
-{
-    const inventoryContext = useInventoryContext();
-
-    return (
-        <>Badges content</>
-    );
-}

src/views/inventory/tabs-content/badges/InventoryTabBadgesView.types.ts

@@ -1,2 +0,0 @@
-export interface InventoryTabBadgesViewProps
-{}

src/views/inventory/tabs-content/bots/InventoryTabBotsView.tsx

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { useInventoryContext } from '../../context/InventoryContext';
-import { InventoryTabBotsViewProps } from './InventoryTabBotsView.types';
-
-export const InventoryTabBotsView: FC<InventoryTabBotsViewProps> = props =>
-{
-    const inventoryContext = useInventoryContext();
-
-    return (
-        <>Bots content</>
-    );
-}

src/views/inventory/tabs-content/bots/InventoryTabBotsView.types.ts

@@ -1,2 +0,0 @@
-export interface InventoryTabBotsViewProps
-{}

src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.tsx

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { useInventoryContext } from '../../context/InventoryContext';
-import { InventoryTabFurnitureViewProps } from './InventoryTabFurnitureView.types';
-
-export const InventoryTabFurnitureView: FC<InventoryTabFurnitureViewProps> = props =>
-{
-    const inventoryContext = useInventoryContext();
-
-    return (
-        <>Furniture content</>
-    );
-}

src/views/inventory/tabs-content/furniture/InventoryTabFurnitureView.types.ts

@@ -1,2 +0,0 @@
-export interface InventoryTabFurnitureViewProps
-{}

src/views/inventory/tabs-content/pets/InventoryTabPetsView.tsx

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import { useInventoryContext } from '../../context/InventoryContext';
-import { InventoryTabPetsViewProps } from './InventoryTabPetsView.types';
-
-export const InventoryTabPetsView: FC<InventoryTabPetsViewProps> = props =>
-{
-    const inventoryContext = useInventoryContext();
-
-    return (
-        <>Pets content</>
-    );
-}

src/views/inventory/tabs-content/pets/InventoryTabPetsView.types.ts

@@ -1,2 +0,0 @@
-export interface InventoryTabPetsViewProps
-{}

src/views/inventory/tabs-selector/InventoryTabsSelectorView.tsx

@@ -1,20 +0,0 @@
-import { FC } from 'react';
-import { InventoryTabsSelectorViewProps } from './InventoryTabsSelectorView.types';
-import { InventoryTabView } from './tab/InventoryTabView';
-
-export const InventoryTabsSelectorView: FC<InventoryTabsSelectorViewProps> = props =>
-{
-    const { tabs = null } = props;
-
-    return (
-        <div className="p-3">
-            { tabs && tabs.length &&
-                <div className="btn-group w-100">
-                    { props.tabs.map((tab, index) =>
-                        {
-                            return <InventoryTabView key={ index } tab={ tab } />
-                        }) }
-                </div> }
-        </div>
-    );
-}

src/views/inventory/tabs-selector/InventoryTabsSelectorView.types.ts

@@ -1,4 +0,0 @@
-export interface InventoryTabsSelectorViewProps
-{
-    tabs: string[];
-}

src/views/inventory/tabs-selector/tab/InventoryTabView.tsx

@@ -1,21 +0,0 @@
-import classNames from 'classnames';
-import { FC, MouseEvent } from 'react';
-import { LocalizeText } from '../../../../utils/LocalizeText';
-import { useInventoryContext } from '../../context/InventoryContext';
-import { InventoryTabViewProps } from './InventoryTabView.types';
-
-export const InventoryTabView: FC<InventoryTabViewProps> = props =>
-{
-    const { tab = null } = props;
-
-    const inventoryContext = useInventoryContext();
-
-    function selectTab(event: MouseEvent = null): void
-    {
-        inventoryContext.setCurrentTab(tab);
-    }
-
-    if(!tab) return null;
-
-    return <button type="button" className={ 'btn btn-secondary btn-sm ' + classNames({ 'active': (inventoryContext.currentTab === tab) })} onClick={ selectTab }>{ LocalizeText(tab) }</button>;
-}

src/views/inventory/tabs-selector/tab/InventoryTabView.types.ts

@@ -1,4 +0,0 @@
-export interface InventoryTabViewProps
-{
-    tab: string;
-}

src/views/inventory/utils/FurniCategory.ts

@@ -0,0 +1,26 @@
+export class FurniCategory
+{
+    public static DEFAULT: number = 1;
+    public static _Str_3639: number = 2;
+    public static _Str_3683: number = 3;
+    public static _Str_3432: number = 4;
+    public static _Str_12351: number = 5;
+    public static _Str_5186: number = 6;
+    public static _Str_21911: number = 7;
+    public static _Str_9125: number = 8;
+    public static _Str_5922: number = 9;
+    public static _Str_18231: number = 10;
+    public static _Str_4255: number = 11;
+    public static _Str_19933: number = 12;
+    public static _Str_7696: number = 13;
+    public static _Str_7297: number = 14;
+    public static _Str_7954: number = 15;
+    public static _Str_6096: number = 16;
+    public static _Str_12454: number = 17;
+    public static _Str_19144: number = 18;
+    public static MONSTERPLANT_SEED: number = 19;
+    public static _Str_6915: number = 20;
+    public static _Str_8726: number = 21;
+    public static _Str_9449: number = 22;
+    public static _Str_12534: number = 23;
+}

src/views/inventory/utils/FurnitureItem.ts

@@ -0,0 +1,243 @@
+import { IFurnitureItemData, IObjectData, Nitro } from 'nitro-renderer';
+import { IFurnitureItem } from './IFurnitureItem';
+
+export class FurnitureItem implements IFurnitureItem
+{
+    private _expirationTimeStamp: number;
+    private _isWallItem: boolean;
+    private _songId: number;
+    private _locked: boolean;
+    private _id: number;
+    private _ref: number;
+    private _category: number;
+    private _type: number;
+    private _stuffData: IObjectData;
+    private _extra: number;
+    private _recyclable: boolean;
+    private _tradeable: boolean;
+    private _groupable: boolean;
+    private _sellable: boolean;
+    private _secondsToExpiration: number;
+    private _hasRentPeriodStarted: boolean;
+    private _creationDay: number;
+    private _creationMonth: number;
+    private _creationYear: number;
+    private _slotId: string;
+    private _isRented: boolean;
+    private _flatId: number;
+
+    constructor(parser: IFurnitureItemData)
+    {
+        this._locked                = false;
+        this._id                    = parser.itemId;
+        this._type                  = parser.spriteId;
+        this._ref                   = parser.ref;
+        this._category              = parser.category;
+        this._groupable             = ((parser.isGroupable) && (!(parser.rentable)));
+        this._tradeable             = parser.tradable;
+        this._recyclable            = parser.isRecycleable;
+        this._sellable              = parser.sellable;
+        this._stuffData             = parser.stuffData;
+        this._extra                 = parser._Str_2794;
+        this._secondsToExpiration   = parser.secondsToExpiration;
+        this._expirationTimeStamp   = parser._Str_10616;
+        this._hasRentPeriodStarted  = parser.hasRentPeriodStarted;
+        this._creationDay           = parser._Str_8932;
+        this._creationMonth         = parser._Str_9050;
+        this._creationYear          = parser._Str_9408;
+        this._slotId                = parser.slotId;
+        this._songId                = parser._Str_3951;
+        this._flatId                = parser.flatId;
+        this._isRented              = parser.rentable;
+        this._isWallItem            = parser.isWallItem;
+    }
+
+    public get rentable(): boolean
+    {
+        return this._isRented;
+    }
+
+    public get id(): number
+    {
+        return this._id;
+    }
+
+    public get ref(): number
+    {
+        return this._ref;
+    }
+
+    public get category(): number
+    {
+        return this._category;
+    }
+
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public get stuffData(): IObjectData
+    {
+        return this._stuffData;
+    }
+
+    public set stuffData(k: IObjectData)
+    {
+        this._stuffData = k;
+    }
+
+    public get extra(): number
+    {
+        return this._extra;
+    }
+
+    public get _Str_16260(): boolean
+    {
+        return this._recyclable;
+    }
+
+    public get isTradable(): boolean
+    {
+        return this._tradeable;
+    }
+
+    public get isGroupable(): boolean
+    {
+        return this._groupable;
+    }
+
+    public get sellable(): boolean
+    {
+        return this._sellable;
+    }
+
+    public get secondsToExpiration(): number
+    {
+        if(this._secondsToExpiration === -1) return -1;
+
+        let time = -1;
+
+        if(this._hasRentPeriodStarted)
+        {
+            time = (this._secondsToExpiration - ((Nitro.instance.time - this._expirationTimeStamp) / 1000));
+
+            if(time < 0) time = 0;
+        }
+        else
+        {
+            time = this._secondsToExpiration;
+        }
+
+        return time;
+    }
+
+    public get _Str_8932(): number
+    {
+        return this._creationDay;
+    }
+
+    public get _Str_9050(): number
+    {
+        return this._creationMonth;
+    }
+
+    public get _Str_9408(): number
+    {
+        return this._creationYear;
+    }
+
+    public get slotId(): string
+    {
+        return this._slotId;
+    }
+
+    public get _Str_3951(): number
+    {
+        return this._songId;
+    }
+
+    public get locked(): boolean
+    {
+        return this._locked;
+    }
+
+    public set locked(k: boolean)
+    {
+        this._locked = k;
+    }
+
+    public get flatId(): number
+    {
+        return this._flatId;
+    }
+
+    public get isWallItem(): boolean
+    {
+        return this._isWallItem;
+    }
+
+    public get hasRentPeriodStarted(): boolean
+    {
+        return this._hasRentPeriodStarted;
+    }
+
+    public get _Str_10616(): number
+    {
+        return this._expirationTimeStamp;
+    }
+
+    public update(parser: IFurnitureItemData): void
+    {
+        this._type                  = parser.spriteId;
+        this._ref                   = parser.ref;
+        this._category              = parser.category;
+        this._groupable             = (parser.isGroupable && !parser.rentable);
+        this._tradeable             = parser.tradable;
+        this._recyclable            = parser.isRecycleable;
+        this._sellable              = parser.sellable;
+        this._stuffData             = parser.stuffData;
+        this._extra                 = parser._Str_2794;
+        this._secondsToExpiration   = parser.secondsToExpiration;
+        this._expirationTimeStamp   = parser._Str_10616;
+        this._hasRentPeriodStarted  = parser.hasRentPeriodStarted;
+        this._creationDay           = parser._Str_8932;
+        this._creationMonth         = parser._Str_9050;
+        this._creationYear          = parser._Str_9408;
+        this._slotId                = parser.slotId;
+        this._songId                = parser._Str_3951;
+        this._flatId                = parser.flatId;
+        this._isRented              = parser.rentable;
+        this._isWallItem            = parser.isWallItem;
+    }
+
+    public clone(): FurnitureItem
+    {
+        const item = new FurnitureItem(null);
+
+        item._expirationTimeStamp = this._expirationTimeStamp;
+        item._isWallItem = this._isWallItem;
+        item._songId = this._songId;
+        item._locked = this._locked;
+        item._id = this._id;
+        item._ref = this._ref;
+        item._category = this._category;
+        item._type = this._type;
+        item._stuffData = this._stuffData;
+        item._extra = this._extra;
+        item._recyclable = this._recyclable;
+        item._tradeable = this._tradeable;
+        item._groupable = this._groupable;
+        item._sellable = this._sellable;
+        item._secondsToExpiration = this._secondsToExpiration;
+        item._hasRentPeriodStarted = this._hasRentPeriodStarted;
+        item._creationDay = this._creationDay;
+        item._creationMonth = this._creationMonth;
+        item._creationYear = this._creationYear;
+        item._slotId = this._slotId;
+        item._isRented = this._isRented;
+        item._flatId = this._flatId;
+
+        return item;
+    }
+}

src/views/inventory/utils/FurnitureUtilities.ts

@@ -0,0 +1,369 @@
+import { FurnitureListItemParser, FurniturePlacePaintComposer, IObjectData, RoomObjectCategory, RoomObjectPlacementSource } from 'nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { InventoryEvent } from '../../../events';
+import { dispatchUiEvent } from '../../../hooks/events/ui/ui-event';
+import { SendMessageHook } from '../../../hooks/messages/message-event';
+import { FurniCategory } from './FurniCategory';
+import { FurnitureItem } from './FurnitureItem';
+import { GroupItem } from './GroupItem';
+
+let objectMoverRequested = false;
+let itemIdInFurniPlacing = -1;
+
+export function isObjectMoverRequested(): boolean
+{
+    return objectMoverRequested;
+}
+
+export function setObjectMoverRequested(flag: boolean)
+{
+    objectMoverRequested = flag;
+}
+
+export function getPlacingFurnitureId(): number
+{
+    return itemIdInFurniPlacing;
+}
+
+export function setPlacingFurnitureId(id: number)
+{
+    itemIdInFurniPlacing = id;
+}
+
+export function attemptItemPlacement(groupItem: GroupItem, flag: boolean = false): boolean
+{
+    if(!groupItem || !groupItem.getUnlockedCount()) return false;
+
+    const item = groupItem.getLastItem();
+
+    if(!item) return false;
+
+    if((item.category === FurniCategory._Str_3683) || (item.category === FurniCategory._Str_3639) || (item.category === FurniCategory._Str_3432))
+    {
+        if(flag) return false;
+
+        SendMessageHook(new FurniturePlacePaintComposer(item.id));
+
+        return false;
+    }
+    else
+    {
+        dispatchUiEvent(new InventoryEvent(InventoryEvent.HIDE_INVENTORY));
+
+        let category    = 0;
+        let isMoving    = false;
+
+        if(item.isWallItem) category = RoomObjectCategory.WALL;
+        else category = RoomObjectCategory.FLOOR;
+
+        if((item.category === FurniCategory._Str_5186)) // or external image from furnidata
+        {
+            isMoving = GetRoomEngine().processRoomObjectPlacement(RoomObjectPlacementSource.INVENTORY, item.id, category, item.type, item.stuffData.getLegacyString());
+        }
+        else
+        {
+            isMoving = GetRoomEngine().processRoomObjectPlacement(RoomObjectPlacementSource.INVENTORY, item.id, category, item.type, item.extra.toString(), item.stuffData);
+        }
+
+        if(isMoving)
+        {
+            setPlacingFurnitureId(item.ref);
+            setObjectMoverRequested(true);
+        }
+    }
+
+    return true;
+}
+
+function cancelRoomObjectPlacement(): void
+{
+    if(getPlacingFurnitureId() === -1) return;
+    
+    GetRoomEngine().cancelRoomObjectPlacement();
+
+    setPlacingFurnitureId(-1);
+    setObjectMoverRequested(false);
+}
+
+export function getGroupItemForFurnitureId(set: GroupItem[], id: number): GroupItem
+{
+    for(const groupItem of set)
+    {
+        if(groupItem.getItemById(id)) return groupItem;
+    }
+
+    return null;
+}
+
+export function mergeFragments(fragment: Map<number, FurnitureListItemParser>, totalFragments: number, fragmentNumber: number, fragments: Map<number, FurnitureListItemParser>[])
+{
+    if(totalFragments === 1) return fragment;
+
+    fragments[fragmentNumber] = fragment;
+
+    for(const frag of fragments)
+    {
+        if(!frag) return null;
+    }
+
+    const merged: Map<number, FurnitureListItemParser> = new Map();
+
+    for(const frag of fragments)
+    {
+        for(const [ key, value ] of frag) merged.set(key, value);
+
+        frag.clear();
+    }
+
+    fragments = null;
+
+    return merged;
+}
+
+export function getAllItemIds(groupItems: GroupItem[]): number[]
+{
+    const itemIds: number[] = [];
+
+    for(const groupItem of groupItems)
+    {
+        let totalCount = groupItem.getTotalCount();
+
+        if(groupItem.category === FurniCategory._Str_12351) totalCount = 1;
+
+        let i = 0;
+
+        while(i < totalCount)
+        {
+            itemIds.push(groupItem.getItemByIndex(i).id);
+
+            i++;
+        }
+    }
+
+    return itemIds;
+}
+
+export function processFragment(set: GroupItem[], fragment: Map<number, FurnitureListItemParser>): GroupItem[]
+{
+    const existingIds = getAllItemIds(set);
+    const addedIds: number[] = [];
+    const removedIds: number[] = [];
+
+    for(const key of fragment.keys()) (existingIds.indexOf(key) === -1) && addedIds.push(key);
+
+    for(const itemId of existingIds) (!fragment.get(itemId)) && removedIds.push(itemId);
+
+    const emptyExistingSet = (existingIds.length === 0);
+
+    const newSet = [ ...set ];
+
+    for(const id of removedIds) removeItemById(id, newSet);
+
+    for(const id of addedIds)
+    {
+        const parser = fragment.get(id);
+
+        if(!parser) continue;
+
+        const item = new FurnitureItem(parser);
+
+        addFurnitureItem(newSet, item, true);
+    }
+
+    return newSet;
+}
+
+export function removeItemById(id: number, set: GroupItem[]): GroupItem
+{
+    let index = 0;
+
+    while(index < set.length)
+    {
+        const group = set[index];
+        const item = group.remove(id);
+
+        if(item)
+        {
+            if(getPlacingFurnitureId() === item.ref)
+            {
+                cancelRoomObjectPlacement();
+
+                if(!attemptItemPlacement(group))
+                {
+                    setTimeout(() => dispatchUiEvent(new InventoryEvent(InventoryEvent.SHOW_INVENTORY)), 1);
+                }
+            }
+
+            if(group.getTotalCount() <= 0)
+            {
+                set.splice(index, 1);
+
+                group.dispose();
+            }
+
+            return group;
+        }
+
+        index++;
+    }
+
+    return null;
+}
+
+export function addFurnitureItem(set: GroupItem[], item: FurnitureItem, flag: boolean): void
+{
+    let groupItem: GroupItem = null;
+
+    if(!item.isGroupable)
+    {
+        groupItem = addSingleFurnitureItem(set, item, flag);
+    }
+    else
+    {
+        groupItem = addGroupableFurnitureItem(set, item, flag);
+    }
+
+    if(!flag) groupItem.hasUnseenItems = true;
+}
+
+export function addSingleFurnitureItem(set: GroupItem[], item: FurnitureItem, flag: boolean): GroupItem
+{
+    const groupItems: GroupItem[] = [];
+
+    for(const groupItem of set)
+    {
+        if(groupItem.type === item.type) groupItems.push(groupItem);
+    }
+
+    for(const groupItem of groupItems)
+    {
+        if(groupItem.getItemById(item.id)) return groupItem;
+    }
+
+    const unseen    = flag; //this.isFurnitureUnseen(item);
+    const groupItem = createGroupItem(item.type, item.category, item.stuffData, item.extra, unseen);
+
+    groupItem.push(item, unseen);
+
+    if(unseen)
+    {
+        groupItem.hasUnseenItems = true;
+
+        set.unshift(groupItem);
+    }
+    else
+    {
+        set.push(groupItem);
+    }
+
+    return groupItem;
+}
+
+export function addGroupableFurnitureItem(set: GroupItem[], item: FurnitureItem, unseen: boolean): GroupItem
+{
+    let existingGroup: GroupItem = null;
+
+    for(const groupItem of set)
+    {
+        if((groupItem.type === item.type) && (groupItem.isWallItem === item.isWallItem) && groupItem.isGroupable)
+        {
+            if(item.category === FurniCategory._Str_5186)
+            {
+                if(groupItem.stuffData.getLegacyString() === item.stuffData.getLegacyString())
+                {
+                    existingGroup = groupItem;
+
+                    break;
+                }
+            }
+
+            else if(item.category === FurniCategory._Str_12454)
+            {
+                if(item.stuffData.compare(groupItem.stuffData))
+                {
+                    existingGroup = groupItem;
+
+                    break;
+                }
+            }
+
+            else
+            {
+                existingGroup = groupItem;
+
+                break;
+            }
+        }
+    }
+
+    // unseen = unseen; //this.isFurnitureUnseen(item);
+
+    if(existingGroup)
+    {
+        existingGroup.push(item, unseen);
+
+        if(unseen)
+        {
+            existingGroup.hasUnseenItems = true;
+
+            const index = set.indexOf(existingGroup);
+
+            if(index >= 0) set.splice(index, 1);
+            
+            set.unshift(existingGroup);
+        }
+
+        return existingGroup;
+    }
+
+    existingGroup = createGroupItem(item.type, item.category, item.stuffData, item.extra, unseen);
+
+    existingGroup.push(item, unseen);
+
+    if(unseen)
+    {
+        existingGroup.hasUnseenItems = true;
+
+        set.unshift(existingGroup);
+    }
+    else
+    {
+        set.push(existingGroup);
+    }
+
+    return existingGroup;
+}
+
+export function createGroupItem(type: number, category: number, stuffData: IObjectData, extra: number = NaN, flag: boolean = false): GroupItem
+{
+    // const iconImage: HTMLImageElement = null;
+
+    if(category === FurniCategory._Str_3639)
+    {
+        // const icon = this._windowManager.assets.getAssetByName("inventory_furni_icon_wallpaper");
+        // if (icon != null)
+        // {
+        //     iconImage = (icon.content as BitmapData).clone();
+        // }
+    }
+
+    else if(category === FurniCategory._Str_3683)
+    {
+        // const icon = this._windowManager.assets.getAssetByName("inventory_furni_icon_floor");
+        // if (icon != null)
+        // {
+        //     iconImage = (icon.content as BitmapData).clone();
+        // }
+    }
+
+    else if(category === FurniCategory._Str_3432)
+    {
+        // const icon = this._windowManager.assets.getAssetByName("inventory_furni_icon_landscape");
+        // if (icon != null)
+        // {
+        //     iconImage = (icon.content as BitmapData).clone();
+        // }
+    }
+
+    return new GroupItem(type, category, GetRoomEngine(), stuffData, extra);
+}

src/views/inventory/utils/GroupItem.ts

@@ -0,0 +1,423 @@
+import { IObjectData, IRoomEngine } from 'nitro-renderer';
+import { LocalizeText } from '../../../utils/LocalizeText';
+import { FurniCategory } from './FurniCategory';
+import { FurnitureItem } from './FurnitureItem';
+import { IFurnitureItem } from './IFurnitureItem';
+
+export class GroupItem
+{
+    private _type: number;
+    private _category: number;
+    private _roomEngine: IRoomEngine;
+    private _stuffData: IObjectData;
+    private _extra: number;
+    private _isWallItem: boolean;
+    private _iconUrl: string;
+    private _name: string;
+    private _description: string;
+    private _locked: boolean;
+    private _selected: boolean;
+    private _hasUnseenItems: boolean;
+    private _items: FurnitureItem[];
+
+    constructor(type: number, category: number, roomEngine: IRoomEngine, stuffData: IObjectData, extra: number)
+    {
+        this._type              = type;
+        this._category          = category;
+        this._roomEngine        = roomEngine;
+        this._stuffData         = stuffData;
+        this._extra             = extra;
+        this._isWallItem        = false;
+        this._iconUrl           = null;
+        this._name              = null;
+        this._description       = null;
+        this._locked            = false;
+        this._selected          = false;
+        this._hasUnseenItems    = false;
+        this._items             = [];
+    }
+
+    public prepareGroup(): void
+    {
+        this.setIcon();
+        this.setName();
+        this.setDescription();
+    }
+
+    public dispose(): void
+    {
+
+    }
+
+    public getItemByIndex(index: number): FurnitureItem
+    {
+        return this._items[index];
+    }
+
+    public getItemById(id: number): FurnitureItem
+    {
+        for(const item of this._items)
+        {
+            if(item.id !== id) continue;
+
+            return item;
+        }
+
+        return null;
+    }
+
+    public getTradeItems(count: number): IFurnitureItem[]
+    {
+        const items: IFurnitureItem[] = [];
+
+        const furnitureItem = this.getLastItem();
+
+        if(!furnitureItem) return items;
+
+        let found   = 0;
+        let i       = 0;
+
+        while(i < this._items.length)
+        {
+            if(found >= count) break;
+
+            const item = this.getItemByIndex(i);
+
+            if(!item.locked && item.isTradable && (item.type === furnitureItem.type))
+            {
+                items.push(item);
+
+                found++;
+            }
+
+            i++;
+        }
+
+        return items;
+    }
+
+    public push(item: FurnitureItem, unseen: boolean = false): void
+    {
+        const items = [ ...this._items ];
+
+        let index = 0;
+
+        while(index < items.length)
+        {
+            let existingItem = items[index];
+
+            if(existingItem.id === item.id)
+            {
+                existingItem = existingItem.clone();
+
+                existingItem.locked = false;
+
+                items.splice(index, 1);
+
+                items.push(existingItem);
+
+                this._items = items;
+
+                return;
+            }
+
+            index++;
+        }
+
+        items.push(item);
+
+        this._items = items;
+
+        if(this._items.length === 1) this.prepareGroup();
+    }
+
+    public pop(): FurnitureItem
+    {
+        const items = [ ...this._items ];
+
+        let item: FurnitureItem = null;
+
+        if(items.length > 0)
+        {
+            const index = (items.length - 1);
+
+            item = items[index];
+
+            items.splice(index, 1);
+        }
+
+        this._items = items;
+
+        return item;
+    }
+
+    public remove(k: number): FurnitureItem
+    {
+        const items = [ ...this._items ];
+
+        let index = 0;
+
+        while(index < items.length)
+        {
+            let existingItem = items[index];
+
+            if(existingItem.id === k)
+            {
+                items.splice(index, 1);
+
+                this._items = items;
+
+                return existingItem;
+            }
+
+            index++;
+        }
+
+        return null;
+    }
+
+    public getTotalCount(): number
+    {
+        if(this._category === FurniCategory._Str_12351)
+        {
+            let count   = 0;
+            let index   = 0;
+
+            while(index < this._items.length)
+            {
+                const item = this.getItemByIndex(index);
+
+                count = (count + parseInt(item.stuffData.getLegacyString()));
+
+                index++;
+            }
+
+            return count;
+        }
+
+        return this._items.length;
+    }
+
+    public getUnlockedCount(): number
+    {
+        if(this.category === FurniCategory._Str_12351) return this.getTotalCount();
+
+        let count = 0;
+        let index = 0;
+
+        while(index < this._items.length)
+        {
+            const item = this.getItemByIndex(index);
+
+            if(!item.locked) count++;
+
+            index++;
+        }
+
+        return count;
+    }
+
+    public getLastItem(): FurnitureItem
+    {
+        if(!this._items.length) return null;
+
+        const item = this.getItemByIndex((this._items.length - 1));
+
+        return item;
+    }
+
+    public unlockAllItems(): void
+    {
+        const items = [ ...this._items ];
+
+        let index = 0;
+
+        while(index < items.length)
+        {
+            const item = items[index];
+
+            if(item.locked)
+            {
+                const newItem = item.clone();
+
+                newItem.locked = false;
+
+                items[index] = newItem;
+            }
+
+            index++;
+        }
+
+        this._items = items;
+    }
+
+    public lockItemIds(itemIds: number[]): void
+    {
+        const items = [ ...this._items ];
+
+        let index = 0;
+
+        while(index < items.length)
+        {
+            const item      = items[index];
+            const locked    = (itemIds.indexOf(item.ref) >= 0);
+
+            if(item.locked !== locked)
+            {
+                const newItem = item.clone();
+
+                newItem.locked = locked;
+
+                items[index] = newItem;
+            }
+
+            index++;
+        }
+
+        this._items = items;
+    }
+
+    private setName(): void
+    {
+        const k = this.getLastItem();
+
+        if(!k)
+        {
+            this._name = '';
+
+            return;
+        }
+
+        let key = '';
+
+        switch(this._category)
+        {
+            case FurniCategory._Str_5186:
+                key = (('poster_' + k.stuffData.getLegacyString()) + '_name');
+                break;
+            case FurniCategory._Str_9125:
+                this._name = 'SONG_NAME';
+                return;
+            default:
+                if(this.isWallItem)
+                {
+                    key = ('wallItem.name.' + k.type);
+                }
+                else
+                {
+                    key = ('roomItem.name.' + k.type);
+                }
+        }
+
+        this._name = LocalizeText(key);
+    }
+
+    private setDescription(): void
+    {
+        this._description = '';
+    }
+
+    private setIcon(): void
+    {
+        if(this._iconUrl) return;
+
+        let url = null;
+
+        if(this.isWallItem)
+        {
+            url = this._roomEngine.getFurnitureWallIconUrl(this._type, this._stuffData.getLegacyString());
+        }
+        else
+        {
+            url = this._roomEngine.getFurnitureFloorIconUrl(this._type);
+        }
+
+        if(!url) return;
+
+        this._iconUrl = url;
+    }
+
+    public get type(): number
+    {
+        return this._type;
+    }
+
+    public get category(): number
+    {
+        return this._category;
+    }
+
+    public get stuffData(): IObjectData
+    {
+        return this._stuffData;
+    }
+
+    public get extra(): number
+    {
+        return this._extra;
+    }
+
+    public get iconUrl(): string
+    {
+        return this._iconUrl;
+    }
+
+    public get name(): string
+    {
+        return this._name;
+    }
+
+    public get description(): string
+    {
+        return this._description;
+    }
+
+    public get hasUnseenItems(): boolean
+    {
+        return this._hasUnseenItems;
+    }
+
+    public set hasUnseenItems(flag: boolean)
+    {
+        this._hasUnseenItems = flag;
+    }
+
+    public get locked(): boolean
+    {
+        return this._locked;
+    }
+
+    public set locked(flag: boolean)
+    {
+        this._locked = flag;
+    }
+
+    public get selected(): boolean
+    {
+        return this._selected;
+    }
+
+    public set selected(flag: boolean)
+    {
+        this._selected = flag;
+    }
+
+    public get isWallItem(): boolean
+    {
+        const item = this.getItemByIndex(0);
+
+        return (item ? item.isWallItem : false);
+    }
+
+    public get isGroupable(): boolean
+    {
+        const item = this.getItemByIndex(0);
+
+        return (item ? item.isGroupable : false);
+    }
+
+    public get items(): FurnitureItem[]
+    {
+        return this._items;
+    }
+}

src/views/inventory/utils/IFurnitureItem.ts

@@ -0,0 +1,17 @@
+import { IObjectData } from 'nitro-renderer';
+
+export interface IFurnitureItem
+{
+    id: number;
+    ref: number;
+    type: number;
+    stuffData: IObjectData;
+    extra: number;
+    category: number;
+    _Str_16260: boolean;
+    isTradable: boolean;
+    isGroupable: boolean;
+    sellable: boolean;
+    locked: boolean;
+    isWallItem: boolean;
+}

src/views/inventory/views/InventoryViews.scss

@@ -0,0 +1 @@
+@import './furniture/InventoryFurnitureView';

src/views/inventory/views/furniture/InventoryFurnitureView.scss

@@ -0,0 +1,7 @@
+.item-container {
+    height: 220px;
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+@import './item/InventoryFurnitureItemView';

src/views/inventory/views/furniture/InventoryFurnitureView.tsx

@@ -0,0 +1,117 @@
+import { FurnitureListComposer, RoomObjectVariable, Vector3d } from 'nitro-renderer';
+import { FC, useEffect } from 'react';
+import { GetRoomEngine } from '../../../../api';
+import { SendMessageHook } from '../../../../hooks/messages/message-event';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { RoomPreviewerView } from '../../../room-previewer/RoomPreviewerView';
+import { FurniCategory } from '../../utils/FurniCategory';
+import { attemptItemPlacement } from '../../utils/FurnitureUtilities';
+import { InventoryFurnitureViewProps } from './InventoryFurnitureView.types';
+import { InventoryFurnitureItemView } from './item/InventoryFurnitureItemView';
+
+export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
+{
+    const { needsFurniUpdate = false, setNeedsFurniUpdate = null, groupItem = null, setGroupItem = null, groupItems = null, roomSession = null, roomPreviewer = null } = props;
+
+    console.log(props);
+
+    useEffect(() =>
+    {
+        if(needsFurniUpdate)
+        {
+            setNeedsFurniUpdate(false);
+
+            SendMessageHook(new FurnitureListComposer());
+        }
+        else
+        {
+            setGroupItem(prevValue =>
+                {
+                    if(!groupItems || !groupItems.length) return null;
+                    
+                    let index = 0;
+
+                    if(prevValue)
+                    {
+                        const foundIndex = groupItems.indexOf(prevValue);
+
+                        if(foundIndex > -1) index = foundIndex;
+                    }
+
+                    return groupItems[index];
+                });
+        }
+
+    }, [ needsFurniUpdate, setNeedsFurniUpdate, groupItems, setGroupItem ]);
+
+    useEffect(() =>
+    {
+        if(!groupItem || !roomPreviewer) return;
+
+        const furnitureItem = groupItem.getLastItem();
+
+        if(!furnitureItem) return;
+
+        const roomEngine = GetRoomEngine();
+
+        let wallType        = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_WALL_TYPE);
+        let floorType       = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_FLOOR_TYPE);
+        let landscapeType   = roomEngine.getRoomInstanceVariable<string>(roomEngine.activeRoomId, RoomObjectVariable.ROOM_LANDSCAPE_TYPE);
+
+        wallType        = (wallType && wallType.length) ? wallType : '101';
+        floorType       = (floorType && floorType.length) ? floorType : '101';
+        landscapeType   = (landscapeType && landscapeType.length) ? landscapeType : '1.1';
+
+        roomPreviewer.reset(false);
+        roomPreviewer.updateObjectRoom(floorType, wallType, landscapeType);
+        roomPreviewer.updateRoomWallsAndFloorVisibility(true, true);
+
+        if((furnitureItem.category === FurniCategory._Str_3639) || (furnitureItem.category === FurniCategory._Str_3683) || (furnitureItem.category === FurniCategory._Str_3432))
+        {
+            floorType       = ((furnitureItem.category === FurniCategory._Str_3683) ? groupItem.stuffData.getLegacyString() : floorType);
+            wallType        = ((furnitureItem.category === FurniCategory._Str_3639) ? groupItem.stuffData.getLegacyString() : wallType);
+            landscapeType   = ((furnitureItem.category === FurniCategory._Str_3432) ? groupItem.stuffData.getLegacyString() : landscapeType);
+
+            roomPreviewer.updateObjectRoom(floorType, wallType, landscapeType);
+
+            if(furnitureItem.category === FurniCategory._Str_3432)
+            {
+                // insert a window if the type is landscape
+                //_local_19 = this._model.controller._Str_18225("ads_twi_windw", ProductTypeEnum.WALL);
+                //this._roomPreviewer._Str_12087(_local_19.id, new Vector3d(90, 0, 0), _local_19._Str_4558);
+            }
+        }
+        else
+        {
+            if(groupItem.isWallItem)
+            {
+                roomPreviewer.addWallItemIntoRoom(groupItem.type, new Vector3d(90), furnitureItem.stuffData.getLegacyString());
+            }
+            else
+            {
+                roomPreviewer.addFurnitureIntoRoom(groupItem.type, new Vector3d(90), groupItem.stuffData, (furnitureItem.extra.toString()));
+            }
+        }
+    }, [ roomPreviewer, groupItem ]);
+
+    return (
+        <div className="row h-100">
+            <div className="col col-7">
+                <div className="row row-cols-5 g-0 item-container">
+                    { groupItems && groupItems.length && groupItems.map((item, index) =>
+                        {
+                            return <InventoryFurnitureItemView key={ index } groupItem={ item } isActive={ groupItem === item } setGroupItem={ setGroupItem } />
+                        })
+                    }
+                </div>
+            </div>
+            <div className="d-flex flex-column col col-5 justify-space-between">
+                <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 130 } />
+                { groupItem && <div className="flex-grow-1 py-2">
+                    <p className="fs-6 text-black">{ groupItem.name }</p>
+                    { !!roomSession && <button type="button" className="btn btn-success" onClick={ event => attemptItemPlacement(groupItem) }>{ LocalizeText('inventory.furni.placetoroom') }</button> }
+                </div> }
+            </div>
+        </div>
+    );
+}

src/views/inventory/views/furniture/InventoryFurnitureView.types.ts

@@ -0,0 +1,14 @@
+import { IRoomSession, RoomPreviewer } from 'nitro-renderer';
+import { Dispatch, SetStateAction } from 'react';
+import { GroupItem } from '../../utils/GroupItem';
+
+export interface InventoryFurnitureViewProps
+{
+    needsFurniUpdate: boolean;
+    setNeedsFurniUpdate: Dispatch<SetStateAction<boolean>>;
+    groupItem: GroupItem;
+    setGroupItem: Dispatch<SetStateAction<GroupItem>>;
+    groupItems: GroupItem[];
+    roomSession: IRoomSession;
+    roomPreviewer: RoomPreviewer;
+}

src/views/inventory/views/furniture/item/InventoryFurnitureItemView.scss

@@ -0,0 +1,19 @@
+.inventory-furniture-item {
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 50px;
+    max-height: 50px;
+    border-color: $muted !important;
+    background-color: #CDD3D9;
+
+    &.active {
+        border-color: $white !important;
+        background-color: #ECECEC;
+    }
+
+    .badge {
+        top: 3px;
+        right: 3px;
+        font-size: 10px;
+    }
+}

src/views/inventory/views/furniture/item/InventoryFurnitureItemView.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { InventoryFurnitureItemViewProps } from './InventoryFurnitureItemView.types';
+
+export const InventoryFurnitureItemView: FC<InventoryFurnitureItemViewProps> = props =>
+{
+    const { groupItem = null, isActive = false, setGroupItem = null } = props;
+
+    const imageUrl = `url(${ groupItem.iconUrl })`;
+
+    return (
+        <div className="col pe-1 pb-1">
+            <div className={ 'position-relative border border-2 rounded inventory-furniture-item cursor-pointer ' + (isActive && 'active') } style={ { backgroundImage: imageUrl }} onClick={ event => setGroupItem(groupItem) }>
+                <span className="position-absolute badge border bg-secondary p-1">{ groupItem.getUnlockedCount() }</span>
+            </div>
+        </div>
+    );
+}

src/views/inventory/views/furniture/item/InventoryFurnitureItemView.types.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+import { GroupItem } from '../../../utils/GroupItem';
+
+export interface InventoryFurnitureItemViewProps
+{
+    groupItem: GroupItem;
+    isActive: boolean;
+    setGroupItem: Dispatch<SetStateAction<GroupItem>>;
+}