Add notification center

package-lock.json

@@ -1835,12 +1835,11 @@
       "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
     },
     "@restart/hooks": {
-      "version": "0.3.26",
+      "version": "0.3.27",
-      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.26.tgz",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.3.27.tgz",
-      "integrity": "sha512-7Hwk2ZMYm+JLWcb7R9qIXk1OoUg1Z+saKWqZXlrvFwT3w6UArVNWgxYOzf+PJoK9zZejp8okPAKTctthhXLt5g==",
+      "integrity": "sha512-s984xV/EapUIfkjlf8wz9weP2O9TNKR96C68FfMEy2bE69+H4cNv3RD4Mf97lW7Htt7PjZrYTjSC8f3SB9VCXw==",
       "requires": {
-        "lodash": "^4.17.20",
+        "dequal": "^2.0.2"
-        "lodash-es": "^4.17.20"
       }
     },
     "@rollup/plugin-node-resolve": {
@@ -2223,14 +2222,6 @@
         "@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",
@@ -5159,6 +5150,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
       "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
+    "dequal": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.2.tgz",
+      "integrity": "sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug=="
+    },
     "des.js": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
@@ -10039,11 +10035,6 @@
       "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",
@@ -14780,28 +14771,46 @@
       }
     },
     "react-bootstrap": {
-      "version": "1.5.2",
+      "version": "2.0.0-beta.2",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-1.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.0.0-beta.2.tgz",
-      "integrity": "sha512-mGKPY5+lLd7Vtkx2VFivoRkPT4xAHazuFfIhJLTEgHlDfIUSePn7qrmpZe5gXH9zvHV0RsBaQ9cLfXjxnZrOpA==",
+      "integrity": "sha512-2WqlAj54LaSWtJ6rsNs/uKP8kzomNrELymaaekajkIE6jQXPRNFe9mSIKYP/MtqLQGc4MYPBB3rywZ7UIvbV/w==",
       "requires": {
-        "@babel/runtime": "^7.13.8",
+        "@babel/runtime": "^7.14.0",
         "@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": ">=16.14.8",
         "@types/react-transition-group": "^4.4.1",
         "@types/warning": "^3.0.0",
-        "classnames": "^2.2.6",
+        "classnames": "^2.3.1",
-        "dom-helpers": "^5.1.2",
+        "dom-helpers": "^5.2.1",
         "invariant": "^2.2.4",
         "prop-types": "^15.7.2",
         "prop-types-extra": "^1.1.0",
-        "react-overlays": "^5.0.0",
+        "react-overlays": "^5.0.1",
         "react-transition-group": "^4.4.1",
         "uncontrollable": "^7.2.1",
         "warning": "^4.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        }
       }
     },
     "react-dev-utils": {

package.json

@@ -16,7 +16,7 @@
     "nitro-renderer": "file:../nitro-renderer",
     "node-sass": "^5.0.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^1.5.2",
+    "react-bootstrap": "^2.0.0-alpha.2",
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-google-recaptcha": "^2.1.0",

src/assets/styles/bootstrap/_variables.scss

@@ -40,10 +40,10 @@ $blue:    #0d6efd !default;
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
 $pink:    #d63384 !default;
-$red:     #dc3545 !default;
+$red:     #a81a12 !default;
 $orange:  #fd7e14 !default;
 $yellow:  #ffc107 !default;
-$green:   #198754 !default;
+$green:   #00800b !default;
 $teal:    #20c997 !default;
 $cyan:    #0dcaf0 !default;
 $muted:   #B6BEC5 !default;
@@ -75,17 +75,15 @@ $secondary:     #185D79 !default;
 $tertiary:      #2DABC2 !default;
 $quaternary:    #2B91A7 !default;
 
-$success:       #008026 !default;
+$success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;
-$danger:        #C23027 !default;
+$danger:        $red !default;
 
 $light:         #DFDFDF !default;
-$dark:          #24211c !default;
+$dark:          #12191c !default;
 $light-dark:    $gray-800 !default;
 
-
-
 // scss-docs-end theme-color-variables
 
 .bg-tertiary-split {

src/events/index.ts

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

src/events/notification-center/NotificationCenterEvent.ts

@@ -0,0 +1,8 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class NotificationCenterEvent extends NitroEvent
+{
+    public static SHOW_NOTIFICATION_CENTER: string = 'NCE_SHOW_NOTIFICATION_CENTER';
+    public static HIDE_NOTIFICATION_CENTER: string = 'NCE_HIDE_NOTIFICATION_CENTER';
+    public static TOGGLE_NOTIFICATION_CENTER: string = 'NCE_TOGGLE_NOTIFICATION_CENTER';
+}

src/events/notification-center/index.ts

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

src/index.scss

@@ -21,6 +21,7 @@ $toolbar-me-zindex: 90;
 $chatinput-zindex: 80;
 $toolbar-zindex: 70;
 $rightside-zindex: 69;
+$notification-center-zindex: 68;
 $toolbar-memenu-zindex: 60;
 $roomtools-zindex: 50;
 $context-menu-zindex: 40;

src/layout/transitions/TransitionAnimation.tsx

@@ -35,7 +35,7 @@ export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
     return (
         <Transition in={ inProp } timeout={ timeout }>
             { state => (
-                <div className={ className + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
+                <div className={ (className ?? '') + " animate__animated" } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
                     { isChildrenVisible && children }
                 </div>
             )}

src/layout/transitions/TransitionAnimation.types.ts

@@ -10,6 +10,7 @@ export class TransitionAnimationTypes
 {
     public static BOUNCE: string = 'bounce';
     public static SLIDE_LEFT: string = 'slideLeft';
+    public static SLIDE_RIGHT: string = 'slideRight';
     public static FLIP_X: string = 'flipX';
     public static FADE_IN: string = 'fadeIn';
     public static FADE_DOWN: string = 'fadeDown';

src/layout/transitions/TransitionAnimationStyles.ts

@@ -39,6 +39,22 @@ export function getTransitionAnimationStyle(type: string, transition: Transition
                         animationDuration: `${ timeout }ms`
                     }
             }
+        case TransitionAnimationTypes.SLIDE_RIGHT:
+            switch(transition)
+            {
+                default:
+                    return {}
+                case ENTERING:
+                    return {
+                        animationName: `slideInRight`,
+                        animationDuration: `${ timeout }ms`
+                    }
+                case EXITING:
+                    return {
+                        animationName: `slideOutRight`,
+                        animationDuration: `${ timeout }ms`
+                    }
+            }
         case TransitionAnimationTypes.FLIP_X:
             switch(transition)
             {

src/views/Styles.scss

@@ -13,6 +13,7 @@
 @import './loading/LoadingView';
 @import './main/MainView';
 @import './navigator/NavigatorView';
+@import './notification-center/NotificationCenterView';
 @import './pet-image/PetImage';
 @import './purse/PurseView';
 @import './right-side/RightSideView';

src/views/main/MainView.tsx

@@ -1,5 +1,5 @@
 import { Nitro, RoomSessionEvent } from 'nitro-renderer';
-import { useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useEffect, useState } from 'react';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
 import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
 import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
@@ -9,12 +9,13 @@ import { FriendListView } from '../friend-list/FriendListView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
 import { NavigatorView } from '../navigator/NavigatorView';
+import { NotificationCenterView } from '../notification-center/NotificationCenterView';
 import { RightSideView } from '../right-side/RightSideView';
 import { RoomHostView } from '../room-host/RoomHostView';
 import { ToolbarView } from '../toolbar/ToolbarView';
 import { MainViewProps } from './MainView.types';
 
-export function MainView(props: MainViewProps): JSX.Element
+export const MainView: FC<MainViewProps> = props =>
 {
     const [ isReady, setIsReady ] = useState(false);
     const [ landingViewVisible, setLandingViewVisible ] = useState(true);
@@ -55,6 +56,7 @@ export function MainView(props: MainViewProps): JSX.Element
             <CatalogView />
             <FriendListView />
             <RightSideView />
+            <NotificationCenterView />
         </div>
     );
 }

src/views/notification-center/NotificationCenterView.scss

@@ -0,0 +1,13 @@
+.nitro-notification-center-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: calc(100% - #{$toolbar-height});
+    z-index: $notification-center-zindex;
+
+    .nitro-notification-center {
+        background-color: $dark;
+        height: 100%;
+    }
+}

src/views/notification-center/NotificationCenterView.tsx

@@ -0,0 +1,40 @@
+import { FC, useCallback, useState } from 'react';
+import { NotificationCenterEvent } from '../../events';
+import { useUiEvent } from '../../hooks/events';
+import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
+import { TransitionAnimationTypes } from '../../layout/transitions/TransitionAnimation.types';
+import { NotificationCenterViewProps } from './NotificationCenterView.types';
+
+export const NotificationCenterView: FC<NotificationCenterViewProps> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+
+    const onNotificationCenterEvent = useCallback((event: NotificationCenterEvent) =>
+    {
+        switch(event.type)
+        {
+            case NotificationCenterEvent.SHOW_NOTIFICATION_CENTER:
+                setIsVisible(true);
+                return;
+            case NotificationCenterEvent.HIDE_NOTIFICATION_CENTER:
+                setIsVisible(false);
+                return;
+            case NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER:
+                setIsVisible(value => !value);
+                return;
+        }
+    }, []);
+
+    useUiEvent(NotificationCenterEvent.SHOW_NOTIFICATION_CENTER, onNotificationCenterEvent);
+    useUiEvent(NotificationCenterEvent.HIDE_NOTIFICATION_CENTER, onNotificationCenterEvent);
+    useUiEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER, onNotificationCenterEvent);
+
+
+    return (
+        <TransitionAnimation className="nitro-notification-center-container" type={ TransitionAnimationTypes.SLIDE_RIGHT } inProp={ isVisible } timeout={ 300 }>
+            <div className="nitro-notification-center">
+                test
+            </div>
+        </TransitionAnimation>
+    );
+}

src/views/notification-center/NotificationCenterView.types.ts

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

src/views/purse/PurseView.scss

@@ -8,6 +8,7 @@
         color:lighten($dark,20);
         cursor: pointer;
         font-size: 0.9rem;
+        pointer-events: all;
     }
 }
 

src/views/purse/PurseView.tsx

@@ -1,5 +1,7 @@
 import { UserCurrencyComposer } from 'nitro-renderer';
-import { FC, useEffect, useMemo, useReducer } from 'react';
+import { FC, useCallback, useEffect, useMemo, useReducer } from 'react';
+import { NotificationCenterEvent } from '../../events';
+import { dispatchUiEvent } from '../../hooks/events';
 import { SendMessageHook } from '../../hooks/messages/message-event';
 import { GetConfiguration } from '../../utils/GetConfiguration';
 import { PurseContextProvider } from './context/PurseContext';
@@ -26,6 +28,11 @@ export const PurseView: FC<PurseViewProps> = props =>
 
     SetLastCurrencies(currencies);
 
+    const toggleNotificationCenter = useCallback(() =>
+    {
+        dispatchUiEvent(new NotificationCenterEvent(NotificationCenterEvent.TOGGLE_NOTIFICATION_CENTER));
+    }, []);
+
     return (
         <PurseContextProvider value={ { purseState, dispatchPurseState }}>
             <PurseMessageHandler />
@@ -36,7 +43,9 @@ export const PurseView: FC<PurseViewProps> = props =>
 
                         return <CurrencyView key={ index } currency={ currency } />;
                     }) }
-                <div className="notification-button px-2"><i className="fas fa-bars"/></div> 
+                <div className="notification-button px-2" onClick={ toggleNotificationCenter }>
+                    <i className="fas fa-bars" />
+                </div> 
             </div>
         </PurseContextProvider>
     );