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:
parent
f2a40bdf7f
commit
8ed8fe4065
1 changed files with 9 additions and 3 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue