user color bug fix

This commit is contained in:
2025-09-17 16:51:40 +05:30
parent 3246005789
commit 7bc049145f
4 changed files with 10 additions and 10 deletions

View File

@@ -45,7 +45,7 @@ const Header: React.FC = () => {
// Set the selected user in the store // Set the selected user in the store
setSelectedUser({ setSelectedUser({
color: getAvatarColor(index, user.userName), color: getAvatarColor(index, user.userId),
name: user.userName, name: user.userName,
id: user.id, id: user.id,
location: { position, rotation, target }, location: { position, rotation, target },
@@ -93,7 +93,7 @@ const Header: React.FC = () => {
id="user-profile-button" id="user-profile-button"
key={`${index}-${user.userName}`} key={`${index}-${user.userName}`}
className="user-profile" className="user-profile"
style={{ background: getAvatarColor(index, user.userName) }} style={{ background: getAvatarColor(index, user.userId) }}
onClick={() => { onClick={() => {
handleUserFollow(user, index); handleUserFollow(user, index);
}} }}

View File

@@ -200,7 +200,7 @@ const Messages: React.FC<MessageProps> = ({ val, i, setMessages, mode, setIsEdit
</div> </div>
) : ( ) : (
<div className="message-container"> <div className="message-container">
<div className="profile" style={{ background: getAvatarColor(i, userName) }}> <div className="profile" style={{ background: getAvatarColor(i, userId) }}>
{userName?.charAt(0).toUpperCase() || "user"} {userName?.charAt(0).toUpperCase() || "user"}
</div> </div>
<div className="content"> <div className="content">

View File

@@ -63,7 +63,7 @@ const CamModel = ({ user, model, index }: { user: CollabUsersScheme; model: THRE
userImage={""} userImage={""}
userName={user.userName} userName={user.userName}
id={user.userId} id={user.userId}
color={getAvatarColor(index, user.userName)} color={getAvatarColor(index, user.userId)}
position={user.camData.position} position={user.camData.position}
rotation={user.camData.rotation} rotation={user.camData.rotation}
target={user.camData.target} target={user.camData.target}

View File

@@ -22,16 +22,16 @@ const avatarColors: string[] = [
"#2FAFAF", // Teal "#2FAFAF", // Teal
]; ];
export function getAvatarColor(index: number, name?: string): string { export function getAvatarColor(index: number, userId?: string): string {
// Check if the color is already stored in localStorage // Check if the color is already stored in localStorage
const localStorageKey = "userAvatarColors"; const localStorageKey = "userAvatarColors";
// Check if local storage is available // Check if local storage is available
if (name) { if (userId) {
let userColors = JSON.parse(localStorage.getItem(localStorageKey) ?? "{}"); let userColors = JSON.parse(localStorage.getItem(localStorageKey) ?? "{}");
// Check if the user already has an assigned color // Check if the user already has an assigned color
if (userColors[name]) { if (userColors[userId]) {
return userColors[name]; return userColors[userId];
} }
// Find a new color not already assigned // Find a new color not already assigned
@@ -43,7 +43,7 @@ export function getAvatarColor(index: number, name?: string): string {
? availableColors[0] ? availableColors[0]
: avatarColors[index % avatarColors.length]; : avatarColors[index % avatarColors.length];
userColors[name] = assignedColor; userColors[userId] = assignedColor;
// Save back to local storage // Save back to local storage
localStorage.setItem(localStorageKey, JSON.stringify(userColors)); localStorage.setItem(localStorageKey, JSON.stringify(userColors));
@@ -51,6 +51,6 @@ export function getAvatarColor(index: number, name?: string): string {
return assignedColor; return assignedColor;
} }
// Fallback: Assign a color using the index if no name or local storage is unavailable // Fallback: Assign a color using the index if no userId or local storage is unavailable
return avatarColors[index % avatarColors.length]; return avatarColors[index % avatarColors.length];
} }