khyretos/LoquendoBot
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions

extra changes

Browse source
This commit is contained in:
Khyretos 2023-12-31 22:13:19 +01:00
parent f1df6b24ed
commit bfd94da1d0
2 changed files with 24 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/modules/chat/main.css
View file

@ -88,10 +88,19 @@ body {
} }
.msg-container { .msg-container {
direction: ltr;
position: static; position: static;
display: inline-block;
width: 100%; 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 { .message-window {
@ -129,40 +138,34 @@ body {
text-align: left; text-align: left;
max-width: 100%; max-width: 100%;
height: auto; height: auto;
min-width: 125px; min-width: fit-content;
hyphens: auto; hyphens: auto;
bottom: 0; /* bottom: 0; */
right: 0; /* right: 0; */
float: right; /* float: right; */
overflow-wrap: break-word; overflow-wrap: break-word;
}
.message {
position: relative; position: relative;
border: 2px solid #ff80e1; 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, 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)); */ /* background: linear-gradient(45deg, rgba(72, 0, 154, 0.7), rgba(138, 43, 226, 0.7)); */
color: white; color: white;
padding: 15px; padding: 15px;
border-radius: 20px; border-radius: 20px;
margin-bottom: 10px;
} }
/*
.message::after {
} */
.arrow { .arrow {
content: ''; content: '';
border: 2px solid #ff80e1; border: 2px solid #ff80e1;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 100%;
transform: translateX(-50%) rotate(180deg); transform: translateX(-50%) rotate(180deg);
border-width: 10px; border-width: 10px;
border-style: solid; border-style: solid;
border-color: transparent transparent rgb(255, 128, 225, 0.7) transparent; border-color: transparent transparent rgb(255, 128, 225, 0.7) transparent;
color: #ff80e1; color: #ff80e1;
bottom: -10px;
} }
.sender { .sender {

12
src/modules/chat/main.js
View file

@ -63,8 +63,8 @@ function streamText() {
} }
} }
function displayTwitchMessage(logoUrl, username, messageObject) { function displayTwitchMessage(message) {
if (!messageObject) { if (!message.filteredMessage) {
return; return;
} }
@ -88,7 +88,7 @@ function displayTwitchMessage(logoUrl, username, messageObject) {
article.innerHTML = placeMessage; article.innerHTML = placeMessage;
const msg = article.querySelector('.message'); const msg = article.querySelector('.message');
msg.innerHTML = `<div class="sender">${username}</div>`; // \n${message}`; msg.innerHTML = `<div class="sender">${message.username}</div>`; // \n${message}`;
msg.style.fontSize = '12pt'; msg.style.fontSize = '12pt';
@ -114,12 +114,12 @@ function displayTwitchMessage(logoUrl, username, messageObject) {
}); });
} }
// fullMessageLength = getFullMessageLength(messageObject); // fullMessageLength = getFullMessageLength(messageObject);
messageStream = messageObject.filtered; messageStream = message.filteredMessage;
textStreamContainer = document.querySelector('.message'); textStreamContainer = document.querySelector('.message');
streamText(); streamText();
} }
// // Receive a message from the server // // Receive a message from the server
socket.on('message', (logoUrl, username, message, messageDuration) => { socket.on('message', message => {
displayTwitchMessage(logoUrl, username, message); displayTwitchMessage(message);
}); });