/** Welcome to your new overlay! The possibilities are nearly endless. * From here you can create, and edit a custom overlay until you are happy with it! * Once you're happy, you can publish it for others to use, or just use it for yourself! * This file is a starter file to help get you started. **/ //As you can see here, when making these overlays, you can use top level awaits! await Pixel.loadScripts([ "https://unpkg.com/animejs@3.2.1/lib/anime.min.js", "https://unpkg.com/howler@2.2.3/dist/howler.js", ]); /** * You may have noticed the use of the "Pixel" keyword. * This is a global class that you have access to while making these overlays. * It will allow you to listen for events, call certain api's, and more! * You can find more information about this in the documentation, * which can be found here: (replace link here) **/ const getSize = (element) => ({ x: element.getBoundingClientRect().width, y: element.getBoundingClientRect().height, }); const alertContainer = document.getElementById("alertContainer"); const containerPadding = 100; const alertType = document.querySelector(".alert-type"); const alertData = document.querySelector(".alert-data"); // Settings const displayTime = Number("{{displayTime}}"); let doFollow = "{{doFollow}}" === "true" ? true : false; let doSub = "{{doSub}}" === "true" ? true : false; let doResub = "{{doResub}}" === "true" ? true : false; let doGiftedSub = "{{doGiftedSub}}" === "true" ? true : false; let doBit = "{{doBit}}" === "true" ? true : false; let doHost = "{{doHost}}" === "true" ? true : false; let doRaid = "{{doRaid}}" === "true" ? true : false; // Audio Clips const audioVolume = Number("{{audioVolume}}") / 100; const followSound = "{{followSound}}"; const subSound = "{{subSound}}"; const reSubSound = "{{reSubSound}}"; const giftedSubSound = "{{giftedSubSound}}"; const bitSound = "{{bitSound}}"; const hostSound = "{{hostSound}}"; const raidSound = "{{raidSound}}"; class queue { constructor() { this.queue = []; } enqueue(...item) { this.queue.push(item); } hasNext() { return this.queue.length > 0; } getNext() { return this.queue.shift(); } } let q = new queue(); let isRunning = false; const runAlert = (msg, type, sound) => { if (isRunning) { q.enqueue(msg, type, sound); return; } isRunning = true; new Howl({ src: [sound], autoplay: true, volume: audioVolume, }); let typeWidth, typeHeight, dataWidth; alertType.innerHTML = type; alertData.innerHTML = msg; typeWidth = getSize(alertType).x; typeHeight = getSize(alertType).y; dataWidth = getSize(alertData).x; /** * Set the initial height and width to the event type text */ alertContainer.style.height = `${typeHeight}px`; // Scale container width anime .timeline({ targets: alertContainer, easing: "easeOutExpo", duration: 800, }) .add({ width: typeWidth + containerPadding, opacity: { value: 1, duration: 20 }, }) .add({ targets: alertContainer, width: dataWidth + containerPadding, opacity: 1, delay: 2000, }) .add({ targets: alertContainer, opacity: 0, duration: 600, delay: displayTime * 1000 - 5000 + 500, complete: () => { alertContainer.style.width = "0px"; isRunning = false; if (q.hasNext()) { let item = q.getNext(); runAlert(...item); } }, }); // Animate in alertType anime .timeline({ targets: alertType, easing: "easeOutExpo", }) .add({ translateY: ["100%", "0%"], duration: 1000, delay: 200, }) .add({ translateY: "-100%", delay: 1500, }); // Animate in alertData anime .timeline({ targets: alertData, easing: "easeOutExpo", }) .add({ translateY: ["100%", "0%"], duration: 1000, delay: 2800, }); }; Pixel.on("follow", (msg) => { if (!doFollow) return; runAlert(msg.user.name, "New Follower", followSound); }); Pixel.on("subscription", (msg) => { if (!doSub) return; runAlert( msg.user.name, msg.level ? `Tier ${msg.level} Sub` : "New Subscriber", subSound ); }); Pixel.on("resub", (msg) => { if (!doResub) return; runAlert( `${msg.user.name}: ${msg.months} month${msg.months > 1 ? "s" : ""}`, "New Resub", reSubSound ); }); Pixel.on("giftsub", (msg) => { if (!doGiftedSub) return; runAlert( `${msg.user.name} to ${msg.recipient.name}`, msg.level ? `Tier ${msg.level} gifted sub` : "New Gifted Sub", giftedSubSound ); }); Pixel.on("support", (msg) => { if (!doBit) return; runAlert( `${msg.username}: ${msg.amount} ${msg.currency}`, msg.currency, bitSound ); }); Pixel.on("host", (msg) => { if (!doHost) return; runAlert( `${msg.user.name}${msg.viewers && ":"} ${msg.viewers || ""}`, "New Host", hostSound ); }); Pixel.on("raid", (msg) => { if (!doRaid) return; runAlert( `${msg.user.name}${msg.viewers && ":"} ${msg.viewers || ""}`, "New Raid", raidSound ); });

Inspired by Genshin Impact

Recommended Overlays and Scenes