Add badges and improve message parsing

src/assets/badges.ts

@@ -1,4 +1,4 @@
-import type { Badge } from './types';
+import type { Badge, ParsedMessage } from './types';
 
 export function getBadges(badges: Badge[], badgesToFind: { setId: string; version: string; }[]) {
   const foundBadges = [];
@@ -17,11 +17,11 @@ export function getBadges(badges: Badge[], badgesToFind: { setId: string; versio
   return foundBadges;
 }
 
-export const getBadgesFromMessage = (message: { username: string, channel: string, message: string, messageType: string, tags: Record<string, string> }, allBadges: Badge[]) => {
+export const getBadgesFromMessage = (message: ParsedMessage, allBadges: Badge[]) => {
-    let badgesString = message.tags.badges;
+    let badgesString = message.data.tags.badges;
     if (!badgesString) return;
     let badges = badgesString.split(',');
-    let formatedBadges = badges.map((badgeWithVersion) => {
+    let formatedBadges = badges.map((badgeWithVersion: string) => {
       const [setId, version] = badgeWithVersion.split('/');
       return { setId, version };
     });

src/assets/messageParser.ts

@@ -0,0 +1,48 @@
+import type { Badge, ParsedMessage } from "./types";
+import { getBadgesFromMessage } from './badges'
+
+
+export function parseMessage(messageData: string, allBadges: Badge[]): ParsedMessage {
+    const message = JSON.parse(messageData);
+  
+    switch (message.type) {
+      case "PRIVMSG": {
+        const tags = message.tags
+        const username = message.username
+        const data: ParsedMessage = {
+          type: "PRIVMSG",
+          data: { message: message.message, username, tags },
+        };
+
+        const badges = getBadgesFromMessage(data, allBadges);
+        data.data.badges = badges
+
+        return data
+      }
+      case "USERNOTICE": {
+        const username = message.tags.login;
+        const resub = message.tags["msg-id"] === "resub";
+        const months = parseInt(message.tags["msg-param-cumulative-months"]);
+        return {
+          type: "USERNOTICE",
+          data: { username, resub, months },
+        };
+      }
+      case "CLEARMSG": {
+        return {
+          type: "CLEARMSG",
+          data: {
+            username: message.tags['@login'],
+          }
+        }
+      }
+      // Add more cases for other message types here
+      default: {
+        return {
+          type: "UNKNOWN",
+          data: { message },
+        };
+      }
+    }
+  }
+  

src/assets/types/ParsedMessage.ts

@@ -1,5 +1,5 @@
 export interface ParsedMessage {
     type: string;
-    data: any;
+    data: { [k: string]: any };
 };
   

src/components/TwitchChat.vue

@@ -2,7 +2,8 @@
 import { ref, type Ref } from 'vue'
 import BadgeVue from './ChatBadge.vue'
 import { getBadges } from '@/assets/badges'
-import type { Badge } from '@/assets/types'
+import { parseMessage } from '@/assets/messageParser'
+import type { Badge, ParsedMessage } from '@/assets/types'
 
 export default {
   props: {
@@ -17,21 +18,13 @@ export default {
     }
   },
   async setup(props) {
-    let messages: Ref<
+    let messages: Ref<ParsedMessage[]> = ref([])
-      {
-        username: string
-        channel: string
-        message: string
-        messageType: string
-        tags: Record<string, string>
-      }[]
-    > = ref([])
     
     const badgesFetch = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/badges?channelName=${props.channelName}`)
     let badges: Badge[] =  await badgesFetch.json()
 
     return {
-      ws: new WebSocket('ws://localhost:7000'),
+      ws: new WebSocket(`ws://localhost:7001`),
       messages,
       badges,
       props,
@@ -45,7 +38,7 @@ export default {
       if (message.data == 'OK') {
         chatStatusMessage.textContent = `Connected to ${this.channelName}`
       } else {
-        this.messages.push(JSON.parse(message.data))
+        this.messages.push(parseMessage(message.data, this.badges))
         this.clearMessages()
         this.scrollToBottom(chatList)
       }
@@ -67,11 +60,11 @@ export default {
         this.messages.shift
       }
     },
-    getBadges(message: { username: string, channel: string, message: string, messageType: string, tags: Record<string, string> }) {
+    getBadges(message: ParsedMessage) {
-      let badgesString = message.tags.badges;
+      let badgesString = message.data.tags.badges;
       if (!badgesString) return;
       let badges = badgesString.split(',');
-      let formatedBadges = badges.map((badgeWithVersion) => {
+      let formatedBadges = badges.map((badgeWithVersion: string) => {
         const [setId, version] = badgeWithVersion.split('/');
         return { setId, version };
       });
@@ -98,7 +91,8 @@ export default {
         </p>
       </li>
       <li v-for="message in getChat()" :key="messages.indexOf(message)">
-        <div class="text-white inline-flex">
+
+        <div v-if="message.type === 'PRIVMSG'" class="text-white inline-flex">
           
           <!-- CHAT MESSAGE-->
           <p class="text-sm items-center">
@@ -110,11 +104,19 @@ export default {
             </ul>
             
             <strong
-              :style="message.tags.color ? `color: ${message.tags.color};` : ``"
+              :style="message.data.tags.color ? `color: ${message.data.tags.color};` : ``"
               class="text-ctp-pink font-bold">
-              {{ message.username }}</strong>: {{ message.message }}
+              {{ message.data.username }}</strong>: {{ message.data.message }}
           </p>
         </div>
+
+        <div v-else-if="message.type === 'CLEARMSG'" class="text-white inline-flex">
+          <p class="text-sm text-gray-500 italic"> Message by {{ message.data.username }} removed </p>
+        </div>
+
+        <div v-else class="text-white">
+          {{ message }}
+        </div>
       </li>
     </ul>
   </div>