Update BadgeImageView

This commit is contained in:
Bill 2022-02-24 13:27:13 -05:00
parent 9ed49c902c
commit 263212f650
2 changed files with 18 additions and 28 deletions

View File

@ -8,6 +8,11 @@
&.group-badge { &.group-badge {
width: 39px; width: 39px;
height: 39px; height: 39px;
&.scale-2 {
width: 80px;
height: 80px;
}
} }
.badge-information { .badge-information {

View File

@ -18,7 +18,6 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
{ {
const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props; const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null, isGrayscale = false, scale = 1, classNames = [], style = {}, children = null, ...rest } = props;
const [ badgeUrl, setBadgeUrl ] = useState<string>(''); const [ badgeUrl, setBadgeUrl ] = useState<string>('');
const [ isListening, setIsListening ] = useState<boolean>(true);
const getScaleClass = useMemo(() => const getScaleClass = useMemo(() =>
{ {
@ -65,41 +64,27 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
{ {
if(!badgeCode || !badgeCode.length) return; if(!badgeCode || !badgeCode.length) return;
const existing = (isGroup) ? GetSessionDataManager().loadGroupBadgeImage(badgeCode) : GetSessionDataManager().loadBadgeImage(badgeCode); let didSetBadge = false;
const onBadgeImageReadyEvent = (event: BadgeImageReadyEvent) => const onBadgeImageReadyEvent = (event: BadgeImageReadyEvent) =>
{ {
if(event.badgeId !== badgeCode) return; if(event.badgeId !== badgeCode) return;
const nitroSprite = new NitroSprite(event.image); setBadgeUrl(TextureUtils.generateImageUrl(new NitroSprite(event.image)));
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
if(isListening) didSetBadge = true;
{
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
setIsListening(false);
}
} }
if(!existing) GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
{
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
}
else
{
const image = (isGroup) ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
const nitroSprite = new NitroSprite(image);
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
}
return (() => const texture = isGroup ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
{
if(isListening) if(texture && !didSetBadge) setBadgeUrl(TextureUtils.generateImageUrl(new NitroSprite(texture)));
{
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); return () => GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
} }, [ badgeCode, isGroup ]);
});
}, [ badgeCode, isGroup, isListening ]);
return ( return (
<Base classNames={ getClassNames } style={ getStyle } { ...rest }> <Base classNames={ getClassNames } style={ getStyle } { ...rest }>