user color bug fix
This commit is contained in:
@@ -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);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
@@ -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];
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user