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 (
-
+
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';
}