Update shared components

This commit is contained in:
Bill 2022-01-04 01:13:59 -05:00
parent 2f67bb66e7
commit 63f7d6c3c4
3 changed files with 31 additions and 31 deletions

View File

@ -1,9 +1,19 @@
import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer'; import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { FC, useEffect, useMemo, useState } from 'react';
import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api'; import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
import { BaseProps } from '../../../common/Base';
import { NitroLayoutBase } from '../../../layout/base'; import { NitroLayoutBase } from '../../../layout/base';
import { BadgeInformationView } from './badge-info/BadgeInformationView'; import { BadgeInformationView } from './badge-info/BadgeInformationView';
import { BadgeImageViewProps } from './BadgeImageView.types';
export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
{
badgeCode: string;
isGroup?: boolean;
showInfo?: boolean;
customTitle?: string;
isGrayscale?: boolean;
scale?: number;
}
export const BadgeImageView: FC<BadgeImageViewProps> = props => export const BadgeImageView: FC<BadgeImageViewProps> = props =>
{ {
@ -48,26 +58,26 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
return newStyle; return newStyle;
}, [ style, badgeUrl ]); }, [ style, badgeUrl ]);
const onBadgeImageReadyEvent = useCallback((event: BadgeImageReadyEvent) =>
{
if(event.badgeId !== badgeCode) return;
const nitroSprite = new NitroSprite(event.image);
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
if(isListening)
{
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
setIsListening(false);
}
}, [ badgeCode, isListening ]);
useEffect(() => useEffect(() =>
{ {
if(!badgeCode || !badgeCode.length) return; if(!badgeCode || !badgeCode.length) return;
const existing = (isGroup) ? GetSessionDataManager().loadGroupBadgeImage(badgeCode) : GetSessionDataManager().loadBadgeImage(badgeCode); const existing = (isGroup) ? GetSessionDataManager().loadGroupBadgeImage(badgeCode) : GetSessionDataManager().loadBadgeImage(badgeCode);
const onBadgeImageReadyEvent = (event: BadgeImageReadyEvent) =>
{
if(event.badgeId !== badgeCode) return;
const nitroSprite = new NitroSprite(event.image);
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
if(isListening)
{
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
setIsListening(false);
}
}
if(!existing) if(!existing)
{ {
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
@ -86,9 +96,7 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
} }
}); });
}, [ badgeCode ]); }, [ badgeCode, isGroup, isListening ]);
const url = `url('${ badgeUrl }')`;
return ( return (
<NitroLayoutBase className={ getClassName } style={ getStyle }> <NitroLayoutBase className={ getClassName } style={ getStyle }>

View File

@ -1,11 +0,0 @@
import { NitroLayoutBaseProps } from '../../../layout/base';
export interface BadgeImageViewProps extends NitroLayoutBaseProps
{
badgeCode: string;
isGroup?: boolean;
showInfo?: boolean;
customTitle?: string;
isGrayscale?: boolean;
scale?: number;
}

View File

@ -17,6 +17,7 @@ export const PetImageView: FC<PetImageViewProps> = props =>
let petPaletteId = paletteId; let petPaletteId = paletteId;
let petColor = color; let petColor = color;
let petCustomParts = customParts; let petCustomParts = customParts;
let petHeadOnly = headOnly;
if(figure && figure.length) if(figure && figure.length)
{ {
@ -28,6 +29,8 @@ export const PetImageView: FC<PetImageViewProps> = props =>
petCustomParts = petFigureData.customParts; petCustomParts = petFigureData.customParts;
} }
if(petTypeId === 16) petHeadOnly = false;
const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor, new Vector3d((direction * 45)), 64, { const imageResult = GetRoomEngine().getRoomObjectPetImage(petTypeId, petPaletteId, petColor, new Vector3d((direction * 45)), 64, {
imageReady: (id, texture, image) => imageReady: (id, texture, image) =>
{ {
@ -40,7 +43,7 @@ export const PetImageView: FC<PetImageViewProps> = props =>
{ {
} }
}, headOnly, 0, petCustomParts, posture); }, petHeadOnly, 0, petCustomParts, posture);
if(imageResult) if(imageResult)
{ {