rainbownapkin/canopy
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

Finished up with css-only flair implementation.

Browse source
This commit is contained in:
rainbownapkin 2024-11-21 08:42:21 -05:00
parent 5b5f495853
commit 9dbbc4e924
13 changed files with 231 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

16
www/js/channel/channel.js
View file

@ -43,9 +43,19 @@ class channel{
document.title = `${this.channelName} - Connected`
});
this.socket.on("error", (data) => {
console.log(data);
});
this.socket.on("clientMetadata", this.handleClientInfo.bind(this));
this.socket.on("error", console.log);
}
handleClientInfo(data){
this.user = {
id: data.user.id,
name: data.user.name,
rank: data.user.rank
}
this.chatBox.handleClientInfo(data);
}
}

130
www/js/channel/chat.js
View file

@ -27,7 +27,8 @@ class chatBox{
//Element Nodes
this.chatPanel = document.querySelector("#chat-panel-div");
this.highLevel = document.querySelector("#chat-panel-high-level-select");
this.highSelect = document.querySelector("#chat-panel-high-level-select");
this.flairSelect = document.querySelector("#chat-panel-flair-select");
this.chatBuffer = document.querySelector("#chat-panel-buffer-div");
this.chatPrompt = document.querySelector("#chat-panel-prompt");
this.settingsIcon = document.querySelector("#chat-panel-settings-icon");
@ -57,6 +58,7 @@ class chatBox{
this.aspectLockIcon.addEventListener("click", this.lockAspect.bind(this));
this.showChatIcon.addEventListener("click", ()=>{this.toggleUI()});
this.hideChatIcon.addEventListener("click", ()=>{this.toggleUI()});
this.flairSelect.addEventListener("change", this.setFlair.bind(this));
//Clickdragger/Resize
this.clickDragger.handle.addEventListener("mousedown", this.unlockAspect.bind(this));
@ -69,6 +71,92 @@ class chatBox{
});
}
displayChat(chat){
//Create chat-entry span
var chatEntry = document.createElement('span');
chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${chat.user}`);
//Create high-level label
var highLevel = document.createElement('p');
highLevel.classList.add("chat-panel-buffer","chat-entry-high-level");
highLevel.innerHTML = `${chat.high}`;
chatEntry.appendChild(highLevel);
//Create username label
var userLabel = document.createElement('p');
userLabel.classList.add("chat-panel-buffer","chat-entry-username");
if(chat.flair != ""){
var flair = `flair-${chat.flair}`;
}else{
var flair = this.client.userList.colorMap.get(chat.user);
}
//Create color span
var colorSpan = document.createElement('span');
colorSpan.classList.add("chat-entry-flair-span", flair);
colorSpan.innerHTML = `${chat.user}`;
userLabel.innerHTML = `${colorSpan.outerHTML}: `;
chatEntry.appendChild(userLabel);
//Create chat body
var chatBody = document.createElement('p');
chatBody.classList.add("chat-panel-buffer","chat-entry-body");
chatBody.innerHTML = chat.msg;
chatEntry.appendChild(chatBody);
this.chatBuffer.appendChild(chatEntry);
}
async send(event){
if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
this.client.socket.emit("chatMessage",{msg: this.chatPrompt.value, high: this.highSelect.value});
this.chatPrompt.value = "";
}
}
handleClientInfo(data){
this.updateFlairSelect(data.flairList, data.user.flair);
}
setFlair(event){
const flair = event.target.value;
this.client.socket.emit("setFlair", {flair});
}
updateFlairSelect(flairList, flair){
//clear current flair select
this.flairSelect.innerHTML = "";
//Inject flair object for standard flair like the hack we are
flairList.push({
name: "",
displayName: "Classic"
});
//For each flair in flairlist
flairList.forEach((flair) => {
//Create an option
var flairOption = document.createElement('option');
//Set the name and innerHTML
flairOption.value = flair.name;
flairOption.innerHTML = flair.displayName;
//Append it to the select
this.flairSelect.appendChild(flairOption);
});
//Set the selected flair in the UI
this.flairSelect.value = flair;
//Re-style the UI, do this in two seperate steps in-case we're running for the first time and have nothing to replace.
this.flairSelect.className = this.flairSelect.className.replace(/flair-\S*/, "");
this.flairSelect.classList.add(`flair-${flair}`);
}
lockAspect(event){
//prevent the user from breaking shit :P
if(this.chatPanel.style.display != "none"){
@ -112,44 +200,4 @@ class chatBox{
this.client.player.hideVideoIcon.style.display = "none";
}
}
displayChat(chat){
//Create chat-entry span
var chatEntry = document.createElement('span');
chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${chat.user}`);
//Create high-level label
var highLevel = document.createElement('p');
highLevel.classList.add("chat-panel-buffer","chat-entry-high-level");
highLevel.innerHTML = `${chat.high}`;
chatEntry.appendChild(highLevel);
//Create username label
var userLabel = document.createElement('p');
userLabel.classList.add("chat-panel-buffer","chat-entry-username");
//Create color span
var colorSpan = document.createElement('span');
colorSpan.classList.add(this.client.userList.colorMap.get(chat.user));
colorSpan.innerHTML = `${chat.user}`;
userLabel.innerHTML = `${colorSpan.outerHTML}: `;
chatEntry.appendChild(userLabel);
//Create chat body
var chatBody = document.createElement('p');
chatBody.classList.add("chat-panel-buffer","chat-entry-body");
chatBody.innerHTML = chat.msg;
chatEntry.appendChild(chatBody);
this.chatBuffer.appendChild(chatEntry);
}
async send(event){
if((!event || !event.key || event.key == "Enter") && this.chatPrompt.value){
this.client.socket.emit("chatMessage",{msg: this.chatPrompt.value, high: this.highLevel.value});
this.chatPrompt.value = "";
}
}
}

18
www/js/channel/userlist.js
View file

@ -53,7 +53,7 @@ class userList{
}
defineListeners(){
this.client.socket.on('user-list', (data) => {
this.client.socket.on('userList', (data) => {
this.updateList(data);
});
}
@ -72,12 +72,12 @@ class userList{
var color = this.userColors[Math.floor(Math.random()*this.userColors.length)]
//if this user was in the previous colormap
if(this.colorMap.get(user) != null){
if(this.colorMap.get(user.user) != null){
//Override with previous color
color = this.colorMap.get(user);
color = this.colorMap.get(user.user);
}
newMap.set(user, color);
newMap.set(user.user, color);
this.renderUser(user, color);
});
@ -87,8 +87,14 @@ class userList{
renderUser(user, color){
var userEntry = document.createElement('p');
userEntry.innerText = user;
userEntry.id = `user-entry-${user}`;
userEntry.innerText = user.user;
userEntry.id = `user-entry-${user.user}`;
//Override color with flair
if(user.flair != ""){
color = `flair-${user.flair}`;
}
userEntry.classList.add("chat-panel-users","user-entry",color);
this.userList.appendChild(userEntry);