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

🆙 Added Avatar Direction to backgrounds

Browse Source
This commit is contained in:
DuckieTM 2025-05-24 19:23:51 +02:00
parent a4d59ca162
commit 917912b909
3 changed files with 627 additions and 341 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

654
public/ui-config.json.example
View File

File diff suppressed because it is too large Load Diff

53
src/components/backgrounds/BackgroundsView.tsx
View File

@ -10,6 +10,7 @@ interface ItemData {
minRank: number;
isAmbassadorOnly: boolean;
selectable: boolean;
AvatarDirection: number;
}
interface BackgroundsViewProps {
@ -20,6 +21,9 @@ interface BackgroundsViewProps {
setSelectedStand: Dispatch<SetStateAction<number>>;
selectedOverlay: number;
setSelectedOverlay: Dispatch<SetStateAction<number>>;
setBackgroundDirection: Dispatch<SetStateAction<number>>;
setStandDirection: Dispatch<SetStateAction<number>>;
setOverlayDirection: Dispatch<SetStateAction<number>>;
}
const TABS = ['backgrounds', 'stands', 'overlays'] as const;
@ -32,7 +36,10 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
selectedStand,
setSelectedStand,
selectedOverlay,
setSelectedOverlay
setSelectedOverlay,
setBackgroundDirection,
setStandDirection,
setOverlayDirection
}) => {
const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
const { roomSession } = useRoom();
@ -52,7 +59,12 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
return item.isHcOnly || (meetsRank && ambassadorEligible);
})
.map(item => ({ id: item[`${dataType}Id`], ...item, selectable: !item.isHcOnly || userData.isHcMember }));
.map(item => ({
id: item[`${dataType}Id`],
...item,
selectable: !item.isHcOnly || userData.isHcMember,
AvatarDirection: item.AvatarDirection ?? 4
}));
}, [userData]);
const allData = useMemo(() => ({
@ -64,14 +76,45 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
const handleSelection = useCallback((id: number) => {
if (!roomSession) return;
const setters = { backgrounds: setSelectedBackground, stands: setSelectedStand, overlays: setSelectedOverlay };
const setters = {
backgrounds: setSelectedBackground,
stands: setSelectedStand,
overlays: setSelectedOverlay
};
const directionSetters = {
backgrounds: setBackgroundDirection,
stands: setStandDirection,
overlays: setOverlayDirection
};
const currentValues = { backgrounds: selectedBackground, stands: selectedStand, overlays: selectedOverlay };
const currentValues = {
backgrounds: selectedBackground,
stands: selectedStand,
overlays: selectedOverlay
};
const selectedItem = allData[activeTab].find(item => item.id === id);
if (selectedItem) {
setters[activeTab](id);
directionSetters[activeTab](selectedItem.AvatarDirection);
const newValues = { ...currentValues, [activeTab]: id };
roomSession.sendBackgroundMessage(newValues.backgrounds, newValues.stands, newValues.overlays);
}, [activeTab, roomSession, selectedBackground, selectedStand, selectedOverlay, setSelectedBackground, setSelectedStand, setSelectedOverlay]);
}
}, [
activeTab,
roomSession,
selectedBackground,
selectedStand,
selectedOverlay,
setSelectedBackground,
setSelectedStand,
setSelectedOverlay,
setBackgroundDirection,
setStandDirection,
setOverlayDirection,
allData
]);
const renderItem = useCallback((item: ItemData, type: string) => (
<Flex

107
src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
View File

@ -8,15 +8,13 @@ import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelat
import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
import { BackgroundsView } from '../../../../backgrounds/BackgroundsView';
interface InfoStandWidgetUserViewProps
{
interface InfoStandWidgetUserViewProps {
avatarInfo: AvatarInfoUser;
setAvatarInfo: Dispatch<SetStateAction<AvatarInfoUser>>;
onClose: () => void;
}
export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =>
{
export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props => {
const { avatarInfo = null, setAvatarInfo = null, onClose = null } = props;
const [motto, setMotto] = useState<string>(null);
const [isEditingMotto, setIsEditingMotto] = useState(false);
@ -25,45 +23,47 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
const [backgroundId, setBackgroundId] = useState<number>(null);
const [standId, setStandId] = useState<number>(null);
const [overlayId, setOverlayId] = useState<number>(null);
const [backgroundDirection, setBackgroundDirection] = useState<number>(2);
const [standDirection, setStandDirection] = useState<number>(2);
const [overlayDirection, setOverlayDirection] = useState<number>(2);
const [isVisible, setIsVisible] = useState(false);
const infostandBackgroundClass = `background-${backgroundId}`;
const infostandStandClass = `stand-${standId}`;
const infostandOverlayClass = `overlay-${overlayId}`;
const saveMotto = (motto: string) =>
{
// Compute the avatar direction: Overlay > Stand > Background
const avatarDirection = overlayDirection !== null && overlayDirection !== undefined ? overlayDirection :
(standDirection !== null && standDirection !== undefined ? standDirection : backgroundDirection);
const saveMotto = (motto: string) => {
if (!isEditingMotto || (motto.length > GetConfiguration<number>('motto.max.length', 38))) return;
roomSession.sendMottoMessage(motto);
setIsEditingMotto(false);
}
};
const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value);
const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
{
const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
event.stopPropagation();
switch(event.key)
{
switch (event.key) {
case 'Enter':
saveMotto((event.target as HTMLInputElement).value);
return;
}
}
};
useRoomSessionManagerEvent<RoomSessionUserBadgesEvent>(RoomSessionUserBadgesEvent.RSUBE_BADGES, event =>
{
useRoomSessionManagerEvent<RoomSessionUserBadgesEvent>(RoomSessionUserBadgesEvent.RSUBE_BADGES, event => {
if (!avatarInfo || (avatarInfo.webID !== event.userId)) return;
const oldBadges = avatarInfo.badges.join('');
if (oldBadges === event.badges.join('')) return;
setAvatarInfo(prevValue =>
{
setAvatarInfo(prevValue => {
const newValue = CloneObject(prevValue);
newValue.badges = event.badges;
@ -72,12 +72,10 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
});
});
useRoomSessionManagerEvent<RoomSessionUserFigureUpdateEvent>(RoomSessionUserFigureUpdateEvent.USER_FIGURE, event =>
{
useRoomSessionManagerEvent<RoomSessionUserFigureUpdateEvent>(RoomSessionUserFigureUpdateEvent.USER_FIGURE, event => {
if (!avatarInfo || (avatarInfo.roomIndex !== event.roomIndex)) return;
setAvatarInfo(prevValue =>
{
setAvatarInfo(prevValue => {
const newValue = CloneObject(prevValue);
newValue.figure = event.figure;
@ -89,27 +87,37 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
return newValue;
});
// Update directions based on the new IDs
const backgrounds = GetConfiguration('backgrounds.data') || [];
const stands = GetConfiguration('stands.data') || [];
const overlays = GetConfiguration('overlays.data') || [];
const background = backgrounds.find(bg => bg.backgroundId === event.backgroundId);
const stand = stands.find(st => st.standId === event.standId);
const overlay = overlays.find(ov => ov.overlayId === event.overlayId);
setBackgroundDirection(background ? background.AvatarDirection ?? 2 : 2);
setStandDirection(stand ? stand.AvatarDirection ?? 2 : 2);
setOverlayDirection(overlay ? overlay.AvatarDirection ?? 2 : 2);
});
useRoomSessionManagerEvent<RoomSessionFavoriteGroupUpdateEvent>(RoomSessionFavoriteGroupUpdateEvent.FAVOURITE_GROUP_UPDATE, event =>
{
useRoomSessionManagerEvent<RoomSessionFavoriteGroupUpdateEvent>(RoomSessionFavoriteGroupUpdateEvent.FAVOURITE_GROUP_UPDATE, event => {
if (!avatarInfo || (avatarInfo.roomIndex !== event.roomIndex)) return;
setAvatarInfo(prevValue =>
{
setAvatarInfo(prevValue => {
const newValue = CloneObject(prevValue);
const clearGroup = ((event.status === -1) || (event.habboGroupId <= 0));
newValue.groupId = clearGroup ? -1 : event.habboGroupId;
newValue.groupName = clearGroup ? null : event.habboGroupName
newValue.groupName = clearGroup ? null : event.habboGroupName;
newValue.groupBadgeId = clearGroup ? null : GetSessionDataManager().getGroupBadge(event.habboGroupId);
return newValue;
});
});
useMessageEvent<RelationshipStatusInfoEvent>(RelationshipStatusInfoEvent, event =>
{
useMessageEvent<RelationshipStatusInfoEvent>(RelationshipStatusInfoEvent, event => {
const parser = event.getParser();
if (!avatarInfo || (avatarInfo.webID !== parser.userId)) return;
@ -117,25 +125,39 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
setRelationships(parser);
});
useEffect(() =>
{
useEffect(() => {
setIsEditingMotto(false);
setMotto(avatarInfo.motto);
setBackgroundId(avatarInfo.backgroundId);
setStandId(avatarInfo.standId);
setOverlayId(avatarInfo.overlayId);
// Set initial directions based on avatarInfo
const backgrounds = GetConfiguration('backgrounds.data') || [];
const stands = GetConfiguration('stands.data') || [];
const overlays = GetConfiguration('overlays.data') || [];
const background = backgrounds.find(bg => bg.backgroundId === avatarInfo.backgroundId);
const stand = stands.find(st => st.standId === avatarInfo.standId);
const overlay = overlays.find(ov => ov.overlayId === avatarInfo.overlayId);
setBackgroundDirection(background ? background.AvatarDirection ?? 2 : 2);
setStandDirection(stand ? stand.AvatarDirection ?? 2 : 2);
setOverlayDirection(overlay ? overlay.AvatarDirection ?? 2 : 2);
SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID));
return () =>
{
return () => {
setIsEditingMotto(false);
setMotto(null);
setRelationships(null);
setBackgroundId(null);
setStandId(null);
setOverlayId(null);
}
setBackgroundDirection(2);
setStandDirection(2);
setOverlayDirection(2);
};
}, [avatarInfo]);
if (!avatarInfo) return null;
@ -157,12 +179,13 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<Flex gap={1}>
<Column position="relative" pointer fullWidth className={`body-image profile-background ${infostandBackgroundClass}`} onClick={event => GetUserProfile(avatarInfo.webID)}>
<Base position="absolute" className={`body-image profile-stand ${infostandStandClass}`} />
<LayoutAvatarImageView figure={ avatarInfo.figure } direction={ 4 } />
<LayoutAvatarImageView figure={avatarInfo.figure} direction={avatarDirection} style={{ position: 'relative', top: '-10px' }} />
<Base position="absolute" className={`body-image profile-overlay ${infostandOverlayClass}`} />
{avatarInfo.type === AvatarInfoUser.OWN_USER &&
<Base position="absolute" className="icon edit-icon edit-icon-position" onClick={ event =>
{ event.stopPropagation(); setIsVisible(prevValue => !prevValue); } }
/>
<Base position="absolute" className="icon edit-icon edit-icon-position" onClick={event => {
event.stopPropagation();
setIsVisible(prevValue => !prevValue);
}} />
}
</Column>
<Column grow alignItems="center" gap={0}>
@ -206,7 +229,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<FaPencilAlt className="small fa-icon" />
<Flex grow alignItems="center" className="motto-content">
{!isEditingMotto &&
<Text fullWidth pointer wrap textBreak small variant="white" onClick={ event => setIsEditingMotto(true) }>{ motto }&nbsp;</Text> }
<Text fullWidth pointer wrap textBreak small variant="white" onClick={event => setIsEditingMotto(true)}>{motto} </Text>}
{isEditingMotto &&
<input type="text" className="motto-input" maxLength={GetConfiguration<number>('motto.max.length', 38)} value={motto} onChange={event => setMotto(event.target.value)} onBlur={onMottoBlur} onKeyDown={onMottoKeyDown} autoFocus={true} />}
</Flex>
@ -243,9 +266,11 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
selectedStand={standId}
setSelectedStand={setStandId}
selectedOverlay={overlayId}
setSelectedOverlay={ setOverlayId }
/>
}
setSelectedOverlay={setOverlayId} // Fixed: Use setOverlayId
setBackgroundDirection={setBackgroundDirection}
setStandDirection={setStandDirection}
setOverlayDirection={setOverlayDirection}
/>}
</Column>
);
}
};