API tools faq
paste
Advertisement
Thunder-Menu

Chat_Test_Local.html

Thunder-Menu
Nov 3rd, 2023
521
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.72 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Emoji Chat</title>
  7.     <style>
  8.         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;}
  9.     </style>
  10.    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  11.     <script src="https://cdn.jsdelivr.net/npm/peerjs@1.3.2/dist/peerjs.min.js"></script>
  12.    
  13. </head>
  14. <body>
  15.     <h1>Emoji Chat</h1>
  16.     <div id="chat-box"></div>
  17.     <div id="controls">
  18.         <div id="message-controls">
  19.             <textarea id="message-input" rows="5" cols="40" placeholder="Message"></textarea>
  20.             <button id="emoji-button">Emojis</button>
  21.             <button onclick="sendMessage()">Envoyer</button>
  22.             <textarea id="username" placeholder="Nom d'utilisateur"></textarea>
  23.             <select id="user-list" size="5"></select>
  24.             <button id="delete-button" onclick="deleteConfig()">Supprimer la configuration</button>
  25.         </div>
  26.         <div id="emoji-list"></div>
  27.         <div id="admin-controls" style="display:none;">
  28.             <h2>Exclure un Utilisateur</h2>
  29.             <label for="usernameExclude">Nom d'utilisateur à exclure :</label>
  30.             <input type="text" id="usernameExclude">
  31.             <button id="exclude-button">Exclure</button>
  32.             <h2>Vérifier et Supprimer les Exclusions</h2>
  33.             <label for="usernameCheck">Nom d'utilisateur :</label>
  34.             <input type="text" id="usernameCheck">
  35.             <button id="check-button">Vérifier</button>
  36.             <div id="result"></div>
  37.             <label for="excludedUsers">Utilisateurs exclus :</label>
  38.             <select id="excludedUsers"></select>
  39.             <button id="remove-button">Supprimer l'exclusion</button>
  40.         </div>
  41.     </div>
  42.     <script>
  43.         const chatBox = document.getElementById("chat-box");
  44.         const userList = document.getElementById("user-list");
  45.         const usernameInput = document.getElementById("username");
  46.         const messageInput = document.getElementById("message-input");
  47.         const emojiButton = document.getElementById("emoji-button");
  48.         const emojiList = document.getElementById("emoji-list");
  49.         const deleteButton = document.getElementById("delete-button");
  50.         const userLabel = document.createElement("label");
  51.         userLabel.className = "username-label";
  52.         const savedUsername = localStorage.getItem("chatUsername");
  53.         userLabel.textContent = savedUsername || "Changer le nom d'utilisateur";
  54.         userLabel.addEventListener("click", openUserOptions);
  55.         document.body.insertBefore(userLabel, document.getElementById("chat-box"));
  56.         const userOptionsContainer = document.createElement("div");
  57.         userOptionsContainer.className = "user-options";
  58.         userOptionsContainer.style.left = userLabel.offsetLeft + "px";
  59.         userOptionsContainer.style.top = userLabel.offsetTop + userLabel.offsetHeight + "px";
  60.         document.body.appendChild(userOptionsContainer);
  61.         const emojis = ["😀", "😄", "😁", "😆", "😅", "🤣", "😂", "🙂", "🙃", "😉"];
  62.         emojis.forEach(emoji => {
  63.             const emojiElement = document.createElement("span");
  64.             emojiElement.className = "emoji";
  65.             emojiElement.textContent = emoji;
  66.             emojiElement.addEventListener("click", () => insertEmoji(emoji));
  67.             emojiList.appendChild(emojiElement);
  68.         });
  69.         emojiButton.addEventListener("click", toggleEmojiList);
  70.         function toggleEmojiList() {
  71.             emojiList.style.display = emojiList.style.display === "block" ? "none" : "block";
  72.         }
  73.         function sendMessage() {
  74.             const message = messageInput.value;
  75.             if (message === "!More") {
  76.                 document.getElementById("admin-controls").style.display = "block";
  77.                 return;
  78.             }
  79.             if (currentUser && message) {
  80.                const newMessage = document.createElement("div");
  81.                 newMessage.className = "chat-message";
  82.                 newMessage.innerHTML = `<strong>${currentUser}:</strong> ${message}`;
  83.                 chatBox.appendChild(newMessage);
  84.                 saveMessage(currentUser, message);
  85.                 messageInput.value = "";
  86.                 updateUserLastActive(currentUser);
  87.             }
  88.         }
  89.         function insertEmoji(emoji) {
  90.             messageInput.focus();
  91.             const startPosition = messageInput.selectionStart;
  92.             const endPosition = messageInput.selectionEnd;
  93.             const textBefore = messageInput.value.substring(0, startPosition);
  94.             const textAfter = messageInput.value.substring(endPosition);
  95.             messageInput.value = `${textBefore}${emoji}${textAfter}`;
  96.             messageInput.setSelectionRange(startPosition + emoji.length, startPosition + emoji.length);
  97.             emojiList.style.display = "none";
  98.         }
  99.         function deleteConfig() {
  100.             localStorage.removeItem("chatUsers");
  101.             localStorage.removeItem("chatUsername");
  102.             localStorage.removeItem("chatMessages");
  103.             userList.innerHTML = "";
  104.             deleteButton.style.display = "none";
  105.             usernameInput.style.display = "block";
  106.             loadUserList();
  107.         }
  108.         function loadUserList() {
  109.             userList.innerHTML = "";
  110.             const onlineUsers = getOnlineUsers();
  111.             onlineUsers.forEach(user => {
  112.                 addUserToComboBox(user);
  113.             });
  114.             const savedUsers = JSON.parse(localStorage.getItem("chatUsers")) || [];
  115.             savedUsers.forEach(user => {
  116.                 addUserToComboBox(user);
  117.             });
  118.             if (savedUsers.length > 0) {
  119.                 deleteButton.style.display = "block";
  120.             }
  121.             if (savedUsername) {
  122.                 userList.value = savedUsername;
  123.             }
  124.         }
  125.         let currentUser = "";
  126.         function addUserToComboBox(username) {
  127.             const optionExists = [...userList.options].some(option => option.value === username);
  128.             if (!optionExists) {
  129.                 const newUserOption = new Option(username, username);
  130.                 userList.appendChild(newUserOption);
  131.             }
  132.             currentUser = username;
  133.         }
  134.         function saveUser(user) {
  135.             const savedUsers = JSON.parse(localStorage.getItem("chatUsers")) || [];
  136.             if (!savedUsers.includes(user)) {
  137.                 savedUsers.push(user);
  138.                 localStorage.setItem("chatUsers", JSON.stringify(savedUsers));
  139.                 loadUserList();
  140.             }
  141.         }
  142.         if (savedUsername) {
  143.             usernameInput.style.display = "none";
  144.             saveUser(savedUsername);
  145.         }
  146.         usernameInput.addEventListener("blur", () => {
  147.             const newUsername = usernameInput.value.trim();
  148.             if (newUsername) {
  149.                 usernameInput.style.display = "none";
  150.                 saveUser(newUsername);
  151.                 localStorage.setItem("chatUsername", newUsername);
  152.                 userLabel.textContent = newUsername;
  153.             }
  154.         });
  155.         loadMessages();
  156.         function loadMessages() {
  157.             chatBox.innerHTML = '';
  158.             const savedMessages = JSON.parse(localStorage.getItem("chatMessages")) || {};
  159.             Object.keys(savedMessages).forEach(user => {
  160.                 savedMessages[user].forEach(message => {
  161.                     const newMessage = document.createElement("div");
  162.                     newMessage.className = "chat-message";
  163.                     newMessage.innerHTML = `<strong>${user}:</strong> ${message}`;
  164.                     chatBox.appendChild(newMessage);
  165.                 });
  166.             });
  167.         }
  168.         function saveMessage(user, message) {
  169.             const savedMessages = JSON.parse(localStorage.getItem("chatMessages")) || {};
  170.             if (!savedMessages[user]) {
  171.                 savedMessages[user] = [];
  172.             }
  173.             savedMessages[user].push(message);
  174.             localStorage.setItem("chatMessages", JSON.stringify(savedMessages));
  175.         }
  176.         loadUserList();
  177.         function openUserOptions() {
  178.             userOptionsContainer.style.display = "block";
  179.             const setUsernameOption = document.createElement("button");
  180.             setUsernameOption.textContent = "Changer le nom d'utilisateur";
  181.             setUsernameOption.addEventListener("click", changeUsername);
  182.             userOptionsContainer.appendChild(setUsernameOption);
  183.             const deleteUserOption = document.createElement("button");
  184.             deleteUserOption.textContent = "Supprimer la configuration";
  185.             deleteUserOption.addEventListener("click", deleteConfig);
  186.             userOptionsContainer.appendChild(deleteUserOption);
  187.             document.addEventListener("click", (e) => {
  188.                 if (!userOptionsContainer.contains(e.target) && e.target !== userLabel) {
  189.                    userOptionsContainer.style.display = "none";
  190.                     setUsernameOption.remove();
  191.                     deleteUserOption.remove();
  192.                 }
  193.             });
  194.         }
  195.         function changeUsername() {
  196.             usernameInput.style.display = "block";
  197.             usernameInput.value = savedUsername;
  198.             userOptionsContainer.style.display = "none";
  199.         }
  200.         let excludedUsers = JSON.parse(localStorage.getItem("excludedUsers")) || [];
  201.         const excludedUsersSelect = document.getElementById("excludedUsers");
  202.         const resultDiv = document.getElementById("result");
  203.         const excludeButton = document.getElementById("exclude-button");
  204.         const checkButton = document.getElementById("check-button");
  205.         if (excludedUsers.includes(localStorage.getItem("chatUsername"))) {
  206.             document.body.innerHTML = '<a href="about:blank">Vous avez été exclu</a>';
  207.             throw new Error("L'utilisateur est exclu");
  208.         }
  209.         function refreshExcludedUsersOptions() {
  210.             excludedUsersSelect.innerHTML = "";
  211.             excludedUsers.forEach(username => {
  212.                 const option = document.createElement("option");
  213.                 option.text = username;
  214.                 excludedUsersSelect.add(option);
  215.             });
  216.         }
  217.         excludeButton.addEventListener("click", excludeUser);
  218.         function excludeUser() {
  219.             const usernameInput = document.getElementById("usernameExclude");
  220.             const username = usernameInput.value.trim();
  221.             if (username) {
  222.                 excludedUsers.push(username);
  223.                 localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
  224.                 usernameInput.value = "";
  225.                 refreshExcludedUsersOptions();
  226.                 resultDiv.innerHTML = "<h2>Utilisateur exclu avec succès !</h2>";
  227.             }
  228.         }
  229.         checkButton.addEventListener("click", () => {
  230.             const username = document.getElementById("usernameCheck").value.trim();
  231.             if (excludedUsers.includes(username)) {
  232.                 resultDiv.innerHTML = "<h2>Utilisateur exclu</h2>";
  233.             } else {
  234.                 resultDiv.innerHTML = "<h2>Utilisateur non exclu</h2>";
  235.             }
  236.         });
  237.         refreshExcludedUsersOptions();
  238.         const removeButton = document.getElementById("remove-button");
  239.         removeButton.addEventListener("click", () => {
  240.             const selectedUsername = excludedUsersSelect.value;
  241.             if (selectedUsername) {
  242.                 const index = excludedUsers.indexOf(selectedUsername);
  243.                 if (index !== -1) {
  244.                     excludedUsers.splice(index, 1);
  245.                     localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
  246.                     refreshExcludedUsersOptions();
  247.                     resultDiv.innerHTML = "<h2>Exclusion supprimée avec succès !</h2>";
  248.                 }
  249.             }
  250.         });
  251.         let lastMessageCount = 0;
  252.         const refreshInterval = setInterval(refreshChat, 5000);
  253.         function refreshChat() {
  254.             if (excludedUsers.includes(localStorage.getItem("chatUsername"))) {
  255.                 document.body.innerHTML = '<a href="about:blank">Vous avez été exclu</a>';
  256.                 clearInterval(refreshInterval);
  257.                 return;
  258.             }
  259.             loadMessages();
  260.         }
  261.         function updateUserLastActive(username) {
  262.             const userLastActive = JSON.parse(localStorage.getItem("userLastActive")) || {};
  263.             userLastActive[username] = Date.now();
  264.             localStorage.setItem("userLastActive", JSON.stringify(userLastActive));
  265.         }
  266.         function getOnlineUsers() {
  267.             const userLastActive = JSON.parse(localStorage.getItem("userLastActive")) || {};
  268.             const onlineUsers = [];
  269.             const FIVE_MINUTES = 5 * 1000;
  270.             for (const user in userLastActive) {
  271.                 if (Date.now() - userLastActive[user] < FIVE_MINUTES) {
  272.                    onlineUsers.push(user);
  273.                }
  274.            }
  275.            return onlineUsers;
  276.        }
  277.        let peer = new Peer(); // Crée une instance Peer pour représenter l'utilisateur local.
  278.        let conn = null;
  279.        let onlineUsers = []; // Vecteur pour stocker les utilisateurs en ligne
  280.        let usernames = []; // Vecteur pour stocker les noms d'utilisateur correspondants
  281.  
  282.        peer.on('open', function(id) {
  283.            console.log('Mon Peer ID:', id);
  284.            $("#my-id").text(id);
  285.        });
  286.  
  287. let userMap = {}; // Utilisez un objet pour mapper les ID aux noms d'utilisateur
  289. // Écoute des connexions entrantes
  290. peer.on('connection', function(connection) {
  291.    conn = connection;
  292.    setupConnectionEvents();
  294.    // Ajoutez l'ID et le nom d'utilisateur du pair aux tableaux et à l'objet de mappage
  295.    onlineUsers.push(conn.peer);
  296.    const defaultUsername = "Nom d'utilisateur par défaut"; // Vous pouvez utiliser un nom par défaut ici
  297.    usernames.push(defaultUsername);
  298.    userMap[conn.peer] = defaultUsername;
  299.    refreshUserList();
  300. });
  301.  
  302.        function setupConnectionEvents() {
  303.            conn.on('data', function(data) {
  304.                // Afficher le message reçu avec le nom d'utilisateur
  305.                const username = usernames[onlineUsers.indexOf(conn.peer)];
  306.                $("#messages").val($("#messages").val() + username + ": " + data + "\n");
  307.            });
  309.            conn.on('open', function() {
  310.                console.log('Connexion établie');
  311.                // Ajouter l'utilisateur en ligne au vecteur
  312.                onlineUsers.push(conn.peer);
  313.                // Rafraîchir la liste des utilisateurs en ligne
  314.                refreshUserList();
  315.            });
  316.  
  317.            conn.on('close', function() {
  318.                console.log('Connexion fermée');
  319.                // Retirer l'utilisateur en ligne du vecteur
  320.                const index = onlineUsers.indexOf(conn.peer);
  321.                if (index !== -1) {
  322.                    onlineUsers.splice(index, 1);
  323.                    usernames.splice(index, 1);
  324.                    // Rafraîchir la liste des utilisateurs en ligne
  325.                    refreshUserList();
  326.                }
  327.            });
  328.        }
  330.        function connectTo() {
  331.            let peerIdToConnect = $("#connect-id").val();
  332.            conn = peer.connect(peerIdToConnect);
  333.            setupConnectionEvents();
  334.        }
  336.        // Fonction pour rafraîchir la liste des utilisateurs en ligne
  337.        function refreshUserList() {
  338.            const userSelect = document.getElementById("user-list");
  339.            userSelect.innerHTML = "";
  340.            onlineUsers.forEach((userId, index) => {
  341.                 const username = usernames[index];
  342.                 const option = new Option(username, username);
  343.                 userSelect.appendChild(option);
  344.             });
  345.         }
  346.  
  347.         setInterval(refreshChat, 5000);
  348.     </script>
  349. </body>
  350. </html>
  351.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!