nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-12-03 18:26:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Move more stuff around

Browse Source
This commit is contained in:
Bill 2022-03-04 12:26:37 -05:00
parent f51ab006e0
commit b7be05f488
39 changed files with 144 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/common/index.scss
View File

@ -339,6 +339,65 @@
}
}
.avatar-image {
position: relative;
width: 90px;
height: 130px;
background-repeat: no-repeat;
background-position: center -8px;
pointer-events: none;
image-rendering: pixelated;
&.scale-0-5,
&.scale-0-75 {
image-rendering: -webkit-optimize-contrast;
}
}
.pet-image {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.room-preview-container {
position: relative;
width: 100%;
.room-preview-image {
position: relative;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: $border-radius;
background-color: $light;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
&.border-0 {
&::after {
content: none;
}
}
&::after {
position: absolute;
content: '';
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: $border-radius;
border-bottom: 2px solid white;
border-right: 2px solid white;
box-shadow: -2px -2px rgba(0, 0, 0, .4), inset 3px 3px rgba(0, 0, 0, .2);
}
}
}
@import './card/NitroCardView';

8
src/views/shared/avatar-image/AvatarImageView.tsx → src/common/layout/LayoutAvatarImageView.tsx
View File

@ -1,9 +1,9 @@
import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
import { GetAvatarRenderManager } from '../../../api';
import { Base, BaseProps } from '../../../common/Base';
import { GetAvatarRenderManager } from '../../api';
import { Base, BaseProps } from '../Base';
export interface AvatarImageViewProps extends BaseProps<HTMLDivElement>
export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>
{
figure: string;
gender?: string;
@ -12,7 +12,7 @@ export interface AvatarImageViewProps extends BaseProps<HTMLDivElement>
scale?: number;
}
export const AvatarImageView: FC<AvatarImageViewProps> = props =>
export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
{
const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
const [ avatarUrl, setAvatarUrl ] = useState<string>(null);

4
src/common/layout/LayoutGiftTagView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { LocalizeText } from '../../api';
import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
import { LayoutAvatarImageView } from './LayoutAvatarImageView';
interface LayoutGiftTagViewProps
{
@ -20,7 +20,7 @@ export const LayoutGiftTagView: FC<LayoutGiftTagViewProps> = props =>
<div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
{ !userName && <div className="gift-incognito"></div> }
{ figure && <div className="gift-avatar">
<AvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
<LayoutAvatarImageView figure={ figure } direction={ 2 } headOnly={ true } />
</div> }
</div>
<div className="d-flex flex-column w-100 pt-4 pb-4 pe-4 ps-3">

6
src/views/shared/pet-image/PetImageView.tsx → src/common/layout/LayoutPetImageView.tsx
View File

@ -1,8 +1,8 @@
import { PetCustomPart, PetFigureData, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useRef, useState } from 'react';
import { GetRoomEngine } from '../../../api';
import { GetRoomEngine } from '../../api';
interface PetImageViewProps
interface LayoutPetImageViewProps
{
figure?: string;
typeId?: number;
@ -15,7 +15,7 @@ interface PetImageViewProps
scale?: number;
}
export const PetImageView: FC<PetImageViewProps> = props =>
export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
{
const { figure = '', typeId = -1, paletteId = -1, color = 0xFFFFFF, customParts = [], posture = 'std', headOnly = false, direction = 0, scale = 1 } = props;
const [ petUrl, setPetUrl ] = useState<string>(null);

6
src/views/shared/room-previewer/RoomPreviewerView.tsx → src/common/layout/LayoutRoomPreviewerView.tsx
View File

@ -1,14 +1,14 @@
import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetNitroInstance } from '../../../api';
import { GetNitroInstance } from '../../api';
export interface RoomPreviewerViewProps
export interface LayoutRoomPreviewerViewProps
{
roomPreviewer: RoomPreviewer;
height?: number;
}
export const RoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
{
const { roomPreviewer = null, height = 0 } = props;
const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);

3
src/common/layout/index.ts
View File

@ -1,3 +1,4 @@
export * from './LayoutAvatarImageView';
export * from './LayoutBadgeImageView';
export * from './LayoutCurrencyIcon';
export * from './LayoutFurniImageView';
@ -9,7 +10,9 @@ export * from './LayoutLoadingSpinnerView';
export * from './LayoutMiniCameraView';
export * from './LayoutNotificationAlertView';
export * from './LayoutNotificationBubbleView';
export * from './LayoutPetImageView';
export * from './LayoutRarityLevelView';
export * from './LayoutRoomPreviewerView';
export * from './LayoutRoomThumbnailView';
export * from './LayoutTrophyView';
export * from './UserProfileIconView';

6
src/components/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.tsx
View File

@ -1,8 +1,6 @@
import { AvatarDirectionAngle } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { Base } from '../../../../common/Base';
import { Column } from '../../../../common/Column';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { Base, Column, LayoutAvatarImageView } from '../../../../common';
import { FigureData } from '../../common/FigureData';
import { AvatarEditorIcon } from '../AvatarEditorIcon';
@ -50,7 +48,7 @@ export const AvatarEditorFigurePreviewView: FC<AvatarEditorFigurePreviewViewProp
return (
<Column className="figure-preview-container" overflow="hidden" position="relative">
<AvatarImageView figure={ figureData.getFigureString() } direction={ figureData.direction } scale={ 2 } />
<LayoutAvatarImageView figure={ figureData.getFigureString() } direction={ figureData.direction } scale={ 2 } />
<AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
<Base className="avatar-shadow" />
<Base className="arrow-container">

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

@ -1,8 +1,7 @@
import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
import { GetAvatarRenderManager, GetSessionDataManager, SendMessageComposer } from '../../../../api';
import { AutoGrid, Base, Button, Flex, LayoutCurrencyIcon, LayoutGridItem } from '../../../../common';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { AutoGrid, Base, Button, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../../../common';
import { FigureData } from '../../common/FigureData';
export interface AvatarEditorWardrobeViewProps
@ -56,7 +55,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
items.push(
<LayoutGridItem key={ index } position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
{ figureContainer &&
<AvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
<LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
<Base className="avatar-shadow" />
{ (clubLevel > 0) && <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
<Flex gap={ 1 } className="button-container">

6
src/components/catalog/views/catalog-room-previewer/CatalogRoomPreviewerView.tsx
View File

@ -1,11 +1,11 @@
import { NitroToolbarAnimateIconEvent, TextureUtils, ToolbarIconEnum } from '@nitrots/nitro-renderer';
import { FC, useCallback, useRef } from 'react';
import { GetRoomEngine } from '../../../../api';
import { LayoutRoomPreviewerView, LayoutRoomPreviewerViewProps } from '../../../../common';
import { CatalogPurchasedEvent } from '../../../../events';
import { UseUiEvent } from '../../../../hooks';
import { RoomPreviewerView, RoomPreviewerViewProps } from '../../../../views/shared/room-previewer/RoomPreviewerView';
export const CatalogRoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
export const CatalogRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
{
const { roomPreviewer = null } = props;
const elementRef = useRef<HTMLDivElement>(null);
@ -43,7 +43,7 @@ export const CatalogRoomPreviewerView: FC<RoomPreviewerViewProps> = props =>
return (
<div ref={ elementRef }>
<RoomPreviewerView { ...props } />
<LayoutRoomPreviewerView { ...props } />
</div>
);
}

5
src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
View File

@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ApproveNameMessageComposer, ColorConverter, GetSellablePetPalettesComposer, PurchaseFromCatalogComposer, SellablePetPaletteData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../../../api';
import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../../../common';
import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
import { CatalogNameResultEvent, CatalogPurchaseFailureEvent, CatalogWidgetEvent } from '../../../../../../events';
import { BatchUpdates, DispatchUiEvent, UseUiEvent } from '../../../../../../hooks';
import { PetImageView } from '../../../../../../views/shared/pet-image/PetImageView';
import { useCatalogContext } from '../../../../CatalogContext';
import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
@ -213,7 +212,7 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
{
return (
<LayoutGridItem key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
<PetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
<LayoutPetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
</LayoutGridItem>
);
})}

7
src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
View File

@ -1,10 +1,7 @@
import { Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../../api';
import { AutoGrid } from '../../../../../common/AutoGrid';
import { Column } from '../../../../../common/Column';
import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
import { RoomPreviewerView } from '../../../../../views/shared/room-previewer/RoomPreviewerView';
import { AutoGrid, Column, LayoutGridItem, LayoutRoomPreviewerView } from '../../../../../common';
import { useCatalogContext } from '../../../CatalogContext';
import { FurniCategory } from '../../../common/FurniCategory';
import { Offer } from '../../../common/Offer';
@ -102,5 +99,5 @@ export const CatalogViewProductWidgetView: FC<{}> = props =>
);
}
return <RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />;
return <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />;
}

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

@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
import { Base, Button, Column, Flex, Grid, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { Base, Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { BatchUpdates, UseMessageEventHook } from '../../../hooks';
import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
export const GroupMembersView: FC<{}> = props =>
{
@ -183,7 +182,7 @@ export const GroupMembersView: FC<{}> = props =>
return (
<Flex key={ index } gap={ 2 } alignItems="center" overflow="hidden" className="member-list-item bg-white rounded p-2">
<div className="avatar-head cursor-pointer" onClick={ () => GetUserProfile(member.id) }>
<AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
<LayoutAvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
</div>
<Column grow gap={ 1 }>
<Text bold small pointer onClick={ event => GetUserProfile(member.id) }>{ member.name }</Text>

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

@ -1,10 +1,8 @@
import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
import { GuideSessionMessageMessageComposer } from '@nitrots/nitro-renderer/src';
import { GuideSessionGetRequesterRoomMessageComposer, GuideSessionInviteRequesterMessageComposer, GuideSessionMessageMessageComposer, GuideSessionRequesterRoomMessageEvent, GuideSessionResolvedMessageComposer } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useState } from 'react';
import { GetSessionDataManager, LocalizeText, SendMessageComposer, TryVisitRoom } from '../../../api';
import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../common';
import { Base, Button, ButtonGroup, Column, Flex, LayoutAvatarImageView, Text } from '../../../common';
import { UseMessageEventHook } from '../../../hooks';
import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
import { GuideToolMessageGroup } from '../common/GuideToolMessageGroup';
interface GuideToolOngoingViewProps
@ -90,7 +88,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
<Flex fullWidth justifyContent={ isOwnChat(group.userId) ? 'end' : 'start' } gap={ 2 }>
<Base shrink className="message-avatar">
{ (!isOwnChat(group.userId)) &&
<AvatarImageView figure={ userFigure } direction={ 2 } /> }
<LayoutAvatarImageView figure={ userFigure } direction={ 2 } /> }
</Base>
<Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat(group.userId) ? 'right' : 'left') }>
<Text bold>
@ -101,7 +99,7 @@ export const GuideToolOngoingView: FC<GuideToolOngoingViewProps> = props =>
</Base>
{ (isOwnChat(group.userId)) &&
<Base className="message-avatar flex-shrink-0">
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
<LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
</Base> }
</Flex>
);

5
src/components/inventory/views/bot/InventoryBotItemView.tsx
View File

@ -1,7 +1,6 @@
import { MouseEventType } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, useEffect, useState } from 'react';
import { LayoutGridItem } from '../../../../common';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { LayoutAvatarImageView, LayoutGridItem } from '../../../../common';
import { BotItem } from '../../common/BotItem';
import { attemptBotPlacement } from '../../common/BotUtilities';
import { useInventoryContext } from '../../InventoryContext';
@ -51,7 +50,7 @@ export const InventoryBotItemView: FC<InventoryBotItemViewProps> = props =>
return (
<LayoutGridItem itemActive={ isActive } itemUnseen={ botItem.isUnseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
<AvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
<LayoutAvatarImageView figure={ botItem.botData.figure } direction={ 3 } headOnly={ true } />
</LayoutGridItem>
);
}

5
src/components/inventory/views/bot/InventoryBotView.tsx
View File

@ -1,8 +1,7 @@
import { GetBotInventoryComposer, IRoomSession, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Button, Column, Grid, Text } from '../../../../common';
import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
import { AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text } from '../../../../common';
import { attemptBotPlacement } from '../../common/BotUtilities';
import { useInventoryContext } from '../../InventoryContext';
import { InventoryBotActions } from '../../reducers/InventoryBotReducer';
@ -79,7 +78,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
</Column>
{ botItem &&
<Column grow justifyContent="between" gap={ 2 }>

5
src/components/inventory/views/furniture/InventoryFurnitureView.tsx
View File

@ -1,9 +1,8 @@
import { FurnitureListComposer, IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, Text } from '../../../../common';
import { AutoGrid, Button, Column, Grid, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
import { LimitedEditionCompactPlateView } from '../../../../views/shared/limited-edition/LimitedEditionCompactPlateView';
import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
import { FurniCategory } from '../../common/FurniCategory';
import { attemptItemPlacement, attemptPlaceMarketplaceOffer } from '../../common/FurnitureUtilities';
import { GroupItem } from '../../common/GroupItem';
@ -115,7 +114,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
{ groupItem && groupItem.stuffData.isUnique &&
<LimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ groupItem.stuffData.uniqueNumber } uniqueSeries={ groupItem.stuffData.uniqueSeries } /> }
{ (groupItem && groupItem.stuffData.rarityLevel > -1) &&

5
src/components/inventory/views/pet/InventoryPetItemView.tsx
View File

@ -1,7 +1,6 @@
import { MouseEventType } from '@nitrots/nitro-renderer';
import { FC, MouseEvent, useEffect, useState } from 'react';
import { LayoutGridItem } from '../../../../common';
import { PetImageView } from '../../../../views/shared/pet-image/PetImageView';
import { LayoutGridItem, LayoutPetImageView } from '../../../../common';
import { PetItem } from '../../common/PetItem';
import { attemptPetPlacement } from '../../common/PetUtilities';
import { useInventoryContext } from '../../InventoryContext';
@ -51,7 +50,7 @@ export const InventoryPetItemView: FC<InventoryPetItemViewProps> = props =>
return (
<LayoutGridItem itemActive={ isActive } itemUnseen={ petItem.isUnseen } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
<PetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
<LayoutPetImageView figure={ petItem.petData.figureData.figuredata } direction={ 3 } headOnly={ true } />
</LayoutGridItem>
);
}

5
src/components/inventory/views/pet/InventoryPetView.tsx
View File

@ -1,8 +1,7 @@
import { IRoomSession, RequestPetsComposer, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Button, Column, Grid, Text } from '../../../../common';
import { RoomPreviewerView } from '../../../../views/shared/room-previewer/RoomPreviewerView';
import { AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text } from '../../../../common';
import { attemptPetPlacement } from '../../common/PetUtilities';
import { useInventoryContext } from '../../InventoryContext';
import { InventoryPetActions } from '../../reducers/InventoryPetReducer';
@ -78,7 +77,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
</Column>
<Column size={ 5 } overflow="auto">
<Column overflow="hidden" position="relative">
<RoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
</Column>
{ petItem &&
<Column grow justifyContent="between" gap={ 2 }>

13
src/components/room/widgets/avatar-info/AvatarInfoUseProductConfirmView.tsx
View File

@ -1,8 +1,7 @@
import { IFurnitureData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomUserData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { GetFurnitureDataForRoomObject, GetRoomEngine, LocalizeText, RoomWidgetUseProductMessage, UseProductItem } from '../../../../api';
import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { PetImageView } from '../../../../views/shared/pet-image/PetImageView';
import { Base, Button, Column, Flex, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { FurniCategory } from '../../../inventory/common/FurniCategory';
import { useRoomContext } from '../../RoomContext';
@ -71,7 +70,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
}
}
return <PetImageView typeId={ petFigureData.typeId } paletteId={ paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } direction={ 2 } />
return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } direction={ 2 } />
}
case FurniCategory.PET_CUSTOM_PART: {
if(customParts.length < 4) return null;
@ -98,7 +97,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
_local_10++;
}
return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
}
case FurniCategory.PET_CUSTOM_PART_SHAMPOO: {
if(customParts.length < 3) return null;
@ -124,7 +123,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
_local_10++;
}
return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
}
case FurniCategory.PET_SADDLE: {
if(customParts.length < 4) return null;
@ -152,7 +151,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
}
}
return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ newCustomParts } direction={ 2 } />;
}
case FurniCategory.MONSTERPLANT_REBREED:
case FurniCategory.MONSTERPLANT_REVIVAL:
@ -174,7 +173,7 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
}
}
return <PetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } posture={ posture } direction={ 2 } />;
return <LayoutPetImageView typeId={ petFigureData.typeId } paletteId={ petFigureData.paletteId } color={ petFigureData.color } customParts={ petFigureData.customParts } posture={ posture } direction={ 2 } />;
}
}
}, [ petData, furniData, roomSession ]);

5
src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
View File

@ -1,8 +1,7 @@
import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../api';
import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
import { Base, Button, Column, Flex, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
import { FigureData } from '../../../../avatar-editor/common/FigureData';
import { FurniCategory } from '../../../../inventory/common/FurniCategory';
import { useRoomContext } from '../../../RoomContext';
@ -87,7 +86,7 @@ export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewPr
<Flex gap={ 2 } overflow="hidden">
<Column>
<Base className="mannequin-preview">
<AvatarImageView figure={ newFigure } direction={ 2 } />
<LayoutAvatarImageView figure={ newFigure } direction={ 2 } />
</Base>
</Column>
<Column justifyContent="between" overflow="auto">

7
src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx
View File

@ -1,9 +1,8 @@
import { FriendFurniConfirmLockMessageComposer, LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomEngine, GetRoomSession, LocalizeText, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
import { DraggableWindow, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
import { DraggableWindow, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
import { UseEventDispatcherHook, UseMessageEventHook, UseRoomEngineEvent } from '../../../../../hooks';
import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../RoomContext';
import { FurnitureEngravingLockData } from './FriendFurniLockData';
@ -119,10 +118,10 @@ export const FurnitureFriendFurniView: FC<{}> = props =>
<div className="engraving-lock-close" onClick={ event => processAction('close_view') }></div>
<div className="d-flex justify-content-center">
<div className="engraving-lock-avatar">
<AvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
<LayoutAvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
</div>
<div className="engraving-lock-avatar">
<AvatarImageView figure={ engravingLockData.figures[1] } direction={ 4 } />
<LayoutAvatarImageView figure={ engravingLockData.figures[1] } direction={ 4 } />
</div>
</div>
<div className="text-center mt-1">

5
src/components/room/widgets/furniture/mannequin/FurnitureMannequinPreviewView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { Base, LayoutCurrencyIcon } from '../../../../../common';
import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
import { Base, LayoutAvatarImageView, LayoutCurrencyIcon } from '../../../../../common';
interface FurnitureMannequinPreviewViewProps
{
@ -14,7 +13,7 @@ export const FurnitureMannequinPreviewView: FC<FurnitureMannequinPreviewViewProp
return (
<Base position="relative" className="mannequin-preview">
<AvatarImageView figure={ figure } direction={ 2 } />
<LayoutAvatarImageView figure={ figure } direction={ 2 } />
{ (clubLevel > 0) &&
<LayoutCurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
</Base>

5
src/components/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
View File

@ -1,9 +1,8 @@
import { AvatarFigurePartType, FurnitureMannequinSaveLookComposer, FurnitureMannequinSaveNameComposer, FurnitureMultiStateComposer, HabboClubLevelEnum, IAvatarFigureContainer, RoomControllerLevel } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
import { GetAvatarRenderManager, GetSessionDataManager, LocalizeText, RoomWidgetUpdateMannequinEvent, SendMessageComposer } from '../../../../../api';
import { Base, Button, Column, Flex, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
import { Base, Button, Column, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
import { BatchUpdates, UseEventDispatcherHook } from '../../../../../hooks';
import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../RoomContext';
const MODE_NONE: number = -1;
@ -179,7 +178,7 @@ export const FurnitureMannequinView: FC<{}> = props =>
<Flex gap={ 2 } overflow="hidden">
<Column>
<Base position="relative" className="mannequin-preview">
<AvatarImageView figure={ renderedFigure } direction={ 2 } />
<LayoutAvatarImageView figure={ renderedFigure } direction={ 2 } />
{ (clubLevel > 0) &&
<LayoutCurrencyIcon className="position-absolute end-2 bottom-2" type="hc" /> }
</Base>

5
src/components/room/widgets/infostand/InfoStandWidgetBotView.tsx
View File

@ -1,8 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
import { LocalizeText, RoomWidgetUpdateInfostandUserEvent } from '../../../../api';
import { Column, Flex, LayoutBadgeImageView, Text } from '../../../../common';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text } from '../../../../common';
interface InfoStandWidgetBotViewProps
{
@ -29,7 +28,7 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
<Column gap={ 1 }>
<Flex gap={ 1 }>
<Column fullWidth className="body-image bot">
<AvatarImageView figure={ botData.figure } direction={ 4 } />
<LayoutAvatarImageView figure={ botData.figure } direction={ 4 } />
</Column>
<Column grow center gap={ 0 }>
{ (botData.badges.length > 0) && botData.badges.map(result =>

5
src/components/room/widgets/infostand/InfoStandWidgetPetView.tsx
View File

@ -1,8 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
import { LocalizeText, RoomWidgetUpdateInfostandPetEvent } from '../../../../api';
import { Base, Column, Flex, Text, UserProfileIconView } from '../../../../common';
import { PetImageView } from '../../../../views/shared/pet-image/PetImageView';
import { Base, Column, Flex, LayoutPetImageView, Text, UserProfileIconView } from '../../../../common';
interface InfoStandWidgetPetViewProps
{
@ -30,7 +29,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
<Column gap={ 1 }>
<Flex gap={ 1 }>
<Column fullWidth overflow="hidden" className="body-image pet p-1">
<PetImageView figure={ petData.petFigure } posture={ petData.posture } direction={ 4 } />
<LayoutPetImageView figure={ petData.petFigure } posture={ petData.posture } direction={ 4 } />
</Column>
<Column grow gap={ 1 }>
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ petData.level.toString(), petData.maximumLevel.toString() ]) }</Text>

5
src/components/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
View File

@ -2,8 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { BotRemoveComposer } from '@nitrots/nitro-renderer';
import { FC, useMemo } from 'react';
import { LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { Button, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { BotSkillsEnum } from '../avatar-info/common/BotSkillsEnum';
interface InfoStandWidgetRentableBotViewProps
@ -43,7 +42,7 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
<Column gap={ 1 }>
<Flex gap={ 1 }>
<Column fullWidth className="body-image bot">
<AvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
<LayoutAvatarImageView figure={ rentableBotData.figure } direction={ 4 } />
</Column>
<Column grow center gap={ 0 }>
{ (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>

5
src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx
View File

@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
import { GetConfiguration, GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { Base, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { BatchUpdates, UseEventDispatcherHook, UseMessageEventHook } from '../../../../hooks';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../RoomContext';
import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
@ -104,7 +103,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<Column gap={ 1 }>
<Flex gap={ 1 }>
<Column fullWidth className="body-image">
<AvatarImageView figure={ userData.figure } direction={ 4 } />
<LayoutAvatarImageView figure={ userData.figure } direction={ 4 } />
</Column>
<Column grow gap={ 0 }>
<Flex gap={ 1 }>

5
src/components/toolbar/ToolbarView.tsx
View File

@ -1,10 +1,9 @@
import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, UserInfoDataParser, UserInfoEvent, Wait } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { CreateLinkEvent, GetRoomSession, GetRoomSessionManager, GetSessionDataManager, GetUserProfile, GoToDesktop, OpenMessengerChat } from '../../api';
import { Base, Flex, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, ModToolsEvent, NavigatorEvent, UnseenItemTrackerUpdateEvent, UserSettingsUIEvent } from '../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
import { AvatarImageView } from '../../views/shared/avatar-image/AvatarImageView';
import { ToolbarViewItems } from './common/ToolbarViewItems';
import { ToolbarMeView } from './ToolbarMeView';
@ -196,7 +195,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
<Flex gap={ 2 } alignItems="center">
<Flex alignItems="center" gap={ 2 }>
<Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
<AvatarImageView figure={ userFigure } direction={ 2 } />
<LayoutAvatarImageView figure={ userFigure } direction={ 2 } />
{ (unseenAchievementCount > 0) &&
<LayoutItemCountView count={ unseenAchievementCount } /> }
</Flex>

4
src/components/user-profile/views/RelationshipsContainerView.tsx
View File

@ -1,7 +1,7 @@
import { RelationshipStatusEnum, RelationshipStatusInfo, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { GetUserProfile, LocalizeText } from '../../../api';
import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
import { LayoutAvatarImageView } from '../../../common';
interface RelationshipsContainerViewProps
{
@ -46,7 +46,7 @@ export const RelationshipsContainerView: FC<RelationshipsContainerViewProps> = p
}
{
(!simple && relationshipInfo && relationshipInfo.friendCount > 0) &&
<AvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
<LayoutAvatarImageView figure={relationshipInfo.randomFriendFigure} headOnly={true} direction={4} />
}
</span>

4
src/components/user-profile/views/UserContainerView.tsx
View File

@ -1,7 +1,7 @@
import { FriendlyTime, UserProfileParser } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../api';
import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
import { LayoutAvatarImageView } from '../../../common';
interface UserContainerViewProps
{
@ -32,7 +32,7 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
return (
<div className="row">
<div className="col-auto px-0 d-flex align-items-center">
<AvatarImageView figure={userProfile.figure} direction={2} />
<LayoutAvatarImageView figure={userProfile.figure} direction={2} />
</div>
<div className="col">
<div className="user-info-container">

8
src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
View File

@ -1,11 +1,7 @@
import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../../api';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Flex } from '../../../../common/Flex';
import { Text } from '../../../../common/Text';
import { Button, Column, Flex, LayoutAvatarImageView, Text } from '../../../../common';
import { BatchUpdates } from '../../../../hooks';
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
import { WiredFurniType } from '../../common/WiredFurniType';
import { WIRED_STRING_DELIMETER } from '../../common/WiredStringDelimeter';
import { useWiredContext } from '../../context/WiredContext';
@ -47,7 +43,7 @@ export const WiredActionBotChangeFigureView: FC<{}> = props =>
<input type="text" className="form-control form-control-sm" maxLength={ 32 } value={ botName } onChange={ event => setBotName(event.target.value) } />
</Column>
<Flex center>
<AvatarImageView figure={ figure } direction={ 4 } />
<LayoutAvatarImageView figure={ figure } direction={ 4 } />
<Button onClick={ copyLooks }>{ LocalizeText('wiredfurni.params.capture.figure') }</Button>
</Flex>
</WiredActionBaseView>

5
src/views/friends/views/friend-bar/FriendBarItemView.tsx
View File

@ -1,8 +1,7 @@
import { FollowFriendMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetUserProfile, LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
import { Base, LayoutBadgeImageView } from '../../../../common';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
import { MessengerFriend } from '../../common/MessengerFriend';
interface FriendBarItemViewProps
@ -63,7 +62,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
return (
<div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
{ friend.id > 0 && <AvatarImageView 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} />}
</div>
<div className="text-truncate">{ friend.name }</div>

9
src/views/friends/views/messenger/FriendsMessengerThreadGroup.tsx
View File

@ -1,7 +1,6 @@
import { FC, useMemo } from 'react';
import { GetSessionDataManager } from '../../../../api';
import { Base, Flex } from '../../../../common';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { Base, Flex, LayoutAvatarImageView } from '../../../../common';
import { GroupType } from '../../common/GroupType';
import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
@ -55,10 +54,10 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
<Flex className={ 'w-100 justify-content-' + (isOwnChat ? 'end' : 'start') } gap={ 2 }>
<Base className="message-avatar flex-shrink-0">
{ (group.type === GroupType.PRIVATE_CHAT && !isOwnChat) &&
<AvatarImageView figure={ thread.participant.figure } direction={ 2 } />
<LayoutAvatarImageView figure={ thread.participant.figure } direction={ 2 } />
}
{ (group.type === GroupType.GROUP_CHAT && !isOwnChat) &&
<AvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
<LayoutAvatarImageView figure={ getGroupChatData(group.chats[0].extraData).figure } direction={ 2} />
}
</Base>
<Base className={ 'bg-light text-black border-radius mb-2 rounded py-1 px-2 messages-group-' + (isOwnChat ? 'right' : 'left') }>
@ -73,7 +72,7 @@ export const FriendsMessengerThreadGroup: FC<FriendsMessengerThreadGroupProps> =
</Base>
{ (isOwnChat) &&
<Base className="message-avatar flex-shrink-0">
<AvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
<LayoutAvatarImageView figure={ GetSessionDataManager().figure } direction={ 4 } />
</Base> }
</Flex>
);

5
src/views/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -1,10 +1,9 @@
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { FriendsMessengerIconEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
import { useFriendsContext } from '../../FriendsContext';
@ -269,7 +268,7 @@ export const FriendsMessengerView: FC<{}> = props =>
}
<div className="friend-head rounded flex-shrink-0">
{thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
{thread.participant.id > 0 && <LayoutAvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
{thread.participant.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
</div>

5
src/views/hc-center/HcCenterView.tsx
View File

@ -2,10 +2,9 @@ import { BadgesEvent, ClubGiftInfoEvent, FigureUpdateEvent, FriendlyTime, GetClu
import { FC, useCallback, useEffect, useState } from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
import { LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
import { LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
import { HcCenterEvent } from '../../events';
import { UseMessageEventHook, UseUiEvent } from '../../hooks';
import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
import { BadgeResolver } from './util/BadgeResolver';
import { ClubStatus } from './util/ClubStatus';
@ -213,7 +212,7 @@ export const HcCenterView: FC<{}> = props =>
{LocalizeText(clubStatus === ClubStatus.ACTIVE ? 'hccenter.btn.extend' : 'hccenter.btn.buy')}
</button>
<div className="position-absolute end-0 p-4 top-0 habbo-avatar">
<AvatarImageView figure={userFigure} direction={4} scale={2} />
<LayoutAvatarImageView figure={userFigure} direction={4} scale={2} />
</div>
</div>
<NitroCardContentView>

5
src/views/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
View File

@ -1,7 +1,6 @@
import { FC } from 'react';
import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
import { UserProfileIconView } from '../../../../../common';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common';
import { HallOfFameItemViewProps } from './HallOfFameItemView.types';
export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
@ -16,7 +15,7 @@ export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
</div>
<div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ])}</div>
</div>
<AvatarImageView figure={ data.figure } direction={ 2 } />
<LayoutAvatarImageView figure={ data.figure } direction={ 2 } />
</div>
);
}

2
src/views/shared/Shared.scss
View File

@ -1,4 +1,2 @@
@import "./avatar-image/AvatarImage";
@import "./limited-edition/LimitedEdition";
@import "./pet-image/PetImage";
@import "./room-previewer/RoomPreviewerView";

14
src/views/shared/avatar-image/AvatarImage.scss
View File

@ -1,14 +0,0 @@
.avatar-image {
position: relative;
width: 90px;
height: 130px;
background-repeat: no-repeat;
background-position: center -8px;
pointer-events: none;
image-rendering: pixelated;
&.scale-0-5,
&.scale-0-75 {
image-rendering: -webkit-optimize-contrast;
}
}

7
src/views/shared/pet-image/PetImage.scss
View File

@ -1,7 +0,0 @@
.pet-image {
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}