nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-01-18 13:26:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

BadgeImager updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-09-05 22:32:31 -03:00
parent 14e1f8b371
commit 8b6f08b989
2 changed files with 49 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/groups/views/shared-tabs/tab-badge/GroupSharedTabBadgeView.tsx
View File

@ -24,10 +24,10 @@ export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =
const badgeParts: GroupBadgePart[] = [
new GroupBadgePart(GroupBadgePart.BASE, badgeBases[0].id, badgePartColors[0].id),
new GroupBadgePart(GroupBadgePart.SYMBOL),
new GroupBadgePart(GroupBadgePart.SYMBOL),
new GroupBadgePart(GroupBadgePart.SYMBOL),
new GroupBadgePart(GroupBadgePart.SYMBOL)
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id),
new GroupBadgePart(GroupBadgePart.SYMBOL, 0, badgePartColors[0].id)
];
dispatchGroupsState({
@ -37,6 +37,12 @@ export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =
}, [ badgeBases, badgePartColors, groupBadgeParts ]);
const switchIndex = useCallback((index: number) =>
{
setIsSelectingModel(false);
setEditingIndex(index);
}, []);
const selectPartProperty = useCallback((property: string, key: number) =>
{
const clonedBadgeParts = Array.from(groupBadgeParts);
@ -83,7 +89,7 @@ export const GroupSharedTabBadgeView: FC<GroupSharedTabBadgeViewProps> = props =
{ groupBadgeParts && groupBadgeParts.map((badgePart, partIndex) =>
{
return (
<div key={ partIndex } className={ 'badge-preview flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': editingIndex === partIndex }) } onClick={ () => setEditingIndex(partIndex) }>
<div key={ partIndex } className={ 'badge-preview flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': editingIndex === partIndex }) } onClick={ () => switchIndex(partIndex) }>
{ badgePart.code && <BadgeImageView badgeCode={ badgePart.code } isGroup={ true } /> }
{ !badgePart.code && <i className="fas fa-plus text-primary h4 m-0" /> }
</div>

46
src/views/shared/badge-image/BadgeImageView.tsx
View File

@ -1,5 +1,6 @@
import { FC } from 'react';
import { GetConfiguration, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
import { BadgeInformationView } from './badge-info/BadgeInformationView';
import { BadgeImageViewProps } from './BadgeImageView.types';
@ -7,19 +8,48 @@ export const BadgeImageView: FC<BadgeImageViewProps> = props =>
{
const { badgeCode = null, isGroup = false, showInfo = false, customTitle = null } = props;
function getBadgeUrl(): string
const [ badgeUrl, setBadgeUrl ] = useState<string>('');
const [ isListening, setIsListening ] = useState<boolean>(true);
const onBadgeImageReadyEvent = useCallback((event: BadgeImageReadyEvent) =>
{
if(isGroup)
if(event.badgeId !== badgeCode) return;
const nitroSprite = new NitroSprite(event.image);
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
if(isListening)
{
return ((GetConfiguration<string>('badge.asset.group.url')).replace('%badgedata%', badgeCode));
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
setIsListening(false);
}
}, [ badgeCode, isListening ]);
useEffect(() =>
{
const existing = (isGroup) ? GetSessionDataManager().loadGroupBadgeImage(badgeCode) : GetSessionDataManager().loadBadgeImage(badgeCode);
if(!existing)
{
GetSessionDataManager().events.addEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
}
else
{
return ((GetConfiguration<string>('badge.asset.url')).replace('%badgename%', badgeCode));
const image = (isGroup) ? GetSessionDataManager().getGroupBadgeImage(badgeCode) : GetSessionDataManager().getBadgeImage(badgeCode);
const nitroSprite = new NitroSprite(image);
setBadgeUrl(TextureUtils.generateImageUrl(nitroSprite));
}
}
const url = `url('${ getBadgeUrl() }')`;
return (() =>
{
if(isListening)
{
GetSessionDataManager().events.removeEventListener(BadgeImageReadyEvent.IMAGE_READY, onBadgeImageReadyEvent);
}
});
}, [ badgeCode ]);
const url = `url('${ badgeUrl }')`;
return <div className="badge-image" style={ (url && url.length) ? { backgroundImage: url } : {} }>
{ showInfo && <BadgeInformationView title={ isGroup ? customTitle : LocalizeBadgeName(badgeCode) } description={ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) } /> }