duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Groupbadges

Browse Source
This commit is contained in:
DuckieTM 2024-05-09 14:05:26 +02:00
parent 290a926264
commit bfd065794d
1 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/common/layout/LayoutBadgeImageView.tsx
View File

@ -16,7 +16,7 @@ export interface LayoutBadgeImageViewProps extends BaseProps<HTMLDivElement>
export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props => export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = 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 [ imageSrc, setImageSrc ] = useState<string>(null); const [ imageElement, setImageElement ] = useState<HTMLImageElement>(null);
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
@ -35,53 +35,63 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
{ {
let newStyle: CSSProperties = {}; let newStyle: CSSProperties = {};
if(scale !== 1) if(imageElement)
{ {
newStyle.transform = `scale(${ scale })`; newStyle.backgroundImage = `url(${ (isGroup) ? imageElement.src : GetConfiguration<string>('badge.asset.url').replace('%badgename%', badgeCode.toString())})`;
newStyle.width = imageElement.width;
newStyle.height = imageElement.height;
if(!(scale % 1)) newStyle.imageRendering = 'pixelated'; if(scale !== 1)
{
newStyle.transform = `scale(${ scale })`;
if(!(scale % 1)) newStyle.imageRendering = 'pixelated';
newStyle.width = (imageElement.width * scale);
newStyle.height = (imageElement.height * scale);
}
} }
if(Object.keys(style).length) newStyle = { ...newStyle, ...style }; if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
return newStyle; return newStyle;
}, [ scale, style ]); }, [ imageElement, scale, style ]);
useEffect(() => { useEffect(() =>
if (!badgeCode || !badgeCode.length) return; {
if(!badgeCode || !badgeCode.length) return;
let didSetBadge = false; let didSetBadge = false;
const onBadgeImageReadyEvent = (event: BadgeImageReadyEvent) => { const onBadgeImageReadyEvent = (event: BadgeImageReadyEvent) =>
if (event.badgeId !== badgeCode) return; {
if(event.badgeId !== badgeCode) return;
const texture = event.image; const element = TextureUtils.generateImage(new NitroSprite(event.image));
if (texture && texture.baseTexture && texture.baseTexture.resource && texture.baseTexture.resource.source) { element.onload = () => setImageElement(element);
setImageSrc(texture.baseTexture.resource.source.src);
didSetBadge = true;
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
} }
didSetBadge = true; GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); const texture = isGroup ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
};
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); if(texture && !didSetBadge)
{
const element = TextureUtils.generateImage(new NitroSprite(texture));
const texture = isGroup ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode); element.onload = () => setImageElement(element);
if (texture && !didSetBadge) {
if (texture.baseTexture && texture.baseTexture.resource && texture.baseTexture.resource.source) {
setImageSrc(texture.baseTexture.resource.source.src);
} }
}
return () => GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); return () => GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
}, [badgeCode, isGroup]); }, [ badgeCode, isGroup ]);
return ( return (
<Base classNames={ getClassNames } style={ getStyle } { ...rest }> <Base classNames={ getClassNames } style={ getStyle } { ...rest }>
{imageSrc && <img src={imageSrc} alt={badgeCode} />}
{ (showInfo && GetConfiguration<boolean>('badge.descriptions.enabled', true)) && { (showInfo && GetConfiguration<boolean>('badge.descriptions.enabled', true)) &&
<Base className="badge-information text-black py-1 px-2 small"> <Base className="badge-information text-black py-1 px-2 small">
<div className="fw-bold mb-1">{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }</div> <div className="fw-bold mb-1">{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }</div>