Add FurniImageView

This commit is contained in:
Bill 2021-05-11 15:08:18 -04:00
parent c28083b6e0
commit 828e07bb7b
4 changed files with 76 additions and 0 deletions

View File

@ -3,6 +3,7 @@
@import './catalog/CatalogView';
@import './catalog-icon/CatalogIconView';
@import './friend-list/FriendListView';
@import './furni-image/FurniImageView';
@import './hotel-view/HotelView';
@import './inventory/InventoryView';
@import './limited-edition/LimitedEdition';

View File

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

View File

@ -0,0 +1,60 @@
import { IGetImageListener, ImageResult, TextureUtils, Vector3d } from 'nitro-renderer';
import { RenderTexture } from 'pixi.js';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetRoomEngine } from '../../api';
import { ProductTypeEnum } from '../catalog/enums/ProductTypeEnum';
import { FurniImageViewProps } from './FurniImageView.types';
export const FurniImageView: FC<FurniImageViewProps> = props =>
{
const { type = 's', spriteId = -1, direction = 0, extras = '', scale = 1 } = props;
const [ imageElement, setImageElement ] = useState<HTMLImageElement>(null);
const buildImage = useCallback(() =>
{
let imageResult: ImageResult = null;
const furniType = type.toLocaleLowerCase();
const listener: IGetImageListener = {
imageReady: (id: number, texture: RenderTexture, image: HTMLImageElement) =>
{
if(!image && texture)
{
image = TextureUtils.generateImage(texture);
}
image.onload = () => setImageElement(image);
},
imageFailed: null
};
switch(furniType)
{
case ProductTypeEnum.FLOOR:
imageResult = GetRoomEngine().getFurnitureFloorImage(spriteId, new Vector3d(direction), 64, listener, 0, extras);
break;
case ProductTypeEnum.WALL:
imageResult = GetRoomEngine().getFurnitureWallImage(spriteId, new Vector3d(direction), 64, listener, 0, extras);
break;
}
if(imageResult)
{
const image = imageResult.getImage();
image.onload = () => setImageElement(image);
}
}, [ type, spriteId, direction, extras ]);
useEffect(() =>
{
buildImage();
}, [ buildImage ]);
if(!imageElement) return null;
const imageUrl = `url('${ imageElement.src }')`;
return <div className={ 'furni-image scale-' + scale } style={ { backgroundImage: imageUrl, width: imageElement.width, height: imageElement.height } }></div>;
}

View File

@ -0,0 +1,8 @@
export interface FurniImageViewProps
{
type: string;
spriteId: number;
direction?: number;
extras?: string;
scale?: number;
}