2021-12-13 06:42:42 +01:00
|
|
|
import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
|
|
|
|
import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
|
2022-03-03 10:11:31 +01:00
|
|
|
import { GetAvatarRenderManager, GetSessionDataManager, SendMessageComposer } from '../../../../api';
|
2022-03-04 18:26:37 +01:00
|
|
|
import { AutoGrid, Base, Button, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../../../common';
|
2021-12-13 06:42:42 +01:00
|
|
|
import { FigureData } from '../../common/FigureData';
|
|
|
|
|
|
|
|
export interface AvatarEditorWardrobeViewProps
|
|
|
|
{
|
|
|
|
figureData: FigureData;
|
|
|
|
savedFigures: [ IAvatarFigureContainer, string ][];
|
|
|
|
setSavedFigures: Dispatch<SetStateAction<[ IAvatarFigureContainer, string][]>>;
|
|
|
|
loadAvatarInEditor: (figure: string, gender: string, reset?: boolean) => void;
|
|
|
|
}
|
2021-07-21 23:53:36 +02:00
|
|
|
|
|
|
|
export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props =>
|
|
|
|
{
|
2021-07-22 05:53:47 +02:00
|
|
|
const { figureData = null, savedFigures = [], setSavedFigures = null, loadAvatarInEditor = null } = props;
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-07-22 05:53:47 +02:00
|
|
|
const wearFigureAtIndex = useCallback((index: number) =>
|
2021-07-21 23:53:36 +02:00
|
|
|
{
|
2021-07-22 05:53:47 +02:00
|
|
|
if((index >= savedFigures.length) || (index < 0)) return;
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-07-22 05:53:47 +02:00
|
|
|
const [ figure, gender ] = savedFigures[index];
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-09-01 02:02:59 +02:00
|
|
|
loadAvatarInEditor(figure.getFigureString(), gender);
|
2021-07-22 05:53:47 +02:00
|
|
|
}, [ savedFigures, loadAvatarInEditor ]);
|
|
|
|
|
|
|
|
const saveFigureAtWardrobeIndex = useCallback((index: number) =>
|
|
|
|
{
|
|
|
|
if(!figureData || (index >= savedFigures.length) || (index < 0)) return;
|
|
|
|
|
|
|
|
const newFigures = [ ...savedFigures ];
|
|
|
|
|
|
|
|
const figure = figureData.getFigureString();
|
|
|
|
const gender = figureData.gender;
|
|
|
|
|
2021-09-01 02:02:59 +02:00
|
|
|
newFigures[index] = [ GetAvatarRenderManager().createFigureContainer(figure), gender ];
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-07-22 05:53:47 +02:00
|
|
|
setSavedFigures(newFigures);
|
2022-03-03 10:11:31 +01:00
|
|
|
SendMessageComposer(new SaveWardrobeOutfitMessageComposer((index + 1), figure, gender));
|
2021-07-22 05:53:47 +02:00
|
|
|
}, [ figureData, savedFigures, setSavedFigures ]);
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-07-22 05:53:47 +02:00
|
|
|
const figures = useMemo(() =>
|
|
|
|
{
|
2021-09-01 04:39:15 +02:00
|
|
|
if(!savedFigures || !savedFigures.length) return [];
|
2021-07-22 05:53:47 +02:00
|
|
|
|
|
|
|
const items: JSX.Element[] = [];
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-09-01 02:02:59 +02:00
|
|
|
savedFigures.forEach(([ figureContainer, gender ], index) =>
|
2021-07-21 23:53:36 +02:00
|
|
|
{
|
2021-09-01 04:39:15 +02:00
|
|
|
let clubLevel = 0;
|
|
|
|
|
|
|
|
if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
|
2021-07-22 05:53:47 +02:00
|
|
|
|
|
|
|
items.push(
|
2022-02-16 20:56:27 +01:00
|
|
|
<LayoutGridItem key={ index } position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
|
2021-12-29 17:42:29 +01:00
|
|
|
{ figureContainer &&
|
2022-03-04 18:26:37 +01:00
|
|
|
<LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
|
2022-02-16 20:56:27 +01:00
|
|
|
<Base className="avatar-shadow" />
|
2022-03-03 18:03:21 +01:00
|
|
|
{ (clubLevel > 0) && <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
|
2022-02-16 20:56:27 +01:00
|
|
|
<Flex gap={ 1 } className="button-container">
|
|
|
|
<Button variant="link" fullWidth onClick={ event => saveFigureAtWardrobeIndex(index) }>Save</Button>
|
|
|
|
{ figureContainer &&
|
|
|
|
<Button variant="link" fullWidth onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetSessionDataManager().clubLevel) }>Use</Button> }
|
|
|
|
</Flex>
|
2021-12-29 17:42:29 +01:00
|
|
|
</LayoutGridItem>
|
2021-07-22 05:53:47 +02:00
|
|
|
);
|
|
|
|
});
|
2021-07-21 23:53:36 +02:00
|
|
|
|
2021-07-22 05:53:47 +02:00
|
|
|
return items;
|
|
|
|
}, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
|
2021-07-21 23:53:36 +02:00
|
|
|
|
|
|
|
return (
|
2022-02-16 20:56:27 +01:00
|
|
|
<AutoGrid columnCount={ 5 } columnMinWidth={ 80 } columnMinHeight={ 140 }>
|
2021-09-30 04:30:25 +02:00
|
|
|
{ figures }
|
2022-02-16 07:40:54 +01:00
|
|
|
</AutoGrid>
|
2021-07-21 23:53:36 +02:00
|
|
|
);
|
|
|
|
}
|