Slopify/chat.html at main · nastywishful/Slopify · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>chat</title>
    <script src="static/js/tunnel_lib.js" defer></script>
    <style>
      .message {
          margin-bottom: 6px; /* Space between messages */
          display: flex; /* Align username and message on the same line */
          align-items: center;
      }

      .username {
          font-weight: bold; /* Make the username bold */
          position: relative;
      }

      /* Add the colon and space after the username */
      .username:after {
          content: ": ";
      }
    </style>
</head>
<body>
    <div id="chatContainer">
        <div id="roomInfo">Connected to room: <strong>global</strong></div>
        <div id="messages"></div>
        <div id="inputContainer">
            <input type="text" id="messageInput" placeholder="Type a message..." maxlength="200">
            <button id="sendButton" onclick="sendMessage()">Send</button>
        </div>
        <div style="margin-top: 10px;">
            <button id="createButton" onclick="createOrJoinRoom()">Create or Join a Room</button>
            <button id="setUsernameButton" onclick="setUserName()">Set Username</button>
        </div>
    </div>
    <script>
        async function createOrJoinRoom() {
            let room = prompt("Enter the name of the room you want to join or create, leave it blank to randomize:");
            window.chatConnection.close();
            if (room) {
                window.chatConnection = getTunnelConnection(room);
            } else window.chatConnection = getTunnelConnection('');
            await window.chatConnection.init();
            await window.chatConnection.create();
            await window.chatConnection.connect();
            room = window.chatConnection.tunnelId;
            document.getElementById('roomInfo').textContent = `Connected to room: ${window.chatConnection.tunnelId}`;
            localMessage('System:', `${window.userName} connected to room ${room}. ---`, true);
        }

        function getTunnelConnection(id) {
            return new TunnelConnection(
                'https://lluck.hackclub.app',
                id,
                "main",
                processMessage,
                { encryption: false, compression: false }
            )
        }

        function localMessage(username, message, isSystem) {
            if (!isSystem) isSystem = false;
            let messagesContainer = document.getElementById('messages');
            let messageContainer = document.createElement('div');
            messageContainer.classList.add('message');
            let usernameElement = document.createElement('div');
            usernameElement.textContent = username;
            usernameElement.classList.add('username');
            let messageTextElement = document.createElement('div');
            messageTextElement.textContent = message;
            messageTextElement.classList.add('message-text');
            if (isSystem) {
                usernameElement.style.color = '#f00';
                messageTextElement.style.color = '#f00';
            }
            messageContainer.appendChild(usernameElement);
            messageContainer.appendChild(messageTextElement);
            messagesContainer.appendChild(messageContainer);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function processMessage(message) {
            try {
                let messageData = JSON.parse(message);
                if (!messageData.username || !messageData.message) throw new Error('Invalid message data: ' + message);
                localMessage(messageData.username, messageData.message);
            } catch (e) {
                console.log(e);
            }
        }

        function sendMessage() {
            let userMessage = document.getElementById('messageInput').value;
            let messageData = {
                username: window.userName,
                message: userMessage
            };
            window.chatConnection.send(JSON.stringify(messageData));
            document.getElementById('messageInput').value = '';
        }

        function setUserName() {
            let username = prompt('Enter your username:');
            if (username) {
                window.userName = username;
                localStorage['userName'] = username;
            } else {
                setUserName();
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            window.userName = localStorage['userName'] || null;
            if (!window.userName) setUserName();
            window.chatConnection = getTunnelConnection('global');
            window.chatConnection.init();
            window.chatConnection.create();
            window.chatConnection.connect();

            document.addEventListener("keydown", function(event) {
                if (event.key === "Enter") {
                    sendMessage();
                }
            });
        });
    </script>
</body>
</html>