-
Notifications
You must be signed in to change notification settings - Fork 0
/
hosted.html
109 lines (97 loc) · 3.69 KB
/
hosted.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
overflow: hidden;
}
img{
position: absolute;
opacity: 60%;
}
.drop{
transition: all 3s ease-in;
top: 100vh !important;
transform: scale(1) rotate3d(0,0,0,0deg) !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/comfy.js@latest/dist/comfy.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<script>
const channel = getUsername(); //Type your Twitch Username in in place of G2bb.
var emotes, count = 0;
function getUsername(){
var URL = window.location.search;
return URL.split('?')[1];
}
//Init ComfyJS and sends any emote names sent in chat through formatEmotes().
ComfyJS.Init( channel );
ComfyJS.onChat = ( user, message, flags, self, extra ) => {
formatEmotes(extra.messageEmotes);
}
//Pastes the image within the bounds of the browser source at a random size, position, and rotation.
function insert(url){
if (url == null){return};
var imgDestination = document.body;
var imgAdded = document.createElement("img");
imgAdded.src = url;
imgAdded.setAttribute("id", count);
imgDestination.appendChild(imgAdded);
ImgRandomPosition(imgAdded);
count++;
}
//Calculates where the emotes can be placed based on their random size such that they don't clip outside of the browser source.
function ImgRandomPosition(imgAdded){
var scale = randomInt(75, 300)/100;
var maxWidth = $(window).width() - (112 * scale);
var maxHeight = $(window).height() - (112 * scale);
var left = (randomInt(0, maxWidth) + ((scale * 112)-112)/2) + "px";
var top = (randomInt(0, maxHeight) + ((scale * 112)-112)/2) + "px";
var imagestyle = imgAdded.style;
imagestyle.top = top;
imagestyle.left = left;
imagestyle.transform = "scale(" + scale + ") rotate3d(" + randomInt(-5,5) + ", " + randomInt(-5,5) + ", " + randomInt(-5,5) + ", " + ranDeg() + "deg)";
drop(count);
cull(count);
}
//Create random numbers for ImgRandomPosition().
function randomInt(min, max) { // min and max included
var output = Math.floor(Math.random() * (max - min) + min);
return output;
}
function ranDeg(){
var RandOver = randomInt(-45, 45);
if (RandOver > 0){
return RandOver + 360;
} else {
return RandOver - 360;
}
}
//Animates the emote to drop after 3 seconds on screen.
function drop(num){
setTimeout(function(){
var id = this.num;
$("#" + num).addClass("drop");
}, 3000);
}
//Removes the emote from the DOM to save on resources.
function cull(num){
setTimeout(function(){
var id = "#" + num;
$(id).remove();
}, 6000);
}
//Takes the emote names from chat and formats their names through the URL that grabs the emote image
function formatEmotes(emotes) {
for(var i in emotes) {
var e = emotes[i];
for(var j in e) {
insert('http://static-cdn.jtvnw.net/emoticons/v2/' + i + '/default/dark/3.0');
}
}
}
</script>
</body>
</html>