rotateFigure(figureData.direction + 1) } />
-
rotateFigure(figureData.direction - 1) } />
-
-
+
+
+
+
rotateFigure(figureData.direction + 1) } />
+ rotateFigure(figureData.direction - 1) } />
+
+
);
}
diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
similarity index 77%
rename from src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
rename to src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
index 37e06d99..aced50e1 100644
--- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
@@ -1,7 +1,7 @@
import { FC, useCallback, useEffect, useState } from 'react';
+import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
import { NitroCardGridItemViewProps } from '../../../../layout';
-import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
-import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
+import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
import { AvatarEditorGridPartItem } from '../../common/AvatarEditorGridPartItem';
import { AvatarEditorIcon } from '../AvatarEditorIcon';
@@ -31,11 +31,11 @@ export const AvatarEditorFigureSetItemView: FC
+
{ partItem.isHC && }
{ partItem.isClear && }
{ partItem.isSellable && }
{ children }
-
+
);
}
diff --git a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
similarity index 94%
rename from src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
rename to src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index ecfb7fb3..4092696e 100644
--- a/src/views/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -30,7 +30,7 @@ export const AvatarEditorFigureSetView: FC = pro
}, [ model, category, setMaxPaletteCount ]);
return (
-
+
{ (category.parts.length > 0) && category.parts.map((item, index) =>
selectPart(item) } />) }
diff --git a/src/views/avatar-editor/views/model/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/model/AvatarEditorModelView.tsx
similarity index 100%
rename from src/views/avatar-editor/views/model/AvatarEditorModelView.tsx
rename to src/components/avatar-editor/views/model/AvatarEditorModelView.tsx
diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx
similarity index 62%
rename from src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx
rename to src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx
index 3c6d8528..dd45397a 100644
--- a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx
+++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetItemView.tsx
@@ -1,10 +1,9 @@
import { FC, useCallback, useEffect, useState } from 'react';
-import { NitroCardGridItemViewProps } from '../../../../layout';
-import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
-import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
+import { LayoutGridItem, LayoutGridItemProps } from '../../../../common/layout/LayoutGridItem';
+import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
import { AvatarEditorGridColorItem } from '../../common/AvatarEditorGridColorItem';
-export interface AvatarEditorPaletteSetItemProps extends NitroCardGridItemViewProps
+export interface AvatarEditorPaletteSetItemProps extends LayoutGridItemProps
{
colorItem: AvatarEditorGridColorItem;
}
@@ -27,9 +26,9 @@ export const AvatarEditorPaletteSetItem: FC = p
});
return (
-
+
{ colorItem.isHC && }
{ children }
-
+
);
}
diff --git a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
similarity index 94%
rename from src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
rename to src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index 5ccf1069..0fbb7a0c 100644
--- a/src/views/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -27,7 +27,7 @@ export const AvatarEditorPaletteSetView: FC = p
}, [ model, category, paletteSet, paletteIndex ]);
return (
-
+
{ (paletteSet.length > 0) && paletteSet.map((item, index) =>
selectColor(item) } />) }
diff --git a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
similarity index 82%
rename from src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
rename to src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
index 972ffdc4..f1a20a5d 100644
--- a/src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
@@ -3,10 +3,10 @@ import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
import { Button } from 'react-bootstrap';
import { GetAvatarRenderManager, GetSessionDataManager } from '../../../../api';
import { Grid } from '../../../../common/Grid';
+import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
import { SendMessageHook } from '../../../../hooks';
-import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
-import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
-import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
+import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
+import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
import { FigureData } from '../../common/FigureData';
export interface AvatarEditorWardrobeViewProps
@@ -58,14 +58,15 @@ export const AvatarEditorWardrobeView: FC = props
if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
items.push(
-
- { figureContainer && }
+
+ { figureContainer &&
+ }
{ (clubLevel > 0) && }
{ figureContainer && }
-
+
);
});
@@ -73,7 +74,7 @@ export const AvatarEditorWardrobeView: FC = props
}, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
return (
-
+
{ figures }
);
diff --git a/src/components/index.scss b/src/components/index.scss
index 9c745437..81e4c379 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -1 +1,2 @@
+@import './avatar-editor/AvatarEditorView';
@import './inventory/InventoryView';
diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index f619727f..6f9feb96 100644
--- a/src/views/Styles.scss
+++ b/src/views/Styles.scss
@@ -1,11 +1,9 @@
@import "./shared/Shared";
-@import "./avatar-editor/AvatarEditorView";
@import "./camera/CameraWidgetView";
@import "./catalog/CatalogView";
@import "./friends/FriendsView";
@import "./groups/GroupView";
@import "./hotel-view/HotelView";
-@import "./inventory/InventoryView";
@import "./loading/LoadingView";
@import "./main/MainView";
@import "./navigator/NavigatorView";
diff --git a/src/views/avatar-editor/views/figure-actions/AvatarEditorFigureActionsView.tsx b/src/views/avatar-editor/views/figure-actions/AvatarEditorFigureActionsView.tsx
deleted file mode 100644
index e7ebabe8..00000000
--- a/src/views/avatar-editor/views/figure-actions/AvatarEditorFigureActionsView.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
-import { NitroLayoutButton, NitroLayoutButtonGroup, NitroLayoutFlexColumn } from '../../../../layout';
-import { AvatarEditorAction } from '../../common/AvatarEditorAction';
-import { AvatarEditorFigureActionsViewProps } from './AvatarEditorFigureActionsView.types';
-
-export const AvatarEditorFigureActionsView: FC = props =>
-{
- const { processAction = null } = props;
-
- return (
-
-
- processAction(AvatarEditorAction.ACTION_RESET) }>
-
-
- processAction(AvatarEditorAction.ACTION_CLEAR) }>
-
-
- processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
-
-
-
- processAction(AvatarEditorAction.ACTION_SAVE) }>
- { LocalizeText('avatareditor.save') }
-
-
- )
-}
diff --git a/src/views/avatar-editor/views/figure-actions/AvatarEditorFigureActionsView.types.ts b/src/views/avatar-editor/views/figure-actions/AvatarEditorFigureActionsView.types.ts
deleted file mode 100644
index a144113f..00000000
--- a/src/views/avatar-editor/views/figure-actions/AvatarEditorFigureActionsView.types.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-
-export interface AvatarEditorFigureActionsViewProps
-{
- processAction: (action: string) => void;
-}
diff --git a/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.types.ts b/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.types.ts
deleted file mode 100644
index 3956305c..00000000
--- a/src/views/avatar-editor/views/figure-preview/AvatarEditorFigurePreviewView.types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { FigureData } from '../../common/FigureData';
-
-export interface AvatarEditorFigurePreviewViewProps
-{
- figureData: FigureData;
-}
diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx
index c21bc3d7..2ecaab7e 100644
--- a/src/views/main/MainView.tsx
+++ b/src/views/main/MainView.tsx
@@ -1,11 +1,11 @@
import { HabboWebTools, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
+import { AvatarEditorView } from '../../components/avatar-editor/AvatarEditorView';
import { InventoryView } from '../../components/inventory/InventoryView';
import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
import { TransitionAnimation, TransitionAnimationTypes } from '../../layout';
import { AchievementsView } from '../achievements/AchievementsView';
-import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
import { CameraWidgetView } from '../camera/CameraWidgetView';
import { CampaignView } from '../campaign/CampaignView';
import { CatalogView } from '../catalog/CatalogView';
diff --git a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx
index d1e751b8..bdb93aec 100644
--- a/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx
+++ b/src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx
@@ -1,9 +1,9 @@
import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../../api';
+import { FigureData } from '../../../../../../../components/avatar-editor/common/FigureData';
import { FurniCategory } from '../../../../../../../components/inventory/common/FurniCategory';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
-import { FigureData } from '../../../../../../avatar-editor/common/FigureData';
import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../../../context/RoomContext';
import { PurchasableClothingConfirmViewProps } from './PurchasableClothingConfirmView.types';
diff --git a/src/views/shared/avatar-image/AvatarImageView.tsx b/src/views/shared/avatar-image/AvatarImageView.tsx
index 94ffac65..54aa79e1 100644
--- a/src/views/shared/avatar-image/AvatarImageView.tsx
+++ b/src/views/shared/avatar-image/AvatarImageView.tsx
@@ -1,27 +1,62 @@
import { AvatarScaleType, AvatarSetType } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
import { GetAvatarRenderManager } from '../../../api';
-import { AvatarImageViewProps } from './AvatarImageView.types';
+import { Base, BaseProps } from '../../../common/Base';
+
+export interface AvatarImageViewProps extends BaseProps
+{
+ figure: string;
+ gender?: string;
+ headOnly?: boolean;
+ direction?: number;
+ scale?: number;
+}
export const AvatarImageView: FC = props =>
{
- const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1 } = props;
+ const { figure = '', gender = 'M', headOnly = false, direction = 0, scale = 1, classNames = [], style = {}, ...rest } = props;
const [ avatarUrl, setAvatarUrl ] = useState(null);
const [ randomValue, setRandomValue ] = useState(-1);
const isDisposed = useRef(false);
- const getScaleStyle = useMemo(() =>
+ const getClassNames = useMemo(() =>
{
- if(scale === .5) return '0-5';
+ const newClassNames: string[] = [ 'avatar-image' ];
- if(scale === .75) return '0-75';
+ switch(scale)
+ {
+ case .5:
+ newClassNames.push('scale-0-5');
+ break;
+ case .75:
+ newClassNames.push('scale-0-75');
+ break;
+ case 1.25:
+ newClassNames.push('scale-1-25');
+ break;
+ case 1.50:
+ newClassNames.push('scale-1-50');
+ break;
+ default:
+ newClassNames.push(`scale-${ scale }`);
+ break;
+ }
- if(scale === 1.25) return '1-25';
+ if(classNames.length) newClassNames.push(...classNames);
- if(scale === 1.50) return '1-50';
+ return newClassNames;
+ }, [ scale, classNames ]);
- return scale.toString();
- }, [ scale ]);
+ const getStyle = useMemo(() =>
+ {
+ let newStyle: CSSProperties = {};
+
+ if(avatarUrl && avatarUrl.length) newStyle.backgroundImage = `url('${ avatarUrl }')`;
+
+ if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+ return newStyle;
+ }, [ avatarUrl, style ]);
useEffect(() =>
{
@@ -60,8 +95,6 @@ export const AvatarImageView: FC = props =>
isDisposed.current = true;
}
}, []);
-
- const url = `url('${ avatarUrl }')`;
- return ;
+ return ;
}
diff --git a/src/views/shared/avatar-image/AvatarImageView.types.ts b/src/views/shared/avatar-image/AvatarImageView.types.ts
deleted file mode 100644
index a5abbe9c..00000000
--- a/src/views/shared/avatar-image/AvatarImageView.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface AvatarImageViewProps
-{
- figure: string;
- gender?: string;
- headOnly?: boolean;
- direction?: number;
- scale?: number;
-}