Untitled

avatar
unknown
javascript
2 years ago
12 kB
10
Indexable
// Add styles for hover effects dynamically to the head
const newChatUserListStyles = document.createElement('style');

// Apply class to the style element
newChatUserListStyles.classList.add('new_chat_user_list');

newChatUserListStyles.innerHTML = `
    .chat-user-list {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 20px;
        background-color: #282B2F;
    }

    .chat-user-list [class^="user"] {
        display: inline-flex;
        margin: 2px 0;
    }

    .chat-user-list .avatar {
        width: 24px;
        height: 24px;
        display: inline-flex;
    }
    .chat-user-list .avatar:not([src^="data:image/svg+xml"]):hover {
        transform: scale(2);
    }

    .chat-user-list .name {
        text-decoration: none;
        display: inline-flex;
        width: auto;
        height: 24px;
        line-height: 24px;
        padding: 0 8px;
    }
    .chat-user-list .name:hover {
        text-decoration: underline;
    }
    .chat-user-list .name, .avatar:not([src^="data:image/svg+xml"]) {
        transition: filter 0.3s, transform 0.3s;
    }

    .chat-user-list .profile {
        display: inline-flex;
        width: 24px;
        height: 24px;
        justify-content: center;
        align-items: center;
    }
`;

head.appendChild(newChatUserListStyles);

// Function to get status title from API or local storage cache
function getStatusTitle(userId) {
    return new Promise((resolve, reject) => {
        const cachedUserInfo = JSON.parse(localStorage.getItem('fetchedUsers')) || {};

        if (cachedUserInfo[userId]) {
            resolve(cachedUserInfo[userId].statusTitle);
        } else {
            const apiUrl = `https://klavogonki.ru/api/profile/get-summary?id=${userId}`;

            fetch(apiUrl)
                .then(response => {
                    if (response.ok) {
                        return response.json();
                    }
                    throw new Error('Network response was not ok.');
                })
                .then(data => {
                    if (data && data.title) {
                        cachedUserInfo[userId] = {
                            statusTitle: data.title,
                            // Add other user-related information here
                        };
                        localStorage.setItem('fetchedUsers', JSON.stringify(cachedUserInfo));
                        resolve(data.title);
                    } else {
                        throw new Error('Invalid data format received from the API.');
                    }
                })
                .catch(error => {
                    console.error(`Error fetching status title for user ${userId}:`, error);
                    reject(error);
                });
        }
    });
}

// Function to get rank color based on status title
function getRankColor(statusTitle) {
    const statusColors = {
        'Экстракибер': '#06B4E9', // Light Blue
        'Кибергонщик': '#3864E6', // Medium Blue
        'Супермен': '#7A1FAE', // Purple
        'Маньяк': '#DA0543', // Red
        'Гонщик': '#FF8C00', // Orange
        'Профи': '#C1AA00', // Yellow
        'Таксист': '#2DAB4F', // Green
        'Любитель': '#61B5B3', // Light Cyan
        'Новичок': '#AFAFAF' // Grey
    };

    return statusColors[statusTitle] || '#000000'; // Default to black color if status title not found
}

// Function to get rank class based on status title in English
function getRankClass(statusTitle) {
    const statusClasses = {
        'Экстракибер': 'extra_cyber',
        'Кибергонщик': 'cyber_racer',
        'Супермен': 'superman',
        'Маньяк': 'maniac',
        'Гонщик': 'racer',
        'Профи': 'pro',
        'Таксист': 'driver',
        'Любитель': 'amateur',
        'Новичок': 'newbie'
    };

    return statusClasses[statusTitle] || 'unknown'; // Default to 'unknown' class if status title not found
}


// Function to handle private message
function insertPrivate(userId) {
    const userName = document.querySelector(`.name[data-user="${userId}"]`).textContent;
    const message = `<${userName}>`;

    const textElement = document.querySelector('.messages .text');
    textElement.value = message;

    textElement.focus();
    textElement.selectionEnd = textElement.value.length;

    console.log(`Setting private message to: ${message}`);
}

// Inline SVG source for the "info" icon
const infoSVG = `
<svg xmlns="http://www.w3.org/2000/svg" 
     width="14" 
     height="14" 
     viewBox="0 0 24 24" 
     fill="none" 
     stroke="lightgray" 
     stroke-width="2" 
     stroke-linecap="round" 
     stroke-linejoin="round" 
     class="feather feather-info">
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="12" y1="16" x2="12" y2="12"></line>
    <line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>`;

// Inline SVG source for the "meh" icon
const mehSVG = `
<svg xmlns="http://www.w3.org/2000/svg" 
     width="24" 
     height="24" 
     viewBox="0 0 24 24" 
     fill="none" 
     stroke="lightgray" 
     stroke-width="1.4" 
     stroke-linecap="round" 
     stroke-linejoin="round" 
     class="feather feather-meh">
    <circle cx="12" cy="12" r="10"></circle>
    <line x1="8" y1="15" x2="16" y2="15"></line>
    <line x1="9" y1="9" x2="9.01" y2="9"></line>
    <line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>`;

// Array to store user IDs and their status titles
const fetchedUsers = JSON.parse(localStorage.getItem('fetchedUsers')) || {};

// Function to create a new user element
function createUserElement(userId, statusTitle, userName) {
    const bigAvatarUrl = `/storage/avatars/${userId}_big.png`;

    const newUserElement = document.createElement('div');
    const rankClass = getRankClass(statusTitle);
    newUserElement.classList.add(`user${userId}`, rankClass); // Assign the rank class

    const newAvatarElement = document.createElement('img');
    newAvatarElement.classList.add('avatar');
    newAvatarElement.src = bigAvatarUrl;

    newAvatarElement.addEventListener('error', function () {
        this.src = `data:image/svg+xml;utf8,${encodeURIComponent(mehSVG)}`;
    });

    const newNameElement = document.createElement('a');
    newNameElement.classList.add('name');
    newNameElement.title = 'Написать в приват';
    newNameElement.dataset.user = userId;
    newNameElement.textContent = userName;

    const rankColor = getRankColor(statusTitle);
    newNameElement.style.setProperty('color', rankColor, 'important');

    const newProfileElement = document.createElement('a');
    newProfileElement.classList.add('profile');
    newProfileElement.title = 'Профиль';
    newProfileElement.target = '_blank';
    newProfileElement.href = `/profile/${userId}/`;

    const newProfileImageElement = document.createElement('img');
    newProfileImageElement.src = `data:image/svg+xml;utf8,${encodeURIComponent(infoSVG)}`;

    newNameElement.addEventListener('click', function () {
        insertPrivate(userId);
    });

    newUserElement.appendChild(newAvatarElement);
    newUserElement.appendChild(newNameElement);
    newProfileElement.appendChild(newProfileImageElement);
    newUserElement.appendChild(newProfileElement);

    return newUserElement;
}

// Function to refresh the user list
function refreshUserList() {
    // Get the original user list container
    const originalUserListContainer = document.querySelector('.userlist-content');

// Get or create the user list container
let userListContainer = document.querySelector('.chat-user-list');
if (!userListContainer) {
    userListContainer = document.createElement('div');
    userListContainer.classList.add('chat-user-list');

    // Find the element with the class "userlist"
    const userlistElement = document.querySelector('.userlist');

    // Append the userListContainer to the userlistElement if found
    if (userlistElement) {
        userlistElement.appendChild(userListContainer);
    }
}

    // Define the rank order
    const rankOrder = ['extra_cyber', 'cyber_racer', 'superman', 'maniac', 'racer', 'pro', 'driver', 'amateur', 'newbie'];

    // Create an object to store subparent elements for each rank class
    const rankSubparents = {};

    // Check if subparent elements already exist, if not, create them
    rankOrder.forEach(rankClass => {
        const existingSubparent = userListContainer.querySelector(`.rank-group-${rankClass}`);
        if (!existingSubparent) {
            rankSubparents[rankClass] = document.createElement('div');
            rankSubparents[rankClass].classList.add(`rank-group-${rankClass}`);
            // rankSubparents[rankClass].style.marginTop = '5px';
            userListContainer.appendChild(rankSubparents[rankClass]);
        } else {
            rankSubparents[rankClass] = existingSubparent;
        }
    });

    // Iterate over each rank group and set display to flex
    Object.values(rankSubparents).forEach(rankGroup => {
        rankGroup.style.display = 'flex';
        rankGroup.style.flexDirection = 'column'; // Adjust as needed
    });

    // Create a set to store existing user IDs in the updated user list
    const existingUserIds = new Set();

    // Iterate over each user element in the original user list
    originalUserListContainer.querySelectorAll('ins').forEach(userElement => {
        const nameElement = userElement.querySelector('.name');
        const userId = nameElement.getAttribute('data-user');
        const userName = nameElement.textContent;

        // Check if the user already exists in the updated user list
        if (!existingUserIds.has(userId)) {
            if (!fetchedUsers[userId]) {
                getStatusTitle(userId)
                    .then(statusTitle => {
                        fetchedUsers[userId] = { statusTitle };
                        localStorage.setItem('fetchedUsers', JSON.stringify(fetchedUsers));
                        const newUserElement = createUserElement(userId, statusTitle, userName);
                        const rankClass = getRankClass(statusTitle);

                        // Add the user to the corresponding rank group
                        rankSubparents[rankClass].appendChild(newUserElement);

                        // Update existing user IDs
                        existingUserIds.add(userId);
                    })
                    .catch(error => {
                        console.error(`Error fetching status title for user ${userId}:`, error);
                    });
            } else {
                // If the user exists, ensure the element exists and update existing user IDs
                const statusTitle = fetchedUsers[userId].statusTitle;
                const rankClass = getRankClass(statusTitle);

                // Check if the user element already exists
                const existingUserElement = userListContainer.querySelector(`.user${userId}.${rankClass}`);
                if (!existingUserElement) {
                    const newUserElement = createUserElement(userId, statusTitle, userName);

                    // Add the user to the corresponding rank group
                    rankSubparents[rankClass].appendChild(newUserElement);
                }

                // Update existing user IDs
                existingUserIds.add(userId);
            }
        }
    });

// Remove any existing user elements that are not present in the updated user list
userListContainer.querySelectorAll('.chat-user-list [class^="user"]').forEach(userElement => {
    const userId = userElement.querySelector('.name').getAttribute('data-user');
    if (!existingUserIds.has(userId)) {
        userElement.remove();
    }
});

}

// Call the refreshUserList function
refreshUserList();
Editor is loading...
Leave a Comment