Add inventory component

src/events/index.ts

@@ -1 +1,2 @@
+export * from './inventory';
 export * from './navigator';

src/events/inventory/InventoryEvent.ts

@@ -0,0 +1,7 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class InventoryEvent extends NitroEvent
+{
+    public static SHOW_INVENTORY: string = 'IE_SHOW_INVENTORY';
+    public static TOGGLE_INVENTORY: string = 'IE_TOGGLE_INVENTORY';
+}

src/events/inventory/index.ts

@@ -0,0 +1 @@
+export * from './InventoryEvent';

src/views/Styles.scss

@@ -1,5 +1,6 @@
 @import './avatar-image/AvatarImage';
 @import './hotel-view/HotelView';
+@import './inventory/InventoryView';
 @import './loading/LoadingView';
 @import './main/MainView';
 @import './navigator/NavigatorView';

src/views/inventory/InventoryMessageHandler.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { InventoryMessageHandlerProps } from './InventoryMessageHandler.types';
+
+export const InventoryMessageHandler: FC<InventoryMessageHandlerProps> = props =>
+{
+    return (
+        <>
+        </>
+    );
+}

src/views/inventory/InventoryMessageHandler.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryMessageHandlerProps
+{
+    
+}

src/views/inventory/InventoryView.scss

@@ -0,0 +1,3 @@
+.nitro-inventory {
+    width: 450px;
+}

src/views/inventory/InventoryView.tsx

@@ -0,0 +1,52 @@
+import { FC, useCallback, useState } from 'react';
+import { InventoryEvent } from '../../events';
+import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { InventoryMessageHandler } from './InventoryMessageHandler';
+import { InventoryViewProps } from './InventoryView.types';
+
+export const InventoryView: FC<InventoryViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+
+    const onInventoryEvent = useCallback((event: InventoryEvent) =>
+    {
+        switch(event.type)
+        {
+            case InventoryEvent.SHOW_INVENTORY:
+                setIsVisible(true);
+                return;
+            case InventoryEvent.TOGGLE_INVENTORY:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
+    useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
+
+    function hideInventory(): void
+    {
+        setIsVisible(false);
+    }
+
+    return (
+        <>
+            <InventoryMessageHandler  />
+            { isVisible && <DraggableWindow handle=".drag-handler">
+                <div className="nitro-inventory d-flex flex-column bg-primary border border-black shadow rounded">
+                    <div className="drag-handler d-flex justify-content-between align-items-center px-3 pt-3">
+                        <div className="h6 m-0">{ LocalizeText('inventory.title') }</div>
+                        <button type="button" className="close" onClick={ hideInventory }>
+                            <i className="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div className="d-flex p-3">
+                        content
+                    </div>
+                </div>
+            </DraggableWindow> }
+        </>
+    );
+}

src/views/inventory/InventoryView.types.ts

@@ -0,0 +1,4 @@
+export interface InventoryViewProps
+{
+    
+}

src/views/main/MainView.tsx

@@ -3,6 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { TransitionAnimation } from '../../transitions/TransitionAnimation';
 import { HotelView } from '../hotel-view/HotelView';
+import { InventoryView } from '../inventory/InventoryView';
 import { NavigatorView } from '../navigator/NavigatorView';
 import { RightSideView } from '../right-side/RightSideView';
 import { RoomHostView } from '../room-host/RoomHostView';
@@ -45,6 +46,7 @@ export function MainView(props: MainViewProps): JSX.Element
                 <ToolbarView isInRoom={ !landingViewVisible } />
             </TransitionAnimation>
             <NavigatorView />
+            <InventoryView />
             <RightSideView />
         </div>
     );

src/views/toolbar/ToolbarView.tsx

@@ -1,7 +1,7 @@
 import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/incoming/user/data/UserInfoEvent';
 import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser';
 import { MouseEvent, useCallback, useState } from 'react';
-import { NavigatorEvent } from '../../events';
+import { InventoryEvent, NavigatorEvent } from '../../events';
 import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { AvatarImageView } from '../avatar-image/AvatarImageView';
@@ -33,6 +33,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
             case ToolbarViewItems.NAVIGATOR_ITEM:
                 dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_NAVIGATOR));
                 return;
+            case ToolbarViewItems.INVENTORY_ITEM:
+                dispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY));
+                return;
         }
     }
 
@@ -56,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                     <li className="list-group-item">
                         <i className="icon icon-catalog"></i>
                     </li>
-                    <li className="list-group-item">
+                    <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }>
                         <i className="icon icon-inventory"></i>
                         { (unseenInventoryCount > 0) && (
                             <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }

src/views/toolbar/ToolbarView.types.ts

@@ -6,4 +6,5 @@ export interface ToolbarViewProps
 export class ToolbarViewItems
 {
     public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM';
+    public static INVENTORY_ITEM: string = 'TVI_INVENTORY_ITEM';
 }