Dev

.gitignore

@@ -29,3 +29,5 @@ Thumbs.db
 .env
 public/renderer-config*
 public/ui-config*
+renderer-config*
+ui-config*

README.md

@@ -21,6 +21,8 @@ Thanks to everyone that has helped out contributing to this UI:
 - Laynester
 - Dennis
 - Object
+- Habbobba
+- Tardelivinicius
 
 # Nitro Client installation
 
@@ -70,5 +72,5 @@ To build a production version of Nitro just run the following command
 yarn build:prod
 ```
 
--   A `build` folder will be generated, these are the files that must be uploaded to your webserver
+-   A `dist` folder will be generated, these are the files that must be uploaded to your webserver
 -   Consult your CMS documentation for compatibility with Nitro and how to add the production files

public/renderer-config.json.example

@@ -88,7 +88,7 @@
         "bearbaby",
         "terrierbaby",
         "gnome",
-        "gnome",
+        "leprechaun",
         "kittenbaby",
         "puppybaby",
         "pigletbaby",
@@ -97,9 +97,7 @@
         "pterosaur",
         "velociraptor",
         "cow",
-        "LeetPen",
-        "bbwibb",
-        "elephants"
+        "dragondog"
     ],
     "preload.assets.urls": [
         "${asset.url}/bundled/generic/avatar_additions.nitro",

public/ui-config.json.example

@@ -133,6 +133,7 @@
     "catalog.asset.icon.url": "${catalog.asset.url}/icon_%name%.png",
     "catalog.tab.icons": false,
     "catalog.headers": false,
+    "catalog.gifts.show.my.face": true,
     "chat.input.maxlength": 100,
     "chat.styles.disabled": [],
     "chat.styles": [

src/App.scss

@@ -16,22 +16,22 @@ $grid-border-color: $muted;
 $grid-active-bg-color: #ececec;
 $grid-active-border-color: $white;
 
-$toolbar-height: 55px;
+$toolbar-height: 51px;
 
 $achievement-width: 375px;
 $achievement-height: 405px;
 
-$avatar-editor-width: 660px;
-$avatar-editor-height: 470px;
+$avatar-editor-width: 500px;
+$avatar-editor-height: 520px;
 
-$catalog-width: 570px;
+$catalog-width: 600px;
 $catalog-height: 635px;
 
-$inventory-width: 528px;
-$inventory-height: 320px;
+$inventory-width: 500px;
+$inventory-height: 342px;
 
 $navigator-width: 425px;
-$navigator-height: 560px;
+$navigator-height: 500px;
 $navigator-min-height: 205px;
 
 $nitro-room-creator-width: 585px;
@@ -41,7 +41,7 @@ $chat-input-style-selector-widget-width: 210px;
 $chat-input-style-selector-widget-height: 500px;
 
 $user-profile-width: 470px;
-$user-profile-height: 460px;
+$user-profile-height: 538px;
 
 $nitro-widget-custom-stack-height-width: 275px;
 $nitro-widget-custom-stack-height-height: 220px;
@@ -75,7 +75,7 @@ $camera-editor-height: 500px;
 
 $camera-checkout-width: 350px;
 
-$room-info-width: 230px;
+$room-info-width: 236px;
 
 $nitro-group-creator-width: 383px;
 $nitro-mod-tools-width: 170px;

src/api/catalog/CatalogGetTypePrice.ts

@@ -0,0 +1,11 @@
+export const getTypePrice = (type: string) =>
+{
+    const priceState = {
+        'price_type_none'                       : 'grid-bg',
+        'price_type_credits'                    : 'credits-bg',
+        'price_type_activitypoints'             : 'duckets-bg',
+        'price_type_credits_and_activitypoints' : 'grid-bg'
+    };
+
+    return priceState[type];
+}

src/api/catalog/index.ts

@@ -1,4 +1,5 @@
 export * from './BuilderFurniPlaceableStatus';
+export * from './CatalogGetTypePrice';
 export * from './CatalogNode';
 export * from './CatalogPage';
 export * from './CatalogPageName';

src/api/friends/FriendListTabs.ts

@@ -0,0 +1,6 @@
+export class FriendListTabs
+{
+    public static readonly YOUR_FRIENDS: string = 'friendlist.tip.tab.1';
+    public static readonly REQUESTS: string = 'friendlist.tip.tab.2';
+    public static readonly SEARCH_HABBOS: string = 'friendlist.tip.tab.3';
+}

src/api/friends/MessengerFollowFriendFailedType.ts

@@ -0,0 +1,7 @@
+export class MessengerFollowFriendFailedType
+{
+    public static readonly NOT_IN_FRIEND_LIST = 0;
+    public static readonly FRIEND_OFFLINE = 1;
+    public static readonly FRIEND_NOT_IN_ROOM = 2;
+    public static readonly FRIEND_BLOCKED_STALKING = 3;
+}

src/api/friends/index.ts

@@ -1,5 +1,7 @@
+export * from './FriendListTabs';
 export * from './GetGroupChatData';
 export * from './IGroupChatData';
+export * from './MessengerFollowFriendFailedType';
 export * from './MessengerFriend';
 export * from './MessengerGroupType';
 export * from './MessengerIconState';

src/api/utils/GetLocalStorage.ts

@@ -2,7 +2,7 @@ export const GetLocalStorage = <T>(key: string) =>
 {
     try
     {
-        JSON.parse(window.localStorage.getItem(key)) as T ?? null
+        return JSON.parse(window.localStorage.getItem(key)) as T ?? null
     }
     catch(e)
     {

src/api/utils/LocalizeShortNumber.ts

@@ -19,7 +19,7 @@ export function LocalizeShortNumber(number: number): string
 
     for(const power of powers)
     {
-        let reduced = abs / power.value;
+        let reduced = parseFloat((abs / power.value).toFixed(0));
 
         reduced = Math.round(reduced * rounder) / rounder;
 

src/assets/styles/bootstrap/_buttons.scss

@@ -54,6 +54,34 @@
 
 }
 
+.btn-gray {
+  border-image-source: url("@/assets/flash/buttons/button_gray.png");
+  color: #fff;
+  font-family: ubuntuBold;
+
+  &:hover {
+    border-image-source: url("@/assets/flash/buttons/button_gray_hover.png");
+  }
+
+  &:active {
+    border-image-source: url("@/assets/flash/buttons/button_gray_active.png");
+  }
+}
+
+.btn-mod-tools {
+  border-image-source: url("@/assets/flash/modtools/button.png");
+  color: #fff;
+  font-family: ubuntuBold;
+
+  &:hover {
+    border-image-source: url("@/assets/flash/modtools/button_hover.png");
+  }
+
+  &:active {
+    border-image-source: url("@/assets/flash/modtools/button_active.png");
+  }
+}
+
 // scss-docs-end btn-variant-loops
 
 
@@ -168,6 +196,10 @@
   &:active {
     border-image-source: url(@/assets/flash/buttons/volter_normal_btn_active.png);
   }
+
+  &.active {
+    border-image-source: url(@/assets/flash/buttons/volter_normal_btn_active.png);
+  }
 }
 
 .notification-buttons {
@@ -197,6 +229,9 @@
   outline: 1px solid #000;
   border: 3px solid #fff;
   min-height: 22px;
-  min-width: 23px;
+  min-width: 27px;
 
+  &.active {
+    border: 5px solid #fff;
+  }
 }