Update toolbar

package-lock.json

@@ -1824,6 +1824,25 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
+      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+    },
+    "@restart/context": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
+      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+    },
+    "@restart/hooks": {
+      "version": "0.3.26",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
+      "requires": {
+        "lodash": "^4.17.20",
+        "lodash-es": "^4.17.20"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@@ -2204,6 +2223,14 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
+      "requires": {
+        "classnames": "*"
+      }
+    },
     "@types/eslint": {
       "version": "7.2.9",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.9.tgz",
@@ -2249,6 +2276,11 @@
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
       "integrity": "sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA=="
     },
+    "@types/invariant": {
+      "version": "2.2.34",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.34.tgz",
+      "integrity": "sha512-lYUtmJ9BqUN688fGY1U1HZoWT1/Jrmgigx2loq4ZcJpICECm/Om3V314BxdzypO0u5PORKGMM6x0OXaljV1YFg=="
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz",
@@ -2357,7 +2389,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
       "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
-      "dev": true,
       "requires": {
         "@types/react": "*"
       }
@@ -2413,6 +2444,11 @@
         }
       }
     },
+    "@types/warning": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
+      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI="
+    },
     "@types/webpack": {
       "version": "4.41.27",
       "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.27.tgz",
@@ -7854,6 +7890,14 @@
         "side-channel": "^1.0.4"
       }
     },
+    "invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "ip": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -9995,6 +10039,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash._reinterpolate": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
@@ -14529,6 +14578,15 @@
         "react-is": "^16.8.1"
       }
     },
+    "prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "requires": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -14712,6 +14770,31 @@
         "whatwg-fetch": "^3.4.1"
       }
     },
+    "react-bootstrap": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
+      "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
+      "requires": {
+        "@babel/runtime": "^7.13.8",
+        "@restart/context": "^2.1.4",
+        "@restart/hooks": "^0.3.26",
+        "@types/classnames": "^2.2.10",
+        "@types/invariant": "^2.2.33",
+        "@types/prop-types": "^15.7.3",
+        "@types/react": ">=16.9.35",
+        "@types/react-transition-group": "^4.4.1",
+        "@types/warning": "^3.0.0",
+        "classnames": "^2.2.6",
+        "dom-helpers": "^5.1.2",
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "prop-types-extra": "^1.1.0",
+        "react-overlays": "^5.0.0",
+        "react-transition-group": "^4.4.1",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.4",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@@ -14847,6 +14930,26 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
+    "react-overlays": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-5.0.1.tgz",
+      "integrity": "sha512-plwUJieTBbLSrgvQ4OkkbTD/deXgxiJdNuKzo6n1RWE3OVnQIU5hffCGS/nvIuu6LpXFs2majbzaXY8rcUVdWA==",
+      "requires": {
+        "@babel/runtime": "^7.13.8",
+        "@popperjs/core": "^2.8.6",
+        "@restart/hooks": "^0.3.26",
+        "@types/warning": "^3.0.0",
+        "dom-helpers": "^5.2.0",
+        "prop-types": "^15.7.2",
+        "uncontrollable": "^7.2.1",
+        "warning": "^4.0.3"
+      }
+    },
     "react-redux": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.3.tgz",
@@ -17383,6 +17486,17 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
+    "uncontrollable": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "requires": {
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -17705,6 +17819,14 @@
         "makeerror": "1.0.x"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

package.json

@@ -16,6 +16,7 @@
     "nitro-renderer": "file:../nitro-renderer",
     "node-sass": "^5.0.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-redux": "^7.2.3",

src/api/nitro/room/DispatchTouchEvent.ts

@@ -7,6 +7,7 @@ let clickCount = 0;
 
 export function DispatchTouchEvent(roomId: number, canvasId: number, event: TouchEvent)
 {
+    console.log(event);
     let eventType = event.type;
 
     if(eventType === TouchEventType.TOUCH_END && !didMouseMove)

src/views/inventory/InventoryView.tsx

@@ -1,6 +1,8 @@
+import { RoomSessionEvent } from 'nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { InventoryEvent } 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 { LocalizeText } from '../../utils/LocalizeText';
 import { InventoryMessageHandler } from './InventoryMessageHandler';
@@ -26,6 +28,22 @@ export const InventoryView: FC<InventoryViewProps> = props =>
     useUiEvent(InventoryEvent.SHOW_INVENTORY, onInventoryEvent);
     useUiEvent(InventoryEvent.TOGGLE_INVENTORY, onInventoryEvent);
 
+    const onRoomSessionEvent = useCallback((event: RoomSessionEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomSessionEvent.CREATED:
+                //
+                return;
+            case RoomSessionEvent.ENDED:
+                setIsVisible(false);
+                return;
+        }
+    }, []);
+
+    useRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
+    useRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent);
+
     function hideInventory(): void
     {
         setIsVisible(false);

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 { TransitionAnimationTypes } from '../../transitions/TransitionAnimation.types';
 import { CatalogView } from '../catalog/CatalogView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
@@ -43,7 +44,7 @@ export function MainView(props: MainViewProps): JSX.Element
         <div className="nitro-main">
             { landingViewVisible && <HotelView /> }
             <RoomHostView />
-            <TransitionAnimation className="nitro-toolbar" type={ 'fadeUp' } inProp={ isReady } timeout={ 300 }>
+            <TransitionAnimation className="nitro-toolbar" type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isReady } timeout={ 300 }>
                 <ToolbarView isInRoom={ !landingViewVisible } />
             </TransitionAnimation>
             <NavigatorView />

src/views/room/RoomView.tsx

@@ -6,6 +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 { ChatInputView } from './widgets/chat-input/ChatInputView';
 import { ChatWidgetsView } from './widgets/chat/ChatWidgetsView';
 import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView';
 
@@ -87,6 +88,7 @@ export function RoomView(props: RoomViewProps): JSX.Element
             { roomSession && events && roomCanvas &&
                 createPortal(props.children, document.getElementById('room-view').appendChild(roomCanvas)) &&
                 <>
+                    <ChatInputView />
                     <FurnitureWidgetsView events={ events } />
                     <ChatWidgetsView />
                 </> }

src/views/room/widgets/Widgets.scss

@@ -1,2 +1,3 @@
 @import './chat/ChatWidgetsView';
+@import './chat-input/ChatInputView';
 @import './furniture/FurnitureWidgets';

src/views/room/widgets/chat-input/ChatInputView.tsx

@@ -1,10 +1,9 @@
-import { LocalizeText } from '../../../../../utils/LocalizeText';
+import { FC } from 'react';
-import { ChatFormWidgetViewProps } from './ChatFormWidgetView.types';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { ChatInputViewProps } from './ChatInputView.types';
 
-export function ChatFormWidgetView(props: ChatFormWidgetViewProps): JSX.Element
+export const ChatInputView: FC<ChatInputViewProps> = props =>
 {
-    const {} = props;
-
     return (
         <div className="nitro-chat-form fixed-bottom mb-4 d-flex justify-content-center">
             <div className="nitro-chat-form-input">

src/views/room/widgets/chat-input/ChatInputView.types.ts

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

src/views/room/widgets/chat/ChatWidgetsView.scss

@@ -1,5 +1,3 @@
 .nitro-chat-widget {
     pointer-events: none;
 }
-
-@import './form/ChatFormWidgetView';

src/views/room/widgets/chat/ChatWidgetsView.tsx

@@ -1,5 +1,4 @@
 import { ChatWidgetsViewProps } from './ChatWidgetsView.types';
-import { ChatFormWidgetView } from './form/ChatFormWidgetView';
 import { ChatMessagesWidgetView } from './messages/ChatMessagesWidgetView';
 
 export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
@@ -9,7 +8,6 @@ export function ChatWidgetsView(props: ChatWidgetsViewProps): JSX.Element
     return (
         <div className="nitro-chat-widget">
             <ChatMessagesWidgetView />
-            <ChatFormWidgetView />
         </div>
     );
 }

src/views/room/widgets/chat/form/ChatFormWidgetView.scss

@@ -1,17 +0,0 @@
-.nitro-chat-form-input {
-    display: inline-grid;
-    vertical-align: top;
-    align-items: center;
-    position: relative;
-    height: 100%;
-    padding: 0 10px;
-    pointer-events: all;
-
-    input {
-        width: auto;
-        height: 45px;
-        border-radius: 10px;
-        border: 1px solid rgb(0, 0, 0);
-        background: #EDEDED;
-    }
-}

src/views/room/widgets/chat/form/ChatFormWidgetView.types.tsx

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

src/views/toolbar/ToolbarView.scss

@@ -1,7 +1,8 @@
 .nitro-toolbar {
     position: absolute;
+    width: 70px;
+    top: 10px;
     left: 10px;
-    bottom: 10px;
     z-index: $toolbar-zindex;
     pointer-events: all;
 
@@ -19,7 +20,6 @@
             width: 50px;
             height: 60px;
             margin: 0 5px;
-            overflow: hidden;
 
             &:active {
                 -webkit-transform: translate(0, 1px);
@@ -28,7 +28,6 @@
 
             .avatar-image {
                 top: 20px;
-                left: -5px;
             }
 
             .icon,
@@ -37,6 +36,10 @@
                 filter: drop-shadow(0px 2px 0px black);
             }
 
+            .chat-input-container {
+                left: 60px;
+            }
+
             .count {
                 top: 0rem;
                 right: 5px;

src/views/toolbar/ToolbarView.tsx

@@ -46,8 +46,8 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
 
     return (
         <>
-            <div className="card p-0 overflow-hidden">
+            <div className="d-flex flex-column bg-primary rounded shadow border border-black p-0 h-100">
-                <ul className="list-group list-group-horizontal p-1">
+                <ul className="flex-grow-1 list-group p-1">
                     { isInRoom && (
                         <li className="list-group-item">
                         <i className="icon icon-hotelview icon-nitro-light"></i>
@@ -72,7 +72,9 @@ export function ToolbarView(props: ToolbarViewProps): JSX.Element
                         { (unseenFriendListCount > 0) && (
                             <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
                     </li>
-                    <li className="list-group-item">
+                </ul>
+                <ul className="list-group p-1">
+                    <li className="position-relative list-group-item">
                         { userInfo && <AvatarImageView figure={ userInfo.figure } direction={ 2 } headOnly={ true } /> }
                         { (unseenAchievementsCount > 0) && (
                             <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenAchievementsCount }</div>) }