Eslint updates

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+    "root": true,
     "settings": {
         "react": {
             "pragma": "React",
@@ -32,8 +33,13 @@
         "@typescript-eslint/indent": [ "error", 4, { "SwitchCase": 1 } ],
         "array-bracket-spacing": [ "error", "always" ],
         "brace-style": [ "error", "allman" ],
+        "template-curly-spacing": [ "error", "always" ],
+        "no-multi-spaces": [ "error" ],
         "react/prop-types": [ "off" ],
-        "object-curly-spacing": [ "error", "always" ],
+        "jsx-quotes": [ "error" ],
+        "react/jsx-curly-spacing": [ "error", "always" ],
+        "react/jsx-equals-spacing": [ "error" ],
+        "@typescript-eslint/object-curly-spacing": [ "error", "always", { "arraysInObjects": true, "objectsInObjects": false } ],
         "@typescript-eslint/ban-types": [
             "error",
             {

src/App.tsx

@@ -140,7 +140,7 @@ export const App: FC<{}> = props =>
     return (
         <Base fit overflow="hidden">
             { (!isReady || isError) &&
-                <LoadingView isError={isError} message={message} percent={ percent } /> }
+                <LoadingView isError={ isError } message={ message } percent={ percent } /> }
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady) }>
                 <MainView />
             </TransitionAnimation>

src/api/friends/OpenMessengerChat.ts

@@ -3,5 +3,5 @@ import { CreateLinkEvent } from '..';
 export function OpenMessengerChat(friendId: number = 0): void
 {
     if(friendId === 0) CreateLinkEvent('friends-messenger/open');
-    else CreateLinkEvent(`friends-messenger/${friendId}`);
+    else CreateLinkEvent(`friends-messenger/${ friendId }`);
 }

src/api/groups/GetGroupManager.ts

@@ -2,5 +2,5 @@ import { CreateLinkEvent } from '..';
 
 export function GetGroupManager(groupId: number): void
 {
-    CreateLinkEvent(`groups/manage/${groupId}`);
+    CreateLinkEvent(`groups/manage/${ groupId }`);
 }

src/api/inventory/FurnitureItem.ts

@@ -31,28 +31,28 @@ export class FurnitureItem implements IFurnitureItem
     {
         if(!parser) return;
         
-        this._locked                = false;
-        this._id                    = parser.itemId;
-        this._type                  = parser.spriteId;
-        this._ref                   = parser.ref;
-        this._category              = parser.category;
-        this._groupable             = ((parser.isGroupable) && (!(parser.rentable)));
-        this._tradeable             = parser.tradable;
-        this._recyclable            = parser.isRecycleable;
-        this._sellable              = parser.sellable;
-        this._stuffData             = parser.stuffData;
-        this._extra                 = parser.extra;
-        this._secondsToExpiration   = parser.secondsToExpiration;
-        this._expirationTimeStamp   = parser.expirationTimeStamp;
-        this._hasRentPeriodStarted  = parser.hasRentPeriodStarted;
-        this._creationDay           = parser.creationDay;
-        this._creationMonth         = parser.creationMonth;
-        this._creationYear          = parser.creationYear;
-        this._slotId                = parser.slotId;
-        this._songId                = parser.songId;
-        this._flatId                = parser.flatId;
-        this._isRented              = parser.rentable;
-        this._isWallItem            = parser.isWallItem;
+        this._locked = false;
+        this._id = parser.itemId;
+        this._type = parser.spriteId;
+        this._ref = parser.ref;
+        this._category = parser.category;
+        this._groupable = ((parser.isGroupable) && (!(parser.rentable)));
+        this._tradeable = parser.tradable;
+        this._recyclable = parser.isRecycleable;
+        this._sellable = parser.sellable;
+        this._stuffData = parser.stuffData;
+        this._extra = parser.extra;
+        this._secondsToExpiration = parser.secondsToExpiration;
+        this._expirationTimeStamp = parser.expirationTimeStamp;
+        this._hasRentPeriodStarted = parser.hasRentPeriodStarted;
+        this._creationDay = parser.creationDay;
+        this._creationMonth = parser.creationMonth;
+        this._creationYear = parser.creationYear;
+        this._slotId = parser.slotId;
+        this._songId = parser.songId;
+        this._flatId = parser.flatId;
+        this._isRented = parser.rentable;
+        this._isWallItem = parser.isWallItem;
     }
 
     public get rentable(): boolean

src/api/inventory/GroupItem.ts

@@ -95,8 +95,8 @@ export class GroupItem
 
         if(!furnitureItem) return items;
 
-        let found   = 0;
-        let i       = 0;
+        let found = 0;
+        let i = 0;
 
         while(i < this._items.length)
         {
@@ -201,8 +201,8 @@ export class GroupItem
     {
         if(this._category === FurniCategory.POST_IT)
         {
-            let count   = 0;
-            let index   = 0;
+            let count = 0;
+            let index = 0;
 
             while(index < this._items.length)
             {

src/api/navigator/NavigatorSearchResultViewDisplayMode.ts

@@ -1,6 +1,6 @@
 export class NavigatorSearchResultViewDisplayMode
 {
-    public static readonly LIST: number                 = 0;
-    public static readonly THUMBNAILS: number           = 1;
-    public static readonly FORCED_THUMBNAILS: number    = 2;
+    public static readonly LIST: number = 0;
+    public static readonly THUMBNAILS: number = 1;
+    public static readonly FORCED_THUMBNAILS: number = 2;
 }

src/api/navigator/RoomSettingsData.ts

@@ -40,37 +40,37 @@ export class RoomSettingsData
     {
         if(!parser) throw new Error('invalid_parser');
 
-        this.roomId                 = parser.roomId;
-        this.roomName               = parser.name;
-        this.roomOriginalName       = parser.name;
-        this.roomDescription        = parser.description;
-        this.categoryId             = parser.categoryId;
-        this.userCount              = parser.userCount;
-        this.tags                   = parser.tags;
-        this.tradeState             = parser.tradeMode;
-        this.allowWalkthrough       = parser.allowWalkthrough;
+        this.roomId = parser.roomId;
+        this.roomName = parser.name;
+        this.roomOriginalName = parser.name;
+        this.roomDescription = parser.description;
+        this.categoryId = parser.categoryId;
+        this.userCount = parser.userCount;
+        this.tags = parser.tags;
+        this.tradeState = parser.tradeMode;
+        this.allowWalkthrough = parser.allowWalkthrough;
 
-        this.lockState              = parser.state;
-        this.originalLockState      = parser.state;
-        this.password               = null;
-        this.confirmPassword        = null;
-        this.allowPets              = parser.allowPets;
-        this.allowPetsEat           = parser.allowPetsEat;
+        this.lockState = parser.state;
+        this.originalLockState = parser.state;
+        this.password = null;
+        this.confirmPassword = null;
+        this.allowPets = parser.allowPets;
+        this.allowPetsEat = parser.allowPetsEat;
 
-        this.usersWithRights        = new Map<number, string>();
+        this.usersWithRights = new Map<number, string>();
 
-        this.hideWalls              = parser.hideWalls;
-        this.wallThickness          = parser.thicknessWall;
-        this.floorThickness         = parser.thicknessFloor;
-        this.chatBubbleMode         = parser.chatSettings.mode;
-        this.chatBubbleWeight       = parser.chatSettings.weight;
-        this.chatBubbleSpeed        = parser.chatSettings.speed;
-        this.chatFloodProtection    = parser.chatSettings.protection;
-        this.chatDistance           = parser.chatSettings.distance;
+        this.hideWalls = parser.hideWalls;
+        this.wallThickness = parser.thicknessWall;
+        this.floorThickness = parser.thicknessFloor;
+        this.chatBubbleMode = parser.chatSettings.mode;
+        this.chatBubbleWeight = parser.chatSettings.weight;
+        this.chatBubbleSpeed = parser.chatSettings.speed;
+        this.chatFloodProtection = parser.chatSettings.protection;
+        this.chatDistance = parser.chatSettings.distance;
 
-        this.muteState              = parser.moderationSettings.allowMute;
-        this.kickState              = parser.moderationSettings.allowKick;
-        this.banState               = parser.moderationSettings.allowBan;
-        this.bannedUsers            = [];
+        this.muteState = parser.moderationSettings.allowMute;
+        this.kickState = parser.moderationSettings.allowKick;
+        this.banState = parser.moderationSettings.allowBan;
+        this.bannedUsers = [];
     }
 }

src/api/nitro/room/DispatchMouseEvent.ts

@@ -28,8 +28,8 @@ export function DispatchMouseEvent(roomId: number, canvasId: number, event: Mous
         {
             if(!didMouseMove) eventType = MouseEventType.DOUBLE_CLICK;
 
-            clickCount  = 0;
-            lastClick   = null;
+            clickCount = 0;
+            lastClick = null;
         }
     }
 

src/api/nitro/room/DispatchTouchEvent.ts

@@ -29,8 +29,8 @@ export function DispatchTouchEvent(roomId: number, canvasId: number, event: Touc
         {
             eventType = MouseEventType.DOUBLE_CLICK;
 
-            clickCount    = 0;
-            lastClick     = null;
+            clickCount = 0;
+            lastClick = null;
         }
     }
 

src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts

@@ -14,11 +14,11 @@ export class RoomWidgetUpdateDimmerStateEvent extends RoomWidgetUpdateEvent
     {
         super(RoomWidgetUpdateDimmerStateEvent.DIMMER_STATE);
 
-        this._state         = state;
-        this._presetId      = presetId;
-        this._effectId      = effectId;
-        this._color         = color;
-        this._brightness    = brightness;
+        this._state = state;
+        this._presetId = presetId;
+        this._effectId = effectId;
+        this._color = color;
+        this._brightness = brightness;
     }
 
     public get state(): number

src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomObjectEvent.ts

@@ -20,9 +20,9 @@ export class RoomWidgetUpdateRoomObjectEvent extends RoomWidgetUpdateEvent
     {
         super(type);
 
-        this._id        = id;
-        this._category  = category;
-        this._roomId    = roomId;
+        this._id = id;
+        this._category = category;
+        this._roomId = roomId;
     }
 
     public get id(): number

src/api/nitro/room/widgets/handlers/FurniturePresentWidgetHandler.ts

@@ -9,10 +9,10 @@ import { RoomWidgetHandler } from './RoomWidgetHandler';
 
 export class FurniturePresentWidgetHandler extends RoomWidgetHandler implements IGetImageListener
 {
-    private static FLOOR: string       = 'floor';
-    private static WALLPAPER: string   = 'wallpaper';
-    private static LANDSCAPE: string   = 'landscape';
-    private static POSTER: string      = 'poster';
+    private static FLOOR: string = 'floor';
+    private static WALLPAPER: string = 'wallpaper';
+    private static LANDSCAPE: string = 'landscape';
+    private static POSTER: string = 'poster';
 
     private _lastFurniId: number = -1;
     private _name: string = null;

src/api/nitro/room/widgets/handlers/FurnitureTrophyWidgetHandler.ts

@@ -24,7 +24,7 @@ export class FurnitureTrophyWidgetHandler extends RoomWidgetHandler
                 const color = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_COLOR);
                 const extra = parseInt(roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_EXTRAS));
 
-                let data  = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
+                let data = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
 
                 const ownerName = data.substring(0, data.indexOf('\t'));
 

src/api/nitro/room/widgets/messages/RoomWidgetFurniActionMessage.ts

@@ -19,10 +19,10 @@ export class RoomWidgetFurniActionMessage extends RoomWidgetMessage
     {
         super(type);
 
-        this._furniId       = id;
+        this._furniId = id;
         this._furniCategory = category;
-        this._offerId       = offerId;
-        this._objectData    = objectData;
+        this._offerId = offerId;
+        this._objectData = objectData;
     }
 
     public get furniId(): number

src/api/nitro/room/widgets/messages/RoomWidgetFurniToWidgetMessage.ts

@@ -24,9 +24,9 @@ export class RoomWidgetFurniToWidgetMessage extends RoomWidgetMessage
     {
         super(type);
 
-        this._objectId  = objectId;
-        this._category  = category;
-        this._roomId    = roomId;
+        this._objectId = objectId;
+        this._category = category;
+        this._roomId = roomId;
     }
 
     public get objectId(): number

src/api/nitro/room/widgets/messages/RoomWidgetRoomObjectMessage.ts

@@ -15,8 +15,8 @@ export class RoomWidgetRoomObjectMessage extends RoomWidgetMessage
     {
         super(type);
 
-        this._id        = id;
-        this._category  = category;
+        this._id = id;
+        this._category = category;
     }
 
     public get id(): number

src/api/nitro/session/IsOwnerOfFurniture.ts

@@ -5,7 +5,7 @@ export function IsOwnerOfFurniture(roomObject: IRoomObject): boolean
 {
     if(!roomObject || !roomObject.model) return false;
 
-    const userId        = GetSessionDataManager().userId;
+    const userId = GetSessionDataManager().userId;
     const objectOwnerId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
 
     return (userId === objectOwnerId);

src/api/utils/ColorUtils.ts

@@ -13,7 +13,7 @@ export class ColorUtils
             const diff = 6 - val.length;
             for(let i = 0; i < diff; i++)
             {
-                val =  '0' + val;
+                val = '0' + val;
             }
         }
         return ( '#' + val);

src/api/wired/WiredSelectionFilter.ts

@@ -38,9 +38,9 @@ export class WiredSelectionFilter extends NitroFilter
         super(vertex, fragment);
 
         this.uniforms.lineColor = new Float32Array(3);
-        this.uniforms.color     = new Float32Array(3);
-        this.lineColor          = lineColor;
-        this.color              = color;
+        this.uniforms.color = new Float32Array(3);
+        this.lineColor = lineColor;
+        this.color = color;
     }
 
     public get lineColor(): number | number[]

src/common/draggable-window/DraggableWindow.tsx

@@ -107,8 +107,8 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
     {
         if(!elementRef.current || !dragHandler) return;
         
-        let offsetX  = (offset.x + delta.x);
-        let offsetY  = (offset.y + delta.y);
+        let offsetX = (offset.x + delta.x);
+        let offsetY = (offset.y + delta.y);
 
         const left = elementRef.current.offsetLeft + offsetX;
         const top = elementRef.current.offsetTop + offsetY;

src/common/layout/LayoutFurniIconImageView.tsx

@@ -30,5 +30,5 @@ export const LayoutFurniIconImageView: FC<LayoutFurniIconImageViewProps> = props
         return imageUrl;
     }
 
-    return <LayoutImage imageUrl={ getImageIconUrl() } className='furni-image' { ...rest } />;
+    return <LayoutImage imageUrl={ getImageIconUrl() } className="furni-image" { ...rest } />;
 }

src/common/layout/LayoutNotificationAlertView.tsx

@@ -27,7 +27,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
     return (
         <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>
             <NitroCardHeaderView headerText={ title } onCloseClick={ close } />
-            <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={0}>
+            <NitroCardContentView grow justifyContent="between" overflow="hidden" className="text-black" gap={ 0 }>
                 { children }
             </NitroCardContentView>
         </NitroCardView>

src/common/layout/LayoutProgressBar.tsx

@@ -25,7 +25,7 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
         <Column position={ position } justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
             { text && (text.length > 0) &&
                 <Flex fit center position="absolute" className="nitro-progress-bar-text small">{ text }</Flex> }
-            <Base className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') }} />
+            <Base className="nitro-progress-bar-inner" style={ { width: (~~((((progress - 0) * (100 - 0)) / (maxProgress - 0)) + 0) + '%') } } />
             { children }
         </Column>
     );

src/common/layout/UserProfileIconView.tsx

@@ -10,7 +10,7 @@ export interface UserProfileIconViewProps extends BaseProps<HTMLDivElement>
 
 export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
 {
-    const { userId = 0, userName = null, classNames = [], pointer = true, children = null, ...rest  } = props;
+    const { userId = 0, userName = null, classNames = [], pointer = true, children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {

src/components/avatar-editor/common/AvatarEditorGridPartItem.ts

@@ -5,8 +5,8 @@ import { FigureData } from './FigureData';
 export class AvatarEditorGridPartItem implements IAvatarImageListener
 {
     private static ALPHA_FILTER: NitroAlphaFilter = new NitroAlphaFilter(0.2);
-    private static THUMB_DIRECTIONS: number[]   = [ 2, 6, 0, 4, 3, 1 ];
-    private static DRAW_ORDER: string[]         = [
+    private static THUMB_DIRECTIONS: number[] = [ 2, 6, 0, 4, 3, 1 ];
+    private static DRAW_ORDER: string[] = [
         AvatarFigurePartType.LEFT_HAND_ITEM,
         AvatarFigurePartType.LEFT_HAND,
         AvatarFigurePartType.LEFT_SLEEVE,
@@ -201,13 +201,13 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
 
         if(this._partSet)
         {
-            this._isHC          = (this._partSet.clubLevel > 0);
-            this._isSellable    = this._partSet.isSellable;
+            this._isHC = (this._partSet.clubLevel > 0);
+            this._isSellable = this._partSet.isSellable;
         }
         else
         {
-            this._isHC          = false;
-            this._isSellable    = false;
+            this._isHC = false;
+            this._isSellable = false;
         }
 
         if(this._isDisabled) this.setAlpha(container, 0.2);

src/components/avatar-editor/common/CategoryBaseModel.ts

@@ -11,7 +11,7 @@ export class CategoryBaseModel implements IAvatarEditorCategoryModel
 
     constructor()
     {
-        this._isInitalized  = false;
+        this._isInitalized = false;
         this._maxPaletteCount = 0;
     }
 

src/components/avatar-editor/common/FigureData.ts

@@ -199,8 +199,8 @@ export class FigureData
     {
         let figureString = '';
 
-        const setTypes: string[]    = [ FigureData.FACE ];
-        const figureSets: string[]  = [];
+        const setTypes: string[] = [ FigureData.FACE ];
+        const figureSets: string[] = [];
 
         for(const setType of setTypes)
         {

src/components/avatar-editor/views/model/AvatarEditorModelView.tsx

@@ -67,7 +67,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
                             <AvatarEditorIcon icon="female" selected={ (gender === FigureData.FEMALE) } />
                         </Flex>
                     </> }
-                { !model.canSetGender && model.categories &&  (model.categories.size > 0) && Array.from(model.categories.keys()).map(name =>
+                { !model.canSetGender && model.categories && (model.categories.size > 0) && Array.from(model.categories.keys()).map(name =>
                 {
                     const category = model.categories.get(name);
 

src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx

@@ -55,13 +55,13 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
             items.push(
                 <LayoutGridItem key={ index } position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
                     { figureContainer &&
-                            <LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
+                    <LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
                     <Base className="avatar-shadow" />
                     { (clubLevel > 0) && <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
                     <Flex gap={ 1 } className="button-container">
                         <Button variant="link" fullWidth onClick={ event => saveFigureAtWardrobeIndex(index) }>{ LocalizeText('avatareditor.wardrobe.save') }</Button>
                         { figureContainer &&
-                                <Button variant="link" fullWidth onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetClubMemberLevel()) }>{ LocalizeText('generic_usable.button.use') }</Button> }
+                        <Button variant="link" fullWidth onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetClubMemberLevel()) }>{ LocalizeText('generic_usable.button.use') }</Button> }
                     </Flex>
                 </LayoutGridItem>
             );

src/components/campaign/CalendarItemView.tsx

@@ -33,7 +33,7 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
     }
 
     return (
-        <Column fit center pointer className={`campaign-spritesheet campaign-day-generic-bg rounded calendar-item ${ active ? 'active' : '' }`} onClick={ () => onClick(itemId) }>
+        <Column fit center pointer className={ `campaign-spritesheet campaign-day-generic-bg rounded calendar-item ${ active ? 'active' : '' }` } onClick={ () => onClick(itemId) }>
             { (state === CalendarItemState.STATE_UNLOCKED) &&
                 <Flex center className="campaign-spritesheet unlocked-bg">
                     <Flex center className="campaign-spritesheet campaign-opened">

src/components/campaign/CampaignView.tsx

@@ -103,7 +103,7 @@ export const CampaignView: FC<{}> = props =>
     return (
         <>
             {(calendarData && isCalendarOpen) && 
-                <CalendarView close={onCalendarClose} campaignName={calendarData.campaignName} currentDay={calendarData.currentDay} numDays={calendarData.campaignDays} openedDays={calendarData.openedDays} missedDays={calendarData.missedDays} openPackage={openPackage} receivedProducts={receivedProducts} />
+                <CalendarView close={ onCalendarClose } campaignName={ calendarData.campaignName } currentDay={ calendarData.currentDay } numDays={ calendarData.campaignDays } openedDays={ calendarData.openedDays } missedDays={ calendarData.missedDays } openPackage={ openPackage } receivedProducts={ receivedProducts } />
             }
         </>
     )

src/components/catalog/CatalogMessageHandler.tsx

@@ -272,7 +272,7 @@ export const CatalogMessageHandler: FC<{}> = props =>
             title = LocalizeText('inventory.marketplace.result.title.failure');
         }
 
-        const message = LocalizeText(`inventory.marketplace.result.${parser.result}`);
+        const message = LocalizeText(`inventory.marketplace.result.${ parser.result }`);
         
         NotificationUtilities.simpleAlert(message, NotificationAlertType.DEFAULT, null, null, title);
     }, []);

src/components/catalog/common/FurniCategory.ts

@@ -1,26 +1,26 @@
 export class FurniCategory
 {
-    public static DEFAULT: number                   = 1;
-    public static WALL_PAPER: number                = 2;
-    public static FLOOR: number                     = 3;
-    public static LANDSCAPE: number                 = 4;
-    public static POST_IT: number                   = 5;
-    public static POSTER: number                    = 6;
-    public static SOUND_SET: number                 = 7;
-    public static TRAX_SONG: number                 = 8;
-    public static PRESENT: number                   = 9;
-    public static ECOTRON_BOX: number               = 10;
-    public static TROPHY: number                    = 11;
-    public static CREDIT_FURNI: number              = 12;
-    public static PET_SHAMPOO: number               = 13;
-    public static PET_CUSTOM_PART: number           = 14;
-    public static PET_CUSTOM_PART_SHAMPOO: number   = 15;
-    public static PET_SADDLE: number                = 16;
-    public static GUILD_FURNI: number               = 17;
-    public static GAME_FURNI: number                = 18;
-    public static MONSTERPLANT_SEED: number         = 19;
-    public static MONSTERPLANT_REVIVAL: number      = 20;
-    public static MONSTERPLANT_REBREED: number      = 21;
-    public static MONSTERPLANT_FERTILIZE: number    = 22;
-    public static FIGURE_PURCHASABLE_SET: number    = 23;
+    public static DEFAULT: number = 1;
+    public static WALL_PAPER: number = 2;
+    public static FLOOR: number = 3;
+    public static LANDSCAPE: number = 4;
+    public static POST_IT: number = 5;
+    public static POSTER: number = 6;
+    public static SOUND_SET: number = 7;
+    public static TRAX_SONG: number = 8;
+    public static PRESENT: number = 9;
+    public static ECOTRON_BOX: number = 10;
+    public static TROPHY: number = 11;
+    public static CREDIT_FURNI: number = 12;
+    public static PET_SHAMPOO: number = 13;
+    public static PET_CUSTOM_PART: number = 14;
+    public static PET_CUSTOM_PART_SHAMPOO: number = 15;
+    public static PET_SADDLE: number = 16;
+    public static GUILD_FURNI: number = 17;
+    public static GAME_FURNI: number = 18;
+    public static MONSTERPLANT_SEED: number = 19;
+    public static MONSTERPLANT_REVIVAL: number = 20;
+    public static MONSTERPLANT_REBREED: number = 21;
+    public static MONSTERPLANT_FERTILIZE: number = 22;
+    public static FIGURE_PURCHASABLE_SET: number = 23;
 }

src/components/catalog/views/gift/CatalogGiftView.tsx

@@ -135,7 +135,7 @@ export const CatalogGiftView: FC<{}> = props =>
 
             if(!giftData) continue;
 
-            if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: `#${giftData.colors[0].toString(16)}` });
+            if(giftData.colors && giftData.colors.length > 0) newColors.push({ id: colorId, color: `#${ giftData.colors[0].toString(16) }` });
         }
 
         setMaxBoxIndex(giftConfiguration.boxTypes.length - 1);
@@ -210,7 +210,7 @@ export const CatalogGiftView: FC<{}> = props =>
                         { LocalizeText('catalog.gift_wrapping.pick_color') }
                     </Text>
                     <ButtonGroup fullWidth>
-                        { colors.map(color => <Button key={ color.id } variant="dark" active={ (color.id === selectedColorId) } disabled={ !isColorable } style={{ backgroundColor: color.color }} onClick={ () => setSelectedColorId(color.id) } />) }
+                        { colors.map(color => <Button key={ color.id } variant="dark" active={ (color.id === selectedColorId) } disabled={ !isColorable } style={ { backgroundColor: color.color } } onClick={ () => setSelectedColorId(color.id) } />) }
                     </ButtonGroup>
                 </Column>
                 <Flex justifyContent="between" alignItems="center">

src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx

@@ -148,27 +148,27 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                                     <Text textEnd>{ getOfferText(offer) }</Text>
                                     <Flex justifyContent="end" gap={ 1 }>
                                         { (offer.priceCredits > 0) &&
-                                                <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                                                    <Text>{ offer.priceCredits }</Text>
-                                                    <LayoutCurrencyIcon type={ -1 } />
-                                                </Flex> }
+                                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                            <Text>{ offer.priceCredits }</Text>
+                                            <LayoutCurrencyIcon type={ -1 } />
+                                        </Flex> }
                                         { (offer.priceActivityPoints > 0) &&
-                                                <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                                                    <Text>{ offer.priceActivityPoints }</Text>
-                                                    <LayoutCurrencyIcon type={ offer.priceActivityPointsType } />
-                                                </Flex> }
+                                        <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                            <Text>{ offer.priceActivityPoints }</Text>
+                                            <LayoutCurrencyIcon type={ offer.priceActivityPointsType } />
+                                        </Flex> }
                                     </Flex>
                                 </Column>
                             </LayoutGridItem>
                         );
                     }) }
                 </AutoGrid>
-                <Text center dangerouslySetInnerHTML={{ __html: LocalizeText('catalog.vip.buy.hccenter') }}></Text>
+                <Text center dangerouslySetInnerHTML={ { __html: LocalizeText('catalog.vip.buy.hccenter') } }></Text>
             </Column>
             <Column size={ 5 } overflow="hidden">
                 <Column fullHeight center overflow="hidden">
                     { currentPage.localization.getImage(1) && <img alt="" src={ currentPage.localization.getImage(1) } /> }
-                    <Text center overflow="auto" dangerouslySetInnerHTML={{ __html: getSubscriptionDetails }} />
+                    <Text center overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } />
                 </Column>
                 { pendingOffer &&
                     <Column fullWidth grow justifyContent="end">

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx

@@ -36,7 +36,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
         
         const time = Math.max(1, offerData.timeLeftMinutes);
         const hours = Math.floor(time / 60);
-        const minutes =  time - (hours * 60);
+        const minutes = time - (hours * 60);
 
         let text = minutes + ' ' + LocalizeText('catalog.marketplace.offer.minutes');
         if(hours > 0)

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx

@@ -155,7 +155,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
                 </Text>
                 <Column className="nitro-catalog-layout-marketplace-grid" overflow="auto">
                     { 
-                        Array.from(offers.values()).map( (entry, index) => <CatalogLayoutMarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } onClick={purchaseItem} />)
+                        Array.from(offers.values()).map( (entry, index) => <CatalogLayoutMarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } onClick={ purchaseItem } />)
                     }
                 </Column>
             </Column>

src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx

@@ -29,7 +29,7 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
 
         const productData = offer.products[0];
 
-        const localizationKey = ProductImageUtility.getProductCategory(productData.productType, productData.furniClassId) === 2  ? 'wallItem.name.' + productData.furniClassId : 'roomItem.name.' + productData.furniClassId;
+        const localizationKey = ProductImageUtility.getProductCategory(productData.productType, productData.furniClassId) === 2 ? 'wallItem.name.' + productData.furniClassId : 'roomItem.name.' + productData.furniClassId;
 
         return LocalizeText(localizationKey);
     }, [ offer ]);

src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx

@@ -39,7 +39,7 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
             <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
             <Flex alignItems="center" gap={ 1 }>
                 <FontAwesomeIcon icon="caret-left" className="text-black cursor-pointer" onClick={ event => updateQuantity(quantity - 1) } />
-                <input type="number" className="form-control form-control-sm quantity-input" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber)} />
+                <input type="number" className="form-control form-control-sm quantity-input" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
                 <FontAwesomeIcon icon="caret-right" className="text-black cursor-pointer" onClick={ event => updateQuantity(quantity + 1) } />
             </Flex>
         </>

src/components/chat-history/ChatHistoryView.tsx

@@ -33,7 +33,7 @@ export const ChatHistoryView: FC<{}> = props =>
                     <Text variant="muted">{ item.timestamp }</Text>
                     { (item.type === ChatEntryType.TYPE_CHAT) &&
                         <>
-                            <Text pointer noWrap dangerouslySetInnerHTML={ { __html: (item.name + ':') }} />
+                            <Text pointer noWrap dangerouslySetInnerHTML={ { __html: (item.name + ':') } } />
                             <Text textBreak wrap grow>{ item.message }</Text>
                         </> }
                     { (item.type === ChatEntryType.TYPE_ROOM_INFO) &&

src/components/chat-history/common/Utilities.ts

@@ -1,5 +1,5 @@
 export const currentDate = () =>
 {
     const currentTime = new Date();
-    return `${currentTime.getHours().toString().padStart(2, '0')}:${currentTime.getMinutes().toString().padStart(2, '0')}`;
+    return `${ currentTime.getHours().toString().padStart(2, '0') }:${ currentTime.getMinutes().toString().padStart(2, '0') }`;
 }

src/components/floorplan-editor/FloorplanEditorView.tsx

@@ -141,7 +141,7 @@ export const FloorplanEditorView: FC<{}> = props =>
     }, []);
 
     return (
-        <FloorplanEditorContextProvider value={{ originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings }}>
+        <FloorplanEditorContextProvider value={ { originalFloorplanSettings: originalFloorplanSettings, setOriginalFloorplanSettings: setOriginalFloorplanSettings, visualizationSettings: visualizationSettings, setVisualizationSettings: setVisualizationSettings } }>
             { isVisible &&
                 <NitroCardView uniqueKey="floorpan-editor" className="nitro-floorplan-editor" theme="primary-slim">
                     <NitroCardHeaderView headerText={ LocalizeText('floor.plan.editor.title') } onCloseClick={ () => setIsVisible(false) } />

src/components/floorplan-editor/common/Constants.ts

@@ -12,7 +12,7 @@ export class FloorAction
     public static readonly UNSET = 4;
 }
 
-export const COLORMAP: object =  {
+export const COLORMAP: object = {
     'x': '101010',
     '0': '0065ff',
     '1': '0091ff',

src/components/floorplan-editor/common/Utils.ts

@@ -14,7 +14,7 @@ export const getTileFromScreenPosition = (x: number, y: number): [number, number
 {
     const translatedX = x - 1024; // after centering translation
     
-    const realX = ((translatedX /(TILE_SIZE / 2))  + (y / (TILE_SIZE / 4))) / 2;
+    const realX = ((translatedX /(TILE_SIZE / 2)) + (y / (TILE_SIZE / 4))) / 2;
     const realY = ((y /(TILE_SIZE / 4)) - (translatedX / (TILE_SIZE / 2))) / 2;
 
     return [ realX, realY ];

src/components/floorplan-editor/views/FloorplanImportExportView.tsx

@@ -42,7 +42,7 @@ export const FloorplanImportExportView: FC<FloorplanImportExportViewProps> = pro
             <NitroCardContentView>
                 <textarea className="h-100" value={ map } onChange={ event => setMap(event.target.value) } />
                 <Flex justifyContent="between">
-                    <Button onClick={ event => setMap(ConvertTileMapToString(originalFloorplanSettings.tilemap))}>
+                    <Button onClick={ event => setMap(ConvertTileMapToString(originalFloorplanSettings.tilemap)) }>
                         { LocalizeText('floor.plan.editor.revert.to.last.received.map') }
                     </Button>
                     <Button onClick={ saveFloorChanges }>

src/components/floorplan-editor/views/FloorplanOptionsView.tsx

@@ -149,7 +149,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
                     <Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
                     <Flex alignItems="center" gap={ 1 }>
                         <FontAwesomeIcon icon="caret-left" className="cursor-pointer" onClick={ decreaseWallHeight } />
-                        <input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber)} />
+                        <input type="number" className="form-control form-control-sm quantity-input" value={ visualizationSettings.wallHeight } onChange={ event => onWallHeightChange(event.target.valueAsNumber) } />
                         <FontAwesomeIcon icon="caret-right" className="cursor-pointer" onClick={ increaseWallHeight } />
                     </Flex>
                 </Column>
@@ -164,7 +164,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
                         step={ 1 }
                         value={ floorHeight }
                         onChange={ event => onFloorHeightChange(event) }
-                        renderThumb={ ({ style, ...rest }, state) => <div style={ { backgroundColor: `#${COLORMAP[state.valueNow.toString(33)]}`, ...style } } { ...rest }>{ state.valueNow }</div> } />
+                        renderThumb={ ({ style, ...rest }, state) => <div style={ { backgroundColor: `#${ COLORMAP[state.valueNow.toString(33)] }`, ...style } } { ...rest }>{ state.valueNow }</div> } />
                 </Column>
                 <Column size={ 6 }>
                     <Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text>

src/components/friends/views/friends-bar/FriendBarItemView.tsx

@@ -42,18 +42,18 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
 
     return (
         <div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
-            <div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
+            <div className={ `friend-bar-item-head position-absolute ${ friend.id > 0 ? 'avatar': 'group' }` }>
                 { (friend.id > 0) && <LayoutAvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
-                { (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure} /> } 
+                { (friend.id <= 0) && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure } /> } 
             </div>
             <div className="text-truncate">{ friend.name }</div>
             { isVisible &&
-                    <div className="d-flex justify-content-between">
-                        <Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
-                        { friend.followingAllowed &&
-                            <Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
-                        <Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
-                    </div> }
+            <div className="d-flex justify-content-between">
+                <Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
+                { friend.followingAllowed &&
+                <Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> }
+                <Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
+            </div> }
         </div>
     );
 }

src/components/friends/views/friends-list/FriendsListSearchView.tsx

@@ -64,7 +64,7 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                                                 </Flex>
                                                 <Flex alignItems="center" gap={ 1 }>
                                                     { result.isAvatarOnline &&
-                                                            <Base className="nitro-friends-spritesheet icon-chat cursor-pointer" onClick={ event => OpenMessengerChat(result.avatarId) } title={ LocalizeText('friendlist.tip.im') } /> }
+                                                    <Base className="nitro-friends-spritesheet icon-chat cursor-pointer" onClick={ event => OpenMessengerChat(result.avatarId) } title={ LocalizeText('friendlist.tip.im') } /> }
                                                 </Flex>
                                             </NitroCardAccordionItemView>
                                         )
@@ -91,7 +91,7 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                                                 </Flex>
                                                 <Flex alignItems="center" gap={ 1 }>
                                                     { canRequestFriend(result.avatarId) &&
-                                                            <Base className="nitro-friends-spritesheet icon-add cursor-pointer" onClick={ event => requestFriend(result.avatarId, result.avatarName) } title={ LocalizeText('friendlist.tip.addfriend') } /> }
+                                                    <Base className="nitro-friends-spritesheet icon-add cursor-pointer" onClick={ event => requestFriend(result.avatarId, result.avatarName) } title={ LocalizeText('friendlist.tip.addfriend') } /> }
                                                 </Flex>
                                             </NitroCardAccordionItemView>
                                         )

src/components/friends/views/friends-list/FriendsListView.tsx

@@ -124,10 +124,10 @@ export const FriendsListView: FC<{}> = props =>
                 <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
                 <NitroCardContentView overflow="hidden" gap={ 1 } className="text-black p-0">
                     <NitroCardAccordionView fullHeight overflow="hidden">
-                        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } isExpanded={ true }>
+                        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } isExpanded={ true }>
                             <FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
                         </NitroCardAccordionSetView>
-                        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
+                        <NitroCardAccordionSetView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${ offlineFriends.length })` }>
                             <FriendsListGroupView list={ offlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
                         </NitroCardAccordionSetView>
                         <FriendsListRequestView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${ requests.length })` } isExpanded={ true } />

src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx

@@ -54,10 +54,10 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
                 { ((group.type === GroupType.PRIVATE_CHAT) && !isOwnChat) &&
                     <LayoutAvatarImageView figure={ thread.participant.figure } direction={ 2 } /> }
                 { (groupChatData && !isOwnChat) &&
-                    <LayoutAvatarImageView figure={ groupChatData.figure } direction={ 2} /> }
+                    <LayoutAvatarImageView figure={ groupChatData.figure } direction={ 2 } /> }
             </Base>
             <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
-                <Base className='fw-bold'>
+                <Base className="fw-bold">
                     { isOwnChat && GetSessionDataManager().userName }
                     { !isOwnChat && (groupChatData ? groupChatData.username : thread.participant.name) }
                 </Base>

src/components/groups/views/GroupBadgeCreatorView.tsx

@@ -41,21 +41,21 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
                             { (badgeParts[index].code && (badgeParts[index].code.length > 0)) &&
                                 <LayoutBadgeImageView badgeCode={ badgeParts[index].code } isGroup={ true } /> }
                             { (!badgeParts[index].code || !badgeParts[index].code.length) &&
-                                    <Flex center className="badge-image group-badge">
-                                        <FontAwesomeIcon icon="plus" />
-                                    </Flex> }
+                            <Flex center className="badge-image group-badge">
+                                <FontAwesomeIcon icon="plus" />
+                            </Flex> }
                         </Flex>
                         { (part.type !== GroupBadgePart.BASE) &&
-                                <Grid gap={ 1 } columnCount={ 3 }>
-                                    { POSITIONS.map((position, posIndex) =>
-                                    {
-                                        return <Base key={ posIndex } pointer className={ `group-badge-position-swatch ${ (badgeParts[index].position === position) ? 'active' : '' }` } onClick={ event => setPartProperty(index, 'position', position) }></Base>
-                                    }) }
-                                </Grid> }
+                        <Grid gap={ 1 } columnCount={ 3 }>
+                            { POSITIONS.map((position, posIndex) =>
+                            {
+                                return <Base key={ posIndex } pointer className={ `group-badge-position-swatch ${ (badgeParts[index].position === position) ? 'active' : '' }` } onClick={ event => setPartProperty(index, 'position', position) }></Base>
+                            }) }
+                        </Grid> }
                         <Grid gap={ 1 } columnCount={ 8 }>
                             { (groupCustomize.badgePartColors.length > 0) && groupCustomize.badgePartColors.map((item, colorIndex) =>
                             {
-                                return <Base key={ colorIndex } pointer className={ `group-badge-color-swatch ${ (badgeParts[index].color === (colorIndex + 1)) ? 'active' : '' }` } style={{ backgroundColor: '#' + item.color }} onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) }></Base>
+                                return <Base key={ colorIndex } pointer className={ `group-badge-color-swatch ${ (badgeParts[index].color === (colorIndex + 1)) ? 'active' : '' }` } style={ { backgroundColor: '#' + item.color } } onClick={ event => setPartProperty(index, 'color', (colorIndex + 1)) }></Base>
                             }) }
                         </Grid>
                     </Flex>

src/components/groups/views/GroupCreatorView.tsx

@@ -136,7 +136,7 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
                 </Flex>
                 <Column overflow="hidden">
                     <Flex alignItems="center" gap={ 2 }>
-                        <Base className={ `nitro-group-tab-image tab-${ currentTab }`} />
+                        <Base className={ `nitro-group-tab-image tab-${ currentTab }` } />
                         <Column grow gap={ 0 }>
                             <Text bold fontSize={ 4 }>{ LocalizeText(`group.create.stepcaption.${ currentTab }`) }</Text>
                             <Text>{ LocalizeText(`group.create.stepdesc.${ currentTab }`) }</Text>

src/components/groups/views/GroupInformationView.tsx

@@ -121,7 +121,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
                         <Flex alignItems="center" gap={ 2 }>
                             <Text bold>{ groupInformation.title }</Text>
                             <Flex gap={ 1 }>
-                                <i className={ 'icon icon-group-type-' + groupInformation.type } title={ LocalizeText(`group.edit.settings.type.${ STATES[groupInformation.type] }.help`)} />
+                                <i className={ 'icon icon-group-type-' + groupInformation.type } title={ LocalizeText(`group.edit.settings.type.${ STATES[groupInformation.type] }.help`) } />
                                 { groupInformation.canMembersDecorate &&
                                     <i className="icon icon-group-decorate" title={ LocalizeText('group.memberscandecorate') } /> }
                             </Flex>

src/components/groups/views/GroupManagerView.tsx

@@ -96,13 +96,13 @@ export const GroupManagerView: FC<{}> = props =>
                 { TABS.map(tab =>
                 {
                     return (<NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ () => changeTab(tab) }>
-                        { LocalizeText(`group.edit.tab.${tab}`) }
+                        { LocalizeText(`group.edit.tab.${ tab }`) }
                     </NitroCardTabsItemView>);
                 }) }
             </NitroCardTabsView>
             <NitroCardContentView>
                 <Flex alignItems="center" gap={ 2 }>
-                    <Base className={ `nitro-group-tab-image tab-${ currentTab }`} />
+                    <Base className={ `nitro-group-tab-image tab-${ currentTab }` } />
                     <Column grow gap={ 0 }>
                         <Text bold fontSize={ 4 }>{ LocalizeText(`group.edit.tabcaption.${ currentTab }`) }</Text>
                         <Text>{ LocalizeText(`group.edit.tabdesc.${ currentTab }`) }</Text>

src/components/groups/views/GroupMembersView.tsx

@@ -177,21 +177,21 @@ export const GroupMembersView: FC<{}> = props =>
                                 <Column grow gap={ 1 }>
                                     <Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>
                                     { (member.rank !== GroupRank.REQUESTED) &&
-                                            <Text small italics variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
+                                    <Text small italics variant="muted">{ LocalizeText('group.members.since', [ 'date' ], [ member.joinedAt ]) }</Text> }
                                 </Column>
                                 <Column gap={ 1 }>
                                     { (member.rank !== GroupRank.REQUESTED) &&
-                                            <Flex center>
-                                                <Base pointer={ membersData.admin } className={ `icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }` } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />
-                                            </Flex> }
+                                    <Flex center>
+                                        <Base pointer={ membersData.admin } className={ `icon icon-group-small-${ ((member.rank === GroupRank.OWNER) ? 'owner' : (member.rank === GroupRank.ADMIN) ? 'admin' : (membersData.admin && (member.rank === GroupRank.MEMBER)) ? 'not-admin' : '') }` } title={ LocalizeText(getRankDescription(member)) } onClick={ event => toggleAdmin(member) } />
+                                    </Flex> }
                                     { membersData.admin && (member.rank === GroupRank.REQUESTED) &&
-                                            <Flex alignItems="center">
-                                                <Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) }></Base>
-                                            </Flex> }
+                                    <Flex alignItems="center">
+                                        <Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) }></Base>
+                                    </Flex> }
                                     { membersData.admin && (member.rank !== GroupRank.OWNER) && (member.id !== GetSessionDataManager().userId) &&
-                                            <Flex alignItems="center">
-                                                <Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ event => removeMemberOrDeclineMembership(member) }></Base>
-                                            </Flex> }
+                                    <Flex alignItems="center">
+                                        <Base pointer className="nitro-friends-spritesheet icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ event => removeMemberOrDeclineMembership(member) }></Base>
+                                    </Flex> }
                                 </Column>
                             </Flex>
                         );

src/components/groups/views/tabs/GroupTabColorsView.tsx

@@ -102,8 +102,8 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
                 <Text bold>{ LocalizeText('group.edit.color.guild.color') }</Text>
                 { groupData.groupColors && (groupData.groupColors.length > 0) &&
                     <Flex overflow="hidden" className="rounded border">
-                        <Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }} />
-                        <Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(1) }} />
+                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(0) } } />
+                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(1) } } />
                     </Flex> }
             </Column>
             <Column size={ 5 } gap={ 1 } overflow="hidden">
@@ -111,7 +111,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
                 <AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
                     { groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
                     {
-                        return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupData.groupColors[0] === item.id) }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(0, item.id) }></div>
+                        return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupData.groupColors[0] === item.id) }) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>
                     }) }
                 </AutoGrid>
             </Column>
@@ -120,7 +120,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
                 <AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
                     { groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
                     {
-                        return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupData.groupColors[1] === item.id) }) } style={{ backgroundColor: '#' + item.color }} onClick={ () => selectColor(1, item.id) }></div>
+                        return <div key={ index } className={ 'group-badge-color-swatch cursor-pointer' + classNames({ ' active': (groupData.groupColors[1] === item.id) }) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>
                     }) }
                 </AutoGrid>
             </Column>

src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx

@@ -46,8 +46,8 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
                 <Column center className="bg-muted rounded p-1" gap={ 2 }>
                     <Text bold center>{ LocalizeText('group.edit.color.guild.color') }</Text>
                     <Flex overflow="hidden" className="rounded border">
-                        <Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }} />
-                        <Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(1) }} />
+                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(0) } } />
+                        <Base className="group-color-swatch" style={ { backgroundColor: '#' + getGroupColor(1) } } />
                     </Flex>
                 </Column>
             </Column>

src/components/guide-tool/views/GuideToolOngoingView.tsx

@@ -88,7 +88,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                             <Flex key={ index } fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
                                 <Base shrink className="message-avatar">
                                     { (!isOwnChat(group.userId)) &&
-                                            <LayoutAvatarImageView figure={ userFigure } direction={ 2 } /> }
+                                    <LayoutAvatarImageView figure={ userFigure } direction={ 2 } /> }
                                 </Base>
                                 <Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
                                     <Text bold>
@@ -98,9 +98,9 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
                                     { group.messages.map((chat, index) => <Base key={ index } className="text-break">{ chat.message }</Base>) }
                                 </Base>
                                 { (isOwnChat(group.userId)) &&
-                                        <Base className="message-avatar flex-shrink-0">
-                                            <LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
-                                        </Base> }
+                                <Base className="message-avatar flex-shrink-0">
+                                    <LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
+                                </Base> }
                             </Flex>
                         );
                     }) } 

src/components/hc-center/HcCenterView.tsx

@@ -176,10 +176,10 @@ export const HcCenterView: FC<{}> = props =>
                 <hr className="w-100 text-black my-1" />
                 <div>{LocalizeText('hccenter.breakdown.total', [ 'credits', 'actual' ], [ getHcPaydayAmount(),
                     ((((kickbackData.kickbackPercentage * kickbackData.totalCreditsSpent) + kickbackData.creditRewardForStreakBonus) * 100) / 100).toString() ])}</div>
-                <div className="btn btn-link text-primary p-0" onClick={() => 
+                <div className="btn btn-link text-primary p-0" onClick={ () => 
                 {
                     CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) 
-                }}>{
+                } }>{
                         LocalizeText('hccenter.special.infolink')}
                 </div>
             </Popover.Body>
@@ -207,10 +207,10 @@ export const HcCenterView: FC<{}> = props =>
             </Flex>
             <NitroCardContentView>
                 <Flex gap={ 2 }>
-                    <LayoutBadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
+                    <LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center flex-shrink-0 me-1" />
                     <Column size={ 5 } className="streak-info" gap={ 0 }>
                         <Text>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
-                        <Text dangerouslySetInnerHTML={{ __html: getInfoText() }} />
+                        <Text dangerouslySetInnerHTML={ { __html: getInfoText() } } />
                     </Column>
                 </Flex>
                 { GetConfiguration('hc.center')['payday.info'] &&
@@ -218,10 +218,10 @@ export const HcCenterView: FC<{}> = props =>
                         <Column className="rounded-start bg-primary p-2 payday-special mb-1">
                             <h4 className="mb-1">{LocalizeText('hccenter.special.title')}</h4>
                             <div>{LocalizeText('hccenter.special.info')}</div>
-                            <div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={() => 
+                            <div className="btn btn-link text-white p-0 mt-auto align-self-baseline" onClick={ () => 
                             {
                                 CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) 
-                            }}>{LocalizeText('hccenter.special.infolink')}</div>
+                            } }>{LocalizeText('hccenter.special.infolink')}</div>
                         </Column>
                         <div className="payday flex-shrink-0 p-2">
                             <h5 className="mb-2 ms-2">{LocalizeText('hccenter.special.time.title')}</h5>
@@ -234,7 +234,7 @@ export const HcCenterView: FC<{}> = props =>
                                     <h5 className="ms-2 mb-1 bolder">{LocalizeText('hccenter.special.amount.title')}</h5>
                                     <div className="d-flex flex-column">
                                         <div className="w-100 text-center ms-4n">{getHcPaydayAmount()}</div>
-                                        <OverlayTrigger trigger={ [ 'hover', 'focus' ] } placement="left" overlay={popover}>
+                                        <OverlayTrigger trigger={ [ 'hover', 'focus' ] } placement="left" overlay={ popover }>
                                             <div className="btn btn-link align-self-end text-primary">
                                                 {LocalizeText('hccenter.breakdown.infolink')}
                                             </div>
@@ -249,22 +249,22 @@ export const HcCenterView: FC<{}> = props =>
                     <div className="rounded bg-success p-2 d-flex flex-row mb-0">
                         <div>
                             <h4 className="mb-1">{LocalizeText('hccenter.gift.title')}</h4>
-                            <div dangerouslySetInnerHTML={{ __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', [ 'unclaimedgifts' ], [ unclaimedGifts.toString() ]) : LocalizeText('hccenter.gift.info') }}></div>
+                            <div dangerouslySetInnerHTML={ { __html: unclaimedGifts > 0 ? LocalizeText('hccenter.unclaimedgifts', [ 'unclaimedgifts' ], [ unclaimedGifts.toString() ]) : LocalizeText('hccenter.gift.info') } }></div>
                         </div>
-                        <button className="btn btn-primary btn-lg align-self-center ms-auto" onClick={() => 
+                        <button className="btn btn-primary btn-lg align-self-center ms-auto" onClick={ () => 
                         {
                             CreateLinkEvent('catalog/open/' + GetConfiguration('catalog.links')['hc.hc_gifts']) 
-                        }}>{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.gifts.redeem' : 'hccenter.btn.gifts.view')}</button>
+                        } }>{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.gifts.redeem' : 'hccenter.btn.gifts.view')}</button>
                     </div>
                 }
                 {GetConfiguration('hc.center')['benefits.info'] &&
                     <div className="benefits text-black py-2">
                         <h5 className="mb-1 text-primary">{LocalizeText('hccenter.general.title')}</h5>
-                        <div className="mb-2" dangerouslySetInnerHTML={{ __html: LocalizeText('hccenter.general.info') }} />
-                        <button className="btn btn-link p-0 text-primary" onClick={() => 
+                        <div className="mb-2" dangerouslySetInnerHTML={ { __html: LocalizeText('hccenter.general.info') } } />
+                        <button className="btn btn-link p-0 text-primary" onClick={ () => 
                         {
                             CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) 
-                        }}>{LocalizeText('hccenter.general.infolink')}</button>
+                        } }>{LocalizeText('hccenter.general.infolink')}</button>
                     </div>
                 }
             </NitroCardContentView>

src/components/help/views/SanctionStatusView.tsx

@@ -21,7 +21,7 @@ export const SanctionSatusView:FC<{}> = props =>
 
     const sanctionLocalization = useCallback((param: string, sanctionName: string, length?: number) =>
     {
-        let localizationName = `help.sanction.${param}`;
+        let localizationName = `help.sanction.${ param }`;
 
         switch(sanctionName)
         {
@@ -50,7 +50,7 @@ export const SanctionSatusView:FC<{}> = props =>
     
     return (
         <NitroCardView className="nitro-help" theme="primary-slim">
-            <NitroCardHeaderView headerText={LocalizeText('help.sanction.info.title')} onCloseClick={() => setSanctionInfo(null)} />
+            <NitroCardHeaderView headerText={ LocalizeText('help.sanction.info.title') } onCloseClick={ () => setSanctionInfo(null) } />
             <NitroCardContentView className="text-black">
                 <Grid>
                     <Column center size={ 5 } overflow="hidden">
@@ -63,7 +63,7 @@ export const SanctionSatusView:FC<{}> = props =>
                                 {((sanctionInfo.probationHoursLeft > 0) || (sanctionInfo.isSanctionActive)) &&
                                     <div className="col-12 fw-bold">{LocalizeText('help.sanction.probation.reminder')}</div>
                                 }
-                                <div className={`col-12 fw-bold ${sanctionInfo.isSanctionNew ? 'text-danger' : ''}`}>
+                                <div className={ `col-12 fw-bold ${ sanctionInfo.isSanctionNew ? 'text-danger' : '' }` }>
                                     {LocalizeText('help.sanction.last.sanction')} {sanctionLocalization('current', sanctionInfo.sanctionName, sanctionInfo.sanctionLengthHours)}
                                 </div>
                                 <div className="col-12">{LocalizeText('generic.start.time')} {sanctionInfo.sanctionCreationTime}</div>

src/components/help/views/SelectReportedUserView.tsx

@@ -75,7 +75,7 @@ export const SelectReportedUserView: FC<{}> = props =>
                         {
                             return (
                                 <LayoutGridItem key={ user.id } onClick={ event => selectUser(user.id) } itemActive={ (selectedUserId === user.id) }>
-                                    <span dangerouslySetInnerHTML={{ __html: (user.username) }} />
+                                    <span dangerouslySetInnerHTML={ { __html: (user.username) } } />
                                 </LayoutGridItem>
                             );
                         }) }

src/components/help/views/name-change/NameChangeInputView.tsx

@@ -79,11 +79,11 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
         <div className="d-flex flex-column gap-3 h-100">
             <div>{ LocalizeText('tutorial.name_change.info.select') }</div>
             <div className="d-flex gap-2">
-                <input type="text" className="form-control form-control-sm" value={newUsername} onChange={ (e) => handleUsernameChange(e.target.value) } />
+                <input type="text" className="form-control form-control-sm" value={ newUsername } onChange={ (e) => handleUsernameChange(e.target.value) } />
                 <button className="btn btn-primary" disabled={ newUsername === '' || isChecking } onClick={ check }>{ LocalizeText('tutorial.name_change.check') }</button>
             </div>
             { !errorCode && !canProceed && <div className="bg-muted rounded p-2 text-center">{ LocalizeText('help.tutorial.name.info') }</div> }
-            { errorCode && <div className="bg-danger rounded p-2 text-center text-white">{ LocalizeText(`help.tutorial.name.${errorCode}`, [ 'name' ], [ newUsername ]) }</div> }
+            { errorCode && <div className="bg-danger rounded p-2 text-center text-white">{ LocalizeText(`help.tutorial.name.${ errorCode }`, [ 'name' ], [ newUsername ]) }</div> }
             { canProceed && <div className="bg-success rounded p-2 text-center text-white">{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }</div> }
             { suggestions && <div className="d-flex flex-column gap-2">
                 {

src/components/help/views/name-change/NameChangeView.tsx

@@ -57,7 +57,7 @@ export const NameChangeView:FC<{}> = props =>
 
     return (
         <NitroCardView className="nitro-change-username" theme="primary-slim">
-            <NitroCardHeaderView headerText={LocalizeText(titleKey)} onCloseClick={ () => onAction('close') } />
+            <NitroCardHeaderView headerText={ LocalizeText(titleKey) } onCloseClick={ () => onAction('close') } />
             <NitroCardContentView className="text-black">
                 { layout === INIT && <NameChangeInitView onAction={ onAction } /> }
                 { layout === INPUT && <NameChangeInputView onAction={ onAction } /> }

src/components/hotel-view/HotelView.tsx

@@ -39,67 +39,67 @@ export const HotelView: FC<{}> = props =>
     const right = GetConfigurationManager().interpolate(GetConfiguration('hotelview')['images']['right']);
 
     return (
-        <div className="nitro-hotel-view" style={(backgroundColor && backgroundColor) ? { background: backgroundColor } : {}}>
+        <div className="nitro-hotel-view" style={ (backgroundColor && backgroundColor) ? { background: backgroundColor } : {} }>
             <div className="container h-100 py-3 overflow-hidden landing-widgets">
                 <div className="row h-100">
                     <div className="col-9 h-100 d-flex flex-column">
                         <WidgetSlotView
                             widgetSlot={ 1 }
-                            widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 1 + '.widget']}
-                            widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 1 + '.conf']}
+                            widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 1 + '.widget'] }
+                            widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 1 + '.conf'] }
                             className="col-6"
                         />
                         <div className="col-12 row mx-0">
                             <WidgetSlotView
                                 widgetSlot={ 2 }
-                                widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget']}
-                                widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf']}
+                                widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.widget'] }
+                                widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 2 + '.conf'] }
                                 className="col-7"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 3 }
-                                widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.widget']}
-                                widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.conf']}
+                                widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.widget'] }
+                                widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 3 + '.conf'] }
                                 className="col-5"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 4 }
-                                widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.widget']}
-                                widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.conf']}
+                                widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.widget'] }
+                                widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 4 + '.conf'] }
                                 className="col-7"
                             />
                             <WidgetSlotView
                                 widgetSlot={ 5 }
-                                widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.widget']}
-                                widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.conf']}
+                                widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.widget'] }
+                                widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 5 + '.conf'] }
                                 className="col-5"
                             />
                         </div>
                         <WidgetSlotView
                             widgetSlot={ 6 }
-                            widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 6 + '.widget']}
-                            widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 6 + '.conf']}
+                            widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 6 + '.widget'] }
+                            widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 6 + '.conf'] }
                             className="mt-auto"
                         />
                     </div>
                     <div className="col-3 h-100">
                         <WidgetSlotView
                             widgetSlot={ 7 }
-                            widgetType={GetConfiguration('hotelview')['widgets']['slot.' + 7 + '.widget']}
-                            widgetConf={GetConfiguration('hotelview')['widgets']['slot.' + 7 +'.conf']}
+                            widgetType={ GetConfiguration('hotelview')['widgets']['slot.' + 7 + '.widget'] }
+                            widgetConf={ GetConfiguration('hotelview')['widgets']['slot.' + 7 +'.conf'] }
                         />
                     </div>
                 </div>
             </div>
-            <div className="background position-absolute" style={(background && background.length) ? { backgroundImage: `url(${background})` } : {}} />
-            <div className="sun position-absolute" style={(sun && sun.length) ? { backgroundImage: `url(${sun})` } : {}} />
-            <div className="drape position-absolute" style={(drape && drape.length) ? { backgroundImage: `url(${drape})` } : {}} />
-            <div className="left position-absolute" style={(left && left.length) ? { backgroundImage: `url(${left})` } : {}} />
-            <div className="right-repeat position-absolute" style={(rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${rightRepeat})` } : {}} />
-            <div className="right position-absolute" style={(right && right.length) ? { backgroundImage: `url(${right})` } : {}} />
+            <div className="background position-absolute" style={ (background && background.length) ? { backgroundImage: `url(${ background })` } : {} } />
+            <div className="sun position-absolute" style={ (sun && sun.length) ? { backgroundImage: `url(${ sun })` } : {} } />
+            <div className="drape position-absolute" style={ (drape && drape.length) ? { backgroundImage: `url(${ drape })` } : {} } />
+            <div className="left position-absolute" style={ (left && left.length) ? { backgroundImage: `url(${ left })` } : {} } />
+            <div className="right-repeat position-absolute" style={ (rightRepeat && rightRepeat.length) ? { backgroundImage: `url(${ rightRepeat })` } : {} } />
+            <div className="right position-absolute" style={ (right && right.length) ? { backgroundImage: `url(${ right })` } : {} } />
             {GetConfiguration('hotelview')['show.avatar'] && (
                 <div className="avatar-image">
-                    <LayoutAvatarImageView figure={userFigure} direction={2} />
+                    <LayoutAvatarImageView figure={ userFigure } direction={ 2 } />
                 </div>
             )}
         </div>

src/components/hotel-view/views/widgets/GetWidgetLayout.tsx

@@ -18,11 +18,11 @@ export const GetWidgetLayout: FC<GetWidgetLayoutProps> = props =>
         case 'promoarticle':
             return <PromoArticleWidgetView />;
         case 'achievementcompetition_hall_of_fame':
-            return <HallOfFameWidgetView slot={props.slot} conf={props.widgetConf} />;
+            return <HallOfFameWidgetView slot={ props.slot } conf={ props.widgetConf } />;
         case 'bonusrare':
             return <BonusRareWidgetView />;
         case 'widgetcontainer':
-            return <WidgetContainerView conf={props.widgetConf} />
+            return <WidgetContainerView conf={ props.widgetConf } />
         default:
             return null;
     }

src/components/hotel-view/views/widgets/WidgetSlotView.tsx

@@ -13,8 +13,8 @@ export const WidgetSlotView: FC<WidgetSlotViewProps> = props =>
     const { widgetType = null, widgetSlot = 0, widgetConf = null, className= '', ...rest } = props;
     
     return (
-        <div className={`widget-slot slot-${widgetSlot} ${(className || '')}`}  { ...rest }>
-            <GetWidgetLayout widgetType={widgetType} slot={widgetSlot} widgetConf={widgetConf} />
+        <div className={ `widget-slot slot-${ widgetSlot } ${ (className || '') }` } { ...rest }>
+            <GetWidgetLayout widgetType={ widgetType } slot={ widgetSlot } widgetConf={ widgetConf } />
         </div>
     );
 }

src/components/hotel-view/views/widgets/bonus-rare/BonusRareWidgetView.tsx

@@ -37,7 +37,7 @@ export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
             { productType }
             <div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container">
                 <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{(totalCoinsForBonus - coinsStillRequiredToBuy) + '/' + totalCoinsForBonus}</div>
-                <div className="small bg-info rounded position-absolute top-0 h-100" style={{ width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' }}></div>
+                <div className="small bg-info rounded position-absolute top-0 h-100" style={ { width: ((totalCoinsForBonus - coinsStillRequiredToBuy) / totalCoinsForBonus) * 100 + '%' } }></div>
             </div>
         </div>
     );

src/components/hotel-view/views/widgets/promo-article/PromoArticleWidgetView.tsx

@@ -3,55 +3,46 @@ import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api';
 import { UseMessageEventHook } from '../../../../../hooks';
 
-export interface PromoArticleWidgetViewProps
-{}
-
-export const PromoArticleWidgetView: FC<PromoArticleWidgetViewProps> = props =>
+export const PromoArticleWidgetView: FC<{}> = props =>
 {
     const [ articles, setArticles ] = useState<PromoArticleData[]>(null);
-  	const [ index, setIndex ] = useState(0);
+    const [ index, setIndex ] = useState(0);
 
-  	const handleSelect = (selectedIndex) => 
-  	{
-    	setIndex(selectedIndex);
-  	};
+    const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) =>
+    {
+        const parser = event.getParser();
+        setArticles(parser.articles);
+    }, []);
 
-  	const onPromoArticlesMessageEvent = useCallback((event: PromoArticlesMessageEvent) =>
-  	{
-    	const parser = event.getParser();
-    	setArticles(parser.articles);
-  	}, []);
+    UseMessageEventHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent);
 
-  	UseMessageEventHook(PromoArticlesMessageEvent, onPromoArticlesMessageEvent);
+    useEffect(() =>
+    {
+        SendMessageComposer(new GetPromoArticlesComposer());
+    }, []);
 
-	  useEffect(() =>
-  	{
-    	SendMessageComposer(new GetPromoArticlesComposer());
-  	}, []);
+    if(!articles) return null;
 
-  	if(!articles) return null;
-
-  	return (
+    return (
         <div className="promo-articles widget mb-2">
             <div className="d-flex flex-row align-items-center w-100 mb-1">
                 <small className="flex-shrink-0 pe-1">{ LocalizeText('landing.view.promo.article.header') }</small>
-			  	<hr className="w-100 my-0"/>
+                <hr className="w-100 my-0"/>
             </div>
-		  	<div className="d-flex flex-row mb-1">
+            <div className="d-flex flex-row mb-1">
                 {articles && (articles.length > 0) && articles.map((article, ind) =>
-                    <div className={'promo-articles-bullet cursor-pointer ' + (article === articles[index] ? 'promo-articles-bullet-active' : '')} key={article.id} onClick={event => handleSelect(ind)} />
+                    <div className={ 'promo-articles-bullet cursor-pointer ' + (article === articles[index] ? 'promo-articles-bullet-active' : '') } key={ article.id } onClick={ event => setIndex(ind) } />
                 )}
             </div>
-    		{articles && articles[index] &&
-				<div className="promo-article d-flex flex-row row mx-0">
-			  		<div className="promo-article-image" style={ { backgroundImage: `url(${articles[index].imageUrl})` } }/>
-				    <div className="col-3 d-flex flex-column h-100">
-				        <h3 className="my-0">{articles[index].title}</h3>
-				        <b>{ articles[index].bodyText }</b>
-				        <button className="btn btn-sm mt-auto btn-gainsboro" onClick={event => NotificationUtilities.openUrl(articles[index].linkContent)}>{ articles[index].buttonText }</button>
-				    </div>
-          		</div>
-       		}
-    	</div>
-  	);
+            {articles && articles[index] &&
+                <div className="promo-article d-flex flex-row row mx-0">
+                    <div className="promo-article-image" style={ { backgroundImage: `url(${ articles[index].imageUrl })` } }/>
+                    <div className="col-3 d-flex flex-column h-100">
+                        <h3 className="my-0">{articles[index].title}</h3>
+                        <b>{ articles[index].bodyText }</b>
+                        <button className="btn btn-sm mt-auto btn-gainsboro" onClick={ event => NotificationUtilities.openUrl(articles[index].linkContent) }>{ articles[index].buttonText }</button>
+                    </div>
+                </div> }
+        </div>
+    );
 }

src/components/hotel-view/views/widgets/widget-container/WidgetContainerView.tsx

@@ -27,12 +27,12 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
 
   	return (
         <div className="widgetcontainer widget d-flex flex-row overflow-hidden">
-            <div className="widgetcontainer-image flex-shrink-0" style={{ backgroundImage: `url(${getOption('image')})` }} />
+            <div className="widgetcontainer-image flex-shrink-0" style={ { backgroundImage: `url(${ getOption('image') })` } } />
             <div className="d-flex flex-column align-self-center">
-                <h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3>
-                <i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i>
-                <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={event => NotificationUtilities.openUrl(getOption('btnLink'))}>{ LocalizeText(`landing.view.${getOption('texts')}.button`) }</button>
+                <h3 className="my-0">{LocalizeText(`landing.view.${ getOption('texts') }.header`)}</h3>
+                <i>{ LocalizeText(`landing.view.${ getOption('texts') }.body`) }</i>
+                <button className="btn btn-sm btn-gainsboro align-self-start px-3 mt-auto" onClick={ event => NotificationUtilities.openUrl(getOption('btnLink')) }>{ LocalizeText(`landing.view.${ getOption('texts') }.button`) }</button>
             </div>
-    	</div>
+        </div>
   	);
 }

src/components/inventory/InventoryView.tsx

@@ -123,7 +123,7 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey={'inventory'} className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } >
+        <NitroCardView uniqueKey={ 'inventory' } className="nitro-inventory" theme={ isTrading ? 'primary-slim' : '' } >
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ close } />
             { !isTrading &&
                 <>

src/components/inventory/views/furniture/InventoryTradeView.tsx

@@ -160,9 +160,9 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             return (
                                 <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) }>
                                     { ((count > 0) && (groupItem === item)) &&
-                                            <Button position="absolute" variant="success" className="trade-button bottom-1 end-1" onClick={ event => attemptItemOffer(1) }>
-                                                <FontAwesomeIcon icon="chevron-right" />
-                                            </Button> }
+                                    <Button position="absolute" variant="success" className="trade-button bottom-1 end-1" onClick={ event => attemptItemOffer(1) }>
+                                        <FontAwesomeIcon icon="chevron-right" />
+                                    </Button> }
                                 </LayoutGridItem>
                             );
                         }) }
@@ -189,9 +189,9 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 return (
                                     <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) }>
                                         { (ownGroupItem === item) &&
-                                                <Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }>
-                                                    <FontAwesomeIcon icon="chevron-left" />
-                                                </Button> }
+                                        <Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }>
+                                            <FontAwesomeIcon icon="chevron-left" />
+                                        </Button> }
                                     </LayoutGridItem>
                                 );
                             }) }

src/components/mod-tools/ModToolsView.tsx

@@ -214,12 +214,12 @@ export const ModToolsView: FC<{}> = props =>
             }
             { openUserInfo && openUserInfo.map(userId =>
             {
-                return <ModToolsUserView key={userId} userId={userId} onCloseClick={ () => handleClick('close_user_info', userId.toString())}/>
+                return <ModToolsUserView key={ userId } userId={ userId } onCloseClick={ () => handleClick('close_user_info', userId.toString()) }/>
             })
             }
             { openUserChatlogs && openUserChatlogs.map(userId =>
             {
-                return <ModToolsUserChatlogView key={userId} userId={userId} onCloseClick={ () => handleClick('close_user_chatlog', userId.toString())}/>
+                return <ModToolsUserChatlogView key={ userId } userId={ userId } onCloseClick={ () => handleClick('close_user_chatlog', userId.toString()) }/>
             })
             }
             

src/components/mod-tools/views/chatlog/ChatlogView.tsx

@@ -124,7 +124,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
     return (
         <>
             { (records && (records.length === 1)) &&
-                <RoomInfo roomId={records[0].roomId} roomName={records[0].roomName} uniqueKey={ null } style={ {} } /> }
+                <RoomInfo roomId={ records[0].roomId } roomName={ records[0].roomName } uniqueKey={ null } style={ {} } /> }
             <Column fit gap={ 0 } overflow="hidden">
                 <Column gap={ 2 }>
                     <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">

src/components/mod-tools/views/room/ModToolsChatlogView.tsx

@@ -35,7 +35,7 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
     if(!roomChatlog) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
+        <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <NitroCardHeaderView headerText={ `Room Chatlog ${ roomChatlog.roomName }` } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black h-100">
                 { roomChatlog &&

src/components/mod-tools/views/room/ModToolsRoomView.tsx

@@ -76,7 +76,7 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
     }, [ roomId, infoRequested, setInfoRequested ]);
 
     return (
-        <NitroCardView className="nitro-mod-tools-room" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
+        <NitroCardView className="nitro-mod-tools-room" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <Flex gap={ 2 }>

src/components/mod-tools/views/tickets/CfhChatlogView.tsx

@@ -34,9 +34,9 @@ export const CfhChatlogView: FC<CfhChatlogViewProps> = props =>
 
     return (
         <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim">
-            <NitroCardHeaderView headerText={'Issue Chatlog'} onCloseClick={onCloseClick} />
+            <NitroCardHeaderView headerText={ 'Issue Chatlog' } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
-                { chatlogData && <ChatlogView records={[ chatlogData.chatRecord ]} />}
+                { chatlogData && <ChatlogView records={ [ chatlogData.chatRecord ] } />}
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx

@@ -47,7 +47,7 @@ export const ModToolsIssueInfoView: FC<IssueInfoViewProps> = props =>
     return (
         <>
             <NitroCardView className="nitro-mod-tools-handle-issue" theme="primary-slim">
-                <NitroCardHeaderView headerText={'Resolving issue ' + issueId} onCloseClick={() => onIssueInfoClosed(issueId)} />
+                <NitroCardHeaderView headerText={ 'Resolving issue ' + issueId } onCloseClick={ () => onIssueInfoClosed(issueId) } />
                 <NitroCardContentView className="text-black">
                     <Text fontSize={ 4 }>Issue Information</Text>
                     <Grid overflow="auto">
@@ -86,7 +86,7 @@ export const ModToolsIssueInfoView: FC<IssueInfoViewProps> = props =>
                             <Button onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_USELESS) }>Close as useless</Button>
                             <Button variant="danger" onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_ABUSIVE) }>Close as abusive</Button>
                             <Button variant="success" onClick={ event => closeIssue(CloseIssuesMessageComposer.RESOLUTION_RESOLVED) }>Close as resolved</Button> 
-                            <Button variant="secondary" onClick={ event => releaseIssue(issueId)} >Release</Button>
+                            <Button variant="secondary" onClick={ event => releaseIssue(issueId) } >Release</Button>
                         </Column>
                     </Grid>
                 </NitroCardContentView>

src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx

@@ -77,9 +77,9 @@ export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
     {
         switch(currentTab)
         {
-            case 0: return <ModToolsOpenIssuesTabView openIssues={openIssues}/>;
-            case 1: return <ModToolsMyIssuesTabView myIssues={myIssues} onIssueHandleClick={onIssueHandleClicked}/>;
-            case 2: return <ModToolsPickedIssuesTabView pickedIssues={pickedIssues}/>;
+            case 0: return <ModToolsOpenIssuesTabView openIssues={ openIssues }/>;
+            case 1: return <ModToolsMyIssuesTabView myIssues={ myIssues } onIssueHandleClick={ onIssueHandleClicked }/>;
+            case 2: return <ModToolsPickedIssuesTabView pickedIssues={ pickedIssues }/>;
             default: return null;
         }
     }, [ currentTab, myIssues, onIssueHandleClicked, openIssues, pickedIssues ]);

src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx

@@ -35,11 +35,11 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
     }, [ userId ]);
 
     return (
-        <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
+        <NitroCardView className="nitro-mod-tools-chatlog" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <NitroCardHeaderView headerText={ `User Chatlog: ${ username || '' }` } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black h-100">
                 { userChatlog &&
-                    <ChatlogView records={userChatlog} /> }
+                    <ChatlogView records={ userChatlog } /> }
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/mod-tools/views/user/ModToolsUserModActionView.tsx

@@ -62,7 +62,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
         const category = topics[selectedTopic];
         if(selectedTopic === -1) errorMessage = 'You must select a CFH topic';
         if(errorMessage) return sendAlert(errorMessage);
-        const messageOrDefault = (message.trim().length === 0) ? LocalizeText(`help.cfh.topic.${category.id}`) : message;
+        const messageOrDefault = (message.trim().length === 0) ? LocalizeText(`help.cfh.topic.${ category.id }`) : message;
         SendMessageComposer(new DefaultSanctionMessageComposer(user.userId, selectedTopic, messageOrDefault));
         onCloseClick();
     }
@@ -139,7 +139,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                     return;
                 }
 
-                SendMessageComposer(new ModMessageMessageComposer(user.userId, message,  category.id));
+                SendMessageComposer(new ModMessageMessageComposer(user.userId, message, category.id));
                 break;
             }
         }
@@ -150,8 +150,8 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
     if(!user) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-user-action" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
-            <NitroCardHeaderView headerText={'Mod Action: ' + (user ? user.username : '')} onCloseClick={ () => onCloseClick() } />
+        <NitroCardView className="nitro-mod-tools-user-action" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
+            <NitroCardHeaderView headerText={ 'Mod Action: ' + (user ? user.username : '') } onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <select className="form-select form-select-sm" value={ selectedTopic } onChange={ event => setSelectedTopic(parseInt(event.target.value)) }>
                     <option value={ -1 } disabled>CFH Topic</option>
@@ -165,7 +165,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                     <Text small>Optional message type, overrides default</Text>
                     <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) }/>
                 </Column>
-                <Flex justifyContent="between" gap={1}>
+                <Flex justifyContent="between" gap={ 1 }>
                     <Button variant="primary" onClick={ sendDefaultSanction }>Default Sanction</Button>
                     <Button variant="success" onClick={ sendSanction }>Sanction</Button>
                 </Flex>

src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx

@@ -48,7 +48,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
     if(!userId) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-user-visits" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
+        <NitroCardView className="nitro-mod-tools-user-visits" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
             <NitroCardHeaderView headerText={ 'User Visits' } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black" gap={ 1 }>
                 <Column fullHeight gap={ 0 } overflow="hidden">
@@ -70,7 +70,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
                                             height={ height }
                                             rowCount={ roomVisitData.rooms.length }
                                             rowHeight={ 25 }
-                                            className={'log-entry-container' }
+                                            className={ 'log-entry-container' }
                                             rowRenderer={ RowRenderer }
                                         />
                                     );

src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx

@@ -34,8 +34,8 @@ export const ModToolsUserSendMessageView: FC<ModToolsUserSendMessageViewProps> =
     if(!user) return null;
 
     return (
-        <NitroCardView className="nitro-mod-tools-user-message" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
-            <NitroCardHeaderView headerText={'Send Message'} onCloseClick={ () => onCloseClick() } />
+        <NitroCardView className="nitro-mod-tools-user-message" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
+            <NitroCardHeaderView headerText={ 'Send Message' } onCloseClick={ () => onCloseClick() } />
             <NitroCardContentView className="text-black">
                 <Text>Message To: { user.username }</Text>
                 <textarea className="form-control" value={ message } onChange={ event => setMessage(event.target.value) }></textarea>

src/components/mod-tools/views/user/ModToolsUserView.tsx

@@ -107,7 +107,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
 
     return (
         <>
-            <NitroCardView className="nitro-mod-tools-user" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT}>
+            <NitroCardView className="nitro-mod-tools-user" theme="primary-slim" windowPosition={ DraggableWindowPosition.TOP_LEFT }>
                 <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ () => onCloseClick() } />
                 <NitroCardContentView className="text-black">
                     <Grid overflow="hidden">
@@ -123,7 +123,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
                                                 <td>
                                                     { property.value }
                                                     { property.showOnline &&
-                                                            <i className={ `icon icon-pf-${ userInfo.online ? 'online' : 'offline' } ms-2` } /> }
+                                                    <i className={ `icon icon-pf-${ userInfo.online ? 'online' : 'offline' } ms-2` } /> }
                                                 </td>
                                             </tr>
                                         );

src/components/navigator/NavigatorMessageHandler.tsx

@@ -336,7 +336,7 @@ export const NavigatorMessageHandler: FC<{}> = props =>
 
             const newValue = { ...prevValue };
 
-            newValue.homeRoomId  = parser.homeRoomId;
+            newValue.homeRoomId = parser.homeRoomId;
             newValue.settingsReceived = true;
 
             return newValue;

src/components/navigator/NavigatorView.tsx

@@ -225,7 +225,7 @@ export const NavigatorView: FC<{}> = props =>
                             <FontAwesomeIcon icon="plus" />
                         </NitroCardTabsItemView>
                     </NitroCardTabsView>
-                    <NitroCardContentView position='relative'>
+                    <NitroCardContentView position="relative">
                         { isLoading &&
                             <Base fit position="absolute" className="top-0 start-0 z-index-1 bg-muted opacity-0-5" /> }
                         { !isCreatorOpen &&

src/components/navigator/views/NavigatorRoomCreatorView.tsx

@@ -58,7 +58,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                     </Column>
                     <Column grow gap={ 1 }>
                         <Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
-                        <textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={255} onChange={event => setDescription(event.target.value)} placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } />
+                        <textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={ 255 } onChange={ event => setDescription(event.target.value) } placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } />
                     </Column>
                     <Column gap={ 1 }>
                         <Text>{ LocalizeText('navigator.category') }</Text>

src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx

@@ -90,7 +90,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
                     newValue.userCount = Number(value);
                     break;
                 case 'trade_state':
-                    newValue.tradeState =  Number(value);
+                    newValue.tradeState = Number(value);
                     break;
                 case 'allow_walkthrough':
                     newValue.allowWalkthrough = Boolean(value);
@@ -192,7 +192,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
                 { (currentTab === TABS[1]) &&
                     <NavigatorRoomSettingsAccessTabView roomData={ roomData } handleChange={ handleChange } /> }
                 { (currentTab === TABS[2]) &&
-                    <NavigatorRoomSettingsRightsTabView roomData= {roomData } handleChange={ handleChange } /> }
+                    <NavigatorRoomSettingsRightsTabView roomData={ roomData } handleChange={ handleChange } /> }
                 { (currentTab === TABS[3]) &&
                     <NavigatorRoomSettingsVipChatTabView roomData={ roomData } handleChange={ handleChange } /> }
                 { (currentTab === TABS[4]) &&

src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx

@@ -63,7 +63,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
                         <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
                         <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
                     </select>
-                    <select className="form-select form-select-sm" value={roomData.floorThickness} onChange={ event => handleChange('floor_thickness', event.target.value) }>
+                    <select className="form-select form-select-sm" value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
                         <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
                         <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
                         <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>

src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx

@@ -63,34 +63,34 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
 
     return (
         <>
-            <Base pointer className="icon icon-navigator-info" onClick={toggle}/>
-            <Overlay show={isVisible} target={target} placement="right">
+            <Base pointer className="icon icon-navigator-info" onClick={ toggle }/>
+            <Overlay show={ isVisible } target={ target } placement="right">
                 <Popover>
                     <NitroCardContentView overflow="hidden" className="room-info bg-transparent">
-                        <Flex gap={2} overflow="hidden">
-                            <LayoutRoomThumbnailView roomId={roomData.roomId} customUrl={roomData.officialRoomPicRef} className="d-flex flex-column align-items-center justify-content-end mb-1">
+                        <Flex gap={ 2 } overflow="hidden">
+                            <LayoutRoomThumbnailView roomId={ roomData.roomId } customUrl={ roomData.officialRoomPicRef } className="d-flex flex-column align-items-center justify-content-end mb-1">
                                 {roomData.habboGroupId > 0 && (
-                                    <LayoutBadgeImageView badgeCode={roomData.groupBadgeCode} isGroup={true} className={'position-absolute top-0 start-0 m-1 '}/>)}
+                                    <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } isGroup={ true } className={ 'position-absolute top-0 start-0 m-1 ' }/>)}
                                 {roomData.doorMode !== RoomDataParser.OPEN_STATE && (
-                                    <i className={'position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '')}/> )}
+                                    <i className={ 'position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + (roomData.doorMode === RoomDataParser.DOORBELL_STATE ? 'locked' : roomData.doorMode === RoomDataParser.PASSWORD_STATE ? 'password' : roomData.doorMode === RoomDataParser.INVISIBLE_STATE ? 'invisible' : '') }/> )}
                             </LayoutRoomThumbnailView>
-                            <Column gap={1}>
-                                <Text bold truncate className="flex-grow-1" style={{ maxHeight: 13 }}>
+                            <Column gap={ 1 }>
+                                <Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
                                     {roomData.roomName}
                                 </Text>
-                                <Flex gap={1}>
+                                <Flex gap={ 1 }>
                                     <Text italics variant="muted">
                                         {LocalizeText('navigator.roomownercaption')}
                                     </Text>
                                     <UserProfileIconView
-                                        userId={roomData.ownerId}
+                                        userId={ roomData.ownerId }
                                     />
                                     <Text italics>{roomData.ownerName}</Text>
                                 </Flex>
                                 <Text className="flex-grow-1">
                                     {roomData.description}
                                 </Text>
-                                <Flex className={'badge p-1 position-absolute m-1 bottom-0 end-0 m-2 ' + getUserCounterColor()} gap={1}>
+                                <Flex className={ 'badge p-1 position-absolute m-1 bottom-0 end-0 m-2 ' + getUserCounterColor() } gap={ 1 }>
                                     <FontAwesomeIcon icon="user" />
                                     {roomData.userCount}
                                 </Flex>

src/components/navigator/views/search/NavigatorSearchResultItemView.tsx

@@ -81,17 +81,17 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     }
 
     if(thumbnail) return (
-        <Column pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 0 } className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" {...rest}>
-            <LayoutRoomThumbnailView roomId={roomData.roomId} customUrl={roomData.officialRoomPicRef} className="d-flex flex-column align-items-center justify-content-end mb-1">
-                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={roomData.groupBadgeCode} isGroup={true} className={'position-absolute top-0 start-0 m-1'} /> }
+        <Column pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 0 } className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" { ...rest }>
+            <LayoutRoomThumbnailView roomId={ roomData.roomId } customUrl={ roomData.officialRoomPicRef } className="d-flex flex-column align-items-center justify-content-end mb-1">
+                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } isGroup={ true } className={ 'position-absolute top-0 start-0 m-1' } /> }
                 <Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
                     <FontAwesomeIcon icon="user" />
                     { roomData.userCount }
                 </Flex>
                 { (roomData.doorMode !== RoomDataParser.OPEN_STATE) && 
-                        <i className={ ('position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
+                <i className={ ('position-absolute end-0 mb-1 me-1 icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
             </LayoutRoomThumbnailView>
-            <Flex className='w-100'>
+            <Flex className="w-100">
                 <Text truncate className="flex-grow-1">{roomData.roomName}</Text>
                 <Flex reverse alignItems="center" gap={ 1 }>
                     <NavigatorSearchResultItemInfoView roomData={ roomData } />

src/components/navigator/views/search/NavigatorSearchResultView.tsx

@@ -59,9 +59,9 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
             </Flex> {isExtended && 
                 <>
                     {
-                        gridHasTwoColumns ? <AutoGrid columnCount={3} {...rest} columnMinWidth={110} columnMinHeight={130} className="mx-2">
-                            {searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={index} roomData={room} thumbnail={ true } />) }
-                        </AutoGrid> : <Grid columnCount={ 1 } className='navigator-grid' gap={ 0 }>
+                        gridHasTwoColumns ? <AutoGrid columnCount={ 3 } { ...rest } columnMinWidth={ 110 } columnMinHeight={ 130 } className="mx-2">
+                            {searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } thumbnail={ true } />) }
+                        </AutoGrid> : <Grid columnCount={ 1 } className="navigator-grid" gap={ 0 }>
                             { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } />) }
                         </Grid>
                     }

src/components/navigator/views/search/NavigatorSearchView.tsx

@@ -74,7 +74,7 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
                 </select>
             </Flex>
             <Flex fullWidth gap={ 1 }>
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchValue }  onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
+                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.filter.input.placeholder') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
                 <Button variant="primary" onClick={ processSearch }>
                     <FontAwesomeIcon icon="search" />
                 </Button>

src/components/nitropedia/NitropediaView.tsx

@@ -9,7 +9,7 @@ export const NitropediaView: FC<{}> = props =>
 {
     const [ content, setContent ] = useState<string>(null);
     const [ header, setHeader ] = useState<string>('');
-    const [ dimensions, setDimensions ] = useState<{ width: number, height: number}>(null);
+    const [ dimensions, setDimensions ] = useState<{ width: number, height: number }>(null);
     const elementRef = useRef<HTMLDivElement>(null);
     
     const openPage = useCallback(async (link: string) =>
@@ -95,9 +95,9 @@ export const NitropediaView: FC<{}> = props =>
 
     return (
         <NitroCardView className="nitropedia" theme="primary-slim" style={ dimensions ? { width: dimensions.width, height: dimensions.height } : {} }>
-            <NitroCardHeaderView headerText={header} onCloseClick={ () => setContent(null) }/>
+            <NitroCardHeaderView headerText={ header } onCloseClick={ () => setContent(null) }/>
             <NitroCardContentView>
-                <Base fit innerRef={ elementRef } className="text-black" dangerouslySetInnerHTML={{ __html: content }} />
+                <Base fit innerRef={ elementRef } className="text-black" dangerouslySetInnerHTML={ { __html: content } } />
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx

@@ -12,9 +12,9 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =
     switch(item.alertType)
     {
         case NotificationAlertType.NITRO:
-            return <NitroSystemAlertView {...props} />
+            return <NitroSystemAlertView { ...props } />
         case NotificationAlertType.SEARCH:
-            return <NotificationSeachAlertView {...props} />
+            return <NotificationSeachAlertView { ...props } />
         default:
             return <NotificationDefaultAlertView { ...props } />
     }

src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx

@@ -23,14 +23,14 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
     const hasFrank = item.alertType === NotificationAlertType.DEFAULT;
 
     return (
-        <LayoutNotificationAlertView title={title} close={close} {...rest} type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
+        <LayoutNotificationAlertView title={ title } close={ close } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
             <Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
                 {hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }
-                {item.imageUrl && !imageFailed && <img src={item.imageUrl} alt={item.title} onError={() => 
+                {item.imageUrl && !imageFailed && <img src={ item.imageUrl } alt={ item.title } onError={ () => 
                 {
                     setImageFailed(true) 
-                }} className="align-self-baseline" />}
-                <Base classNames={[ 'notification-text overflow-y-auto d-flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-content-center' : '' ]}>
+                } } className="align-self-baseline" />}
+                <Base classNames={ [ 'notification-text overflow-y-auto d-flex flex-column w-100', (item.clickUrl && !hasFrank) ? 'justify-content-center' : '' ] }>
                     { (item.messages.length > 0) && item.messages.map((message, index) =>
                     {
                         const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
@@ -39,16 +39,16 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
                     })}
                     {item.clickUrl && (item.clickUrl.length > 0) && (item.imageUrl && !imageFailed) && <>
                         <hr className="my-2 w-100" />
-                        <Button onClick={visitUrl} className="align-self-center px-3">{LocalizeText(item.clickUrlText)}</Button>
+                        <Button onClick={ visitUrl } className="align-self-center px-3">{LocalizeText(item.clickUrlText)}</Button>
                     </>}
                 </Base>
             </Flex>
             { (!item.imageUrl || (item.imageUrl && imageFailed)) && <>
-                <Column alignItems="center" center gap={0}>
+                <Column alignItems="center" center gap={ 0 }>
                     <hr className="my-2 w-100" />
                     { !item.clickUrl &&
-                        <Button onClick={close}>{LocalizeText('generic.close')}</Button>}
-                    { item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={visitUrl}>{LocalizeText(item.clickUrlText)}</Button> }
+                        <Button onClick={ close }>{LocalizeText('generic.close')}</Button>}
+                    { item.clickUrl && (item.clickUrl.length > 0) && <Button onClick={ visitUrl }>{LocalizeText(item.clickUrlText)}</Button> }
                 </Column>
             </> }
         </LayoutNotificationAlertView>

src/components/notification-center/views/alert-layouts/NotificationSearchAlertView.tsx

@@ -36,12 +36,12 @@ export const NotificationSeachAlertView: FC<NotificationDefaultAlertViewProps> =
     const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
 
     return (
-        <LayoutNotificationAlertView title={title} close={close} {...rest}>
+        <LayoutNotificationAlertView title={ title } close={ close } { ...rest }>
             <Flex fullWidth alignItems="center" position="relative">
                 <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => updateSearchValue(event.target.value) } />
             </Flex>
             <Column fullHeight className="py-1" overflow="hidden">
-                <AutoGrid gap={1} columnCount={1}>
+                <AutoGrid gap={ 1 } columnCount={ 1 }>
                     {results && results.map((n, index) =>
                     { 
                         return <span key={ index }>{ n }</span>

src/components/notification-center/views/confirm-layouts/NotificationDefaultConfirmView.tsx

@@ -10,7 +10,7 @@ export interface NotificationDefaultConfirmViewProps extends LayoutNotificationA
 export const NotificationDefaultConfirmView: FC<NotificationDefaultConfirmViewProps> = props =>
 {
     const { item = null, close = null, ...rest } = props;
-    const { message = null, onConfirm = null, onCancel = null, confirmText = null, cancelText = null, title = null  } = item;
+    const { message = null, onConfirm = null, onCancel = null, confirmText = null, cancelText = null, title = null } = item;
 
     const confirm = () =>
     {
@@ -27,7 +27,7 @@ export const NotificationDefaultConfirmView: FC<NotificationDefaultConfirmViewPr
     }
 
     return (
-        <LayoutNotificationAlertView title={title} close={close} {...rest} type={ NotificationAlertType.ALERT }>
+        <LayoutNotificationAlertView title={ title } close={ close } { ...rest } type={ NotificationAlertType.ALERT }>
             <Flex grow center>
                 <Text>{ message }</Text>
             </Flex>

src/components/room/RoomView.tsx

@@ -96,15 +96,15 @@ export const RoomView: FC<RoomViewProps> = props =>
 
         if(!canvas) return;
 
-        canvas.onclick          = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
-        canvas.onmousemove      = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
-        canvas.onmousedown      = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
-        canvas.onmouseup        = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
+        canvas.onclick = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
+        canvas.onmousemove = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
+        canvas.onmousedown = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
+        canvas.onmouseup = event => DispatchMouseEvent(roomSession.roomId, canvasId, event);
 
-        canvas.ontouchstart     = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
-        canvas.ontouchmove      = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
-        canvas.ontouchend       = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
-        canvas.ontouchcancel    = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
+        canvas.ontouchstart = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
+        canvas.ontouchmove = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
+        canvas.ontouchend = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
+        canvas.ontouchcancel = event => DispatchTouchEvent(roomSession.roomId, canvasId, event);
 
         window.onresize = () =>
         {

src/components/room/widgets/RoomWidgetsView.tsx

@@ -64,8 +64,8 @@ export const RoomWidgetsView: FC<{}> = props =>
     {
         if(!roomSession || !widgetHandler) return;
 
-        const objectId  = event.objectId;
-        const category  = event.category;
+        const objectId = event.objectId;
+        const category = event.category;
 
         let updateEvent: RoomWidgetUpdateRoomObjectEvent = null;