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

Feat: Animated Badges

Browse Source
This commit is contained in:
duckietm 2024-05-08 12:59:23 +02:00
parent 0d07893957
commit 290a926264
1 changed files with 28 additions and 38 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 [ imageElement, setImageElement ] = useState<HTMLImageElement>(null); const [ imageSrc, setImageSrc ] = useState<string>(null);
const getClassNames = useMemo(() => const getClassNames = useMemo(() =>
{ {
@ -35,63 +35,53 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
{ {
let newStyle: CSSProperties = {}; let newStyle: CSSProperties = {};
if(imageElement) if(scale !== 1)
{ {
newStyle.backgroundImage = `url(${ imageElement.src })`; newStyle.transform = `scale(${ scale })`;
newStyle.width = imageElement.width;
newStyle.height = imageElement.height;
if(scale !== 1) if(!(scale % 1)) newStyle.imageRendering = 'pixelated';
{
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;
}, [ imageElement, scale, style ]); }, [ 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 element = TextureUtils.generateImage(new NitroSprite(event.image)); const texture = event.image;
element.onload = () => setImageElement(element); if (texture && texture.baseTexture && texture.baseTexture.resource && texture.baseTexture.resource.source) {
setImageSrc(texture.baseTexture.resource.source.src);
didSetBadge = true;
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
} }
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent); didSetBadge = true;
const texture = isGroup ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode); GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
};
if(texture && !didSetBadge) GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
{
const element = TextureUtils.generateImage(new NitroSprite(texture));
element.onload = () => setImageElement(element); const texture = isGroup ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
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>