2021-09-30 04:30:25 +02:00
|
|
|
import { AvatarDirectionAngle } from '@nitrots/nitro-renderer';
|
2021-07-19 19:26:54 +02:00
|
|
|
import { FC, useCallback, useEffect, useState } from 'react';
|
2021-12-29 17:42:29 +01:00
|
|
|
import { Base } from '../../../../common/Base';
|
|
|
|
import { Column } from '../../../../common/Column';
|
|
|
|
import { AvatarImageView } from '../../../../views/shared/avatar-image/AvatarImageView';
|
|
|
|
import { FigureData } from '../../common/FigureData';
|
|
|
|
import { AvatarEditorIcon } from '../AvatarEditorIcon';
|
|
|
|
|
|
|
|
export interface AvatarEditorFigurePreviewViewProps
|
|
|
|
{
|
|
|
|
figureData: FigureData;
|
|
|
|
}
|
2021-07-19 19:26:54 +02:00
|
|
|
|
|
|
|
export const AvatarEditorFigurePreviewView: FC<AvatarEditorFigurePreviewViewProps> = props =>
|
|
|
|
{
|
2021-07-21 09:09:03 +02:00
|
|
|
const { figureData = null } = props;
|
2021-07-19 19:26:54 +02:00
|
|
|
const [ updateId, setUpdateId ] = useState(-1);
|
|
|
|
|
|
|
|
const rerender = useCallback(() =>
|
|
|
|
{
|
|
|
|
setUpdateId(prevValue => (prevValue + 1));
|
|
|
|
}, []);
|
|
|
|
|
2021-09-30 04:30:25 +02:00
|
|
|
const rotateFigure = useCallback((direction: number) =>
|
|
|
|
{
|
|
|
|
if(direction < AvatarDirectionAngle.MIN_DIRECTION)
|
|
|
|
{
|
|
|
|
direction = (AvatarDirectionAngle.MAX_DIRECTION + (direction + 1));
|
|
|
|
}
|
|
|
|
|
|
|
|
if(direction > AvatarDirectionAngle.MAX_DIRECTION)
|
|
|
|
{
|
|
|
|
direction = (direction - (AvatarDirectionAngle.MAX_DIRECTION + 1));
|
|
|
|
}
|
|
|
|
|
|
|
|
figureData.direction = direction;
|
|
|
|
}, [ figureData ]);
|
|
|
|
|
2021-07-19 19:26:54 +02:00
|
|
|
useEffect(() =>
|
|
|
|
{
|
2021-07-21 09:09:03 +02:00
|
|
|
if(!figureData) return;
|
2021-07-19 19:26:54 +02:00
|
|
|
|
2021-07-21 09:09:03 +02:00
|
|
|
figureData.notify = rerender;
|
2021-07-19 19:26:54 +02:00
|
|
|
|
|
|
|
return () =>
|
|
|
|
{
|
2021-07-21 09:09:03 +02:00
|
|
|
figureData.notify = null;
|
2021-07-19 19:26:54 +02:00
|
|
|
}
|
2021-07-21 09:09:03 +02:00
|
|
|
}, [ figureData, rerender ] );
|
2021-07-19 19:26:54 +02:00
|
|
|
|
2021-09-30 04:30:25 +02:00
|
|
|
return (
|
2021-12-29 17:42:29 +01:00
|
|
|
<Column className="figure-preview-container" overflow="hidden" position="relative">
|
2021-09-30 04:30:25 +02:00
|
|
|
<AvatarImageView figure={ figureData.getFigureString() } direction={ figureData.direction } scale={ 2 } />
|
2022-02-16 17:55:37 +01:00
|
|
|
<AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
|
2021-12-29 17:42:29 +01:00
|
|
|
<Base className="avatar-shadow" />
|
|
|
|
<Base className="arrow-container">
|
|
|
|
<AvatarEditorIcon pointer icon="arrow-left" onClick={ event => rotateFigure(figureData.direction + 1) } />
|
|
|
|
<AvatarEditorIcon pointer icon="arrow-right" onClick={ event => rotateFigure(figureData.direction - 1) } />
|
|
|
|
</Base>
|
|
|
|
</Column>
|
2021-09-30 04:30:25 +02:00
|
|
|
);
|
2021-07-19 19:26:54 +02:00
|
|
|
}
|