diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js index 0402a4b..b9aa843 100644 --- a/www/js/channel/chat.js +++ b/www/js/channel/chat.js @@ -213,48 +213,8 @@ class chatBox{ * @param {Object} data De-hydrated chat object from server */ displayChat(data){ - //Create chat-entry span - var chatEntry = document.createElement('span'); - chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${data.user}`); - - //Create high-level label - var highLevel = document.createElement('p'); - highLevel.classList.add("chat-panel-buffer","chat-entry-high-level","high-level"); - highLevel.textContent = utils.unescapeEntities(`${data.highLevel}`); - chatEntry.appendChild(highLevel); - - //If we're not using classic flair - if(data.flair != "classic"){ - //Use flair - var flair = `flair-${data.flair}`; - //Otherwise - }else{ - //Pull user's assigned color from the color map - var flair = this.client.userList.colorMap.get(data.user); - } - - //Create username label - var userLabel = document.createElement('p'); - userLabel.classList.add("chat-panel-buffer", "chat-entry-username", ); - - //Create color span - var flairSpan = document.createElement('span'); - flairSpan.classList.add("chat-entry-flair-span", flair); - flairSpan.innerHTML = data.user; - - //Inject flair span into user label before the colon - userLabel.innerHTML = `${flairSpan.outerHTML}: `; - - //Append user label - chatEntry.appendChild(userLabel); - - //Create chat body - var chatBody = document.createElement('p'); - chatBody.classList.add("chat-panel-buffer","chat-entry-body"); - chatEntry.appendChild(chatBody); - //Append the post-processed chat-body to the chat buffer - this.chatBuffer.appendChild(this.chatPostprocessor.postprocess(chatEntry, data)); + this.chatBuffer.appendChild(this.chatPostprocessor.postprocess(data)); //Set size to aspect on launch this.resizeAspect(); diff --git a/www/js/channel/chatPostprocessor.js b/www/js/channel/chatPostprocessor.js index 6bc03c0..80d29a7 100644 --- a/www/js/channel/chatPostprocessor.js +++ b/www/js/channel/chatPostprocessor.js @@ -35,13 +35,13 @@ class chatPostprocessor{ * @param {Object} rawData - Raw data from server * @returns {Node} Post-Processed Chat Entry */ - postprocess(chatEntry, rawData){ + postprocess(rawData){ //Create empty array to hold filter spans this.filterSpans = []; //Set raw message data this.rawData = rawData; //Set current chat nodes - this.chatEntry = chatEntry; + this.buildEntry(); this.chatBody = this.chatEntry.querySelector(".chat-entry-body"); //Split the chat message into an array of objects representing each word/chunk @@ -87,6 +87,48 @@ class chatPostprocessor{ return this.chatEntry; } + buildEntry(){ + //Create chat-entry span + this.chatEntry = document.createElement('span'); + this.chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${this.rawData.user}`); + + //Create high-level label + var highLevel = document.createElement('p'); + highLevel.classList.add("chat-panel-buffer","chat-entry-high-level","high-level"); + highLevel.textContent = utils.unescapeEntities(`${this.rawData.highLevel}`); + this.chatEntry.appendChild(highLevel); + + //If we're not using classic flair + if(this.rawData.flair != "classic"){ + //Use flair + var flair = `flair-${this.rawData.flair}`; + //Otherwise + }else{ + //Pull user's assigned color from the color map + var flair = this.client.userList.colorMap.get(this.rawData.user); + } + + //Create username label + var userLabel = document.createElement('p'); + userLabel.classList.add("chat-panel-buffer", "chat-entry-username", ); + + //Create color span + var flairSpan = document.createElement('span'); + flairSpan.classList.add("chat-entry-flair-span", flair); + flairSpan.innerHTML = this.rawData.user; + + //Inject flair span into user label before the colon + userLabel.innerHTML = `${flairSpan.outerHTML}: `; + + //Append user label + this.chatEntry.appendChild(userLabel); + + //Create chat body + var chatBody = document.createElement('p'); + chatBody.classList.add("chat-panel-buffer","chat-entry-body"); + this.chatEntry.appendChild(chatBody); + } + /** * Splits message into an array of Word Objects for further processing */ diff --git a/www/js/channel/panels/pmPanel.js b/www/js/channel/panels/pmPanel.js index 261c694..13d5349 100644 --- a/www/js/channel/panels/pmPanel.js +++ b/www/js/channel/panels/pmPanel.js @@ -223,21 +223,16 @@ class pmPanel extends panelObj{ } } + /** + * Renders message out to PM Panel Message Buffer + * @param {Object} message - Message to render + */ renderMessage(message){ - const msgSpan = document.createElement('span'); + //Run postprocessing functions on chat message + const postprocessedMessage = client.chatBox.chatPostprocessor.postprocess(message); - const msgSender = document.createElement('p'); - msgSender.innerText = utils.unescapeEntities(`${message.sender}:`); - msgSender.classList.add('pm-panel-sesh-message-sender'); - - const msgContent = document.createElement('p'); - msgContent.innerText = utils.unescapeEntities(message.msg); - msgContent.classList.add('pm-panel-sesh-message-content'); - - msgSpan.appendChild(msgSender); - msgSpan.appendChild(msgContent); - - this.seshBuffer.appendChild(msgSpan); + //Append message to buffer + this.seshBuffer.appendChild(postprocessedMessage); } }