chats-script.js - master - MM_Designer/MySlavesTEST

chats-script.js
401 строка15 KB
MM_Designer
upload files
26 сен 2025, 21:43
26 сен 2025, 21:43cda51ee
// Sample data for chats and messages
const chatUsers = [
    { name: 'Максим Максимов', avatar: 'https://images.unsplash.com/photo-1724435811349-32d27f4d5806?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZXJzb24lMjBhdmF0YXIlMjBwcm9maWxlfGVufDF8fHx8MTc1NzczMzYxOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral' },
    { name: 'Алексей Петров', avatar: 'https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZXJzb24lMjBhdmF0YXIlMjBwcm9maWxlfGVufDF8fHx8MTc1NzczMzYxOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral' },
    { name: 'Дмитрий Смирнов', avatar: 'https://images.unsplash.com/photo-1614027164847-1b28cfe1df60?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxwZXJzb24lMjBhdmF0YXIlMjBwcm9maWxlfGVufDF8fHx8MTc1NzczMzYxOHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral' },
    { name: 'Поддержка', avatar: 'https://images.unsplash.com/photo-1551287373-ddff50e12c27?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxzdXBwb3J0JTIwYXZhdGFyfGVufDB8fHx8MTY5NzA0MDAwMHww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral' }
];

const generalMessages = [
    { type: 'own', text: 'Да что ты говоришь?', time: '14:23', status: 'read' },
    { type: 'other', user: 'Алексей Петров', text: 'Да я тебе отвечаю!', time: '14:24', status: 'sent' },
    { type: 'other', user: 'Алексей Петров', text: 'Он с софтом', time: '14:24', status: 'sent' },
    { type: 'other', user: 'Алексей Петrov', text: 'У него скорость бешенная скупки', time: '14:25', status: 'sent' },
    { type: 'other', user: 'Дмитрий Смирнов', text: 'Вы про кого?', time: '14:26', status: 'sent' },
    { type: 'own', text: 'Да про Максима Максимова', time: '14:27', status: 'read' },
    { type: 'own', text: 'Тип он софт', time: '14:27', status: 'read' },
    { type: 'other', user: 'Алексей Петров', text: 'Я тебе зуб даю бля', time: '14:28', status: 'sent' },
    { type: 'other', user: 'Алексей Петров', text: 'Ой...', time: '14:28', status: 'sent' },
    { type: 'other', user: 'Алексей Петров', text: 'ХАХАХАХАХАХА', time: '14:29', status: 'sent' },
    { type: 'other', user: 'Алексей Петров', text: 'Не надо так брат)', time: '14:29', status: 'sent' },
    { type: 'own', text: '...', time: '14:30', status: 'delivered' }
];

const supportMessages = [
    { type: 'other', user: 'Поддержка', text: 'Здравствуйте! Как дела в игре?', time: '10:00', status: 'sent' },
    { type: 'own', text: 'Привет! Всё хорошо, спасибо!', time: '10:05', status: 'read' },
    { type: 'other', user: 'Поддержка', text: 'Если возникнут вопросы, обращайтесь!', time: '10:06', status: 'sent' },
    { type: 'own', text: 'Обязательно, спасибо за поддержку!', time: '10:10', status: 'read' }
];

const privateChatsList = [
    { name: 'Максим Максимов', lastMessage: 'Привет, как дела?', time: '15:30', unread: 2 },
    { name: 'Анна Иванова', lastMessage: 'Увидимся завтра', time: '14:45', unread: 0 },
    { name: 'Сергей Козлов', lastMessage: 'Отлично поиграли!', time: '13:20', unread: 1 },
    { name: 'Елена Волкова', lastMessage: 'Спасибо за помощь', time: '12:15', unread: 0 },
    { name: 'Игорь Морозов', lastMessage: 'До встречи в игре', time: '11:30', unread: 5 }
];

// Current active tab
let activeTab = 'general';

// Initialize the app
document.addEventListener('DOMContentLoaded', function() {
    initializeTabs();
    generateGeneralChat();
    generateSupportChat();
    generateAllChatsList();
    
    // Add enter key listener for message input
    const messageInput = document.getElementById('messageInput');
    messageInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            sendMessage();
        }
    });
    
    // Add scroll to bottom for active chat
    scrollToBottom();
});

// Initialize tab functionality
function initializeTabs() {
    const tabs = document.querySelectorAll('.tab');
    
    tabs.forEach(tab => {
        tab.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            switchTab(tabName);
        });
    });
}

// Switch between tabs
function switchTab(tabName) {
    activeTab = tabName;
    
    // Update active tab
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });
    document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
    
    // Update active content
    document.querySelectorAll('.tab-content').forEach(content => {
        content.classList.remove('active');
    });
    document.getElementById(`${tabName}Content`).classList.add('active');
    
    // Scroll to bottom of new chat
    setTimeout(scrollToBottom, 100);
}

// Create message status icons
function createMessageStatus(status) {
    if (status === 'sent') {
        return `
            <div class="message-status">
                <svg class="check-mark single" viewBox="0 0 12 8" fill="none">
                    <path d="M1 4L4 7L11 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        `;
    } else if (status === 'delivered') {
        return `
            <div class="message-status">
                <svg width="14px" height="14px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2 12L7.25 17C7.25 17 8.66939 15.3778 9.875 14" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M8 12L13.25 17L22 7" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 7L12.5 11" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        `;
    } else if (status === 'read') {
        return `
            <div class="message-status">
                <svg class="check-mark double" viewBox="0 0 16 8" fill="none" style="color: #10b981;">
                    <path d="M1 4L4 7L7 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M5 4L8 7L15 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
        `;
    }
    return '';
}

// Create message bubble
function createMessageBubble(message) {
    const isOwn = message.type === 'own';
    const userAvatar = isOwn ? '' : `
        <div class="message-avatar">
            <img src="${getUserAvatar(message.user)}" alt="${message.user}">
        </div>
    `;
    
    const statusIcon = isOwn ? createMessageStatus(message.status) : '';
    
    return `
        <div class="message-row ${isOwn ? 'own' : 'other'}">
            ${!isOwn ? userAvatar : ''}
            <div class="messages-column ${isOwn ? 'own' : 'other'}">
                <div class="message-bubble ${isOwn ? 'own' : 'other'}">
                    <div class="message-content">${message.text}</div>
                </div>
                <div class="message-meta ${isOwn ? 'own' : 'other'}">
                    <span class="message-time">${message.time}</span>
                    ${statusIcon}
                </div>
            </div>
        </div>
    `;
}

// Get user avatar
function getUserAvatar(username) {
    const user = chatUsers.find(u => u.name === username);
    return user ? user.avatar : chatUsers[0].avatar;
}

// Group consecutive messages from same user
function groupMessages(messages) {
    const groups = [];
    let currentGroup = [];
    let lastUser = null;
    
    messages.forEach(message => {
        const messageUser = message.type === 'own' ? 'own' : message.user;
        
        if (messageUser !== lastUser && currentGroup.length > 0) {
            groups.push(currentGroup);
            currentGroup = [];
        }
        
        currentGroup.push(message);
        lastUser = messageUser;
    });
    
    if (currentGroup.length > 0) {
        groups.push(currentGroup);
    }
    
    return groups;
}

// Generate general chat messages
function generateGeneralChat() {
    const messagesList = document.getElementById('generalMessages');
    const messageGroups = groupMessages(generalMessages);
    
    let messagesHTML = '';
    
    messageGroups.forEach(group => {
        let groupHTML = '<div class="message-group">';
        
        group.forEach(message => {
            groupHTML += createMessageBubble(message);
        });
        
        groupHTML += '</div>';
        messagesHTML += groupHTML;
    });
    
    messagesList.innerHTML = messagesHTML;
}

// Generate support chat messages
function generateSupportChat() {
    const messagesList = document.getElementById('supportMessages');
    const messageGroups = groupMessages(supportMessages);
    
    let messagesHTML = '';
    
    messageGroups.forEach(group => {
        let groupHTML = '<div class="message-group">';
        
        group.forEach(message => {
            groupHTML += createMessageBubble(message);
        });
        
        groupHTML += '</div>';
        messagesHTML += groupHTML;
    });
    
    messagesList.innerHTML = messagesHTML;
}

// Generate all chats list
function generateAllChatsList() {
    const chatsList = document.getElementById('allChats');
    let chatsHTML = '';
    
    privateChatsList.forEach(chat => {
        const unreadBadge = chat.unread > 0 ? `<div class="chat-unread">${chat.unread}</div>` : '';
        
        chatsHTML += `
            <div class="chat-item" onclick="openPrivateChat('${chat.name}')">
                <div class="chat-avatar">
                    <img src="${getUserAvatar(chat.name)}" alt="${chat.name}">
                </div>
                <div class="chat-info">
                    <div class="chat-name">${chat.name}</div>
                    <div class="chat-last-message">${chat.lastMessage}</div>
                </div>
                <div class="chat-meta">
                    <div class="chat-time">${chat.time}</div>
                    ${unreadBadge}
                </div>
            </div>
        `;
    });
    
    chatsList.innerHTML = chatsHTML;
}

// Send message function
function sendMessage() {
    const input = document.getElementById('messageInput');
    const messageText = input.value.trim();
    
    if (!messageText) return;
    
    const currentTime = new Date().toLocaleTimeString('ru-RU', { 
        hour: '2-digit', 
        minute: '2-digit' 
    });
    
    const newMessage = {
        type: 'own',
        text: messageText,
        time: currentTime,
        status: 'sent'
    };
    
    // Add message to appropriate chat
    if (activeTab === 'general') {
        generalMessages.push(newMessage);
        generateGeneralChat();
    } else if (activeTab === 'support') {
        supportMessages.push(newMessage);
        generateSupportChat();
    }
    
    // Clear input
    input.value = '';
    
    // Scroll to bottom
    setTimeout(scrollToBottom, 100);
    
    // Show notification
    showNotification('Сообщение отправлено');
    
    // Simulate message status change
    setTimeout(() => {
        newMessage.status = 'delivered';
        if (activeTab === 'general') {
            generateGeneralChat();
        } else if (activeTab === 'support') {
            generateSupportChat();
        }
        setTimeout(scrollToBottom, 100);
    }, 1000);
    
    setTimeout(() => {
        newMessage.status = 'read';
        if (activeTab === 'general') {
            generateGeneralChat();
        } else if (activeTab === 'support') {
            generateSupportChat();
        }
        setTimeout(scrollToBottom, 100);
    }, 3000);
}

// Scroll to bottom of chat
function scrollToBottom() {
    const chatContainer = document.querySelector('.chat-container');
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

// Handle attachment button
function handleAttach() {
    showNotification('Функция прикрепления файлов в разработке');
}

// Open private chat
function openPrivateChat(chatName) {
    showNotification(`Открытие чата с ${chatName}`);
}

// Go back function
function goBack() {
    // Try to go back in history, otherwise go to main page
    if (document.referrer && document.referrer !== window.location.href) {
        window.history.back();
    } else {
        window.location.href = 'index.html';
    }
}

// Show help
function showHelp() {
    showNotification('Правила чата: будьте вежливы, не спамьте, соблюдайте правила игры!');
}

// Show notification
function showNotification(message) {
    const notification = document.createElement('div');
    notification.style.cssText = `
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #0f172a;
        color: white;
        padding: 12px 16px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Inter', sans-serif;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        max-width: 250px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    `;

    notification.textContent = message;
    document.body.appendChild(notification);

    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);

    setTimeout(() => {
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, 3000);
}

// Add typing animation when user starts typing
let typingTimer;
const messageInput = document.getElementById('messageInput');

if (messageInput) {
    messageInput.addEventListener('input', function() {
        clearTimeout(typingTimer);
        // Could add typing indicator here
        
        typingTimer = setTimeout(() => {
            // Remove typing indicator
        }, 1000);
    });
}

// Global functions
window.switchTab = switchTab;
window.sendMessage = sendMessage;
window.handleAttach = handleAttach;
window.openPrivateChat = openPrivateChat;
window.goBack = goBack;
window.showHelp = showHelp;