0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 05:12:57 -05:00

Add user color and clear messages

This commit is contained in:
dragongoose 2023-03-27 16:40:48 -04:00
parent f2a40bdf7f
commit 8ed8fe4065

View file

@ -15,7 +15,7 @@ export default {
},
setup(props) {
let messages: Ref<
{ username: string; channel: string; message: string; messageType: string }[]
{ username: string; channel: string; message: string; messageType: string, tags: Record<string,string> }[]
> = ref([])
let ws = new WebSocket('ws://localhost:7000')
@ -34,6 +34,7 @@ export default {
chatStatusMessage.textContent = `Connected to ${this.channelName}`
} else {
this.messages.push(JSON.parse(message.data))
this.clearMessages()
this.scrollToBottom(chatList)
}
}
@ -49,13 +50,18 @@ export default {
},
scrollToBottom(el: Element) {
el.scrollTop = el.scrollHeight
},
clearMessages() {
if (this.messages.length > 50) {
this.messages.shift
}
}
}
}
</script>
<template>
<div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col">
<ul class="overflow-y-scroll h-[46.875rem]" ref="chatList">
<ul class="overflow-y-scroll overflow-x-hidden whitespace-pre-wrap h-[46.875rem]" ref="chatList">
<li>
<p ref="initConnectingStatus" class="text-gray-500 text-sm italic">
Connecting to {{ channelName }}.
@ -64,7 +70,7 @@ export default {
<li v-for="message in getChat()" :key="messages.indexOf(message)">
<div class="text-white inline-flex">
<p class="text-sm">
<strong class="text-ctp-pink font-bold text-sm">{{ message.username }}</strong
<strong :style="message.tags.color ? `color: ${message.tags.color};` : ``" class="text-ctp-pink font-bold text-sm">{{ message.username }}</strong
>: {{ message.message }}
</p>
</div>