🆕 Effect selection in user dropdown

src/components/avatar-effects/AvatarEffectPreviewView.tsx

@@ -0,0 +1,76 @@
+import { GetRoomEngine, RoomPreviewer } from '@nitrots/nitro-renderer';
+import { CSSProperties, FC, useEffect, useState } from 'react';
+import { LayoutRoomPreviewerView } from '../../common';
+
+interface AvatarEffectPreviewViewProps
+{
+    figure: string;
+    gender: string;
+    direction: number;
+    effect: number;
+    height?: number;
+    zoom?: number;
+}
+
+export const AvatarEffectPreviewView: FC<AvatarEffectPreviewViewProps> = props =>
+{
+    const { figure = '', gender = 'M', direction = 4, effect = 0, height = 280, zoom = 1 } = props;
+    const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
+
+    const renderHeight = Math.floor(height / zoom);
+
+    useEffect(() =>
+    {
+        const previewer = new RoomPreviewer(GetRoomEngine(), ++RoomPreviewer.PREVIEW_COUNTER);
+        setRoomPreviewer(previewer);
+
+        return () =>
+        {
+            previewer.dispose();
+            setRoomPreviewer(null);
+        };
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!roomPreviewer || !figure) return;
+
+        roomPreviewer.addAvatarIntoRoom(figure, effect);
+        roomPreviewer.updateObjectUserFigure(figure, gender);
+    }, [ roomPreviewer, figure, gender, effect ]);
+
+    useEffect(() =>
+    {
+        if(!roomPreviewer) return;
+        roomPreviewer.updateAvatarDirection(direction, direction);
+    }, [ roomPreviewer, direction ]);
+
+    if(!roomPreviewer) return null;
+
+    if(zoom === 1)
+    {
+        return <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ height } />;
+    }
+
+    const outerStyle: CSSProperties = {
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden'
+    };
+
+    const innerStyle: CSSProperties = {
+        width: `${ 100 / zoom }%`,
+        height: `${ 100 / zoom }%`,
+        transform: `scale(${ zoom })`,
+        transformOrigin: 'top left',
+        imageRendering: 'pixelated'
+    };
+
+    return (
+        <div style={ outerStyle }>
+            <div style={ innerStyle }>
+                <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ renderHeight } />
+            </div>
+        </div>
+    );
+};