diff --git a/horizontal-chat/icons/platforms/kofi.png b/horizontal-chat/icons/platforms/kofi.png
new file mode 100644
index 0000000..8812cac
Binary files /dev/null and b/horizontal-chat/icons/platforms/kofi.png differ
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 2821690..953362e 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -47,6 +47,7 @@ const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true)
const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
+const showKofiDonations = GetBooleanParam("showKofiDonations", true);
// Set fonts for the widget
document.body.style.fontFamily = font;
@@ -190,6 +191,26 @@ client.on('Patreon.PledgeCreated', (response) => {
PatreonPledgeCreated(response.data);
})
+client.on('Kofi.Donation', (response) => {
+ console.debug(response.data);
+ KofiDonation(response.data);
+})
+
+client.on('Kofi.Subscription', (response) => {
+ console.debug(response.data);
+ KofiSubscription(response.data);
+})
+
+client.on('Kofi.Resubscription', (response) => {
+ console.debug(response.data);
+ KofiResubscription(response.data);
+})
+
+client.on('Kofi.ShopOrder', (response) => {
+ console.debug(response.data);
+ KofiShopOrder(response.data);
+})
+
/////////////////////
@@ -685,6 +706,74 @@ function PatreonPledgeCreated(data) {
ShowAlert(message, 'patreon');
}
+function KofiDonation(data) {
+ if (!showKofiDonations)
+ return;
+
+ const user = data.from;
+ const amount = data.amount;
+ const currency = data.currency;
+ const kofiIcon = `
`;
+
+ let message = "";
+ if (currency == "USD")
+ message = `${kofiIcon} ${user} donated $${amount}`;
+ else
+ message = `${kofiIcon} ${user} donated ${currency} ${amount}`;
+
+ ShowAlert(message, 'kofi');
+}
+
+function KofiSubscription(data) {
+ if (!showKofiDonations)
+ return;
+
+ const user = data.from;
+ const amount = data.amount;
+ const currency = data.currency;
+ const kofiIcon = `
`;
+
+ let message = "";
+ if (currency == "USD")
+ message = `${kofiIcon} ${user} subscribed ($${amount})`;
+ else
+ message = `${kofiIcon} ${user} subscribed (${currency} ${amount})`;
+
+ ShowAlert(message, 'kofi');
+}
+
+function KofiResubscription(data) {
+ if (!showKofiDonations)
+ return;
+
+ const user = data.from;
+ const tier = data.tier;
+ const kofiIcon = `
`;
+
+ let message = `${kofiIcon} ${user} subscribed (${tier})`;
+
+ ShowAlert(message, 'kofi');
+}
+
+function KofiShopOrder(data) {
+ if (!showKofiDonations)
+ return;
+
+ const user = data.from;
+ const amount = data.amount;
+ const currency = data.currency;
+ const itemTotal = data.items.length;
+ const kofiIcon = `
`;
+
+ let message = "";
+ if (currency == "USD")
+ message = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi ($${amount})`;
+ else
+ message = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi (${currency} ${amount})`;
+
+ ShowAlert(message, 'kofi');
+}
+
//////////////////////
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index a109855..e2daf94 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -215,6 +215,14 @@
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
+ {
+ "id": "showKofiDonations",
+ "label": "Ko-fi Donations",
+ "description": "",
+ "type": "checkbox",
+ "defaultValue": true,
+ "group": "Which donation messages do you want to see?"
+ },
{
"id": "address",
"label": "Address",
diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css
index 1ca9a86..5e3df9c 100644
--- a/horizontal-chat/style.css
+++ b/horizontal-chat/style.css
@@ -245,6 +245,10 @@ li {
background: linear-gradient(#c76633, #fd5e0a) !important;
}
+.kofi {
+ background: linear-gradient(#54c7ee, #08c2ff) !important;
+}
+
/****************/
/** ANIMATIONS **/
/****************/
diff --git a/multichat-overlay/icons/platforms/kofi.png b/multichat-overlay/icons/platforms/kofi.png
new file mode 100644
index 0000000..8812cac
Binary files /dev/null and b/multichat-overlay/icons/platforms/kofi.png differ
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index f1cdc31..33910b1 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -46,6 +46,7 @@ const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true)
const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
+const showKofiDonations = GetBooleanParam("showKofiDonations", true);
// Set fonts for the widget
document.body.style.fontFamily = font;
@@ -204,6 +205,26 @@ client.on('Patreon.PledgeCreated', (response) => {
PatreonPledgeCreated(response.data);
})
+client.on('Kofi.Donation', (response) => {
+ console.debug(response.data);
+ KofiDonation(response.data);
+})
+
+client.on('Kofi.Subscription', (response) => {
+ console.debug(response.data);
+ KofiSubscription(response.data);
+})
+
+client.on('Kofi.Resubscription', (response) => {
+ console.debug(response.data);
+ KofiResubscription(response.data);
+})
+
+client.on('Kofi.ShopOrder', (response) => {
+ console.debug(response.data);
+ KofiShopOrder(response.data);
+})
+
///////////////////////
@@ -1103,8 +1124,8 @@ async function StreamElementsTip(data) {
AddMessageItem(instance, data.id);
}
-function PatreonPledgeCreated(data) {
- if (!showPatreonMemberships)
+function KofiDonation(data) {
+ if (!showKofiDonations)
return;
// Get a reference to the template
@@ -1122,14 +1143,135 @@ function PatreonPledgeCreated(data) {
const contentDiv = instance.querySelector("#content");
// Set the card background colors
- cardDiv.classList.add('patreon');
+ cardDiv.classList.add('kofi');
// Set the text
- const user = data.attributes.full_name;
- const amount = (data.attributes.will_pay_amount_cents/100).toFixed(2);
- const patreonIcon = `
`;
+ const user = data.from;
+ const amount = data.amount;
+ const currency = data.currency;
+ const message = data.message;
+ const kofiIcon = `
`;
- titleDiv.innerHTML = `${patreonIcon} ${user} joined Patreon ($${amount})`;
+ if (currency == "USD")
+ titleDiv.innerHTML = `${kofiIcon} ${user} donated $${amount}`;
+ else
+ titleDiv.innerHTML = `${kofiIcon} ${user} donated ${currency} ${amount}`;
+
+ if (message != null)
+ contentDiv.innerHTML = `${message}`;
+
+ AddMessageItem(instance, data.id);
+}
+
+function KofiSubscription(data) {
+ if (!showKofiDonations)
+ 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('kofi');
+
+ // Set the text
+ const user = data.from;
+ const amount = data.amount;
+ const currency = data.currency;
+ const message = data.message;
+ const kofiIcon = `
`;
+
+ if (currency == "USD")
+ titleDiv.innerHTML = `${kofiIcon} ${user} subscribed ($${amount})`;
+ else
+ titleDiv.innerHTML = `${kofiIcon} ${user} subscribed (${currency} ${amount})`;
+
+ if (message != null)
+ contentDiv.innerHTML = `${message}`;
+
+ AddMessageItem(instance, data.id);
+}
+
+function KofiResubscription(data) {
+ if (!showKofiDonations)
+ 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('kofi');
+
+ // Set the text
+ const user = data.from;
+ const tier = data.tier;
+ const message = data.message;
+ const kofiIcon = `
`;
+
+ titleDiv.innerHTML = `${kofiIcon} ${user} subscribed (${tier})`;
+ if (message != null)
+ contentDiv.innerHTML = `${message}`;
+
+ AddMessageItem(instance, data.id);
+}
+
+function KofiShopOrder(data) {
+ if (!showKofiDonations)
+ 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('kofi');
+
+ // Set the text
+ const user = data.from;
+ const amount = data.amount;
+ const currency = data.currency;
+ const message = data.message;
+ const itemTotal = data.items.length;
+ const kofiIcon = `
`;
+
+ if (currency == "USD")
+ titleDiv.innerHTML = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi ($${amount})`;
+ else
+ titleDiv.innerHTML = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi (${currency} ${amount})`;
+
+ if (message != null)
+ contentDiv.innerHTML = `${message}`;
AddMessageItem(instance, data.id);
}
diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json
index 5b9acc1..c53c3d1 100644
--- a/multichat-overlay/settings/settings.json
+++ b/multichat-overlay/settings/settings.json
@@ -277,6 +277,14 @@
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
+ {
+ "id": "showKofiDonations",
+ "label": "Ko-fi Donations",
+ "description": "",
+ "type": "checkbox",
+ "defaultValue": true,
+ "group": "Which donation messages do you want to see?"
+ },
{
"id": "address",
"label": "Address",
diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css
index 6abd7d8..f1cb362 100644
--- a/multichat-overlay/style.css
+++ b/multichat-overlay/style.css
@@ -211,6 +211,10 @@ li {
background: linear-gradient(#c76633, #fd5e0a) !important;
}
+.kofi {
+ background: linear-gradient(#54c7ee, #08c2ff) !important;
+}
+
/****************/
/** ANIMATIONS **/
/****************/