diff --git a/src/assets/images/camera/base.png b/src/assets/images/camera/base.png deleted file mode 100644 index d6cf994d..00000000 Binary files a/src/assets/images/camera/base.png and /dev/null differ diff --git a/src/assets/images/camera/hud.png b/src/assets/images/camera/hud.png deleted file mode 100644 index ab6a9b24..00000000 Binary files a/src/assets/images/camera/hud.png and /dev/null differ diff --git a/src/assets/images/camera/snap.png b/src/assets/images/camera/snap.png deleted file mode 100644 index c3f57a04..00000000 Binary files a/src/assets/images/camera/snap.png and /dev/null differ diff --git a/src/assets/images/room-widgets/camera-widget/camera-spritesheet.png b/src/assets/images/room-widgets/camera-widget/camera-spritesheet.png new file mode 100644 index 00000000..3d3f4184 Binary files /dev/null and b/src/assets/images/room-widgets/camera-widget/camera-spritesheet.png differ diff --git a/src/assets/images/camera/selected.png b/src/assets/images/room-widgets/camera-widget/selected.png similarity index 100% rename from src/assets/images/camera/selected.png rename to src/assets/images/room-widgets/camera-widget/selected.png diff --git a/src/assets/images/camera/selector.png b/src/assets/images/room-widgets/camera-widget/selector.png similarity index 100% rename from src/assets/images/camera/selector.png rename to src/assets/images/room-widgets/camera-widget/selector.png diff --git a/src/events/index.ts b/src/events/index.ts index 81a2cdd4..70ffd6ca 100644 --- a/src/events/index.ts +++ b/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'; diff --git a/src/events/room-widgets/camera/RoomWidgetCameraEvent.ts b/src/events/room-widgets/camera/RoomWidgetCameraEvent.ts new file mode 100644 index 00000000..0eb6b4f0 --- /dev/null +++ b/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); + } +} diff --git a/src/events/room-widgets/camera/index.ts b/src/events/room-widgets/camera/index.ts new file mode 100644 index 00000000..a04e80d0 --- /dev/null +++ b/src/events/room-widgets/camera/index.ts @@ -0,0 +1 @@ +export * from './RoomWidgetCameraEvent'; diff --git a/src/events/room-widgets/index.ts b/src/events/room-widgets/index.ts new file mode 100644 index 00000000..5eeca25b --- /dev/null +++ b/src/events/room-widgets/index.ts @@ -0,0 +1 @@ +export * from './camera'; diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index 381caa1b..99019599 100644 --- a/src/views/room/RoomView.tsx +++ b/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)) && <> + diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss index 71970ddb..8b1fa8ca 100644 --- a/src/views/room/widgets/RoomWidgets.scss +++ b/src/views/room/widgets/RoomWidgets.scss @@ -1,3 +1,4 @@ +@import './camera/CameraWidgetView'; @import './chat/ChatWidgetView'; @import './chat-input/ChatInputView'; @import './furniture/FurnitureWidgets'; diff --git a/src/views/room/widgets/camera/CameraWidgetView.scss b/src/views/room/widgets/camera/CameraWidgetView.scss new file mode 100644 index 00000000..163f651b --- /dev/null +++ b/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; + } + } +} diff --git a/src/views/room/widgets/camera/CameraWidgetView.tsx b/src/views/room/widgets/camera/CameraWidgetView.tsx new file mode 100644 index 00000000..9b53b7a7 --- /dev/null +++ b/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 = 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 ( + + + + processAction('close') }> + + + + + + + + + ); +} diff --git a/src/views/room/widgets/camera/CameraWidgetView.types.ts b/src/views/room/widgets/camera/CameraWidgetView.types.ts new file mode 100644 index 00000000..e97e9b69 --- /dev/null +++ b/src/views/room/widgets/camera/CameraWidgetView.types.ts @@ -0,0 +1,2 @@ +export interface CameraWidgetViewProps +{} diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx index 6ab6a57e..fa8ccedb 100644 --- a/src/views/toolbar/ToolbarView.tsx +++ b/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 = 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 = props => { (unseenFriendListCount > 0) && ( { unseenFriendListCount }) } + { isInRoom && ( + handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }> + + ) } diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts index b0b97068..6c280e6c 100644 --- a/src/views/toolbar/ToolbarView.types.ts +++ b/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'; }