|
|
@@ -0,0 +1,456 @@
|
|
|
+<!-- 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;
|
|
|
+}
|
|
|
+
|
|
|
+#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);
|
|
|
+}
|
|
|
+
|
|
|
+.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">
|
|
|
+ <input id="message-input" type="text" placeholder="Message #channel-name">
|
|
|
+ <button onclick="submitMessageToServer()">Send</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+
|
|
|
+/// (time, channel, username, content, isPending)
|
|
|
+messages = [];
|
|
|
+selectedChannel = null;
|
|
|
+selectedUsers = new Set();
|
|
|
+username = `Myst#${randomNumericString(4)}`;
|
|
|
+customChannels = new Set();
|
|
|
+
|
|
|
+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 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] of filteredMessages.slice().reverse()) {
|
|
|
+ const messageDiv = document.createElement('div');
|
|
|
+ messageDiv.classList.add('message-item');
|
|
|
+ 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('#textentry 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);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// TODO: Send to server
|
|
|
+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
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+ // Scroll to bottom
|
|
|
+ const messagesDiv = document.querySelector('#messages');
|
|
|
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
|
|
+}
|
|
|
+
|
|
|
+async function receiveMessagesFromServer() {
|
|
|
+ const result = await window.__TAURI_INTERNALS__.invoke(
|
|
|
+ "receive_messages",
|
|
|
+ {}
|
|
|
+ );
|
|
|
+
|
|
|
+ console.log("Received messages from server:", result);
|
|
|
+
|
|
|
+ messages = result.map(m => [m[0], m[1], m[2], m[3], false]);
|
|
|
+}
|
|
|
+
|
|
|
+function main() {
|
|
|
+ receiveMessagesFromServer();
|
|
|
+ visualUpdate();
|
|
|
+
|
|
|
+ bindEnterToAction('#message-input', submitMessageToServer);
|
|
|
+ bindEnterToAction('#channel-input', createChannel);
|
|
|
+ bindEnterToAction('#username-input', setUsername);
|
|
|
+
|
|
|
+ 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();
|
|
|
+
|
|
|
+
|
|
|
+function simulateReceivingMessages() {
|
|
|
+ // Simulate receiving messages
|
|
|
+ setInterval(() => {
|
|
|
+ const channels = ["root", "general", "random"];
|
|
|
+ const channel = channels[Math.floor(Math.random() * channels.length)];
|
|
|
+ const username = `User${randomNumericString(4)}`;
|
|
|
+ const message = `Hello ${channel} from ${username}!`;
|
|
|
+ messages.push([Date.now(), channel, username, message]);
|
|
|
+ }, 100);
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
