From 44e06a44b6b57ec00b2c01dc0593c5ab07cadecb Mon Sep 17 00:00:00 2001 From: Bill Date: Mon, 19 Apr 2021 12:34:31 -0400 Subject: [PATCH] Start navigator --- package-lock.json | 14 ++ package.json | 2 + public/configuration.json | 2 +- src/App.scss | 4 + src/App.tsx | 2 +- src/api/nitro/index.ts | 1 + src/api/nitro/room/index.ts | 7 + src/api/nitro/session/index.ts | 2 + src/events/index.ts | 1 + src/events/navigator/NavigatorEvent.ts | 7 + src/events/navigator/index.ts | 1 + .../draggable-window/DraggableWindow.tsx | 11 ++ .../DraggableWindow.types.tsx | 9 ++ src/hooks/events/nitro/main-event.tsx | 3 +- src/hooks/events/ui/ui-event.tsx | 14 ++ src/hooks/messages/message-event.tsx | 4 +- src/index.scss | 7 +- src/transitions/FadeTransition.types.ts | 2 +- src/utils/LocalizeText.ts | 6 + src/views/Styles.scss | 19 +-- src/views/main/MainView.scss | 4 + src/views/main/MainView.tsx | 8 +- src/views/navigator/NavigatorView.scss | 6 + src/views/navigator/NavigatorView.tsx | 127 ++++++++++++++++-- .../navigator/tabs/NavigatorTabsView.scss | 1 + .../navigator/tabs/NavigatorTabsView.tsx | 19 +++ .../navigator/tabs/NavigatorTabsView.types.ts | 8 ++ .../navigator/tabs/tab/NavigatorTabView.scss | 0 .../navigator/tabs/tab/NavigatorTabView.tsx | 18 +++ .../tabs/tab/NavigatorTabView.types.ts | 8 ++ src/views/purse/PurseView.scss | 6 +- src/views/purse/currency/CurrencyView.scss | 2 +- src/views/purse/currency/CurrencyView.tsx | 2 +- src/views/room-host/RoomHostView.scss | 3 + src/views/room-host/RoomHostView.tsx | 6 +- src/views/room/RoomView.scss | 12 ++ src/views/room/RoomView.tsx | 16 +-- .../furniture/FurnitureWidgetsView.tsx | 19 +++ .../furniture/FurnitureWidgetsView.types.ts | 6 + src/views/toolbar/ToolbarView.tsx | 22 ++- src/views/toolbar/ToolbarView.types.ts | 7 +- 41 files changed, 365 insertions(+), 53 deletions(-) create mode 100644 src/App.scss create mode 100644 src/api/nitro/room/index.ts create mode 100644 src/events/index.ts create mode 100644 src/events/navigator/NavigatorEvent.ts create mode 100644 src/events/navigator/index.ts create mode 100644 src/hooks/draggable-window/DraggableWindow.tsx create mode 100644 src/hooks/draggable-window/DraggableWindow.types.tsx create mode 100644 src/hooks/events/ui/ui-event.tsx create mode 100644 src/utils/LocalizeText.ts create mode 100644 src/views/navigator/tabs/NavigatorTabsView.scss create mode 100644 src/views/navigator/tabs/NavigatorTabsView.tsx create mode 100644 src/views/navigator/tabs/NavigatorTabsView.types.ts create mode 100644 src/views/navigator/tabs/tab/NavigatorTabView.scss create mode 100644 src/views/navigator/tabs/tab/NavigatorTabView.tsx create mode 100644 src/views/navigator/tabs/tab/NavigatorTabView.types.ts create mode 100644 src/views/room-host/RoomHostView.scss create mode 100644 src/views/room/widgets/furniture/FurnitureWidgetsView.tsx create mode 100644 src/views/room/widgets/furniture/FurnitureWidgetsView.types.ts diff --git a/package-lock.json b/package-lock.json index d59bbd6a..a46d9aea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4158,6 +4158,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -14579,6 +14584,15 @@ "scheduler": "^0.20.2" } }, + "react-draggable": { + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.3.tgz", + "integrity": "sha512-jV4TE59MBuWm7gb6Ns3Q1mxX8Azffb7oTtDtBgFkxRvhDp38YAARmRplrj0+XGkhOJB5XziArX+4HUUABtyZ0w==", + "requires": { + "classnames": "^2.2.5", + "prop-types": "^15.6.0" + } + }, "react-error-overlay": { "version": "6.0.9", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz", diff --git a/package.json b/package.json index 5e23e9d9..88479d16 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,13 @@ "@types/node": "^12.20.7", "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", + "classnames": "^2.3.1", "immutable": "^4.0.0-rc.12", "nitro-renderer": "file:../nitro-renderer", "node-sass": "^5.0.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-draggable": "^4.4.3", "react-redux": "^7.2.3", "react-scripts": "4.0.3", "react-transition-group": "^4.4.1", diff --git a/public/configuration.json b/public/configuration.json index 631cb7cd..7f4af925 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -61,7 +61,7 @@ 5, 101 ], - "communication.packet.log": false, + "communication.packet.log": true, "communication.pong.manually": true, "communication.pong.interval.ms": 20000, "avatar.mandatory.libraries": [ diff --git a/src/App.scss b/src/App.scss new file mode 100644 index 00000000..22a07076 --- /dev/null +++ b/src/App.scss @@ -0,0 +1,4 @@ +.nitro-app { + width: 100%; + height: 100%; +} diff --git a/src/App.tsx b/src/App.tsx index 79ee9e1e..b64c5b54 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -123,7 +123,7 @@ export function App(): JSX.Element } return ( -
+
{ (!isReady || isError) && } { (isReady && !isError) && }
diff --git a/src/api/nitro/index.ts b/src/api/nitro/index.ts index 1ae27f41..a5535a1c 100644 --- a/src/api/nitro/index.ts +++ b/src/api/nitro/index.ts @@ -1 +1,2 @@ +export * from './room'; export * from './session'; diff --git a/src/api/nitro/room/index.ts b/src/api/nitro/room/index.ts new file mode 100644 index 00000000..c0d76ff2 --- /dev/null +++ b/src/api/nitro/room/index.ts @@ -0,0 +1,7 @@ +export * from './DispatchMouseEvent'; +export * from './DispatchResizeEvent'; +export * from './DispatchTouchEvent'; +export * from './GetRoomEngine'; +export * from './InitializeRoomInstanceRenderingCanvas'; +export * from './ProcessRoomObjectOperation'; +export * from './SetActiveRoomId'; diff --git a/src/api/nitro/session/index.ts b/src/api/nitro/session/index.ts index a586da1e..082222e7 100644 --- a/src/api/nitro/session/index.ts +++ b/src/api/nitro/session/index.ts @@ -1,2 +1,4 @@ +export * from './GetRoomSession'; export * from './GetRoomSessionManager'; export * from './GetSessionDataManager'; +export * from './StartRoomSession'; diff --git a/src/events/index.ts b/src/events/index.ts new file mode 100644 index 00000000..8716d601 --- /dev/null +++ b/src/events/index.ts @@ -0,0 +1 @@ +export * from './navigator'; diff --git a/src/events/navigator/NavigatorEvent.ts b/src/events/navigator/NavigatorEvent.ts new file mode 100644 index 00000000..9fc1a444 --- /dev/null +++ b/src/events/navigator/NavigatorEvent.ts @@ -0,0 +1,7 @@ +import { NitroEvent } from 'nitro-renderer'; + +export class NavigatorEvent extends NitroEvent +{ + public static SHOW_NAVIGATOR: string = 'NE_SHOW_NAVIGATOR'; + public static TOGGLE_NAVIGATOR: string = 'NE_TOGGLE_NAVIGATOR'; +} diff --git a/src/events/navigator/index.ts b/src/events/navigator/index.ts new file mode 100644 index 00000000..c2e7371c --- /dev/null +++ b/src/events/navigator/index.ts @@ -0,0 +1 @@ +export * from './NavigatorEvent'; diff --git a/src/hooks/draggable-window/DraggableWindow.tsx b/src/hooks/draggable-window/DraggableWindow.tsx new file mode 100644 index 00000000..20c65643 --- /dev/null +++ b/src/hooks/draggable-window/DraggableWindow.tsx @@ -0,0 +1,11 @@ +import Draggable from 'react-draggable'; +import { DraggableWindowProps } from './DraggableWindow.types'; + +export function DraggableWindow(props: DraggableWindowProps): JSX.Element +{ + return ( + + { props.children } + + ); +} diff --git a/src/hooks/draggable-window/DraggableWindow.types.tsx b/src/hooks/draggable-window/DraggableWindow.types.tsx new file mode 100644 index 00000000..1ec07457 --- /dev/null +++ b/src/hooks/draggable-window/DraggableWindow.types.tsx @@ -0,0 +1,9 @@ +import { ReactNode } from 'react'; +import { DraggableProps } from 'react-draggable'; + +export interface DraggableWindowProps +{ + handle: string; + draggableOptions?: Partial; + children?: ReactNode; +} diff --git a/src/hooks/events/nitro/main-event.tsx b/src/hooks/events/nitro/main-event.tsx index 1e938eee..da4ef70c 100644 --- a/src/hooks/events/nitro/main-event.tsx +++ b/src/hooks/events/nitro/main-event.tsx @@ -1,5 +1,4 @@ -import { NitroEvent } from 'nitro-renderer'; -import { Nitro } from 'nitro-renderer/src/nitro/Nitro'; +import { Nitro, NitroEvent } from 'nitro-renderer'; import { CreateEventDispatcherHook, DispatchEventHook } from '../event-dispatcher.base'; export function useMainEvent(type: string, handler: (event: NitroEvent) => void): void diff --git a/src/hooks/events/ui/ui-event.tsx b/src/hooks/events/ui/ui-event.tsx new file mode 100644 index 00000000..582da392 --- /dev/null +++ b/src/hooks/events/ui/ui-event.tsx @@ -0,0 +1,14 @@ +import { EventDispatcher, IEventDispatcher, NitroEvent } from 'nitro-renderer'; +import { CreateEventDispatcherHook, DispatchEventHook } from '../event-dispatcher.base'; + +const uiEventDispatcher: IEventDispatcher = new EventDispatcher(); + +export function useUiEvent(type: string, handler: (event: NitroEvent) => void): void +{ + CreateEventDispatcherHook(type, uiEventDispatcher, handler); +} + +export function dispatchUiEvent(event: NitroEvent): void +{ + DispatchEventHook(uiEventDispatcher, event); +} diff --git a/src/hooks/messages/message-event.tsx b/src/hooks/messages/message-event.tsx index b1d1b947..e632dcc1 100644 --- a/src/hooks/messages/message-event.tsx +++ b/src/hooks/messages/message-event.tsx @@ -6,13 +6,15 @@ export function CreateMessageHook(event: IMessageEvent): void { useEffect(() => { + console.log('register', event); Nitro.instance.communication.registerMessageEvent(event); return () => { + console.log('unregister', event); Nitro.instance.communication.removeMessageEvent(event); } - }); + }, []); } export function SendMessageHook(event: IMessageComposer): void diff --git a/src/index.scss b/src/index.scss index 8e16a8b2..22f09f24 100644 --- a/src/index.scss +++ b/src/index.scss @@ -26,6 +26,7 @@ $infostand-zindex: 30; $chat-zindex: 20; $highscore-zindex: 19; -@import './transitions/TransitionStyles.scss'; -@import './utils/Styles.scss'; -@import './views/Styles.scss'; +@import './transitions/TransitionStyles'; +@import './utils/Styles'; +@import './App'; +@import './views/Styles'; diff --git a/src/transitions/FadeTransition.types.ts b/src/transitions/FadeTransition.types.ts index 6a9ad9a3..8d1c79d5 100644 --- a/src/transitions/FadeTransition.types.ts +++ b/src/transitions/FadeTransition.types.ts @@ -4,5 +4,5 @@ export interface FadeTransitionProps { inProp: boolean; timeout?: number; - children?: ReactNode + children?: ReactNode; } diff --git a/src/utils/LocalizeText.ts b/src/utils/LocalizeText.ts new file mode 100644 index 00000000..defa078f --- /dev/null +++ b/src/utils/LocalizeText.ts @@ -0,0 +1,6 @@ +import { Nitro } from 'nitro-renderer'; + +export function LocalizeText(key: string, parameters: string[] = null, replacements: string[] = null): string +{ + return Nitro.instance.getLocalizationWithParameters(key, parameters, replacements); +} diff --git a/src/views/Styles.scss b/src/views/Styles.scss index ae7b1f72..a10098a7 100644 --- a/src/views/Styles.scss +++ b/src/views/Styles.scss @@ -1,9 +1,10 @@ -@import './avatar-image/AvatarImage.scss'; -@import './hotel-view/HotelView.scss'; -@import './loading/LoadingView.scss'; -@import './main/MainView.scss'; -@import './navigator/NavigatorView.scss'; -@import './purse/PurseView.scss'; -@import './right-side/RightSideView.scss'; -@import './room/RoomView.scss'; -@import './toolbar/ToolbarView.scss'; +@import './avatar-image/AvatarImage'; +@import './hotel-view/HotelView'; +@import './loading/LoadingView'; +@import './main/MainView'; +@import './navigator/NavigatorView'; +@import './purse/PurseView'; +@import './right-side/RightSideView'; +@import './room/RoomView'; +@import './room-host/RoomHostView'; +@import './toolbar/ToolbarView'; diff --git a/src/views/main/MainView.scss b/src/views/main/MainView.scss index e69de29b..3ff415d7 100644 --- a/src/views/main/MainView.scss +++ b/src/views/main/MainView.scss @@ -0,0 +1,4 @@ +.nitro-main { + width: 100%; + height: 100%; +} diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index 4f0f291d..414514c3 100644 --- a/src/views/main/MainView.tsx +++ b/src/views/main/MainView.tsx @@ -38,14 +38,14 @@ export function MainView(props: MainViewProps): JSX.Element }, []); return ( -
+
{ landingViewVisible && } + + + - - -
); } diff --git a/src/views/navigator/NavigatorView.scss b/src/views/navigator/NavigatorView.scss index e69de29b..5e41c5d8 100644 --- a/src/views/navigator/NavigatorView.scss +++ b/src/views/navigator/NavigatorView.scss @@ -0,0 +1,6 @@ +.nitro-navigator { + width: 400px; + height: 400px; +} + +@import './tabs/NavigatorTabsView'; diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index 1df0fa24..ded365da 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -1,25 +1,55 @@ -import { RoomDataParser, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent } from 'nitro-renderer'; +import { NavigatorCategoriesComposer, NavigatorInitComposer, NavigatorMetadataEvent, NavigatorSearchComposer, NavigatorSettingsComposer, NavigatorTopLevelContext, RoomDataParser, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, RoomSessionEvent, UserInfoEvent } from 'nitro-renderer'; +import { MouseEvent, useCallback, useEffect, useState } from 'react'; import { GetRoomSessionManager, GetSessionDataManager } from '../../api'; +import { NavigatorEvent } 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 { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; +import { LocalizeText } from '../../utils/LocalizeText'; import { NavigatorViewProps } from './NavigatorView.types'; +import { NavigatorTabsView } from './tabs/NavigatorTabsView'; export function NavigatorView(props: NavigatorViewProps): JSX.Element { - const onRoomForwardEvent = (event: RoomForwardEvent) => + const [ isVisible, setIsVisible ] = useState(false); + const [ isLoaded, setIsLoaded ] = useState(false); + const [ isLoading, setIsLoading ] = useState(false); + const [ isSearching, setIsSearching ] = useState(false); + + const [ topLevelContexts, setTopLevelContexts ] = useState(null); + const [ topLevelContext, setTopLevelContext ] = useState(null); + + function hideNavigator(event: MouseEvent = null): void + { + if(event) event.preventDefault(); + + setIsVisible(false); + } + + const onUserInfoEvent = useCallback((event: UserInfoEvent) => + { + const parser = event.getParser(); + + SendMessageHook(new NavigatorCategoriesComposer()); + SendMessageHook(new NavigatorSettingsComposer()); + }, []); + + const onRoomForwardEvent = useCallback((event: RoomForwardEvent) => { const parser = event.getParser(); SendMessageHook(new RoomInfoComposer(parser.roomId, false, true)); - }; + }, []); - const onRoomInfoOwnerEvent = (event: RoomInfoOwnerEvent) => + const onRoomInfoOwnerEvent = useCallback((event: RoomInfoOwnerEvent) => { const parser = event.getParser(); SendMessageHook(new RoomInfoComposer(parser.roomId, true, false)); - }; + }, []); - const onRoomInfoEvent = (event: RoomInfoEvent) => + const onRoomInfoEvent = useCallback((event: RoomInfoEvent) => { const parser = event.getParser(); @@ -61,13 +91,94 @@ export function NavigatorView(props: NavigatorViewProps): JSX.Element // this._data.enteredGuestRoom = parser.data; // this._data.staffPick = parser.data.roomPicker; } - }; + }, []); + const onNavigatorMetadataEvent = useCallback((event: NavigatorMetadataEvent) => + { + const parser = event.getParser(); + + setTopLevelContexts(parser.topLevelContexts); + + if(parser.topLevelContexts.length > 0) setTopLevelContext(parser.topLevelContexts[0]); + + // clear search + }, []); + + const onNavigatorEvent = useCallback((event: NavigatorEvent) => + { + switch(event.type) + { + case NavigatorEvent.SHOW_NAVIGATOR: + setIsVisible(true); + return; + case NavigatorEvent.TOGGLE_NAVIGATOR: + setIsVisible(value => !value); + return; + } + }, []); + + const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => + { + switch(event.type) + { + case RoomSessionEvent.CREATED: + setIsVisible(false); + return; + } + }, []); + + const search = useCallback((value: string = null) => + { + if(!topLevelContext) return; + + sendSearch(topLevelContext.code, ''); + }, [ topLevelContext ]); + + function sendSearch(code: string, query: string): void + { + SendMessageHook(new NavigatorSearchComposer(code, query)); + } + + useEffect(() => + { + if(!isVisible) return; + + if(!isLoaded) + { + SendMessageHook(new NavigatorInitComposer()); + + setIsLoaded(true); + } + else + { + search(); + } + }, [ isVisible, isLoaded, search ]); + + useUiEvent(NavigatorEvent.SHOW_NAVIGATOR, onNavigatorEvent); + useUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent); + + useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent); + + CreateMessageHook(new UserInfoEvent(onUserInfoEvent)); CreateMessageHook(new RoomForwardEvent(onRoomForwardEvent)); CreateMessageHook(new RoomInfoOwnerEvent(onRoomInfoOwnerEvent)); CreateMessageHook(new RoomInfoEvent(onRoomInfoEvent)); + CreateMessageHook(new NavigatorMetadataEvent(onNavigatorMetadataEvent)); + + if(!isVisible) return null; return ( -
navigator
+ +
+
+
{ LocalizeText(isLoading ? 'navigator.title.is.busy' : 'navigator.title') }
+ +
+ +
+ ); } diff --git a/src/views/navigator/tabs/NavigatorTabsView.scss b/src/views/navigator/tabs/NavigatorTabsView.scss new file mode 100644 index 00000000..a47f8fc5 --- /dev/null +++ b/src/views/navigator/tabs/NavigatorTabsView.scss @@ -0,0 +1 @@ +@import './tab/NavigatorTabView'; diff --git a/src/views/navigator/tabs/NavigatorTabsView.tsx b/src/views/navigator/tabs/NavigatorTabsView.tsx new file mode 100644 index 00000000..5bd173a4 --- /dev/null +++ b/src/views/navigator/tabs/NavigatorTabsView.tsx @@ -0,0 +1,19 @@ +import { NavigatorTabsViewProps } from './NavigatorTabsView.types'; +import { NavigatorTabView } from './tab/NavigatorTabView'; + +export function NavigatorTabsView(props: NavigatorTabsViewProps): JSX.Element +{ + const { topLevelContext = null, topLevelContexts = null, setTopLevelContext = null } = props; + + return ( +
+ { topLevelContexts && topLevelContexts.length && +
+ { topLevelContexts.map((context, index) => + { + return + }) } +
} +
+ ); +} diff --git a/src/views/navigator/tabs/NavigatorTabsView.types.ts b/src/views/navigator/tabs/NavigatorTabsView.types.ts new file mode 100644 index 00000000..6742d6c7 --- /dev/null +++ b/src/views/navigator/tabs/NavigatorTabsView.types.ts @@ -0,0 +1,8 @@ +import { NavigatorTopLevelContext } from 'nitro-renderer'; + +export interface NavigatorTabsViewProps +{ + topLevelContext: NavigatorTopLevelContext; + topLevelContexts: NavigatorTopLevelContext[]; + setTopLevelContext: (context: NavigatorTopLevelContext) => void; +} diff --git a/src/views/navigator/tabs/tab/NavigatorTabView.scss b/src/views/navigator/tabs/tab/NavigatorTabView.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/views/navigator/tabs/tab/NavigatorTabView.tsx b/src/views/navigator/tabs/tab/NavigatorTabView.tsx new file mode 100644 index 00000000..8ff59bce --- /dev/null +++ b/src/views/navigator/tabs/tab/NavigatorTabView.tsx @@ -0,0 +1,18 @@ +import classNames from 'classnames'; +import { MouseEvent } from 'react'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { NavigatorTabViewProps } from './NavigatorTabView.types'; + +export function NavigatorTabView(props: NavigatorTabViewProps): JSX.Element +{ + const { context = null, isActive = false, setTopLevelContext = null } = props; + + function onClick(event: MouseEvent): void + { + setTopLevelContext(context); + } + + return ( + + ); +} diff --git a/src/views/navigator/tabs/tab/NavigatorTabView.types.ts b/src/views/navigator/tabs/tab/NavigatorTabView.types.ts new file mode 100644 index 00000000..5a59dad7 --- /dev/null +++ b/src/views/navigator/tabs/tab/NavigatorTabView.types.ts @@ -0,0 +1,8 @@ +import { NavigatorTopLevelContext } from 'nitro-renderer'; + +export interface NavigatorTabViewProps +{ + context: NavigatorTopLevelContext; + isActive?: boolean; + setTopLevelContext: (context: NavigatorTopLevelContext) => void; +} diff --git a/src/views/purse/PurseView.scss b/src/views/purse/PurseView.scss index 7d2866f3..aec49b57 100644 --- a/src/views/purse/PurseView.scss +++ b/src/views/purse/PurseView.scss @@ -1 +1,5 @@ -@import './currency/CurrencyView.scss'; +.nitro-purse { + +} + +@import './currency/CurrencyView'; diff --git a/src/views/purse/currency/CurrencyView.scss b/src/views/purse/currency/CurrencyView.scss index d011dda4..29904fb2 100644 --- a/src/views/purse/currency/CurrencyView.scss +++ b/src/views/purse/currency/CurrencyView.scss @@ -1,4 +1,4 @@ -.nitro-purse-item { +.nitro-currency { flex: 46%; margin-right: 3px; diff --git a/src/views/purse/currency/CurrencyView.tsx b/src/views/purse/currency/CurrencyView.tsx index ca3613b8..f3f080d0 100644 --- a/src/views/purse/currency/CurrencyView.tsx +++ b/src/views/purse/currency/CurrencyView.tsx @@ -6,7 +6,7 @@ export function CurrencyView(props: CurrencyViewProps): JSX.Element const { type = -1, amount = 0 } = props; return ( -
+
{ amount }
diff --git a/src/views/room-host/RoomHostView.scss b/src/views/room-host/RoomHostView.scss new file mode 100644 index 00000000..7f2365ed --- /dev/null +++ b/src/views/room-host/RoomHostView.scss @@ -0,0 +1,3 @@ +.nitro-room-host { + +} diff --git a/src/views/room-host/RoomHostView.tsx b/src/views/room-host/RoomHostView.tsx index 14baa00a..a731a46f 100644 --- a/src/views/room-host/RoomHostView.tsx +++ b/src/views/room-host/RoomHostView.tsx @@ -31,11 +31,9 @@ export function RoomHostView(props: RoomHostViewProps): JSX.Element case RoomEngineEvent.INITIALIZED: SetActiveRoomId(event.roomId); setRoomSession(session); - setEventDispatcher(new EventDispatcher()); return; case RoomEngineEvent.DISPOSED: setRoomSession(null); - setEventDispatcher(null); return; } }, []); @@ -118,10 +116,12 @@ export function RoomHostView(props: RoomHostViewProps): JSX.Element switch(event.type) { case RoomSessionEvent.CREATED: + setEventDispatcher(new EventDispatcher()); StartRoomSession(event.session); return; case RoomSessionEvent.ENDED: setRoomSession(null); + setEventDispatcher(null); return; } }, []); @@ -147,7 +147,7 @@ export function RoomHostView(props: RoomHostViewProps): JSX.Element useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent); return ( -
+
diff --git a/src/views/room/RoomView.scss b/src/views/room/RoomView.scss index e69de29b..47e3df21 100644 --- a/src/views/room/RoomView.scss +++ b/src/views/room/RoomView.scss @@ -0,0 +1,12 @@ +.nitro-room { + z-index: 0; + width: 100%; + height: 100%; + + .nitro-room-container { + + .client-canvas { + position: absolute; + } + } +} diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index 0129306a..34d9c921 100644 --- a/src/views/room/RoomView.tsx +++ b/src/views/room/RoomView.tsx @@ -6,10 +6,7 @@ import { WindowResizeEvent } from '../../api/nitro/room/DispatchResizeEvent'; import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent'; import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine'; import { RoomViewProps } from './RoomView.types'; -import { FurnitureHighScoreView } from './widgets/furniture/high-score/FurnitureHighScoreView'; -import { FurnitureMannequinView } from './widgets/furniture/mannequin/FurnitureMannequinView'; -import { FurniturePresentView } from './widgets/furniture/present/FurniturePresentView'; -import { FurnitureStickieView } from './widgets/furniture/stickie/FurnitureStickieView'; +import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView'; export function RoomView(props: RoomViewProps): JSX.Element { @@ -84,16 +81,11 @@ export function RoomView(props: RoomViewProps): JSX.Element if(!roomSession) return null; return ( -
- { roomSession &&
} +
+ { roomSession &&
} { roomSession && events && roomCanvas && createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) && -
- - - - -
} + }
); } diff --git a/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx new file mode 100644 index 00000000..4ca9389d --- /dev/null +++ b/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx @@ -0,0 +1,19 @@ +import { FurnitureWidgetsViewProps } from './FurnitureWidgetsView.types'; +import { FurnitureHighScoreView } from './high-score/FurnitureHighScoreView'; +import { FurnitureMannequinView } from './mannequin/FurnitureMannequinView'; +import { FurniturePresentView } from './present/FurniturePresentView'; +import { FurnitureStickieView } from './stickie/FurnitureStickieView'; + +export function FurnitureWidgetsView(props: FurnitureWidgetsViewProps): JSX.Element +{ + const { events } = props; + + return ( +
+ + + + +
+ ); +} diff --git a/src/views/room/widgets/furniture/FurnitureWidgetsView.types.ts b/src/views/room/widgets/furniture/FurnitureWidgetsView.types.ts new file mode 100644 index 00000000..618f7649 --- /dev/null +++ b/src/views/room/widgets/furniture/FurnitureWidgetsView.types.ts @@ -0,0 +1,6 @@ +import { FurnitureWidgetProps } from './FurnitureWidget.types'; + +export interface FurnitureWidgetsViewProps extends FurnitureWidgetProps +{ + +} diff --git a/src/views/toolbar/ToolbarView.tsx b/src/views/toolbar/ToolbarView.tsx index 7e92239a..dde4ccab 100644 --- a/src/views/toolbar/ToolbarView.tsx +++ b/src/views/toolbar/ToolbarView.tsx @@ -1,14 +1,16 @@ import { RoomInfoComposer } from 'nitro-renderer'; 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 { KeyboardEvent, useState } from 'react'; +import { KeyboardEvent, MouseEvent, useState } from 'react'; +import { NavigatorEvent } from '../../events'; +import { dispatchUiEvent } from '../../hooks/events/ui/ui-event'; import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; import { AvatarImageView } from '../avatar-image/AvatarImageView'; -import { ToolbarViewProps } from './ToolbarView.types'; +import { ToolbarViewItems, ToolbarViewProps } from './ToolbarView.types'; export function ToolbarView(props: ToolbarViewProps): JSX.Element { - const [ isInRoom, setIsInRoom ] = useState(false); + const { isInRoom } = props; const [ userInfo, setUserInfo ] = useState(null); @@ -34,6 +36,18 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element SendMessageHook(new RoomInfoComposer(parseInt(roomId), false, true)); } + function handleToolbarItemClick(event: MouseEvent, item: string): void + { + event.preventDefault(); + + switch(item) + { + case ToolbarViewItems.NAVIGATOR_ITEM: + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_NAVIGATOR)); + return; + } + } + CreateMessageHook(new UserInfoEvent(onUserInfoEvent)); return ( @@ -48,7 +62,7 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
    • ) } -
  • +
  • handleToolbarItemClick(event, ToolbarViewItems.NAVIGATOR_ITEM) }>
  • diff --git a/src/views/toolbar/ToolbarView.types.ts b/src/views/toolbar/ToolbarView.types.ts index c731d77c..810dfc05 100644 --- a/src/views/toolbar/ToolbarView.types.ts +++ b/src/views/toolbar/ToolbarView.types.ts @@ -1,4 +1,9 @@ export interface ToolbarViewProps { - + isInRoom: boolean; +} + +export class ToolbarViewItems +{ + public static NAVIGATOR_ITEM: string = 'TVI_NAVIGATOR_ITEM'; }