ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

add padding to chat and refactor badge system

Browse Source
This commit is contained in:
dragongoose 2023-04-04 09:01:18 -04:00
parent 0706aaee42
commit e322b2b567
1 changed files with 9 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/TwitchChat.vue
View File

@ -1,14 +1,8 @@
<script lang="ts"> <script lang="ts">
import { ref, type Ref } from 'vue' import { ref, type Ref } from 'vue'
import BadgeVue from './ChatBadge.vue' import BadgeVue from './ChatBadge.vue'
import { getBadges } from '@/assets/badges'
interface Badge { import type { Badge } from '@/assets/types'
id: string,
title: string,
setId: string,
version: string,
images: { [k:string]: string }
}
export default { export default {
props: { props: {
@ -52,7 +46,6 @@ export default {
chatStatusMessage.textContent = `Connected to ${this.channelName}` chatStatusMessage.textContent = `Connected to ${this.channelName}`
} else { } else {
this.messages.push(JSON.parse(message.data)) this.messages.push(JSON.parse(message.data))
this.getBadges(JSON.parse(message.data))
this.clearMessages() this.clearMessages()
this.scrollToBottom(chatList) this.scrollToBottom(chatList)
} }
@ -75,26 +68,15 @@ export default {
} }
}, },
getBadges(message: { username: string, channel: string, message: string, messageType: string, tags: Record<string, string> }) { getBadges(message: { username: string, channel: string, message: string, messageType: string, tags: Record<string, string> }) {
let badgesString = message.tags.badges let badgesString = message.tags.badges;
if (!badgesString) return; if (!badgesString) return;
let badges = badgesString.split(',') let badges = badgesString.split(',');
let formatedBadges = badges.map((badgeWithVersion) => { let formatedBadges = badges.map((badgeWithVersion) => {
const [setId, version] = badgeWithVersion.split('/') const [setId, version] = badgeWithVersion.split('/');
return { setId, version } return { setId, version };
}) });
return getBadges(this.badges, formatedBadges);
const foundBadges = []
for(let badgeToFind of formatedBadges) {
const badge = this.badges
.filter((badge) => badge.setId === badgeToFind.setId)
.find((badge) => badge.version === badgeToFind.version);
if(badge)
foundBadges.push(badge)
}
return foundBadges
} }
}, },
components: { components: {
@ -107,7 +89,7 @@ export default {
<!-- SYSTEM MESSAGES --> <!-- SYSTEM MESSAGES -->
<ul <ul
class="overflow-y-scroll overflow-x-hidden whitespace-pre-wrap h-[46.875rem]" class="overflow-y-scroll overflow-x-hidden space-y-1 whitespace-pre-wrap h-[46.875rem]"
ref="chatList" ref="chatList"
> >
<li> <li>