Room Widget: camera

src/events/index.ts

@@ -3,3 +3,4 @@ export * from './catalog';
 export * from './friend-list';
 export * from './inventory';
 export * from './navigator';
+export * from './room-widgets';

src/events/room-widgets/camera/RoomWidgetCameraEvent.ts

@@ -0,0 +1,13 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class RoomWidgetCameraEvent extends NitroEvent
+{
+    public static SHOW_CAMERA: string = 'NE_SHOW_CAMERA';
+    public static HIDE_CAMERA: string = 'NE_HIDE_CAMERA';
+    public static TOGGLE_CAMERA: string = 'NE_TOGGLE_CAMERA';
+
+    constructor(type: string)
+    {
+        super(type);
+    }
+}

src/events/room-widgets/camera/index.ts

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

src/events/room-widgets/index.ts

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

src/views/room/RoomView.tsx

@@ -7,6 +7,7 @@ import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
 import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
 import { RoomViewProps } from './RoomView.types';
 import { AvatarInfoWidgetView } from './widgets/avatar-info/AvatarInfoWidgetView';
+import { CameraWidgetView } from './widgets/camera/CameraWidgetView';
 import { ChatInputView } from './widgets/chat-input/ChatInputView';
 import { ChatWidgetView } from './widgets/chat/ChatWidgetView';
 import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView';
@@ -92,6 +93,7 @@ export function RoomView(props: RoomViewProps): JSX.Element
                 createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) &&
                 <>
                     <AvatarInfoWidgetView events={ events } />
+                    <CameraWidgetView />
                     <ChatWidgetView />
                     <ChatInputView />
                     <FurnitureWidgetsView events={ events } />

src/views/room/widgets/RoomWidgets.scss

@@ -1,3 +1,4 @@
+@import './camera/CameraWidgetView';
 @import './chat/ChatWidgetView';
 @import './chat-input/ChatInputView';
 @import './furniture/FurnitureWidgets';

src/views/room/widgets/camera/CameraWidgetView.scss

@@ -0,0 +1,24 @@
+.nitro-camera {
+    width: 340px;
+    height: 462px;
+
+    background-image: url('../../../../assets/images/room-widgets/camera-widget/camera-spritesheet.png');
+
+    .camera-button {
+        width: 94px;
+        height: 94px;
+        cursor: pointer;
+        margin-top: 334px;
+
+        background-image: url('../../../../assets/images/room-widgets/camera-widget/camera-spritesheet.png');
+        background-position: -340px 0px;
+
+        &:hover {
+            background-position: -340px -94px;
+        }
+
+        &:active {
+            background-position: -340px -188px;
+        }
+    }
+}

src/views/room/widgets/camera/CameraWidgetView.tsx

@@ -0,0 +1,57 @@
+import { FC, useCallback, useState } from 'react';
+import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/RoomWidgetCameraEvent';
+import { DraggableWindow } from '../../../../hooks/draggable-window/DraggableWindow';
+import { useUiEvent } from '../../../../hooks/events/ui/ui-event';
+import { CameraWidgetViewProps } from './CameraWidgetView.types';
+
+export const CameraWidgetView: FC<CameraWidgetViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+
+    const onRoomWidgetCameraEvent = useCallback((event: RoomWidgetCameraEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomWidgetCameraEvent.SHOW_CAMERA:
+                setIsVisible(true);
+                return;
+            case RoomWidgetCameraEvent.HIDE_CAMERA:
+                setIsVisible(false);
+                return;   
+            case RoomWidgetCameraEvent.TOGGLE_CAMERA:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(RoomWidgetCameraEvent.SHOW_CAMERA, onRoomWidgetCameraEvent);
+    useUiEvent(RoomWidgetCameraEvent.HIDE_CAMERA, onRoomWidgetCameraEvent);
+    useUiEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA, onRoomWidgetCameraEvent);
+
+    const processAction = useCallback((type: string, value: string = null) =>
+    {
+        switch(type)
+        {
+            case 'close':
+                setIsVisible(false);
+                return;
+        }
+    }, []);
+    
+    if(!isVisible) return null;
+
+    return (
+        <DraggableWindow handle=".nitro-camera">
+            <div className="nitro-camera">
+                <div className="overflow-auto">
+                    <div className="cursor-pointer float-end me-3 mt-2" onClick={ event => processAction('close') }>
+                        <i className="fas fa-times"></i>
+                    </div>
+                </div>
+                <div className="d-flex justify-content-center">
+                    <div className="camera-button"></div>
+                </div>
+            </div>
+        </DraggableWindow>
+    );
+}

src/views/room/widgets/camera/CameraWidgetView.types.ts

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

src/views/toolbar/ToolbarView.tsx

@@ -2,6 +2,7 @@ import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/i
 import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser';
 import { FC, useCallback, useState } from 'react';
 import { AvatarEditorEvent, CatalogEvent, FriendListEvent, InventoryEvent, NavigatorEvent } from '../../events';
+import { RoomWidgetCameraEvent } from '../../events/room-widgets/camera/RoomWidgetCameraEvent';
 import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { TransitionAnimation } from '../../transitions/TransitionAnimation';
@@ -44,6 +45,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
             case ToolbarViewItems.FRIEND_LIST_ITEM:
                 dispatchUiEvent(new CatalogEvent(FriendListEvent.TOGGLE_FRIEND_LIST));
                 return;
+            case ToolbarViewItems.CAMERA_ITEM:
+                dispatchUiEvent(new RoomWidgetCameraEvent(RoomWidgetCameraEvent.TOGGLE_CAMERA));
+                return;
             case ToolbarViewItems.CLOTHING_ITEM:
                 dispatchUiEvent(new AvatarEditorEvent(AvatarEditorEvent.TOGGLE_EDITOR));
                 setMeExpanded(false);
@@ -101,6 +105,10 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                         { (unseenFriendListCount > 0) && (
                             <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
                     </div>
+                    { isInRoom && (
+                         <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
+                         <i className="icon icon-camera"></i>
+                    </div>) }
                 </div>
                 <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
             </div>

src/views/toolbar/ToolbarView.types.ts

@@ -10,4 +10,5 @@ export class ToolbarViewItems
     public static CATALOG_ITEM: string      = 'TVI_CATALOG_ITEM';
     public static FRIEND_LIST_ITEM: string  = 'TVI_FRIEND_LIST_ITEM';
     public static CLOTHING_ITEM: string     = 'TVI_CLOTHING_ITEM';
+    public static CAMERA_ITEM: string       = 'TVI_CAMERA_ITEM';
 }