From a5f40b4e02122531772b050bde800378b92fe346 Mon Sep 17 00:00:00 2001
From: dragongoose <19649813+dragongoose@users.noreply.github.com>
Date: Sun, 19 Mar 2023 19:51:14 -0400
Subject: [PATCH] QOL change

---
 frontend/src/components/TwitchChat.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/TwitchChat.vue b/frontend/src/components/TwitchChat.vue
index 717bda8..4742c4f 100644
--- a/frontend/src/components/TwitchChat.vue
+++ b/frontend/src/components/TwitchChat.vue
@@ -27,9 +27,12 @@ export default {
   },
   mounted() {
     const chatList = this.$refs.chatList as Element
+    const chatStatusMessage = this.$refs.initConnectingStatus as Element
 
     this.ws.onmessage = (message) => {
-      if (message.data !== 'OK') {
+      if (message.data == 'OK') {
+        chatStatusMessage.textContent = `Connected to ${this.channelName}`
+      } else {
         this.messages.push(JSON.parse(message.data))
         this.scrollToBottom(chatList)
       }
@@ -37,7 +40,7 @@ export default {
 
     this.ws.onopen = (data) => {
       console.log(data)
-      this.ws.send('JOIN ' + this.props.channelName)
+      this.ws.send('JOIN ' + this.props.channelName?.toLowerCase())
     }
   },
   methods: {
@@ -51,8 +54,11 @@ export default {
 }
 </script>
 <template>
-  <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-xs flex flex-col">
-    <ul class="overflow-y-scroll h-[82vh]" ref="chatList">
+  <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">
+      <li>
+        <p ref="initConnectingStatus" class="text-gray-500 text-sm italic"> Connecting to {{ channelName }}.</p>
+      </li>
       <li v-for="message in getChat()" :key="messages.indexOf(message)">
         <div class="text-white inline-flex">
           <p class="text-sm">