|
|
@@ -0,0 +1,586 @@
|
|
|
+<!-- COPYRIGHT (C) AMY <RAIN@SKULD.NETWORK> & IDK THIS IS MOSTLY WRITTEN WITH COPILOT LOL -->
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Chatroom</title>
|
|
|
+ <style>
|
|
|
+
|
|
|
+:root {
|
|
|
+ --col-1: #2f3136;
|
|
|
+ --col-2: #36393f;
|
|
|
+ --col-3: #40444b;
|
|
|
+ --col-accent: #7289da;
|
|
|
+ --col-text-1: rgb(200, 200, 200);
|
|
|
+ --col-text-2: white;
|
|
|
+}
|
|
|
+
|
|
|
+/* SCROLLBARS */
|
|
|
+/* Firefox */
|
|
|
+* {
|
|
|
+ scrollbar-width: thin;
|
|
|
+ scrollbar-color: var(--col-3) var(--col-1);
|
|
|
+}
|
|
|
+
|
|
|
+/* WebKit browsers */
|
|
|
+*::-webkit-scrollbar {
|
|
|
+ width: 0.75em;
|
|
|
+ height: 0.75em;
|
|
|
+}
|
|
|
+
|
|
|
+*::-webkit-scrollbar-track {
|
|
|
+ background: var(--col-1);
|
|
|
+}
|
|
|
+
|
|
|
+*::-webkit-scrollbar-thumb {
|
|
|
+ background-color: var(--col-3);
|
|
|
+ border-radius: 0.5em;
|
|
|
+ border: 0.15em solid var(--col-1);
|
|
|
+}
|
|
|
+
|
|
|
+*::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: var(--col-accent);
|
|
|
+}
|
|
|
+
|
|
|
+/* MAIN */
|
|
|
+
|
|
|
+html {
|
|
|
+ font-family: Arial, Helvetica, sans-serif;
|
|
|
+ font-size: 1rem;
|
|
|
+ background-color: var(--col-1);
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ background-color: var(--col-1);
|
|
|
+ color: var(--col-text-1);
|
|
|
+
|
|
|
+ height: 100vh;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.panel-host {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.panel {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 1em;
|
|
|
+
|
|
|
+ background-color: var(--col-1);
|
|
|
+
|
|
|
+ border-style: solid;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-color: var(--col-3);
|
|
|
+ border-width: 0 0.1em 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+#user-list,
|
|
|
+#channel-list {
|
|
|
+ flex-shrink: 0;
|
|
|
+ flex-grow: 1;
|
|
|
+ min-width: 15%;
|
|
|
+ max-width: 15%;
|
|
|
+ width: 15%;
|
|
|
+}
|
|
|
+
|
|
|
+#chat-area {
|
|
|
+ flex-grow: 5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+#channels,
|
|
|
+#users,
|
|
|
+#messages {
|
|
|
+ flex-shrink: 0;
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+#messages {
|
|
|
+ flex-direction: column-reverse;
|
|
|
+}
|
|
|
+
|
|
|
+h2 {
|
|
|
+ margin: 0 0 1em 0;
|
|
|
+}
|
|
|
+
|
|
|
+button {
|
|
|
+ background-color: var(--col-accent);
|
|
|
+ color: var(--col-text-2);
|
|
|
+
|
|
|
+ border: none;
|
|
|
+ border-radius: 0.3em;
|
|
|
+ padding: 0.5em;
|
|
|
+
|
|
|
+ font-size: inherit;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+}
|
|
|
+
|
|
|
+button:disabled {
|
|
|
+ background-color: var(--col-3);
|
|
|
+ color: var(--col-text-1);
|
|
|
+ cursor: not-allowed;
|
|
|
+}
|
|
|
+
|
|
|
+#textentry {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+#textentry input {
|
|
|
+ font-size: inherit;
|
|
|
+ width: 100%;
|
|
|
+ padding: 0.5em;
|
|
|
+ margin-right: 0.5em;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0.3em;
|
|
|
+
|
|
|
+ background-color: var(--col-3);
|
|
|
+ color: var(--col-text-1);
|
|
|
+}
|
|
|
+
|
|
|
+.icon-button {
|
|
|
+ width: 2em;
|
|
|
+ height: 2em;
|
|
|
+ margin-right: 0.5em;
|
|
|
+ padding: 1em;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 1.2em;
|
|
|
+}
|
|
|
+
|
|
|
+.settings-modal-overlay {
|
|
|
+ position: fixed;
|
|
|
+ inset: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.45);
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+
|
|
|
+.settings-modal {
|
|
|
+ width: min(26em, calc(100vw - 2em));
|
|
|
+ background: var(--col-2);
|
|
|
+ border: 0.1em solid var(--col-3);
|
|
|
+ border-radius: 0.5em;
|
|
|
+ padding: 1em;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.settings-modal h3 {
|
|
|
+ margin: 0 0 0.8em 0;
|
|
|
+ color: var(--col-text-2);
|
|
|
+}
|
|
|
+
|
|
|
+.settings-field {
|
|
|
+ margin-bottom: 0.75em;
|
|
|
+}
|
|
|
+
|
|
|
+.settings-field label {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 0.3em;
|
|
|
+}
|
|
|
+
|
|
|
+.settings-field input {
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: inherit;
|
|
|
+ padding: 0.5em;
|
|
|
+ border: none;
|
|
|
+ border-radius: 0.3em;
|
|
|
+ background-color: var(--col-3);
|
|
|
+ color: var(--col-text-1);
|
|
|
+}
|
|
|
+
|
|
|
+.settings-actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 0.5em;
|
|
|
+ margin-top: 1em;
|
|
|
+}
|
|
|
+
|
|
|
+.user-item,
|
|
|
+.message-item {
|
|
|
+ margin-bottom: 0.5em;
|
|
|
+}
|
|
|
+
|
|
|
+.channel-item {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0.25em 0.5em;
|
|
|
+ border-radius: 0.3em;
|
|
|
+ margin-bottom: 0.2em;
|
|
|
+}
|
|
|
+
|
|
|
+.channel-item:hover {
|
|
|
+ background-color: var(--col-3);
|
|
|
+}
|
|
|
+
|
|
|
+.channel-item.active {
|
|
|
+ background-color: var(--col-accent);
|
|
|
+ color: var(--col-text-2);
|
|
|
+}
|
|
|
+
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="panel-host" style="flex-direction: column;">
|
|
|
+ <!-- <div class="panel-host">
|
|
|
+ <div class="panel">
|
|
|
+ <button onclick=switchTheme()>Appearance</button>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="panel-host">
|
|
|
+
|
|
|
+ <div class="panel" id="channel-list">
|
|
|
+ <h2>Channels</h2>
|
|
|
+ <div id="channels">
|
|
|
+ <!-- Add channel list here -->
|
|
|
+ </div>
|
|
|
+ <div id="channel-create" style="margin-top: auto; padding-top: 0.5em;">
|
|
|
+ <input id="channel-input" type="text" placeholder="New channel name" style="font-size: inherit; width: 100%; padding: 0.5em; margin-bottom: 0.4em; border: none; border-radius: 0.3em; background-color: var(--col-3); color: var(--col-text-1); box-sizing: border-box;">
|
|
|
+ <button style="width: 100%;" onclick="createChannel()">+ Create Channel</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel" id="user-list">
|
|
|
+ <h2>Users</h2>
|
|
|
+ <div id="users">
|
|
|
+ <!-- Add user list here -->
|
|
|
+ </div>
|
|
|
+ <div id="username-set" style="margin-top: auto; padding-top: 0.5em;">
|
|
|
+ <input id="username-input" type="text" placeholder="Set username" style="font-size: inherit; width: 100%; padding: 0.5em; margin-bottom: 0.4em; border: none; border-radius: 0.3em; background-color: var(--col-3); color: var(--col-text-1); box-sizing: border-box;">
|
|
|
+ <button style="width: 100%;" onclick="setUsername()">Set Username</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel" id="chat-area">
|
|
|
+ <h2>Messages</h2>
|
|
|
+ <div id="messages">
|
|
|
+ <!-- Add messages here -->
|
|
|
+ </div>
|
|
|
+ <div id="textentry">
|
|
|
+ <button id="settings-button" class="icon-button" type="button" title="Settings" aria-label="Open settings">⚙</button>
|
|
|
+ <input id="message-input" type="text" placeholder="Message #channel-name">
|
|
|
+ <button id="send-button" onclick="submitMessageToServer()">Send</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="settings-modal-overlay" class="settings-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="settings-modal-title">
|
|
|
+ <div class="settings-modal">
|
|
|
+ <h3 id="settings-modal-title">Connection Settings</h3>
|
|
|
+ <div class="settings-field">
|
|
|
+ <label for="hostname-input">Hostname</label>
|
|
|
+ <input id="hostname-input" type="text" placeholder="example.com">
|
|
|
+ </div>
|
|
|
+ <div class="settings-field">
|
|
|
+ <label for="password-input">Password</label>
|
|
|
+ <input id="password-input" placeholder="Enter password">
|
|
|
+ </div>
|
|
|
+ <div class="settings-actions">
|
|
|
+ <button type="button" id="settings-cancel-button">Cancel</button>
|
|
|
+ <button type="button" id="settings-save-button">Save</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+/// (time, channel, username, content, isPending)
|
|
|
+messages = [];
|
|
|
+selectedChannel = null;
|
|
|
+selectedUsers = new Set();
|
|
|
+username = `Myst#${randomNumericString(4)}`;
|
|
|
+customChannels = new Set();
|
|
|
+settings = {
|
|
|
+ hostname: '',
|
|
|
+ password: 'null'
|
|
|
+};
|
|
|
+
|
|
|
+function randomNumericString(length) {
|
|
|
+ let v = 10 ** length;
|
|
|
+ return Math.floor(Math.random() * v * 0.9 + v * 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+function switchTheme() {
|
|
|
+ const e = document.querySelector('body');
|
|
|
+ e.setAttribute('data-theme', e.getAttribute('data-theme') === 'light' ? 'dark' : 'light');
|
|
|
+}
|
|
|
+
|
|
|
+function createChannel() {
|
|
|
+ const input = document.querySelector('#channel-input');
|
|
|
+ const name = input.value.trim().replace(/\s+/g, '-').toLowerCase();
|
|
|
+ if (name) {
|
|
|
+ customChannels.add(name);
|
|
|
+ selectedChannel = name;
|
|
|
+ input.value = '';
|
|
|
+ visualUpdate();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function setUsername() {
|
|
|
+ const input = document.querySelector('#username-input');
|
|
|
+ const name = input.value.trim();
|
|
|
+ if (name) {
|
|
|
+ username = name;
|
|
|
+ input.value = '';
|
|
|
+ visualUpdate();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function bindEnterToAction(inputSelector, action) {
|
|
|
+ const input = document.querySelector(inputSelector);
|
|
|
+ if (!input) return;
|
|
|
+
|
|
|
+ input.addEventListener('keydown', (event) => {
|
|
|
+ if (event.key === 'Enter') {
|
|
|
+ event.preventDefault();
|
|
|
+ action();
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+function openSettingsModal() {
|
|
|
+ const overlay = document.querySelector('#settings-modal-overlay');
|
|
|
+ const hostnameInput = document.querySelector('#hostname-input');
|
|
|
+ const passwordInput = document.querySelector('#password-input');
|
|
|
+
|
|
|
+ hostnameInput.value = settings.hostname;
|
|
|
+ if (settings.password === '') {
|
|
|
+ passwordInput.value = 'null';
|
|
|
+ } else {
|
|
|
+ passwordInput.value = settings.password;
|
|
|
+ }
|
|
|
+ overlay.style.display = 'flex';
|
|
|
+ hostnameInput.focus();
|
|
|
+}
|
|
|
+
|
|
|
+function closeSettingsModal() {
|
|
|
+ const overlay = document.querySelector('#settings-modal-overlay');
|
|
|
+ overlay.style.display = 'none';
|
|
|
+}
|
|
|
+
|
|
|
+function saveSettings() {
|
|
|
+ const hostnameInput = document.querySelector('#hostname-input');
|
|
|
+ const passwordInput = document.querySelector('#password-input');
|
|
|
+
|
|
|
+ settings.hostname = hostnameInput.value.trim();
|
|
|
+ settings.password = passwordInput.value;
|
|
|
+ closeSettingsModal();
|
|
|
+}
|
|
|
+
|
|
|
+function visualUpdate() {
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
+ messagesDiv.innerHTML = "";
|
|
|
+ const visibleMessages = selectedChannel
|
|
|
+ ? messages.filter(m => m[1] === selectedChannel)
|
|
|
+ : messages;
|
|
|
+ const filteredMessages = selectedUsers.size
|
|
|
+ ? visibleMessages.filter(m => selectedUsers.has(m[2]))
|
|
|
+ : visibleMessages;
|
|
|
+ for (const [time, channel, username, message, isPending] of filteredMessages.slice().reverse()) {
|
|
|
+ const messageDiv = document.createElement('div');
|
|
|
+ messageDiv.classList.add('message-item');
|
|
|
+ if (isPending) messageDiv.style.opacity = '0.5';
|
|
|
+ const timeString = new Date(time).toLocaleTimeString();
|
|
|
+ messageDiv.textContent = `[${timeString}] ${username}: ${message}`;
|
|
|
+ messagesDiv.appendChild(messageDiv);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Disable input when no channel or "all" is selected
|
|
|
+ const input = document.querySelector('#message-input');
|
|
|
+ const sendButton = document.querySelector('#send-button');
|
|
|
+ const isAllSelected = !selectedChannel;
|
|
|
+ input.disabled = isAllSelected;
|
|
|
+ sendButton.disabled = isAllSelected;
|
|
|
+ input.placeholder = isAllSelected ? 'Select a channel to send messages' : `Message #${selectedChannel} as ${username}`;
|
|
|
+
|
|
|
+ // Update channels
|
|
|
+ const channelsDiv = document.querySelector('#channels');
|
|
|
+
|
|
|
+ // Remove empty channels that aren't selected
|
|
|
+ customChannels = new Set(
|
|
|
+ [...customChannels].filter(channel =>
|
|
|
+ channel === selectedChannel || messages.some(m => m[1] === channel)
|
|
|
+ )
|
|
|
+ );
|
|
|
+
|
|
|
+ const channels = new Set([...customChannels, ...messages.map(m => m[1])]);
|
|
|
+ channelsDiv.innerHTML = "";
|
|
|
+
|
|
|
+ const allChannelsDiv = document.createElement('div');
|
|
|
+ allChannelsDiv.classList.add('channel-item');
|
|
|
+ if (!selectedChannel) {
|
|
|
+ allChannelsDiv.classList.add('active');
|
|
|
+ }
|
|
|
+ allChannelsDiv.textContent = '#all';
|
|
|
+ allChannelsDiv.onclick = () => {
|
|
|
+ selectedChannel = null;
|
|
|
+ selectedUsers.clear();
|
|
|
+ visualUpdate();
|
|
|
+ };
|
|
|
+ channelsDiv.appendChild(allChannelsDiv);
|
|
|
+
|
|
|
+ for (const channel of channels) {
|
|
|
+ const channelDiv = document.createElement('div');
|
|
|
+ channelDiv.classList.add('channel-item');
|
|
|
+ if (channel === selectedChannel) {
|
|
|
+ channelDiv.classList.add('active');
|
|
|
+ }
|
|
|
+ channelDiv.textContent = `#${channel}`;
|
|
|
+ channelDiv.onclick = () => {
|
|
|
+ selectedChannel = channel;
|
|
|
+ selectedUsers.clear();
|
|
|
+ visualUpdate();
|
|
|
+ };
|
|
|
+ channelsDiv.appendChild(channelDiv);
|
|
|
+ }
|
|
|
+
|
|
|
+ // Update users
|
|
|
+ const userList = document.querySelector('#users');
|
|
|
+ const users = new Set(
|
|
|
+ (selectedChannel ? messages.filter(m => m[1] === selectedChannel) : messages).map(m => m[2])
|
|
|
+ );
|
|
|
+ userList.innerHTML = "";
|
|
|
+
|
|
|
+ if (selectedUsers.size) {
|
|
|
+ const clearDiv = document.createElement('div');
|
|
|
+ clearDiv.classList.add('user-item');
|
|
|
+ clearDiv.style.cssText = 'cursor: pointer; color: var(--col-accent); margin-bottom: 0.5em;';
|
|
|
+ clearDiv.textContent = '✕ Clear filters';
|
|
|
+ clearDiv.onclick = () => {
|
|
|
+ selectedUsers.clear();
|
|
|
+ visualUpdate();
|
|
|
+ };
|
|
|
+ userList.appendChild(clearDiv);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (const user of users) {
|
|
|
+ const userDiv = document.createElement('div');
|
|
|
+ userDiv.classList.add('user-item');
|
|
|
+ userDiv.textContent = user;
|
|
|
+ userDiv.style.cursor = 'pointer';
|
|
|
+
|
|
|
+ if (selectedUsers.has(user)) {
|
|
|
+ userDiv.style.color = 'var(--col-accent)';
|
|
|
+ userDiv.style.fontWeight = 'bold';
|
|
|
+ }
|
|
|
+
|
|
|
+ userDiv.onclick = () => {
|
|
|
+ if (selectedUsers.has(user)) {
|
|
|
+ selectedUsers.delete(user);
|
|
|
+ } else {
|
|
|
+ selectedUsers.add(user);
|
|
|
+ }
|
|
|
+ visualUpdate();
|
|
|
+ };
|
|
|
+
|
|
|
+ userList.appendChild(userDiv);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+async function submitMessageToServer() {
|
|
|
+ const input = document.querySelector('#message-input');
|
|
|
+ const message = input.value.trim();
|
|
|
+ if (message) {
|
|
|
+ messages.push([Date.now(), selectedChannel, username, message, true]);
|
|
|
+ input.value = '';
|
|
|
+ }
|
|
|
+ visualUpdate();
|
|
|
+
|
|
|
+ await window.__TAURI_INTERNALS__.invoke(
|
|
|
+ "send_message",
|
|
|
+ {
|
|
|
+ channel: selectedChannel,
|
|
|
+ sender: username,
|
|
|
+ content: message,
|
|
|
+ hostname: settings.hostname,
|
|
|
+ password: settings.password
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // Scroll to bottom
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
|
+}
|
|
|
+
|
|
|
+async function receiveMessagesFromServer() {
|
|
|
+ const result = await window.__TAURI_INTERNALS__.invoke(
|
|
|
+ "receive_messages",
|
|
|
+ {
|
|
|
+ hostname: settings.hostname,
|
|
|
+ password: settings.password
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ console.log("Received messages from server:", result);
|
|
|
+
|
|
|
+ messages = result.map(m => [m[0], m[1], m[2], m[3], false]);
|
|
|
+}
|
|
|
+
|
|
|
+function main() {
|
|
|
+ receiveMessagesFromServer();
|
|
|
+ visualUpdate();
|
|
|
+
|
|
|
+ const settingsButton = document.querySelector('#settings-button');
|
|
|
+ const settingsSaveButton = document.querySelector('#settings-save-button');
|
|
|
+ const settingsCancelButton = document.querySelector('#settings-cancel-button');
|
|
|
+ const settingsOverlay = document.querySelector('#settings-modal-overlay');
|
|
|
+
|
|
|
+ settingsButton.addEventListener('click', openSettingsModal);
|
|
|
+ settingsSaveButton.addEventListener('click', saveSettings);
|
|
|
+ settingsCancelButton.addEventListener('click', closeSettingsModal);
|
|
|
+ settingsOverlay.addEventListener('click', (event) => {
|
|
|
+ if (event.target === settingsOverlay) {
|
|
|
+ closeSettingsModal();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ document.addEventListener('keydown', (event) => {
|
|
|
+ if (event.key === 'Escape' && settingsOverlay.style.display === 'flex') {
|
|
|
+ closeSettingsModal();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ bindEnterToAction('#message-input', submitMessageToServer);
|
|
|
+ bindEnterToAction('#channel-input', createChannel);
|
|
|
+ bindEnterToAction('#username-input', setUsername);
|
|
|
+ bindEnterToAction('#hostname-input', saveSettings);
|
|
|
+ bindEnterToAction('#password-input', saveSettings);
|
|
|
+
|
|
|
+ setInterval(() => {
|
|
|
+ receiveMessagesFromServer();
|
|
|
+
|
|
|
+ // Don't update if user has scrolled up
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
+ if (messagesDiv.scrollTop + messagesDiv.clientHeight < messagesDiv.clientHeight) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ visualUpdate();
|
|
|
+ }, 1000);
|
|
|
+}
|
|
|
+
|
|
|
+main();
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
