From 428f4bb2c814310f32f7ff6300e03d8cd2feaf21 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Thu, 29 Apr 2021 04:00:10 -0400
Subject: [PATCH] Add PetImageView

---
 src/views/Styles.scss                     |  1 +
 src/views/pet-image/PetImage.scss         |  7 ++++
 src/views/pet-image/PetImageView.tsx      | 48 +++++++++++++++++++++++
 src/views/pet-image/PetImageView.types.ts |  7 ++++
 4 files changed, 63 insertions(+)
 create mode 100644 src/views/pet-image/PetImage.scss
 create mode 100644 src/views/pet-image/PetImageView.tsx
 create mode 100644 src/views/pet-image/PetImageView.types.ts

diff --git a/src/views/Styles.scss b/src/views/Styles.scss
index 943acf4c..46c75fa8 100644
--- a/src/views/Styles.scss
+++ b/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';
diff --git a/src/views/pet-image/PetImage.scss b/src/views/pet-image/PetImage.scss
new file mode 100644
index 00000000..0df12c76
--- /dev/null
+++ b/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;
+}
diff --git a/src/views/pet-image/PetImageView.tsx b/src/views/pet-image/PetImageView.tsx
new file mode 100644
index 00000000..b8eae232
--- /dev/null
+++ b/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>;
+}
diff --git a/src/views/pet-image/PetImageView.types.ts b/src/views/pet-image/PetImageView.types.ts
new file mode 100644
index 00000000..abe49e57
--- /dev/null
+++ b/src/views/pet-image/PetImageView.types.ts
@@ -0,0 +1,7 @@
+export interface PetImageViewProps
+{
+    figure: string;
+    headOnly?: boolean;
+    direction?: number;
+    scale?: number;
+}