diff --git a/receipt-printer/icons/platforms/kick.png b/receipt-printer/icons/platforms/kick.png new file mode 100644 index 0000000..9cc9afa Binary files /dev/null and b/receipt-printer/icons/platforms/kick.png differ diff --git a/receipt-printer/icons/platforms/kofi.png b/receipt-printer/icons/platforms/kofi.png new file mode 100644 index 0000000..8812cac Binary files /dev/null and b/receipt-printer/icons/platforms/kofi.png differ diff --git a/receipt-printer/icons/platforms/patreon.png b/receipt-printer/icons/platforms/patreon.png new file mode 100644 index 0000000..22c9748 Binary files /dev/null and b/receipt-printer/icons/platforms/patreon.png differ diff --git a/receipt-printer/icons/platforms/tiktok.png b/receipt-printer/icons/platforms/tiktok.png new file mode 100644 index 0000000..c9e0da5 Binary files /dev/null and b/receipt-printer/icons/platforms/tiktok.png differ diff --git a/receipt-printer/icons/platforms/tipeeeStream.png b/receipt-printer/icons/platforms/tipeeeStream.png new file mode 100644 index 0000000..cd981f3 Binary files /dev/null and b/receipt-printer/icons/platforms/tipeeeStream.png differ diff --git a/receipt-printer/icons/platforms/twitch.png b/receipt-printer/icons/platforms/twitch.png new file mode 100644 index 0000000..dcbd6c8 Binary files /dev/null and b/receipt-printer/icons/platforms/twitch.png differ diff --git a/receipt-printer/icons/platforms/youtube.png b/receipt-printer/icons/platforms/youtube.png new file mode 100644 index 0000000..5abdb7b Binary files /dev/null and b/receipt-printer/icons/platforms/youtube.png differ diff --git a/receipt-printer/index.html b/receipt-printer/index.html index f41a78a..ecae6ea 100644 --- a/receipt-printer/index.html +++ b/receipt-printer/index.html @@ -29,6 +29,7 @@ diff --git a/receipt-printer/script.js b/receipt-printer/script.js index 1ff4974..200b7d2 100644 --- a/receipt-printer/script.js +++ b/receipt-printer/script.js @@ -81,6 +81,7 @@ async function CustomEvent(data) { const avatarEl = instance.querySelector('#avatar'); const titleEl = instance.querySelector('#title'); const subtitleEl = instance.querySelector('#subtitle'); + const iconEl = instance.querySelector('#icon'); const dateEl = instance.querySelector('#date'); // Set the main contents @@ -126,6 +127,9 @@ async function CustomEvent(data) { } contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'twitch'); } break; case ('TwitchSub'): @@ -138,6 +142,9 @@ async function CustomEvent(data) { messageEl.innerHTML = 'First time subscriber!'; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'twitch'); } break; case ('TwitchReSub'): @@ -152,13 +159,17 @@ async function CustomEvent(data) { messageEl.innerHTML += `

${data.messageStripped}`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'twitch'); } break; case ('TwitchGiftSub'): { // Don't put profile pictures for subs that come from Gift Bombs to avoid rate limits if (data.fromGiftBomb) - avatarEl.style.display = 'none'; + //avatarEl.style.display = 'none'; + return; else avatarEl.src = await GetAvatar(data.recipientUserName, 'twitch'); titleEl.innerText = `Gifted Sub`; @@ -171,6 +182,9 @@ async function CustomEvent(data) { messageEl.innerHTML += `${data.user}!`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'twitch'); } break; case ('TwitchGiftBomb'): @@ -183,15 +197,23 @@ async function CustomEvent(data) { else subtitleEl.innerHTML += `
${data.user}`; + const messageEl = document.createElement('div'); if (data.totalGifts > 1) { - const messageEl = document.createElement('div'); - messageEl.innerHTML = `They've gifted ${data.totalGifts} subs in total!`; + messageEl.innerHTML = `They've gifted ${data.totalGifts} subs in total!

`; + } - contentEl.appendChild(messageEl); - } - else { - contentEl.style.display = 'none'; - } + // Get a list of all recipient users + Object.keys(data) + .filter(key => /^gift\.recipientUser\d+$/.test(key)) + .forEach((key, index) => { + const username = data[key]; + messageEl.innerHTML += `${username}
`; + }); + + contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'twitch'); } break; case ('TwitchRaid'): @@ -202,6 +224,9 @@ async function CustomEvent(data) { messageEl.innerHTML = `${data.user}
is raiding with a party of
${data.viewers} viewers!`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'twitch'); } break; @@ -217,6 +242,9 @@ async function CustomEvent(data) { subtitleEl.innerText = `${data.user}`; contentEl.style.display = 'none'; + + // Set the platform icon + SetPlatformIcon(iconEl, 'youtube'); } break; case ('YouTubeGiftMembershipReceived'): @@ -231,6 +259,9 @@ async function CustomEvent(data) { messageEl.innerHTML = `${data.user}
received a membership from
${data.gifterUser}!`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'youtube'); } break; case ('YouTubeSuperChat'): @@ -248,6 +279,9 @@ async function CustomEvent(data) { messageEl.innerHTML += `

${data.message}`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'youtube'); } break; case ('YouTubeSuperSticker'): @@ -264,6 +298,9 @@ async function CustomEvent(data) { messageEl.innerHTML = `${data.user}
sent a Super Sticker!`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'youtube'); } break; break; @@ -283,6 +320,9 @@ async function CustomEvent(data) { messageEl.innerHTML = 'First time subscriber!'; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'kick'); } break; case ('KickGiftSubscription'): @@ -294,6 +334,9 @@ async function CustomEvent(data) { messageEl.innerHTML = `${data["recipient.userName"]}
received a sub from
${data.user}!`; contentEl.appendChild(messageEl); + + // Set the platform icon + SetPlatformIcon(iconEl, 'kick'); } break; case ('KickMassGiftSubscription'): @@ -354,6 +397,9 @@ async function CustomEvent(data) { contentEl.appendChild(messageEl); } + + // Set the platform icon + SetPlatformIcon(iconEl, 'kick'); } break; @@ -682,6 +728,14 @@ function EscapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } +function SetPlatformIcon(el, platform) { + // Set the platform icon + let baseURL = window.location.href; + baseURL = baseURL.replace(/index\.html$/i, ''); + + el.src = `${baseURL}/icons/platforms/${platform}.png`; +} + /////////////////////////////////// diff --git a/receipt-printer/style.css b/receipt-printer/style.css index 47d60c3..ea55bb0 100644 --- a/receipt-printer/style.css +++ b/receipt-printer/style.css @@ -31,22 +31,25 @@ body { } #content { - border-top: 1px solid black; + /* border-top: 1px solid black; border-bottom: 1px solid black; border-left: none; border-right: none; - margin: 1em 0em; + margin: 1em 0em; */ padding: 0.5em 0em; } +#icon { + height: 1em; +} + #date { - margin-top: 1em; + margin: 0.5em 0em; font-size: 0.7em; text-transform: uppercase; } #footer { - } .emote {