updated everything to make it general

README.md

@@ -1,5 +1,5 @@
-<h1 align="center">Twitch Subathon Countdown</h1>
-<p align="center">This is a countdown specifically made for the Twitch streamer "SugusSusana"</p>
+<h1 align="center">Twitch Subathon Countdown Template</h1>
+<p align="center">This is the template I created for my Twitch Subathon Countdowns</p>
 <br/>
 
 <h2>Description</h2>
@@ -14,17 +14,21 @@
 <p>After cloning this repository you'll have to edit the "config.js" file with any plain text editor, then change the value of the variables acording to what you want:</p>
 
 <h3>Streamlabs Token</h3>
-<p>To get the token you'll have to go to the api settings tab of your <a href="https://streamlabs.com/dashboard#/settings/api-settings">streamlabs dashboard</a> then click on tokens API, copy your socket API token and finally paste the code on the "streamlabsToken" variable in the "config.js" file.</p>
+<p>To get the token you'll have to go to the api settings tab of your <a href="https://streamlabs.com/dashboard#/settings/api-settings">Streamlabs dashboard</a> then click on API Tokens, copy your socket API token and finally paste the code on the "streamlabs_token" variable in the "config.js" file.</p>
 <img src="./auth_streamlabs.png">
 
+<h3>StreamElements Token</h3>
+<p>To get the token you'll have to go to your <a href="https://streamelements.com/dashboard/account/channels">StreamElements channels dashboard</a>, then click on show secrets, copy the Overlay token and paste the code on the "streamelements_token" variable in the "config.js" file.</p>
+<img src="./auth_streamelements.png">
+
 <h3>Streamloots Token</h3>
-<p>To get the token you'll have to go to your streamloots creator dashboard, then to alerts & widgets, then go to alerts, then copy the last part of the alerts url and finally paste the code on the "streamlootsToken" variable in the "config.js" file.</p>
+<p>To get the token you'll have to go to your Streamloots creator dashboard, then to alerts & widgets, then go to alerts, then copy the last part of the alerts url and finally paste the code on the "streamloots_token" variable in the "config.js" file.</p>
 <img src="./auth_streamloots.png">
 
 <h3>Initial Time</h3>
-<p>You can set the initial time of the timer by setting the hours, minutes and seconds to be added when the timer is added.</p>
+<p>You can set the initial time of the timer by setting the hours, minutes and seconds to be added when the timer is created.</p>
 
-<h3>Other Value</h3>
+<h3>Other Values</h3>
 <p>Change the other values to set the amount of seconds that will be added for the suscriptions, donations... And the minimum donation amounts to trigger the countdown increase.</p>
 
 <h3>Add To OBS</h3>

config.js

@@ -1,17 +1,36 @@
-var streamlabsToken = ""
-var streamlootsToken = ""
+// Login Data
+var twitch_channel_name = ""
+var streamlabs_token = ""
+var streamelements_token = ""
+var streamloots_token = ""
 
-var initialHours = 3
-var initialMinutes = 30
-var initialSeconds = 40
+// Initial Counter Config
+var initialHours = 5
+var initialMinutes = 0
+var initialSeconds = 0
 
-var secondsPerSub = 300
+// General Twitch, Streamlabs And StreamElements Config
+var seconds_added_per_sub_prime = 30
+var seconds_added_per_sub_tier1 = 30
+var seconds_added_per_sub_tier2 = 60
+var seconds_added_per_sub_tier3 = 120
 
-var secondsPerDono = 300
-var quantityDono = 5
+var seconds_added_per_resub_prime = 30
+var seconds_added_per_resub_tier1 = 30
+var seconds_added_per_resub_tier2 = 60
+var seconds_added_per_resub_tier3 = 120
 
-var secondsPerChest = 300
-var quantityChest = 10
+var seconds_added_per_giftsub_tier1 = 30
+var seconds_added_per_giftsub_tier2 = 60
+var seconds_added_per_giftsub_tier3 = 120
 
-var secondsPerBits = 300
-var quantityBits = 500
+var min_amount_of_bits = 500
+var seconds_added_per_bits = 30
+
+// Streamlabs And StreamElements Config
+var min_donation_amount = 5
+var seconds_added_per_donation = 30
+
+// Streamloots Config
+var min_amount_of_chests = 5
+var seconds_added_per_chests = 30

css/style.css

@@ -1,6 +1,7 @@
 body, body * {
     padding: 0;
     margin: 0;
+    font-family: 'Manrope', sans-serif;
 }
 
 body {
@@ -10,28 +11,36 @@ body {
 
 
 
+:root {
+    --background-color: #f7fff7;
+    --shadow-color: #00000020;
+    --text-color: #292f36;
+}
+
+
+
 #container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    background-color: var(--background-color);
+    box-shadow: 0 0 1.25rem 0.5rem var(--shadow-color);
+    width: 500px;
+    height: 180px;
+    border-radius: 30px;
 }
 
 #textDiv {
-    background-color: #bea0af;
-    width: 420px;
-    height: 150px;
-    border-radius: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
-    
+    height: 100%;
 }
 
 p {
-    color: #3c3341;
-    font-size: 4rem;
-    font-family: 'Manrope', sans-serif;
+    color: var(--text-color);
+    font-size: 5rem;
     z-index: 1;
 }
 
@@ -42,11 +51,28 @@ img {
 }
 
 canvas {
-    width: 420px;
-    height: 150px;
+    width: 500px;
+    height: 180px;
     border-radius: 20px;
     position: absolute;
     top: 0;
     bottom: 0;
     z-index: 2;
+}
+
+
+
+.addedTime {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    display: none;
+    z-index: 5;
+    font-weight: 400;
+    font-size: 3.25rem;
+    color: var(--background-color);
+    text-shadow: 0 0 1.5rem var(--text-color);
+    transition: top 1s ease-out, opacity .5s ease-out;
 }

index.html

@@ -10,17 +10,25 @@
     <link rel="stylesheet" href="css/style.css">
     <title>Subathon Timer</title>
 </head>
-<body onload="start()">
+<body>
     <div id="container">
         <div id="textDiv">
             <p id="timeText">00:00:00</p>
         </div>
-        <img src="assets/background.svg" alt="">
         <canvas id="canvas"></canvas>
     </div>
+
     <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js' type='text/javascript'></script>
+    <script src='js/lib/tmi.min.js'></script>
+    <script src="js/lib/generalFunc.js"></script>
+    <script src="js/lib/timeFunc.js"></script>
+
     <script src="config.js"></script>
-    <script src="js/timeFunc.js"></script>
     <script src="js/script.js"></script>
+
+    <script src="js/api/twitch.js"></script>
+    <!-- <script src="js/api/streamlabs.js"></script> -->
+    <!-- <script src="js/api/streamelements.js"></script> -->
+    <!-- <script src="js/api/streamloots.js"></script> -->
 </body>
 </html>

js/api/streamelements.js

@@ -0,0 +1,122 @@
+if (streamelements_token !== "") {
+    var streamElementsSocket;
+    const streamElementsConnect = () => {
+        streamElementsSocket = undefined;
+        streamElementsSocket = io('https://realtime.streamelements.com', {
+            transports: ['websocket']
+        });
+
+        streamElementsSocket.on('connect', onConnect);
+        streamElementsSocket.on('disconnect', onDisconnect);
+        streamElementsSocket.on('authenticated', onAuthenticated);
+        streamElementsSocket.on('unauthorized', console.error);
+        streamElementsSocket.on('event:test', onEvent);
+        streamElementsSocket.on('event', onEvent);
+        streamElementsSocket.on('event:update', onEvent);
+        streamElementsSocket.on('event:reset', onEvent);
+
+        function onConnect() {
+            logMessage("StreamElements", "Socket Connected");
+            streamElementsSocket.emit('authenticate', {method: 'apikey', token: streamelements_token});
+        }
+
+        function onDisconnect() {
+            logMessage("StreamElements", "Socket Disconnected");
+            streamElementsConnect();
+        }
+
+        function onAuthenticated(data) {
+            const {
+                channelId
+            } = data;
+            logMessage("StreamElements", `Channel ${channelId} Connected`);
+        }
+
+        function onEvent(data) {
+            logObject("StreamElements", data);
+            if (!countdownEnded) {
+                if (data['listener'] === "subscriber-latest") {
+                    if (data['event']['gifted'] || data['event']['bulkGifted']) {
+                        let amount;
+                        if (data['event']['gifted']) amount = 1;
+                        else amount = data['event']['amount'];
+                        if (data['event']['tier'] == "prime" || data['event']['tier'] == "1000") {
+                            addTime(endingTime, seconds_added_per_giftsub_tier1 * amount);
+                            logMessage("StreamElements", `Added ${seconds_added_per_giftsub_tier1 * amount} Seconds Because ${data['event']['name']} Gifted ${amount} Tier 1 Subs`);
+                        }
+                        else if (data['event']['tier'] == "2000") {
+                            addTime(endingTime, seconds_added_per_giftsub_tier2 * amount);
+                            logMessage("StreamElements", `Added ${seconds_added_per_giftsub_tier2 * amount} Seconds Because ${data['event']['name']} Gifted ${amount} Tier 2 Subs`);
+                        }
+                        else if (data['event']['tier'] == "3000") {
+                            addTime(endingTime, seconds_added_per_giftsub_tier3 * amount);
+                            logMessage("StreamElements", `Added ${seconds_added_per_giftsub_tier3 * amount} Seconds Because ${data['event']['name']} Gifted ${amount} Tier 3 Subs`);
+                        }
+                    }
+                    else if (data['event']['amount'] != "1") {
+                        if (data['event']['tier'] == "prime") {
+                            addTime(endingTime, seconds_added_per_resub_prime);
+                            logMessage("StreamElements", `Added ${seconds_added_per_resub_prime} Seconds Because ${data['event']['name']} ReSubscribed With Prime`);
+                        }
+                        else if (data['event']['tier'] == "1000") {
+                            addTime(endingTime, seconds_added_per_resub_tier1);
+                            logMessage("StreamElements", `Added ${seconds_added_per_resub_tier1} Seconds Because ${data['event']['name']} ReSubscribed With Tier 1`);
+                        }
+                        else if (data['event']['tier'] == "2000") {
+                            addTime(endingTime, seconds_added_per_resub_tier2);
+                            logMessage("StreamElements", `Added ${seconds_added_per_resub_tier2} Seconds Because ${data['event']['name']} ReSubscribed With Tier 2`);
+                        }
+                        else if (data['event']['tier'] == "3000") {
+                            addTime(endingTime, seconds_added_per_resub_tier3);
+                            logMessage("StreamElements", `Added ${seconds_added_per_resub_tier3} Seconds Because ${data['event']['name']} ReSubscribed With Tier 3`);
+                        }
+                    }
+                    else {
+                        if (data['event']['tier'] == "prime") {
+                            addTime(endingTime, seconds_added_per_sub_prime);
+                            logMessage("StreamElements", `Added ${seconds_added_per_sub_prime} Seconds Because ${data['event']['name']} Subscribed With Prime`);
+                        }
+                        else if (data['event']['tier'] == "1000") {
+                            addTime(endingTime, seconds_added_per_sub_tier1);
+                            logMessage("StreamElements", `Added ${seconds_added_per_sub_tier1} Seconds Because ${data['event']['name']} Subscribed With Tier 1`);
+                        }
+                        else if (data['event']['tier'] == "2000") {
+                            addTime(endingTime, seconds_added_per_sub_tier2);
+                            logMessage("StreamElements", `Added ${seconds_added_per_sub_tier2} Seconds Because ${data['event']['name']} Subscribed With Tier 2`);
+                        }
+                        else if (data['event']['tier'] == "3000") {
+                            addTime(endingTime, seconds_added_per_sub_tier3);
+                            logMessage("StreamElements", `Added ${seconds_added_per_sub_tier3} Seconds Because ${data['event']['name']} Subscribed With Tier 3`);
+                        }
+                    }
+                    if (!users.includes(data['event']['name'])) {
+                        users.push(data['event']['name']);
+                    }
+                }
+
+                else if (data['listener'] === "cheer-latest") {
+                    if (data['event']['amount'] >= min_amount_of_bits) {
+                        let times = Math.floor(data['event']['amount']/min_amount_of_bits);
+                        addTime(endingTime, seconds_added_per_bits * times);
+                        logMessage("StreamElements", `Added ${seconds_added_per_bits * times} Seconds Because ${data['event']['name']} Donated ${data['event']['amount']} Bits`);
+                        if (!users.includes(data['event']['name'])) {
+                            users.push(data['event']['name']);
+                        }
+                    }
+                }
+
+                else if (data['listener'] === "tip-latest") {
+                    if (data['event']['amount'] >= min_donation_amount) {
+                        let times = Math.floor(data['event']['amount']/min_donation_amount);
+                        addTime(endingTime, seconds_added_per_donation * times);
+                        logMessage("StreamElements", `Added ${seconds_added_per_donation * times} Seconds Because ${data['event']['name']} Donated ${data['event']['amount']}$`);
+                        if (!users.includes(data['event']['name'])) {
+                            users.push(data['event']['name']);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    streamElementsConnect();
+}

js/api/streamlabs.js

@@ -0,0 +1,116 @@
+if (streamlabs_token !== "") {
+    socket = io(`https://sockets.streamlabs.com?token=${streamlabs_token}`, {transports: ['websocket']});
+
+    socket.on("connect", () => {
+        logMessage("Streamlabs", "Socket Connected");
+    });
+
+    socket.on("event", (event) => {
+        logObject("Streamlabs", event);
+        if (event.type == "subscription" && !event.message[0].gifter) {
+            if (!countdownEnded) {
+                if (event.message[0].sub_plan == "1000") {
+                    addTime(endingTime, seconds_added_per_sub_tier1);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_sub_tier1} Seconds Because ${event.message[0].name} Subscribed With Tier 1`);
+                }
+                else if (event.message[0].sub_plan == "2000") {
+                    addTime(endingTime, seconds_added_per_sub_tier2);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_sub_tier2} Seconds Because ${event.message[0].name} Subscribed With Tier 2`);
+                }
+                else if (event.message[0].sub_plan == "3000") {
+                    addTime(endingTime, seconds_added_per_sub_tier3);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_sub_tier3} Seconds Because ${event.message[0].name} Subscribed With Tier 3`);
+                }
+                else {
+                    addTime(endingTime, seconds_added_per_sub_prime);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_sub_prime} Seconds Because ${event.message[0].name} Subscribed With Prime`);
+                }
+                if (!users.includes(event.message[0].name)) {
+                    users.push(event.message[0].name);
+                }
+            }
+        }
+
+        else if (event.type == "resub" && !event.message[0].gifter) {
+            if (!countdownEnded) {
+                if (event.message[0].sub_plan == "1000") {
+                    addTime(endingTime, seconds_added_per_resub_tier1);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_resub_tier1} Seconds Because ${event.message[0].name} ReSubscribed With Tier 1`);
+                }
+                else if (event.message[0].sub_plan == "2000") {
+                    addTime(endingTime, seconds_added_per_resub_tier2);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_resub_tier2} Seconds Because ${event.message[0].name} ReSubscribed With Tier 2`);
+                }
+                else if (event.message[0].sub_plan == "3000") {
+                    addTime(endingTime, seconds_added_per_resub_tier3);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_resub_tier3} Seconds Because ${event.message[0].name} ReSubscribed With Tier 3`);
+                }
+                else {
+                    addTime(endingTime, seconds_added_per_resub_prime);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_resub_prime} Seconds Because ${event.message[0].name} ReSubscribed With Prime`);
+                }
+                if (!users.includes(event.message[0].name)) {
+                    users.push(event.message[0].name);
+                }
+            }
+        }
+
+        else if (event.message[0].gifter) {
+            if (!countdownEnded) {
+                if (event.message[0].sub_plan == "1000") {
+                    addTime(endingTime, seconds_added_per_giftsub_tier1);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_giftsub_tier1} Seconds Because ${event.message[0].gifter} Gifted A Tier 1 Sub`);
+                }
+                else if (event.message[0].sub_plan == "2000") {
+                    addTime(endingTime, seconds_added_per_giftsub_tier2);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_giftsub_tier2} Seconds Because ${event.message[0].gifter} Gifted A Tier 2 Sub`);
+                }
+                else if (event.message[0].sub_plan == "3000") {
+                    addTime(endingTime, seconds_added_per_giftsub_tier3);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_giftsub_tier3} Seconds Because ${event.message[0].gifter} Gifted A Tier 3 Sub`);
+                }
+                else {
+                    addTime(endingTime, seconds_added_per_giftsub_tier1);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_giftsub_tier1} Seconds Because ${event.message[0].gifter} Gifted A Tier 1 Sub`);
+                }
+                if (!users.includes(event.message[0].name)) {
+                    users.push(event.message[0].name);
+                }
+            }
+        }
+
+        else if (event.type == "donation") {
+            if (!countdownEnded) {
+                let dono = parseInt(event.message[0].amount);
+                let currency = event.message[0].currency;
+                if (dono >= min_donation_amount) {
+                    let times = Math.floor(dono/min_donation_amount);
+                    addTime(endingTime, seconds_added_per_donation * times);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_donation * times} Seconds Because ${event.message[0].name} Donated ${dono} ${currency}`);
+                    if (!users.includes(event.message[0].name)) {
+                        users.push(event.message[0].name);
+                    }
+                }
+            }
+        }
+
+        else if (event.type == "bits") {
+            if (!countdownEnded) {
+                let bits = parseInt(event.message[0].amount);
+                if (bits >= min_amount_of_bits) {
+                    let times = Math.floor(bits/min_amount_of_bits);
+                    addTime(endingTime, seconds_added_per_bits * times);
+                    logMessage("Streamlabs", `Added ${seconds_added_per_bits * times} Seconds Because ${event.message[0].name} Donated ${bits} Bits`);
+                    if (!users.includes(event.message[0].name)) {
+                        users.push(event.message[0].name);
+                    }
+                }
+            }
+        }
+    });
+
+    socket.on("disconnect", () => {
+        logMessage("Streamlabs", "Socket Disconnected");
+        socket.connect();
+    });
+}

js/api/streamloots.js

@@ -0,0 +1,36 @@
+if (streamloots_token !== "") {
+    evtSourceStreamLoots = new EventSource(`https://widgets.streamloots.com/alerts/${streamloots_token}/media-stream`);
+    logMessage("Streamloots", "Event Source Created");
+
+    evtSourceStreamLoots.onmessage = async (event) => {
+        data = await JSON.parse(event.data);
+        logObject("Streamloots", data);
+        if (data.data.type == "purchase") {
+            if (!countdownEnded) {
+                let chests;
+                if (typeof(data.data.fields[0].value) == "number") {
+                    chests = data.data.fields[0].value;
+                    if (chests >= min_amount_of_chests) {
+                        let times = Math.floor(chests/min_amount_of_chests);
+                        addTime(endingTime, seconds_added_per_chests * times);
+                        logMessage("Streamloots", `Added ${seconds_added_per_chests * times} Seconds Because ${data.data.fields[1].value} Bought ${chests} Chests`);
+                        if (!users.includes(data.data.fields[1].value)) {
+                            users.push(data.data.fields[1].value);
+                        }
+                    }
+                }
+                else {
+                    chests = data.data.fields[1].value;
+                    if (chests >= min_amount_of_chests) {
+                        let times = Math.floor(chests/min_amount_of_chests);
+                        addTime(endingTime, seconds_added_per_chests * times);
+                        logMessage("Streamloots", `Added ${seconds_added_per_chests * times} Seconds Because ${data.data.fields[0].value} Gifted ${chests} Chests`);
+                        if (!users.includes(data.data.fields[0].value)) {
+                            users.push(data.data.fields[0].value);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

js/api/twitch.js

@@ -0,0 +1,99 @@
+if (twitch_channel_name !== "") {
+    const client = new tmi.client({
+        channels: [twitch_channel_name],
+    });
+
+    client.connect();
+    logMessage("Twitch", `Client Connected`);
+
+    client.on('subscription', (channel, username, methods, message, userstate) => {
+        if (!countdownEnded) {
+            switch (methods['plan']) {
+                case "Prime":
+                    addTime(endingTime, seconds_added_per_sub_prime);
+                    logMessage("Twitch", `Added ${seconds_added_per_sub_prime} Seconds Because ${username} Subscribed With Prime`);
+                    break;
+                case "1000":
+                    addTime(endingTime, seconds_added_per_sub_tier1);
+                    logMessage("Twitch", `Added ${seconds_added_per_sub_tier1} Seconds Because ${username} Subscribed With Tier 1`);
+                    break;
+                case "2000":
+                    addTime(endingTime, seconds_added_per_sub_tier2);
+                    logMessage("Twitch", `Added ${seconds_added_per_sub_tier2} Seconds Because ${username} Subscribed With Tier 2`);
+                    break;
+                case "3000":
+                    addTime(endingTime, seconds_added_per_sub_tier3);
+                    logMessage("Twitch", `Added ${seconds_added_per_sub_tier3} Seconds Because ${username} Subscribed With Tier 3`);
+                    break;
+            }
+            if (!users.includes(username)) {
+                users.push(username);
+            }
+        }
+    });
+
+    client.on('resub', (channel, username, months, message, userstate, methods) => {
+        if (!countdownEnded) {
+            switch (methods['plan']) {
+                case "Prime":
+                    addTime(endingTime, seconds_added_per_resub_prime);
+                    logMessage("Twitch", `Added ${seconds_added_per_resub_prime} Seconds Because ${username} ReSubscribed With Prime`);
+                    break;
+                case "1000":
+                    addTime(endingTime, seconds_added_per_resub_tier1);
+                    logMessage("Twitch", `Added ${seconds_added_per_resub_tier1} Seconds Because ${username} ReSubscribed With Tier 1`);
+                    break;
+                case "2000":
+                    addTime(endingTime, seconds_added_per_resub_tier2);
+                    logMessage("Twitch", `Added ${seconds_added_per_resub_tier2} Seconds Because ${username} ReSubscribed With Tier 2`);
+                    break;
+                case "3000":
+                    addTime(endingTime, seconds_added_per_resub_tier3);
+                    logMessage("Twitch", `Added ${seconds_added_per_resub_tier3} Seconds Because ${username} ReSubscribed With Tier 3`);
+                    break;
+            }
+            if (!users.includes(username)) {
+                users.push(username);
+            }
+        }
+    });
+
+    client.on('subgift', (channel, username, months, recipient, methods, userstate) => {
+        if (!countdownEnded) {
+            switch (methods['plan']) {
+                case "Prime":
+                    addTime(endingTime, seconds_added_per_giftsub_tier1);
+                    logMessage("Twitch", `Added ${seconds_added_per_giftsub_tier1} Seconds Because ${username} Gifted A Tier 1 Sub`);
+                    break;
+                case "1000":
+                    addTime(endingTime, seconds_added_per_giftsub_tier1);
+                    logMessage("Twitch", `Added ${seconds_added_per_giftsub_tier1} Seconds Because ${username} Gifted A Tier 1 Sub`);
+                    break;
+                case "2000":
+                    addTime(endingTime, seconds_added_per_giftsub_tier2);
+                    logMessage("Twitch", `Added ${seconds_added_per_giftsub_tier2} Seconds Because ${username} Gifted A Tier 2 Sub`);
+                    break;
+                case "3000":
+                    addTime(endingTime, seconds_added_per_giftsub_tier3);
+                    logMessage("Twitch", `Added ${seconds_added_per_giftsub_tier3} Seconds Because ${username} Gifted A Tier 3 Sub`);
+                    break;
+            }
+            if (!users.includes(username)) {
+                users.push(username);
+            }
+        }
+    });
+
+    client.on('cheer', (channel, userstate, message) => {
+        if (!countdownEnded) {
+            if (userstate.bits >= min_amount_of_bits) {
+                let times = Math.floor(userstate.bits/min_amount_of_bits);
+                addTime(endingTime, seconds_added_per_bits * times);
+                logMessage("Twitch", `Added ${seconds_added_per_bits * times} Seconds Because ${userstate['display-name']} Donated ${userstate.bits} Bits`);
+                if (!users.includes(userstate['display-name'])) {
+                    users.push(userstate['display-name']);
+                }
+            }
+        }
+    });
+}

js/lib/generalFunc.js

@@ -0,0 +1,15 @@
+const sleep = (ms) => {
+    return new Promise(resolve => setTimeout(resolve, ms));
+};
+
+const randomInRange = (min, max) => {
+    return Math.floor(Math.random() * (max - min)) + min;
+};
+
+const logMessage = (module, message) => {
+    console.log(`[${module}]: ${message}`);
+};
+
+const logObject = (module, object) => {
+    console.log(`[${module}]: `, object);
+};

js/script.js

@@ -1,76 +1,60 @@
-const start = () => {
-    screenWidth = window.innerWidth;
-    screenHeight = window.innerHeight;
+const timeText = document.getElementById("timeText");
 
-    endingTime = new Date(Date.now());
-    endingTime = timeFunc.addHours(endingTime, initialHours);
-    endingTime = timeFunc.addMinutes(endingTime, initialMinutes);
-    endingTime = timeFunc.addSeconds(endingTime, initialSeconds);
+let endingTime = new Date(Date.now());
+endingTime = timeFunc.addHours(endingTime, initialHours);
+endingTime = timeFunc.addMinutes(endingTime, initialMinutes);
+endingTime = timeFunc.addSeconds(endingTime, initialSeconds);
 
-    timeText = document.getElementById("timeText");
+let countdownEnded = false;
+let users = [];
+let time;
 
-    const getNextTime = () => {
-        let currentTime = new Date(Date.now());
-        let differenceTime = endingTime - currentTime;
-        let time = `${timeFunc.getHours(differenceTime)}:${timeFunc.getMinutes(differenceTime)}:${timeFunc.getSeconds(differenceTime)}`;
-        if (time === "00:00:00") {
-            clearInterval(inter);
-            time = "¡FIN!";
-            console.log(time);
-        }
-        timeText.innerText = time;
+const getNextTime = () => {
+    let currentTime = new Date(Date.now());
+    let differenceTime = endingTime - currentTime;
+    time = `${timeFunc.getHours(differenceTime)}:${timeFunc.getMinutes(differenceTime)}:${timeFunc.getSeconds(differenceTime)}`;
+    if (differenceTime <= 0) {
+        clearInterval(countdownUpdater);
+        countdownEnded = true;
+        time = "00:00:00";
     }
+    timeText.innerText = time;
+};
 
-    const inter = setInterval(() => {
-        getNextTime();
-    }, 100);
+let countdownUpdater = setInterval(() => {
+    getNextTime();
+}, 100);
 
 
 
-    socket = io(`https://sockets.streamlabs.com?token=${streamlabsToken}`, {transports: ['websocket']})
+const addTime = async (time, s) => {
+    endingTime = timeFunc.addSeconds(time, s);
+    let addedTime = document.createElement("p");
+    addedTime.classList = "addedTime";
+    addedTime.innerText = `+${s}s`;
+    document.body.appendChild(addedTime);
+    addedTime.style.display = "block";
+    await sleep(50);
+    addedTime.style.left = `${randomInRange(35, 65)}%`;
+    addedTime.style.top = `${randomInRange(25, 45)}%`;
+    addedTime.style.opacity = "1";
+    await sleep(2500);
+    addedTime.style.opacity = "0";
+    await sleep(500);
+    addedTime.remove();
+};
 
-    socket.on("connect", () => {
-        console.log("Socket Connected");
-    });
 
-    socket.on("event", (event) => {
-        console.log(event);
-        if (event.type == "subscription" || event.type == "resub") {
-            endingTime = timeFunc.addSeconds(endingTime, secondsPerSub);
+
+const testAddTime = (times, delay) => {
+    let addTimeInterval = setInterval(async () => {
+        if (times > 0) {
+            await sleep(randomInRange(50, delay-50));
+            addTime(endingTime, 30);
+            --times;
         }
-        else if (event.type == "donation") {
-            if (parseInt(event.message[0].amount) >= quantityDono) {
-                endingTime = timeFunc.addSeconds(endingTime, secondsPerDono);
-            }
+        else {
+            clearInterval(addTimeInterval);
         }
-        else if (event.type == "bits") {
-            if (parseInt(event.message[0].amount) >= quantityBits) {
-                endingTime = timeFunc.addSeconds(endingTime, secondsPerBits);
-            }
-        }
-    });
-
-    socket.on("disconnect", () => {
-        console.log("Socket Disconnected");
-    });
-
-
-
-    evtSourceStreamLoots = new EventSource(`https://widgets.streamloots.com/alerts/${streamlootsToken}/media-stream`);
-
-    evtSourceStreamLoots.onmessage = async (event) => {
-        data = await JSON.parse(event.data);
-        if (data.data.type == "purchase") {
-            if (typeof(data.data.fields[0].value) == "number") {
-                if (data.data.fields[0].value >= quantityChest) {
-                    endingTime = timeFunc.addSeconds(endingTime, secondsPerChest);
-                }
-            }
-            else {
-                if (data.data.fields[1].value >= quantityChest) {
-                    endingTime = timeFunc.addSeconds(endingTime, secondsPerChest);
-                }
-            }
-        }
-    }
-}
+    }, delay);
+};