nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into update-purse

Browse Source
This commit is contained in:
Bill 2022-04-03 20:54:17 -04:00
commit e9c272513d
127 changed files with 446 additions and 449 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.eslintrc.json
View File

@ -1,4 +1,5 @@
{ {
"root": true,
"settings": { "settings": {
"react": { "react": {
"pragma": "React", "pragma": "React",
@ -32,8 +33,13 @@
"@typescript-eslint/indent": [ "error", 4, { "SwitchCase": 1 } ], "@typescript-eslint/indent": [ "error", 4, { "SwitchCase": 1 } ],
"array-bracket-spacing": [ "error", "always" ], "array-bracket-spacing": [ "error", "always" ],
"brace-style": [ "error", "allman" ], "brace-style": [ "error", "allman" ],
"template-curly-spacing": [ "error", "always" ],
"no-multi-spaces": [ "error" ],
"react/prop-types": [ "off" ], "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": [ "@typescript-eslint/ban-types": [
"error", "error",
{ {

2
src/App.tsx
View File

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

2
src/api/friends/OpenMessengerChat.ts
View File

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

2
src/api/groups/GetGroupManager.ts
View File

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

44
src/api/inventory/FurnitureItem.ts
View File

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

8
src/api/inventory/GroupItem.ts
View File

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

6
src/api/navigator/NavigatorSearchResultViewDisplayMode.ts
View File

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

56
src/api/navigator/RoomSettingsData.ts
View File

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

4
src/api/nitro/room/DispatchMouseEvent.ts
View File

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

4
src/api/nitro/room/DispatchTouchEvent.ts
View File

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

10
src/api/nitro/room/widgets/events/RoomWidgetUpdateDimmerStateEvent.ts
View File

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

6
src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomObjectEvent.ts
View File

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

8
src/api/nitro/room/widgets/handlers/FurniturePresentWidgetHandler.ts
View File

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

2
src/api/nitro/room/widgets/handlers/FurnitureTrophyWidgetHandler.ts
View File

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

6
src/api/nitro/room/widgets/messages/RoomWidgetFurniActionMessage.ts
View File

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

6
src/api/nitro/room/widgets/messages/RoomWidgetFurniToWidgetMessage.ts
View File

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

4
src/api/nitro/room/widgets/messages/RoomWidgetRoomObjectMessage.ts
View File

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

2
src/api/nitro/session/IsOwnerOfFurniture.ts
View File

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

2
src/api/utils/ColorUtils.ts
View File

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

6
src/api/wired/WiredSelectionFilter.ts
View File

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

4
src/common/draggable-window/DraggableWindow.tsx
View File

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

2
src/common/layout/LayoutFurniIconImageView.tsx
View File

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

2
src/common/layout/LayoutNotificationAlertView.tsx
View File

@ -27,7 +27,7 @@ export const LayoutNotificationAlertView: FC<LayoutNotificationAlertViewProps> =
return ( return (
<NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }> <NitroCardView classNames={ getClassNames } theme="primary-slim" { ...rest }>
<NitroCardHeaderView headerText={ title } onCloseClick={ close } /> <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 } { children }
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>

2
src/common/layout/LayoutProgressBar.tsx
View File

@ -25,7 +25,7 @@ export const LayoutProgressBar: FC<LayoutProgressBarProps> = props =>
<Column position={ position } justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }> <Column position={ position } justifyContent={ justifyContent } classNames={ getClassNames } { ...rest }>
{ text && (text.length > 0) && { text && (text.length > 0) &&
<Flex fit center position="absolute" className="nitro-progress-bar-text small">{ text }</Flex> } <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 } { children }
</Column> </Column>
); );

2
src/common/layout/UserProfileIconView.tsx
View File

@ -10,7 +10,7 @@ export interface UserProfileIconViewProps extends BaseProps<HTMLDivElement>
export const UserProfileIconView: FC<UserProfileIconViewProps> = props => 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(() => const getClassNames = useMemo(() =>
{ {

12
src/components/avatar-editor/common/AvatarEditorGridPartItem.ts
View File

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

2
src/components/avatar-editor/common/CategoryBaseModel.ts
View File

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

4
src/components/avatar-editor/common/FigureData.ts
View File

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

2
src/components/avatar-editor/views/model/AvatarEditorModelView.tsx
View File

@ -67,7 +67,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
<AvatarEditorIcon icon="female" selected={ (gender === FigureData.FEMALE) } /> <AvatarEditorIcon icon="female" selected={ (gender === FigureData.FEMALE) } />
</Flex> </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); const category = model.categories.get(name);

4
src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
View File

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

2
src/components/campaign/CalendarItemView.tsx
View File

@ -33,7 +33,7 @@ export const CalendarItemView: FC<CalendarItemViewProps> = props =>
} }
return ( 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) && { (state === CalendarItemState.STATE_UNLOCKED) &&
<Flex center className="campaign-spritesheet unlocked-bg"> <Flex center className="campaign-spritesheet unlocked-bg">
<Flex center className="campaign-spritesheet campaign-opened"> <Flex center className="campaign-spritesheet campaign-opened">

2
src/components/campaign/CampaignView.tsx
View File

@ -103,7 +103,7 @@ export const CampaignView: FC<{}> = props =>
return ( return (
<> <>
{(calendarData && isCalendarOpen) && {(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 } />
} }
</> </>
) )

2
src/components/catalog/CatalogMessageHandler.tsx
View File

@ -254,7 +254,7 @@ export const CatalogMessageHandler: FC<{}> = props =>
title = LocalizeText('inventory.marketplace.result.title.failure'); 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); NotificationUtilities.simpleAlert(message, NotificationAlertType.DEFAULT, null, null, title);
}, []); }, []);

46
src/components/catalog/common/FurniCategory.ts
View File

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

4
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -135,7 +135,7 @@ export const CatalogGiftView: FC<{}> = props =>
if(!giftData) continue; 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); setMaxBoxIndex(giftConfiguration.boxTypes.length - 1);
@ -210,7 +210,7 @@ export const CatalogGiftView: FC<{}> = props =>
{ LocalizeText('catalog.gift_wrapping.pick_color') } { LocalizeText('catalog.gift_wrapping.pick_color') }
</Text> </Text>
<ButtonGroup fullWidth> <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> </ButtonGroup>
</Column> </Column>
<Flex justifyContent="between" alignItems="center"> <Flex justifyContent="between" alignItems="center">

20
src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
View File

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

2
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
View File

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

2
src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
View File

@ -157,7 +157,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
</Text> </Text>
<Column className="nitro-catalog-layout-marketplace-grid" overflow="auto"> <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>
</Column> </Column>

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

@ -29,7 +29,7 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
const productData = offer.products[0]; 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); return LocalizeText(localizationKey);
}, [ offer ]); }, [ offer ]);

2
src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
View File

@ -39,7 +39,7 @@ export const CatalogSpinnerWidgetView: FC<{}> = props =>
<Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text> <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
<FontAwesomeIcon icon="caret-left" className="text-black cursor-pointer" onClick={ event => updateQuantity(quantity - 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) } /> <FontAwesomeIcon icon="caret-right" className="text-black cursor-pointer" onClick={ event => updateQuantity(quantity + 1) } />
</Flex> </Flex>
</> </>

2
src/components/chat-history/ChatHistoryView.tsx
View File

@ -33,7 +33,7 @@ export const ChatHistoryView: FC<{}> = props =>
<Text variant="muted">{ item.timestamp }</Text> <Text variant="muted">{ item.timestamp }</Text>
{ (item.type === ChatEntryType.TYPE_CHAT) && { (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> <Text textBreak wrap grow>{ item.message }</Text>
</> } </> }
{ (item.type === ChatEntryType.TYPE_ROOM_INFO) && { (item.type === ChatEntryType.TYPE_ROOM_INFO) &&

2
src/components/chat-history/common/Utilities.ts
View File

@ -1,5 +1,5 @@
export const currentDate = () => export const currentDate = () =>
{ {
const currentTime = new Date(); 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') }`;
} }

2
src/components/floorplan-editor/FloorplanEditorView.tsx
View File

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

2
src/components/floorplan-editor/common/Constants.ts
View File

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

2
src/components/floorplan-editor/common/Utils.ts
View File

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

2
src/components/floorplan-editor/views/FloorplanImportExportView.tsx
View File

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

4
src/components/floorplan-editor/views/FloorplanOptionsView.tsx
View File

@ -149,7 +149,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
<Text bold>{ LocalizeText('floor.editor.wall.height') }</Text> <Text bold>{ LocalizeText('floor.editor.wall.height') }</Text>
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
<FontAwesomeIcon icon="caret-left" className="cursor-pointer" onClick={ decreaseWallHeight } /> <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 } /> <FontAwesomeIcon icon="caret-right" className="cursor-pointer" onClick={ increaseWallHeight } />
</Flex> </Flex>
</Column> </Column>
@ -164,7 +164,7 @@ export const FloorplanOptionsView: FC<{}> = props =>
step={ 1 } step={ 1 }
value={ floorHeight } value={ floorHeight }
onChange={ event => onFloorHeightChange(event) } 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>
<Column size={ 6 }> <Column size={ 6 }>
<Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text> <Text bold>{ LocalizeText('floor.plan.editor.room.options') }</Text>

16
src/components/friends/views/friends-bar/FriendBarItemView.tsx
View File

@ -42,18 +42,18 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
return ( return (
<div ref={ elementRef } className={ 'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }> <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) && <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>
<div className="text-truncate">{ friend.name }</div> <div className="text-truncate">{ friend.name }</div>
{ isVisible && { isVisible &&
<div className="d-flex justify-content-between"> <div className="d-flex justify-content-between">
<Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } /> <Base className="nitro-friends-spritesheet icon-friendbar-chat cursor-pointer" onClick={ event => OpenMessengerChat(friend.id) } />
{ friend.followingAllowed && { friend.followingAllowed &&
<Base className="nitro-friends-spritesheet icon-friendbar-visit cursor-pointer" onClick={ event => followFriend(friend) } /> } <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) } /> <Base className="nitro-friends-spritesheet icon-profile cursor-pointer" onClick={ event => GetUserProfile(friend.id) } />
</div> } </div> }
</div> </div>
); );
} }

4
src/components/friends/views/friends-list/FriendsListSearchView.tsx
View File

@ -64,7 +64,7 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
</Flex> </Flex>
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
{ result.isAvatarOnline && { 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> </Flex>
</NitroCardAccordionItemView> </NitroCardAccordionItemView>
) )
@ -91,7 +91,7 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
</Flex> </Flex>
<Flex alignItems="center" gap={ 1 }> <Flex alignItems="center" gap={ 1 }>
{ canRequestFriend(result.avatarId) && { 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> </Flex>
</NitroCardAccordionItemView> </NitroCardAccordionItemView>
) )

4
src/components/friends/views/friends-list/FriendsListView.tsx
View File

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

4
src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
View File

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

20
src/components/groups/views/GroupBadgeCreatorView.tsx
View File

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

2
src/components/groups/views/GroupCreatorView.tsx
View File

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

2
src/components/groups/views/GroupInformationView.tsx
View File

@ -121,7 +121,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
<Flex alignItems="center" gap={ 2 }> <Flex alignItems="center" gap={ 2 }>
<Text bold>{ groupInformation.title }</Text> <Text bold>{ groupInformation.title }</Text>
<Flex gap={ 1 }> <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 && { groupInformation.canMembersDecorate &&
<i className="icon icon-group-decorate" title={ LocalizeText('group.memberscandecorate') } /> } <i className="icon icon-group-decorate" title={ LocalizeText('group.memberscandecorate') } /> }
</Flex> </Flex>

4
src/components/groups/views/GroupManagerView.tsx
View File

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

20
src/components/groups/views/GroupMembersView.tsx
View File

@ -177,21 +177,21 @@ export const GroupMembersView: FC<{}> = props =>
<Column grow gap={ 1 }> <Column grow gap={ 1 }>
<Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text> <Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>
{ (member.rank !== GroupRank.REQUESTED) && { (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>
<Column gap={ 1 }> <Column gap={ 1 }>
{ (member.rank !== GroupRank.REQUESTED) && { (member.rank !== GroupRank.REQUESTED) &&
<Flex center> <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) } /> <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> }
{ membersData.admin && (member.rank === GroupRank.REQUESTED) && { membersData.admin && (member.rank === GroupRank.REQUESTED) &&
<Flex alignItems="center"> <Flex alignItems="center">
<Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) }></Base> <Base pointer className="nitro-friends-spritesheet icon-accept" title={ LocalizeText('group.members.accept') } onClick={ event => acceptMembership(member) }></Base>
</Flex> } </Flex> }
{ membersData.admin && (member.rank !== GroupRank.OWNER) && (member.id !== GetSessionDataManager().userId) && { membersData.admin && (member.rank !== GroupRank.OWNER) && (member.id !== GetSessionDataManager().userId) &&
<Flex alignItems="center"> <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> <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> }
</Column> </Column>
</Flex> </Flex>
); );

8
src/components/groups/views/tabs/GroupTabColorsView.tsx
View File

@ -102,8 +102,8 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
<Text bold>{ LocalizeText('group.edit.color.guild.color') }</Text> <Text bold>{ LocalizeText('group.edit.color.guild.color') }</Text>
{ groupData.groupColors && (groupData.groupColors.length > 0) && { groupData.groupColors && (groupData.groupColors.length > 0) &&
<Flex overflow="hidden" className="rounded border"> <Flex overflow="hidden" className="rounded border">
<Base className="group-color-swatch" style={{ backgroundColor: '#' + getGroupColor(0) }} /> <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(1) } } />
</Flex> } </Flex> }
</Column> </Column>
<Column size={ 5 } gap={ 1 } overflow="hidden"> <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 }> <AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
{ groupData.groupColors && groupCustomize.groupColorsA && groupCustomize.groupColorsA.map((item, index) => { 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> </AutoGrid>
</Column> </Column>
@ -120,7 +120,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
<AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }> <AutoGrid gap={ 1 } columnCount={ 7 } columnMinWidth={ 16 } columnMinHeight={ 16 }>
{ groupData.groupColors && groupCustomize.groupColorsB && groupCustomize.groupColorsB.map((item, index) => { 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> </AutoGrid>
</Column> </Column>

4
src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
View File

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

8
src/components/guide-tool/views/GuideToolOngoingView.tsx
View File

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

6
src/components/help/views/SanctionStatusView.tsx
View File

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

2
src/components/help/views/SelectReportedUserView.tsx
View File

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

4
src/components/help/views/name-change/NameChangeInputView.tsx
View File

@ -79,11 +79,11 @@ export const NameChangeInputView:FC<NameChangeLayoutViewProps> = props =>
<div className="d-flex flex-column gap-3 h-100"> <div className="d-flex flex-column gap-3 h-100">
<div>{ LocalizeText('tutorial.name_change.info.select') }</div> <div>{ LocalizeText('tutorial.name_change.info.select') }</div>
<div className="d-flex gap-2"> <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> <button className="btn btn-primary" disabled={ newUsername === '' || isChecking } onClick={ check }>{ LocalizeText('tutorial.name_change.check') }</button>
</div> </div>
{ !errorCode && !canProceed && <div className="bg-muted rounded p-2 text-center">{ LocalizeText('help.tutorial.name.info') }</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> } { 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"> { suggestions && <div className="d-flex flex-column gap-2">
{ {

2
src/components/help/views/name-change/NameChangeView.tsx
View File

@ -57,7 +57,7 @@ export const NameChangeView:FC<{}> = props =>
return ( return (
<NitroCardView className="nitro-change-username" theme="primary-slim"> <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"> <NitroCardContentView className="text-black">
{ layout === INIT && <NameChangeInitView onAction={ onAction } /> } { layout === INIT && <NameChangeInitView onAction={ onAction } /> }
{ layout === INPUT && <NameChangeInputView onAction={ onAction } /> } { layout === INPUT && <NameChangeInputView onAction={ onAction } /> }

44
src/components/hotel-view/HotelView.tsx
View File

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

4
src/components/hotel-view/views/widgets/GetWidgetLayout.tsx
View File

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

4
src/components/hotel-view/views/widgets/WidgetSlotView.tsx
View File

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

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

@ -37,7 +37,7 @@ export const BonusRareWidgetView: FC<BonusRareWidgetViewProps> = props =>
{ productType } { productType }
<div className="bg-light-dark rounded overflow-hidden position-relative bonus-bar-container"> <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="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>
</div> </div>
); );

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

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

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

@ -27,12 +27,12 @@ export const WidgetContainerView: FC<WidgetContainerViewProps> = props =>
return ( return (
<div className="widgetcontainer widget d-flex flex-row overflow-hidden"> <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"> <div className="d-flex flex-column align-self-center">
<h3 className="my-0">{LocalizeText(`landing.view.${getOption('texts')}.header`)}</h3> <h3 className="my-0">{LocalizeText(`landing.view.${ getOption('texts') }.header`)}</h3>
<i>{ LocalizeText(`landing.view.${getOption('texts')}.body`) }</i> <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> <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> </div>
); );
} }

2
src/components/inventory/InventoryView.tsx
View File

@ -123,7 +123,7 @@ export const InventoryView: FC<{}> = props =>
if(!isVisible) return null; if(!isVisible) return null;
return ( 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 } /> <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ close } />
{ !isTrading && { !isTrading &&
<> <>

12
src/components/inventory/views/furniture/InventoryTradeView.tsx
View File

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

4
src/components/mod-tools/ModToolsView.tsx
View File

@ -214,12 +214,12 @@ export const ModToolsView: FC<{}> = props =>
} }
{ openUserInfo && openUserInfo.map(userId => { 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 => { 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()) }/>
}) })
} }

2
src/components/mod-tools/views/chatlog/ChatlogView.tsx
View File

@ -124,7 +124,7 @@ export const ChatlogView: FC<ChatlogViewProps> = props =>
return ( return (
<> <>
{ (records && (records.length === 1)) && { (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 fit gap={ 0 } overflow="hidden">
<Column gap={ 2 }> <Column gap={ 2 }>
<Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1"> <Grid gap={ 1 } className="text-black fw-bold border-bottom pb-1">

2
src/components/mod-tools/views/room/ModToolsChatlogView.tsx
View File

@ -35,7 +35,7 @@ export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
if(!roomChatlog) return null; if(!roomChatlog) return null;
return ( 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 } /> <NitroCardHeaderView headerText={ `Room Chatlog ${ roomChatlog.roomName }` } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black h-100"> <NitroCardContentView className="text-black h-100">
{ roomChatlog && { roomChatlog &&

2
src/components/mod-tools/views/room/ModToolsRoomView.tsx
View File

@ -76,7 +76,7 @@ export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
}, [ roomId, infoRequested, setInfoRequested ]); }, [ roomId, infoRequested, setInfoRequested ]);
return ( 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() } /> <NitroCardHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => onCloseClick() } />
<NitroCardContentView className="text-black"> <NitroCardContentView className="text-black">
<Flex gap={ 2 }> <Flex gap={ 2 }>

4
src/components/mod-tools/views/tickets/CfhChatlogView.tsx
View File

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

4
src/components/mod-tools/views/tickets/ModToolsIssueInfoView.tsx
View File

@ -47,7 +47,7 @@ export const ModToolsIssueInfoView: FC<IssueInfoViewProps> = props =>
return ( return (
<> <>
<NitroCardView className="nitro-mod-tools-handle-issue" theme="primary-slim"> <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"> <NitroCardContentView className="text-black">
<Text fontSize={ 4 }>Issue Information</Text> <Text fontSize={ 4 }>Issue Information</Text>
<Grid overflow="auto"> <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 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="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="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> </Column>
</Grid> </Grid>
</NitroCardContentView> </NitroCardContentView>

6
src/components/mod-tools/views/tickets/ModToolsTicketsView.tsx
View File

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

4
src/components/mod-tools/views/user/ModToolsUserChatlogView.tsx
View File

@ -35,11 +35,11 @@ export const ModToolsUserChatlogView: FC<ModToolsUserChatlogViewProps> = props =
}, [ userId ]); }, [ userId ]);
return ( 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 } /> <NitroCardHeaderView headerText={ `User Chatlog: ${ username || '' }` } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black h-100"> <NitroCardContentView className="text-black h-100">
{ userChatlog && { userChatlog &&
<ChatlogView records={userChatlog} /> } <ChatlogView records={ userChatlog } /> }
</NitroCardContentView> </NitroCardContentView>
</NitroCardView> </NitroCardView>
); );

10
src/components/mod-tools/views/user/ModToolsUserModActionView.tsx
View File

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

4
src/components/mod-tools/views/user/ModToolsUserRoomVisitsView.tsx
View File

@ -48,7 +48,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
if(!userId) return null; if(!userId) return null;
return ( 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 } /> <NitroCardHeaderView headerText={ 'User Visits' } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black" gap={ 1 }> <NitroCardContentView className="text-black" gap={ 1 }>
<Column fullHeight gap={ 0 } overflow="hidden"> <Column fullHeight gap={ 0 } overflow="hidden">
@ -70,7 +70,7 @@ export const ModToolsUserRoomVisitsView: FC<ModToolsUserRoomVisitsViewProps> = p
height={ height } height={ height }
rowCount={ roomVisitData.rooms.length } rowCount={ roomVisitData.rooms.length }
rowHeight={ 25 } rowHeight={ 25 }
className={'log-entry-container' } className={ 'log-entry-container' }
rowRenderer={ RowRenderer } rowRenderer={ RowRenderer }
/> />
); );

4
src/components/mod-tools/views/user/ModToolsUserSendMessageView.tsx
View File

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

4
src/components/mod-tools/views/user/ModToolsUserView.tsx
View File

@ -107,7 +107,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
return ( 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() } /> <NitroCardHeaderView headerText={ LocalizeText('modtools.userinfo.title', [ 'username' ], [ userInfo.userName ]) } onCloseClick={ () => onCloseClick() } />
<NitroCardContentView className="text-black"> <NitroCardContentView className="text-black">
<Grid overflow="hidden"> <Grid overflow="hidden">
@ -123,7 +123,7 @@ export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
<td> <td>
{ property.value } { property.value }
{ property.showOnline && { 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> </td>
</tr> </tr>
); );

2
src/components/navigator/NavigatorMessageHandler.tsx
View File

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

2
src/components/navigator/NavigatorView.tsx
View File

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

2
src/components/navigator/views/NavigatorRoomCreatorView.tsx
View File

@ -58,7 +58,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
</Column> </Column>
<Column grow gap={ 1 }> <Column grow gap={ 1 }>
<Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text> <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>
<Column gap={ 1 }> <Column gap={ 1 }>
<Text>{ LocalizeText('navigator.category') }</Text> <Text>{ LocalizeText('navigator.category') }</Text>

4
src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
View File

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

2
src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
View File

@ -63,7 +63,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
<option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option> <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
<option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option> <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
</select> </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="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.thick') }</option>
<option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option> <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>

22
src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
View File

@ -63,34 +63,34 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
return ( return (
<> <>
<Base pointer className="icon icon-navigator-info" onClick={toggle}/> <Base pointer className="icon icon-navigator-info" onClick={ toggle }/>
<Overlay show={isVisible} target={target} placement="right"> <Overlay show={ isVisible } target={ target } placement="right">
<Popover> <Popover>
<NitroCardContentView overflow="hidden" className="room-info bg-transparent"> <NitroCardContentView overflow="hidden" className="room-info bg-transparent">
<Flex gap={2} overflow="hidden"> <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"> <LayoutRoomThumbnailView roomId={ roomData.roomId } customUrl={ roomData.officialRoomPicRef } className="d-flex flex-column align-items-center justify-content-end mb-1">
{roomData.habboGroupId > 0 && ( {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 && ( {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> </LayoutRoomThumbnailView>
<Column gap={1}> <Column gap={ 1 }>
<Text bold truncate className="flex-grow-1" style={{ maxHeight: 13 }}> <Text bold truncate className="flex-grow-1" style={ { maxHeight: 13 } }>
{roomData.roomName} {roomData.roomName}
</Text> </Text>
<Flex gap={1}> <Flex gap={ 1 }>
<Text italics variant="muted"> <Text italics variant="muted">
{LocalizeText('navigator.roomownercaption')} {LocalizeText('navigator.roomownercaption')}
</Text> </Text>
<UserProfileIconView <UserProfileIconView
userId={roomData.ownerId} userId={ roomData.ownerId }
/> />
<Text italics>{roomData.ownerName}</Text> <Text italics>{roomData.ownerName}</Text>
</Flex> </Flex>
<Text className="flex-grow-1"> <Text className="flex-grow-1">
{roomData.description} {roomData.description}
</Text> </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" /> <FontAwesomeIcon icon="user" />
{roomData.userCount} {roomData.userCount}
</Flex> </Flex>

10
src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
View File

@ -81,17 +81,17 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
} }
if(thumbnail) return ( 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}> <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"> <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'} /> } { 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 }> <Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
<FontAwesomeIcon icon="user" /> <FontAwesomeIcon icon="user" />
{ roomData.userCount } { roomData.userCount }
</Flex> </Flex>
{ (roomData.doorMode !== RoomDataParser.OPEN_STATE) && { (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> </LayoutRoomThumbnailView>
<Flex className='w-100'> <Flex className="w-100">
<Text truncate className="flex-grow-1">{roomData.roomName}</Text> <Text truncate className="flex-grow-1">{roomData.roomName}</Text>
<Flex reverse alignItems="center" gap={ 1 }> <Flex reverse alignItems="center" gap={ 1 }>
<NavigatorSearchResultItemInfoView roomData={ roomData } /> <NavigatorSearchResultItemInfoView roomData={ roomData } />

6
src/components/navigator/views/search/NavigatorSearchResultView.tsx
View File

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

2
src/components/navigator/views/search/NavigatorSearchView.tsx
View File

@ -74,7 +74,7 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
</select> </select>
</Flex> </Flex>
<Flex fullWidth gap={ 1 }> <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 }> <Button variant="primary" onClick={ processSearch }>
<FontAwesomeIcon icon="search" /> <FontAwesomeIcon icon="search" />
</Button> </Button>

6
src/components/nitropedia/NitropediaView.tsx
View File

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

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

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

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

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

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

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

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

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

16
src/components/room/RoomView.tsx
View File

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

4
src/components/room/widgets/RoomWidgetsView.tsx
View File

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

2
src/components/room/widgets/avatar-info/AvatarInfoRentableBotChatView.tsx
View File

@ -42,7 +42,7 @@ export const AvatarInfoRentableBotChatView: FC<AvatarInfoRentableBotChatViewProp
<Column className="p-1"> <Column className="p-1">
<Column gap={ 1 }> <Column gap={ 1 }>
<Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text> <Text variant="white">{ LocalizeText('bot.skill.chatter.configuration.chat.text') }</Text>
<textarea className="form-control form-control-sm" placeholder={LocalizeText('bot.skill.chatter.configuration.text.placeholder')} value={newText} rows={7} onChange={e => setNewText(e.target.value)} /> <textarea className="form-control form-control-sm" placeholder={ LocalizeText('bot.skill.chatter.configuration.text.placeholder') } value={ newText } rows={ 7 } onChange={ e => setNewText(e.target.value) } />
</Column> </Column>
<Column gap={ 1 }> <Column gap={ 1 }>
<Flex gap={ 1 } alignItems="center" justifyContent="between"> <Flex gap={ 1 } alignItems="center" justifyContent="between">

Some files were not shown because too many files have changed in this diff Show More