Add catalog component

src/events/catalog/CatalogEvent.ts

@@ -0,0 +1,7 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class CatalogEvent extends NitroEvent
+{
+    public static SHOW_CATALOG: string = 'IE_SHOW_CATALOG';
+    public static TOGGLE_CATALOG: string = 'IE_TOGGLE_CATALOG';
+}

src/events/catalog/index.ts

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

src/events/index.ts

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

src/views/Styles.scss

@@ -1,4 +1,5 @@
 @import './avatar-image/AvatarImage';
+@import './catalog/CatalogView';
 @import './hotel-view/HotelView';
 @import './inventory/InventoryView';
 @import './loading/LoadingView';

src/views/catalog/CatalogMessageHandler.tsx

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

src/views/catalog/CatalogMessageHandler.types.ts

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

src/views/catalog/CatalogView.scss

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

src/views/catalog/CatalogView.tsx

@@ -0,0 +1,52 @@
+import { FC, useCallback, useState } from 'react';
+import { CatalogEvent } from '../../events';
+import { DraggableWindow } from '../../hooks/draggable-window/DraggableWindow';
+import { useUiEvent } from '../../hooks/events/ui/ui-event';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { CatalogMessageHandler } from './CatalogMessageHandler';
+import { CatalogViewProps } from './CatalogView.types';
+
+export const CatalogView: FC<CatalogViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+
+    const onCatalogEvent = useCallback((event: CatalogEvent) =>
+    {
+        switch(event.type)
+        {
+            case CatalogEvent.SHOW_CATALOG:
+                setIsVisible(true);
+                return;
+            case CatalogEvent.TOGGLE_CATALOG:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(CatalogEvent.SHOW_CATALOG, onCatalogEvent);
+    useUiEvent(CatalogEvent.TOGGLE_CATALOG, onCatalogEvent);
+
+    function hideCatalog(): void
+    {
+        setIsVisible(false);
+    }
+
+    return (
+        <>
+            <CatalogMessageHandler  />
+            { isVisible && <DraggableWindow handle=".drag-handler">
+                <div className="nitro-catalog 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('catalog.title') }</div>
+                        <button type="button" className="close" onClick={ hideCatalog }>
+                            <i className="fas fa-times"></i>
+                        </button>
+                    </div>
+                    <div className="d-flex p-3">
+                        content
+                    </div>
+                </div>
+            </DraggableWindow> }
+        </>
+    );
+}

src/views/catalog/CatalogView.types.ts

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

src/views/main/MainView.tsx

@@ -2,6 +2,7 @@ import { Nitro, RoomSessionEvent } from 'nitro-renderer';
 import { useCallback, useEffect, useState } from 'react';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { TransitionAnimation } from '../../transitions/TransitionAnimation';
+import { CatalogView } from '../catalog/CatalogView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { NavigatorView } from '../navigator/NavigatorView';
@@ -47,6 +48,7 @@ export function MainView(props: MainViewProps): JSX.Element
             </TransitionAnimation>
             <NavigatorView />
             <InventoryView />
+            <CatalogView />
             <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 { InventoryEvent, NavigatorEvent } from '../../events';
+import { CatalogEvent, 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';
@@ -36,6 +36,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
             case ToolbarViewItems.INVENTORY_ITEM:
                 dispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY));
                 return;
+            case ToolbarViewItems.CATALOG_ITEM:
+                dispatchUiEvent(new CatalogEvent(CatalogEvent.TOGGLE_CATALOG));
+                return;
         }
     }
 
@@ -56,7 +59,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                     <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
                         <i className="icon icon-rooms"></i>
                     </li>
-                    <li className="list-group-item">
+                    <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.CATALOG_ITEM) }>
                         <i className="icon icon-catalog"></i>
                     </li>
                     <li className="list-group-item" onClick={ event => handleToolbarItemClick(event, ToolbarViewItems.INVENTORY_ITEM) }>

src/views/toolbar/ToolbarView.types.ts

@@ -7,4 +7,5 @@ export class ToolbarViewItems
 {
     public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM';
     public static INVENTORY_ITEM: string = 'TVI_INVENTORY_ITEM';
+    public static CATALOG_ITEM: string = 'TVI_CATALOG_ITEM';
 }