diff --git a/src/modules/chat/main.css b/src/modules/chat/main.css index ff681e4..e5dde10 100644 --- a/src/modules/chat/main.css +++ b/src/modules/chat/main.css @@ -88,10 +88,19 @@ body { } .msg-container { + direction: ltr; position: static; - display: inline-block; width: 100%; - padding-top: 10px; + padding: 10px 0px 0px 0px; + display: grid; + grid-template: 1fr / 1fr; + align-self: center; + width: fit-content; +} + +.msg-container > * { + grid-column: 1 / 1; + grid-row: 1 / 1; } .message-window { @@ -129,40 +138,34 @@ body { text-align: left; max-width: 100%; height: auto; - min-width: 125px; + min-width: fit-content; hyphens: auto; - bottom: 0; - right: 0; - float: right; + /* bottom: 0; */ + /* right: 0; */ + /* float: right; */ overflow-wrap: break-word; -} - -.message { position: relative; border: 2px solid #ff80e1; - box-shadow: 0 2px 10px rgba(255, 128, 225, 0.5); + /* box-shadow: 0 2px 10px rgba(255, 128, 225, 0.5); */ background: linear-gradient(45deg, rgb(15, 12, 41, 0.7), rgb(48, 43, 99, 0.7)); /* background: linear-gradient(45deg, rgba(72, 0, 154, 0.7), rgba(138, 43, 226, 0.7)); */ - color: white; padding: 15px; border-radius: 20px; + margin-bottom: 10px; } -/* -.message::after { -} */ .arrow { content: ''; border: 2px solid #ff80e1; position: absolute; left: 50%; - top: 100%; transform: translateX(-50%) rotate(180deg); border-width: 10px; border-style: solid; border-color: transparent transparent rgb(255, 128, 225, 0.7) transparent; color: #ff80e1; + bottom: -10px; } .sender { diff --git a/src/modules/chat/main.js b/src/modules/chat/main.js index 5d01727..de5c8db 100644 --- a/src/modules/chat/main.js +++ b/src/modules/chat/main.js @@ -63,8 +63,8 @@ function streamText() { } } -function displayTwitchMessage(logoUrl, username, messageObject) { - if (!messageObject) { +function displayTwitchMessage(message) { + if (!message.filteredMessage) { return; } @@ -88,7 +88,7 @@ function displayTwitchMessage(logoUrl, username, messageObject) { article.innerHTML = placeMessage; const msg = article.querySelector('.message'); - msg.innerHTML = `
${username}
`; // \n${message}`; + msg.innerHTML = `
${message.username}
`; // \n${message}`; msg.style.fontSize = '12pt'; @@ -114,12 +114,12 @@ function displayTwitchMessage(logoUrl, username, messageObject) { }); } // fullMessageLength = getFullMessageLength(messageObject); - messageStream = messageObject.filtered; + messageStream = message.filteredMessage; textStreamContainer = document.querySelector('.message'); streamText(); } // // Receive a message from the server -socket.on('message', (logoUrl, username, message, messageDuration) => { - displayTwitchMessage(logoUrl, username, message); +socket.on('message', message => { + displayTwitchMessage(message); });