diff --git a/src/views/channel.ejs b/src/views/channel.ejs
index 50a7d9c..5735685 100644
--- a/src/views/channel.ejs
+++ b/src/views/channel.ejs
@@ -26,97 +26,8 @@ along with this program. If not, see . %>
<%- include('partial/navbar', {user}); %>
-
-
-
-
-
-
-
-
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
-
-
/10
-
- Flair
-
-
-
NULL Users
-
-
-
-
-
+ <%- include('partial/channel/mediaPanel') %>
+ <%- include('partial/channel/chatPanel') %>
diff --git a/src/views/partial/channel/chatPanel.ejs b/src/views/partial/channel/chatPanel.ejs
new file mode 100644
index 0000000..13878c3
--- /dev/null
+++ b/src/views/partial/channel/chatPanel.ejs
@@ -0,0 +1,95 @@
+<%# Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see . %>
+
+
+
+
+
+
+
+
+ 0
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+
+
/10
+
+ Flair
+
+
+
NULL Users
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/partial/channel/mediaPanel.ejs b/src/views/partial/channel/mediaPanel.ejs
new file mode 100644
index 0000000..e612fd5
--- /dev/null
+++ b/src/views/partial/channel/mediaPanel.ejs
@@ -0,0 +1,31 @@
+<%# Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see . %>
+
+
\ No newline at end of file
diff --git a/www/css/channel.css b/www/css/channel.css
index b3dd451..991a17c 100644
--- a/www/css/channel.css
+++ b/www/css/channel.css
@@ -264,10 +264,32 @@ span.user-entry{
margin: 0.5em;
}
+#chat-panel-prompt-span{
+ flex: 1;
+ position: relative;
+ display: flex;
+ overflow: hidden;
+}
+
#chat-panel-prompt{
+ font-size: 10pt;
margin-left: 0.5em;
}
+#chat-panel-prompt-autocomplete{
+ position: absolute;
+ text-wrap: nowrap;
+ font-size: 10pt;
+ z-index: 10;
+ margin: 0;
+ left: 1em;
+ top: 0.6em;
+}
+
+#chat-panel-prompt-autocomplete-filler{
+ visibility: hidden;
+}
+
.toke{
text-align: center;
margin: 0.2em auto;
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index ed0e0cc..7a1ea20 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -287,6 +287,11 @@ p.channel-guide-entry-item{
background-color: var(--bg2);
}
+#chat-panel-prompt-autocomplete{
+ color: var(--focus0);
+ text-shadow: var(--focus-glow0-alt0);
+}
+
.chat-entry{
background-color: var(--bg2);
border-bottom: 1px solid var(--bg2-alt1);
diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js
index 29dbaef..b1518b2 100644
--- a/www/js/channel/chat.js
+++ b/www/js/channel/chat.js
@@ -34,6 +34,8 @@ class chatBox{
this.flairSelect = document.querySelector("#chat-panel-flair-select");
this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
this.chatPrompt = document.querySelector("#chat-panel-prompt");
+ this.autocompletePlaceholder = document.querySelector("#chat-panel-prompt-autocomplete-filler");
+ this.autocompleteDisplay = document.querySelector("#chat-panel-prompt-autocomplete-display");
this.settingsIcon = document.querySelector("#chat-panel-settings-icon");
this.adminIcon = document.querySelector("#chat-panel-admin-icon");
this.emoteIcon = document.querySelector("#chat-panel-emote-icon");
@@ -52,6 +54,7 @@ class chatBox{
setupInput(){
//Chat bar
this.chatPrompt.addEventListener("keydown", this.send.bind(this));
+ this.chatPrompt.addEventListener("input", this.checkAutocomplete.bind(this));
this.sendButton.addEventListener("click", this.send.bind(this));
this.settingsIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
this.adminIcon.addEventListener("click", ()=>{this.client.cPanel.setActivePanel(new panelObj(client))});
@@ -130,6 +133,11 @@ class chatBox{
this.resizeAspect();
}
+ catChat(text){
+ this.chatPrompt.value += text;
+ this.checkAutocomplete();
+ }
+
send(event){
if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
this.commandPreprocessor.preprocess(this.chatPrompt.value);
@@ -137,6 +145,14 @@ class chatBox{
}
}
+ checkAutocomplete(event){
+ //Rebuild this fucker every time because it really doesn't take that much compute power and emotes/used tokes change
+ //Worst case we could store it persistantly and update as needed but I think that might be much
+ const dictionary = this.commandPreprocessor.buildAutocompleteDictionary();
+ this.autocompletePlaceholder.innerHTML = this.chatPrompt.value;
+
+ }
+
handleClientInfo(data){
this.updateFlairSelect(data.flairList, data.user.flair);
this.updateHighSelect(data.user.highLevel);
diff --git a/www/js/channel/commandPreprocessor.js b/www/js/channel/commandPreprocessor.js
index 81a8866..cad3d5e 100644
--- a/www/js/channel/commandPreprocessor.js
+++ b/www/js/channel/commandPreprocessor.js
@@ -143,6 +143,27 @@ class commandPreprocessor{
return foundEmote;
}
+ buildAutocompleteDictionary(){
+ //This isn't complete, just a placeholder for now
+ let dictionary = {
+ tokes: [
+ "toke"
+ ],
+ serverCMD: [
+ "whisper",
+ "announce",
+ "serverannounce",
+ "clear",
+ "kick"
+ ],
+ localCMD:[
+ "high"
+ ]
+ };
+
+ return dictionary;
+ }
+
}
class commandProcessor{
diff --git a/www/js/channel/panels/emotePanel.js b/www/js/channel/panels/emotePanel.js
index a144eca..56bbe29 100644
--- a/www/js/channel/panels/emotePanel.js
+++ b/www/js/channel/panels/emotePanel.js
@@ -106,7 +106,7 @@ class emotePanel extends panelObj{
}
//Add the emote to the chatbox prompt
- this.client.chatBox.chatPrompt.value += `[${emote}]`;
+ this.client.chatBox.catChat(`[${emote}]`);
}
addPersonalEmote(event){