Add files via upload

js/app-mockup.js

@@ -1014,4 +1014,4 @@ function randomString(length) {
 function randomColor() {
     const randomColor = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
     return randomColor;
-}
+}

js/app.js

@@ -404,6 +404,7 @@ function hexToRGBA(hexadecimal,opacity) {
 const chatInputConfig = document.getElementById("chat-input-config");
 const chatInputSend = document.getElementById("chat-input-send");
 const chatInputForm = document.querySelector("#chat-input form");
+const chatInput = chatInputForm.querySelector("input[type=text]")
 const settings = document.getElementById("chat-input-settings");
 
 chatInputForm.addEventListener("submit", function(event) {
@@ -500,7 +501,6 @@ async function executeModCommand(event, command) {
     event.preventDefault();
 
     if (streamerBotConnected == true) {
-        const chatInput = chatInputForm.querySelector("input[type=text]")
         chatInput.value = command;
 
         chatInputForm.requestSubmit();
@@ -537,3 +537,89 @@ document.addEventListener("DOMContentLoaded", () => {
         });
     });
 });
+
+
+
+
+
+
+let chatcommands = {};
+let chatcurrentFocus = -1;
+
+fetch('js/commands.json')
+.then(response => response.json())
+.then(data => {
+    chatcommands = data;
+});
+
+const chatcommandslist = document.getElementById('chat-autocomplete-list');
+
+chatInput.addEventListener('input', function () {
+    const value = this.value.trim();
+    chatcommandslist.innerHTML = '';
+    chatcurrentFocus = -1;
+    if (!value.startsWith('/')) return;
+        Object.entries(chatcommands).forEach(([groupName, commands]) => {
+        
+        const filtered = commands.filter(cmd => cmd.name.startsWith(value));
+
+        if (filtered.length === 0) return;
+
+        const groupTitle = document.createElement('div');
+        groupTitle.textContent = groupName;
+        chatcommandslist.appendChild(groupTitle);
+        filtered.forEach(cmd => {
+            const item = document.createElement('div');
+            item.classList.add('autocomplete-item');
+            item.innerHTML = `<strong>${cmd.name}</strong><small> ${cmd.usage}</small>`;
+            item.addEventListener('click', () => {
+                chatInput.value = cmd.name + ' ';
+                chatcommandslist.innerHTML = '';
+            });
+            chatcommandslist.appendChild(item);
+        });
+    });
+});
+
+
+chatInput.addEventListener('keydown', function (e) {
+    const items = chatcommandslist.querySelectorAll('.autocomplete-item');
+    
+    if (items.length === 0) return;
+    
+    if (e.key === 'ArrowDown') {
+        chatcurrentFocus++;
+        highlightItem(items);
+    }
+    else if (e.key === 'ArrowUp') {
+        chatcurrentFocus--;
+        highlightItem(items);
+    }
+    
+    else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (chatcurrentFocus > -1 && items[chatcurrentFocus]) {
+            items[chatcurrentFocus].click();
+        }
+    }
+});
+
+
+function highlightItem(items) {
+    if (!items) return;
+
+    items.forEach(item => item.classList.remove('active'));
+
+    if (chatcurrentFocus >= items.length) chatcurrentFocus = 0;
+    if (chatcurrentFocus < 0) chatcurrentFocus = items.length - 1;
+
+    items[chatcurrentFocus].classList.add('active');
+    items[chatcurrentFocus].scrollIntoView({ block: "nearest" });
+}
+
+
+document.addEventListener('click', function (e) {
+    if (e.target !== chatcommandslist) {
+        chatcommandslist.innerHTML = '';
+    }
+});

js/commands.json

@@ -0,0 +1,29 @@
+{
+    "Twitch" : [
+        { "name" : "/me", "usage" : "[message]"  },
+        { "name" : "/announce", "usage" : "[message]"  },
+        { "name" : "/clear", "usage" : ""  },
+        { "name" : "/slow", "usage" : "[duration]"  },
+        { "name" : "/slowoff", "usage" : ""  },
+        { "name" : "/subscribers", "usage" : ""  },
+        { "name" : "/subscribersoff", "usage" : ""  },
+        { "name" : "/commercial", "usage" : "[duration]"  },
+        { "name" : "/timeout", "usage" : "[user] [duration] [reason]"  },
+        { "name" : "/untimeout", "usage" : ""  },
+        { "name" : "/ban", "usage" : "[user] [duration] [reason]"  },
+        { "name" : "/unban", "usage" : ""  },
+        { "name" : "/mod", "usage" : "[user]"  },
+        { "name" : "/unmod", "usage" : "[user]"  },
+        { "name" : "/vip", "usage" : "[user]"  },
+        { "name" : "/unvip", "usage" : "[user]"  },
+        { "name" : "/shoutout", "usage" : "[user]"  },
+        { "name" : "/raid", "usage" : "[user]"  },
+        { "name" : "/unraid", "usage" : ""  }
+    ],
+    "YouTube" : [
+        { "name" : "/yt/title", "usage" : "[title]"  },
+        { "name" : "/yt/description", "usage" : "[description]"  },
+        { "name" : "/yt/timeout", "usage" : "[user] [duration]"  },
+        { "name" : "/yt/ban", "usage" : "[user]"  }
+    ]
+}