diff --git a/Bloody Chat (Data).txt b/Bloody Chat (Data).txt new file mode 100644 index 0000000..7b1c017 --- /dev/null +++ b/Bloody Chat (Data).txt @@ -0,0 +1 @@ +{"testMessage":"Test Message","showTopDegrade":"none","showBottonDegrade":"none","msgBorderColorUser":"nao","msgBorderColor":"rgba(1, 1, 1, 0)","msgBackgroundColor":"rgb(0, 0, 0)","badgeBackgroundColor":"rgba(255, 254, 254, 0)","msgBorderPaddingX":5,"msgBorderPaddingY":10,"backgroundColor":"rgba(1, 1, 1, 0)","carimboHora":"nao","font":"Montserrat","messageColor":"#ffffff","userColor":"#fff","usernameFontSize":"500","textShadow":"rgb(0, 0, 0) 0px 0px 0px","badgeSize":25,"usernameSize":20,"messageFontSize":"900","emoteSize":30,"alignMessages":"position: absolute","hideCommands":"true","messagesLimit":0,"hideAfter":0,"ignoredUsers":"StreamElements,StreamLabs,NightBot","animationIn":"fadeIn","animationOut":"fadeOutDownBig","widgetName":"Bloody Chat","widgetAuthor":"doublerainbowoverlay","messageSize":20,"fontSize":"400"} \ No newline at end of file diff --git a/Bloody Chat (Fields).txt b/Bloody Chat (Fields).txt new file mode 100644 index 0000000..3c2e3a0 --- /dev/null +++ b/Bloody Chat (Fields).txt @@ -0,0 +1,302 @@ +{ + "testMessage": { + "type": "button", + "label": "Test Message", + "value": "Test Message", + "group": "Test" + }, + "showTopDegrade": { + "label": "Show Upper Gradient:", + "type": "dropdown", + "value": "inline-block", + "options": { + "none": "No", + "inline-block": "Yes" + }, + "group": "Customization" + }, + "showBottonDegrade": { + "label": "Show Botton Gradient:", + "type": "dropdown", + "value": "inline-block", + "options": { + "none": "No", + "inline-block": "Yes" + }, + "group": "Customization" + }, + "msgBorderColorUser": { + "label": "Border Color Based on User:", + "type": "dropdown", + "value": "nao", + "options": { + "nao": "No", + "sim": "Yes" + }, + "group": "Customization" + }, + "msgBorderColor": { + "type": "colorpicker", + "label": "Message Border Color:", + "value": "#ffd539", + "group": "Customization" + }, + "msgBorderPaddingX": { + "type": "slider", + "label": "Border Padding Size (X Axis):", + "value": 8, + "min": 2, + "max": 24, + "step": 1, + "group": "Font" + }, + "msgBorderPaddingY": { + "type": "slider", + "label": "Border Padding Size (Y Axis):", + "value": 8, + "min": 2, + "max": 24, + "step": 1, + "group": "Font" + }, + "msgBackgroundColor": { + "type": "colorpicker", + "label": "Message Background Color:", + "value": "rgba(0,0,0,0)", + "group": "Customization" + }, + "badgeBackgroundColor": { + "type": "colorpicker", + "label": "Badge Background Color:", + "value": "rgba(0,0,0,0)", + "group": "Customization" + }, + "backgroundColor": { + "type": "colorpicker", + "label": "Chat Background Color:", + "value": "rgba(17,11,44,1)", + "group": "Customization" + }, + "carimboHora": { + "label": "Show Time Date Stamp:", + "type": "dropdown", + "value": "nao", + "options": { + "nao": "No", + "sim": "Yes" + }, + "group": "Customization" + }, + "font": { + "type": "googleFont", + "label": "Font:", + "value": "Roboto", + "group": "Font" + }, + "messageColor": { + "type": "colorpicker", + "label": "Message Color:", + "value": "#fff", + "group": "Font" + }, + "userColor": { + "type": "colorpicker", + "label": "User Color:", + "value": "#fff", + "group": "Font" + }, + "fontSize": { + "label": "Font Size:", + "type": "dropdown", + "value": "700", + "options": { + "100": "Fine (100)", + "300": "Soft (300)", + "400": "Regular (400)", + "500": "Medium (500)", + "700": "Bold (700)", + "900": "Bold Black (900)" + }, + "group": "Font" + }, + "textShadow": { + "type": "text", + "label": "Text Shadow:", + "value": "rgb(0, 0, 0) 0px 0px 0px", + "group": "Font" + }, + "badgeSize": { + "type": "slider", + "label": "Badges Size:", + "value": 24, + "min": 16, + "max": 36, + "step": 1, + "group": "Font" + }, + "usernameSize": { + "type": "slider", + "label": "Username Size:", + "value": 24, + "min": 16, + "max": 30, + "step": 1, + "group": "Font" + }, + "messageSize": { + "type": "slider", + "label": "Message Size:", + "value": 24, + "min": 16, + "max": 30, + "step": 1, + "group": "Font" + }, + "emoteSize": { + "type": "slider", + "label": "Emotes Size:", + "value": 24, + "min": 16, + "max": 60, + "step": 1, + "group": "Font" + }, + "alignMessages": { + "label": "Messages Direction:", + "type": "dropdown", + "value": "position: absolute", + "options": { + "display: block": "Up to Down", + "position: absolute": "Down to Up" + }, + "group": "Configurations" + }, + "hideCommands": { + "label": "Ignore Commands:", + "type": "dropdown", + "group": "Configurations", + "value": "true", + "options": { + "true": "Yes", + "false": "No" + }, + "group": "Configurations" + }, + "messagesLimit":{ + "type": "slider", + "label": "Messages Limit:", + "value": 0, + "min": 0, + "max": 50, + "step": 1, + "group": "Configurations" + }, + "hideAfter": { + "type": "slider", + "label": "Remove msg (0 to disable):", + "value": 0, + "min": 0, + "max": 60, + "step": 1, + "group": "Configurations" + }, + "ignoredUsers": { + "label": "Ignored Users (by commas):", + "type": "text", + "value": "StreamElements,StreamLabs,NightBot", + "group": "Configurations" + }, + "animationIn": { + "type": "dropdown", + "label": "In Animation:", + "value": "bounceInUp", + "options": { + "none": "None", + "bounceIn": "bounceIn", + "bounceInDown": "bounceInDown", + "bounceInLeft": "bounceInLeft", + "bounceInRight": "bounceInRight", + "bounceInUp": "bounceInUp", + "fadeIn": "fadeIn", + "fadeInDown": "fadeInDown", + "fadeInDownBig": "fadeInDownBig", + "fadeInLeft": "fadeInLeft", + "fadeInLeftBig": "fadeInLeftBig", + "fadeInRight": "fadeInRight", + "fadeInRightBig": "fadeInRightBig", + "fadeInUp": "fadeInUp", + "fadeInUpBig": "fadeInUpBig", + "flipInX": "flipInX", + "flipInY": "flipInY", + "lightSpeedIn": "lightSpeedIn", + "rotateIn": "rotateIn", + "rotateInDownLeft": "rotateInDownLeft", + "rotateInDownRight": "rotateInDownRight", + "rotateInUpLeft": "rotateInUpLeft", + "rotateInUpRight": "rotateInUpRight", + "slideInUp": "slideInUp", + "slideInDown": "slideInDown", + "slideInLeft": "slideInLeft", + "slideInRight": "slideInRight", + "zoomIn": "zoomIn", + "zoomInDown": "zoomInDown", + "zoomInLeft": "zoomInLeft", + "zoomInRight": "zoomInRight", + "zoomInUp": "zoomInUp", + "jackInTheBox": "jackInTheBox", + "rollIn": "rollIn" + }, + "group": "Configurations" + }, + "animationOut": { + "type": "dropdown", + "label": "Out Animation:", + "value": "none", + "options": { + "none": "None", + "bounceOut": "bounceOut", + "bounceOutDown": "bounceOutDown", + "bounceOutLeft": "bounceOutLeft", + "bounceOutRight": "bounceOutRight", + "bounceOutUp": "bounceOutUp", + "fadeOut": "fadeOut", + "fadeOutDown": "fadeOutDown", + "fadeOutDownBig": "fadeOutDownBig", + "fadeOutLeft": "fadeOutLeft", + "fadeOutLeftBig": "fadeOutLeftBig", + "fadeOutRight": "fadeOutRight", + "fadeOutRightBig": "fadeOutRightBig", + "fadeOutUp": "fadeOutUp", + "fadeOutUpBig": "fadeOutUpBig", + "flipOutX": "flipOutX", + "flipOutY": "flipOutY", + "lightSpeedOut": "lightSpeedOut", + "rotateOut": "rotateOut", + "rotateOutDownLeft": "rotateOutDownLeft", + "rotateOutDownRight": "rotateOutDownRight", + "rotateOutUpLeft": "rotateOutUpLeft", + "rotateOutUpRight": "rotateOutUpRight", + "slideOutUp": "slideOutUp", + "slideOutDown": "slideOutDown", + "slideOutLeft": "slideOutLeft", + "slideOutRight": "slideOutRight", + "zoomOut": "zoomOut", + "zoomOutDown": "zoomOutDown", + "zoomOutLeft": "zoomOutLeft", + "zoomOutRight": "zoomOutRight", + "zoomOutUp": "zoomOutUp", + "rollOut": "rollOut" + }, + "group": "Configurations" + }, + "widgetName": { + "type": "hidden", + "value": "Custom Chat", + "group": "Configurations" + }, + "widgetAuthor": { + "type": "hidden", + "value": "OVERKLOC", + "group": "Configurations" + } +} \ No newline at end of file diff --git a/Bloody Chat.css b/Bloody Chat.css new file mode 100644 index 0000000..61e1c98 --- /dev/null +++ b/Bloody Chat.css @@ -0,0 +1,70 @@ +@import url(https://fonts.googleapis.com/css?family={{font}}:{{fontSize}}); +@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'); + +* { box-sizing: border-box; } + +html, body { height: 100%; overflow: hidden; } + +body { background: {{backgroundColor}} !important; line-height: 1.5em; } + +.top-degrade {display: {{showTopDegrade}}; position: absolute; width: 100%; height: 50px; top: 0; left: 0; + background: rgb(17,11,44); + background: linear-gradient(180deg, rgba(17,11,44,1) 0%, rgba(17,11,44,0) 100%); z-index: 2;} + +.bottom-degrade {display: {{showBottonDegrade}}; position: absolute; width: 100%; height: 25px; + bottom: 0; left: 0; background: rgb(17,11,44); + background: linear-gradient(180deg, rgba(17,11,44,0) 0%, rgba(17,11,44,1) 100%); z-index: 2;} + +#log>div { position: relative; padding-top: 22px; margin-bottom: 60px; } + +.colon { display: none; } +.action { font-style: italic; } + +#log { {{alignMessages}}; box-sizing: border-box; width: 100%; bottom: 0; left: 0; padding: 10px 10px; } +#log>div.deleted { visibility: hidden; } + +/* ===== BLOOD ===== */ +#log .message .container-message:before { +content: ""; +display: block; +position: absolute; +top: 0px; +right: 0px; +width: 200px; +height: 100px; +background-image: url('https://i.gifer.com/5362.gif'); +background-size: cover; +border-radius: 5%; +z-index: 3; +} + + +/* ===== USERNAME ===== */ +#log .meta {position: absolute; top: -30px; left: 0px; padding: 7px 12px; line-height: 15px; + border-radius: 20px; z-index: 1; + font-family: {{font}}; font-size: {{usernameSize}}px; font-weight: {{fontSize}};} + #log .meta .name {float: left; line-height: 21px; color: {{userColor}};} + +/* ===== USERNAME2 ===== */ +#log .meta1 {position: absolute; top: -30px; left: 0px; padding: 0px 12px; line-height: 0px; + border-radius: 20px; z-index: 0; + font-family: {{font}}; font-size: {{usernameSize}}px; font-weight: {{fontSize}}; background-color: {{badgeBackgroundColor}}; } + #log .meta1 .badges {float: right; margin-left: 30px; margin-top: 0px; margin-bottom: 6px;} +#log .meta1 .badges > img { width: {{badgeSize}}px; height: {{badgeSize}}px; margin-right: 1px; border-radius: 20px; } + #log .meta1 .badges > img:last-child {margin-right: 0;} + #log .meta1 .name {float: left; line-height: 21px; color: {{userColor}};} + +/* ===== USERMESSAGE ===== */ +#log .message {position: relative; min-height: 20px;} +#log .message .container-message {color: {{messageColor}}; background: {{msgBackgroundColor}}; + text-shadow:{{textShadow}}; padding: {{msgBorderPaddingY}}px {{msgBorderPaddingX}}px; + border-radius: 10px 10px 10px 10px; display: inline-block; + font-family: {{font}}; font-size: {{messageSize}}px; font-weight: {{fontSize}}; word-break: break-word; width: 100%;} +#log .message .container-message .emote { height: {{emoteSize}}px; vertical-align: middle; } +#log .message .container-message .time { float: right; padding: 10px 0px 0px 0px; } + + + + + + diff --git a/Bloody Chat.html b/Bloody Chat.html new file mode 100644 index 0000000..36d67b3 --- /dev/null +++ b/Bloody Chat.html @@ -0,0 +1,6 @@ + +
+ +
+ +
\ No newline at end of file diff --git a/Bloody Chat.js b/Bloody Chat.js new file mode 100644 index 0000000..8abb88f --- /dev/null +++ b/Bloody Chat.js @@ -0,0 +1,310 @@ +let totalMessages = 0, messagesLimit = 0, channelName, provider, addition, removeSelector; +let hideCommands = "true"; +let messageSize = 24; +let hideAfter = 60; +let ignoredUsers = []; +let animationIn = 'bounceIn'; +let animationOut = 'bounceOut'; +let borderMessage = '#000000'; +let carimboHora = "nao"; + +window.addEventListener("onEventReceived", function (obj) { + // Deletar mensagens + if (obj.detail.listener === "delete-message") { + const msgId = obj.detail.event.msgId; + $(`.message-row[data-id=${msgId}]`).remove(); + return; + } else if (obj.detail.listener === "delete-messages") { + const userId = obj.detail.event.userId; + $(`.message-row[data-from=${userId}]`).remove(); + return; + } + + // Testar chat + if (obj.detail.event.listener === "widget-button") { + if (obj.detail.event.field === "testMessage") { + let emulated = new CustomEvent("onEventReceived", { + detail: { + listener: "message", + event: { + service: "twitch", + data: { + time: Date.now(), + tags: { + "badge-info": "", + badges: "moderator/1,partner/1", + color: "#5B99FF", + "display-name": "StreamElements", + emotes: "25:46-50", + flags: "", + id: "43285909-412c-4eee-b80d-89f72ba53142", + mod: "1", + "room-id": "85827806", + subscriber: "0", + "tmi-sent-ts": "1579444549265", + turbo: "0", + "user-id": "100135110", + "user-type": "mod", + }, + nick: channelName, + userId: "100135110", + displayName: channelName, + displayColor: "#5B99FF", + badges: [ + { + type: "moderator", + version: "1", + url: + "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", + description: "Moderator", + }, + { + type: "partner", + version: "1", + url: + "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", + description: "Verified", + }, + ], + channel: channelName, + text: "Boo! This is a test message. The bloody chat widget is working.", + isAction: !1, + emotes: [ + { + type: "twitch", + name: "Kappa", + id: "25", + gif: !1, + urls: { + 1: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0", + 2: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0", + 4: "https://static-cdn.jtvnw.net/emoticons/v1/25/3.0", + }, + start: 46, + end: 50, + }, + ], + msgId: "43285909-412c-4eee-b80d-89f72ba53142", + }, + renderedText: + 'Boo! This is a test message. The bloody chat widget is working ', + }, + }, + }); + window.dispatchEvent(emulated); + } + return; + } + + // Tratar mensagem + if (obj.detail.listener !== "message") return; + let data = obj.detail.event.data; + + if (data.text.startsWith("!") && hideCommands === "true") return; + + if (ignoredUsers.indexOf(data.nick) !== -1) return; + + let message = attachEmotes(data); + let badges = "", + badge; + for (let i = 0; i < data.badges.length; i++) { + badge = data.badges[i]; + badges += ` `; + } + + let color = data.tags.color; + if (color === "") { + const username = data.displayName; + color = data.displayColor !== "" ? data.displayColor : "#" + (md5(username).substr(26)); + } + + addMessage(obj.detail.event.data.displayName, + message, + badges, + data.userId, + data.msgId, + color, + data.isAction); +}); + +window.addEventListener("onWidgetLoad", function (obj) { + const fieldData = obj.detail.fieldData; + messagesLimit = fieldData.messagesLimit; + topDegrade = fieldData.topDegrade; + hideCommands = fieldData.hideCommands; + hideAfter = fieldData.hideAfter; + animationIn = fieldData.animationIn; + animationOut = fieldData.animationOut; + borderMessage = fieldData.msgBorderColor; + carimboHora = fieldData.carimboHora; + channelName = obj.detail.channel.username; + messageSize = fieldData.messageSize; + borderColorUser = fieldData.msgBorderColorUser; + ignoredUsers = fieldData.ignoredUsers + .toLowerCase() + .replace(" ", "") + .split(","); + fetch('https://api.streamelements.com/kappa/v2/channels/' + obj.detail.channel.id + '/').then(response => response.json()).then((profile) => { + provider = profile.provider; + }); + + if (fieldData.alignMessages === "display: block") { + addition = "prepend"; + removeSelector = ".message-row:nth-child(n+" + (messagesLimit + 1) + ")" + } else { + addition = "append"; + removeSelector = ".message-row:nth-last-child(n+" + (messagesLimit + 1) + ")" + } +}); + +function addMessage(username, message, badges, userId, msgId, color, isAction) { + totalMessages += 1; + let actionClass = ""; + if (isAction) { + actionClass = "action"; + } + + if (borderColorUser === "sim") { + borderMessage = color; + } + + let hora = ""; + if (carimboHora === "sim") { + let d = new Date(); + let messageSizeTime = messageSize-(messageSize/4); + hora = ` +
+
+ ${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(-2)} +
+ ` + } + + const element = $.parseHTML(` +
+
+
${username}
+
+ +
+
${badges}
+
${username}
+
+ +
+
+ ${message} + ${hora} +
+
+
`); + + if (addition === "append") { + if (hideAfter !== 0) { + $(element) + .appendTo('#log') + .delay(hideAfter * 1000) + .queue(function () { + $(this).removeClass(animationIn).addClass(animationOut).delay(1000).queue(function () { + $(this).remove() + }).dequeue(); + }); + } else { + $(element) + .appendTo('#log'); + } + } else { + if (hideAfter !== 0) { + $(element) + .prependTo('#log') + .delay(hideAfter * 1000) + .queue(function () { + $(this).removeClass(animationIn).addClass(animationOut).delay(1000).queue(function () { + $(this).remove() + }).dequeue(); + }); + } else { + $(element) + .prependTo('#log'); + } + } + + if (messagesLimit > 0 && totalMessages > messagesLimit) { + removeRow(); + } +} + +function attachEmotes(message) { + let text = html_encode(message.text); + let data = message.emotes; + if (typeof message.attachment !== "undefined") { + if (typeof message.attachment.media !== "undefined") { + if (typeof message.attachment.media.image !== "undefined") { + text = `${message.text}`; + } + } + } + return text.replace(/([^\s]*)/gi, function (m, key) { + let result = data.filter((emote) => { + return emote.name === key; + }); + if (typeof result[0] !== "undefined") { + let msgSize = messageSize + 5; + let url = result[0]["urls"][4]; + if (provider === "twitch") { + return ``; + } else { + if (typeof result[0].coords === "undefined") { + result[0].coords = { x: 0, y: 0 }; + } + let x = parseInt(result[0].coords.x); + let y = parseInt(result[0].coords.y); + + let width = "auto"; + let height = "auto"; + + if (provider === "mixer") { + console.log(result[0]); + if (result[0].coords.width) { + width = `${result[0].coords.width}px`; + } + if (result[0].coords.height) { + height = `${result[0].coords.height}px`; + } + } + return `
`; + } + } else return key; + }); +} + +function html_encode(e) { + return e.replace(/[<>"^]/g, function (e) { + return "&#" + e.charCodeAt(0) + ";"; + }); +} + +function removeRow() { + if (!$(removeSelector).length) { + return; + } + if (animationOut !== "none" || !$(removeSelector).hasClass(animationOut)) { + if (hideAfter !== 0) { + $(removeSelector).dequeue(); + } else { + $(removeSelector).addClass(animationOut).delay(1000).queue(function () { + $(this).remove().dequeue() + }); + + } + return; + } + + $(removeSelector).animate({ + height: 0, + opacity: 0 + }, 'slow', function () { + $(removeSelector).remove(); + }); +} + diff --git a/images/Animation/5362.gif b/images/Animation/5362.gif new file mode 100644 index 0000000..51a1794 Binary files /dev/null and b/images/Animation/5362.gif differ diff --git a/images/ChatBox/Chat Box/Livechat.png b/images/ChatBox/Chat Box/Livechat.png new file mode 100644 index 0000000..2af242b Binary files /dev/null and b/images/ChatBox/Chat Box/Livechat.png differ