Add PetImageView

src/views/Styles.scss

@@ -7,6 +7,7 @@
 @import './loading/LoadingView';
 @import './main/MainView';
 @import './navigator/NavigatorView';
+@import './pet-image/PetImage';
 @import './purse/PurseView';
 @import './right-side/RightSideView';
 @import './room/RoomView';

src/views/pet-image/PetImage.scss

@@ -0,0 +1,7 @@
+.pet-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}

src/views/pet-image/PetImageView.tsx

@@ -0,0 +1,48 @@
+import { PetFigureData, TextureUtils, Vector3d } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { GetRoomEngine } from '../../api';
+import { PetImageViewProps } from './PetImageView.types';
+
+export const PetImageView: FC<PetImageViewProps> = props =>
+{
+    const { figure = '', headOnly = false, direction = 0, scale = 1 } = props;
+
+    const [ petUrl, setPetUrl ] = useState<string>(null);
+
+    const getPetImageUrl = useCallback(() =>
+    {
+        let url = null;
+
+        const petFigureData = new PetFigureData(figure);
+
+        const imageResult = GetRoomEngine().getRoomObjectPetImage(petFigureData.typeId, petFigureData.paletteId, petFigureData.color, new Vector3d((direction * 45)), 64, {
+            imageReady: (id, texture, image) =>
+            {
+                if(image) setPetUrl(image.src);
+                else if(texture) setPetUrl(TextureUtils.generateImageUrl(texture));
+            },
+            imageFailed: (id) =>
+            {
+
+            }
+        }, headOnly, 0, petFigureData.customParts, 'std');
+
+        if(imageResult)
+        {
+            const image = imageResult.getImage();
+
+            if(image) url = image.src;
+        }
+
+        return url;
+    }, [ figure, headOnly, direction ]);
+
+    useEffect(() =>
+    {
+        setPetUrl(getPetImageUrl());
+    }, [ getPetImageUrl ]);
+
+    const url = `url('${ petUrl }')`;
+        
+    return <div className={ 'pet-image scale-' + scale } style={ (petUrl && url.length) ? { backgroundImage: url } : {} }></div>;
+}

src/views/pet-image/PetImageView.types.ts

@@ -0,0 +1,7 @@
+export interface PetImageViewProps
+{
+    figure: string;
+    headOnly?: boolean;
+    direction?: number;
+    scale?: number;
+}