'); + + return message; + } + + public getImage(index: number): string + { + const imageName = (this._images[index] || ''); + + if(!imageName || !imageName.length) return null; + + let assetUrl = GetConfigurationValue
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/common/Button.tsx b/Coolui v3 test/src/common/Button.tsx
new file mode 100644
index 0000000000..5caca6c16a
--- /dev/null
+++ b/Coolui v3 test/src/common/Button.tsx
@@ -0,0 +1,71 @@
+import { FC, useMemo } from 'react';
+import { Flex, FlexProps } from './Flex';
+import { ButtonSizeType, ColorVariantType } from './types';
+
+export interface ButtonProps extends FlexProps
+{
+ variant?: ColorVariantType;
+ size?: ButtonSizeType;
+ active?: boolean;
+ disabled?: boolean;
+}
+
+export const Button: FC
+
+
+ );
+};
diff --git a/Coolui v3 test/src/common/Popover.tsx b/Coolui v3 test/src/common/Popover.tsx
new file mode 100644
index 0000000000..5a7c5c8954
--- /dev/null
+++ b/Coolui v3 test/src/common/Popover.tsx
@@ -0,0 +1,54 @@
+import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
+
+export const ReactPopover: FC
+ { items.map((virtualRow) => (
+
+
+ { rowRender(rows[virtualRow.index]) }
+
+ )) }
+
+
+ );
+};
diff --git a/Coolui v3 test/src/common/Slider.tsx b/Coolui v3 test/src/common/Slider.tsx
new file mode 100644
index 0000000000..50cba28c55
--- /dev/null
+++ b/Coolui v3 test/src/common/Slider.tsx
@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import ReactSlider, { ReactSliderProps } from 'react-slider';
+import { Button } from './Button';
+import { Flex } from './Flex';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
+
+export interface SliderProps extends ReactSliderProps
+{
+ disabledButton?: boolean;
+}
+
+export const Slider: FC setShow(!show) }
+ >
+ { children }
+
+
+
+
+ { content }
+
+
+
+
+
+ {children}
+
,
+ document.getElementById('draggable-windows-container')
+ );
+};
\ No newline at end of file
diff --git a/Coolui v3 test/src/common/draggable-window/DraggableWindowPosition.ts b/Coolui v3 test/src/common/draggable-window/DraggableWindowPosition.ts
new file mode 100644
index 0000000000..476a37ec95
--- /dev/null
+++ b/Coolui v3 test/src/common/draggable-window/DraggableWindowPosition.ts
@@ -0,0 +1,7 @@
+export class DraggableWindowPosition
+{
+ public static CENTER: string = 'DWP_CENTER';
+ public static TOP_CENTER: string = 'DWP_TOP_CENTER';
+ public static TOP_LEFT: string = 'DWP_TOP_LEFT';
+ public static NOTHING: string = 'DWP_NOTHING';
+}
diff --git a/Coolui v3 test/src/common/draggable-window/index.ts b/Coolui v3 test/src/common/draggable-window/index.ts
new file mode 100644
index 0000000000..7672f5270c
--- /dev/null
+++ b/Coolui v3 test/src/common/draggable-window/index.ts
@@ -0,0 +1,2 @@
+export * from './DraggableWindow';
+export * from './DraggableWindowPosition';
diff --git a/Coolui v3 test/src/common/index.ts b/Coolui v3 test/src/common/index.ts
new file mode 100644
index 0000000000..d8c47aefd0
--- /dev/null
+++ b/Coolui v3 test/src/common/index.ts
@@ -0,0 +1,22 @@
+
+export * from './AutoGrid';
+export * from './Base';
+export * from './Button';
+export * from './ButtonGroup';
+export * from './Column';
+export * from './Flex';
+export * from './FormGroup';
+export * from './Grid';
+export * from './GridContext';
+export * from './HorizontalRule';
+export * from './InfiniteScroll';
+export * from './Text';
+export * from './card';
+export * from './card/accordion';
+export * from './card/tabs';
+export * from './draggable-window';
+export * from './layout';
+export * from './layout/limited-edition';
+export * from './types';
+export * from "./Slider";
+export * from './utils';
diff --git a/Coolui v3 test/src/common/layout/LayoutAvatarImageView.tsx b/Coolui v3 test/src/common/layout/LayoutAvatarImageView.tsx
new file mode 100644
index 0000000000..86d589e43c
--- /dev/null
+++ b/Coolui v3 test/src/common/layout/LayoutAvatarImageView.tsx
@@ -0,0 +1,103 @@
+import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager } from '@nitrots/nitro-renderer';
+import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
+import { Base, BaseProps } from '../Base';
+
+const AVATAR_IMAGE_CACHE: Map{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }
+ { isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }
+ }
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/common/layout/LayoutCounterTimeView.tsx b/Coolui v3 test/src/common/layout/LayoutCounterTimeView.tsx
new file mode 100644
index 0000000000..9b370954c9
--- /dev/null
+++ b/Coolui v3 test/src/common/layout/LayoutCounterTimeView.tsx
@@ -0,0 +1,42 @@
+import { FC, useMemo } from 'react';
+import { LocalizeText } from '../../api';
+import { Base, BaseProps } from '../Base';
+
+interface LayoutCounterTimeViewProps extends BaseProps
+
+ );
+};
diff --git a/Coolui v3 test/src/common/layout/LayoutCurrencyIcon.tsx b/Coolui v3 test/src/common/layout/LayoutCurrencyIcon.tsx
new file mode 100644
index 0000000000..f311c22047
--- /dev/null
+++ b/Coolui v3 test/src/common/layout/LayoutCurrencyIcon.tsx
@@ -0,0 +1,44 @@
+import { CSSProperties, FC, useMemo } from 'react';
+import { GetConfigurationValue } from '../../api';
+import { Base, BaseProps } from '../Base';
+
+export interface CurrencyIconProps extends BaseProps{ day != '00' ? day : hour }{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }
+
+ :
+ { minutes }{ LocalizeText('countdown_clock_unit_minutes') }
+
+ { seconds }{ LocalizeText('countdown_clock_unit_seconds') }
+
+ { children }
+
+ { !userName && }
+ { figure &&
+
+
}
+
+
+ }
+ { children }
+
+
+
+
+
+
+
+
+
+ { level }
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/common/layout/LayoutRoomObjectImageView.tsx b/Coolui v3 test/src/common/layout/LayoutRoomObjectImageView.tsx
new file mode 100644
index 0000000000..01328afae9
--- /dev/null
+++ b/Coolui v3 test/src/common/layout/LayoutRoomObjectImageView.tsx
@@ -0,0 +1,59 @@
+import { GetRoomEngine, TextureUtils, Vector3d } from '@nitrots/nitro-renderer';
+import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
+import { Base, BaseProps } from '../Base';
+
+interface LayoutRoomObjectImageViewProps extends BaseProps
+
+
+
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx b/Coolui v3 test/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx
new file mode 100644
index 0000000000..5bcf776fac
--- /dev/null
+++ b/Coolui v3 test/src/common/layout/limited-edition/LayoutLimitedEditionCompletePlateView.tsx
@@ -0,0 +1,40 @@
+import { FC, useMemo } from 'react';
+import { LocalizeText } from '../../../api';
+import { Base, BaseProps } from '../../Base';
+import { Column } from '../../Column';
+import { LayoutLimitedEditionStyledNumberView } from './LayoutLimitedEditionStyledNumberView';
+
+interface LayoutLimitedEditionCompletePlateViewProps extends BaseProps
+ { LocalizeText('unique.items.left') }
+
+
+ { LocalizeText('unique.items.number.sold') }
+
+
+ { isChildrenVisible && children }
+
+ ) }
+
+
+ { LocalizeBadgeName(AchievementUtilities.getAchievementBadgeCode(achievement)) }
+
+
+ { LocalizeBadgeDescription(AchievementUtilities.getAchievementBadgeCode(achievement)) }
+
+
+ { ((achievement.levelRewardPoints > 0) || (achievement.scoreLimit > 0)) &&
+
+ { (achievement.levelRewardPoints > 0) &&
+
}
+
+
+ { LocalizeText('achievements.details.reward') }
+
+
+ { achievement.levelRewardPoints }
+
+
}
+ { (achievement.scoreLimit > 0) &&
+
+
+ {!selectedCategory && (
+ <>
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/achievements/achievement-list/AchievementListItemView.tsx b/Coolui v3 test/src/components/achievements/achievement-list/AchievementListItemView.tsx
new file mode 100644
index 0000000000..88386f3e4b
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/achievement-list/AchievementListItemView.tsx
@@ -0,0 +1,24 @@
+import { AchievementData } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { LayoutGridItem } from '../../../common';
+import { useAchievements } from '../../../hooks';
+import { AchievementBadgeView } from '../AchievementBadgeView';
+
+interface AchievementListItemViewProps
+{
+ achievement: AchievementData;
+}
+
+export const AchievementListItemView: FC = props =>
+{
+ const { achievement = null } = props;
+ const { selectedAchievement = null, setSelectedAchievementId = null } = useAchievements();
+
+ if(!achievement) return null;
+
+ return (
+ 0) } onClick={ event => setSelectedAchievementId(achievement.achievementId) }>
+
+ );
+};
diff --git a/Coolui v3 test/src/components/achievements/achievement-list/AchievementListView.tsx b/Coolui v3 test/src/components/achievements/achievement-list/AchievementListView.tsx
new file mode 100644
index 0000000000..0d4647230a
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/achievement-list/AchievementListView.tsx
@@ -0,0 +1,20 @@
+import { AchievementData } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { AutoGrid } from '../../../common';
+import { AchievementListItemView } from './AchievementListItemView';
+
+interface AchievementListViewProps
+{
+ achievements: AchievementData[];
+}
+
+export const AchievementListView: FC = props =>
+{
+ const { achievements = null } = props;
+
+ return (
+
+ { achievements && (achievements.length > 0) && achievements.map((achievement, index) =>
+ );
+};
diff --git a/Coolui v3 test/src/components/achievements/achievement-list/index.ts b/Coolui v3 test/src/components/achievements/achievement-list/index.ts
new file mode 100644
index 0000000000..87ccb432ed
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/achievement-list/index.ts
@@ -0,0 +1,2 @@
+export * from './AchievementListItemView';
+export * from './AchievementListView';
diff --git a/Coolui v3 test/src/components/achievements/category-list/AchievementsCategoryListItemView.tsx b/Coolui v3 test/src/components/achievements/category-list/AchievementsCategoryListItemView.tsx
new file mode 100644
index 0000000000..f73c0966a3
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/category-list/AchievementsCategoryListItemView.tsx
@@ -0,0 +1,31 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+import { AchievementUtilities, IAchievementCategory, LocalizeText } from '../../../api';
+import { LayoutBackgroundImage, LayoutGridItem, Text } from '../../../common';
+
+interface AchievementCategoryListItemViewProps
+{
+ category: IAchievementCategory;
+ selectedCategoryCode: string;
+ setSelectedCategoryCode: Dispatch>;
+}
+
+export const AchievementsCategoryListItemView: FC = props =>
+{
+ const { category = null, selectedCategoryCode = null, setSelectedCategoryCode = null } = props;
+
+ if(!category) return null;
+
+ const progress = AchievementUtilities.getAchievementCategoryProgress(category);
+ const maxProgress = AchievementUtilities.getAchievementCategoryMaxProgress(category);
+ const getCategoryImage = AchievementUtilities.getAchievementCategoryImageUrl(category, progress);
+ const getTotalUnseen = AchievementUtilities.getAchievementCategoryTotalUnseen(category);
+
+ return (
+ setSelectedCategoryCode(category.code) }>
+ { LocalizeText(`quests.${ category.code }.name`) }
+
+ { progress } / { maxProgress }
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/achievements/category-list/AchievementsCategoryListView.tsx b/Coolui v3 test/src/components/achievements/category-list/AchievementsCategoryListView.tsx
new file mode 100644
index 0000000000..c641f623b3
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/category-list/AchievementsCategoryListView.tsx
@@ -0,0 +1,22 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+import { IAchievementCategory } from '../../../api';
+import { AutoGrid } from '../../../common';
+import { AchievementsCategoryListItemView } from './AchievementsCategoryListItemView';
+
+interface AchievementsCategoryListViewProps
+{
+ categories: IAchievementCategory[];
+ selectedCategoryCode: string;
+ setSelectedCategoryCode: Dispatch>;
+}
+
+export const AchievementsCategoryListView: FC = props =>
+{
+ const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null } = props;
+
+ return (
+
+ { categories && (categories.length > 0) && categories.map((category, index) =>
+ );
+};
diff --git a/Coolui v3 test/src/components/achievements/category-list/index.ts b/Coolui v3 test/src/components/achievements/category-list/index.ts
new file mode 100644
index 0000000000..5a367f857b
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/category-list/index.ts
@@ -0,0 +1,2 @@
+export * from './AchievementsCategoryListItemView';
+export * from './AchievementsCategoryListView';
diff --git a/Coolui v3 test/src/components/achievements/index.ts b/Coolui v3 test/src/components/achievements/index.ts
new file mode 100644
index 0000000000..89f6737d7c
--- /dev/null
+++ b/Coolui v3 test/src/components/achievements/index.ts
@@ -0,0 +1,6 @@
+export * from './AchievementBadgeView';
+export * from './AchievementCategoryView';
+export * from './AchievementDetailsView';
+export * from './AchievementsView';
+export * from './achievement-list';
+export * from './category-list';
diff --git a/Coolui v3 test/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx b/Coolui v3 test/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
new file mode 100644
index 0000000000..25bb60977f
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/AvatarEditorFigurePreviewView.tsx
@@ -0,0 +1,40 @@
+import { AvatarDirectionAngle } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LayoutAvatarImageView } from '../../common';
+import { useAvatarEditor } from '../../hooks';
+import { AvatarEditorIcon } from './AvatarEditorIcon';
+
+const DEFAULT_DIRECTION: number = 4;
+
+export const AvatarEditorFigurePreviewView: FC<{}> = props =>
+{
+ const [ direction, setDirection ] = useState(DEFAULT_DIRECTION);
+ const { getFigureString = null } = useAvatarEditor();
+
+ const rotateFigure = (newDirection: number) =>
+ {
+ if(direction < AvatarDirectionAngle.MIN_DIRECTION)
+ {
+ newDirection = (AvatarDirectionAngle.MAX_DIRECTION + (direction + 1));
+ }
+
+ if(direction > AvatarDirectionAngle.MAX_DIRECTION)
+ {
+ newDirection = (direction - (AvatarDirectionAngle.MAX_DIRECTION + 1));
+ }
+
+ setDirection(newDirection);
+ };
+
+ return (
+ & DetailedHTMLProps, HTMLDivElement>>((props, ref) =>
+{
+ const { icon = null, selected = false, className = null, ...rest } = props;
+
+ /*
+ switch (icon)
+ {
+ case 'male':
+
+
+ break;
+
+ case 'arrow-left':
+
+ break;
+
+ default:
+ //statements;
+ break;
+
+ }
+*/
+ return (
+
+ );
+});
+
+AvatarEditorIcon.displayName = 'AvatarEditorIcon';
diff --git a/Coolui v3 test/src/components/avatar-editor/AvatarEditorModelView.tsx b/Coolui v3 test/src/components/avatar-editor/AvatarEditorModelView.tsx
new file mode 100644
index 0000000000..53a49ab21a
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/AvatarEditorModelView.tsx
@@ -0,0 +1,80 @@
+import { AvatarEditorFigureCategory, AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { IAvatarEditorCategory } from '../../api';
+import { useAvatarEditor } from '../../hooks';
+import { AvatarEditorIcon } from './AvatarEditorIcon';
+import { AvatarEditorFigureSetView } from './figure-set';
+import { AvatarEditorPaletteSetView } from './palette-set';
+
+export const AvatarEditorModelView: FC<{
+ name: string,
+ categories: IAvatarEditorCategory[]
+}> = props =>
+{
+ const { name = '', categories = [] } = props;
+ const [ didChange, setDidChange ] = useState(false);
+ const [ activeSetType, setActiveSetType ] = useState('');
+ const { maxPaletteCount = 1, gender = null, setGender = null, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null } = useAvatarEditor();
+
+ const activeCategory = useMemo(() =>
+ {
+ return categories.find(category => category.setType === activeSetType) ?? null;
+ }, [ categories, activeSetType ]);
+
+ const selectSet = useCallback((setType: string) =>
+ {
+ const selectedPalettes = selectedColorParts[setType];
+
+ if(!selectedPalettes || !selectedPalettes.length) selectEditorColor(setType, 0, getFirstSelectableColor(setType));
+
+ setActiveSetType(setType);
+ }, [ getFirstSelectableColor, selectEditorColor, selectedColorParts ]);
+
+ useEffect(() =>
+ {
+ if(!categories || !categories.length || !didChange) return;
+
+ selectSet(categories[0]?.setType);
+ setDidChange(false);
+ }, [ categories, didChange, selectSet ]);
+
+ useEffect(() =>
+ {
+ setDidChange(true);
+ }, [ categories ]);
+
+ if(!activeCategory) return null;
+
+ return (
+
+ setIsVisible(false) } />
+
+ { Object.keys(avatarModels).map(modelKey =>
+ {
+ const isActive = (activeModelKey === modelKey);
+
+ return (
+ setActiveModelKey(modelKey) }>
+ { LocalizeText(`avatareditor.category.${ modelKey }`) }
+
+ );
+ }) }
+
+
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/AvatarEditorWardrobeView.tsx b/Coolui v3 test/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
new file mode 100644
index 0000000000..6981bd5f39
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/AvatarEditorWardrobeView.tsx
@@ -0,0 +1,61 @@
+import { GetAvatarRenderManager, IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { GetClubMemberLevel, GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../api';
+import { Button, LayoutAvatarImageView, LayoutCurrencyIcon } from '../../common';
+import { useAvatarEditor } from '../../hooks';
+import { InfiniteGrid } from '../../layout';
+
+export const AvatarEditorWardrobeView: FC<{}> = props =>
+{
+ const { savedFigures = [], setSavedFigures = null, loadAvatarData = null, getFigureString = null, gender = null } = useAvatarEditor();
+
+ const hcDisabled = GetConfigurationValue('hc.disabled', false);
+
+ const wearFigureAtIndex = useCallback((index: number) =>
+ {
+ if((index >= savedFigures.length) || (index < 0)) return;
+
+ const [ figure, gender ] = savedFigures[index];
+
+ loadAvatarData(figure.getFigureString(), gender);
+ }, [ savedFigures, loadAvatarData ]);
+
+ const saveFigureAtWardrobeIndex = useCallback((index: number) =>
+ {
+ if((index >= savedFigures.length) || (index < 0)) return;
+
+ const newFigures = [ ...savedFigures ];
+
+ const figure = getFigureString;
+
+ newFigures[index] = [ GetAvatarRenderManager().createFigureContainer(figure), gender ];
+
+ setSavedFigures(newFigures);
+ SendMessageComposer(new SaveWardrobeOutfitMessageComposer((index + 1), figure, gender));
+ }, [ getFigureString, gender, savedFigures, setSavedFigures ]);
+
+ return (
+
+ {
+ const [ figureContainer, gender ] = item;
+
+ let clubLevel = 0;
+
+ if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
+
+ return (
+
+ { figureContainer &&
+
+ );
+ } } items={ savedFigures } overscan={ 5 } />
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx b/Coolui v3 test/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
new file mode 100644
index 0000000000..4126fa3a66
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/figure-set/AvatarEditorFigureSetItemView.tsx
@@ -0,0 +1,56 @@
+import { AvatarFigurePartType } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { AvatarEditorThumbnailsHelper, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
+import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
+import { useAvatarEditor } from '../../../hooks';
+import { InfiniteGrid } from '../../../layout';
+import { AvatarEditorIcon } from '../AvatarEditorIcon';
+
+export const AvatarEditorFigureSetItemView: FC<{
+ setType: string;
+ partItem: IAvatarEditorCategoryPartItem;
+ isSelected: boolean;
+ width?: string;
+} & LayoutGridItemProps> = props =>
+{
+ const { setType = null, partItem = null, isSelected = false, width = '100%', ...rest } = props;
+ const [ assetUrl, setAssetUrl ] = useState('');
+ const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
+
+ const isHC = !GetConfigurationValue('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
+
+ useEffect(() =>
+ {
+ if(!setType || !setType.length || !partItem) return;
+
+ const loadImage = async () =>
+ {
+ const isHC = !GetConfigurationValue('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
+
+ let url: string = null;
+
+ if(setType === AvatarFigurePartType.HEAD)
+ {
+ url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), isHC);
+ }
+ else
+ {
+ url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, isHC);
+ }
+
+ if(url && url.length) setAssetUrl(url);
+ };
+
+ loadImage();
+ }, [ setType, partItem, selectedColorParts, getFigureStringWithFace ]);
+
+ if(!partItem) return null;
+
+ return (
+
+ { !partItem.isClear && isHC &&
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx b/Coolui v3 test/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
new file mode 100644
index 0000000000..9a5b543233
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/figure-set/AvatarEditorFigureSetView.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { IAvatarEditorCategory, IAvatarEditorCategoryPartItem } from '../../../api';
+import { useAvatarEditor } from '../../../hooks';
+import { InfiniteGrid } from '../../../layout';
+import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
+
+export const AvatarEditorFigureSetView: FC<{
+ category: IAvatarEditorCategory;
+ columnCount: number;
+}> = props =>
+{
+ const { category = null, columnCount = 3 } = props;
+ const { selectedParts = null, selectEditorPart } = useAvatarEditor();
+
+ const isPartItemSelected = (partItem: IAvatarEditorCategoryPartItem) =>
+ {
+ if(!category || !category.setType || !selectedParts) return false;
+
+ if(!selectedParts[category.setType])
+ {
+ if(partItem.isClear) return true;
+
+ return false;
+ }
+
+ const partId = selectedParts[category.setType];
+
+ return (partId === partItem.id);
+ };
+
+ return (
+ columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
+ {
+ if(!item) return null;
+
+ return (
+ selectEditorPart(category.setType, item.partSet?.id ?? -1) } />
+ );
+ } } items={ category.partItems } overscan={ columnCount } />
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/figure-set/index.ts b/Coolui v3 test/src/components/avatar-editor/figure-set/index.ts
new file mode 100644
index 0000000000..0c5880b261
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/figure-set/index.ts
@@ -0,0 +1,2 @@
+export * from './AvatarEditorFigureSetItemView';
+export * from './AvatarEditorFigureSetView';
diff --git a/Coolui v3 test/src/components/avatar-editor/index.ts b/Coolui v3 test/src/components/avatar-editor/index.ts
new file mode 100644
index 0000000000..5ae66e5498
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/index.ts
@@ -0,0 +1,7 @@
+export * from './AvatarEditorFigurePreviewView';
+export * from './AvatarEditorIcon';
+export * from './AvatarEditorModelView';
+export * from './AvatarEditorView';
+export * from './AvatarEditorWardrobeView';
+export * from './figure-set';
+export * from './palette-set';
diff --git a/Coolui v3 test/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx b/Coolui v3 test/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
new file mode 100644
index 0000000000..8a520bc53e
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetItemView.tsx
@@ -0,0 +1,25 @@
+import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetConfigurationValue } from '../../../api';
+import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
+import { InfiniteGrid } from '../../../layout';
+
+export const AvatarEditorPaletteSetItem: FC<{
+ setType: string;
+ partColor: IPartColor;
+ isSelected: boolean;
+ width?: string;
+} & LayoutGridItemProps> = props =>
+{
+ const { setType = null, partColor = null, isSelected = false, width = '100%', ...rest } = props;
+
+ if(!partColor) return null;
+
+ const isHC = !GetConfigurationValue('hc.disabled', false) && (partColor.clubLevel > 0);
+
+ return (
+
+ { isHC &&
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx b/Coolui v3 test/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx
new file mode 100644
index 0000000000..d40c8d1cc0
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/palette-set/AvatarEditorPaletteSetView.tsx
@@ -0,0 +1,36 @@
+import { IPartColor } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { IAvatarEditorCategory } from '../../../api';
+import { useAvatarEditor } from '../../../hooks';
+import { InfiniteGrid } from '../../../layout';
+import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
+
+export const AvatarEditorPaletteSetView: FC<{
+ category: IAvatarEditorCategory;
+ paletteIndex: number;
+ columnCount: number;
+}> = props =>
+{
+ const { category = null, paletteIndex = -1, columnCount = 3 } = props;
+ const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
+
+ const isPartColorSelected = (partColor: IPartColor) =>
+ {
+ if(!category || !category.setType || !selectedColorParts || !selectedColorParts[category.setType] || !selectedColorParts[category.setType][paletteIndex]) return false;
+
+ const selectedColorPart = selectedColorParts[category.setType][paletteIndex];
+
+ return (selectedColorPart.id === partColor.id);
+ };
+
+ return (
+ columnCount={ columnCount } itemRender={ (item: IPartColor) =>
+ {
+ if(!item) return null;
+
+ return (
+ selectEditorColor(category.setType, paletteIndex, item.id) } />
+ );
+ } } items={ category.colorItems[paletteIndex] } overscan={ columnCount } />
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/palette-set/index.ts b/Coolui v3 test/src/components/avatar-editor/palette-set/index.ts
new file mode 100644
index 0000000000..977e5b982a
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/palette-set/index.ts
@@ -0,0 +1,2 @@
+export * from './AvatarEditorPaletteSetItemView';
+export * from './AvatarEditorPaletteSetView';
diff --git a/Coolui v3 test/src/components/backgrounds/BackgroundsView.tsx b/Coolui v3 test/src/components/backgrounds/BackgroundsView.tsx
new file mode 100644
index 0000000000..4813b47abd
--- /dev/null
+++ b/Coolui v3 test/src/components/backgrounds/BackgroundsView.tsx
@@ -0,0 +1,111 @@
+import { GetSessionDataManager, HabboClubLevelEnum} from '@nitrots/nitro-renderer';
+import { Dispatch, FC, SetStateAction, useCallback, useMemo, useState } from 'react';
+import { Base, Grid, Flex, NitroCardView, NitroCardHeaderView, NitroCardTabsView, NitroCardTabsItemView, NitroCardContentView, Text, LayoutCurrencyIcon } from '../../common';
+import { useRoom } from '../../hooks';
+import { GetClubMemberLevel, GetConfigurationValue } from '../../api';
+
+interface ItemData {
+ id: number;
+ isHcOnly: boolean;
+ minRank: number;
+ isAmbassadorOnly: boolean;
+ selectable: boolean;
+}
+
+interface BackgroundsViewProps {
+ setIsVisible: Dispatch>;
+ selectedBackground: number;
+ setSelectedBackground: Dispatch>;
+ selectedStand: number;
+ setSelectedStand: Dispatch>;
+ selectedOverlay: number;
+ setSelectedOverlay: Dispatch>;
+}
+
+const TABS = ['backgrounds', 'stands', 'overlays'] as const;
+type TabType = typeof TABS[number];
+
+export const BackgroundsView: FC = ({
+ setIsVisible,
+ selectedBackground,
+ setSelectedBackground,
+ selectedStand,
+ setSelectedStand,
+ selectedOverlay,
+ setSelectedOverlay
+}) => {
+ const [activeTab, setActiveTab] = useState('backgrounds');
+ const { roomSession } = useRoom();
+
+ const userData = useMemo(() => ({
+ isHcMember: GetClubMemberLevel() >= HabboClubLevelEnum.CLUB,
+ securityLevel: GetSessionDataManager().canChangeName,
+ isAmbassador: GetSessionDataManager().isAmbassador
+ }), []);
+
+ const processData = useCallback((configData: any[], dataType: string): ItemData[] => {
+ if (!configData?.length) return [];
+
+ return configData
+ .filter(item => {
+ const meetsRank = userData.securityLevel >= item.minRank;
+ const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
+ return item.isHcOnly || (meetsRank && ambassadorEligible);
+ })
+ .map(item => ({ id: item[`${dataType}Id`], ...item, selectable: !item.isHcOnly || userData.isHcMember }));
+ }, [userData]);
+
+ const allData = useMemo(() => ({
+ backgrounds: processData(GetConfigurationValue('backgrounds.data'), 'background'),
+ stands: processData(GetConfigurationValue('stands.data'), 'stand'),
+ overlays: processData(GetConfigurationValue('overlays.data'), 'overlay')
+ }), [processData]);
+
+ const handleSelection = useCallback((id: number) => {
+ if (!roomSession) return;
+
+ const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
+
+ const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
+
+ setters[activeTab](id);
+ const newValues = { ...currentValues, [activeTab]: id };
+ roomSession.sendBackgroundMessage( newValues.backgrounds, newValues.stands, newValues.overlays );
+ }, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, setSelectedBackground, setSelectedStand, setSelectedOverlay]);
+
+ const renderItem = useCallback((item: ItemData, type: string) => (
+ item.selectable && handleSelection(item.id)}
+ className={item.selectable ? '' : 'non-selectable'}
+ >
+
+ ), [handleSelection]);
+
+ return (
+
+ setIsVisible(false)} />
+
+ {TABS.map(tab => (
+ setActiveTab(tab)}
+ >
+ {tab.charAt(0).toUpperCase() + tab.slice(1)}
+
+ ))}
+
+
+ Select an Option
+
+ {allData[activeTab].map(item => renderItem(item, activeTab.slice(0, -1)))}
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/Coolui v3 test/src/components/camera/CameraWidgetView.tsx b/Coolui v3 test/src/components/camera/CameraWidgetView.tsx
new file mode 100644
index 0000000000..d4221e8402
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/CameraWidgetView.tsx
@@ -0,0 +1,97 @@
+import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { useCamera, useNitroEvent } from '../../hooks';
+import { CameraWidgetCaptureView } from './views/CameraWidgetCaptureView';
+import { CameraWidgetCheckoutView } from './views/CameraWidgetCheckoutView';
+import { CameraWidgetEditorView } from './views/editor/CameraWidgetEditorView';
+
+const MODE_NONE: number = 0;
+const MODE_CAPTURE: number = 1;
+const MODE_EDITOR: number = 2;
+const MODE_CHECKOUT: number = 3;
+
+export const CameraWidgetView: FC<{}> = props =>
+{
+ const [ mode, setMode ] = useState(MODE_NONE);
+ const [ base64Url, setSavedPictureUrl ] = useState(null);
+ const { availableEffects = [], selectedPictureIndex = -1, cameraRoll = [], setCameraRoll = null, myLevel = 0, price = { credits: 0, duckets: 0, publishDucketPrice: 0 } } = useCamera();
+
+
+ const processAction = (type: string) =>
+ {
+ switch(type)
+ {
+ case 'close':
+ setMode(MODE_NONE);
+ return;
+ case 'edit':
+ setMode(MODE_EDITOR);
+ return;
+ case 'delete':
+ setCameraRoll(prevValue =>
+ {
+ const clone = [ ...prevValue ];
+
+ clone.splice(selectedPictureIndex, 1);
+
+ return clone;
+ });
+ return;
+ case 'editor_cancel':
+ setMode(MODE_CAPTURE);
+ return;
+ }
+ };
+
+ const checkoutPictureUrl = (pictureUrl: string) =>
+ {
+ setSavedPictureUrl(pictureUrl);
+ setMode(MODE_CHECKOUT);
+ };
+
+ useNitroEvent(RoomSessionEvent.ENDED, event => setMode(MODE_NONE));
+
+ useEffect(() =>
+ {
+ const linkTracker: ILinkEventTracker = {
+ linkReceived: (url: string) =>
+ {
+ const parts = url.split('/');
+
+ if(parts.length < 2) return;
+
+ switch(parts[1])
+ {
+ case 'show':
+ setMode(MODE_CAPTURE);
+ return;
+ case 'hide':
+ setMode(MODE_NONE);
+ return;
+ case 'toggle':
+ setMode(prevValue =>
+ {
+ if(!prevValue) return MODE_CAPTURE;
+ else return MODE_NONE;
+ });
+ return;
+ }
+ },
+ eventUrlPrefix: 'camera/'
+ };
+
+ AddLinkEventTracker(linkTracker);
+
+ return () => RemoveLinkEventTracker(linkTracker);
+ }, []);
+
+ if(mode === MODE_NONE) return null;
+
+ return (
+ <>
+ { (mode === MODE_CAPTURE) && processAction('close') } onDelete={ () => processAction('delete') } onEdit={ () => processAction('edit') } /> }
+ { (mode === MODE_EDITOR) && processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } onClose={ () => processAction('close') } /> }
+ { (mode === MODE_CHECKOUT) && processAction('editor_cancel') } onCloseClick={ () => processAction('close') }> }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/camera/index.ts b/Coolui v3 test/src/components/camera/index.ts
new file mode 100644
index 0000000000..43c10cdc17
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/index.ts
@@ -0,0 +1,4 @@
+export * from './CameraWidgetView';
+export * from './views';
+export * from './views/editor';
+export * from './views/editor/effect-list';
diff --git a/Coolui v3 test/src/components/camera/views/CameraWidgetCaptureView.tsx b/Coolui v3 test/src/components/camera/views/CameraWidgetCaptureView.tsx
new file mode 100644
index 0000000000..89fe25ee78
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/CameraWidgetCaptureView.tsx
@@ -0,0 +1,90 @@
+import { GetRoomEngine, NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer';
+import { FC, useRef } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import { CameraPicture, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api';
+import { Button, Column, DraggableWindow } from '../../../common';
+import { useCamera, useNotification } from '../../../hooks';
+
+export interface CameraWidgetCaptureViewProps
+{
+ onClose: () => void;
+ onEdit: () => void;
+ onDelete: () => void;
+}
+
+const CAMERA_ROLL_LIMIT: number = 5;
+
+export const CameraWidgetCaptureView: FC = props =>
+{
+ const { onClose = null, onEdit = null, onDelete = null } = props;
+ const { cameraRoll = null, setCameraRoll = null, selectedPictureIndex = -1, setSelectedPictureIndex = null } = useCamera();
+ const { simpleAlert = null } = useNotification();
+ const elementRef = useRef();
+
+ const selectedPicture = ((selectedPictureIndex > -1) ? cameraRoll[selectedPictureIndex] : null);
+
+ const getCameraBounds = () =>
+ {
+ if(!elementRef || !elementRef.current) return null;
+
+ const frameBounds = elementRef.current.getBoundingClientRect();
+
+ return new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
+ };
+
+ const takePicture = async () =>
+ {
+ if(selectedPictureIndex > -1)
+ {
+ setSelectedPictureIndex(-1);
+ return;
+ }
+
+ const texture = GetRoomEngine().createTextureFromRoom(GetRoomSession().roomId, 1, getCameraBounds());
+
+ const clone = [ ...cameraRoll ];
+
+ if(clone.length >= CAMERA_ROLL_LIMIT)
+ {
+ simpleAlert(LocalizeText('camera.full.body'));
+
+ clone.pop();
+ }
+
+ PlaySound(SoundNames.CAMERA_SHUTTER);
+ clone.push(new CameraPicture(texture, await TextureUtils.generateImageUrl(texture)));
+
+ setCameraRoll(clone);
+ };
+
+ return (
+
+
+ { selectedPicture && 
}
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/camera/views/CameraWidgetCheckoutView.tsx b/Coolui v3 test/src/components/camera/views/CameraWidgetCheckoutView.tsx
new file mode 100644
index 0000000000..2ab2f5b21d
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/CameraWidgetCheckoutView.tsx
@@ -0,0 +1,159 @@
+import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, CreateLinkEvent, GetRoomEngine, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { GetConfigurationValue, LocalizeText, SendMessageComposer } from '../../../api';
+import { Button, Column, LayoutCurrencyIcon, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { useMessageEvent } from '../../../hooks';
+
+export interface CameraWidgetCheckoutViewProps
+{
+ base64Url: string;
+ onCloseClick: () => void;
+ onCancelClick: () => void;
+ price: { credits: number, duckets: number, publishDucketPrice: number };
+}
+
+export const CameraWidgetCheckoutView: FC = props =>
+{
+ const { base64Url = null, onCloseClick = null, onCancelClick = null, price = null } = props;
+ const [ pictureUrl, setPictureUrl ] = useState(null);
+ const [ publishUrl, setPublishUrl ] = useState(null);
+ const [ picturesBought, setPicturesBought ] = useState(0);
+ const [ wasPicturePublished, setWasPicturePublished ] = useState(false);
+ const [ isWaiting, setIsWaiting ] = useState(false);
+ const [ publishCooldown, setPublishCooldown ] = useState(0);
+
+ const publishDisabled = useMemo(() => GetConfigurationValue('camera.publish.disabled', false), []);
+
+ useMessageEvent(CameraPurchaseOKMessageEvent, event =>
+ {
+ setPicturesBought(value => (value + 1));
+ setIsWaiting(false);
+ });
+
+ useMessageEvent(CameraPublishStatusMessageEvent, event =>
+ {
+ const parser = event.getParser();
+
+ setPublishUrl(parser.extraDataId);
+ setPublishCooldown(parser.secondsToWait);
+ setWasPicturePublished(parser.ok);
+ setIsWaiting(false);
+ });
+
+ useMessageEvent(CameraStorageUrlMessageEvent, event =>
+ {
+ const parser = event.getParser();
+
+ setPictureUrl(GetConfigurationValue('camera.url') + '/' + parser.url);
+ });
+
+ const processAction = (type: string, value: string | number = null) =>
+ {
+ switch(type)
+ {
+ case 'close':
+ onCloseClick();
+ return;
+ case 'buy':
+ if(isWaiting) return;
+
+ setIsWaiting(true);
+ SendMessageComposer(new PurchasePhotoMessageComposer(''));
+ return;
+ case 'publish':
+ if(isWaiting) return;
+
+ setIsWaiting(true);
+ SendMessageComposer(new PublishPhotoMessageComposer());
+ return;
+ case 'cancel':
+ onCancelClick();
+ return;
+ }
+ };
+
+ useEffect(() =>
+ {
+ if(!base64Url) return;
+
+ GetRoomEngine().saveBase64AsScreenshot(base64Url);
+ }, [ base64Url ]);
+
+ if(!price) return null;
+
+ return (
+
+ processAction('close') } />
+
+ { LocalizeText('camera.warning.disclaimer') }
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/Coolui v3 test/src/components/camera/views/CameraWidgetShowPhotoView.tsx
new file mode 100644
index 0000000000..212bee385e
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -0,0 +1,68 @@
+import { GetRoomEngine, RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
+import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api';
+import { Flex, Grid, Text } from '../../../common';
+
+export interface CameraWidgetShowPhotoViewProps {
+ currentIndex: number;
+ currentPhotos: IPhotoData[];
+ onClick?: () => void;
+}
+
+export const CameraWidgetShowPhotoView: FC = props => {
+ const { currentIndex = -1, currentPhotos = null, onClick = null } = props;
+ const [imageIndex, setImageIndex] = useState(0);
+
+ const currentImage = currentPhotos && currentPhotos.length ? currentPhotos[imageIndex] : null;
+
+ const next = () => {
+ setImageIndex(prevValue => {
+ let newIndex = prevValue + 1;
+ if (newIndex >= currentPhotos.length) newIndex = 0;
+ return newIndex;
+ });
+ };
+
+ const previous = () => {
+ setImageIndex(prevValue => {
+ let newIndex = prevValue - 1;
+ if (newIndex < 0) newIndex = currentPhotos.length - 1;
+ return newIndex;
+ });
+ };
+
+ useEffect(() => {
+ setImageIndex(currentIndex);
+ }, [currentIndex]);
+
+ if (!currentImage) return null;
+
+ const getUserData = (roomId: number, objectId: number, type: string): number | string =>
+ {
+ const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, RoomObjectCategory.WALL);
+ if (!roomObject) return;
+ return type == 'username' ? roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue(RoomObjectVariable.FURNITURE_OWNER_ID);
+ }
+
+ return (
+
+
+ {!currentImage.w && {LocalizeText('camera.loading')} }
+
+ {currentImage.m && currentImage.m.length && {currentImage.m} }
+
+
+ )}
+
+ );
+};
\ No newline at end of file
diff --git a/Coolui v3 test/src/components/camera/views/editor/CameraWidgetEditorView.tsx b/Coolui v3 test/src/components/camera/views/editor/CameraWidgetEditorView.tsx
new file mode 100644
index 0000000000..75ae074508
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/editor/CameraWidgetEditorView.tsx
@@ -0,0 +1,222 @@
+import { GetRoomCameraWidgetManager, IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect, NitroLogger, RoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { FaSave, FaSearchMinus, FaSearchPlus, FaTrash } from 'react-icons/fa';
+import ReactSlider from 'react-slider';
+import { CameraEditorTabs, CameraPicture, CameraPictureThumbnail, LocalizeText } from '../../../../api';
+import { Button, Column, Flex, Grid, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../../../common';
+import { CameraWidgetEffectListView } from './effect-list';
+
+export interface CameraWidgetEditorViewProps {
+ picture: CameraPicture;
+ availableEffects: IRoomCameraWidgetEffect[];
+ myLevel: number;
+ onClose: () => void;
+ onCancel: () => void;
+ onCheckout: (pictureUrl: string) => void;
+}
+
+const TABS: string[] = [ CameraEditorTabs.COLORMATRIX, CameraEditorTabs.COMPOSITE ];
+
+export const CameraWidgetEditorView: FC = props => {
+ const { picture = null, availableEffects = null, myLevel = 1, onClose = null, onCancel = null, onCheckout = null } = props;
+ const [ currentTab, setCurrentTab ] = useState(TABS[0]);
+ const [ selectedEffectName, setSelectedEffectName ] = useState(null);
+ const [ selectedEffects, setSelectedEffects ] = useState([]);
+ const [ effectsThumbnails, setEffectsThumbnails ] = useState([]);
+ const [ isZoomed, setIsZoomed ] = useState(false);
+ const [ currentPictureUrl, setCurrentPictureUrl ] = useState('');
+ const isBusy = useRef(false);
+
+ const getColorMatrixEffects = useMemo(() => {
+ return availableEffects.filter(effect => effect.colorMatrix);
+ }, [ availableEffects ]);
+
+ const getCompositeEffects = useMemo(() => {
+ return availableEffects.filter(effect => effect.texture);
+ }, [ availableEffects ]);
+
+ const getEffectList = useCallback(() => {
+ return currentTab === CameraEditorTabs.COLORMATRIX ? getColorMatrixEffects : getCompositeEffects;
+ }, [ currentTab, getColorMatrixEffects, getCompositeEffects ]);
+
+ const getSelectedEffectIndex = useCallback((name: string) => {
+ if (!name || !name.length || !selectedEffects || !selectedEffects.length) return -1;
+ return selectedEffects.findIndex(effect => effect.effect.name === name);
+ }, [ selectedEffects ]);
+
+ const getCurrentEffectIndex = useMemo(() => {
+ return getSelectedEffectIndex(selectedEffectName);
+ }, [ selectedEffectName, getSelectedEffectIndex ]);
+
+ const getCurrentEffect = useMemo(() => {
+ if (!selectedEffectName) return null;
+ return selectedEffects[getCurrentEffectIndex] || null;
+ }, [ selectedEffectName, getCurrentEffectIndex, selectedEffects ]);
+
+ const setSelectedEffectAlpha = useCallback((alpha: number) => {
+ const index = getCurrentEffectIndex;
+ if (index === -1) return;
+
+ setSelectedEffects(prevValue => {
+ const clone = [ ...prevValue ];
+ const currentEffect = clone[index];
+ clone[index] = new RoomCameraWidgetSelectedEffect(currentEffect.effect, alpha);
+ return clone;
+ });
+ }, [ getCurrentEffectIndex ]);
+
+ const processAction = useCallback((type: string, effectName: string = null) => {
+ switch (type) {
+ case 'close':
+ onClose();
+ return;
+ case 'cancel':
+ onCancel();
+ return;
+ case 'checkout':
+ onCheckout(currentPictureUrl);
+ return;
+ case 'change_tab':
+ setCurrentTab(String(effectName));
+ return;
+ case 'select_effect': {
+ const existingIndex = getSelectedEffectIndex(effectName);
+ if (existingIndex >= 0) return;
+
+ const effect = availableEffects.find(effect => effect.name === effectName);
+ if (!effect) return;
+
+ setSelectedEffects(prevValue => [ ...prevValue, new RoomCameraWidgetSelectedEffect(effect, 1) ]);
+ setSelectedEffectName(effect.name);
+ return;
+ }
+ case 'remove_effect': {
+ const existingIndex = getSelectedEffectIndex(effectName);
+ if (existingIndex === -1) return;
+
+ setSelectedEffects(prevValue => {
+ const clone = [ ...prevValue ];
+ clone.splice(existingIndex, 1);
+ return clone;
+ });
+
+ if (selectedEffectName === effectName) setSelectedEffectName(null);
+ return;
+ }
+ case 'clear_effects':
+ setSelectedEffectName(null);
+ setSelectedEffects([]);
+ return;
+ case 'download': {
+ (async () => {
+ const image = new Image();
+ image.src = currentPictureUrl;
+ const newWindow = window.open('');
+ newWindow.document.write(image.outerHTML);
+ })();
+ return;
+ }
+ case 'zoom':
+ setIsZoomed(prev => !prev);
+ return;
+ }
+ }, [ availableEffects, selectedEffectName, currentPictureUrl, getSelectedEffectIndex, onCancel, onCheckout, onClose ]);
+
+ useEffect(() => {
+ const processThumbnails = async () => {
+ const renderedEffects = await Promise.all(
+ availableEffects.map(effect =>
+ GetRoomCameraWidgetManager().applyEffects(picture.texture, [ new RoomCameraWidgetSelectedEffect(effect, 1) ], false)
+ )
+ );
+ setEffectsThumbnails(renderedEffects.map((image, index) => new CameraPictureThumbnail(availableEffects[index].name, image.src)));
+ };
+ processThumbnails();
+ }, [ picture, availableEffects ]);
+
+ useEffect(() => {
+ GetRoomCameraWidgetManager()
+ .applyEffects(picture.texture, selectedEffects, false) // Remove isZoomed from here
+ .then(imageElement => {
+ setCurrentPictureUrl(imageElement.src);
+ })
+ .catch(error => {
+ NitroLogger.error('Failed to apply effects to picture', error);
+ });
+ }, [ picture, selectedEffects ]); // Remove isZoomed from dependency array
+
+ return (
+
+ processAction('close') } />
+
+ { TABS.map(tab => (
+ processAction('change_tab', tab) }>
+
+
+ )) }
+
+
+
+
+
+
+
+
+ { LocalizeText('camera.effect.name.' + selectedEffectName) }
+ setSelectedEffectAlpha(event) }
+ renderThumb={ ({ key, ...props }, state) =>
+ ) }
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/Coolui v3 test/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx b/Coolui v3 test/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx
new file mode 100644
index 0000000000..0b891a7457
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx
@@ -0,0 +1,40 @@
+import { IRoomCameraWidgetEffect } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { FaLock, FaTimes } from 'react-icons/fa';
+import { LocalizeText } from '../../../../../api';
+import { Button, LayoutGridItem, Text } from '../../../../../common';
+
+export interface CameraWidgetEffectListItemViewProps
+{
+ effect: IRoomCameraWidgetEffect;
+ thumbnailUrl: string;
+ isActive: boolean;
+ isLocked: boolean;
+ selectEffect: () => void;
+ removeEffect: () => void;
+}
+
+export const CameraWidgetEffectListItemView: FC = props =>
+{
+ const { effect = null, thumbnailUrl = null, isActive = false, isLocked = false, selectEffect = null, removeEffect = null } = props;
+
+ return (
+ (!isActive && selectEffect()) }>
+ { isActive &&
+ }
+ { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) &&
+
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx b/Coolui v3 test/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx
new file mode 100644
index 0000000000..5f9b965cca
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx
@@ -0,0 +1,33 @@
+import { IRoomCameraWidgetEffect, IRoomCameraWidgetSelectedEffect } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { CameraPictureThumbnail } from '../../../../../api';
+import { Grid } from '../../../../../common';
+import { CameraWidgetEffectListItemView } from './CameraWidgetEffectListItemView';
+
+export interface CameraWidgetEffectListViewProps
+{
+ myLevel: number;
+ selectedEffects: IRoomCameraWidgetSelectedEffect[];
+ effects: IRoomCameraWidgetEffect[];
+ thumbnails: CameraPictureThumbnail[];
+ processAction: (type: string, name: string) => void;
+}
+
+export const CameraWidgetEffectListView: FC = props =>
+{
+ const { myLevel = 0, selectedEffects = [], effects = [], thumbnails = [], processAction = null } = props;
+
+ return (
+
+ { effects && (effects.length > 0) && effects.map((effect, index) =>
+ {
+ const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name)));
+ const isActive = (selectedEffects.findIndex(selectedEffect => (selectedEffect.effect.name === effect.name)) > -1);
+
+ // return myLevel) } removeEffect={ () => processAction('remove_effect', effect.name) } selectEffect={ () => processAction('select_effect', effect.name) } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } />;
+
+ return myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } />
+ }) }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/camera/views/editor/effect-list/index.ts b/Coolui v3 test/src/components/camera/views/editor/effect-list/index.ts
new file mode 100644
index 0000000000..7a4ebdb50f
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/editor/effect-list/index.ts
@@ -0,0 +1,2 @@
+export * from './CameraWidgetEffectListItemView';
+export * from './CameraWidgetEffectListView';
diff --git a/Coolui v3 test/src/components/camera/views/editor/index.ts b/Coolui v3 test/src/components/camera/views/editor/index.ts
new file mode 100644
index 0000000000..49c615ea64
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/editor/index.ts
@@ -0,0 +1,2 @@
+export * from './CameraWidgetEditorView';
+export * from './effect-list';
diff --git a/Coolui v3 test/src/components/camera/views/index.ts b/Coolui v3 test/src/components/camera/views/index.ts
new file mode 100644
index 0000000000..cf44449313
--- /dev/null
+++ b/Coolui v3 test/src/components/camera/views/index.ts
@@ -0,0 +1,5 @@
+export * from './CameraWidgetCaptureView';
+export * from './CameraWidgetCheckoutView';
+export * from './CameraWidgetShowPhotoView';
+export * from './editor';
+export * from './editor/effect-list';
diff --git a/Coolui v3 test/src/components/campaign/CalendarItemView.tsx b/Coolui v3 test/src/components/campaign/CalendarItemView.tsx
new file mode 100644
index 0000000000..234387aa42
--- /dev/null
+++ b/Coolui v3 test/src/components/campaign/CalendarItemView.tsx
@@ -0,0 +1,53 @@
+import { GetRoomEngine, GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { CalendarItemState, GetConfigurationValue, ICalendarItem } from '../../api';
+import { Column, Flex, LayoutImage } from '../../common';
+
+interface CalendarItemViewProps
+{
+ itemId: number;
+ state: number;
+ active?: boolean;
+ product?: ICalendarItem;
+ onClick: (itemId: number) => void;
+}
+
+export const CalendarItemView: FC = props =>
+{
+ const { itemId = -1, state = null, product = null, active = false, onClick = null } = props;
+
+ const getFurnitureIcon = (name: string) =>
+ {
+ let furniData = GetSessionDataManager().getFloorItemDataByName(name);
+ let url = null;
+
+ if(furniData) url = GetRoomEngine().getFurnitureFloorIconUrl(furniData.id);
+ else
+ {
+ furniData = GetSessionDataManager().getWallItemDataByName(name);
+
+ if(furniData) url = GetRoomEngine().getFurnitureWallIconUrl(furniData.id);
+ }
+
+ return url;
+ };
+
+ return (
+ onClick(itemId) }>
+ { (state === CalendarItemState.STATE_UNLOCKED) &&
+
+
+ { product &&
+ ('image.library.url') + product.customImage : getFurnitureIcon(product.productName) } /> }
+
+ }
+ { (state !== CalendarItemState.STATE_UNLOCKED) &&
+
+ { (state === CalendarItemState.STATE_LOCKED_AVAILABLE) &&
+ }
+ { ((state === CalendarItemState.STATE_LOCKED_EXPIRED) || (state === CalendarItemState.STATE_LOCKED_FUTURE)) &&
+ }
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/campaign/CalendarView.tsx b/Coolui v3 test/src/components/campaign/CalendarView.tsx
new file mode 100644
index 0000000000..057d088ef9
--- /dev/null
+++ b/Coolui v3 test/src/components/campaign/CalendarView.tsx
@@ -0,0 +1,144 @@
+import { GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { CalendarItemState, ICalendarItem, LocalizeText } from '../../api';
+import { Button, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { CalendarItemView } from './CalendarItemView';
+
+interface CalendarViewProps
+{
+ onClose(): void;
+ openPackage(id: number, asStaff: boolean): void;
+ receivedProducts: Map;
+ campaignName: string;
+ currentDay: number;
+ numDays: number;
+ openedDays: number[];
+ missedDays: number[];
+}
+
+const TOTAL_SHOWN_ITEMS = 5;
+
+export const CalendarView: FC = props =>
+{
+ const { onClose = null, campaignName = null, currentDay = null, numDays = null, missedDays = null, openedDays = null, openPackage = null, receivedProducts = null } = props;
+ const [ selectedDay, setSelectedDay ] = useState(currentDay);
+ const [ index, setIndex ] = useState(Math.max(0, (selectedDay - 1)));
+
+ const getDayState = (day: number) =>
+ {
+ if(openedDays.includes(day)) return CalendarItemState.STATE_UNLOCKED;
+
+ if(day > currentDay) return CalendarItemState.STATE_LOCKED_FUTURE;
+
+ if(missedDays.includes(day)) return CalendarItemState.STATE_LOCKED_EXPIRED;
+
+ return CalendarItemState.STATE_LOCKED_AVAILABLE;
+ };
+
+ const dayMessage = (day: number) =>
+ {
+ const state = getDayState(day);
+
+ switch(state)
+ {
+ case CalendarItemState.STATE_UNLOCKED:
+ return LocalizeText('campaign.calendar.info.unlocked');
+ case CalendarItemState.STATE_LOCKED_FUTURE:
+ return LocalizeText('campaign.calendar.info.future');
+ case CalendarItemState.STATE_LOCKED_EXPIRED:
+ return LocalizeText('campaign.calendar.info.expired');
+ default:
+ return LocalizeText('campaign.calendar.info.available.desktop');
+ }
+ };
+
+ const onClickNext = () =>
+ {
+ const nextDay = (selectedDay + 1);
+
+ if(nextDay === numDays) return;
+
+ setSelectedDay(nextDay);
+
+ if((index + TOTAL_SHOWN_ITEMS) < (nextDay + 1)) setIndex(index + 1);
+ };
+
+ const onClickPrev = () =>
+ {
+ const prevDay = (selectedDay - 1);
+
+ if(prevDay < 0) return;
+
+ setSelectedDay(prevDay);
+
+ if(index > prevDay) setIndex(index - 1);
+ };
+
+ const onClickItem = (item: number) =>
+ {
+ if(selectedDay === item)
+ {
+ const state = getDayState(item);
+
+ if(state === CalendarItemState.STATE_LOCKED_AVAILABLE) openPackage(item, false);
+
+ return;
+ }
+
+ setSelectedDay(item);
+ };
+
+ const forceOpen = () =>
+ {
+ const id = selectedDay;
+ const state = getDayState(id);
+
+ if(state !== CalendarItemState.STATE_UNLOCKED) openPackage(id, true);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/campaign/CampaignView.tsx b/Coolui v3 test/src/components/campaign/CampaignView.tsx
new file mode 100644
index 0000000000..76230f489b
--- /dev/null
+++ b/Coolui v3 test/src/components/campaign/CampaignView.tsx
@@ -0,0 +1,101 @@
+import { AddLinkEventTracker, CampaignCalendarData, CampaignCalendarDataMessageEvent, CampaignCalendarDoorOpenedMessageEvent, ILinkEventTracker, OpenCampaignCalendarDoorAsStaffComposer, OpenCampaignCalendarDoorComposer, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { CalendarItem, SendMessageComposer } from '../../api';
+import { useMessageEvent } from '../../hooks';
+import { CalendarView } from './CalendarView';
+
+export const CampaignView: FC<{}> = props =>
+{
+ const [ calendarData, setCalendarData ] = useState(null);
+ const [ lastOpenAttempt, setLastOpenAttempt ] = useState(-1);
+ const [ receivedProducts, setReceivedProducts ] = useState>(new Map());
+ const [ isCalendarOpen, setCalendarOpen ] = useState(false);
+
+ const openPackage = (id: number, asStaff = false) =>
+ {
+ if(!calendarData) return;
+
+ setLastOpenAttempt(id);
+
+ if(asStaff)
+ {
+ SendMessageComposer(new OpenCampaignCalendarDoorAsStaffComposer(calendarData.campaignName, id));
+ }
+
+ else
+ {
+ SendMessageComposer(new OpenCampaignCalendarDoorComposer(calendarData.campaignName, id));
+ }
+ };
+
+ useMessageEvent(CampaignCalendarDataMessageEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!parser) return;
+
+ setCalendarData(parser.calendarData);
+ });
+
+ useMessageEvent(CampaignCalendarDoorOpenedMessageEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!parser) return;
+
+ const lastAttempt = lastOpenAttempt;
+
+ if(parser.doorOpened)
+ {
+ setCalendarData(prev =>
+ {
+ const copy = prev.clone();
+ copy.openedDays.push(lastOpenAttempt);
+
+ return copy;
+ });
+
+ setReceivedProducts(prev =>
+ {
+ const copy = new Map(prev);
+ copy.set(lastAttempt, new CalendarItem(parser.productName, parser.customImage,parser.furnitureClassName));
+
+ return copy;
+ });
+ }
+
+ setLastOpenAttempt(-1);
+ });
+
+ useEffect(() =>
+ {
+ const linkTracker: ILinkEventTracker = {
+ linkReceived: (url: string) =>
+ {
+ const value = url.split('/');
+
+ if(value.length < 2) return;
+
+ switch(value[1])
+ {
+ case 'calendar':
+ setCalendarOpen(true);
+ break;
+ }
+ },
+ eventUrlPrefix: 'openView/'
+ };
+
+ AddLinkEventTracker(linkTracker);
+
+ return () => RemoveLinkEventTracker(linkTracker);
+ }, []);
+
+ return (
+ <>
+ { (calendarData && isCalendarOpen) &&
+ setCalendarOpen(false) } />
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/catalog/CatalogView.tsx b/Coolui v3 test/src/components/catalog/CatalogView.tsx
new file mode 100644
index 0000000000..d7ee89fcb5
--- /dev/null
+++ b/Coolui v3 test/src/components/catalog/CatalogView.tsx
@@ -0,0 +1,111 @@
+import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
+import { FC, useEffect } from 'react';
+import { GetConfigurationValue, LocalizeText } from '../../api';
+import { Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { useCatalog } from '../../hooks';
+import { CatalogIconView } from './views/catalog-icon/CatalogIconView';
+import { CatalogGiftView } from './views/gift/CatalogGiftView';
+import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
+import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
+import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
+
+export const CatalogView: FC<{}> = props =>
+{
+ const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null, getNodeById } = useCatalog();
+
+ useEffect(() =>
+ {
+ const linkTracker: ILinkEventTracker = {
+ linkReceived: (url: string) =>
+ {
+ const parts = url.split('/');
+
+ if(parts.length < 2) return;
+
+ switch(parts[1])
+ {
+ case 'show':
+ setIsVisible(true);
+ return;
+ case 'hide':
+ setIsVisible(false);
+ return;
+ case 'toggle':
+ setIsVisible(prevValue => !prevValue);
+ return;
+ case 'open':
+ if(parts.length > 2)
+ {
+ if(parts.length === 4)
+ {
+ switch(parts[2])
+ {
+ case 'offerId':
+ openPageByOfferId(parseInt(parts[3]));
+ return;
+ }
+ }
+ else
+ {
+ openPageByName(parts[2]);
+ }
+ }
+ else
+ {
+ setIsVisible(true);
+ }
+
+ return;
+ }
+ },
+ eventUrlPrefix: 'catalog/'
+ };
+
+ AddLinkEventTracker(linkTracker);
+
+ return () => RemoveLinkEventTracker(linkTracker);
+ }, [ setIsVisible, openPageByOfferId, openPageByName ]);
+
+ return (
+ <>
+ { isVisible &&
+
+ setIsVisible(false) } />
+
+ { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child =>
+ {
+ if(!child.isVisible) return null;
+
+ return (
+
+ {
+ if(searchResult) setSearchResult(null);
+
+ activateNode(child);
+ } } >
+
setSelectedCategoryCode(null)}
+ />
+
+
+ {LocalizeText(
+ `quests.${selectedCategory.code}.name`
+ )}
+
+
+ {LocalizeText(
+ 'achievements.details.categoryprogress',
+ ['progress', 'limit'],
+ [
+ selectedCategory.getProgress().toString(),
+ selectedCategory
+ .getMaxProgress()
+ .toString(),
+ ]
+ )}
+
+
+
+ )}
+
+
+ {LocalizeText(
+ 'achievements.categories.score',
+ ['score'],
+ [achievementScore.toString()]
+ )}
+
+
+
+ )}
+ {selectedCategory && (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/AvatarEditorIcon.tsx b/Coolui v3 test/src/components/avatar-editor/AvatarEditorIcon.tsx
new file mode 100644
index 0000000000..f5623ed2c2
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/AvatarEditorIcon.tsx
@@ -0,0 +1,46 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
+import { classNames } from '../../layout';
+
+type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable';
+
+export const AvatarEditorIcon = forwardRef
+ rotateFigure(direction + 1) } />
+ rotateFigure(direction - 1) } />
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/avatar-editor/AvatarEditorView.tsx b/Coolui v3 test/src/components/avatar-editor/AvatarEditorView.tsx
new file mode 100644
index 0000000000..5dea113ec3
--- /dev/null
+++ b/Coolui v3 test/src/components/avatar-editor/AvatarEditorView.tsx
@@ -0,0 +1,122 @@
+import { AddLinkEventTracker, AvatarEditorFigureCategory, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker, UserFigureComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { FaDice, FaRedo, FaTrash } from 'react-icons/fa';
+import { AvatarEditorAction, LocalizeText, SendMessageComposer } from '../../api';
+import { Button, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { useAvatarEditor } from '../../hooks';
+import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
+import { AvatarEditorModelView } from './AvatarEditorModelView';
+import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';
+
+const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
+const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
+
+export const AvatarEditorView: FC<{}> = props =>
+{
+ const [ isVisible, setIsVisible ] = useState(false);
+ const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, figureSetIds = [], randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
+
+ const processAction = (action: string) =>
+ {
+ switch(action)
+ {
+ case AvatarEditorAction.ACTION_RESET:
+ loadAvatarData(GetSessionDataManager().figure, GetSessionDataManager().gender);
+ return;
+ case AvatarEditorAction.ACTION_CLEAR:
+ loadAvatarData(getFigureStringWithFace(0, false), gender);
+ return;
+ case AvatarEditorAction.ACTION_RANDOMIZE:
+ randomizeCurrentFigure();
+ return;
+ case AvatarEditorAction.ACTION_SAVE:
+ SendMessageComposer(new UserFigureComposer(gender, getFigureString));
+ setIsVisible(false);
+ return;
+ }
+ };
+
+ useEffect(() =>
+ {
+ const linkTracker: ILinkEventTracker = {
+ linkReceived: (url: string) =>
+ {
+ const parts = url.split('/');
+
+ if(parts.length < 2) return;
+
+ switch(parts[1])
+ {
+ case 'show':
+ setIsVisible(true);
+ return;
+ case 'hide':
+ setIsVisible(false);
+ return;
+ case 'toggle':
+ setIsVisible(prevValue => !prevValue);
+ return;
+ }
+ },
+ eventUrlPrefix: 'avatar-editor/'
+ };
+
+ AddLinkEventTracker(linkTracker);
+
+ return () => RemoveLinkEventTracker(linkTracker);
+ }, []);
+
+ useEffect(() =>
+ {
+ setEditorVisibility(isVisible);
+ }, [ isVisible, setEditorVisibility ]);
+
+ if(!isVisible) return null;
+
+ return (
+
+ { (name === AvatarEditorFigureCategory.GENERIC) &&
+ <>
+
+ setGender(AvatarFigurePartType.MALE) }>
+
+ setGender(AvatarFigurePartType.FEMALE) }>
+
+ }
+ { (name !== AvatarEditorFigureCategory.GENERIC) && (categories.length > 0) && categories.map(category =>
+ {
+ return (
+ selectSet(category.setType) }>
+
+ );
+ }) }
+
+
+
+ { (maxPaletteCount >= 1) &&
+
+
+ { ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { figureContainer &&
+ }
+
+
+
+ { (cameraRoll.length > 0) &&
+
+
+ { !selectedPicture && }
+ { selectedPicture &&
+
+
}
+
+
+
+
+
+
+
+
+ { cameraRoll.map((picture, index) =>
+ {
+ return setSelectedPictureIndex(index) } />;
+ }) }
+
}
+
+ { (pictureUrl && pictureUrl.length) &&
+
+
+ { LocalizeText('camera.loading') }
+
}
+
+
+
+ { LocalizeText('camera.purchase.header') }
+
+ { ((price.credits > 0) || (price.duckets > 0)) &&
+
+ { LocalizeText('camera.purchase.count.info') } { picturesBought }
+ CreateLinkEvent('inventory/toggle') }>{ LocalizeText('camera.open.inventory') }
+ }
+
+
+ { !publishDisabled &&
+
+ { LocalizeText('catalog.purchase.confirmation.dialog.cost') }
+ { (price.credits > 0) &&
+
}
+ { (picturesBought > 0) &&
+
+ { price.credits }
+
}
+ { (price.duckets > 0) &&
+
+ { price.duckets }
+
}
+
+
+
+
+
}
+
+
+ { LocalizeText(wasPicturePublished ? 'camera.publish.successful' : 'camera.publish.explanation') }
+
+
+ { LocalizeText(wasPicturePublished ? 'camera.publish.success.short.info' : 'camera.publish.detailed.explanation') }
+
+ { wasPicturePublished && { LocalizeText('camera.link.to.published') } }
+ { !wasPicturePublished && (price.publishDucketPrice > 0) &&
+
+ { !wasPicturePublished &&
+
+ { LocalizeText('catalog.purchase.confirmation.dialog.cost') }
+
}
+ { (publishCooldown > 0) &&
+ { price.publishDucketPrice }
+
+ { LocalizeText('camera.publish.wait', [ 'minutes' ], [ Math.ceil(publishCooldown / 60).toString() ]) }
}
+
+
+
}
+
+
+
+
+ {currentImage.n || ''}
+ GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id')))}> { getUserData(currentImage.s, Number(currentImage.u), 'username') }
+ GetUserProfile(currentImage.oi)}>{currentImage.o}
+ {new Date(currentImage.t * 1000).toLocaleDateString()}
+
+ {currentPhotos.length > 1 && (
+ { state.valueNow }
}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
}
+ { isLocked &&
+
+
+ { effect.minLevel }
+
+
+
+ { LocalizeText('campaign.calendar.heading.day', [ 'number' ], [ (selectedDay + 1).toString() ]) }
+ { dayMessage(selectedDay) }
+
+
+ { GetSessionDataManager().isModerator &&
+ }
+
+
+
+
+ { [ ...Array(TOTAL_SHOWN_ITEMS) ].map((e, i) =>
+ {
+ const day = (index + i);
+
+ return (
+
+
+ );
+ }) }
+
+
+
+
+
+
+
+
+
+