Merge branch 'dev' into purse-redesign

package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.22",
-    "@types/node": "^12.20.7",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^12.20.16",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
     "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
-    "immutable": "^4.0.0-rc.12",
+    "immutable": "^4.0.0-rc.14",
     "nitro-renderer": "file:../nitro-renderer",
     "node-sass": "^5.0.0",
     "rc-slider": "^9.7.2",
@@ -21,12 +21,13 @@
     "react-dom": "^17.0.2",
     "react-draggable": "^4.4.3",
     "react-google-recaptcha": "^2.1.0",
-    "react-redux": "^7.2.3",
+    "react-input-autosize": "^3.0.0",
+    "react-redux": "^7.2.4",
     "react-scripts": "4.0.3",
-    "react-transition-group": "^4.4.1",
-    "redux": "^4.0.5",
-    "typescript": "^4.2.4",
-    "web-vitals": "^1.1.1"
+    "react-slider": "^1.3.1",
+    "react-transition-group": "^4.4.2",
+    "typescript": "^4.3.5",
+    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "postinstall": "node ./webpack-patcher.js",
@@ -59,7 +60,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react-slider": "^1.3.0",
-    "@types/react-transition-group": "^4.4.1"
+    "@types/react-slider": "^1.3.1",
+    "@types/react-transition-group": "^4.4.2"
   }
 }

public/configuration.json

@@ -19,7 +19,7 @@
     "avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro",
     "avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro",
     "furni.extras.url": "${asset.url}/images/furniextras/%image%.png",
-    "url.prefix": "",
+    "url.prefix": "http://localhost:3000",
     "chat.viewer.height.percentage": 0.40,
     "auth.system.enabled": true,
     "auth.system.http.enabled": true,
@@ -1169,6 +1169,7 @@
         "${images.url}/additions/number_3.png",
         "${images.url}/additions/number_4.png",
         "${images.url}/additions/number_5.png",
+        "${images.url}/additions/pet_experience_bubble.png",
         "${images.url}/loading_icon.png",
         "${images.url}/clear_icon.png",
         "${images.url}/big_arrow.png"

src/App.tsx

@@ -1,6 +1,6 @@
 import { ConfigurationEvent, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroEvent, NitroLocalizationEvent, RoomEngineEvent, WebGL } from 'nitro-renderer';
 import { FC, useCallback, useState } from 'react';
-import { GetConfiguration } from './api';
+import { GetCommunication, GetConfiguration, GetNitroInstance } from './api';
 import { useConfigurationEvent } from './hooks/events/core/configuration/configuration-event';
 import { useLocalizationEvent } from './hooks/events/nitro/localization/localization-event';
 import { dispatchMainEvent, useMainEvent } from './hooks/events/nitro/main-event';
@@ -19,7 +19,7 @@ export const App: FC<{}> = props =>
     //@ts-ignore
     if(!NitroConfig) throw new Error('NitroConfig is not defined!');
 
-    if(!Nitro.instance) Nitro.bootstrap();
+    if(!GetNitroInstance()) Nitro.bootstrap();
 
     const getPreloadAssetUrls = useCallback(() =>
     {
@@ -28,7 +28,7 @@ export const App: FC<{}> = props =>
 
         if(assetUrls && assetUrls.length)
         {
-            for(const url of assetUrls) urls.push(Nitro.instance.core.configuration.interpolate(url));
+            for(const url of assetUrls) urls.push(GetNitroInstance().core.configuration.interpolate(url));
         }
 
         return urls;
@@ -39,7 +39,7 @@ export const App: FC<{}> = props =>
         switch(event.type)
         {
             case ConfigurationEvent.LOADED:
-                Nitro.instance.localization.init();
+                GetNitroInstance().localization.init();
                 return;
             case ConfigurationEvent.FAILED:
                 setIsError(true);
@@ -73,14 +73,14 @@ export const App: FC<{}> = props =>
 			case NitroCommunicationDemoEvent.CONNECTION_AUTHENTICATED:
                 setMessage('Finishing Up');
 
-                Nitro.instance.init();
+                GetNitroInstance().init();
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_ERROR:
                 setIsError(true);
                 setMessage('Connection Error');
 				return;
 			case NitroCommunicationDemoEvent.CONNECTION_CLOSED:
-                if(Nitro.instance.roomEngine) Nitro.instance.roomEngine.dispose();
+                if(GetNitroInstance().roomEngine) GetNitroInstance().roomEngine.dispose();
 
                 setIsError(true);
                 setMessage('Connection Error');
@@ -91,13 +91,13 @@ export const App: FC<{}> = props =>
                 setIsReady(true);
                 return;
             case NitroLocalizationEvent.LOADED:
-                Nitro.instance.core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
+                GetNitroInstance().core.asset.downloadAssets(getPreloadAssetUrls(), (status: boolean) =>
                 {
                     if(status)
                     {
                         setMessage('Connecting');
                         
-                        Nitro.instance.communication.init();
+                        GetCommunication().init();
                     }
                     else
                     {
@@ -127,7 +127,7 @@ export const App: FC<{}> = props =>
     }
     else
     {
-        Nitro.instance.core.configuration.init();
+        GetNitroInstance().core.configuration.init();
     }
     
     return (

src/api/catalog/GetCatalogPageComposer.ts

@@ -1,6 +0,0 @@
-import { CatalogPageComposer } from 'nitro-renderer';
-
-export function GetCatalogPageComposer(...args: ConstructorParameters<typeof CatalogPageComposer>): CatalogPageComposer
-{
-    return new CatalogPageComposer(...args);
-}

src/api/core/GetConfigurationManager.ts

@@ -0,0 +1,7 @@
+import { IConfigurationManager } from 'nitro-renderer';
+import { GetNitroCore } from './GetNitroCore';
+
+export function GetConfigurationManager(): IConfigurationManager
+{
+    return GetNitroCore().configuration;
+}

src/api/core/GetNitroCore.ts

@@ -0,0 +1,7 @@
+import { INitroCore } from 'nitro-renderer';
+import { GetNitroInstance } from '../nitro';
+
+export function GetNitroCore(): INitroCore
+{
+    return GetNitroInstance().core;
+}

src/api/core/index.ts

@@ -0,0 +1,2 @@
+export * from './GetConfigurationManager';
+export * from './GetNitroCore';

src/api/index.ts

@@ -1 +1,2 @@
+export * from './core';
 export * from './nitro';

src/api/nitro/AddLinkEventTracker.ts

@@ -0,0 +1,7 @@
+import { ILinkEventTracker } from 'nitro-renderer';
+import { GetNitroInstance } from './GetNitroInstance';
+
+export function AddEventLinkTracker(tracker: ILinkEventTracker): void
+{
+    GetNitroInstance().addLinkEventTracker(tracker);
+}

src/api/nitro/GetCommunication.ts

@@ -0,0 +1,7 @@
+import { INitroCommunicationManager } from 'nitro-renderer';
+import { GetNitroInstance } from './GetNitroInstance';
+
+export function GetCommunication(): INitroCommunicationManager
+{
+    return GetNitroInstance().communication;
+}

src/api/nitro/GetConfiguration.ts

@@ -1,6 +1,6 @@
-import { Nitro } from 'nitro-renderer';
+import { GetNitroInstance } from './GetNitroInstance';
 
 export function GetConfiguration<T>(key: string, value: T = null): T
 {
-    return Nitro.instance.getConfiguration(key, value);
+    return GetNitroInstance().getConfiguration(key, value);
 }

src/api/nitro/GetConnection.ts

@@ -1,6 +1,7 @@
-import { IConnection, Nitro } from 'nitro-renderer';
+import { IConnection } from 'nitro-renderer';
+import { GetCommunication } from './GetCommunication';
 
 export function GetConnection(): IConnection
 {
-    return Nitro.instance.communication.connection;
+    return GetCommunication().connection;
 }

src/api/nitro/GetNitroInstance.ts

@@ -0,0 +1,6 @@
+import { INitro, Nitro } from 'nitro-renderer';
+
+export function GetNitroInstance(): INitro
+{
+    return Nitro.instance;
+}

src/api/nitro/GetTicker.ts

@@ -1,6 +1,6 @@
-import { Nitro } from 'nitro-renderer';
+import { GetNitroInstance } from './GetNitroInstance';
 
 export function GetTicker()
 {
-    return Nitro.instance.ticker;
+    return GetNitroInstance().ticker;
 }

src/api/nitro/RemoveLinkEventTracker.ts

@@ -0,0 +1,7 @@
+import { ILinkEventTracker } from 'nitro-renderer';
+import { GetNitroInstance } from './GetNitroInstance';
+
+export function RemoveLinkEventTracker(tracker: ILinkEventTracker): void
+{
+    GetNitroInstance().removeLinkEventTracker(tracker);
+}

src/api/nitro/avatar/GetAvatarPalette.ts

@@ -0,0 +1,7 @@
+import { IPalette } from 'nitro-renderer';
+import { GetAvatarRenderManager } from './GetAvatarRenderManager';
+
+export function GetAvatarPalette(paletteId: number): IPalette
+{
+    return GetAvatarRenderManager().structureData.getPalette(paletteId);
+}

src/api/nitro/avatar/GetAvatarRenderManager.ts

@@ -1,6 +1,7 @@
-import { IAvatarRenderManager, Nitro } from 'nitro-renderer';
+import { IAvatarRenderManager } from 'nitro-renderer';
+import { GetNitroInstance } from '../GetNitroInstance';
 
 export function GetAvatarRenderManager(): IAvatarRenderManager
 {
-    return Nitro.instance.avatar;
+    return GetNitroInstance().avatar;
 }

src/api/nitro/avatar/GetAvatarSetType.ts

@@ -0,0 +1,7 @@
+import { ISetType } from 'nitro-renderer';
+import { GetAvatarRenderManager } from './GetAvatarRenderManager';
+
+export function GetAvatarSetType(setType: string): ISetType
+{
+    return GetAvatarRenderManager().structureData.getSetType(setType);
+}

src/api/nitro/avatar/index.ts

@@ -1 +1,3 @@
+export * from './GetAvatarPalette';
 export * from './GetAvatarRenderManager';
+export * from './GetAvatarSetType';

src/api/nitro/camera/GetRoomCameraWidgetManager.ts

@@ -1,7 +1,7 @@
-import { Nitro } from 'nitro-renderer';
 import { IRoomCameraWidgetManager } from 'nitro-renderer/src/nitro/camera/IRoomCameraWidgetManager';
+import { GetNitroInstance } from '../GetNitroInstance';
 
 export function GetRoomCameraWidgetManager(): IRoomCameraWidgetManager
 {
-    return Nitro.instance.cameraManager;
+    return GetNitroInstance().cameraManager;
 }

src/api/nitro/index.ts

@@ -1,7 +1,11 @@
+export * from './AddLinkEventTracker';
 export * from './avatar';
 export * from './camera';
+export * from './GetCommunication';
 export * from './GetConfiguration';
 export * from './GetConnection';
+export * from './GetNitroInstance';
 export * from './GetTicker';
+export * from './RemoveLinkEventTracker';
 export * from './room';
 export * from './session';

src/api/nitro/room/DispatchResizeEvent.ts

@@ -1,22 +0,0 @@
-import { Nitro } from 'nitro-renderer';
-import { InitializeRoomInstanceRenderingCanvas } from './InitializeRoomInstanceRenderingCanvas';
-
-let resizeTimer: ReturnType<typeof setTimeout> = null;
-
-export function WindowResizeEvent(roomId: number, canvasId: number)
-{
-    if(resizeTimer) clearTimeout(resizeTimer);
-
-    resizeTimer = setTimeout(() =>
-    {
-        Nitro.instance.renderer.resize(window.innerWidth, window.innerHeight);
-
-        InitializeRoomInstanceRenderingCanvas(roomId, canvasId, Nitro.instance.width, Nitro.instance.height);
-
-        //this._events.dispatchEvent(new RoomWidgetRoomViewUpdateEvent(RoomWidgetRoomViewUpdateEvent.SIZE_CHANGED, this.getRoomViewRect()));
-
-        //this.setRoomBackground();
-
-        Nitro.instance.render();
-    }, 1);
-}

src/api/nitro/room/GetRoomEngine.ts

@@ -1,6 +1,7 @@
-import { IRoomEngine, Nitro } from 'nitro-renderer';
+import { IRoomEngine } from 'nitro-renderer';
+import { GetNitroInstance } from '../GetNitroInstance';
 
 export function GetRoomEngine(): IRoomEngine
 {
-    return Nitro.instance.roomEngine;
+    return GetNitroInstance().roomEngine;
 }

src/api/nitro/room/index.ts

@@ -1,5 +1,4 @@
 export * from './DispatchMouseEvent';
-export * from './DispatchResizeEvent';
 export * from './DispatchTouchEvent';
 export * from './GetOwnRoomObject';
 export * from './GetRoomEngine';

src/api/nitro/session/GetClubMemberLevel.ts

@@ -0,0 +1,6 @@
+import { GetSessionDataManager } from './GetSessionDataManager';
+
+export function GetClubMemberLevel(): number
+{
+    return GetSessionDataManager().clubLevel;
+}

src/api/nitro/session/GetFurnitureDataForRoomObject.ts

@@ -0,0 +1,22 @@
+import { IFurnitureData, RoomObjectCategory, RoomObjectVariable } from 'nitro-renderer';
+import { GetRoomEngine } from '../room';
+import { GetSessionDataManager } from './GetSessionDataManager';
+
+export function GetFurnitureDataForRoomObject(roomId: number, objectId: number, category: number): IFurnitureData
+{
+    const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, category);
+
+    if(!roomObject) return;
+
+    const typeId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_TYPE_ID);
+
+    switch(category)
+    {
+        case RoomObjectCategory.FLOOR:
+            return GetSessionDataManager().getFloorItemData(typeId);
+        case RoomObjectCategory.WALL:
+            return GetSessionDataManager().getWallItemData(typeId);
+    }
+
+    return null;
+}

src/api/nitro/session/GetRoomSessionManager.ts

@@ -1,6 +1,7 @@
-import { IRoomSessionManager, Nitro } from 'nitro-renderer';
+import { IRoomSessionManager } from 'nitro-renderer';
+import { GetNitroInstance } from '../GetNitroInstance';
 
 export function GetRoomSessionManager(): IRoomSessionManager
 {
-    return Nitro.instance.roomSessionManager;
+    return GetNitroInstance().roomSessionManager;
 }

src/api/nitro/session/GetSessionDataManager.ts

@@ -1,6 +1,7 @@
-import { ISessionDataManager, Nitro } from 'nitro-renderer';
+import { ISessionDataManager } from 'nitro-renderer';
+import { GetNitroInstance } from '../GetNitroInstance';
 
 export function GetSessionDataManager(): ISessionDataManager
 {
-    return Nitro.instance.sessionDataManager;
+    return GetNitroInstance().sessionDataManager;
 }

src/api/nitro/session/index.ts

@@ -1,7 +1,9 @@
 export * from './CanManipulateFurniture';
 export * from './GetCanStandUp';
 export * from './GetCanUseExpression';
+export * from './GetClubMemberLevel';
 export * from './GetFurnitureDataForProductOffer';
+export * from './GetFurnitureDataForRoomObject';
 export * from './GetOwnPosture';
 export * from './GetProductDataForLocalization';
 export * from './GetRoomSession';

src/assets/styles/bootstrap/_variables.scss

@@ -78,7 +78,10 @@ $mirage:        #131e25 !default;
 $aztec:         #0d171d !default;
 $cello-light:   #21516e !default;
 $cello-dark:    #1e465e !default;
-
+$pale-sky:      #677181 !default;
+$oslo-gray:     #8F9297 !default;
+$ghost:         #c8cad0 !default;
+$gray-chateau:  #a3a7b1 !default;
 $success:       $green !default;
 $info:          $cyan !default;
 $warning:       $yellow !default;

src/assets/styles/icons.scss

@@ -2,502 +2,528 @@
     line-height: 0 !important;
 }
 
-i {
-
-    &.icon {
-        display: inline-block;
-        outline: 0;
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: contain;
-
-        &.icon-nitro-light {
-            background-image: url('../images/nitro/nitro-n-light.svg');
-        }
-
-        &.icon-nitro-dark {
-            background-image: url('../images/nitro/nitro-n-dark.svg');
-        }
-
-        &.icon-nitro-light,
-        &.icon-nitro-dark {
-            width: 100%;
-            height: 40px;
-        }
-
-        &.icon-catalog {
-            background-image: url('../images/toolbar/icons/catalog.png');
-            width: 37px;
-            height: 36px;
-        }
-
-        &.icon-rooms {
-            background-image: url('../images/toolbar/icons/rooms.png');
-            width: 44px;
-            height: 30px;
-        }
-
-        &.icon-house {
-            background-image: url('../images/toolbar/icons/house.png');
-            height: 30px;
-            width: 32px;
-        }
-
-        &.icon-inventory {
-            background-image: url('../images/toolbar/icons/inventory.png');
-            height: 41px;
-            width: 44px;
-        }
-
-        &.icon-modtools {
-            background-image: url('../images/toolbar/icons/modtools.png');
-            height: 34px;
-            width: 29px;
-        }
-
-        &.icon-friendall {
-            background-image: url('../images/toolbar/icons/friend_all.png');
-            height: 33px;
-            width: 32px;
-        }
-
-        &.icon-friendsearch {
-            background-image: url('../images/toolbar/icons/friend_search.png');
-            height: 33px;
-            width: 29px;
-        }
-
-        &.icon-sendmessage {
-            background-image: url('../images/toolbar/icons/sendmessage.png');
-            width: 20px;
-            height: 21px;
-        }
-
-        &.icon-me-talents {
-            background-image: url('../images/toolbar/icons/me-menu/talents.png');
-            width: 32px;
-            height: 30px;
-        }
-
-        &.icon-me-helper-tool {
-            background-image: url('../images/toolbar/icons/me-menu/helper-tool.png');
-            width: 32px;
-            height: 30px;
-        }
-
-        &.icon-me-profile {
-            background-image: url('../images/toolbar/icons/me-menu/profile.png');
-            width: 32px;
-            height: 30px;
-        }
-
-        &.icon-me-forums {
-            background-image: url('../images/toolbar/icons/me-menu/forums.png');
-            width: 32px;
-            height: 30px;
-        }
-
-        &.icon-me-rooms {
-            background-image: url('../images/toolbar/icons/me-menu/my-rooms.png');
-            width: 30px;
-            height: 30px;
-        }
-
-        &.icon-me-achievements {
-            background-image: url('../images/toolbar/icons/me-menu/achievements.png');
-            width: 31px;
-            height: 30px;
-        }
-
-        &.icon-me-clothing {
-            background-image: url('../images/toolbar/icons/me-menu/clothing.png');
-            width: 27px;
-            height: 30px;
-        }
-
-        &.icon-me-settings {
-            background-image: url('../images/toolbar/icons/me-menu/cog.png');
-            width: 28px;
-            height: 34px;
-        }
-
-        &.icon-joinroom {
-            background-image: url('../images/toolbar/icons/joinroom.png');
-            width: 21px;
-            height: 21px;
-        }
-
-        &.icon-habbo {
-            background-image: url('../images/toolbar/icons/habbo.png');
-            width: 28px;
-            height: 28px;
-        }
-
-        &.icon-camera {
-            background-image: url('../images/toolbar/icons/camera.png');
-            width: 38px;
-            height: 45px;
-        }
-
-        &.icon-message {
-            background-image: url('../images/toolbar/icons/message.png');
-            width: 36px;
-            height: 32px;
-
-            &.is-unseen {
-                background-image: url('../images/toolbar/icons/message_unsee.gif');
-            }
-        }
-
-        &.icon-wired-trigger {
-            background-image: url('../images/wired/icon_trigger.png');
-            width: 13px;
-            height: 14px;
-        }
-
-        &.icon-wired-condition {
-            background-image: url('../images/wired/icon_condition.png');
-            width: 13px;
-            height: 14px;
-        }
-
-        &.icon-wired-action {
-            background-image: url('../images/wired/icon_action.png');
-            width: 13px;
-            height: 14px;
-        }
-
-        &.arrow-left-icon {
-            background-image: url('../images/avatareditor/arrow-left-icon.png');
-            width: 28px;
-            height: 21px;
-        }
-
-        &.arrow-right-icon {
-            background-image: url('../images/avatareditor/arrow-right-icon.png');
-            width: 28px;
-            height: 21px;
-        }
-
-        &.clear-icon {
-            background-image: url('../images/avatareditor/clear-icon.png');
-            width: 16px;
-            height: 16px;
-        }
-
-        &.ca-icon {
-            background-image: url('../images/avatareditor/ca-icon.png');
-            width: 30px;
-            height: 24px;
+.icon {
+    display: inline-block;
+    outline: 0;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.icon-nitro-light {
+        background-image: url('../images/nitro/nitro-n-light.svg');
+    }
+
+    &.icon-nitro-dark {
+        background-image: url('../images/nitro/nitro-n-dark.svg');
+    }
+
+    &.icon-nitro-light,
+    &.icon-nitro-dark {
+        width: 100%;
+        height: 40px;
+    }
+
+    &.icon-catalog {
+        background-image: url('../images/toolbar/icons/catalog.png');
+        width: 37px;
+        height: 36px;
+    }
+
+    &.icon-rooms {
+        background-image: url('../images/toolbar/icons/rooms.png');
+        width: 44px;
+        height: 30px;
+    }
+
+    &.icon-house {
+        background-image: url('../images/toolbar/icons/house.png');
+        height: 30px;
+        width: 32px;
+    }
+
+    &.icon-inventory {
+        background-image: url('../images/toolbar/icons/inventory.png');
+        height: 41px;
+        width: 44px;
+    }
+
+    &.icon-modtools {
+        background-image: url('../images/toolbar/icons/modtools.png');
+        height: 34px;
+        width: 29px;
+    }
+
+    &.icon-friendall {
+        background-image: url('../images/toolbar/icons/friend_all.png');
+        height: 33px;
+        width: 32px;
+    }
+
+    &.icon-friendsearch {
+        background-image: url('../images/toolbar/icons/friend_search.png');
+        height: 33px;
+        width: 29px;
+    }
+
+    &.icon-sendmessage {
+        background-image: url('../images/toolbar/icons/sendmessage.png');
+        width: 20px;
+        height: 21px;
+    }
+
+    &.icon-me-talents {
+        background-image: url('../images/toolbar/icons/me-menu/talents.png');
+        width: 32px;
+        height: 30px;
+    }
+
+    &.icon-me-helper-tool {
+        background-image: url('../images/toolbar/icons/me-menu/helper-tool.png');
+        width: 32px;
+        height: 30px;
+    }
+
+    &.icon-me-profile {
+        background-image: url('../images/toolbar/icons/me-menu/profile.png');
+        width: 32px;
+        height: 30px;
+    }
+
+    &.icon-me-forums {
+        background-image: url('../images/toolbar/icons/me-menu/forums.png');
+        width: 32px;
+        height: 30px;
+    }
+
+    &.icon-me-rooms {
+        background-image: url('../images/toolbar/icons/me-menu/my-rooms.png');
+        width: 30px;
+        height: 30px;
+    }
+
+    &.icon-me-achievements {
+        background-image: url('../images/toolbar/icons/me-menu/achievements.png');
+        width: 31px;
+        height: 30px;
+    }
+
+    &.icon-me-clothing {
+        background-image: url('../images/toolbar/icons/me-menu/clothing.png');
+        width: 27px;
+        height: 30px;
+    }
+
+    &.icon-me-settings {
+        background-image: url('../images/toolbar/icons/me-menu/cog.png');
+        width: 28px;
+        height: 34px;
+    }
+
+    &.icon-joinroom {
+        background-image: url('../images/toolbar/icons/joinroom.png');
+        width: 21px;
+        height: 21px;
+    }
+
+    &.icon-habbo {
+        background-image: url('../images/toolbar/icons/habbo.png');
+        width: 28px;
+        height: 28px;
+    }
+
+    &.icon-camera {
+        background-image: url('../images/toolbar/icons/camera.png');
+        width: 38px;
+        height: 45px;
+    }
+
+    &.icon-message {
+        background-image: url('../images/toolbar/icons/message.png');
+        width: 36px;
+        height: 32px;
+
+        &.is-unseen {
+            background-image: url('../images/toolbar/icons/message_unsee.gif');
+        }
+    }
+
+    &.icon-wired-trigger {
+        background-image: url('../images/wired/icon_trigger.png');
+        width: 13px;
+        height: 14px;
+    }
+
+    &.icon-wired-condition {
+        background-image: url('../images/wired/icon_condition.png');
+        width: 13px;
+        height: 14px;
+    }
+
+    &.icon-wired-action {
+        background-image: url('../images/wired/icon_action.png');
+        width: 13px;
+        height: 14px;
+    }
+
+    &.arrow-left-icon {
+        background-image: url('../images/avatareditor/arrow-left-icon.png');
+        width: 28px;
+        height: 21px;
+    }
+
+    &.arrow-right-icon {
+        background-image: url('../images/avatareditor/arrow-right-icon.png');
+        width: 28px;
+        height: 21px;
+    }
+
+    &.clear-icon {
+        background-image: url('../images/avatareditor/clear-icon.png');
+        width: 27px;
+        height: 27px;
+    }
+
+    &.ca-icon {
+        background-image: url('../images/avatareditor/ca-icon.png');
+        width: 25px;
+        height: 25px;
+
+        &.selected {
+            background-image: url('../images/avatareditor/ca-selected-icon.png');
+        }
+    }
 
-            &.selected {
-                background-image: url('../images/avatareditor/ca-selected-icon.png');
-            }
+    &.cc-icon {
+        background-image: url('../images/avatareditor/cc-icon.png');
+        width: 31px;
+        height: 29px;
+
+        &.selected {
+            background-image: url('../images/avatareditor/cc-selected-icon.png');
         }
+    }
+
+    &.ch-icon {
+        background-image: url('../images/avatareditor/ch-icon.png');
+        width: 29px;
+        height: 24px;
 
-        &.cc-icon {
-            background-image: url('../images/avatareditor/cc-icon.png');
-            width: 31px;
-            height: 29px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/cc-selected-icon.png');
-            }
-        }
-
-        &.ch-icon {
-            background-image: url('../images/avatareditor/ch-icon.png');
-            width: 29px;
-            height: 24px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/ch-selected-icon.png');
-            }
-        }
-
-        &.cp-icon {
-            background-image: url('../images/avatareditor/cp-icon.png');
-            width: 25px;
-            height: 25px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/cp-selected-icon.png');
-            }
-        }
-
-        &.ea-icon {
-            background-image: url('../images/avatareditor/ea-icon.png');
-            width: 35px;
-            height: 16px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/ea-selected-icon.png');
-            }
-        }
-
-        &.fa-icon {
-            background-image: url('../images/avatareditor/fa-icon.png');
-            width: 27px;
-            height: 20px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/fa-selected-icon.png');
-            }
-        }
-
-        &.female-icon {
-            background-image: url('../images/avatareditor/female-icon.png');
-            width: 18px;
-            height: 27px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/female-selected-icon.png');
-            }
-        }
-
-        &.ha-icon {
-            background-image: url('../images/avatareditor/ha-icon.png');
-            width: 25px;
-            height: 22px;
-
-            &.selected {
-                background-image: url('../images/avatareditor/ha-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/ch-selected-icon.png');
         }
+    }
 
-        &.he-icon {
-            background-image: url('../images/avatareditor/he-icon.png');
-            width: 31px;
-            height: 27px;
+    &.cp-icon {
+        background-image: url('../images/avatareditor/cp-icon.png');
+        width: 30px;
+        height: 24px;
 
-            &.selected {
-                background-image: url('../images/avatareditor/he-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/cp-selected-icon.png');
         }
+    }
 
-        &.hr-icon {
-            background-image: url('../images/avatareditor/hr-icon.png');
-            width: 29px;
-            height: 25px;
+    &.ea-icon {
+        background-image: url('../images/avatareditor/ea-icon.png');
+        width: 35px;
+        height: 16px;
 
-            &.selected {
-                background-image: url('../images/avatareditor/hr-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/ea-selected-icon.png');
         }
+    }
 
-        &.lg-icon {
-            background-image: url('../images/avatareditor/lg-icon.png');
-            width: 19px;
-            height: 20px;
+    &.fa-icon {
+        background-image: url('../images/avatareditor/fa-icon.png');
+        width: 27px;
+        height: 20px;
 
-            &.selected {
-                background-image: url('../images/avatareditor/lg-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/fa-selected-icon.png');
         }
+    }
 
-        &.loading-icon {
-            background-image: url('../images/avatareditor/loading-icon.png');
-            width: 21px;
-            height: 25px;
-        }
-
-        &.male-icon {
-            background-image: url('../images/avatareditor/male-icon.png');
-            width: 21px;
-            height: 21px;
+    &.female-icon {
+        background-image: url('../images/avatareditor/female-icon.png');
+        width: 18px;
+        height: 27px;
 
-            &.selected {
-                background-image: url('../images/avatareditor/male-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/female-selected-icon.png');
         }
+    }
 
-        &.sh-icon {
-            background-image: url('../images/avatareditor/sh-icon.png');
-            width: 37px;
-            height: 10px;
+    &.ha-icon {
+        background-image: url('../images/avatareditor/ha-icon.png');
+        width: 25px;
+        height: 22px;
 
-            &.selected {
-                background-image: url('../images/avatareditor/sh-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/ha-selected-icon.png');
         }
+    }
 
-        &.wa-icon {
-            background-image: url('../images/avatareditor/wa-icon.png');
-            width: 36px;
-            height: 18px;
+    &.he-icon {
+        background-image: url('../images/avatareditor/he-icon.png');
+        width: 31px;
+        height: 27px;
 
-            &.selected {
-                background-image: url('../images/avatareditor/wa-selected-icon.png');
-            }
+        &.selected {
+            background-image: url('../images/avatareditor/he-selected-icon.png');
         }
+    }
 
-        &.chatstyles-icon {
-            background-image: url('../images/chat/styles-icon.png');
-            width: 17px;
-            height: 19px;
-        }
+    &.hr-icon {
+        background-image: url('../images/avatareditor/hr-icon.png');
+        width: 29px;
+        height: 25px;
 
-        &.pencil-icon {
-            background-image: url('../images/infostand/pencil-icon.png');
-            width: 17px;
-            height: 18px;
+        &.selected {
+            background-image: url('../images/avatareditor/hr-selected-icon.png');
         }
+    }
 
-        &.trade-locked-icon {
-            background-image: url('../images/inventory/trading/locked-icon.png');
-            width: 29px;
-            height: 43px;
-        }
+    &.lg-icon {
+        background-image: url('../images/avatareditor/lg-icon.png');
+        width: 19px;
+        height: 20px;
 
-        &.trade-unlocked-icon {
-            background-image: url('../images/inventory/trading/unlocked-icon.png');
-            width: 29px;
-            height: 43px;
+        &.selected {
+            background-image: url('../images/avatareditor/lg-selected-icon.png');
         }
+    }
 
-		&.modtool-room-icon {
-			background-image: url('../images/modtool/room.png');
-			width: 20px;
-			height: 15px;
-		}
-
-		&.modtool-chatlog-icon {
-			background-image: url('../images/modtool/chatlog.gif');
-			width: 20px;
-			height: 15px;
-		}
-
-		&.modtool-user-icon{
-			background-image: url('../images/modtool/user.gif');
-			width: 20px;
-			height: 15px;
-		}
-
-		&.modtool-reports-icon {
-			background-image: url('../images/modtool/reports.png');
-			width: 20px;
-			height: 15px;
-		}
-
-        &.modtool-wrench-icon {
-            background-image: url('../images/modtool/wrench.gif');
-            width: 20px;
-            height: 15px;
-        }
-
-        &.modtool-key-icon {
-            background-image: url('../images/modtool/key.gif');
-            width: 20px;
-            height: 15px;
-        }
-
-        &.icon-catalogue-hc_small {
-            background-image: url('../images/catalog/hc_small.png');
-            height: 17px;
-            width: 31px;
-        }
-
-        &.icon-catalogue-hc_big {
-            background: url('../images/catalog/hc_big.png');
-            width: 68px;
-            height: 40px;
-        }
+    &.loading-icon {
+        background-image: url('../images/icons/loading-icon.png');
+        width: 17px;
+        height: 21px;
+    }
 
-        &.icon-sign-exclamation {
-            background: url('../images/icons/sign-exclamation.png');
-            width: 7px;
-            height: 17px;
+    &.male-icon {
+        background-image: url('../images/avatareditor/male-icon.png');
+        width: 21px;
+        height: 21px;
+
+        &.selected {
+            background-image: url('../images/avatareditor/male-selected-icon.png');
         }
-
-        &.icon-sign-heart {
-            background: url('../images/icons/sign-heart.png');
-            width: 15px;
-            height: 13px;
-        }
-
-        &.icon-sign-red {
-            background: url('../images/icons/sign-red.png');
-            width: 11px;
-            height: 19px;
-        }
-
-        &.icon-sign-yellow {
-            background: url('../images/icons/sign-yellow.png');
-            width: 11px;
-            height: 19px;
-        }
-
-        &.icon-sign-skull {
-            background: url('../images/icons/sign-skull.png');
-            width: 12px;
-            height: 12px;
-        }
-
-        &.icon-sign-smile {
-            background: url('../images/icons/sign-smile.png');
-            width: 7px;
-            height: 14px;
-        }
-
-        &.icon-sign-soccer {
-            background: url('../images/icons/sign-soccer.png');
-            width: 20px;
-            height: 20px;
-        }
-
-        &.icon-camera-colormatrix {
-            background: url('../images/icons/camera-colormatrix.png');
-            width: 32px;
-            height: 14px;
-        }
-
-        &.icon-camera-composite {
-            background: url('../images/icons/camera-composite.png');
-            width: 32px;
-            height: 14px;
-        }
-
-        &.icon-user-profile {
-            background: url('../images/icons/user-profile.png');
-            width: 13px;
-            height: 11px;
-
-            &:hover {
-                background: url('../images/icons/user-profile-hover.png');
-            }
-        }
-
-        &.icon-fb-profile {
-            background: url('../images/toolbar/icons/friend-bar/profile.png');
-            width: 21px;
-            height: 21px;
-        }
-
-        &.icon-fb-chat {
-            background: url('../images/toolbar/icons/friend-bar/chat.png');
-            width: 20px;
-            height: 21px;
-        }
-
-        &.icon-fb-visit {
-            background: url('../images/toolbar/icons/friend-bar/visit.png');
-            width: 21px;
-            height: 21px;
-        }
-
-        &.spin {
-            animation: rotating 1s linear infinite;
-        }
-
-        @keyframes rotating {
-            from {
-                transform: rotate(0);
-            }
-
-            to {
-                transform: rotate(360deg);
-            }
+    }
+
+    &.sh-icon {
+        background-image: url('../images/avatareditor/sh-icon.png');
+        width: 37px;
+        height: 10px;
+
+        &.selected {
+            background-image: url('../images/avatareditor/sh-selected-icon.png');
+        }
+    }
+
+    &.wa-icon {
+        background-image: url('../images/avatareditor/wa-icon.png');
+        width: 36px;
+        height: 18px;
+
+        &.selected {
+            background-image: url('../images/avatareditor/wa-selected-icon.png');
+        }
+    }
+
+    &.sellable-icon {
+        background-image: url('../images/avatareditor/sellable-icon.png');
+        width: 17px;
+        height: 15px;
+    }
+
+    &.chatstyles-icon {
+        background-image: url('../images/chat/styles-icon.png');
+        width: 17px;
+        height: 19px;
+    }
+
+    &.pencil-icon {
+        background-image: url('../images/infostand/pencil-icon.png');
+        width: 17px;
+        height: 18px;
+    }
+
+    &.trade-locked-icon {
+        background-image: url('../images/inventory/trading/locked-icon.png');
+        width: 29px;
+        height: 43px;
+    }
+
+    &.trade-unlocked-icon {
+        background-image: url('../images/inventory/trading/unlocked-icon.png');
+        width: 29px;
+        height: 43px;
+    }
+
+    &.modtool-room-icon {
+        background-image: url('../images/modtool/room.png');
+        width: 20px;
+        height: 15px;
+    }
+
+    &.modtool-chatlog-icon {
+        background-image: url('../images/modtool/chatlog.gif');
+        width: 20px;
+        height: 15px;
+    }
+
+    &.modtool-user-icon{
+        background-image: url('../images/modtool/user.gif');
+        width: 20px;
+        height: 15px;
+    }
+
+    &.modtool-reports-icon {
+        background-image: url('../images/modtool/reports.png');
+        width: 20px;
+        height: 15px;
+    }
+
+    &.modtool-wrench-icon {
+        background-image: url('../images/modtool/wrench.gif');
+        width: 20px;
+        height: 15px;
+    }
+
+    &.modtool-key-icon {
+        background-image: url('../images/modtool/key.gif');
+        width: 20px;
+        height: 15px;
+    }
+
+    &.icon-catalogue-hc_small {
+        background-image: url('../images/catalog/hc_small.png');
+        height: 17px;
+        width: 31px;
+    }
+
+    &.icon-catalogue-hc_big {
+        background: url('../images/catalog/hc_big.png');
+        width: 68px;
+        height: 40px;
+    }
+
+    &.icon-sign-exclamation {
+        background: url('../images/icons/sign-exclamation.png');
+        width: 7px;
+        height: 17px;
+    }
+
+    &.icon-sign-heart {
+        background: url('../images/icons/sign-heart.png');
+        width: 15px;
+        height: 13px;
+    }
+
+    &.icon-sign-red {
+        background: url('../images/icons/sign-red.png');
+        width: 11px;
+        height: 19px;
+    }
+
+    &.icon-sign-yellow {
+        background: url('../images/icons/sign-yellow.png');
+        width: 11px;
+        height: 19px;
+    }
+
+    &.icon-sign-skull {
+        background: url('../images/icons/sign-skull.png');
+        width: 12px;
+        height: 12px;
+    }
+
+    &.icon-sign-smile {
+        background: url('../images/icons/sign-smile.png');
+        width: 7px;
+        height: 14px;
+    }
+    
+    &.icon-sign-soccer {
+        background: url('../images/icons/sign-soccer.png');
+        width: 20px;
+        height: 20px;
+    }
+    
+    &.icon-house-small {
+        background: url('../images/icons/house-small.png');
+        width: 19px;
+        height: 14px;
+    }
+
+    &.icon-camera-small {
+        background: url('../images/icons/camera-small.png');
+        width: 17px;
+        height: 15px;
+    }
+
+    &.icon-arrows {
+        background: url('../images/icons/arrows.png');
+        width: 17px;
+        height: 15px;
+    }
+    
+    &.icon-fb-profile {
+        background: url('../images/toolbar/icons/friend-bar/profile.png');
+        width: 21px;
+        height: 21px;
+    }
+
+    &.icon-camera-colormatrix {
+        background: url('../images/icons/camera-colormatrix.png');
+        width: 32px;
+        height: 14px;
+    }
+
+    &.icon-camera-composite {
+        background: url('../images/icons/camera-composite.png');
+        width: 32px;
+        height: 14px;
+    }
+
+    &.icon-user-profile {
+        background: url('../images/icons/user-profile.png');
+        width: 13px;
+        height: 11px;
+
+        &:hover {
+            background: url('../images/icons/user-profile-hover.png');
+        }
+    }
+
+    &.icon-fb-profile {
+        background: url('../images/toolbar/icons/friend-bar/profile.png');
+        width: 21px;
+        height: 21px;
+    }
+
+    &.icon-fb-chat {
+        background: url('../images/toolbar/icons/friend-bar/chat.png');
+        width: 20px;
+        height: 21px;
+    }
+
+    &.icon-fb-visit {
+        background: url('../images/toolbar/icons/friend-bar/visit.png');
+        width: 21px;
+        height: 21px;
+    }
+
+    &.spin {
+        animation: rotating 1s linear infinite;
+    }
+
+    @keyframes rotating {
+        from {
+            transform: rotate(0);
+        }
+
+        to {
+            transform: rotate(360deg);
         }
     }
 }

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 @import './fontawesome/brands';
 @import './fontawesome/regular';
 @import './scrollbars';
+@import './slider';
 @import './grid';
 @import './icons';
 @import './utils';

src/assets/styles/scrollbars.scss

@@ -1,25 +1,21 @@
 ::-webkit-scrollbar {
-    width: 7px;
-    height: 5px;
+    width: 0.5rem;
 }
 
 ::-webkit-scrollbar-track {
-    border-radius: $border-radius;
-    background: rgba($black,.1);
-    box-shadow:inset 0 0 1px 1px rgba($black,.1);
-    padding-top:3px;
+    background-clip: padding-box;
+    border-right: 0.25rem solid rgba($black, .1);
 }
 
 ::-webkit-scrollbar-thumb {
-    border-radius: $border-radius;
-    background: rgba($primary,.4);
-    width: 4px;
-}
+    background-clip: padding-box;
+    border-right: 0.25rem solid rgba($primary, .4);
 
-::-webkit-scrollbar-thumb:hover {
-    background: rgba($primary,.8);
-}
+    &:hover {
+        border-right: 0.25rem solid rgba($primary, .8);
+    }
 
-::-webkit-scrollbar-thumb:active {
-    background: $secondary;
+    &:active {
+        border-right: 0.25rem solid $secondary;
+    }
 }

src/assets/styles/slider.scss

@@ -0,0 +1,54 @@
+.nitro-slider {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 25px;
+
+    .track {
+        height: 3px;
+        border-radius: $border-radius;
+        overflow: hidden;
+
+        &.track-0 {
+            background-color: $primary;
+        }
+
+        &.track-1 {
+            background-color: $muted;
+        }
+    }
+
+    .thumb {
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        background-color: gray;
+        font-size: 10px;
+        text-align: center;
+        line-height: 25px;
+        padding: 0 3px;
+
+        &:hover,
+        .active {
+            cursor: pointer;
+        }
+
+        &.active {
+            outline: none;
+        }
+
+        &.degree {
+
+            &:after {
+                content: "\00b0"
+            }
+        }
+
+        &.percent {
+
+            &:after {
+                content: "\0025"
+            }
+        }
+    }
+}

src/assets/styles/utils.scss

@@ -14,6 +14,10 @@
     transform: scale(2) translateZ(0);
 }
 
+.opacity-0-5 {
+    opacity: 0.5;
+}
+
 .text-shadow {
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 }
@@ -39,22 +43,10 @@ ul {
     pointer-events: none;
 }
 
-.t-0 {
-    top: 0 !important;
-}
-
-.b-0 {
-    bottom: 0 !important;
-}
-
-.l-0 {
-    left: 0 !important;
-}
-
-.r-0 {
-    right: 0 !important;
-}
-
 .filter-none {
     filter: unset !important;
 }
+
+.w-unset {
+    width: unset;
+}

src/events/achievements/AchievementsUIEvent.ts

@@ -0,0 +1,8 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class AchievementsUIEvent extends NitroEvent
+{
+    public static SHOW_ACHIEVEMENTS: string = 'AE_SHOW_ACHIEVEMENTS';
+    public static HIDE_ACHIEVEMENTS: string = 'AE_HIDE_ACHIEVEMENTS';
+    public static TOGGLE_ACHIEVEMENTS: string = 'AE_TOGGLE_ACHIEVEMENTS';
+}

src/events/achievements/index.ts

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

src/events/friend-list/FriendEnteredRoomEvent.ts

@@ -0,0 +1,11 @@
+import { RoomWidgetObjectNameEvent } from '../../views/room/events';
+
+export class FriendEnteredRoomEvent extends RoomWidgetObjectNameEvent
+{
+    public static ENTERED: string = 'FERE_ENTERED';
+
+    constructor(roomIndex: number, category: number, id: number, name: string, userType: number)
+    {
+        super(FriendEnteredRoomEvent.ENTERED, roomIndex, category, id, name, userType);
+    }
+}

src/events/friend-list/FriendListSendFriendRequestEvent.ts

@@ -0,0 +1,20 @@
+import { FriendListEvent } from './FriendListEvent';
+
+export class FriendListSendFriendRequestEvent extends FriendListEvent
+{
+    public static SEND_FRIEND_REQUEST: string = 'FLSFRE_SEND_FRIEND_REQUEST';
+
+    private _userId: number;
+
+    constructor(userId: number)
+    {
+        super(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST);
+
+        this._userId = userId;
+    }
+
+    public get userId(): number
+    {
+        return this._userId;
+    }
+}

src/events/friend-list/index.ts

@@ -1 +1,2 @@
+export * from './FriendEnteredRoomEvent';
 export * from './FriendListEvent';

src/events/inventory/InventoryTradeRequestEvent.ts

@@ -0,0 +1,27 @@
+import { InventoryEvent } from './InventoryEvent';
+
+export class InventoryTradeRequestEvent extends InventoryEvent
+{
+    public static REQUEST_TRADE: string = 'ITSE_REQUEST_TRADE';
+
+    private _objectId: number;
+    private _username: string;
+
+    constructor(objectId: number, username: string)
+    {
+        super(InventoryTradeRequestEvent.REQUEST_TRADE);
+
+        this._objectId = objectId;
+        this._username = username;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get username(): string
+    {
+        return this._username;
+    }
+}

src/events/inventory/InventoryTradeStartEvent.ts

@@ -0,0 +1,28 @@
+import { TradeUserData } from '../../views/inventory/common/TradeUserData';
+import { InventoryEvent } from './InventoryEvent';
+
+export class InventoryTradeStartEvent extends InventoryEvent
+{
+    public static START_TRADE: string = 'ITSE_START_TRADE';
+
+    private _ownUserTradeData: TradeUserData;
+    private _otherUserTradeData: TradeUserData;
+
+    constructor(ownUserTradeData: TradeUserData, otherUserTradeData: TradeUserData)
+    {
+        super(InventoryTradeStartEvent.START_TRADE);
+
+        this._ownUserTradeData = ownUserTradeData;
+        this._otherUserTradeData = otherUserTradeData;
+    }
+
+    public get ownUserTradeData(): TradeUserData
+    {
+        return this._ownUserTradeData;
+    }
+
+    public get otherUserTradeData(): TradeUserData
+    {
+        return this._otherUserTradeData;
+    }
+}

src/events/inventory/UnseenItemTrackerUpdateEvent.ts

@@ -0,0 +1,20 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class UnseenItemTrackerUpdateEvent extends NitroEvent
+{
+    public static UPDATE_COUNT: string = 'UITUE_UPDATE_COUNTER';
+
+    private _count: number;
+
+    constructor(count: number)
+    {
+        super(UnseenItemTrackerUpdateEvent.UPDATE_COUNT);
+
+        this._count = count;
+    }
+
+    public get count(): number
+    {
+        return this._count;
+    }
+}

src/events/inventory/index.ts

@@ -1 +1,4 @@
 export * from './InventoryEvent';
+export * from './InventoryTradeRequestEvent';
+export * from './InventoryTradeStartEvent';
+export * from './UnseenItemTrackerUpdateEvent';

src/events/mod-tools/ModToolsEvent.ts

@@ -0,0 +1,10 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class ModToolsEvent extends NitroEvent
+{
+    public static SHOW_MOD_TOOLS: string = 'MTE_SHOW_MOD_TOOLS';
+    public static HIDE_MOD_TOOLS: string = 'MTE_HIDE_MOD_TOOLS';
+    public static TOGGLE_MOD_TOOLS: string = 'MTE_TOGGLE_MOD_TOOLS';
+    public static SELECT_USER: string = 'MTE_SELECT_USER';
+    public static OPEN_ROOM_INFO: string = 'MTE_OPEN_ROOM_INFO';
+}

src/events/mod-tools/ModToolsOpenRoomInfoEvent.ts

@@ -0,0 +1,18 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsOpenRoomInfoEvent extends ModToolsEvent
+{
+    private _roomId: number;
+
+    constructor(roomId: number)
+    {
+        super(ModToolsEvent.OPEN_ROOM_INFO);
+
+        this._roomId = roomId;
+    }
+
+    public get roomId(): number
+    {
+        return this._roomId;
+    }
+}

src/events/mod-tools/ModToolsSelectUserEvent.ts

@@ -0,0 +1,25 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsSelectUserEvent extends ModToolsEvent
+{
+    private _webID: number;
+    private _name: string;
+
+    constructor(webID: number, name: string)
+    {
+        super(ModToolsEvent.SELECT_USER);
+
+        this._webID = webID;
+        this._name = name;
+    }
+
+    public get webID(): number
+    {
+        return this._webID;
+    }
+
+    public get name(): string
+    {
+        return this._name;
+    }
+}

src/events/navigator/NavigatorEvent.ts

@@ -5,6 +5,9 @@ export class NavigatorEvent extends NitroEvent
     public static SHOW_NAVIGATOR: string = 'NE_SHOW_NAVIGATOR';
     public static HIDE_NAVIGATOR: string = 'NE_HIDE_NAVIGATOR';
     public static TOGGLE_NAVIGATOR: string = 'NE_TOGGLE_NAVIGATOR';
+    public static TOGGLE_ROOM_INFO: string = 'NE_TOGGLE_ROOM_INFO';
+    public static TOGGLE_ROOM_LINK: string = 'NE_TOGGLE_ROOM_LINK';
+    public static TOGGLE_ROOM_SETTINGS: string = 'NE_TOGGLE_ROOM_SETTINGS';
 
     private _roomId: number;
     private _password: string;

src/events/notification-center/NotificationCenterAlertEvent.ts

@@ -0,0 +1,34 @@
+import { NitroEvent } from 'nitro-renderer';
+
+export class NotificationCenterAlertEvent extends NitroEvent
+{
+    public static HOTEL_ALERT: string = 'NCAE_HOTEL_ALERT';
+
+    private _message: string[];
+    private _clickUrl: string;
+    private _headerText: string;
+
+    constructor(type: string, message: string[], clickUrl = null, headerText = null)
+    {
+        super(type);
+
+        this._message = message;
+        this._clickUrl = clickUrl;
+        this._headerText = headerText;
+    }
+
+    public get message(): string[]
+    {
+        return this._message;
+    }
+
+    public get clickUrl(): string
+    {
+        return this._clickUrl;
+    }
+
+    public get headerText(): string
+    {
+        return this._headerText;
+    }
+}

src/events/notification-center/index.ts

@@ -1,2 +1,3 @@
 export * from './NotificationCenterAddNotificationEvent';
+export * from './NotificationCenterAlertEvent';
 export * from './NotificationCenterEvent';

src/events/room-widgets/thumbnail/RoomWidgetThumbnailEvent.ts

@@ -0,0 +1,8 @@
+import { RoomWidgetUpdateEvent } from '../../../views/room/events/RoomWidgetUpdateEvent';
+
+export class RoomWidgetThumbnailEvent extends RoomWidgetUpdateEvent
+{
+    public static SHOW_THUMBNAIL: string = 'NE_SHOW_THUMBNAIL';
+    public static HIDE_THUMBNAIL: string = 'NE_HIDE_THUMBNAIL';
+    public static TOGGLE_THUMBNAIL: string = 'NE_TOGGLE_THUMBNAIL';
+}

src/events/room-widgets/thumbnail/index.ts

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

src/hooks/UseMountEffect.tsx

@@ -0,0 +1,3 @@
+import { useEffect } from 'react';
+
+export const UseMountEffect = (fun: Function) => useEffect(() => fun(), []);

src/hooks/events/core/communication/communication-event.tsx

@@ -1,8 +1,8 @@
 import { NitroEvent } from 'nitro-renderer';
-import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
+import { GetCommunication } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
 
 export function useCommunicationEvent(type: string, handler: (event: NitroEvent) => void): void
 {
-    CreateEventDispatcherHook(type, Nitro.instance.communication.events, handler);
+    CreateEventDispatcherHook(type, GetCommunication().events, handler);
 }

src/hooks/events/core/configuration/configuration-event.tsx

@@ -1,8 +1,8 @@
 import { NitroEvent } from 'nitro-renderer';
-import { Nitro } from 'nitro-renderer/src/nitro/Nitro';
+import { GetConfigurationManager } from '../../../../api';
 import { CreateEventDispatcherHook } from '../../event-dispatcher.base';
 
 export function useConfigurationEvent(type: string, handler: (event: NitroEvent) => void): void
 {
-    CreateEventDispatcherHook(type, Nitro.instance.core.configuration.events, handler);
+    CreateEventDispatcherHook(type, GetConfigurationManager().events, handler);
 }

src/hooks/events/core/index.ts

@@ -1 +1,2 @@
+export * from './communication';
 export * from './configuration';