diff --git a/multichat-overlay/icons/badges/twitch-channel-point.png b/multichat-overlay/icons/badges/twitch-channel-point.png new file mode 100644 index 0000000..67d0a3e Binary files /dev/null and b/multichat-overlay/icons/badges/twitch-channel-point.png differ diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index 4ddd80e..4c7fa2f 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -35,6 +35,7 @@ const imageEmbedPermissionLevel = GetIntParam("imageEmbedPermissionLevel") || 20 const showTwitchMessages = GetBooleanParam("showTwitchMessages", true); const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true); const showTwitchSubs = GetBooleanParam("showTwitchSubs", true); +const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true); const showTwitchRaids = GetBooleanParam("showTwitchRaids", true); const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true); @@ -132,6 +133,11 @@ client.on('Twitch.GiftSub', (response) => { TwitchGiftSub(response.data); }) +client.on('Twitch.RewardRedemption', (response) => { + console.debug(response.data); + TwitchRewardRedemption(response.data); +}) + client.on('Twitch.Raid', (response) => { console.debug(response.data); TwitchRaid(response.data); @@ -626,6 +632,50 @@ async function TwitchGiftSub(data) { AddMessageItem(instance, data.messageId); } +async function TwitchRewardRedemption(data) { + if (!showTwitchChannelPointRedemptions) + return; + + // Get a reference to the template + const template = document.getElementById('cardTemplate'); + + // Create a new instance of the template + const instance = template.content.cloneNode(true); + + // Get divs + const cardDiv = instance.querySelector("#card"); + const headerDiv = instance.querySelector("#header"); + const avatarDiv = instance.querySelector("#avatar"); + const iconDiv = instance.querySelector("#icon"); + const titleDiv = instance.querySelector("#title"); + const contentDiv = instance.querySelector("#content"); + + // Set the card background colors + cardDiv.classList.add('twitch'); + + if (showAvatar) { + // Render avatars + const username = data.user_login; + const avatarURL = await GetAvatar(username); + const avatar = new Image(); + avatar.src = avatarURL; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + // Set the text + const username = data.user_name; + const rewardName = data.reward.title; + const cost = data.reward.cost; + const userInput = data.user_input; + const channelPointIcon = ``; + + titleDiv.innerHTML = `${username} redeemed ${rewardName} ${channelPointIcon} ${cost}`; + contentDiv.innerText = `${userInput}`; + + AddMessageItem(instance, data.messageId); +} + async function TwitchRaid(data) { if (!showTwitchRaids) return; diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json index 4284532..97cc09f 100644 --- a/multichat-overlay/settings/settings.json +++ b/multichat-overlay/settings/settings.json @@ -205,6 +205,14 @@ "defaultValue": true, "group": "Which Twitch messages do you want to see?" }, + { + "id": "showTwitchChannelPointRedemptions", + "label": "Channel Point Redemptions", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, { "id": "showTwitchRaids", "label": "Raids",