Chat_W3.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        #chat-box {
            width: 70%;
            max-height: 400px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            padding: 10px;
            float: left;
            clear: both;
        }

        #controls {
            width: 30%;
            padding: 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #message-controls {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #emoji-list {
            display: none;
            flex-wrap: wrap;
            gap: 5px;
            padding-top: 10px;
            border-top: 1px solid #ccc;
            position: absolute;
            background-color: white;
            z-index: 1;
        }

        .emoji {
            cursor: pointer;
            width: 20px;
            height: 20px;
        }

        .chat-message {
            margin-bottom: 5px;
        }

        .username-label {
            cursor: pointer;
            text-decoration: underline;
        }

        .user-options {
            display: none;
            flex-direction: column;
            gap: 10px;
            position: absolute;
            background-color: white;
            z-index: 1;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>Emoji Chat</h1>
    <div id="chat-box"></div>
    <div id="controls">
        <div id="message-controls">
            <textarea id="message-input" rows="5" cols="40" placeholder="Message"></textarea>
            <button id="emoji-button">Emojis</button>
            <button onclick="sendMessage()">Envoyer</button>
            <textarea id="username" placeholder="Nom d'utilisateur"></textarea>
            <select id="user-list" size="5"></select>
            <button id="delete-button" onclick="deleteConfig()">Supprimer la configuration</button>
        </div>

    <div id="emoji-list"></div>
    <div id="admin-controls" style="display: none;">
        <h2>Exclure un Utilisateur</h2>
        <label for="usernameExclude">Nom d'utilisateur à exclure :</label>
        <input type="text" id="usernameExclude">
        <button id="exclude-button">Exclure</button>

        <h2>Vérifier et Supprimer les Exclusions</h2>
        <label for="usernameCheck">Nom d'utilisateur :</label>
        <input type="text" id="usernameCheck">
        <button id="check-button">Vérifier</button>
        <div id="result"></div>
        <label for="excludedUsers">Utilisateurs exclus :</label>
        <select id="excludedUsers"></select>
        <button id="remove-button">Supprimer l'exclusion</button>
    </div>
</div>

    <script>
        const chatBox = document.getElementById("chat-box");
        const userList = document.getElementById("user-list");
        const usernameInput = document.getElementById("username");
        const messageInput = document.getElementById("message-input");
        const emojiButton = document.getElementById("emoji-button");
        const emojiList = document.getElementById("emoji-list");
        const deleteButton = document.getElementById("delete-button");

        const userLabel = document.createElement("label");
        userLabel.className = "username-label";
        const savedUsername = localStorage.getItem("chatUsername");
        userLabel.textContent = savedUsername || "Changer le nom d'utilisateur";
        userLabel.addEventListener("click", openUserOptions);
        document.body.insertBefore(userLabel, document.getElementById("chat-box"));

        const userOptionsContainer = document.createElement("div");
        userOptionsContainer.className = "user-options";
        userOptionsContainer.style.left = userLabel.offsetLeft + "px";
        userOptionsContainer.style.top = userLabel.offsetTop + userLabel.offsetHeight + "px";
        document.body.appendChild(userOptionsContainer);

        const emojis = ["😀", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "😉"];
        emojis.forEach(emoji => {
            const emojiElement = document.createElement("span");
            emojiElement.className = "emoji";
            emojiElement.textContent = emoji;
            emojiElement.addEventListener("click", () => insertEmoji(emoji));
            emojiList.appendChild(emojiElement);
        });

        emojiButton.addEventListener("click", toggleEmojiList);

        function toggleEmojiList() {
            emojiList.style.display = emojiList.style.display === "block" ? "none" : "block";
        }

function sendMessage() {
    const message = messageInput.value;

    if (message === "!More") {
        document.getElementById("admin-controls").style.display = "block";
        return;
    }
    if (currentUser && message) {
        const newMessage = document.createElement("div");
        newMessage.className = "chat-message";
        newMessage.innerHTML = `<strong>${currentUser}:</strong> ${message}`;
        chatBox.appendChild(newMessage);
        saveMessage(currentUser, message);
        messageInput.value = "";
  updateUserLastActive(currentUser);
    }
}


        function insertEmoji(emoji) {
            messageInput.focus();
            const startPosition = messageInput.selectionStart;
            const endPosition = messageInput.selectionEnd;
            const textBefore = messageInput.value.substring(0, startPosition);
            const textAfter = messageInput.value.substring(endPosition);
            messageInput.value = `${textBefore}${emoji}${textAfter}`;
            messageInput.setSelectionRange(startPosition + emoji.length, startPosition + emoji.length);
            emojiList.style.display = "none";
        }

        function deleteConfig() {
            localStorage.removeItem("chatUsers");
            localStorage.removeItem("chatUsername");
            localStorage.removeItem("chatMessages");
            userList.innerHTML = "";
            deleteButton.style.display = "none";
            usernameInput.style.display = "block";
            loadUserList();
        }

        function loadUserList() {
            userList.innerHTML = "";
    const onlineUsers = getOnlineUsers();
    onlineUsers.forEach(user => {
        addUserToComboBox(user);
    });
            const savedUsers = JSON.parse(localStorage.getItem("chatUsers")) || [];
            savedUsers.forEach(user => {
                addUserToComboBox(user);
            });

            if (savedUsers.length > 0) {
                deleteButton.style.display = "block";
            }
if (savedUsername) {
    userList.value = savedUsername;
}

}
let currentUser = "";

function addUserToComboBox(username) {
    const optionExists = [...userList.options].some(option => option.value === username);
    if (!optionExists) {
        const newUserOption = new Option(username, username);
        userList.appendChild(newUserOption);
    }
    currentUser = username;
}


        function saveUser(user) {
            const savedUsers = JSON.parse(localStorage.getItem("chatUsers")) || [];
            if (!savedUsers.includes(user)) {
                savedUsers.push(user);
                localStorage.setItem("chatUsers", JSON.stringify(savedUsers));
                loadUserList();
            }
        }

        if (savedUsername) {
            usernameInput.style.display = "none";
            saveUser(savedUsername);
        }

        usernameInput.addEventListener("blur", () => {
            const newUsername = usernameInput.value.trim();
            if (newUsername) {
                usernameInput.style.display = "none";
                saveUser(newUsername);
                localStorage.setItem("chatUsername", newUsername);
                userLabel.textContent = newUsername;
            }
        });

        loadMessages();

function loadMessages() {
    chatBox.innerHTML = ''; // Vider la boîte de chat
    const savedMessages = JSON.parse(localStorage.getItem("chatMessages")) || {};
    Object.keys(savedMessages).forEach(user => {
        savedMessages[user].forEach(message => {
            const newMessage = document.createElement("div");
            newMessage.className = "chat-message";
            newMessage.innerHTML = `<strong>${user}:</strong> ${message}`;
            chatBox.appendChild(newMessage);
        });
    });
}


        function saveMessage(user, message) {
            const savedMessages = JSON.parse(localStorage.getItem("chatMessages")) || {};
            if (!savedMessages[user]) {
                savedMessages[user] = [];
            }
            savedMessages[user].push(message);
            localStorage.setItem("chatMessages", JSON.stringify(savedMessages));
        }

        loadUserList();

        function openUserOptions() {
            userOptionsContainer.style.display = "block";
            const setUsernameOption = document.createElement("button");
            setUsernameOption.textContent = "Changer le nom d'utilisateur";
            setUsernameOption.addEventListener("click", changeUsername);
            userOptionsContainer.appendChild(setUsernameOption);

            const deleteUserOption = document.createElement("button");
            deleteUserOption.textContent = "Supprimer la configuration";
            deleteUserOption.addEventListener("click", deleteConfig);
            userOptionsContainer.appendChild(deleteUserOption);

            document.addEventListener("click", (e) => {
                if (!userOptionsContainer.contains(e.target) && e.target !== userLabel) {
                    userOptionsContainer.style.display = "none";
                    setUsernameOption.remove();
                    deleteUserOption.remove();
                }
            });
        }

        function changeUsername() {
            usernameInput.style.display = "block";
            usernameInput.value = savedUsername;
            userOptionsContainer.style.display = "none";
        }

    let excludedUsers = JSON.parse(localStorage.getItem("excludedUsers")) || [];
    const excludedUsersSelect = document.getElementById("excludedUsers");
    const resultDiv = document.getElementById("result");
    const excludeButton = document.getElementById("exclude-button");
    const checkButton = document.getElementById("check-button");

    if (excludedUsers.includes(localStorage.getItem("chatUsername"))) {
            document.body.innerHTML = '<a href="about:blank">Vous avez été exclu</a>';
            throw new Error("L'utilisateur est exclu"); // Arrêter l'exécution du script
    }

        function refreshExcludedUsersOptions() {
            excludedUsersSelect.innerHTML = "";
            excludedUsers.forEach(username => {
                const option = document.createElement("option");
                option.text = username;
                excludedUsersSelect.add(option);
            });
        }

        excludeButton.addEventListener("click", excludeUser);

        function excludeUser() {
            const usernameInput = document.getElementById("usernameExclude");
            const username = usernameInput.value.trim();
            if (username) {
                excludedUsers.push(username);
                localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
                usernameInput.value = "";
                refreshExcludedUsersOptions();
                resultDiv.innerHTML = "<h2>Utilisateur exclu avec succès !</h2>";
            }
        }

        checkButton.addEventListener("click", () => {
            const username = document.getElementById("usernameCheck").value.trim();
            if (excludedUsers.includes(username)) {
                resultDiv.innerHTML = "<h2>Utilisateur exclu</h2>";
            } else {
                resultDiv.innerHTML = "<h2>Utilisateur non exclu</h2>";
            }
        });

        refreshExcludedUsersOptions();

        const removeButton = document.getElementById("remove-button");

        removeButton.addEventListener("click", () => {
            const selectedUsername = excludedUsersSelect.value;
            if (selectedUsername) {
                const index = excludedUsers.indexOf(selectedUsername);
                if (index !== -1) {
                    excludedUsers.splice(index, 1);
                    localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
                    refreshExcludedUsersOptions();
                    resultDiv.innerHTML = "<h2>Exclusion supprimée avec succès !</h2>";
                }
            }
        });


let lastMessageCount = 0; // Variable pour stocker le nombre de messages la dernière fois qu'ils ont été chargés
const refreshInterval = setInterval(refreshChat, 5000); // 5000ms équivaut à 5 secondes

function refreshChat() {
    // Vérifier si un nouvel utilisateur a été banni
    if (excludedUsers.includes(localStorage.getItem("chatUsername"))) {
        document.body.innerHTML = '<a href="about:blank">Vous avez été exclu</a>';
        clearInterval(refreshInterval); // Arrêtez le rafraîchissement si l'utilisateur est exclu.
        return;
    }

    loadMessages(); // Charger de nouveaux messages
}
function updateUserLastActive(username) {
    const userLastActive = JSON.parse(localStorage.getItem("userLastActive")) || {};
    userLastActive[username] = Date.now(); // L'heure actuelle en millisecondes
    localStorage.setItem("userLastActive", JSON.stringify(userLastActive));
}
function getOnlineUsers() {
    const userLastActive = JSON.parse(localStorage.getItem("userLastActive")) || {};
    const onlineUsers = [];
    const FIVE_MINUTES = 5 * 1000; // 5 minutes en millisecondes

    for (const user in userLastActive) {
        if (Date.now() - userLastActive[user] < FIVE_MINUTES) {
            onlineUsers.push(user);
        }
    }

    return onlineUsers;
}


setInterval(refreshChat, 5000); // Rafraîchir le chat toutes les 5 secondes

    </script>

</body>

</html>