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

🆙 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; minRank: number;
isAmbassadorOnly: boolean; isAmbassadorOnly: boolean;
selectable: boolean; selectable: boolean;
AvatarDirection: number;
} }
interface BackgroundsViewProps { interface BackgroundsViewProps {
@ -20,6 +21,9 @@ interface BackgroundsViewProps {
setSelectedStand: Dispatch<SetStateAction<number>>; setSelectedStand: Dispatch<SetStateAction<number>>;
selectedOverlay: number; selectedOverlay: number;
setSelectedOverlay: Dispatch<SetStateAction<number>>; setSelectedOverlay: Dispatch<SetStateAction<number>>;
setBackgroundDirection: Dispatch<SetStateAction<number>>;
setStandDirection: Dispatch<SetStateAction<number>>;
setOverlayDirection: Dispatch<SetStateAction<number>>;
} }
const TABS = ['backgrounds', 'stands', 'overlays'] as const; const TABS = ['backgrounds', 'stands', 'overlays'] as const;
@ -32,7 +36,10 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
selectedStand, selectedStand,
setSelectedStand, setSelectedStand,
selectedOverlay, selectedOverlay,
setSelectedOverlay setSelectedOverlay,
setBackgroundDirection,
setStandDirection,
setOverlayDirection
}) => { }) => {
const [activeTab, setActiveTab] = useState<TabType>('backgrounds'); const [activeTab, setActiveTab] = useState<TabType>('backgrounds');
const { roomSession } = useRoom(); const { roomSession } = useRoom();
@ -52,7 +59,12 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador; const ambassadorEligible = !item.isAmbassadorOnly || userData.isAmbassador;
return item.isHcOnly || (meetsRank && ambassadorEligible); 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]); }, [userData]);
const allData = useMemo(() => ({ const allData = useMemo(() => ({
@ -64,14 +76,45 @@ export const BackgroundsView: FC<BackgroundsViewProps> = ({
const handleSelection = useCallback((id: number) => { const handleSelection = useCallback((id: number) => {
if (!roomSession) return; 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); setters[activeTab](id);
directionSetters[activeTab](selectedItem.AvatarDirection);
const newValues = { ...currentValues, [activeTab]: id }; const newValues = { ...currentValues, [activeTab]: id };
roomSession.sendBackgroundMessage(newValues.backgrounds, newValues.stands, newValues.overlays); 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) => ( const renderItem = useCallback((item: ItemData, type: string) => (
<Flex <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 { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
import { BackgroundsView } from '../../../../backgrounds/BackgroundsView'; import { BackgroundsView } from '../../../../backgrounds/BackgroundsView';
interface InfoStandWidgetUserViewProps interface InfoStandWidgetUserViewProps {
{
avatarInfo: AvatarInfoUser; avatarInfo: AvatarInfoUser;
setAvatarInfo: Dispatch<SetStateAction<AvatarInfoUser>>; setAvatarInfo: Dispatch<SetStateAction<AvatarInfoUser>>;
onClose: () => void; onClose: () => void;
} }
export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props => export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props => {
{
const { avatarInfo = null, setAvatarInfo = null, onClose = null } = props; const { avatarInfo = null, setAvatarInfo = null, onClose = null } = props;
const [motto, setMotto] = useState<string>(null); const [motto, setMotto] = useState<string>(null);
const [isEditingMotto, setIsEditingMotto] = useState(false); const [isEditingMotto, setIsEditingMotto] = useState(false);
@ -25,45 +23,47 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
const [backgroundId, setBackgroundId] = useState<number>(null); const [backgroundId, setBackgroundId] = useState<number>(null);
const [standId, setStandId] = useState<number>(null); const [standId, setStandId] = useState<number>(null);
const [overlayId, setOverlayId] = 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 [isVisible, setIsVisible] = useState(false);
const infostandBackgroundClass = `background-${backgroundId}`; const infostandBackgroundClass = `background-${backgroundId}`;
const infostandStandClass = `stand-${standId}`; const infostandStandClass = `stand-${standId}`;
const infostandOverlayClass = `overlay-${overlayId}`; 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; if (!isEditingMotto || (motto.length > GetConfiguration<number>('motto.max.length', 38))) return;
roomSession.sendMottoMessage(motto); roomSession.sendMottoMessage(motto);
setIsEditingMotto(false); setIsEditingMotto(false);
} };
const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value); const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value);
const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) => const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
{
event.stopPropagation(); event.stopPropagation();
switch(event.key) switch (event.key) {
{
case 'Enter': case 'Enter':
saveMotto((event.target as HTMLInputElement).value); saveMotto((event.target as HTMLInputElement).value);
return; return;
} }
} };
useRoomSessionManagerEvent<RoomSessionUserBadgesEvent>(RoomSessionUserBadgesEvent.RSUBE_BADGES, event => useRoomSessionManagerEvent<RoomSessionUserBadgesEvent>(RoomSessionUserBadgesEvent.RSUBE_BADGES, event => {
{
if (!avatarInfo || (avatarInfo.webID !== event.userId)) return; if (!avatarInfo || (avatarInfo.webID !== event.userId)) return;
const oldBadges = avatarInfo.badges.join(''); const oldBadges = avatarInfo.badges.join('');
if (oldBadges === event.badges.join('')) return; if (oldBadges === event.badges.join('')) return;
setAvatarInfo(prevValue => setAvatarInfo(prevValue => {
{
const newValue = CloneObject(prevValue); const newValue = CloneObject(prevValue);
newValue.badges = event.badges; 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; if (!avatarInfo || (avatarInfo.roomIndex !== event.roomIndex)) return;
setAvatarInfo(prevValue => setAvatarInfo(prevValue => {
{
const newValue = CloneObject(prevValue); const newValue = CloneObject(prevValue);
newValue.figure = event.figure; newValue.figure = event.figure;
@ -89,27 +87,37 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
return newValue; 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; if (!avatarInfo || (avatarInfo.roomIndex !== event.roomIndex)) return;
setAvatarInfo(prevValue => setAvatarInfo(prevValue => {
{
const newValue = CloneObject(prevValue); const newValue = CloneObject(prevValue);
const clearGroup = ((event.status === -1) || (event.habboGroupId <= 0)); const clearGroup = ((event.status === -1) || (event.habboGroupId <= 0));
newValue.groupId = clearGroup ? -1 : event.habboGroupId; 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); newValue.groupBadgeId = clearGroup ? null : GetSessionDataManager().getGroupBadge(event.habboGroupId);
return newValue; return newValue;
}); });
}); });
useMessageEvent<RelationshipStatusInfoEvent>(RelationshipStatusInfoEvent, event => useMessageEvent<RelationshipStatusInfoEvent>(RelationshipStatusInfoEvent, event => {
{
const parser = event.getParser(); const parser = event.getParser();
if (!avatarInfo || (avatarInfo.webID !== parser.userId)) return; if (!avatarInfo || (avatarInfo.webID !== parser.userId)) return;
@ -117,25 +125,39 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
setRelationships(parser); setRelationships(parser);
}); });
useEffect(() => useEffect(() => {
{
setIsEditingMotto(false); setIsEditingMotto(false);
setMotto(avatarInfo.motto); setMotto(avatarInfo.motto);
setBackgroundId(avatarInfo.backgroundId); setBackgroundId(avatarInfo.backgroundId);
setStandId(avatarInfo.standId); setStandId(avatarInfo.standId);
setOverlayId(avatarInfo.overlayId); 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)); SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID));
return () => return () => {
{
setIsEditingMotto(false); setIsEditingMotto(false);
setMotto(null); setMotto(null);
setRelationships(null); setRelationships(null);
setBackgroundId(null); setBackgroundId(null);
setStandId(null); setStandId(null);
setOverlayId(null); setOverlayId(null);
} setBackgroundDirection(2);
setStandDirection(2);
setOverlayDirection(2);
};
}, [avatarInfo]); }, [avatarInfo]);
if (!avatarInfo) return null; if (!avatarInfo) return null;
@ -157,12 +179,13 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<Flex gap={1}> <Flex gap={1}>
<Column position="relative" pointer fullWidth className={`body-image profile-background ${infostandBackgroundClass}`} onClick={event => GetUserProfile(avatarInfo.webID)}> <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}`} /> <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}`} /> <Base position="absolute" className={`body-image profile-overlay ${infostandOverlayClass}`} />
{avatarInfo.type === AvatarInfoUser.OWN_USER && {avatarInfo.type === AvatarInfoUser.OWN_USER &&
<Base position="absolute" className="icon edit-icon edit-icon-position" onClick={ event => <Base position="absolute" className="icon edit-icon edit-icon-position" onClick={event => {
{ event.stopPropagation(); setIsVisible(prevValue => !prevValue); } } event.stopPropagation();
/> setIsVisible(prevValue => !prevValue);
}} />
} }
</Column> </Column>
<Column grow alignItems="center" gap={0}> <Column grow alignItems="center" gap={0}>
@ -206,7 +229,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
<FaPencilAlt className="small fa-icon" /> <FaPencilAlt className="small fa-icon" />
<Flex grow alignItems="center" className="motto-content"> <Flex grow alignItems="center" className="motto-content">
{!isEditingMotto && {!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 && {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} />} <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> </Flex>
@ -243,9 +266,11 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
selectedStand={standId} selectedStand={standId}
setSelectedStand={setStandId} setSelectedStand={setStandId}
selectedOverlay={overlayId} selectedOverlay={overlayId}
setSelectedOverlay={ setOverlayId } setSelectedOverlay={setOverlayId} // Fixed: Use setOverlayId
/> setBackgroundDirection={setBackgroundDirection}
} setStandDirection={setStandDirection}
setOverlayDirection={setOverlayDirection}
/>}
</Column> </Column>
); );
} };