Skip to content

Commit 3b38e05

Browse files
vortisrdvortisrd
committed
Confetti Added to Hype Train Level Up
1 parent 2a5935e commit 3b38e05

5 files changed

Lines changed: 50 additions & 12 deletions

File tree

‎chat.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@
165165

166166
</template>
167167

168-
168+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
169169
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/simple-notify.min.js"></script>
170170
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
171171
<script src="https://cdn.jsdelivr.net/npm/@streamerbot/[email protected]/dist/streamerbot-client.min.js"></script>

‎js/chatrd.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
const isOBS = typeof window.obsstudio !== 'undefined';
66

7+
let myConfetti;
8+
79
const showPlatform = getURLParam("showPlatform", true);
810
const showPlatformDot = getURLParam("showPlatformDot", false);
911
const showAvatar = getURLParam("showAvatar", true);
@@ -247,7 +249,7 @@ function addEventItem(platform, clone, classes, userid, messageid) {
247249
platformContent = `<img src="js/modules/twitch/images/golden-kappa-emote.png">`;
248250
}
249251
else if (isTwitch && root.classList.contains("treasure-train")) {
250-
platformContent = `<img src="js/modules/twitch/images/icon-treasure.svg">`;
252+
platformContent = `<img src="js/modules/twitch/images/icon-treasure-train.png">`;
251253
}
252254
else {
253255
platformContent = `<img src="js/modules/${platform}/images/logo-${platform}.svg">`;
@@ -1140,6 +1142,23 @@ function initFakeScrollbar(scrollEl, thumbEl) {
11401142

11411143

11421144

1145+
function createConfettiCanvas() {
1146+
const canvas = document.createElement('canvas');
1147+
canvas.style.cssText = `
1148+
position: fixed;
1149+
top: 0;
1150+
left: 0;
1151+
width: 100vw;
1152+
height: 100vh;
1153+
pointer-events: none;
1154+
z-index: 9999;
1155+
zoom: reset; /* cancela o zoom herdado */
1156+
`;
1157+
document.body.appendChild(canvas);
1158+
return canvas;
1159+
}
1160+
1161+
11431162
document.addEventListener("DOMContentLoaded", async function () {
11441163
console.debug(`[ChatRD] Initializing ...`);
11451164

@@ -1149,6 +1168,7 @@ document.addEventListener("DOMContentLoaded", async function () {
11491168

11501169
pushChatInputSettings();
11511170
loadChatInputSettingFromLocalStorage();
1171+
myConfetti = confetti.create(createConfettiCanvas(), { resize: true });
11521172

11531173
if (document.querySelector('#chat:not(.noscrollbar)')) {
11541174
const scroll = useAutoScroll(document.querySelector('#chat:not(.noscrollbar)'), {

‎js/modules/twitch/images/icon-treasure-train.png‎

6.9 KB
Loading

‎js/modules/twitch/module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -227,8 +227,6 @@
227227
transform: translateY(-50%);
228228

229229
background: #a970ff;
230-
outline: 1px solid rgba(255,255,255,0.25);
231-
outline-offset: -1px;
232230
font-size: 16px;
233231

234232
z-index: 111;
@@ -243,8 +241,10 @@
243241

244242
#hypetrain.treasure-train .info,
245243
#hypetrain.treasure-train .progressbar-fill {
246-
background: #ff9721;
244+
background: linear-gradient(to right, #2346b5, #a970ff);
247245
}
248246

249247
#chat .event.twitch.hypetrain.golden-kappa-train .message { background: #ffb521; }
250-
#chat .event.twitch.hypetrain.treasure-train .message { background: #ff9721; }
248+
#chat .event.twitch.hypetrain.treasure-train .message {
249+
background: linear-gradient(to right, #2346b5, #a970ff);
250+
}

‎js/modules/twitch/module.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1001,7 +1001,7 @@ async function twitchHypeTrainStart(data) {
10011001
const goalElement = document.querySelector('#goals');
10021002
const hypeTrainTemplate = document.querySelector('#hypetrain-template');
10031003
const hypeTrainClone = hypeTrainTemplate.content.cloneNode(true);
1004-
const hypeTrainElement = hypeTrainClone.firstElementChild;
1004+
const hypetrainElement = hypeTrainClone.firstElementChild;
10051005

10061006
const {
10071007
'progressbar-fill': progressBarFill,
@@ -1017,14 +1017,14 @@ async function twitchHypeTrainStart(data) {
10171017
);
10181018

10191019
if (is_golden_kappa_train == true) {
1020-
hypeTrainElement.classList.add('golden-kappa-train');
1020+
hypetrainElement.classList.add('golden-kappa-train');
10211021
logo.querySelector('img').src = 'js/modules/twitch/images/golden-kappa-emote.png';
10221022
icon.querySelector('span').textContent = tRD('twitch.hypetrain.bar_golden_kappa');
10231023
}
10241024

10251025
if (is_treasure_train == true) {
1026-
hypeTrainElement.classList.add('treasure-train');
1027-
logo.querySelector('img').src = 'js/modules/twitch/images/icon-treasure.svg';
1026+
hypetrainElement.classList.add('treasure-train');
1027+
logo.querySelector('img').src = 'js/modules/twitch/images/icon-treasure-train.png';
10281028
icon.querySelector('i').remove();
10291029
icon.querySelector('span').textContent = tRD('twitch.hypetrain.bar_treasure');
10301030
}
@@ -1036,9 +1036,10 @@ async function twitchHypeTrainStart(data) {
10361036
info.textContent = hypetrainInfo;
10371037
info.classList.add('animate__animated');
10381038

1039-
hypeTrainElement.classList.add('animate__fadeInDown');
1039+
hypetrainElement.classList.add('animate__fadeInDown');
1040+
hypetrainElement.querySelector('.info').classList.add('animate__fadeIn');
10401041

1041-
goalElement.insertAdjacentElement('beforeend', hypeTrainElement);
1042+
goalElement.insertAdjacentElement('beforeend', hypetrainElement);
10421043

10431044
requestAnimationFrame(() => {
10441045
requestAnimationFrame(() => {
@@ -1147,6 +1148,7 @@ async function twitchHypeTrainLevelUp(data) {
11471148
if (showTwitchHypeTrainBar == true) {
11481149

11491150
const hypetrainElement = document.querySelector('#hypetrain');
1151+
twitchConfettiBurst(hypetrainElement);
11501152

11511153
hypetrainElement.querySelector('.level').textContent = `LVL ${level}`;
11521154
hypetrainElement.querySelector('.progressbar-fill').style.width = `${htProgress}%`;
@@ -1818,4 +1820,20 @@ async function getTwitchUserPronouns(username) {
18181820
console.error(`Couldn't retrieve pronouns for ${username}:`, err);
18191821
return '';
18201822
}
1823+
}
1824+
1825+
function twitchConfettiBurst(el) {
1826+
const rect = el.getBoundingClientRect();
1827+
1828+
myConfetti({
1829+
particleCount: 100,
1830+
spread: 100,
1831+
startVelocity: 20,
1832+
gravity: 1.5,
1833+
ticks: 80,
1834+
origin: {
1835+
x: (rect.left + rect.width / 2) / window.innerWidth,
1836+
y: (rect.top + rect.height / 2) / window.innerHeight,
1837+
},
1838+
});
18211839
}

0 commit comments

Comments
 (0)