nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move BadgeImageView

Browse Source
This commit is contained in:
Bill 2022-03-03 13:16:51 -05:00
parent 4bf146d4ab
commit 0af1450ea6
27 changed files with 110 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/common/index.scss
View File

@ -267,5 +267,56 @@
z-index: 1;
}
.badge-image {
position: relative;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
&.group-badge {
width: 39px;
height: 39px;
&.scale-2 {
width: 80px;
height: 80px;
}
}
.badge-information {
display: none;
}
&:hover {
.badge-information {
display: block;
}
}
.badge-information {
position: absolute;
pointer-events: none;
user-select: none;
width: 210px;
border-radius: $border-radius;
background: $white;
left: -220px;
z-index: 100;
&:before {
position: absolute;
content: ' ';
width: 0;
height: 0;
border-left: 10px solid $white;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
top: 10px;
right: -10px;
}
}
}
@import './card/NitroCardView';

10
src/views/shared/badge-image/BadgeImageView.tsx → src/common/layout/LayoutBadgeImageView.tsx
View File

@ -1,10 +1,10 @@
import { BadgeImageReadyEvent, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, useEffect, useMemo, useState } from 'react';
import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
import { Base, BaseProps } from '../../../common/Base';
import { BadgeInformationView } from './badge-info/BadgeInformationView';
import { GetSessionDataManager, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../api';
import { BadgeInformationView } from '../../views/shared/badge-image/badge-info/BadgeInformationView';
import { Base, BaseProps } from '../Base';
export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
export interface LayoutBadgeImageViewProps extends BaseProps<HTMLDivElement>
{
badgeCode: string;
isGroup?: boolean;
@ -14,7 +14,7 @@ export interface BadgeImageViewProps extends BaseProps<HTMLDivElement>
scale?: number;
}
export const BadgeImageView: FC<BadgeImageViewProps> = 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 [ badgeUrl, setBadgeUrl ] = useState<string>('');

1
src/common/layout/index.ts
View File

@ -1,3 +1,4 @@
export * from './LayoutBadgeImageView';
export * from './LayoutCurrencyIcon';
export * from './LayoutGiftTagView';
export * from './LayoutGridItem';

2
src/views/shared/friendly-time/FriendlyTimeView.tsx → src/common/utils/FriendlyTimeView.tsx
View File

@ -1,6 +1,6 @@
import { FriendlyTime } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { Base, BaseProps } from '../../../common';
import { Base, BaseProps } from '..';
interface FriendlyTimeViewProps extends BaseProps<HTMLDivElement>
{

1
src/common/utils/index.ts
View File

@ -1 +1,2 @@
export * from './CreateTransitionToIcon';
export * from './FriendlyTimeView';

5
src/components/achievements/views/achievement-badge/AchievementBadgeView.tsx
View File

@ -1,7 +1,6 @@
import { AchievementData } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { BaseProps } from '../../../../common/Base';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { BaseProps, LayoutBadgeImageView } from '../../../../common';
import { AchievementUtilities } from '../../common/AchievementUtilities';
export interface AchievementBadgeViewProps extends BaseProps<HTMLDivElement>
@ -17,6 +16,6 @@ export const AchievementBadgeView: FC<AchievementBadgeViewProps> = props =>
if(!achievement) return null;
return (
<BadgeImageView badgeCode={ AchievementUtilities.getBadgeCode(achievement) } isGrayscale={ !AchievementUtilities.hasStarted(achievement) } scale={ scale } { ...rest } />
<LayoutBadgeImageView badgeCode={ AchievementUtilities.getBadgeCode(achievement) } isGrayscale={ !AchievementUtilities.hasStarted(achievement) } scale={ scale } { ...rest } />
);
}

5
src/components/catalog/views/page/widgets/CatalogAddOnBadgeWidgetView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { BaseProps } from '../../../../../common/Base';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { BaseProps, LayoutBadgeImageView } from '../../../../../common';
import { useCatalogContext } from '../../../CatalogContext';
interface CatalogAddOnBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
@ -15,5 +14,5 @@ export const CatalogAddOnBadgeWidgetView: FC<CatalogAddOnBadgeWidgetViewProps> =
if(!currentOffer || !currentOffer.badgeCode || !currentOffer.badgeCode.length) return null;
return <BadgeImageView badgeCode={ currentOffer.badgeCode } { ...rest } />;
return <LayoutBadgeImageView badgeCode={ currentOffer.badgeCode } { ...rest } />;
}

5
src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
View File

@ -1,9 +1,8 @@
import { StringDataType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { AutoGrid, AutoGridProps, LayoutGridItem } from '../../../../../common';
import { AutoGrid, AutoGridProps, LayoutBadgeImageView, LayoutGridItem } from '../../../../../common';
import { InventoryBadgesRequestEvent, InventoryBadgesUpdatedEvent } from '../../../../../events';
import { DispatchUiEvent, UseUiEvent } from '../../../../../hooks';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { useCatalogContext } from '../../../CatalogContext';
const EXCLUDED_BADGE_CODES: string[] = [];
@ -62,7 +61,7 @@ export const CatalogBadgeSelectorWidgetView: FC<CatalogBadgeSelectorWidgetViewPr
{
return (
<LayoutGridItem key={ code } itemActive={ (currentBadge === code) } onClick={ event => setCurrentBadge(code) }>
<BadgeImageView badgeCode={ code } />
<LayoutBadgeImageView badgeCode={ code } />
</LayoutGridItem>
);
}) }

5
src/components/catalog/views/page/widgets/CatalogGuildBadgeWidgetView.tsx
View File

@ -1,7 +1,6 @@
import { StringDataType } from '@nitrots/nitro-renderer';
import { FC, useMemo } from 'react';
import { BaseProps } from '../../../../../common';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { BaseProps, LayoutBadgeImageView } from '../../../../../common';
import { useCatalogContext } from '../../../CatalogContext';
interface CatalogGuildBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
@ -28,5 +27,5 @@ export const CatalogGuildBadgeWidgetView: FC<CatalogGuildBadgeWidgetViewProps> =
if(!badgeCode) return null;
return <BadgeImageView badgeCode={ badgeCode } isGroup={ true } { ...rest } />;
return <LayoutBadgeImageView badgeCode={ badgeCode } isGroup={ true } { ...rest } />;
}

7
src/components/groups/views/GroupBadgeCreatorView.tsx
View File

@ -1,7 +1,6 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Dispatch, FC, SetStateAction, useState } from 'react';
import { Base, Column, Flex, Grid } from '../../../common';
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
import { Base, Column, Flex, Grid, LayoutBadgeImageView } from '../../../common';
import { GroupBadgePart } from '../common/GroupBadgePart';
import { useGroupsContext } from '../GroupsContext';
@ -40,7 +39,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
<Flex key={ index } alignItems="center" justifyContent="between" gap={ 2 } className="bg-muted rounded px-2 py-1">
<Flex pointer center className="bg-muted rounded p-1" onClick={ event => setSelectedIndex(index) }>
{ (badgeParts[index].code && (badgeParts[index].code.length > 0)) &&
<BadgeImageView badgeCode={ badgeParts[index].code } isGroup={ true } /> }
<LayoutBadgeImageView badgeCode={ badgeParts[index].code } isGroup={ true } /> }
{ (!badgeParts[index].code || !badgeParts[index].code.length) &&
<Flex center className="badge-image group-badge">
<FontAwesomeIcon icon="plus" />
@ -74,7 +73,7 @@ export const GroupBadgeCreatorView: FC<GroupBadgeCreatorViewProps> = props =>
{
return (
<Column key={ index } pointer center className="bg-muted rounded p-1" onClick={ event => setPartProperty(selectedIndex, 'key', item.id) }>
<BadgeImageView badgeCode={ GroupBadgePart.getCode(badgeParts[selectedIndex].type, item.id, badgeParts[selectedIndex].color, 4) } isGroup={ true } />
<LayoutBadgeImageView badgeCode={ GroupBadgePart.getCode(badgeParts[selectedIndex].type, item.id, badgeParts[selectedIndex].color, 4) } isGroup={ true } />
</Column>
);
}) }

5
src/components/groups/views/GroupInformationView.tsx
View File

@ -1,9 +1,8 @@
import { GroupInformationParser, GroupRemoveMemberComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { CreateLinkEvent, GetGroupManager, GetGroupMembers, GetSessionDataManager, LocalizeText, SendMessageComposer, TryJoinGroup, TryVisitRoom } from '../../../api';
import { Button, Column, Flex, Grid, Text } from '../../../common';
import { Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../common';
import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
import { CatalogPageName } from '../../catalog/common/CatalogPageName';
import { GroupMembershipType } from '../common/GroupMembershipType';
import { GroupType } from '../common/GroupType';
@ -103,7 +102,7 @@ export const GroupInformationView: FC<GroupInformationViewProps> = props =>
<Grid overflow="hidden">
<Column center size={ 3 } overflow="hidden">
<Flex alignItems="center" overflow="hidden" className="group-badge">
<BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } scale={ 2 } />
<LayoutBadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } scale={ 2 } />
</Flex>
<Column alignItems="center" gap={ 1 }>
<Text small underline pointer onClick={ () => handleAction('members') }>{ LocalizeText('group.membercount', [ 'totalMembers' ], [ groupInformation.membersCount.toString() ]) }</Text>

5
src/components/groups/views/GroupMembersView.tsx
View File

@ -2,11 +2,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
import { Base, Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { Base, Button, Column, Flex, Grid, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { BatchUpdates, UseMessageEventHook } from '../../../hooks';
import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
import { AvatarImageView } from '../../../views/shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
export const GroupMembersView: FC<{}> = props =>
{
@ -167,7 +166,7 @@ export const GroupMembersView: FC<{}> = props =>
<NitroCardContentView overflow="hidden">
<Flex gap={ 2 }>
<Flex center className="group-badge">
<BadgeImageView badgeCode={ membersData.badge } isGroup={ true } className="mx-auto d-block"/>
<LayoutBadgeImageView badgeCode={ membersData.badge } isGroup={ true } className="mx-auto d-block"/>
</Flex>
<Column fullWidth gap={ 1 }>
<input type="text" className="form-control form-control-sm w-100" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) } />

5
src/components/groups/views/GroupRoomInformationView.tsx
View File

@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { DesktopViewEvent, GetGuestRoomResultEvent, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupRemoveMemberComposer, HabboGroupDeactivatedMessageEvent, RoomEntryInfoMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetGroupInformation, GetGroupManager, GetSessionDataManager, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
import { Base, Button, Column, Flex, Text } from '../../../common';
import { Base, Button, Column, Flex, LayoutBadgeImageView, Text } from '../../../common';
import { UseMessageEventHook } from '../../../hooks';
import { NotificationUtilities } from '../../../views/notification-center/common/NotificationUtilities';
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
import { GroupMembershipType } from '../common/GroupMembershipType';
import { GroupType } from '../common/GroupType';
@ -128,7 +127,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
<>
<Flex pointer alignItems="center" gap={ 2 } onClick={ event => GetGroupInformation(groupInformation.id) }>
<Base className="group-badge">
<BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
<LayoutBadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
</Base>
<Text variant="white">{ groupInformation.title }</Text>
</Flex>

5
src/components/groups/views/tabs/GroupTabBadgeView.tsx
View File

@ -1,8 +1,7 @@
import { GroupSaveBadgeComposer } from '@nitrots/nitro-renderer';
import { Dispatch, FC, SetStateAction, useCallback, useEffect, useState } from 'react';
import { SendMessageComposer } from '../../../../api';
import { Column, Flex, Grid } from '../../../../common';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { Column, Flex, Grid, LayoutBadgeImageView } from '../../../../common';
import { GroupBadgePart } from '../../common/GroupBadgePart';
import { IGroupData } from '../../common/IGroupData';
import { useGroupsContext } from '../../GroupsContext';
@ -112,7 +111,7 @@ export const GroupTabBadgeView: FC<GroupTabBadgeViewProps> = props =>
<Grid overflow="hidden" gap={ 1 }>
<Column size={ 2 }>
<Flex center className="bg-muted rounded p-1">
<BadgeImageView badgeCode={ getModifiedBadgeCode() } isGroup={ true } />
<LayoutBadgeImageView badgeCode={ getModifiedBadgeCode() } isGroup={ true } />
</Flex>
</Column>
<Column size={ 10 } overflow="auto">

5
src/components/groups/views/tabs/GroupTabCreatorConfirmationView.tsx
View File

@ -1,7 +1,6 @@
import { Dispatch, FC, SetStateAction } from 'react';
import { LocalizeText } from '../../../../api';
import { Base, Column, Flex, Grid, Text } from '../../../../common';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { Base, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
import { IGroupData } from '../../common/IGroupData';
import { useGroupsContext } from '../../GroupsContext';
@ -42,7 +41,7 @@ export const GroupTabCreatorConfirmationView: FC<GroupTabCreatorConfirmationView
<Column size={ 3 }>
<Column center className="bg-muted rounded p-1" gap={ 2 }>
<Text bold center>{ LocalizeText('group.create.confirm.guildbadge') }</Text>
<BadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } />
<LayoutBadgeImageView badgeCode={ getCompleteBadgeCode() } isGroup={ true } />
</Column>
<Column center className="bg-muted rounded p-1" gap={ 2 }>
<Text bold center>{ LocalizeText('group.edit.color.guild.color') }</Text>

5
src/components/inventory/views/badge/InventoryBadgeItemView.tsx
View File

@ -1,7 +1,6 @@
import { MouseEventType } from '@nitrots/nitro-renderer';
import { FC, MouseEvent } from 'react';
import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { LayoutBadgeImageView, LayoutGridItem } from '../../../../common';
import { useInventoryContext } from '../../InventoryContext';
import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
@ -29,7 +28,7 @@ export const InventoryBadgeItemView: FC<InventoryBadgeItemViewProps> = props =>
return (
<LayoutGridItem itemActive={ (badgeState.badge === badgeCode) } onMouseDown={ onMouseEvent }>
<BadgeImageView badgeCode={ badgeCode } />
<LayoutBadgeImageView badgeCode={ badgeCode } />
</LayoutGridItem>
);
}

5
src/components/inventory/views/badge/InventoryBadgeView.tsx
View File

@ -1,8 +1,7 @@
import { RequestBadgesComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect } from 'react';
import { GetConfiguration, LocalizeBadgeName, LocalizeText, SendMessageComposer } from '../../../../api';
import { AutoGrid, Button, Column, Flex, Grid, Text } from '../../../../common';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
import { useInventoryContext } from '../../InventoryContext';
import { InventoryBadgeActions } from '../../reducers/InventoryBadgeReducer';
import { InventoryBadgeItemView } from './InventoryBadgeItemView';
@ -92,7 +91,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
{ badge && (badge.length > 0) &&
<Column grow justifyContent="end" gap={ 2 }>
<Flex alignItems="center" gap={ 2 }>
<BadgeImageView badgeCode={ badge } />
<LayoutBadgeImageView badgeCode={ badge } />
<Text>{ LocalizeBadgeName(badge) }</Text>
</Flex>
<Button variant={ (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>

5
src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx
View File

@ -3,10 +3,9 @@ import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, Security
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetConfiguration, GetGroupInformation, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
import { FloorplanEditorEvent, NavigatorEvent, RoomWidgetThumbnailEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent } from '../../../../hooks';
import { BadgeImageView } from '../../../../views/shared/badge-image/BadgeImageView';
import { useNavigatorContext } from '../../NavigatorContext';
import { NavigatorActions } from '../../reducers/NavigatorReducer';
@ -165,7 +164,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
<Text overflow="auto">{ roomInfoData.enteredGuestRoom.description }</Text>
{ (roomInfoData.enteredGuestRoom.habboGroupId > 0) &&
<Flex pointer alignItems="center" gap={ 1 } onClick={ () => processAction('open_group_info') }>
<BadgeImageView className="flex-none" badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
<LayoutBadgeImageView className="flex-none" badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
<Text underline>
{ LocalizeText('navigator.guildbase', ['groupName'], [roomInfoData.enteredGuestRoom.groupName]) }
</Text>

5
src/components/user-profile/views/BadgesContainerView.tsx
View File

@ -1,6 +1,5 @@
import { FC } from 'react';
import { Grid, LayoutGridItem } from '../../../common';
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
import { Grid, LayoutBadgeImageView, LayoutGridItem } from '../../../common';
interface BadgesContainerViewProps
{
@ -18,7 +17,7 @@ export const BadgesContainerView: FC<BadgesContainerViewProps> = props =>
{
return (
<LayoutGridItem key={ index }>
<BadgeImageView badgeCode={ badge }/>
<LayoutBadgeImageView badgeCode={ badge }/>
</LayoutGridItem>
)
}) }

4
src/components/user-profile/views/GroupsContainerView.tsx
View File

@ -2,8 +2,8 @@ import { GroupFavoriteComposer, GroupInformationComposer, GroupInformationEvent,
import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react';
import { SendMessageComposer } from '../../../api';
import { LayoutBadgeImageView } from '../../../common';
import { UseMessageEventHook } from '../../../hooks';
import { BadgeImageView } from '../../../views/shared/badge-image/BadgeImageView';
import { GroupInformationView } from '../../groups/views/GroupInformationView';
interface GroupsContainerViewProps
@ -58,7 +58,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
{
return <div key={ index } onClick={ () => setSelectedGroupId(group.groupId) } className={ 'profile-groups-item position-relative flex-shrink-0 d-flex align-items-center justify-content-center cursor-pointer' + classNames({ ' active': selectedGroupId === group.groupId }) }>
{ itsMe && <i className={ 'position-absolute icon icon-group-' + (group.favourite ? 'favorite' : 'not-favorite') } onClick={ () => favoriteGroup(group.groupId) } /> }
<BadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
<LayoutBadgeImageView badgeCode={ group.badgeCode } isGroup={ true } />
</div>
}) }
</div>

5
src/views/friends/views/friend-bar/FriendBarItemView.tsx
View File

@ -1,9 +1,8 @@
import { FollowFriendMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetUserProfile, LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
import { Base } from '../../../../common';
import { Base, LayoutBadgeImageView } from '../../../../common';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { MessengerFriend } from '../../common/MessengerFriend';
interface FriendBarItemViewProps
@ -65,7 +64,7 @@ export const FriendBarItemView: FC<FriendBarItemViewProps> = props =>
<div ref={ elementRef } className={'btn btn-success friend-bar-item ' + (isVisible ? 'friend-bar-item-active' : '')} onClick={ event => setVisible(prevValue => !prevValue) }>
<div className={`friend-bar-item-head position-absolute ${friend.id > 0 ? 'avatar': 'group'}`}>
{ friend.id > 0 && <AvatarImageView headOnly={ true } figure={ friend.figure } direction={ 2 } /> }
{ friend.id <= 0 && <BadgeImageView isGroup={ true } badgeCode={ friend.figure} />}
{ friend.id <= 0 && <LayoutBadgeImageView isGroup={ true } badgeCode={ friend.figure} />}
</div>
<div className="text-truncate">{ friend.name }</div>
{ isVisible &&

5
src/views/friends/views/messenger/FriendsMessengerView.tsx
View File

@ -1,11 +1,10 @@
import { FollowFriendMessageComposer, ILinkEventTracker, NewConsoleMessageEvent, RoomInviteEvent, SendMessageComposer as SendMessageComposerPacket } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MESSENGER_MESSAGE_RECEIVED, MESSENGER_NEW_THREAD, PlaySound, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { Base, Button, ButtonGroup, Column, Flex, Grid, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { FriendsMessengerIconEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { MessengerThread } from '../../common/MessengerThread';
import { MessengerThreadChat } from '../../common/MessengerThreadChat';
import { useFriendsContext } from '../../FriendsContext';
@ -271,7 +270,7 @@ export const FriendsMessengerView: FC<{}> = props =>
<div className="friend-head rounded flex-shrink-0">
{thread.participant.id > 0 && <AvatarImageView figure={thread.participant.figure} headOnly={true} direction={3} />}
{thread.participant.id <= 0 && <BadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
{thread.participant.id <= 0 && <LayoutBadgeImageView isGroup={true} badgeCode={thread.participant.figure} />}
</div>
<Base className='d-flex text-truncate text-black ms-1 align-items-center'>{thread.participant.name}</Base>

9
src/views/hc-center/HcCenterView.tsx
View File

@ -1,14 +1,11 @@
import { ClubGiftInfoEvent, FriendlyTime, GetClubGiftInfo, ILinkEventTracker, RequestBadgesComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
import { BadgesEvent, FigureUpdateEvent } from '@nitrots/nitro-renderer/src';
import { ScrGetKickbackInfoMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/user/ScrGetKickbackInfoMessageComposer';
import { BadgesEvent, ClubGiftInfoEvent, FigureUpdateEvent, FriendlyTime, GetClubGiftInfo, ILinkEventTracker, RequestBadgesComposer, ScrGetKickbackInfoMessageComposer, ScrKickbackData, ScrSendKickbackInfoMessageEvent, UserInfoEvent, UserSubscriptionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { OverlayTrigger, Popover } from 'react-bootstrap';
import { AddEventLinkTracker, CreateLinkEvent, GetConfiguration, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
import { LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
import { HcCenterEvent } from '../../events';
import { UseMessageEventHook, UseUiEvent } from '../../hooks';
import { AvatarImageView } from '../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../shared/badge-image/BadgeImageView';
import { BadgeResolver } from './util/BadgeResolver';
import { ClubStatus } from './util/ClubStatus';
@ -221,7 +218,7 @@ export const HcCenterView: FC<{}> = props =>
</div>
<NitroCardContentView>
<div className="d-flex flex-row mb-1">
<BadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
<LayoutBadgeImageView badgeCode={badgeCode} className="align-self-center flex-shrink-0 me-1" />
<div className="w-100 text-black streak-info">
<h6 className="mb-0">{LocalizeText('hccenter.status.' + clubStatus)}</h6>
<div dangerouslySetInnerHTML={{ __html: getInfoText() }} />

5
src/views/room/widgets/infostand/InfoStandWidgetBotView.tsx
View File

@ -1,9 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
import { LocalizeText, RoomWidgetUpdateInfostandUserEvent } from '../../../../api';
import { Column, Flex, Text } from '../../../../common';
import { Column, Flex, LayoutBadgeImageView, Text } from '../../../../common';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
interface InfoStandWidgetBotViewProps
{
@ -35,7 +34,7 @@ export const InfoStandWidgetBotView: FC<InfoStandWidgetBotViewProps> = props =>
<Column grow center gap={ 0 }>
{ (botData.badges.length > 0) && botData.badges.map(result =>
{
return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
return <LayoutBadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
}) }
</Column>
</Flex>

5
src/views/room/widgets/infostand/InfoStandWidgetFurniView.tsx
View File

@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, StringDataType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { CreateLinkEvent, GetGroupInformation, GetRoomEngine, LocalizeText, RoomWidgetFurniActionMessage, RoomWidgetUpdateInfostandFurniEvent, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, Text, UserProfileIconView } from '../../../../common';
import { Button, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { BatchUpdates, UseMessageEventHook } from '../../../../hooks';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { LimitedEditionCompactPlateView } from '../../../shared/limited-edition/LimitedEditionCompactPlateView';
import { RarityLevelView } from '../../../shared/rarity-level/RarityLevelView';
import { useRoomContext } from '../../context/RoomContext';
@ -308,7 +307,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
<>
<hr className="m-0" />
<Flex pointer alignItems="center" gap={ 2 } onClick={ () => GetGroupInformation(furniData.groupId) }>
<BadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
<LayoutBadgeImageView badgeCode={ getGroupBadgeCode() } isGroup={ true } />
<Text variant="white" underline>{ groupName }</Text>
</Flex>
</> }

5
src/views/room/widgets/infostand/InfoStandWidgetRentableBotView.tsx
View File

@ -2,9 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { BotRemoveComposer } from '@nitrots/nitro-renderer';
import { FC, useMemo } from 'react';
import { LocalizeText, RoomWidgetUpdateInfostandRentableBotEvent, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, Text, UserProfileIconView } from '../../../../common';
import { Button, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { BotSkillsEnum } from '../avatar-info/common/BotSkillsEnum';
interface InfoStandWidgetRentableBotViewProps
@ -49,7 +48,7 @@ export const InfoStandWidgetRentableBotView: FC<InfoStandWidgetRentableBotViewPr
<Column grow center gap={ 0 }>
{ (rentableBotData.badges.length > 0) && rentableBotData.badges.map(result =>
{
return <BadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
return <LayoutBadgeImageView key={ result } badgeCode={ result } showInfo={ true } />;
}) }
</Column>
</Flex>

15
src/views/room/widgets/infostand/InfoStandWidgetUserView.tsx
View File

@ -2,10 +2,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionUserBadgesEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
import { FC, FocusEvent, KeyboardEvent, useCallback, useEffect, useState } from 'react';
import { GetConfiguration, GetGroupInformation, LocalizeText, RoomWidgetChangeMottoMessage, RoomWidgetUpdateInfostandUserEvent, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, Text, UserProfileIconView } from '../../../../common';
import { Base, Column, Flex, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../common';
import { BatchUpdates, UseEventDispatcherHook, UseMessageEventHook } from '../../../../hooks';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { useRoomContext } from '../../context/RoomContext';
import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
@ -110,27 +109,27 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<Column grow gap={ 0 }>
<Flex gap={ 1 }>
<Base className="badge-image">
{ badges[0] && <BadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
{ badges[0] && <LayoutBadgeImageView badgeCode={ badges[0] } showInfo={ true } /> }
</Base>
<Base pointer={ ( userData.groupId > 0) } className="badge-image" onClick={ event => GetGroupInformation(userData.groupId) }>
{ userData.groupId > 0 &&
<BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
<LayoutBadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } showInfo={ true } customTitle={ userData.groupName } /> }
</Base>
</Flex>
<Flex gap={ 1 }>
<Base className="badge-image">
{ badges[1] && <BadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
{ badges[1] && <LayoutBadgeImageView badgeCode={ badges[1] } showInfo={ true } /> }
</Base>
<Base className="badge-image">
{ badges[2] && <BadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
{ badges[2] && <LayoutBadgeImageView badgeCode={ badges[2] } showInfo={ true } /> }
</Base>
</Flex>
<Flex gap={ 1 }>
<Base className="badge-image">
{ badges[3] && <BadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
{ badges[3] && <LayoutBadgeImageView badgeCode={ badges[3] } showInfo={ true } /> }
</Base>
<Base className="badge-image">
{ badges[4] && <BadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
{ badges[4] && <LayoutBadgeImageView badgeCode={ badges[4] } showInfo={ true } /> }
</Base>
</Flex>
</Column>